feat(vimp): 新增资源面板组件并修正导入拼写错误

修复vimp页面资源面板组件的导入文件名拼写错误，新增的资源面板支持多标签资源分类、折叠展开切换以及对应标签页的搜索过滤功能。
feat(vimp): 新增摄像头和告警通道的全局索引记录及构建方法
2026-06-09 15:34:45 +08:00 · 2026-06-09 13:17:59 +08:00 · 2026-06-09 13:16:33 +08:00 · 2026-06-08 14:40:58 +08:00 · 2026-06-08 13:38:38 +08:00 · 2026-06-04 22:06:49 +08:00
17 changed files with 413 additions and 186 deletions
@@ -13,9 +13,27 @@ import destr from 'destr';
 import { isFunction } from 'es-toolkit';
 import localforage from 'localforage';
 import { DownloadIcon, Trash2Icon, UploadIcon } from 'lucide-vue-next';
-import { NButton, NButtonGroup, NDivider, NDrawer, NDrawerContent, NDropdown, NFlex, NFormItem, NIcon, NInput, NInputNumber, NModal, NSwitch, NText, NTooltip, type DropdownOption } from 'naive-ui';
+import {
+  NButton,
+  NButtonGroup,
+  NDivider,
+  NDrawer,
+  NDrawerContent,
+  NDropdown,
+  NFlex,
+  NFormItem,
+  NIcon,
+  NInput,
+  NInputNumber,
+  NModal,
+  NSwitch,
+  NText,
+  NTooltip,
+  type DropdownOption,
+  type InputInst,
+} from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, ref, watch } from 'vue';
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
 import { useRouter } from 'vue-router';

 const router = useRouter();
@@ -149,8 +167,14 @@ useEventListener('keydown', (event) => {
 });

 const expectToShowDebugCodeInput = ref(false);
+const debugCodeInputRef = useTemplateRef<InputInst>('debug-code-input-ref');
 const onModalAfterEnter = () => {
  expectToShowDebugCodeInput.value = !debugMode.value;
+  if (expectToShowDebugCodeInput.value) {
+    nextTick(() => {
+      debugCodeInputRef.value?.focus();
+    });
+  }
 };
 const onModalAfterLeave = () => {
  expectToShowDebugCodeInput.value = false;
@@ -412,7 +436,7 @@ const onClickVersion = () => {
      <NText v-else>确认关闭调试模式</NText>
    </template>
    <template #default>
-      <NInput v-if="expectToShowDebugCodeInput" v-model:value="debugCode" placeholder="输入调试码" @keyup.enter="enableDebugMode" />
+      <NInput ref="debug-code-input-ref" v-if="expectToShowDebugCodeInput" v-model:value="debugCode" placeholder="输入调试码" @keyup.enter="enableDebugMode" />
    </template>
    <template #action>
      <NButton @click="showDebugCodeModal = false">取消</NButton>
@@ -1,9 +1,59 @@
-import type { AxiosError, AxiosRequestConfig, CreateAxiosDefaults } from 'axios';
-import axios from 'axios';
+import type { AxiosError, AxiosRequestConfig, AxiosResponse, CreateAxiosDefaults, InternalAxiosRequestConfig } from 'axios';
+import axios, { isAxiosError } from 'axios';
 import type { VimpResponse, VimpResult } from '../../types';
+import { useUserStore } from '@/stores';
+import { getAppEnvConfig } from '@/utils';
+import router from '@/router';
+
+export interface VimpRequestOptions extends CreateAxiosDefaults {
+  requestInterceptor?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>;
+  responseInterceptor?: (resp: AxiosResponse) => AxiosResponse | Promise<AxiosResponse>;
+  responseErrorInterceptor?: (error: any) => any;
+}
+
+export const createVimpClient = (config?: VimpRequestOptions) => {
+  const defaultRequestInterceptor = (config: InternalAxiosRequestConfig) => config;
+  const defaultResponseInterceptor = (response: AxiosResponse) => response;
+  const defaultResponseErrorInterceptor = (error: any) => {
+    if (isAxiosError(error)) {
+      if (error.status === 401) {
+        // 处理 401 错误
+      }
+      if (error.status === 404) {
+        // 处理 404 错误
+      }
+    }
+    return Promise.reject(error);
+  };
+
+  const requestInterceptor = config?.requestInterceptor ?? defaultRequestInterceptor;
+  const responseInterceptor = config?.responseInterceptor ?? defaultResponseInterceptor;
+  const responseErrorInterceptor = config?.responseErrorInterceptor ?? defaultResponseErrorInterceptor;

-export const createVimpClient = (config?: CreateAxiosDefaults) => {
  const instance = axios.create(config);
+  instance.interceptors.request.use(requestInterceptor);
+  instance.interceptors.response.use(responseInterceptor, responseErrorInterceptor);
+
+  const vimpGet = <T>(url: string, options?: AxiosRequestConfig & { retRaw?: boolean }): Promise<VimpResponse<T>> => {
+    const { retRaw, ...reqConfig } = options ?? {};
+    return new Promise((resolve) => {
+      instance
+        .get(url, {
+          ...reqConfig,
+        })
+        .then((res) => {
+          if (retRaw) {
+            resolve([null, res.data as T, null]);
+          } else {
+            const resData = res.data as VimpResult<T>;
+            resolve([null, resData.data, resData]);
+          }
+        })
+        .catch((err) => {
+          resolve([err as AxiosError, null, null]);
+        });
+    });
+  };

  const vimpPost = <T>(url: string, data?: AxiosRequestConfig['data'], options?: Partial<Omit<AxiosRequestConfig, 'data'>> & { retRaw?: boolean; upload?: boolean }): Promise<VimpResponse<T>> => {
    const { retRaw, upload, ...reqConfig } = options ?? {};
@@ -24,9 +74,40 @@ export const createVimpClient = (config?: CreateAxiosDefaults) => {
    });
  };

+  const httpPut = <T>(url: string, data?: AxiosRequestConfig['data'], options?: Partial<Omit<AxiosRequestConfig, 'data'>>): Promise<VimpResponse<T>> => {
+    const reqConfig = options ?? {};
+    return new Promise((resolve) => {
+      instance
+        .put<VimpResult<T>>(url, data, { ...reqConfig })
+        .then((res) => {
+          resolve([null, res.data.data, res.data]);
+        })
+        .catch((err) => {
+          resolve([err as AxiosError, null, null]);
+        });
+    });
+  };
+
+  const httpDelete = <T>(url: string, idList: string[], options?: Partial<Omit<AxiosRequestConfig, 'data'>>): Promise<VimpResponse<T>> => {
+    const reqConfig = options ?? {};
+    return new Promise((resolve) => {
+      instance
+        .delete<VimpResult<T>>(url, { ...reqConfig, data: idList })
+        .then((res) => {
+          resolve([null, res.data.data, res.data]);
+        })
+        .catch((err) => {
+          resolve([err as AxiosError, null, null]);
+        });
+    });
+  };
+
  return {
    instance,
+    get: vimpGet,
    post: vimpPost,
+    put: httpPut,
+    delete: httpDelete,
  };
 };

@@ -42,4 +123,30 @@ export const unwrapVimpResponse = <T>(resp: VimpResponse<T>) => {

 export const vimpClient = createVimpClient({
  baseURL: `/vimp/api/client`,
+  requestInterceptor: (config) => {
+    const userStore = useUserStore();
+    const { lampAuthorization, lampClientId, lampClientSecret } = getAppEnvConfig();
+    const newAuthorization = window.btoa(`${lampClientId}:${lampClientSecret}`);
+    const authorization = lampAuthorization.trim() !== '' ? lampAuthorization : newAuthorization;
+    config.headers.set('accept-language', 'zh-CN,zh;q=0.9');
+    config.headers.set('accept', 'application/json, text/plain, */*');
+    config.headers.set('Applicationid', '');
+    config.headers.set('Tenantid', '1');
+    config.headers.set('Authorization', authorization);
+    config.headers.set('token', userStore.userLoginResult?.token ?? '');
+    return config;
+  },
+  responseInterceptor: (response) => {
+    return response;
+  },
+  responseErrorInterceptor: (error) => {
+    const err = error as AxiosError;
+    if (err.response?.status === 401) {
+      window.$message.error('登录超时，请重新登录');
+      const userStore = useUserStore();
+      userStore.resetStore();
+      router.push({ path: '/login' });
+    }
+    return Promise.reject(error);
+  },
 });
@@ -1,2 +1,2 @@
 export * from './vimp-channel';
-export * from './vimp-station';
+export * from './vimp-site';
@@ -0,0 +1,17 @@
+export interface VimpRawSite {
+  code: string;
+  name: string;
+  online?: boolean;
+}
+
+export interface VimpSite {
+  code: string;
+  name: string;
+  online: boolean;
+}
+
+export const normalizeVimpSite = (site: VimpRawSite): VimpSite => ({
+  code: site.code,
+  name: site.name,
+  online: site.online ?? true,
+});
@@ -1,5 +0,0 @@
-export interface VimpStation {
-  code: string;
-  name: string;
-  online: boolean;
-}
@@ -1,11 +1,11 @@
 import { unwrapVimpResponse, vimpClient } from '../client';
-import type { VimpStation } from '../model';
+import { normalizeVimpSite, type VimpRawSite } from '../model';

 export const catalogAllDeviceApi = async (options?: { signal?: AbortSignal }) => {
  const { signal } = options ?? {};
  const client = vimpClient;
  const endpoint = `/catalog/allDevice`;
-  const resp = await client.post<VimpStation[]>(endpoint, {}, { signal });
+  const resp = await client.post<VimpRawSite[]>(endpoint, {}, { signal });
  const data = unwrapVimpResponse(resp);
-  return data;
+  return data?.map(normalizeVimpSite) ?? null;
 };
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { NTabPane, NTabs, NTree, type TreeOverrideNodeClickBehavior, type TreeProps } from 'naive-ui';
+import { NIcon, NTabPane, NTabs, NTree, type TreeOverrideNodeClickBehavior, type TreeProps } from 'naive-ui';
 import { h, type CSSProperties } from 'vue';
 import { useAlarmStore, useResourcePanelStore } from '../stores';
 import { storeToRefs } from 'pinia';
-import { useDeviceCenterQuery } from '../composables';
+import { useChannelsQuery } from '../composables';
 import { isAlarmNode, isAlarmSiteNode, isAlarmAreaNode } from '../types';
+import { SirenIcon } from 'lucide-vue-next';

-const { isLoading } = useDeviceCenterQuery();
+const { isLoading } = useChannelsQuery();

 const alarmStore = useAlarmStore();
 const { lineTabPanes } = storeToRefs(alarmStore);
@@ -51,6 +52,9 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
    const alarmNodeStyle: CSSProperties = {
      opacity: alarmOnline() ? 1 : 0.5,
      cursor: alarmOnline() ? 'pointer' : 'not-allowed',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '6px',
    };
    return h(
      'div',
@@ -69,7 +73,7 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
          event.dataTransfer?.setData('name', alarm.name);
        },
      },
-      alarm.name,
+      [h(NIcon, () => h(SirenIcon)), h('span', alarm.name)],
    );
  }

@@ -77,6 +81,21 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
  return option.label;
 };

+const renderNodeSuffix: TreeProps['renderSuffix'] = ({ option }) => {
+  if (isAlarmSiteNode(option)) {
+    const { online, offline, total } = option.stats;
+    return `(${online}/${offline}/${total})`;
+  }
+
+  if (isAlarmAreaNode(option)) {
+    const { online, offline, total } = option.stats;
+    const suffixStyle: CSSProperties = option.areaLevel === 1 ? { marginRight: '8px', opacity: 0.6 } : { marginRight: '16px', opacity: 0.4 };
+    return h('div', { style: suffixStyle }, `(${online}/${offline}/${total})`);
+  }
+
+  return null;
+};
+
 const resourcePanelStore = useResourcePanelStore();
 const { searchPattern } = storeToRefs(resourcePanelStore);

@@ -98,6 +117,7 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
      virtual-scroll
      style="height: 100%"
      :render-label="renderNodeLabel"
+      :render-suffix="renderNodeSuffix"
      :override-default-node-click-behavior="overrideNodeClickBehavior"
      :default-expand-all="searchPattern.trim().length > 0"
      :show-irrelevant-nodes="false"
@@ -107,22 +127,42 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
    />
  </template>
  <template v-if="lineTabPanes.length > 1">
-    <NTabs :type="'card'" :placement="'left'" style="height: 100%">
-      <NTabPane v-for="{ lineCode, lineName, alarmTree } in lineTabPanes" :key="lineCode" :name="lineName" :tab="lineName">
-        <NTree
-          block-line
-          block-node
-          show-line
-          virtual-scroll
-          style="height: 100%"
-          :render-label="renderNodeLabel"
-          :override-default-node-click-behavior="overrideNodeClickBehavior"
-          :default-expand-all="false"
-          :show-irrelevant-nodes="false"
-          :data="alarmTree"
-          :pattern="searchPattern"
-          :filter="searchFilter"
-        />
+    <NTabs
+      :type="'card'"
+      :placement="'left'"
+      style="height: 100%"
+      :tab-style="{
+        width: '64px',
+        height: '36px',
+      }"
+      :style="{
+        '--n-bar-color': '#0000',
+        '--n-pane-padding-top': '0',
+        '--n-tab-gap-vertical': '0',
+        // '--n-tab-padding-vertical': '14px 12px'
+      }"
+    >
+      <NTabPane v-for="{ lineCode, lineName, alarmTree } in lineTabPanes" :key="lineCode" :name="lineName">
+        <template #tab>
+          <span style="font-size: 12px">{{ lineName }}</span>
+        </template>
+        <template #default>
+          <NTree
+            block-line
+            block-node
+            show-line
+            virtual-scroll
+            style="height: 100%"
+            :render-label="renderNodeLabel"
+            :render-suffix="renderNodeSuffix"
+            :override-default-node-click-behavior="overrideNodeClickBehavior"
+            :default-expand-all="false"
+            :show-irrelevant-nodes="false"
+            :data="alarmTree"
+            :pattern="searchPattern"
+            :filter="searchFilter"
+          />
+        </template>
      </NTabPane>
    </NTabs>
  </template>
@@ -3,13 +3,13 @@ import { NIcon, NTabPane, NTabs, NTree, type TreeOverrideNodeClickBehavior, type
 import { h, type CSSProperties } from 'vue';
 import { useCameraStore, useResourcePanelStore } from '../stores';
 import { storeToRefs } from 'pinia';
-import { useDeviceCenterQuery } from '../composables';
+import { useChannelsQuery } from '../composables';
 import { isCameraNode, isCameraSiteNode, isCameraAreaNode } from '../types';
 import PtzCamera from './icon/ptz-camera.vue';
 import HemiPtzCamera from './icon/hemi-ptz-camera.vue';
 import BulletCamera from './icon/bullet-camera.vue';

-const { isLoading } = useDeviceCenterQuery();
+const { isLoading } = useChannelsQuery();

 const cameraStore = useCameraStore();
 const { lineTabPanes } = storeToRefs(cameraStore);
@@ -54,7 +54,11 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
    const cameraNodeStyle: CSSProperties = {
      opacity: cameraOnline() ? 1 : 0.5,
      cursor: cameraOnline() ? 'pointer' : 'not-allowed',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '6px',
    };
+    const cameraIcon = option.type === '004' ? h(NIcon, () => h(PtzCamera)) : option.type === '005' ? h(NIcon, () => h(HemiPtzCamera)) : option.type === '006' ? h(NIcon, () => h(BulletCamera)) : null;
    return h(
      'div',
      {
@@ -72,7 +76,7 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
          event.dataTransfer?.setData('name', camera.name);
        },
      },
-      camera.name,
+      [cameraIcon, h('span', camera.name)],
    );
  }

@@ -80,16 +84,6 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
  return option.label;
 };

-const renderNodePrefix: TreeProps['renderPrefix'] = ({ option }) => {
-  if (!isCameraNode(option)) return null;
-
-  if (option.type === '004') return h(NIcon, () => h(PtzCamera));
-  if (option.type === '005') return h(NIcon, () => h(HemiPtzCamera));
-  if (option.type === '006') return h(NIcon, () => h(BulletCamera));
-
-  return null;
-};
-
 const renderNodeSuffix: TreeProps['renderSuffix'] = ({ option }) => {
  if (isCameraSiteNode(option)) {
    const { online, offline, total } = option.stats;
@@ -126,7 +120,6 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
      virtual-scroll
      style="height: 100%"
      :render-label="renderNodeLabel"
-      :render-prefix="renderNodePrefix"
      :render-suffix="renderNodeSuffix"
      :override-default-node-click-behavior="overrideNodeClickBehavior"
      :default-expand-all="searchPattern.trim().length > 0"
@@ -137,24 +130,42 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
    />
  </template>
  <template v-if="lineTabPanes.length > 1">
-    <NTabs :type="'card'" :placement="'left'" style="height: 100%">
-      <NTabPane v-for="{ lineCode, lineName, cameraTree } in lineTabPanes" :key="lineCode" :name="lineName" :tab="lineName">
-        <NTree
-          block-line
-          block-node
-          show-line
-          virtual-scroll
-          style="height: 100%"
-          :render-label="renderNodeLabel"
-          :render-prefix="renderNodePrefix"
-          :render-suffix="renderNodeSuffix"
-          :override-default-node-click-behavior="overrideNodeClickBehavior"
-          :default-expand-all="false"
-          :show-irrelevant-nodes="false"
-          :data="cameraTree"
-          :pattern="searchPattern"
-          :filter="searchFilter"
-        />
+    <NTabs
+      :type="'card'"
+      :placement="'left'"
+      style="height: 100%"
+      :tab-style="{
+        width: '64px',
+        height: '36px',
+      }"
+      :style="{
+        '--n-bar-color': '#0000',
+        '--n-pane-padding-top': '0',
+        '--n-tab-gap-vertical': '0',
+        // '--n-tab-padding-vertical': '14px 12px'
+      }"
+    >
+      <NTabPane v-for="{ lineCode, lineName, cameraTree } in lineTabPanes" :key="lineCode" :name="lineName">
+        <template #tab>
+          <span style="font-size: 12px">{{ lineName }}</span>
+        </template>
+        <template #default>
+          <NTree
+            block-line
+            block-node
+            show-line
+            virtual-scroll
+            style="height: 100%"
+            :render-label="renderNodeLabel"
+            :render-suffix="renderNodeSuffix"
+            :override-default-node-click-behavior="overrideNodeClickBehavior"
+            :default-expand-all="false"
+            :show-irrelevant-nodes="false"
+            :data="cameraTree"
+            :pattern="searchPattern"
+            :filter="searchFilter"
+          />
+        </template>
      </NTabPane>
    </NTabs>
  </template>
@@ -1 +1 @@
-export * from './use-device-center-query';
+export * from './use-channels-query';
@@ -2,9 +2,10 @@ import { useQuery } from '@tanstack/vue-query';
 import { computed } from 'vue';
 import type { AxiosRequestConfig } from 'axios';
 import axios from 'axios';
-import { compileCodeAreas, type CodeArea, type CodeLines, type CodeSites, type CompiledCodeAreaMaps, type CompiledCodeAreas } from '../../types';
+import { compileCodeAreas, type CodeArea, type CodeLines, type CodeSites } from '../../types';
 import { useCameraStore, useAlarmStore } from '../../stores';
-import { catalogAllDeviceApi, catalogChannelApi, type VimpChannel, type VimpStation } from '../../apis';
+import { catalogAllDeviceApi, catalogChannelApi, type VimpChannel, type VimpSite } from '../../apis';
+import { VIMP_CHANNELS_QUERY_KEY } from '../../constants';

 const config: AxiosRequestConfig = {
  headers: {
@@ -30,12 +31,26 @@ const buildTrainAreas = () => {
  return codeTrainAreas;
 };

-export const useDeviceCenterQuery = () => {
+const compareByCode = <T extends { code: string }>(a: T, b: T) => {
+  if (a.code < b.code) return -1;
+  if (a.code > b.code) return 1;
+  return 0;
+};
+const sortSitesByCode = (sites: VimpSite[]) => {
+  sites.sort(compareByCode);
+};
+const sortChannelsMapByCode = (siteCodeToChannelsMap: Map<string, VimpChannel[]>) => {
+  for (const channels of siteCodeToChannelsMap.values()) {
+    channels.sort(compareByCode);
+  }
+};
+
+export const useChannelsQuery = () => {
  const cameraStore = useCameraStore();
  const alarmStore = useAlarmStore();

  return useQuery({
-    queryKey: computed(() => ['vimp-device']),
+    queryKey: computed(() => [VIMP_CHANNELS_QUERY_KEY]),
    refetchInterval: 10 * 1000,
    refetchOnWindowFocus: false,
    queryFn: async ({ signal }) => {
@@ -59,8 +74,8 @@ export const useDeviceCenterQuery = () => {
      // 从 /allDevice 接口获取的站点信息并不保证真实性和完整性，
      // 例如有一个站点的编码是 010699 开头，但是其下的通道是 010199 和 010599 开头，
      // 而 010699 是一个不存在的站点编码，所以需要基于通道的编码来确定所有的站点。
-      const cameraSites: VimpStation[] = [];
-      const alarmSites: VimpStation[] = [];
+      const cameraSites: VimpSite[] = [];
+      const alarmSites: VimpSite[] = [];
      const cameraBuiltSitesSet = new Set<string>();
      const alarmBuiltSitesSet = new Set<string>();
      const siteCodeToCamerasMap = new Map<string, VimpChannel[]>();
@@ -105,6 +120,13 @@ export const useDeviceCenterQuery = () => {
        });
      }

+      // 1. 站点数组排序：稳定线路面板顺序和站点节点顺序
+      sortSitesByCode(cameraSites);
+      sortSitesByCode(alarmSites);
+      // 2. 每站通道数组排序：稳定区域节点顺序和通道节点顺序
+      sortChannelsMapByCode(siteCodeToCamerasMap);
+      sortChannelsMapByCode(siteCodeToAlarmsMap);
+
      cameraStore.buildLineTabPanes({
        sites: cameraSites,
        siteCodeToCamerasMap: siteCodeToCamerasMap,
@@ -112,17 +134,16 @@ export const useDeviceCenterQuery = () => {
        codeSites,
        compiledCodeAreas,
      });
+      cameraStore.buildCameraRecord(siteCodeToCamerasMap);

      alarmStore.buildLineTabPanes({
        sites: alarmSites,
        siteCodeToAlarmsMap,
        codeLines,
        codeSites,
-        codeStationAreas,
-        codeParkingAreas,
-        codeOccAreas,
-        codeTrainAreas,
+        compiledCodeAreas,
      });
+      alarmStore.buildAlarmRecord(siteCodeToAlarmsMap);

      return null;
    },
@@ -0,0 +1 @@
+export * from './query';
@@ -0,0 +1 @@
+export const VIMP_CHANNELS_QUERY_KEY = 'vimp-channels';
@@ -1,45 +1,53 @@
 import { defineStore } from 'pinia';
-import type { VimpChannel, VimpStation } from '../apis';
-import { h, shallowRef } from 'vue';
-import type { AlarmMainAreaNodeOption, AlarmNodeOption, CodeArea, CodeLines, CodeSites, AlarmLineTabPane, AlarmSiteNodeOption, AlarmSubAreaNodeOption } from '../types';
-import { NIcon } from 'naive-ui';
-import { SirenIcon } from 'lucide-vue-next';
+import type { VimpChannel, VimpSite } from '../apis';
+import { shallowRef } from 'vue';
+import type { AlarmMainAreaNodeOption, AlarmNodeOption, CodeLines, CodeSites, AlarmLineTabPane, AlarmSiteNodeOption, AlarmSubAreaNodeOption, CompiledCodeAreas } from '../types';

 interface BuildLineTabPanesParams {
-  sites: VimpStation[];
+  sites: VimpSite[];
  siteCodeToAlarmsMap: Map<string, VimpChannel[]>;
  codeLines: CodeLines;
  codeSites: CodeSites;
-  codeStationAreas: CodeArea[];
-  codeParkingAreas: CodeArea[];
-  codeOccAreas: CodeArea[];
-  codeTrainAreas: CodeArea[];
+  compiledCodeAreas: CompiledCodeAreas;
 }

+const buildMainAreaNodeKey = (siteCode: string, mainAreaCode: string) => `${siteCode}${mainAreaCode}`;
+const buildSubAreaNodeKey = (siteCode: string, areaCode: string) => `${siteCode}${areaCode}`;
+
 export const useAlarmStore = defineStore('vimp-alarm-store', () => {
  const lineTabPanes = shallowRef<AlarmLineTabPane[]>([]);
+  const alarmRecord = shallowRef<Record<string, VimpChannel>>({});

  const buildLineTabPanes = (params: BuildLineTabPanesParams) => {
-    const { sites, siteCodeToAlarmsMap, codeLines, codeSites, codeStationAreas, codeParkingAreas, codeOccAreas, codeTrainAreas } = params;
+    const { sites, siteCodeToAlarmsMap, codeLines, codeSites, compiledCodeAreas } = params;

-    // 线路TabPane
-    const _lineTabPanes: AlarmLineTabPane[] = [];
+    const result: AlarmLineTabPane[] = [];
+
+    // 1. 线路索引 lineCode -> AlarmLineTabPane
+    const linePaneMap = new Map<string, AlarmLineTabPane>();

    // 遍历所有站点
    for (const site of sites) {
+      // 2. 站点节点 siteNode 只在当前轮次中顺序创建，不需要建立索引
+
      const lineCode = site.code.substring(0, 3);
      const lineName = codeLines[lineCode]?.name ?? '';
-      if (!_lineTabPanes.some((lineNode) => lineNode.lineCode === lineCode)) {
-        _lineTabPanes.push({
-          lineCode,
-          lineName,
-          alarmTree: [],
-        });
+
+      let linePane = linePaneMap.get(lineCode);
+      if (!linePane) {
+        linePane = { lineCode, lineName, alarmTree: [] };
+        linePaneMap.set(lineCode, linePane);
+        result.push(linePane);
      }

      const siteCode = site.code;
-      const siteName = codeSites[siteCode]?.name;
-      if (!siteName) continue;
+      const siteMeta = codeSites[siteCode];
+      if (!siteMeta) continue;
+      const siteName = siteMeta.name;
+      const siteType = siteMeta.type;
+
+      const compiledCodeAreaMaps = compiledCodeAreas[siteType];
+      const mainAreaCodeLength = siteType === 'train' ? 3 : 2;

      // 构造站点节点
      const siteNode: AlarmSiteNodeOption = {
@@ -49,79 +57,76 @@ export const useAlarmStore = defineStore('vimp-alarm-store', () => {
        stats: { online: 0, offline: 0, total: 0 },
        online: site.online,
      };
-      _lineTabPanes.find((lineTabPane) => lineTabPane.lineCode === lineCode)?.alarmTree.push(siteNode);
+      linePane.alarmTree.push(siteNode);

      // 获取所有警报器
      const alarms = siteCodeToAlarmsMap.get(siteCode);
-      if (!alarms || alarms.length === 0) continue;
+      if (!alarms) continue;
+
+      // 3. 1级区域索引 mainAreaNodeKey -> AlarmMainAreaNodeOption
+      // mainAreaNodeKey = ${siteCode}${alarmMainAreaCode}
+      const mainAreaNodeMap = new Map<string, AlarmMainAreaNodeOption>();
+      // 4. 2级区域索引 subAreaNodeKey -> AlarmSubAreaNodeOption
+      // subAreaNodeKey = ${siteCode}${alarmAreaCode}
+      const subAreaNodeMap = new Map<string, AlarmSubAreaNodeOption>();
+      // 5. 警报器索引 subAreaNodeKey -> Set<AlarmGbCode>
+      const subAreaNodeKeyToAlarmGbCodeSetMap = new Map<string, Set<string>>();

      // 遍历警报器
      for (const alarm of alarms) {
        // 计算相关编码
        const { code: alarmGbCode, name: alarmName } = alarm;
-        const alarmSiteCode = alarmGbCode.substring(0, 6);
-        const alarmSiteType = codeSites[alarmSiteCode]?.type;
        const alarmAreaCode = alarmGbCode.substring(6, 11);
-        const alarmMainAreaCode = alarmAreaCode.slice(0, alarmSiteType === 'train' ? 3 : 2);
+        const alarmMainAreaCode = alarmAreaCode.slice(0, mainAreaCodeLength);

-        // 构造车站/基地/OCC/车次区域
-        let siteArea: CodeArea | undefined = undefined;
-        if (alarmSiteType === 'station') {
-          siteArea = codeStationAreas.find((area) => area.code === alarmMainAreaCode);
-        } else if (alarmSiteType === 'parking') {
-          siteArea = codeParkingAreas.find((area) => area.code === alarmMainAreaCode);
-        } else if (alarmSiteType === 'occ') {
-          siteArea = codeOccAreas.find((area) => area.code === alarmMainAreaCode);
-        } else if (alarmSiteType === 'train') {
-          siteArea = codeTrainAreas.find((area) => area.code === alarmMainAreaCode);
-        } else {
-          continue;
-        }
-        if (!siteArea) continue; // 如果还是未找到区域，则跳过该警报器
+        // 查找1级区域，如果未找到则跳过该警报器
+        const mainArea = compiledCodeAreaMaps.mainAreaMap.get(alarmMainAreaCode);
+        if (!mainArea) continue;

-        // 构造1级区域节点
-        if (!siteNode.children?.find((areaNode) => areaNode.key === `${alarmSiteCode}${alarmMainAreaCode}`)) {
-          const mainAreaNode: AlarmMainAreaNodeOption = {
-            key: `${alarmSiteCode}${alarmMainAreaCode}`,
-            label: siteArea.name,
+        // 尝试从索引中获取1级区域节点，若不存在则创建
+        const mainAreaNodeKey = buildMainAreaNodeKey(siteCode, alarmMainAreaCode);
+        let mainAreaNode = mainAreaNodeMap.get(mainAreaNodeKey);
+        if (!mainAreaNode) {
+          mainAreaNode = {
+            key: mainAreaNodeKey,
+            label: mainArea.name,
            children: [],
            stats: { online: 0, offline: 0, total: 0 },
            site: site,
+            areaLevel: 1,
          };
+          mainAreaNodeMap.set(mainAreaNodeKey, mainAreaNode);
          siteNode.children?.push(mainAreaNode);
        }
-        const targetMainAreaNode = siteNode.children?.find((areaNode) => areaNode.key === `${alarmSiteCode}${alarmMainAreaCode}`);
-        if (!targetMainAreaNode) continue; // 如果1级区域节点不存在，则跳过该警报器

-        // 构造2级区域节点
-        if (!targetMainAreaNode.children?.find((subAreaNode) => subAreaNode.key === `${alarmSiteCode}${alarmAreaCode}`)) {
-          let subArea: CodeArea['subs'][number] | undefined = undefined;
-          if (alarmSiteType === 'station') {
-            subArea = codeStationAreas.find((area) => area.code === alarmMainAreaCode)?.subs.find((subArea) => subArea.code === alarmAreaCode);
-          } else if (alarmSiteType === 'parking') {
-            subArea = codeParkingAreas.find((area) => area.code === alarmMainAreaCode)?.subs.find((subArea) => subArea.code === alarmAreaCode);
-          } else if (alarmSiteType === 'occ') {
-            subArea = codeOccAreas.find((area) => area.code === alarmMainAreaCode)?.subs.find((subArea) => subArea.code === alarmAreaCode);
-          } else if (alarmSiteType === 'train') {
-            subArea = codeTrainAreas.find((area) => area.code === alarmMainAreaCode)?.subs.find((subArea) => subArea.code === alarmAreaCode);
-          } else {
-            continue;
-          }
-          if (!subArea) continue; // 如果还是未找到2级区域，则跳过该警报器
+        // 查找2级区域，如果未找到则跳过该警报器
+        const subArea = compiledCodeAreaMaps.subAreaMap.get(alarmAreaCode);
+        if (!subArea) continue;

-          const subAreaNode: AlarmSubAreaNodeOption = {
-            key: `${alarmSiteCode}${alarmAreaCode}`,
+        // 尝试从索引中获取2级区域节点，若不存在则创建
+        const subAreaNodeKey = buildSubAreaNodeKey(siteCode, alarmAreaCode);
+        let subAreaNode = subAreaNodeMap.get(subAreaNodeKey);
+        if (!subAreaNode) {
+          subAreaNode = {
+            key: subAreaNodeKey,
            label: subArea.name,
            children: [],
            stats: { online: 0, offline: 0, total: 0 },
            site: site,
+            areaLevel: 2,
          };
-          targetMainAreaNode.children?.push(subAreaNode);
+          subAreaNodeMap.set(subAreaNodeKey, subAreaNode);
+          mainAreaNode.children?.push(subAreaNode);
        }
-        const subAreaNode = targetMainAreaNode.children?.find((subAreaNode) => subAreaNode.key === `${alarmSiteCode}${alarmAreaCode}`);
-        if (!subAreaNode) continue; // 如果2级区域节点不存在，则跳过该警报器

        // 构造警报器节点
+        let alarmGbCodeSet = subAreaNodeKeyToAlarmGbCodeSetMap.get(subAreaNodeKey);
+        if (!alarmGbCodeSet) {
+          alarmGbCodeSet = new Set<string>();
+          subAreaNodeKeyToAlarmGbCodeSetMap.set(subAreaNodeKey, alarmGbCodeSet);
+        }
+        if (alarmGbCodeSet.has(alarmGbCode)) continue;
+        alarmGbCodeSet.add(alarmGbCode);
        const alarmType = alarm.code.substring(11, 14);
        const alarmNode: AlarmNodeOption = {
          key: alarmGbCode,
@@ -129,53 +134,42 @@ export const useAlarmStore = defineStore('vimp-alarm-store', () => {
          type: alarmType,
          alarm: alarm,
          site: site,
-          prefix: () => {
-            return h(NIcon, () => h(SirenIcon));
-          },
        };
-
-        // 添加警报器节点到子区域节点
-        if (!subAreaNode.children?.find((alarmNode) => alarmNode.key === alarmGbCode)) {
-          subAreaNode.children?.push(alarmNode);
-        }
+        subAreaNode.children?.push(alarmNode);

        // 统计站点、区域、子区域的在线/离线/总警报器数量
        siteNode.stats.total++;
-        targetMainAreaNode.stats.total++;
+        mainAreaNode.stats.total++;
        subAreaNode.stats.total++;
        if (alarm.status === 1) {
          siteNode.stats.online++;
-          targetMainAreaNode.stats.online++;
+          mainAreaNode.stats.online++;
          subAreaNode.stats.online++;
-        }
-        if (alarm.status === 0) {
+        } else if (alarm.status === 0) {
          siteNode.stats.offline++;
-          targetMainAreaNode.stats.offline++;
+          mainAreaNode.stats.offline++;
          subAreaNode.stats.offline++;
        }
      }
-      siteNode.suffix = () => {
-        const { online, offline, total } = siteNode.stats;
-        return `(${online}/${offline}/${total})`;
-      };
-      siteNode.children?.forEach((areaNode) => {
-        areaNode.suffix = () => {
-          const { online, offline, total } = areaNode.stats;
-          return h('div', { style: { marginRight: '8px', opacity: 0.6 } }, `(${online}/${offline}/${total})`);
-        };
-        areaNode.children?.forEach((subAreaNode) => {
-          subAreaNode.suffix = () => {
-            const { online, offline, total } = subAreaNode.stats;
-            return h('div', { style: { marginRight: '16px', opacity: 0.4 } }, `(${online}/${offline}/${total})`);
-          };
-        });
-      });
    }
-    lineTabPanes.value = _lineTabPanes;
+    lineTabPanes.value = result;
+  };
+
+  const buildAlarmRecord = (siteCodeToAlarmsMap: Map<string, VimpChannel[]>) => {
+    const record: Record<string, VimpChannel> = {};
+    for (const [, alarms] of siteCodeToAlarmsMap) {
+      for (const alarm of alarms) {
+        record[alarm.code] = alarm;
+      }
+    }
+    alarmRecord.value = record;
  };

  return {
    lineTabPanes,
+    alarmRecord,
+
    buildLineTabPanes,
+    buildAlarmRecord,
  };
 });
@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia';
-import type { VimpChannel, VimpStation } from '../apis';
-import { shallowRef } from 'vue';
+import type { VimpChannel, VimpSite } from '../apis';
+import { ref, shallowRef } from 'vue';
 import type { CameraMainAreaNodeOption, CameraNodeOption, CodeLines, CodeSites, CameraLineTabPane, CameraSiteNodeOption, CameraSubAreaNodeOption, CompiledCodeAreas } from '../types';

 interface BuildLineTabPanesParams {
-  sites: VimpStation[];
+  sites: VimpSite[];
  siteCodeToCamerasMap: Map<string, VimpChannel[]>;
  codeLines: CodeLines;
  codeSites: CodeSites;
@@ -16,6 +16,7 @@ const buildSubAreaNodeKey = (siteCode: string, areaCode: string) => `${siteCode}

 export const useCameraStore = defineStore('vimp-camera-store', () => {
  const lineTabPanes = shallowRef<CameraLineTabPane[]>([]);
+  const cameraRecord = shallowRef<Record<string, VimpChannel>>({});

  const buildLineTabPanes = (params: BuildLineTabPanesParams) => {
    const { sites, siteCodeToCamerasMap, codeLines, codeSites, compiledCodeAreas } = params;
@@ -153,8 +154,21 @@ export const useCameraStore = defineStore('vimp-camera-store', () => {
    lineTabPanes.value = result;
  };

+  const buildCameraRecord = (siteCodeToCamerasMap: Map<string, VimpChannel[]>) => {
+    const record: Record<string, VimpChannel> = {};
+    for (const [, cameras] of siteCodeToCamerasMap) {
+      for (const camera of cameras) {
+        record[camera.code] = camera;
+      }
+    }
+    cameraRecord.value = record;
+  };
+
  return {
    lineTabPanes,
+    cameraRecord,
+
    buildLineTabPanes,
+    buildCameraRecord,
  };
 });
@@ -1,5 +1,5 @@
 import type { TabPaneProps, TreeOption } from 'naive-ui';
-import type { VimpChannel, VimpStation } from '../apis/model';
+import type { VimpChannel, VimpSite } from '../apis/model';

 export type SiteType = 'station' | 'parking' | 'occ' | 'train';
 export type CodeLines = Record<string, { name: string; color: string }>;
@@ -57,20 +57,20 @@ export interface CountStats {
 export interface CameraNodeOption extends TreeOption {
  camera: VimpChannel;
  type: string;
-  site: VimpStation;
+  site: VimpSite;
 }

 export interface CameraSubAreaNodeOption extends TreeOption {
  children?: CameraNodeOption[];
  stats: CountStats;
-  site: VimpStation;
+  site: VimpSite;
  areaLevel: 2;
 }

 export interface CameraMainAreaNodeOption extends TreeOption {
  children?: CameraSubAreaNodeOption[];
  stats: CountStats;
-  site: VimpStation;
+  site: VimpSite;
  areaLevel: 1;
 }

@@ -104,19 +104,21 @@ export interface CameraLineTabPane extends TabPaneProps {
 export interface AlarmNodeOption extends TreeOption {
  alarm: VimpChannel;
  type: string;
-  site: VimpStation;
+  site: VimpSite;
 }

 export interface AlarmSubAreaNodeOption extends TreeOption {
  children?: AlarmNodeOption[];
  stats: CountStats;
-  site: VimpStation;
+  site: VimpSite;
+  areaLevel: 2;
 }

 export interface AlarmMainAreaNodeOption extends TreeOption {
  children?: AlarmSubAreaNodeOption[];
  stats: CountStats;
-  site: VimpStation;
+  site: VimpSite;
+  areaLevel: 1;
 }

 export interface AlarmSiteNodeOption extends TreeOption {
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ResourcePanel from './components/resource-pannel.vue';
+import ResourcePanel from './components/resource-panel.vue';

 const onDragover = (event: DragEvent) => {
  event.preventDefault();
Author	SHA1	Message	Date
yangsy	f78d3b32c0	feat(vimp): 新增资源面板组件并修正导入拼写错误修复vimp页面资源面板组件的导入文件名拼写错误，新增的资源面板支持多标签资源分类、折叠展开切换以及对应标签页的搜索过滤功能。	2026-06-09 15:34:45 +08:00
yangsy	ad9a0011a5	feat(vimp): 新增摄像头和告警通道的全局索引记录及构建方法在摄像头、告警的Pinia存储中新增对应的数据记录与构建函数，并在渠道查询组合式函数中调用生成全局索引映射数据	2026-06-09 13:17:59 +08:00
yangsy	8403a41cef	feat(settings-drawer): 为调试码输入框添加自动聚焦功能更新了相关导入，添加输入框模板引用并在调试模态框打开时自动聚焦输入框	2026-06-09 13:16:33 +08:00
yangsy	e8aa9b96f8	refactor(vimp): 重命名设备查询为通道查询并更新相关引用 - 新增 vimp 常量文件，定义查询键 VIMP_CHANNELS_QUERY_KEY - 重命名设备中心查询组合式函数为通道查询组合式函数 - 更新 alarm-tree.vue 和 camera-tree.vue 中的查询调用 - 优化通道数据排序与存储更新流程	2026-06-08 14:40:58 +08:00
yangsy	6f14370751	refactor(vimp): 拆分站点模型为 VimpRawSite / VimpSite 并归一化 online 字段 - 将 VimpStation 重命名为 VimpSite，统一"站点"语义贯穿全模块 - 新增 VimpRawSite 表示 /catalog/allDevice 接口原样数据，online 字段可选 - 抽离 normalizeVimpSite 纯函数，集中处理 online 字段缺失时的默认值 - catalogAllDeviceApi 入参改为 VimpRawSite[]，出参统一归一化为 VimpSite[] \| null - 下游 store、composable、树节点类型同步从 VimpStation 切换到 VimpSite - 内部业务模型保持 online: boolean 必填，避免缺失字段沿调用链向下传播	2026-06-08 13:38:38 +08:00
yangsy	6fed499d78	feat(vimp客户端): 补充完整请求方法并添加统一认证与错误处理 - 新增VimpRequestOptions配置接口，支持自定义请求、响应及错误拦截器 - 补充get、put、delete请求方法并封装统一响应格式 - 添加默认请求拦截器自动携带公共认证参数 - 实现401错误拦截，超时自动跳转登录页并重置用户状态	2026-06-04 22:06:49 +08:00
yangsy	fa44554593	style(vimp-tree): 优化线路树组件的标签页样式与文本展示修改了alarm-tree.vue和camera-tree.vue两个组件，优化NTabs的样式配置，自定义标签尺寸与文本格式，调整内部布局细节	2026-06-01 20:14:44 +08:00
yangsy	cbeddebbc0	refactor(alarm-tree, camera-tree): 整合节点图标到标签并优化渲染逻辑为树形节点标签添加弹性布局以正确对齐图标与文字，将图标渲染逻辑从单独的前缀函数整合到标签渲染函数中，为摄像机树形组件新增按类型匹配对应图标的逻辑，并移除了冗余的前缀渲染属性与函数	2026-06-01 03:19:44 +08:00
yangsy	c78c8b8419	refactor(vimp-alarm): 重构告警树数据构建逻辑并优化节点显示 - 统一区域数据处理流程，使用compiledCodeAreas替代原有的四个独立区域数组 - 使用Map索引替代线性查找，提升数据构建性能 - 将节点的后缀/前缀渲染从节点属性迁移至Tree组件的renderPrefix和renderSuffix方法 - 为区域节点添加areaLevel字段以适配不同层级的样式 - 为告警节点添加警笛图标前缀，为各层级节点添加统计信息后缀	2026-06-01 03:13:38 +08:00
yangsy	148be10186	修复(vimp设备中心): 按编码排序站点与通道以稳定UI显示顺序 - 新增通用排序工具函数，对站点和通道数组按code字段排序，确保线路面板、站点节点和通道节点的显示顺序稳定一致，避免UI因数据源顺序波动出现跳动。	2026-06-01 02:54:49 +08:00
yangsy	650ca78464	style(use-device-center-query): 移除未使用的类型导入	2026-06-01 02:24:30 +08:00
				`@@ -0,0 +1 @@`
				`export const VIMP_CHANNELS_QUERY_KEY = 'vimp-channels';`