refactor: add store to save data from queries progressively

src/composables/query/alarm/use-line-alarms-query.ts

@@ -8,6 +8,7 @@ import dayjs from 'dayjs';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import type { StationAlarms } from './domains';
+import { useLineAlarmsStore } from '@/stores/line-alarms';
 
 export interface LineAlarms {
   [stationCode: Station['code']]: StationAlarms;
@@ -15,24 +16,29 @@ export interface LineAlarms {
 
 export function useLineAlarmsQuery() {
   const stationStore = useStationStore();
-  const { updatedTime, stationList, onlineStationList } = storeToRefs(stationStore);
+  const { stationList, onlineStationList } = storeToRefs(stationStore);
   const queryControlStore = useQueryControlStore();
   const { pollingEnabled } = storeToRefs(queryControlStore);
+  const lineAlarmsStore = useLineAlarmsStore();
+  const { lineAlarms } = storeToRefs(lineAlarmsStore);
 
   return useQuery({
-    queryKey: ['line-alarms', updatedTime],
+    queryKey: ['line-alarms'],
     enabled: computed(() => onlineStationList.value.length > 0 && pollingEnabled.value),
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
     queryFn: async ({ signal }): Promise<LineAlarms> => {
       // console.time('useLineAlarmsQuery');
 
-      const lineAlarms: LineAlarms = {};
-
       if (!stationList?.value) {
-        return lineAlarms;
+        lineAlarms.value = {};
+        return lineAlarms.value;
       }
 
       for (const station of stationList.value) {
-        lineAlarms[station.code] = {
+        lineAlarms.value[station.code] = {
           [DeviceType.Camera]: [],
           [DeviceType.Decoder]: [],
           [DeviceType.Keyboard]: [],
@@ -71,7 +77,7 @@ export function useLineAlarmsQuery() {
           const securityBoxAlarms = alarmList.filter((device) => device.deviceType === DeviceType.SecurityBox);
           const switchAlarms = alarmList.filter((device) => device.deviceType === DeviceType.Switch);
           const videoServerAlarms = alarmList.filter((device) => device.deviceType === DeviceType.VideoServer);
-          lineAlarms[station.code] = {
+          lineAlarms.value[station.code] = {
             [DeviceType.Camera]: cameraAlarms,
             [DeviceType.Decoder]: decoderAlarms,
             [DeviceType.Keyboard]: keyboardAlarms,
@@ -89,7 +95,7 @@ export function useLineAlarmsQuery() {
 
       // console.timeEnd('useLineAlarmsQuery');
 
-      return lineAlarms;
+      return lineAlarms.value;
     },
     placeholderData: (prev) => prev,
   });

src/composables/query/alarm/use-station-alarms-query.ts

@@ -23,7 +23,7 @@ const createEmptyStationAlarms = (): StationAlarms => ({
 
 export function useStationAlarmsQuery(stationCode: Station['code']) {
   const stationStore = useStationStore();
-  const { updatedTime, onlineStationList } = storeToRefs(stationStore);
+  const { onlineStationList } = storeToRefs(stationStore);
 
   const queryControlStore = useQueryControlStore();
   const { pollingEnabled } = storeToRefs(queryControlStore);
@@ -31,8 +31,12 @@ export function useStationAlarmsQuery(stationCode: Station['code']) {
   const isOnline = computed(() => onlineStationList.value.some((stn) => stn.code === stationCode));
 
   return useQuery({
-    queryKey: ['station-alarms', stationCode, updatedTime],
+    queryKey: ['station-alarms', stationCode],
     enabled: computed(() => isOnline.value && pollingEnabled.value),
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
     queryFn: async ({ signal }): Promise<StationAlarms> => {
       // 如果车站离线，返回空数据
       if (!isOnline.value) {

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 {
+        if (!lineDevices.value[station.code]) {
-          // 并行获取该车站的所有设备类型数据
+          lineDevices.value[station.code] = createEmptyStationDevices();
-          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();
         }
+        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,
   });

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

@@ -24,7 +24,7 @@ const createEmptyStationDevices = (): StationDevices => {
 
 export function useStationDevicesQuery(stationCode: Station['code']) {
   const stationStore = useStationStore();
-  const { updatedTime, onlineStationList } = storeToRefs(stationStore);
+  const { onlineStationList } = storeToRefs(stationStore);
 
   const queryControlStore = useQueryControlStore();
   const { pollingEnabled } = storeToRefs(queryControlStore);
@@ -32,8 +32,12 @@ export function useStationDevicesQuery(stationCode: Station['code']) {
   const isOnline = computed(() => onlineStationList.value.some((s) => s.code === stationCode));
 
   return useQuery({
-    queryKey: ['station-devices', stationCode, updatedTime],
+    queryKey: ['station-devices', stationCode],
     enabled: computed(() => isOnline.value && pollingEnabled.value),
+    staleTime: Infinity,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
     queryFn: async ({ signal }): Promise<StationDevices> => {
       const pageQuery: PageParams<{}> = { model: {}, extra: {}, size: 5000, current: 1, sort: 'id', order: 'ascending' };
 

src/composables/query/station/use-station-list-query.ts

@@ -3,7 +3,7 @@ import { ndmVerify } from '@/apis/requests';
 import { useQueryControlStore } from '@/stores/query-control';
 import { useStationStore } from '@/stores/station';
 import { getAppEnvConfig } from '@/utils/env';
-import { useQuery } from '@tanstack/vue-query';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
 import axios from 'axios';
 import dayjs from 'dayjs';
 import { storeToRefs } from 'pinia';
@@ -11,7 +11,7 @@ import { computed } from 'vue';
 
 export function useStationListQuery() {
   const stationStore = useStationStore();
-  const { updatedTime, stationList } = storeToRefs(stationStore);
+  const { stationList } = storeToRefs(stationStore);
   const queryControlStore = useQueryControlStore();
   const { pollingEnabled } = storeToRefs(queryControlStore);
 
@@ -45,7 +45,11 @@ export function useStationListQuery() {
         stationList.value.splice(0, stationList.value.length, ...stations);
       }
 
-      updatedTime.value = dayjs().toJSON();
+      const queryClient = useQueryClient();
+      queryClient.invalidateQueries({ queryKey: ['station-devices'] });
+      queryClient.invalidateQueries({ queryKey: ['station-alarms'] });
+      // queryClient.invalidateQueries({ queryKey: ['line-devices'] });
+      // queryClient.invalidateQueries({ queryKey: ['line-alarms'] });
 
       return stations;
     },

src/stores/line-alarms.ts

@@ -0,0 +1,11 @@
+import type { LineAlarms } from '@/composables/query';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useLineAlarmsStore = defineStore('line-alarms', () => {
+  const lineAlarms = ref<LineAlarms>({});
+
+  return {
+    lineAlarms,
+  };
+});

src/stores/line-devices.ts

@@ -0,0 +1,11 @@
+import type { LineDevices } from '@/composables/query';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useLineDevicesStore = defineStore('ndm-line-devices-store', () => {
+  const lineDevices = ref<LineDevices>({});
+
+  return {
+    lineDevices,
+  };
+});

src/stores/station.ts

@@ -3,14 +3,11 @@ import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
 
 export const useStationStore = defineStore('ndm-station-store', () => {
-  const updatedTime = ref('');
-
   const stationList = ref<Station[]>([]);
 
   const onlineStationList = computed(() => stationList.value.filter((station) => station.online));
 
   return {
-    updatedTime,
     stationList,
     onlineStationList,
   };