From bb140433d8c9efa1700ad5fc6bdadbba11115659 Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Thu, 25 Dec 2025 10:47:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=99=A8=E7=8A=B6=E6=80=81=E6=9F=A5=E8=AF=A2=E5=9C=A8=E5=BC=80?=
 =?UTF-8?q?=E5=90=AF=E7=A6=BB=E7=BA=BF=E6=A8=A1=E5=BC=8F=E6=97=B6=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E4=B8=BB=E5=8A=A8=E5=8F=96=E6=B6=88=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device-card/ndm-server/server-alive.vue   | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/device/device-card/ndm-server/server-alive.vue b/src/components/device/device-card/ndm-server/server-alive.vue
index 0840f39..8b7a23b 100644
--- a/src/components/device/device-card/ndm-server/server-alive.vue
+++ b/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>