From 3e88379eb99670d134276551466b16db6c19410c Mon Sep 17 00:00:00 2001 From: yangsy Date: Sat, 30 May 2026 09:42:14 +0800 Subject: [PATCH] =?UTF-8?q?refactor(vimp):=20=E5=B0=86=E6=99=AE=E9=80=9A?= =?UTF-8?q?=E5=AF=B9=E8=B1=A1=E6=9B=BF=E6=8D=A2=E4=B8=BAMap=E5=B9=B6?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E9=80=BB=E8=BE=91=20(?= =?UTF-8?q?=E4=B8=8D=E5=8C=85=E5=90=AB=E8=AD=A6=E6=8A=A5=E5=99=A8=E6=A0=91?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将站点摄像机和告警的映射存储从普通对象改为Map，提升查询性能 - 新增站点在线状态缓存和已访问站点集合，简化重复站点判断逻辑 - 移动buildTrainAreas和axios配置对象至顶层作用域 - 调整代码结构并临时注释告警存储的线路面板构建调用 --- .../query/use-device-center-query.ts | 76 +++++++++---------- src/pages/vimp/stores/camera.ts | 32 ++++---- 2 files changed, 57 insertions(+), 51 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 de9fd04..8664037 100644 --- a/src/pages/vimp/composables/query/use-device-center-query.ts +++ b/src/pages/vimp/composables/query/use-device-center-query.ts @@ -6,6 +6,30 @@ import type { CodeArea, CodeLines, CodeSites } from '../../types'; import { useCameraStore, useAlarmStore } from '../../stores'; import { catalogAllDeviceApi, catalogChannelApi, type VimpChannel } from '../../apis'; +const config: AxiosRequestConfig = { + headers: { + 'Cache-Control': 'no-store', + }, +}; + +const buildTrainAreas = () => { + const codeTrainAreas: CodeArea[] = []; + for (let i = 0; i < 999; i++) { + const codeTrain = i.toString().padStart(3, '0'); + // 市域线name为车组，改造线name为车次 + const area: CodeArea = { code: codeTrain, name: '车次' + codeTrain, subs: [] }; + for (let j = 0; j <= 99; j++) { + const codeCarriage = j.toString().padStart(2, '0'); + const subArea: CodeArea['subs'][number] = { code: codeTrain + codeCarriage, name: '车厢' + codeCarriage }; + area.subs.push(subArea); + } + // const areaPreserve: CodeArea['subs'][number] = { code: codeTrain + '51', name: '预留' }; + // area.subs.push(areaPreserve); + codeTrainAreas.push(area); + } + return codeTrainAreas; +}; + export const useDeviceCenterQuery = () => { const cameraStore = useCameraStore(); const alarmStore = useAlarmStore(); @@ -15,30 +39,6 @@ export const useDeviceCenterQuery = () => { refetchInterval: 10 * 1000, refetchOnWindowFocus: false, queryFn: async ({ signal }) => { - const config: AxiosRequestConfig = { - headers: { - 'Cache-Control': 'no-store', - }, - }; - - const buildTrainAreas = () => { - const codeTrainAreas: CodeArea[] = []; - for (let i = 0; i < 999; i++) { - const codeTrain = i.toString().padStart(3, '0'); - // 市域线name为车组，改造线name为车次 - const area: CodeArea = { code: codeTrain, name: '车次' + codeTrain, subs: [] }; - for (let j = 0; j <= 99; j++) { - const codeCarriage = j.toString().padStart(2, '0'); - const subArea: CodeArea['subs'][number] = { code: codeTrain + codeCarriage, name: '车厢' + codeCarriage }; - area.subs.push(subArea); - } - // const areaPreserve: CodeArea['subs'][number] = { code: codeTrain + '51', name: '预留' }; - // area.subs.push(areaPreserve); - codeTrainAreas.push(area); - } - return codeTrainAreas; - }; - const codeLines = (await axios.get('/cdn/vimp/codes/codeLines.json', config)).data; const codeSites = (await axios.get('/cdn/vimp/codes/codeStations.json', config)).data; const codeStationAreas = (await axios.get('/cdn/vimp/codes/codeStationAreas.json', config)).data; @@ -46,8 +46,8 @@ export const useDeviceCenterQuery = () => { const codeOccAreas = (await axios.get('/cdn/vimp/codes/codeOccAreas.json', config)).data; const codeTrainAreas = buildTrainAreas(); - const siteCamerasMapFromApi: Record = {}; - const siteAlarmsMapFromApi: Record = {}; + const siteCamerasMapFromApi = new Map(); + const siteAlarmsMapFromApi = new Map(); const sitesFromApi = await catalogAllDeviceApi({ signal }); if (!!sitesFromApi) { @@ -68,8 +68,8 @@ export const useDeviceCenterQuery = () => { }); const siteCode = site.code.substring(0, 6); - siteCamerasMapFromApi[siteCode] = cameras; - siteAlarmsMapFromApi[siteCode] = alarms; + siteCamerasMapFromApi.set(siteCode, cameras); + siteAlarmsMapFromApi.set(siteCode, alarms); } } @@ -84,16 +84,16 @@ export const useDeviceCenterQuery = () => { codeTrainAreas, }); - alarmStore.buildLineTabPanes({ - sitesFromApi, - siteAlarmsMapFromApi, - codeLines, - codeSites, - codeStationAreas, - codeParkingAreas, - codeOccAreas, - codeTrainAreas, - }); + // alarmStore.buildLineTabPanes({ + // sitesFromApi, + // siteAlarmsMapFromApi, + // codeLines, + // codeSites, + // codeStationAreas, + // codeParkingAreas, + // codeOccAreas, + // codeTrainAreas, + // }); return null; }, diff --git a/src/pages/vimp/stores/camera.ts b/src/pages/vimp/stores/camera.ts index f7b5112..89f43e0 100644 --- a/src/pages/vimp/stores/camera.ts +++ b/src/pages/vimp/stores/camera.ts @@ -10,7 +10,7 @@ import { objectEntries } from '@vueuse/core'; interface BuildLineTabPanesParams { sitesFromApi: VimpStation[] | null; - siteCamerasMapFromApi: Record; + siteCamerasMapFromApi: Map; codeLines: CodeLines; codeSites: CodeSites; codeStationAreas: CodeArea[]; @@ -44,31 +44,37 @@ export const useCameraStore = defineStore('vimp-camera-store', () => { // 例如有一个站点的编码是 010699 开头，但是其下的通道是 010199 和 010599 开头， // 而 010699 是一个不存在的站点编码，所以需要基于通道的编码来确定所有的站点。 const sites: VimpStation[] = []; - const siteCamerasMap: Record = {}; - objectEntries(siteCamerasMapFromApi).forEach(([siteFullCode, cameras]) => { - const siteCode = siteFullCode.substring(0, 6); + const siteCamerasMap = new Map(); + const siteOnlineMap = new Map(); + sitesFromApi.forEach((site) => siteOnlineMap.set(site.code.substring(0, 6), site.online)); + const visitedSitesSet = new Set(); + siteCamerasMapFromApi.forEach((cameras, siteCode) => { for (const camera of cameras) { const { code: cameraGbCode } = camera; const cameraSiteCode = cameraGbCode.substring(0, 6); - - if (!(cameraSiteCode in siteCamerasMap)) { - siteCamerasMap[cameraSiteCode] = []; + // 聚合同一站点的摄像机 + if (!siteCamerasMap.has(cameraSiteCode)) { + siteCamerasMap.set(cameraSiteCode, []); } - siteCamerasMap[cameraSiteCode]?.push(camera); - + siteCamerasMap.get(cameraSiteCode)!.push(camera); + // 如果码表中不存在该站点则跳过 if (!(cameraSiteCode in codeSites)) continue; - if (sites.some((site) => site.code === cameraSiteCode)) continue; + // 如果该站点已被添加则跳过 + if (visitedSitesSet.has(cameraSiteCode)) continue; + // 标记该站点已被添加 + visitedSitesSet.add(cameraSiteCode); + // 添加该站点到站点列表 sites.push({ code: cameraSiteCode, name: codeSites[cameraSiteCode]?.name ?? '', - online: sitesFromApi.find((site) => site.code.substring(0, 6) === siteCode)?.online ?? false, + online: siteOnlineMap.get(siteCode) ?? false, }); } }); // 遍历所有站点 for (const site of sites) { - const siteCode = site.code.substring(0, 6); + const siteCode = site.code; const siteName = codeSites[siteCode]?.name; if (!siteName) continue; @@ -83,7 +89,7 @@ export const useCameraStore = defineStore('vimp-camera-store', () => { _lineTabPanes.find((lineTabPane) => lineTabPane.lineCode === lineCode)?.cameraTree.push(siteNode); // 获取所有摄像机 - const cameras = siteCamerasMap[siteCode]; + const cameras = siteCamerasMap.get(siteCode); if (!cameras || cameras.length === 0) continue; // 遍历摄像机