refactor: add store to save data from queries progressively

src/composables/query/device/use-line-devices-query.ts

@@ -8,6 +8,7 @@ import { useQuery } from '@tanstack/vue-query';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import type { StationDevices } from './domains';
+import { useLineDevicesStore } from '@/stores/line-devices';
 
 export interface LineDevices {
   [stationCode: Station['code']]: StationDevices;
@@ -28,67 +29,116 @@ const createEmptyStationDevices = (): StationDevices => {
 
 export function useLineDevicesQuery() {
   const stationStore = useStationStore();
-  const { updatedTime, stationList, onlineStationList } = storeToRefs(stationStore);
+  const { stationList, onlineStationList } = storeToRefs(stationStore);
   const queryControlStore = useQueryControlStore();
   const { pollingEnabled } = storeToRefs(queryControlStore);
+  const lineDevicesStore = useLineDevicesStore();
+  const { lineDevices } = storeToRefs(lineDevicesStore);
 
   return useQuery({
-    queryKey: ['line-devices', updatedTime],
+    queryKey: ['line-devices'],
     enabled: computed(() => onlineStationList.value.length > 0 && pollingEnabled.value),
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
     queryFn: async ({ signal }): Promise<LineDevices> => {
       // console.time('useLineDevicesQuery');
 
       const pageQuery: PageParams<{}> = { model: {}, extra: {}, size: 5000, current: 1, sort: 'id', order: 'ascending' };
 
-      const lineDevices: LineDevices = {};
+      // const lineDevices: LineDevices = {};
 
-      // 如果没有车站列表，返回空对象
+      // 如果没有车站列表，返回空数据
       if (!stationList?.value) {
-        return lineDevices;
+        lineDevices.value = {};
+        return lineDevices.value;
       }
 
       // 遍历所有车站
       for (const station of stationList.value) {
-        // 如果车站离线，设置空数组
+        // 如果车站离线，设置空数据
         if (!station.online) {
-          lineDevices[station.code] = createEmptyStationDevices();
+          lineDevices.value[station.code] = createEmptyStationDevices();
           continue;
         }
 
-        try {
-          // 并行获取该车站的所有设备类型数据
-          const [cameraData, decoderData, keyboardData, mediaServerData, nvrData, securityBoxData, switchData, videoServerData] = await Promise.all([
-            postNdmCameraPage(station.code, pageQuery, signal),
-            postNdmDecoderPage(station.code, pageQuery, signal),
-            postNdmKeyboardPage(station.code, pageQuery, signal),
-            postNdmMediaServerPage(station.code, pageQuery, signal),
-            postNdmNvrPage(station.code, pageQuery, signal),
-            postNdmSecurityBoxPage(station.code, pageQuery, signal),
-            postNdmSwitchPage(station.code, pageQuery, signal),
-            postNdmVideoServerPage(station.code, pageQuery, signal),
-          ]);
-
-          // 存储该车站的设备数据
-          lineDevices[station.code] = {
-            [DeviceType.Camera]: cameraData.records ?? [],
-            [DeviceType.Decoder]: decoderData.records ?? [],
-            [DeviceType.Keyboard]: keyboardData.records ?? [],
-            [DeviceType.MediaServer]: mediaServerData.records ?? [],
-            [DeviceType.Nvr]: nvrData.records ?? [],
-            [DeviceType.SecurityBox]: securityBoxData.records ?? [],
-            [DeviceType.Switch]: switchData.records ?? [],
-            [DeviceType.VideoServer]: videoServerData.records ?? [],
-          };
-        } catch (error) {
-          console.error(`获取车站 ${station.name} 设备数据失败:`, error);
-          // 如果获取失败，设置空数组
-          lineDevices[station.code] = createEmptyStationDevices();
+        if (!lineDevices.value[station.code]) {
+          lineDevices.value[station.code] = createEmptyStationDevices();
         }
+        const stationDevices = lineDevices.value[station.code];
+
+        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] = [];
+            }),
+        ]);
       }
 
       // console.timeEnd('useLineDevicesQuery');
 
-      return lineDevices;
+      return lineDevices.value;
     },
     placeholderData: (prev) => prev,
   });