feat: stationVerifyMode

src/components/global/settings-drawer.vue

@@ -1,16 +1,30 @@
 <script setup lang="ts">
-import { NDivider, NDrawer, NDrawerContent, NFlex, NFormItem, NInputNumber, NText } from 'naive-ui';
+import { NDivider, NDrawer, NDrawerContent, NFlex, NFormItem, NInputNumber, NRadio, NRadioGroup, NText } from 'naive-ui';
 import ThemeSwitch from './theme-switch.vue';
 import { useLayoutStore } from '@/stores/layout';
 import { storeToRefs } from 'pinia';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import axios from 'axios';
 import type { VersionInfo } from '@/apis/domains/version-info';
+import { useQueryControlStore } from '@/stores/query-control';
+import { useQueryClient } from '@tanstack/vue-query';
+import { STATION_LIST_QUERY_KEY } from '@/constants';
+import { useUserStore } from '@/stores/user';
 
 const show = defineModel<boolean>('show');
 
 const layoutStore = useLayoutStore();
 const { stationLayoutGridCols } = storeToRefs(layoutStore);
+const queryControlStore = useQueryControlStore();
+const { stationVerifyMode } = storeToRefs(queryControlStore);
+const userStore = useUserStore();
+
+const queryClient = useQueryClient();
+watch(stationVerifyMode, () => {
+  queryClient.cancelQueries({ queryKey: [STATION_LIST_QUERY_KEY] });
+  queryClient.invalidateQueries({ queryKey: [STATION_LIST_QUERY_KEY] });
+  queryClient.refetchQueries({ queryKey: [STATION_LIST_QUERY_KEY] });
+});
 
 const versionInfo = ref<VersionInfo>({ version: '', buildTime: '' });
 
@@ -32,6 +46,15 @@ onMounted(async () => {
         <NFormItem label="车站列数" label-placement="left">
           <NInputNumber v-model:value="stationLayoutGridCols" :min="1" :max="10" />
         </NFormItem>
+        <template v-if="userStore.isSuperAdmin">
+          <NDivider>调试</NDivider>
+          <NFormItem label="车站Ping模式" label-placement="left">
+            <NRadioGroup v-model:value="stationVerifyMode">
+              <NRadio value="concurrent">并发Ping</NRadio>
+              <NRadio value="batch">接口Ping</NRadio>
+            </NRadioGroup>
+          </NFormItem>
+        </template>
       </NFlex>
       <template #footer>
         <NFlex vertical justify="flex-end" align="center" style="width: 100%; font-size: 12px; gap: 4px">

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

@@ -1,5 +1,5 @@
 import type { Station } from '@/apis/domains';
-import { batchVerify } from '@/apis/requests';
+import { batchVerify, ndmVerify } from '@/apis/requests';
 import { STATION_LIST_QUERY_KEY } from '@/constants';
 import { useQueryControlStore } from '@/stores/query-control';
 import { useStationStore } from '@/stores/station';
@@ -38,6 +38,8 @@ interface StationListMutationParams {
 function useStationListMutation() {
   const stationStore = useStationStore();
   const { stationList } = storeToRefs(stationStore);
+  const queryControlStore = useQueryControlStore();
+  const { stationVerifyMode } = storeToRefs(queryControlStore);
   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 });
@@ -46,13 +48,23 @@ function useStationListMutation() {
         name: station.name ?? '',
         online: false,
       }));
-      const verifyList = await batchVerify(signal);
-      return stations.map((station) => {
-        return {
-          ...station,
-          online: !!verifyList.find((stn) => stn.stationCode === station.code)?.onlineState,
-        };
-      });
+      if (stationVerifyMode.value === 'concurrent') {
+        // 方案一：并发ping所有station
+        const stationPingResultList = await Promise.allSettled(stations.map((station) => ndmVerify(station.code, signal)));
+        stationPingResultList.forEach((pingResult, index) => {
+          stations[index].online = pingResult.status === 'fulfilled';
+        });
+        return stations;
+      } else {
+        // 方案二：调用批量verify接口
+        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);

src/stores/query-control.ts

@@ -2,34 +2,46 @@ import dayjs from 'dayjs';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 
-export const useQueryControlStore = defineStore('ndm-query-control-store', () => {
-  const pollingEnabled = ref(true);
-  const enablePolling = () => (pollingEnabled.value = true);
-  const disablePolling = () => (pollingEnabled.value = false);
+export const useQueryControlStore = defineStore(
+  'ndm-query-control-store',
+  () => {
+    const pollingEnabled = ref(true);
+    const enablePolling = () => (pollingEnabled.value = true);
+    const disablePolling = () => (pollingEnabled.value = false);
 
-  const deviceQueryStamp = ref(0);
-  const alarmQueryStamp = ref(0);
-  const updateDeviceQueryStamp = () => (deviceQueryStamp.value = dayjs().valueOf());
-  const updateAlarmQueryStamp = () => (alarmQueryStamp.value = dayjs().valueOf());
+    const deviceQueryStamp = ref(0);
+    const alarmQueryStamp = ref(0);
+    const updateDeviceQueryStamp = () => (deviceQueryStamp.value = dayjs().valueOf());
+    const updateAlarmQueryStamp = () => (alarmQueryStamp.value = dayjs().valueOf());
 
-  const deviceQueryUpdatedAt = ref(0);
-  const alarmQueryUpdatedAt = ref(0);
-  const updateDeviceQueryUpdatedAt = () => (deviceQueryUpdatedAt.value = dayjs().valueOf());
-  const updateAlarmQueryUpdatedAt = () => (alarmQueryUpdatedAt.value = dayjs().valueOf());
+    const deviceQueryUpdatedAt = ref(0);
+    const alarmQueryUpdatedAt = ref(0);
+    const updateDeviceQueryUpdatedAt = () => (deviceQueryUpdatedAt.value = dayjs().valueOf());
+    const updateAlarmQueryUpdatedAt = () => (alarmQueryUpdatedAt.value = dayjs().valueOf());
 
-  return {
-    pollingEnabled,
-    enablePolling,
-    disablePolling,
+    const stationVerifyMode = ref<'concurrent' | 'batch'>('batch');
 
-    deviceQueryStamp,
-    alarmQueryStamp,
-    updateDeviceQueryStamp,
-    updateAlarmQueryStamp,
+    return {
+      pollingEnabled,
+      enablePolling,
+      disablePolling,
 
-    deviceQueryUpdatedAt,
-    alarmQueryUpdatedAt,
-    updateDeviceQueryUpdatedAt,
-    updateAlarmQueryUpdatedAt,
-  };
-});
+      deviceQueryStamp,
+      alarmQueryStamp,
+      updateDeviceQueryStamp,
+      updateAlarmQueryStamp,
+
+      deviceQueryUpdatedAt,
+      alarmQueryUpdatedAt,
+      updateDeviceQueryUpdatedAt,
+      updateAlarmQueryUpdatedAt,
+
+      stationVerifyMode,
+    };
+  },
+  {
+    persist: {
+      pick: ['stationVerifyMode'],
+    },
+  },
+);