perf(vimp): 优化存储响应式并重构设备查询逻辑

将 camera 和 alarm 存储的 lineTabPanes 从 ref 替换为 shallowRef，减少大型数组的响应式开销。重构设备查询组合式函数，拆分相机和告警的站点与通道数据，添加调试控制台日志。

src/pages/vimp/composables/query/use-device-center-query.ts

@@ -51,8 +51,10 @@ export const useDeviceCenterQuery = () => {
       // 从 /allDevice 接口获取的站点信息并不保证真实性和完整性，
       // 例如有一个站点的编码是 010699 开头，但是其下的通道是 010199 和 010599 开头，
       // 而 010699 是一个不存在的站点编码，所以需要基于通道的编码来确定所有的站点。
-      const sites: VimpStation[] = [];
-      const builtSitesSet = new Set<string>();
+      const cameraSites: VimpStation[] = [];
+      const alarmSites: VimpStation[] = [];
+      const cameraBuiltSitesSet = new Set<string>();
+      const alarmBuiltSitesSet = new Set<string>();
       const siteCamerasMap = new Map<string, VimpChannel[]>();
       const siteAlarmsMap = new Map<string, VimpChannel[]>();
 
@@ -62,21 +64,31 @@ export const useDeviceCenterQuery = () => {
 
         channels.forEach((channel) => {
           const siteCode = channel.code.substring(0, 6);
-          if (siteCode in codeSites && !builtSitesSet.has(siteCode)) {
-            sites.push({
-              code: siteCode,
-              name: codeSites[siteCode]?.name ?? '',
-              online: siteFromApi.online,
-            });
-            builtSitesSet.add(siteCode);
-          }
           const typeCode = Number(channel.code.substring(11, 14));
-          if (typeCode >= 4 && typeCode <= 6) {
+          const isCamera = typeCode >= 4 && typeCode <= 6;
+          const isAlarm = (typeCode >= 101 && typeCode <= 108) || (typeCode >= 810 && typeCode <= 815);
+          if (isCamera) {
+            if (!cameraBuiltSitesSet.has(siteCode)) {
+              cameraSites.push({
+                code: siteCode,
+                name: codeSites[siteCode]?.name ?? '',
+                online: siteFromApi.online,
+              });
+              cameraBuiltSitesSet.add(siteCode);
+            }
             if (!siteCamerasMap.has(siteCode)) {
               siteCamerasMap.set(siteCode, []);
             }
             siteCamerasMap.get(siteCode)!.push(channel);
-          } else if ((typeCode >= 101 && typeCode <= 108) || (typeCode >= 810 && typeCode <= 815)) {
+          } else if (isAlarm) {
+            if (!alarmBuiltSitesSet.has(siteCode)) {
+              alarmSites.push({
+                code: siteCode,
+                name: codeSites[siteCode]?.name ?? '',
+                online: siteFromApi.online,
+              });
+              alarmBuiltSitesSet.add(siteCode);
+            }
             if (!siteAlarmsMap.has(siteCode)) {
               siteAlarmsMap.set(siteCode, []);
             }
@@ -85,8 +97,14 @@ export const useDeviceCenterQuery = () => {
         });
       }
 
+      console.log(new Date().toLocaleString());
+      console.log(cameraSites);
+      console.log(siteCamerasMap);
+      console.log(alarmSites);
+      console.log(siteAlarmsMap);
+
       cameraStore.buildLineTabPanes({
-        sites,
+        sites: cameraSites,
         siteCamerasMap,
         codeLines,
         codeSites,
@@ -97,7 +115,7 @@ export const useDeviceCenterQuery = () => {
       });
 
       alarmStore.buildLineTabPanes({
-        sites,
+        sites: alarmSites,
         siteAlarmsMap,
         codeLines,
         codeSites,

src/pages/vimp/stores/alarm.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import type { VimpChannel, VimpStation } from '../apis';
-import { h, ref } from 'vue';
+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';
@@ -17,7 +17,7 @@ interface BuildLineTabPanesParams {
 }
 
 export const useAlarmStore = defineStore('vimp-alarm-store', () => {
-  const lineTabPanes = ref<AlarmLineTabPane[]>([]);
+  const lineTabPanes = shallowRef<AlarmLineTabPane[]>([]);
 
   const buildLineTabPanes = (params: BuildLineTabPanesParams) => {
     const { sites, siteAlarmsMap, codeLines, codeSites, codeStationAreas, codeParkingAreas, codeOccAreas, codeTrainAreas } = params;

src/pages/vimp/stores/camera.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import type { VimpChannel, VimpStation } from '../apis';
-import { h, ref } from 'vue';
+import { h, shallowRef } from 'vue';
 import type { CameraMainAreaNodeOption, CameraNodeOption, CodeArea, CodeLines, CodeSites, CameraLineTabPane, CameraSiteNodeOption, CameraSubAreaNodeOption } from '../types';
 import { NIcon } from 'naive-ui';
 import BulletCamera from '../components/icon/bullet-camera.vue';
@@ -19,7 +19,7 @@ interface BuildLineTabPanesParams {
 }
 
 export const useCameraStore = defineStore('vimp-camera-store', () => {
-  const lineTabPanes = ref<CameraLineTabPane[]>([]);
+  const lineTabPanes = shallowRef<CameraLineTabPane[]>([]);
 
   const buildLineTabPanes = (params: BuildLineTabPanesParams) => {
     const { sites, siteCamerasMap, codeLines, codeSites, codeStationAreas, codeParkingAreas, codeOccAreas, codeTrainAreas } = params;