feat: 更新点位和区域面板，添加新类型点位的展示，优化用户界面结构
This commit is contained in:
parent
2e5dd24f39
commit
72f0415f27
@ -63,8 +63,16 @@ const select = (id: string) => {
|
|||||||
</a-list>
|
</a-list>
|
||||||
</a-collapse-panel>
|
</a-collapse-panel>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<a-collapse-panel :header="$t('互斥区')">
|
<!-- 点位类型面板 -->
|
||||||
<a-list rowKey="id" :data-source="areas.filter(({ area }) => area?.type === MapAreaType.互斥区)">
|
<a-collapse-panel :header="$t('普通点')">
|
||||||
|
<a-list
|
||||||
|
rowKey="id"
|
||||||
|
:data-source="
|
||||||
|
points.filter(
|
||||||
|
({ id, point }) => point?.type === MapPointType.普通点 && !id?.includes('view-center-point'),
|
||||||
|
)
|
||||||
|
"
|
||||||
|
>
|
||||||
<template #renderItem="{ item }">
|
<template #renderItem="{ item }">
|
||||||
<a-list-item
|
<a-list-item
|
||||||
class="ph-16"
|
class="ph-16"
|
||||||
@ -78,8 +86,159 @@ const select = (id: string) => {
|
|||||||
</a-list>
|
</a-list>
|
||||||
</a-collapse-panel>
|
</a-collapse-panel>
|
||||||
|
|
||||||
<a-collapse-panel :header="$t('非互斥区')">
|
<a-collapse-panel :header="$t('等待点')">
|
||||||
<a-list rowKey="id" :data-source="areas.filter(({ area }) => area?.type === MapAreaType.非互斥区)">
|
<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="select(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="select(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="select(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="select(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="select(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="select(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="select(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="select(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="select(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="select(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="routes.filter(({ route }) => route?.pass === MapRoutePassType.无)">
|
||||||
<template #renderItem="{ item }">
|
<template #renderItem="{ item }">
|
||||||
<a-list-item
|
<a-list-item
|
||||||
class="ph-16"
|
class="ph-16"
|
||||||
@ -144,8 +303,9 @@ const select = (id: string) => {
|
|||||||
</a-list>
|
</a-list>
|
||||||
</a-collapse-panel>
|
</a-collapse-panel>
|
||||||
|
|
||||||
<a-collapse-panel :header="$t('普通路线')">
|
<!-- 区域类型面板 -->
|
||||||
<a-list rowKey="id" :data-source="routes.filter(({ route }) => route?.pass === MapRoutePassType.无)">
|
<a-collapse-panel :header="$t('互斥区')">
|
||||||
|
<a-list rowKey="id" :data-source="areas.filter(({ area }) => area?.type === MapAreaType.互斥区)">
|
||||||
<template #renderItem="{ item }">
|
<template #renderItem="{ item }">
|
||||||
<a-list-item
|
<a-list-item
|
||||||
class="ph-16"
|
class="ph-16"
|
||||||
@ -159,68 +319,8 @@ const select = (id: string) => {
|
|||||||
</a-list>
|
</a-list>
|
||||||
</a-collapse-panel>
|
</a-collapse-panel>
|
||||||
|
|
||||||
<a-collapse-panel :header="$t('等待点')">
|
<a-collapse-panel :header="$t('非互斥区')">
|
||||||
<a-list rowKey="id" :data-source="points.filter(({ point }) => point?.type === MapPointType.等待点)">
|
<a-list rowKey="id" :data-source="areas.filter(({ area }) => area?.type === MapAreaType.非互斥区)">
|
||||||
<template #renderItem="{ item }">
|
|
||||||
<a-list-item
|
|
||||||
class="ph-16"
|
|
||||||
:class="{ selected: item.id === current }"
|
|
||||||
style="height: 36px"
|
|
||||||
@click="select(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="select(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="select(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="select(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 }">
|
<template #renderItem="{ item }">
|
||||||
<a-list-item
|
<a-list-item
|
||||||
class="ph-16"
|
class="ph-16"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user