121 lines
4.3 KiB
Vue
121 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import { MapAreaType, type MapPen, type MapPointInfo, MapPointType, type Rect } from '@api/map';
|
|
import type { EditorService } from '@core/editor.service';
|
|
import sTheme from '@core/theme.service';
|
|
import { isNil } from 'lodash-es';
|
|
import { computed, inject, type InjectionKey, type ShallowRef } from 'vue';
|
|
|
|
type Props = {
|
|
token: InjectionKey<ShallowRef<EditorService>>;
|
|
current?: string;
|
|
};
|
|
const props = defineProps<Props>();
|
|
const editor = inject(props.token)!;
|
|
|
|
const pen = computed<MapPen | undefined>(() => editor.value.getPenById(props.current));
|
|
const point = computed<MapPointInfo | null>(() => {
|
|
const v = pen.value?.point;
|
|
if (!v?.type) return null;
|
|
return v;
|
|
});
|
|
const rect = computed<Partial<Rect>>(() => {
|
|
if (isNil(point.value)) return {};
|
|
const { x, y } = editor.value.getPointRect(pen.value!) ?? {};
|
|
return { x, y };
|
|
});
|
|
|
|
const bindRobot = computed<string>(
|
|
() =>
|
|
point.value?.robots
|
|
?.map((v) => editor.value.getRobotById(v)?.label)
|
|
.filter((v) => !!v)
|
|
.join('、') ?? '',
|
|
);
|
|
const bindAction = computed<string>(
|
|
() =>
|
|
point.value?.actions
|
|
?.map((v) => editor.value.getPenById(v))
|
|
.filter((v) => v?.point?.type === MapPointType.动作点)
|
|
.map((v) => v?.label)
|
|
.filter((v) => !!v)
|
|
.join('、') ?? '',
|
|
);
|
|
|
|
const mapAreas = (type: MapAreaType): string => {
|
|
const id = pen.value?.id;
|
|
if (!id) return '';
|
|
return editor.value
|
|
.getBoundAreas(id, 'point', type)
|
|
.map(({ label }) => label)
|
|
.filter((v) => !!v)
|
|
.join('、');
|
|
};
|
|
const coArea1 = computed<string>(() => mapAreas(MapAreaType.库区));
|
|
const coArea2 = computed<string>(() => mapAreas(MapAreaType.互斥区));
|
|
</script>
|
|
|
|
<template>
|
|
<a-card :bordered="false">
|
|
<template v-if="pen && point">
|
|
<a-row :gutter="[8, 8]">
|
|
<a-col :span="24">
|
|
<a-flex align="center" :gap="8">
|
|
<i class="icon point" />
|
|
<a-typography-text class="card-title" style="flex: auto" :content="pen.label" ellipsis />
|
|
<a-tag :bordered="false">{{ $t(MapPointType[point.type]) }}</a-tag>
|
|
</a-flex>
|
|
</a-col>
|
|
|
|
<a-col :span="24">
|
|
<a-typography-text code>{{ pen.desc || $t('暂无描述') }}</a-typography-text>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-list class="block mt-16">
|
|
<a-list-item>
|
|
<a-typography-text type="secondary">{{ $t('站点坐标') }}</a-typography-text>
|
|
<a-typography-text>({{ rect.x?.toFixed() }},{{ rect.y?.toFixed() }})</a-typography-text>
|
|
</a-list-item>
|
|
<a-list-item v-if="[MapPointType.充电点, MapPointType.停靠点].includes(point.type)">
|
|
<a-flex :gap="8" vertical>
|
|
<a-typography-text type="secondary">{{ $t('绑定机器人') }}</a-typography-text>
|
|
<a-typography-text>{{ bindRobot || $t('暂无') }}</a-typography-text>
|
|
</a-flex>
|
|
</a-list-item>
|
|
<a-list-item v-if="MapPointType.等待点 === point.type">
|
|
<a-flex :gap="8" vertical>
|
|
<a-typography-text type="secondary">{{ $t('绑定动作点') }}</a-typography-text>
|
|
<a-typography-text>{{ bindAction || $t('暂无') }}</a-typography-text>
|
|
</a-flex>
|
|
</a-list-item>
|
|
<a-list-item v-if="MapPointType.动作点 === point.type">
|
|
<a-flex :gap="8" vertical>
|
|
<a-typography-text type="secondary">{{ $t('关联库区') }}</a-typography-text>
|
|
<a-typography-text>{{ coArea1 || $t('暂无') }}</a-typography-text>
|
|
</a-flex>
|
|
</a-list-item>
|
|
<a-list-item
|
|
v-if="
|
|
[
|
|
MapPointType.普通点,
|
|
MapPointType.电梯点,
|
|
MapPointType.自动门点,
|
|
MapPointType.等待点,
|
|
MapPointType.充电点,
|
|
MapPointType.停靠点,
|
|
MapPointType.动作点,
|
|
MapPointType.临时避让点,
|
|
].includes(point.type)
|
|
"
|
|
>
|
|
<a-flex :gap="8" vertical>
|
|
<a-typography-text type="secondary">{{ $t('关联互斥区') }}</a-typography-text>
|
|
<a-typography-text>{{ coArea2 || $t('暂无') }}</a-typography-text>
|
|
</a-flex>
|
|
</a-list-item>
|
|
</a-list>
|
|
</template>
|
|
<a-empty v-else :image="sTheme.empty" />
|
|
</a-card>
|
|
</template>
|