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,6 +48,15 @@ function useStationListMutation() {
         name: station.name ?? '',
         online: false,
       }));
+      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 {
@@ -53,6 +64,7 @@ function useStationListMutation() {
             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,7 +2,9 @@ import dayjs from 'dayjs';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 
-export const useQueryControlStore = defineStore('ndm-query-control-store', () => {
+export const useQueryControlStore = defineStore(
+  'ndm-query-control-store',
+  () => {
     const pollingEnabled = ref(true);
     const enablePolling = () => (pollingEnabled.value = true);
     const disablePolling = () => (pollingEnabled.value = false);
@@ -17,6 +19,8 @@ export const useQueryControlStore = defineStore('ndm-query-control-store', () =>
     const updateDeviceQueryUpdatedAt = () => (deviceQueryUpdatedAt.value = dayjs().valueOf());
     const updateAlarmQueryUpdatedAt = () => (alarmQueryUpdatedAt.value = dayjs().valueOf());
 
+    const stationVerifyMode = ref<'concurrent' | 'batch'>('batch');
+
     return {
       pollingEnabled,
       enablePolling,
@@ -31,5 +35,13 @@ export const useQueryControlStore = defineStore('ndm-query-control-store', () =>
       alarmQueryUpdatedAt,
       updateDeviceQueryUpdatedAt,
       updateAlarmQueryUpdatedAt,
+
+      stationVerifyMode,
     };
-});
+  },
+  {
+    persist: {
+      pick: ['stationVerifyMode'],
+    },
+  },
+);