From b9c4a3ca2794b573ba4a32f1d09d6c4362a25dd0 Mon Sep 17 00:00:00 2001 From: yangsy Date: Sat, 30 May 2026 23:27:22 +0800 Subject: [PATCH] =?UTF-8?q?perf(vimp):=20=E4=BC=98=E5=8C=96=E5=AD=98?= =?UTF-8?q?=E5=82=A8=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B9=B6=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E8=AE=BE=E5=A4=87=E6=9F=A5=E8=AF=A2=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将 camera 和 alarm 存储的 lineTabPanes 从 ref 替换为 shallowRef，减少大型数组的响应式开销。重构设备查询组合式函数，拆分相机和告警的站点与通道数据，添加调试控制台日志。 --- .../query/use-device-center-query.ts | 46 +++++++++++++------ src/pages/vimp/stores/alarm.ts | 4 +- src/pages/vimp/stores/camera.ts | 4 +- 3 files changed, 36 insertions(+), 18 deletions(-) diff --git a/src/pages/vimp/composables/query/use-device-center-query.ts b/src/pages/vimp/composables/query/use-device-center-query.ts index f746cd4..5db29e9 100644 --- a/src/pages/vimp/composables/query/use-device-center-query.ts +++ b/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(); + const cameraSites: VimpStation[] = []; + const alarmSites: VimpStation[] = []; + const cameraBuiltSitesSet = new Set(); + const alarmBuiltSitesSet = new Set(); const siteCamerasMap = new Map(); const siteAlarmsMap = new Map(); @@ -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, diff --git a/src/pages/vimp/stores/alarm.ts b/src/pages/vimp/stores/alarm.ts index aec6172..4143e65 100644 --- a/src/pages/vimp/stores/alarm.ts +++ b/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([]); + const lineTabPanes = shallowRef([]); const buildLineTabPanes = (params: BuildLineTabPanesParams) => { const { sites, siteAlarmsMap, codeLines, codeSites, codeStationAreas, codeParkingAreas, codeOccAreas, codeTrainAreas } = params; diff --git a/src/pages/vimp/stores/camera.ts b/src/pages/vimp/stores/camera.ts index 42cd34e..ddd2591 100644 --- a/src/pages/vimp/stores/camera.ts +++ b/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([]); + const lineTabPanes = shallowRef([]); const buildLineTabPanes = (params: BuildLineTabPanesParams) => { const { sites, siteCamerasMap, codeLines, codeSites, codeStationAreas, codeParkingAreas, codeOccAreas, codeTrainAreas } = params;