perf: lift UX priority when query running

2025-08-29 11:57:07 +08:00
parent a6124d951c
commit cb8bf16d78
3 changed files with 110 additions and 111 deletions
--- 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<LineAlarms> => {
-      // 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;
    },
--- 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<StationDevices>(`/${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<LineDevices> => {
-      // 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;
    },
--- 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<void>(`/api/ndm/ndmKeepAlive/verify`, {}, { timeout: 5000 });
+      const [err] = await userClient.post<void>(`/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>((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;
    },