From cb8bf16d782cb06ea339bd088a522ca1c3363663 Mon Sep 17 00:00:00 2001 From: yangsy Date: Fri, 29 Aug 2025 11:57:07 +0800 Subject: [PATCH] perf: lift UX priority when query running --- .../query/alarm/use-line-alarms-query.ts | 36 ++-- .../query/device/use-line-devices-query.ts | 175 +++++++++--------- .../query/station/use-station-list-query.ts | 10 +- 3 files changed, 110 insertions(+), 111 deletions(-) diff --git a/src/composables/query/alarm/use-line-alarms-query.ts b/src/composables/query/alarm/use-line-alarms-query.ts index 5beedd5..58c3208 100644 --- a/src/composables/query/alarm/use-line-alarms-query.ts +++ b/src/composables/query/alarm/use-line-alarms-query.ts @@ -11,6 +11,7 @@ import type { StationAlarms } from './domains'; import { useLineAlarmsStore } from '@/stores/line-alarms'; import { CanceledError } from 'axios'; import { LINE_ALARMS_QUERY_KEY } from '@/constants'; +import { sleep } from '@/utils/sleep'; export interface LineAlarms { [stationCode: Station['code']]: StationAlarms; @@ -46,7 +47,7 @@ export function useLineAlarmsQuery() { refetchOnReconnect: false, refetchOnWindowFocus: false, queryFn: async ({ signal }): Promise => { - // console.time('useLineAlarmsQuery'); + console.time('useLineAlarmsQuery'); if (!stationList?.value) { lineAlarms.value = {}; @@ -62,13 +63,13 @@ export function useLineAlarmsQuery() { if (!lineAlarms.value[station.code]) { lineAlarms.value[station.code] = createEmptyStationAlarms(); } - // const stationAlarms = lineAlarms.value[station.code]; + const stationAlarms = createEmptyStationAlarms(); + const now = dayjs(); + const todayStart = now.startOf('date').valueOf(); + const todayEnd = now.endOf('date').valueOf(); try { - const now = dayjs(); - const todayStart = now.startOf('date').valueOf(); - const todayEnd = now.endOf('date').valueOf(); const { records: alarmList } = await postNdmDeviceAlarmLogPage( station.code, { @@ -76,6 +77,7 @@ export function useLineAlarmsQuery() { extra: { alarmDate_ge: todayStart, alarmDate_le: todayEnd, + deviceId_likeRight: station.code, }, size: 50000, current: 1, @@ -84,25 +86,13 @@ export function useLineAlarmsQuery() { }, signal, ); - const cameraAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.Camera); - stationAlarms[DeviceType.Camera] = cameraAlarms; - const decoderAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.Decoder); - stationAlarms[DeviceType.Decoder] = decoderAlarms; - const keyboardAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.Keyboard); - stationAlarms[DeviceType.Keyboard] = keyboardAlarms; - const mediaServerAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.MediaServer); - stationAlarms[DeviceType.MediaServer] = mediaServerAlarms; - const nvrAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.Nvr); - stationAlarms[DeviceType.Nvr] = nvrAlarms; - const securityBoxAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.SecurityBox); - stationAlarms[DeviceType.SecurityBox] = securityBoxAlarms; - const switchAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.Switch); - stationAlarms[DeviceType.Switch] = switchAlarms; - const videoServerAlarms = alarmList.filter((device) => getDeviceTypeVal(device.deviceType) === DeviceType.VideoServer); - stationAlarms[DeviceType.VideoServer] = videoServerAlarms; + for (const alarm of alarmList) { + const deviceType = getDeviceTypeVal(alarm.deviceType); + stationAlarms[deviceType].push(alarm); + } stationAlarms.unclassified = alarmList; - lineAlarms.value[station.code] = stationAlarms; + await sleep(); } catch (error) { if (error instanceof CanceledError) return lineAlarms.value; console.error(`获取车站 ${station.name} 设备告警数据失败:`, error); @@ -118,7 +108,7 @@ export function useLineAlarmsQuery() { } } - // console.timeEnd('useLineAlarmsQuery'); + console.timeEnd('useLineAlarmsQuery'); return lineAlarms.value; }, diff --git a/src/composables/query/device/use-line-devices-query.ts b/src/composables/query/device/use-line-devices-query.ts index a6606a5..8941e3f 100644 --- a/src/composables/query/device/use-line-devices-query.ts +++ b/src/composables/query/device/use-line-devices-query.ts @@ -1,16 +1,17 @@ import type { Station } from '@/apis/domains'; -import type { PageParams } from '@/apis/models'; -import { postNdmCameraPage, postNdmDecoderPage, postNdmKeyboardPage, postNdmMediaServerPage, postNdmNvrPage, postNdmSecurityBoxPage, postNdmSwitchPage, postNdmVideoServerPage } from '@/apis/requests'; +// import type { PageParams } from '@/apis/models'; +// import { postNdmCameraPage, postNdmDecoderPage, postNdmKeyboardPage, postNdmMediaServerPage, postNdmNvrPage, postNdmSecurityBoxPage, postNdmSwitchPage, postNdmVideoServerPage } from '@/apis/requests'; import { DeviceType } from '@/enums/device-type'; import { useQueryControlStore } from '@/stores/query-control'; import { useStationStore } from '@/stores/station'; -import { useQuery } from '@tanstack/vue-query'; +import { useQuery, useQueryClient } from '@tanstack/vue-query'; import { storeToRefs } from 'pinia'; import { computed } from 'vue'; import type { StationDevices } from './domains'; import { useLineDevicesStore } from '@/stores/line-devices'; -import { CanceledError } from 'axios'; import { LINE_DEVICES_QUERY_KEY } from '@/constants'; +import { ndmClient } from '@/apis/client'; +import { sleep } from '@/utils/sleep'; export interface LineDevices { [stationCode: Station['code']]: StationDevices; @@ -29,6 +30,15 @@ const createEmptyStationDevices = (): StationDevices => { }; }; +const getNdmDevicesAll = async (stationCode: string, signal: AbortSignal) => { + const resp = await ndmClient.get(`/${stationCode}/api/ndm/ndmDevices/all`, { retRaw: true, signal }); + const [err, stationDevices] = resp; + if (err || !stationDevices) { + throw err; + } + return stationDevices; +}; + export function useLineDevicesQuery() { const stationStore = useStationStore(); const { stationList, onlineStationList } = storeToRefs(stationStore); @@ -36,6 +46,7 @@ export function useLineDevicesQuery() { const { pollingEnabled } = storeToRefs(queryControlStore); const lineDevicesStore = useLineDevicesStore(); const { lineDevices } = storeToRefs(lineDevicesStore); + const queryClient = useQueryClient(); return useQuery({ queryKey: [LINE_DEVICES_QUERY_KEY], @@ -45,9 +56,9 @@ export function useLineDevicesQuery() { refetchOnReconnect: false, refetchOnWindowFocus: false, queryFn: async ({ signal }): Promise => { - // console.time('useLineDevicesQuery'); + console.time('useLineDevicesQuery'); - const pageQuery: PageParams<{}> = { model: {}, extra: {}, size: 5000, current: 1, sort: 'id', order: 'ascending' }; + // const pageQuery: PageParams<{}> = { model: {}, extra: {}, size: 5000, current: 1, sort: 'id', order: 'ascending' }; // const lineDevices: LineDevices = {}; @@ -68,88 +79,86 @@ export function useLineDevicesQuery() { if (!lineDevices.value[station.code]) { lineDevices.value[station.code] = createEmptyStationDevices(); } - // const stationDevices = lineDevices.value[station.code]; - const stationDevices = createEmptyStationDevices(); - await Promise.allSettled([ - postNdmCameraPage(station.code, pageQuery, signal) - .then(({ records }) => { - stationDevices[DeviceType.Camera] = records; - }) - .catch((error) => { - if (error instanceof CanceledError) return; - console.error(`获取车站 ${station.name} 摄像机数据失败:`, error); - stationDevices[DeviceType.Camera] = []; - }), - postNdmDecoderPage(station.code, pageQuery, signal) - .then(({ records }) => { - stationDevices[DeviceType.Decoder] = records; - }) - .catch((error) => { - if (error instanceof CanceledError) return; - console.error(`获取车站 ${station.name} 解码器数据失败:`, error); - stationDevices[DeviceType.Decoder] = []; - }), - postNdmKeyboardPage(station.code, pageQuery, signal) - .then(({ records }) => { - stationDevices[DeviceType.Keyboard] = records; - }) - .catch((error) => { - if (error instanceof CanceledError) return; - console.error(`获取车站 ${station.name} 网络键盘数据失败:`, error); - stationDevices[DeviceType.Keyboard] = []; - }), - postNdmMediaServerPage(station.code, pageQuery, signal) - .then(({ records }) => { - stationDevices[DeviceType.MediaServer] = records; - }) - .catch((error) => { - if (error instanceof CanceledError) return; - console.error(`获取车站 ${station.name} 媒体服务器数据失败:`, error); - stationDevices[DeviceType.MediaServer] = []; - }), - postNdmNvrPage(station.code, pageQuery, signal) - .then(({ records }) => { - stationDevices[DeviceType.Nvr] = records; - }) - .catch((error) => { - if (error instanceof CanceledError) return; - console.error(`获取车站 ${station.name} 录像机数据失败:`, error); - stationDevices[DeviceType.Nvr] = []; - }), - postNdmSecurityBoxPage(station.code, pageQuery, signal) - .then(({ records }) => { - stationDevices[DeviceType.SecurityBox] = records; - }) - .catch((error) => { - if (error instanceof CanceledError) return; - console.error(`获取车站 ${station.name} 安防箱数据失败:`, error); - stationDevices[DeviceType.SecurityBox] = []; - }), - postNdmSwitchPage(station.code, pageQuery, signal) - .then(({ records }) => { - stationDevices[DeviceType.Switch] = records; - }) - .catch((error) => { - if (error instanceof CanceledError) return; - console.error(`获取车站 ${station.name} 交换机数据失败:`, error); - stationDevices[DeviceType.Switch] = []; - }), - postNdmVideoServerPage(station.code, pageQuery, signal) - .then(({ records }) => { - stationDevices[DeviceType.VideoServer] = records; - }) - .catch((error) => { - if (error instanceof CanceledError) return; - console.error(`获取车站 ${station.name} 视频服务器数据失败:`, error); - stationDevices[DeviceType.VideoServer] = []; - }), - ]); + // const stationDevices = createEmptyStationDevices(); + + // await Promise.allSettled([ + // postNdmCameraPage(station.code, pageQuery, signal) + // .then(({ records }) => { + // stationDevices[DeviceType.Camera] = records; + // }) + // .catch((error) => { + // console.error(`获取车站 ${station.name} 摄像机数据失败:`, error); + // stationDevices[DeviceType.Camera] = []; + // }), + // postNdmDecoderPage(station.code, pageQuery, signal) + // .then(({ records }) => { + // stationDevices[DeviceType.Decoder] = records; + // }) + // .catch((error) => { + // console.error(`获取车站 ${station.name} 解码器数据失败:`, error); + // stationDevices[DeviceType.Decoder] = []; + // }), + // postNdmKeyboardPage(station.code, pageQuery, signal) + // .then(({ records }) => { + // stationDevices[DeviceType.Keyboard] = records; + // }) + // .catch((error) => { + // console.error(`获取车站 ${station.name} 网络键盘数据失败:`, error); + // stationDevices[DeviceType.Keyboard] = []; + // }), + // postNdmMediaServerPage(station.code, pageQuery, signal) + // .then(({ records }) => { + // stationDevices[DeviceType.MediaServer] = records; + // }) + // .catch((error) => { + // console.error(`获取车站 ${station.name} 媒体服务器数据失败:`, error); + // stationDevices[DeviceType.MediaServer] = []; + // }), + // postNdmNvrPage(station.code, pageQuery, signal) + // .then(({ records }) => { + // stationDevices[DeviceType.Nvr] = records; + // }) + // .catch((error) => { + // console.error(`获取车站 ${station.name} 录像机数据失败:`, error); + // stationDevices[DeviceType.Nvr] = []; + // }), + // postNdmSecurityBoxPage(station.code, pageQuery, signal) + // .then(({ records }) => { + // stationDevices[DeviceType.SecurityBox] = records; + // }) + // .catch((error) => { + // console.error(`获取车站 ${station.name} 安防箱数据失败:`, error); + // stationDevices[DeviceType.SecurityBox] = []; + // }), + // postNdmSwitchPage(station.code, pageQuery, signal) + // .then(({ records }) => { + // stationDevices[DeviceType.Switch] = records; + // }) + // .catch((error) => { + // console.error(`获取车站 ${station.name} 交换机数据失败:`, error); + // stationDevices[DeviceType.Switch] = []; + // }), + // postNdmVideoServerPage(station.code, pageQuery, signal) + // .then(({ records }) => { + // stationDevices[DeviceType.VideoServer] = records; + // }) + // .catch((error) => { + // console.error(`获取车站 ${station.name} 视频服务器数据失败:`, error); + // stationDevices[DeviceType.VideoServer] = []; + // }), + // ]); + + const stationDevices = await getNdmDevicesAll(station.code, signal); lineDevices.value[station.code] = stationDevices; + + await sleep(); } - // console.timeEnd('useLineDevicesQuery'); + console.timeEnd('useLineDevicesQuery'); + + queryClient.invalidateQueries({ queryKey: ['line-alarms'] }); return lineDevices.value; }, diff --git a/src/composables/query/station/use-station-list-query.ts b/src/composables/query/station/use-station-list-query.ts index f22e553..f645160 100644 --- a/src/composables/query/station/use-station-list-query.ts +++ b/src/composables/query/station/use-station-list-query.ts @@ -22,14 +22,14 @@ export function useStationListQuery() { queryKey: [STATION_LIST_QUERY_KEY], enabled: computed(() => pollingEnabled.value), refetchInterval: getAppEnvConfig().requestInterval * 1000, - queryFn: async () => { + queryFn: async ({ signal }) => { // 主动登录校验 - const [err] = await userClient.post(`/api/ndm/ndmKeepAlive/verify`, {}, { timeout: 5000 }); + const [err] = await userClient.post(`/api/ndm/ndmKeepAlive/verify`, {}, { timeout: 5000, signal }); if (err) { throw err; } - const { data: ndmStationList } = await axios.get<{ code: string; name: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`); + const { data: ndmStationList } = await axios.get<{ code: string; name: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`, { signal }); let stations = ndmStationList.map((station) => ({ code: station.code ?? '', @@ -37,7 +37,7 @@ export function useStationListQuery() { online: false, })); - const pingResultList = await Promise.allSettled(stations.map((station) => ndmVerify(station.code))); + const pingResultList = await Promise.allSettled(stations.map((station) => ndmVerify(station.code, signal))); stations = stations.map((station, index) => ({ ...station, @@ -58,7 +58,7 @@ export function useStationListQuery() { // queryClient.invalidateQueries({ queryKey: ['station-devices'] }); // queryClient.invalidateQueries({ queryKey: ['station-alarms'] }); queryClient.invalidateQueries({ queryKey: ['line-devices'] }); - queryClient.invalidateQueries({ queryKey: ['line-alarms'] }); + // queryClient.invalidateQueries({ queryKey: ['line-alarms'] }); return stations; },