80 lines
2.7 KiB
Vue
80 lines
2.7 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { type MapAreaInfo, MapAreaType, type MapPen } from '@api/map';
|
||
|
|
import type { EditorService } from '@core/editor.service';
|
||
|
|
import sTheme from '@core/theme.service';
|
||
|
|
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 area = computed<MapAreaInfo | null>(() => {
|
||
|
|
const area = pen.value?.area;
|
||
|
|
if (!area?.type) return null;
|
||
|
|
return area;
|
||
|
|
});
|
||
|
|
|
||
|
|
const icon = computed<string>(() => `area${area.value?.type}-detail`);
|
||
|
|
|
||
|
|
const bindPoint = computed<string>(
|
||
|
|
() =>
|
||
|
|
area.value?.points
|
||
|
|
?.map((v) => editor.value.getPenById(v)?.label)
|
||
|
|
.filter((v) => !!v)
|
||
|
|
.join('、') ?? '',
|
||
|
|
);
|
||
|
|
const bindRoute = computed<string>(
|
||
|
|
() =>
|
||
|
|
area.value?.routes
|
||
|
|
?.map((v) => editor.value.getRouteLabel(v))
|
||
|
|
.filter((v) => !!v)
|
||
|
|
.join('、') ?? '',
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-card :bordered="false">
|
||
|
|
<template v-if="pen && area">
|
||
|
|
<a-row :gutter="[8, 8]">
|
||
|
|
<a-col :span="24">
|
||
|
|
<a-flex align="center" :gap="8">
|
||
|
|
<i class="icon" :class="icon" />
|
||
|
|
<a-typography-text class="card-title" style="flex: auto" :content="pen.label" ellipsis />
|
||
|
|
<a-tag :bordered="false">{{ $t(MapAreaType[area.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 v-if="MapAreaType.库区 === area.type">
|
||
|
|
<a-flex :gap="8" vertical>
|
||
|
|
<a-typography-text type="secondary">{{ $t('绑定动作点') }}</a-typography-text>
|
||
|
|
<a-typography-text>{{ bindPoint || $t('暂无') }}</a-typography-text>
|
||
|
|
</a-flex>
|
||
|
|
</a-list-item>
|
||
|
|
<a-list-item v-if="[MapAreaType.互斥区, MapAreaType.非互斥区].includes(area.type)">
|
||
|
|
<a-flex :gap="8" vertical>
|
||
|
|
<a-typography-text type="secondary">{{ $t('绑定站点') }}</a-typography-text>
|
||
|
|
<a-typography-text>{{ bindPoint || $t('暂无') }}</a-typography-text>
|
||
|
|
</a-flex>
|
||
|
|
</a-list-item>
|
||
|
|
<a-list-item v-if="MapAreaType.互斥区 === area.type">
|
||
|
|
<a-flex :gap="8" vertical>
|
||
|
|
<a-typography-text type="secondary">{{ $t('绑定路段') }}</a-typography-text>
|
||
|
|
<a-typography-text>{{ bindRoute || $t('暂无') }}</a-typography-text>
|
||
|
|
</a-flex>
|
||
|
|
</a-list-item>
|
||
|
|
</a-list>
|
||
|
|
</template>
|
||
|
|
<a-empty v-else :image="sTheme.empty" />
|
||
|
|
</a-card>
|
||
|
|
</template>
|