skycurtain/ndm-web-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 统一并优化设备诊断页面的信息展示

Browse Source 
重构报警主机、解码器、录像机、安防箱的设备诊断页通用信息展示逻辑，适配组件新的props格式。完善摄像头诊断相关的接口类型定义，为摄像头诊断页新增硬件使用率展示卡片，补充完整的设备基础信息和网络信息内容
This commit is contained in:
yangsy
2026-05-18 13:25:00 +08:00
parent c03667b312
commit b8ef57e417
6 changed files with 161 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/device/device-card/ndm-alarm-host/alarm-host-current-diag.vue
+12 -7
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { NFlex } from 'naive-ui';
import { DeviceCommonCard, DeviceHeaderCard } from '@/components';
import { DeviceCommonCard, DeviceHeaderCard, type DeviceCommonCardProps } from '@/components';
import type { NdmAlarmHostResultVO, Station } from '@/apis';
import { computed, toRefs } from 'vue';
@@ -11,13 +11,18 @@ const props = defineProps<{
const { ndmDevice, station } = toRefs(props);
const commonInfo = computed(() => {
const commonInfo = computed<DeviceCommonCardProps['commonInfo']>(() => {
const { createdTime, updatedTime, manufacturer } = ndmDevice.value;
return {
创建时间: createdTime ?? '-',
更新时间: updatedTime ?? '-',
制造商: manufacturer ?? '-',
};
return [
{
title: '设备接入信息',
items: [
{ label: '创建时间', value: createdTime || '-' },
{ label: '更新时间', value: updatedTime || '-' },
{ label: '制造商', value: manufacturer || '-' },
],
},
];
});
</script>
src/components/device/device-card/ndm-camera/camera-current-diag.vue
+60 -16
View File
@@ -16,11 +16,12 @@ const isCameraTypeCode = (code: string): code is CameraType => {
</script>
<script setup lang="ts">
import type { NdmCameraResultVO, Station } from '@/apis';
import { DeviceCommonCard, DeviceHeaderCard } from '@/components';
import type { NdmCameraDiagInfo, NdmCameraResultVO, Station } from '@/apis';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, type DeviceCommonCardProps } from '@/components';
import { useSettingStore } from '@/stores';
import { useQuery, useQueryClient } from '@tanstack/vue-query';
import axios from 'axios';
import destr from 'destr';
import { NDescriptions, NDescriptionsItem, NFlex } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { computed, toRefs, watch } from 'vue';
@@ -113,7 +114,17 @@ watch(activeRequests, (active) => {
}
});
const commonInfo = computed(() => {
const lastDiagInfo = computed(() => {
const result = destr<any>(ndmDevice.value.lastDiagInfo);
if (!result) return null;
if (typeof result !== 'object') return null;
return result as NdmCameraDiagInfo;
});
const commonInfo = computed<DeviceCommonCardProps['commonInfo']>(() => {
const { stCommonInfo } = lastDiagInfo.value ?? {};
const { 设备ID, 软件版本, 设备厂商, 设备别名, 设备型号, 硬件版本 } = stCommonInfo ?? {};
const { ethInfo, ipInfo } = lastDiagInfo.value ?? {};
const {
createdTime,
updatedTime,
@@ -126,22 +137,54 @@ const commonInfo = computed(() => {
onvifMinorIndex,
icmpEnabled,
community,
ipAddress,
//
} = ndmDevice.value;
return {
创建时间: createdTime ?? '-',
更新时间: updatedTime ?? '-',
制造商: manufacturer ?? '-',
GB28181启用: `${!!gb28181Enabled ? '是' : '否'}`,
ONVIF端口: `${onvifPort ?? '-'}`,
ONVIF用户名: onvifUsername ?? '-',
ONVIF密码: onvifPassword ?? '-',
ONVIF主流索引: `${onvifMajorIndex ?? '-'}`,
ONVIF辅流索引: `${onvifMinorIndex ?? '-'}`,
ICMP启用: `${!!icmpEnabled ? '是' : '否'}`,
团体字符串: community ?? '-',
};
return [
{
title: '设备型号信息',
items: [
{ label: '设备ID', value: 设备ID || '-' },
{ label: '软件版本', value: 软件版本 || '-' },
{ label: '设备厂商', value: 设备厂商 || manufacturer || '-' },
{ label: '设备别名', value: 设备别名 || '-' },
{ label: '设备型号', value: 设备型号 || '-' },
{ label: '硬件版本', value: 硬件版本 || '-' },
],
},
{
title: '设备网卡信息',
items: [
{ label: 'IP地址', value: ipAddress || '-' },
{ label: '子网掩码', value: ipInfo?.mASK || '-' },
{ label: 'MAC地址', value: ethInfo?.macAddress || '-' },
{ label: '连接速率', value: ethInfo?.speed || '-' },
{ label: 'MTU', value: ethInfo?.mTU || '-' },
{ label: '管理状态', value: ethInfo?.adminStatus || '-' },
{ label: '运行状态', value: ethInfo?.operStatus || '-' },
],
},
{
title: '设备接入信息',
items: [
{ label: '创建时间', value: createdTime || '-' },
{ label: '更新时间', value: updatedTime || '-' },
{ label: 'GB28181启用', value: `${!!gb28181Enabled ? '是' : '否'}` },
{ label: 'ICMP启用', value: `${!!icmpEnabled ? '是' : '否'}` },
{ label: 'ONVIF用户名', value: onvifUsername || '-' },
{ label: 'ONVIF密码', value: onvifPassword || '-' },
{ label: 'ONVIF主流索引', value: `${onvifMajorIndex ?? '-'}` },
{ label: 'ONVIF辅流索引', value: `${onvifMinorIndex ?? '-'}` },
{ label: 'ONVIF端口', value: `${onvifPort ?? '-'}` },
{ label: '团体字符串', value: community || '-' },
],
},
];
});
const cpuUsage = computed(() => lastDiagInfo.value?.stCommonInfo?.CPU使用率);
const memUsage = computed(() => lastDiagInfo.value?.stCommonInfo?.内存使用率);
</script>
<template>
@@ -155,6 +198,7 @@ const commonInfo = computed(() => {
</template>
</DeviceHeaderCard>
<DeviceCommonCard :common-info="commonInfo" />
<DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
</NFlex>
</template>
src/components/device/device-card/ndm-decoder/decoder-current-diag.vue
+16 -10
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import type { NdmDecoderDiagInfo, NdmDecoderResultVO, Station } from '@/apis';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard } from '@/components';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, type DeviceCommonCardProps } from '@/components';
import destr from 'destr';
import { NFlex } from 'naive-ui';
import { computed, toRefs } from 'vue';
@@ -19,17 +19,23 @@ const lastDiagInfo = computed(() => {
return result as NdmDecoderDiagInfo;
});
const commonInfo = computed(() => {
const commonInfo = computed<DeviceCommonCardProps['commonInfo']>(() => {
const { stCommonInfo } = lastDiagInfo.value ?? {};
const { 设备ID, 软件版本, 设备厂商, 设备别名, 设备型号, 硬件版本 } = stCommonInfo ?? {};
return {
设备ID: 设备ID ?? '-',
软件版本: 软件版本 ?? '-',
设备厂商: 设备厂商 ?? '-',
设备别名: 设备别名 ?? '-',
设备型号: 设备型号 ?? '-',
硬件版本: 硬件版本 ?? '-',
};
return [
{
title: '设备型号信息',
items: [
{ label: '设备ID', value: 设备ID || '-' },
{ label: '软件版本', value: 软件版本 || '-' },
{ label: '设备厂商', value: 设备厂商 || '-' },
{ label: '设备别名', value: 设备别名 || '-' },
{ label: '设备型号', value: 设备型号 || '-' },
{ label: '硬件版本', value: 硬件版本 || '-' },
],
},
];
});
const cpuUsage = computed(() => lastDiagInfo.value?.stCommonInfo?.CPU使用率);
src/components/device/device-card/ndm-nvr/nvr-current-diag.vue
+16 -10
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import type { NdmNvrDiagInfo, NdmNvrResultVO, Station } from '@/apis';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, NvrDiskCard, NvrRecordCheckCard } from '@/components';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, NvrDiskCard, NvrRecordCheckCard, type DeviceCommonCardProps } from '@/components';
import { isNvrCluster } from '@/helpers';
import destr from 'destr';
import { NFlex } from 'naive-ui';
@@ -20,18 +20,24 @@ const lastDiagInfo = computed(() => {
return result as NdmNvrDiagInfo;
});
const commonInfo = computed(() => {
const commonInfo = computed<DeviceCommonCardProps['commonInfo']>(() => {
const { stCommonInfo } = lastDiagInfo.value ?? {};
if (!stCommonInfo) return undefined;
const { 设备ID, 软件版本, 生产厂商, 设备别名, 设备型号, 硬件版本 } = stCommonInfo;
return {
设备ID: 设备ID ?? '-',
软件版本: 软件版本 ?? '-',
生产厂商: 生产厂商 ?? '-',
设备别名: 设备别名 ?? '-',
设备型号: 设备型号 ?? '-',
硬件版本: 硬件版本 ?? '-',
};
return [
{
title: '设备型号信息',
items: [
{ label: '设备ID', value: 设备ID || '-' },
{ label: '软件版本', value: 软件版本 || '-' },
{ label: '生产厂商', value: 生产厂商 || '-' },
{ label: '设备别名', value: 设备别名 || '-' },
{ label: '设备型号', value: 设备型号 || '-' },
{ label: '硬件版本', value: 硬件版本 || '-' },
],
},
];
});
const cpuUsage = computed(() => lastDiagInfo.value?.stCommonInfo?.CPU使用率);
src/components/device/device-card/ndm-security-box/security-box-current-diag.vue
+16 -10
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import type { NdmSecurityBoxDiagInfo, NdmSecurityBoxResultVO, Station } from '@/apis';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, SecurityBoxCircuitCard, SecurityBoxEnvCard } from '@/components';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, SecurityBoxCircuitCard, SecurityBoxEnvCard, type DeviceCommonCardProps } from '@/components';
import destr from 'destr';
import { NFlex } from 'naive-ui';
import { computed, toRefs } from 'vue';
@@ -19,17 +19,23 @@ const lastDiagInfo = computed(() => {
return result as NdmSecurityBoxDiagInfo;
});
const commonInfo = computed(() => {
const commonInfo = computed<DeviceCommonCardProps['commonInfo']>(() => {
const { stCommonInfo } = lastDiagInfo.value ?? {};
const { 设备ID, 软件版本, 设备厂商, 设备别名, 设备型号, 硬件版本 } = stCommonInfo ?? {};
return {
设备ID: 设备ID ?? '',
软件版本: 软件版本 ?? '',
设备厂商: 设备厂商 ?? '',
设备别名: 设备别名 ?? '',
设备型号: 设备型号 ?? '',
硬件版本: 硬件版本 ?? '',
};
return [
{
title: '设备型号信息',
items: [
{ label: '设备ID', value: 设备ID || '-' },
{ label: '软件版本', value: 软件版本 || '-' },
{ label: '设备厂商', value: 设备厂商 || '-' },
{ label: '设备别名', value: 设备别名 || '-' },
{ label: '设备型号', value: 设备型号 || '-' },
{ label: '硬件版本', value: 硬件版本 || '-' },
],
},
];
});
const cpuUsage = computed(() => lastDiagInfo.value?.stCommonInfo?.CPU使用率);