refactor:

- extend NdmDeviceAlarmLogVO
- only query alarm counts
- separate request and store update in useQuery
- refactor station card and alarm modal, data fetching is now inside modal
- optimize device tree
- optimize query station list
- make export size follow page size
- fix query sequence and make them follow stations -> devices -> alarms

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

@@ -1,66 +1,63 @@
-import { userClient } from '@/apis/client';
 import type { Station } from '@/apis/domains';
-import { ndmVerify } from '@/apis/requests';
+import { batchVerify } from '@/apis/requests';
 import { STATION_LIST_QUERY_KEY } from '@/constants';
 import { useQueryControlStore } from '@/stores/query-control';
 import { useStationStore } from '@/stores/station';
 import { getAppEnvConfig } from '@/utils/env';
-import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { useMutation, useQuery } from '@tanstack/vue-query';
 import axios from 'axios';
 import dayjs from 'dayjs';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 
 export function useStationListQuery() {
-  const stationStore = useStationStore();
-  const { stationList } = storeToRefs(stationStore);
   const queryControlStore = useQueryControlStore();
   const { pollingEnabled } = storeToRefs(queryControlStore);
-  const queryClient = useQueryClient();
+  const { mutateAsync: getStationList } = useStationListMutation();
 
   return useQuery({
     queryKey: [STATION_LIST_QUERY_KEY],
     enabled: computed(() => pollingEnabled.value),
     refetchInterval: getAppEnvConfig().requestInterval * 1000,
+    staleTime: getAppEnvConfig().requestInterval * 1000,
     queryFn: async ({ signal }) => {
-      // 主动登录校验
-      const [err] = await userClient.post<void>(`/api/ndm/ndmKeepAlive/verify`, {}, { timeout: 5000, signal });
-      if (err) {
-        throw err;
-      }
+      console.time('useStationListQuery');
+      await getStationList({ signal });
+      console.timeEnd('useStationListQuery');
+      queryControlStore.updateDeviceQueryStamp();
+      return null;
+    },
+  });
+}
 
+interface StationListMutationParams {
+  signal?: AbortSignal;
+}
+
+function useStationListMutation() {
+  const stationStore = useStationStore();
+  const { stationList } = storeToRefs(stationStore);
+  return useMutation<Station[], Error, StationListMutationParams>({
+    mutationFn: async ({ signal }) => {
       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) => ({
+      const stations = ndmStationList.map<Station>((station) => ({
         code: station.code ?? '',
         name: station.name ?? '',
         online: false,
       }));
-
-      const pingResultList = await Promise.allSettled(stations.map((station) => ndmVerify(station.code, signal)));
-
-      stations = stations.map((station, index) => ({
-        ...station,
-        online: pingResultList[index].status === 'fulfilled',
-      }));
-
-      const isSame =
-        stationList.value.length === stations.length &&
-        stationList.value.every((oldStation, index) => {
-          const newStation = stations[index];
-          return oldStation.code === newStation.code && oldStation.name === newStation.name && oldStation.online === newStation.online;
-        });
-
+      const verifyList = await batchVerify(signal);
+      return stations.map((station) => {
+        return {
+          ...station,
+          online: !!verifyList.find((stn) => stn.stationCode === station.code)?.onlineState,
+        };
+      });
+    },
+    onSuccess: (stations) => {
+      const isSame = JSON.stringify(stationList.value) === JSON.stringify(stations);
       if (!isSame) {
         stationList.value.splice(0, stationList.value.length, ...stations);
       }
-
-      // queryClient.invalidateQueries({ queryKey: ['station-devices'] });
-      // queryClient.invalidateQueries({ queryKey: ['station-alarms'] });
-      queryClient.invalidateQueries({ queryKey: ['line-devices'] });
-      // queryClient.invalidateQueries({ queryKey: ['line-alarms'] });
-
-      return stations;
     },
   });
 }