feat: 新增流媒体/信令服务状态卡片

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+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 { NCard, NTag } from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { computed, toRefs } from 'vue';
+
+const props = defineProps<{
+  ndmDevice: NdmServerResultVO;
+  station: Station;
+}>();
+
+const settingStore = useSettingStore();
+const { offlineDev } = storeToRefs(settingStore);
+
+const { ndmDevice, station } = toRefs(props);
+
+const deviceType = computed(() => tryGetDeviceType(ndmDevice.value.deviceType));
+
+const { data: isMediaServerAlive } = useQuery({
+  queryKey: computed(() => ['media-server-alive-query', ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
+  enabled: computed(() => !offlineDev.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmMediaServer),
+  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]),
+  enabled: computed(() => !offlineDev.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmVideoServer),
+  queryFn: async ({ signal }) => {
+    return await isSipServerAliveApi({ stationCode: station.value.code, signal });
+  },
+  refetchInterval: 30 * 1000,
+});
+</script>
+
+<template>
+  <NCard hoverable size="small">
+    <template #header>
+      <span>服务状态</span>
+    </template>
+    <template #default>
+      <div v-if="deviceType === DEVICE_TYPE_LITERALS.ndmMediaServer">
+        <span>流媒体服务状态：</span>
+        <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">
+          <NTag size="small" :type="isSipServerAlive ? 'success' : 'error'">{{ isSipServerAlive ? '在线' : '离线' }}</NTag>
+        </template>
+        <span v-else>-</span>
+      </div>
+    </template>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>