fix: 修复服务器状态查询在开启离线模式时没有主动取消的问题

src/components/device/device-card/ndm-server/server-alive.vue

@@ -2,10 +2,10 @@
 import { isMediaServerAliveApi, isSipServerAliveApi, type NdmServerResultVO, type Station } from '@/apis';
 import { DEVICE_TYPE_LITERALS, tryGetDeviceType } from '@/enums';
 import { useSettingStore } from '@/stores';
-import { useQuery } from '@tanstack/vue-query';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
 import { NCard, NTag } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, toRefs } from 'vue';
+import { computed, toRefs, watch } from 'vue';
 
 const props = defineProps<{
   ndmDevice: NdmServerResultVO;
@@ -15,26 +15,38 @@ const props = defineProps<{
 const settingStore = useSettingStore();
 const { offlineDev } = storeToRefs(settingStore);
 
+const queryClient = useQueryClient();
+
 const { ndmDevice, station } = toRefs(props);
 
 const deviceType = computed(() => tryGetDeviceType(ndmDevice.value.deviceType));
 
+const MEDIA_SERVER_ALIVE_QUERY_KEY = 'media-server-alive-query';
+const VIDEO_SERVER_ALIVE_QUERY_KEY = 'video-server-alive-query';
 const { data: isMediaServerAlive } = useQuery({
-  queryKey: computed(() => ['media-server-alive-query', ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
+  queryKey: computed(() => [MEDIA_SERVER_ALIVE_QUERY_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
   enabled: computed(() => !offlineDev.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmMediaServer),
+  refetchInterval: 30 * 1000,
+  gcTime: 0,
   queryFn: async ({ signal }) => {
     const alives = await isMediaServerAliveApi({ stationCode: station.value.code, signal });
     return alives.find((alive) => alive.ip === ndmDevice.value.ipAddress);
   },
-  refetchInterval: 30 * 1000,
 });
 const { data: isSipServerAlive } = useQuery({
-  queryKey: computed(() => ['video-server-alive-query', ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
+  queryKey: computed(() => [VIDEO_SERVER_ALIVE_QUERY_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
   enabled: computed(() => !offlineDev.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmVideoServer),
+  refetchInterval: 30 * 1000,
+  gcTime: 0,
   queryFn: async ({ signal }) => {
     return await isSipServerAliveApi({ stationCode: station.value.code, signal });
   },
-  refetchInterval: 30 * 1000,
+});
+watch(offlineDev, (offline) => {
+  if (offline) {
+    queryClient.cancelQueries({ queryKey: [MEDIA_SERVER_ALIVE_QUERY_KEY] });
+    queryClient.cancelQueries({ queryKey: [VIDEO_SERVER_ALIVE_QUERY_KEY] });
+  }
 });
 </script>
 
@@ -46,14 +58,14 @@ const { data: isSipServerAlive } = useQuery({
     <template #default>
       <div v-if="deviceType === DEVICE_TYPE_LITERALS.ndmMediaServer">
         <span>流媒体服务状态：</span>
-        <template v-if="isMediaServerAlive">
+        <template v-if="!!isMediaServerAlive">
           <NTag size="small" :type="isMediaServerAlive.online ? 'success' : 'error'">{{ isMediaServerAlive.online ? '在线' : '离线' }}</NTag>
         </template>
         <span v-else>-</span>
       </div>
       <div v-if="deviceType === DEVICE_TYPE_LITERALS.ndmVideoServer">
         <span>信令服务状态：</span>
-        <template v-if="isSipServerAlive">
+        <template v-if="isSipServerAlive !== undefined">
           <NTag size="small" :type="isSipServerAlive ? 'success' : 'error'">{{ isSipServerAlive ? '在线' : '离线' }}</NTag>
         </template>
         <span v-else>-</span>