60 lines
2.1 KiB
Vue
60 lines
2.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { MAP_ROUTE_TYPE, type MapPen, type MapRouteInfo, MapRoutePassType } 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>>;
|
||
|
|
editable?: boolean;
|
||
|
|
current?: string;
|
||
|
|
};
|
||
|
|
const props = defineProps<Props>();
|
||
|
|
const editor = inject(props.token)!;
|
||
|
|
|
||
|
|
const pen = computed<MapPen | undefined>(() => editor.value.getPenById(props.current));
|
||
|
|
const route = computed<MapRouteInfo | null>(() => {
|
||
|
|
const v = pen.value?.route;
|
||
|
|
if (!v?.type) return null;
|
||
|
|
return v;
|
||
|
|
});
|
||
|
|
|
||
|
|
const label = computed<string>(() => editor.value.getRouteLabel(pen.value?.id));
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-card :bordered="false">
|
||
|
|
<template v-if="pen && route">
|
||
|
|
<a-row :gutter="[8, 8]">
|
||
|
|
<a-col :span="24">
|
||
|
|
<a-flex align="center" :gap="8">
|
||
|
|
<i class="icon route" />
|
||
|
|
<a-typography-text class="card-title" style="flex: auto" :content="label" ellipsis />
|
||
|
|
<a-tag :bordered="false">{{ $t(MapRoutePassType[route.pass ?? MapRoutePassType.无]) }}</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>{{ $t(MAP_ROUTE_TYPE[route.type]) }}</a-typography-text>
|
||
|
|
</a-list-item>
|
||
|
|
<a-list-item>
|
||
|
|
<a-typography-text type="secondary">{{ $t('路段长度') }}</a-typography-text>
|
||
|
|
<a-typography-text>{{ pen.length?.toFixed() }}</a-typography-text>
|
||
|
|
</a-list-item>
|
||
|
|
<a-list-item>
|
||
|
|
<a-typography-text style="flex: none" type="secondary">{{ $t('路段方向') }}</a-typography-text>
|
||
|
|
<a-typography-text :content="label" ellipsis />
|
||
|
|
</a-list-item>
|
||
|
|
</a-list>
|
||
|
|
</template>
|
||
|
|
<a-empty v-else :image="sTheme.empty" />
|
||
|
|
</a-card>
|
||
|
|
</template>
|