111 lines
3.7 KiB
Vue
111 lines
3.7 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { type MapPen, MapPointType } from '@api/map';
|
||
|
|
import type { EditorService } from '@core/editor.service';
|
||
|
|
import { computed, inject, type InjectionKey, ref, type ShallowRef } from 'vue';
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
token: InjectionKey<ShallowRef<EditorService>>;
|
||
|
|
current?: string;
|
||
|
|
};
|
||
|
|
const props = defineProps<Props>();
|
||
|
|
const editor = inject(props.token)!;
|
||
|
|
|
||
|
|
const keyword = ref<string>('');
|
||
|
|
|
||
|
|
//#region 点位列表
|
||
|
|
const points = computed<MapPen[]>(() =>
|
||
|
|
editor.value.points.value.filter(({ label }) => label?.includes(keyword.value)),
|
||
|
|
);
|
||
|
|
//#endregion
|
||
|
|
|
||
|
|
//#region 线路列表
|
||
|
|
//#endregion
|
||
|
|
|
||
|
|
//#region 区域列表
|
||
|
|
//#endregion
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-input class="search mb-16" :placeholder="$t('请输入搜索关键字')" v-model:value="keyword">
|
||
|
|
<template #suffix>
|
||
|
|
<i class="icon search size-16" />
|
||
|
|
</template>
|
||
|
|
</a-input>
|
||
|
|
|
||
|
|
<a-collapse style="flex: auto; overflow-y: auto" expand-icon-position="end" ghost>
|
||
|
|
<template #expandIcon="v">
|
||
|
|
<i class="icon dropdown" :class="{ active: v?.isActive }" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<a-collapse-panel :header="$t('互斥区')"></a-collapse-panel>
|
||
|
|
|
||
|
|
<a-collapse-panel :header="$t('非互斥区')"></a-collapse-panel>
|
||
|
|
|
||
|
|
<a-collapse-panel :header="$t('仅载货可通行路线')"></a-collapse-panel>
|
||
|
|
|
||
|
|
<a-collapse-panel :header="$t('仅空载可通行路线')"></a-collapse-panel>
|
||
|
|
|
||
|
|
<a-collapse-panel :header="$t('禁行路线')"></a-collapse-panel>
|
||
|
|
|
||
|
|
<a-collapse-panel :header="$t('等待点')">
|
||
|
|
<a-list rowKey="id" :data-source="points.filter(({ point }) => point?.type === MapPointType.等待点)">
|
||
|
|
<template #renderItem="{ item }">
|
||
|
|
<a-list-item
|
||
|
|
class="ph-16"
|
||
|
|
:class="{ selected: item.id === current }"
|
||
|
|
style="height: 36px"
|
||
|
|
@click="editor.active(item.id)"
|
||
|
|
>
|
||
|
|
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
|
||
|
|
</a-list-item>
|
||
|
|
</template>
|
||
|
|
</a-list>
|
||
|
|
</a-collapse-panel>
|
||
|
|
|
||
|
|
<a-collapse-panel :header="$t('充电点')">
|
||
|
|
<a-list rowKey="id" :data-source="points.filter(({ point }) => point?.type === MapPointType.充电点)">
|
||
|
|
<template #renderItem="{ item }">
|
||
|
|
<a-list-item
|
||
|
|
class="ph-16"
|
||
|
|
:class="{ selected: item.id === current }"
|
||
|
|
style="height: 36px"
|
||
|
|
@click="editor.active(item.id)"
|
||
|
|
>
|
||
|
|
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
|
||
|
|
</a-list-item>
|
||
|
|
</template>
|
||
|
|
</a-list>
|
||
|
|
</a-collapse-panel>
|
||
|
|
|
||
|
|
<a-collapse-panel :header="$t('停靠点')">
|
||
|
|
<a-list rowKey="id" :data-source="points.filter(({ point }) => point?.type === MapPointType.停靠点)">
|
||
|
|
<template #renderItem="{ item }">
|
||
|
|
<a-list-item
|
||
|
|
class="ph-16"
|
||
|
|
:class="{ selected: item.id === current }"
|
||
|
|
style="height: 36px"
|
||
|
|
@click="editor.active(item.id)"
|
||
|
|
>
|
||
|
|
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
|
||
|
|
</a-list-item>
|
||
|
|
</template>
|
||
|
|
</a-list>
|
||
|
|
</a-collapse-panel>
|
||
|
|
|
||
|
|
<a-collapse-panel :header="$t('禁行点')">
|
||
|
|
<a-list rowKey="id" :data-source="points.filter(({ point }) => point?.type === MapPointType.禁行点)">
|
||
|
|
<template #renderItem="{ item }">
|
||
|
|
<a-list-item
|
||
|
|
class="ph-16"
|
||
|
|
:class="{ selected: item.id === current }"
|
||
|
|
style="height: 36px"
|
||
|
|
@click="editor.active(item.id)"
|
||
|
|
>
|
||
|
|
<a-typography-text type="secondary">{{ item.label }}</a-typography-text>
|
||
|
|
</a-list-item>
|
||
|
|
</template>
|
||
|
|
</a-list>
|
||
|
|
</a-collapse-panel>
|
||
|
|
</a-collapse>
|
||
|
|
</template>
|