web-map/src/components/pen-groups.vue

<script setup lang="ts">
import { MapAreaType, type MapPen, MapPointType, MapRoutePassType } 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;
  onlyArea1?: boolean;
};
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 线路列表
const routes = computed<MapPen[]>(() =>
  editor.value.routes.value.filter(({ label }) => label?.includes(keyword.value)),
);
//#endregion

//#region 区域列表
const areas = computed<MapPen[]>(() => editor.value.areas.value.filter(({ label }) => label?.includes(keyword.value)));
//#endregion

const select = (id: string) => {
  editor.value.active(id);
  editor.value.gotoById(id);
};
</script>

<template>
  <a-flex class="full" vertical>
    <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 v-if="onlyArea1" :header="$t('库区')">
        <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>
      <template v-else>
        <a-collapse-panel :header="$t('互斥区')">
          <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="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="routes.filter(({ route }) => route?.pass === MapRoutePassType.仅载货可通行)"
          >
            <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 }">
              <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 }">
              <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 }">
              <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>
      </template>
    </a-collapse>
  </a-flex>
</template>