feat: 添加视频服务器双机热备状态

src/components/device/device-card/ndm-server/index.ts

@@ -1,8 +1,9 @@
 import ServerAlive from './server-alive.vue';
 import ServerCard from './server-card.vue';
 import ServerCurrentDiag from './server-current-diag.vue';
+import ServerHighAvailable from './server-high-available.vue';
 import ServerHistoryDiag from './server-history-diag.vue';
 import ServerStreamPush from './server-stream-push.vue';
 import ServerUpdate from './server-update.vue';
 
-export { ServerAlive, ServerCard, ServerCurrentDiag, ServerHistoryDiag, ServerUpdate, ServerStreamPush };
+export { ServerAlive, ServerCard, ServerCurrentDiag, ServerHighAvailable, ServerHistoryDiag, ServerUpdate, ServerStreamPush };

src/components/device/device-card/ndm-server/server-current-diag.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { type NdmServerDiagInfo, type NdmServerResultVO, type Station } from '@/apis';
-import { DeviceHardwareCard, DeviceHeaderCard, ServerAlive, ServerStreamPush } from '@/components';
+import { DeviceHardwareCard, DeviceHeaderCard, ServerAlive, ServerHighAvailable, ServerStreamPush } from '@/components';
 import destr from 'destr';
 import { NFlex } from 'naive-ui';
 import { computed, toRefs } from 'vue';
@@ -27,6 +27,7 @@ const runningTime = computed(() => lastDiagInfo.value?.commInfo?.系统运行时
 
 <template>
   <NFlex vertical>
+    <ServerHighAvailable :ndm-device="ndmDevice" :station="station" />
     <DeviceHeaderCard :ndm-device="ndmDevice" :station="station" />
     <DeviceHardwareCard running-time-label="服务器运行时间" :cpu-usage="cpuUsage" :mem-usage="memUsage" :disk-usage="diskUsage" :running-time="runningTime" />
     <ServerAlive :ndm-device="ndmDevice" :station="station" />

src/components/device/device-card/ndm-server/server-high-available.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { getHighAvailableApi, type NdmServerResultVO, type Station } from '@/apis';
+import { DEVICE_TYPE_LITERALS, tryGetDeviceType } from '@/enums';
+import { useSettingStore } from '@/stores';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { NAlert, NCard, NFlex } from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { computed, toRefs, watch } from 'vue';
+
+const props = defineProps<{
+  ndmDevice: NdmServerResultVO;
+  station: Station;
+}>();
+
+const settingStore = useSettingStore();
+const { activeRequests } = storeToRefs(settingStore);
+
+const queryClient = useQueryClient();
+
+const { ndmDevice, station } = toRefs(props);
+
+const deviceType = computed(() => tryGetDeviceType(ndmDevice.value.deviceType));
+
+const isVideoServer = computed(() => deviceType.value === DEVICE_TYPE_LITERALS.ndmVideoServer);
+
+const SERVER_HIGH_AVAILABLE_QUERY_KEY = 'server-high-available-query';
+
+const deviceUniqueKey = computed(() => [station.value.code, ndmDevice.value.id]);
+
+const { data: highAvailable } = useQuery({
+  queryKey: computed(() => [SERVER_HIGH_AVAILABLE_QUERY_KEY, deviceUniqueKey.value, ndmDevice.value.lastDiagTime]),
+  enabled: computed(() => activeRequests.value && isVideoServer.value),
+  refetchInterval: 30 * 1000,
+  gcTime: 0,
+  queryFn: async ({ signal }) => {
+    const highAvailable = await getHighAvailableApi({ stationCode: station.value.code, signal });
+    return highAvailable;
+  },
+});
+watch(activeRequests, (active) => {
+  if (!active) {
+    queryClient.cancelQueries({ queryKey: [SERVER_HIGH_AVAILABLE_QUERY_KEY] });
+  }
+});
+
+const showCard = computed(() => {
+  const { pyip: physicalIp } = highAvailable.value ?? {};
+  const ipAddressMatched = physicalIp === ndmDevice.value.ipAddress;
+  return isVideoServer.value && ipAddressMatched;
+});
+</script>
+
+<template>
+  <NAlert v-if="showCard && !!highAvailable" :bordered="false" type="success">
+    <template #header>
+      <NFlex :align="'center'">
+        <div>正在提供服务</div>
+        <NFlex :align="'center'" style="font-size: smaller">
+          <div>虚拟IP: {{ highAvailable.vip }}</div>
+          <div>启用时间: {{ highAvailable.changeDate }}</div>
+        </NFlex>
+      </NFlex>
+    </template>
+  </NAlert>
+</template>
+
+<style scoped></style>