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

This commit is contained in:
yangsy
2025-12-12 10:44:00 +08:00
parent 77406f1932
commit 5bfda437a6
7 changed files with 102 additions and 3 deletions

View File

@@ -1,3 +1,4 @@
export * from './client-channel';
export * from './media-server-status';
export * from './record-info';
export * from './record-item';

View File

@@ -0,0 +1,5 @@
export interface MediaServerStatus {
id: string;
ip: string;
online: boolean;
}

View File

@@ -1,2 +1,3 @@
export * from './ndm-security-box';
export * from './ndm-service-available';
export * from './ndm-switch';

View File

@@ -0,0 +1,25 @@
import { ndmClient, userClient, type MediaServerStatus, type Station } from '@/apis';
export const isMediaServerAliveApi = async (options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
const { stationCode, signal } = options ?? {};
const client = stationCode ? ndmClient : userClient;
const prefix = stationCode ? `/${stationCode}` : '';
const endpoint = `${prefix}/api/ndm/ndmServiceAvailable/mediaServer/isAlive`;
const resp = await client.get<MediaServerStatus[]>(endpoint, { signal });
const [err, data] = resp;
if (err) throw err;
if (!data) throw new Error(`${data}`);
return data;
};
export const isSipServerAliveApi = async (options?: { stationCode?: Station['code']; signal?: AbortSignal }) => {
const { stationCode, signal } = options ?? {};
const client = stationCode ? ndmClient : userClient;
const prefix = stationCode ? `/${stationCode}` : '';
const endpoint = `${prefix}/api/ndm/ndmServiceAvailable/sipServer/isAlive`;
const resp = await client.get<boolean>(endpoint, { signal });
const [err, data] = resp;
if (err) throw err;
if (data === null) throw new Error(`${data}`);
return data;
};

View File

@@ -1,6 +1,7 @@
import ServerAlive from './server-alive.vue';
import ServerCard from './server-card.vue';
import ServerCurrentDiag from './server-current-diag.vue';
import ServerHistoryDiag from './server-history-diag.vue';
import ServerUpdate from './server-update.vue';
export { ServerCard, ServerCurrentDiag, ServerHistoryDiag, ServerUpdate };
export { ServerAlive, ServerCard, ServerCurrentDiag, ServerHistoryDiag, ServerUpdate };

View File

@@ -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>

View File

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