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

重构报警主机、解码器、录像机、安防箱的设备诊断页通用信息展示逻辑，适配组件新的props格式。完善摄像头诊断相关的接口类型定义，为摄像头诊断页新增硬件使用率展示卡片，补充完整的设备基础信息和网络信息内容

src/apis/domain/biz/diag/ndm-camera-diag-info.ts

@@ -1,5 +1,45 @@
 export interface NdmCameraDiagInfo {
   [key: string]: any;
+  ethInfo?: {
+    adminStatus?: string; // '1'
+    desc?: string; // 'IPcamera'
+    ifType?: string; // '5'
+    inDiscards?: string; // '0'
+    inErrors?: string; // '0'
+    inNUcastPkts?: string; // '0'
+    inOctets?: string; // '0'
+    inUcastPkts?: string; // '0'
+    inUnknownProtos?: string; // '0'
+    index?: string; // '1'
+    lastChange?: string; // '0:00:00.00'
+    mTU?: string; // '1500'
+    macAddress?: string; // '04:ee:cd:52:3a:a5'
+    operStatus?: string; // '1'
+    outDiscards?: string; // '0'
+    outErrors?: string; // '0'
+    outNUcastPkts?: string; // '0'
+    outOctets?: string; // '0'
+    outQLen?: string; // '0'
+    outUcastPkts?: string; // '0'
+    specific?: string; // '0.0'
+    speed?: string; // '10000000'
+  };
+  ipInfo?: {
+    broadcastAddress?: string; // '0'
+    iPAddress?: string; // '0'
+    index?: string; // '1'
+    mASK?: string; // '255.255.255.0'
+    reasmMaxSize?: string; // '0'
+  };
   logTime?: string;
-  info?: string;
+  stCommonInfo?: {
+    设备ID?: string;
+    软件版本?: string;
+    设备厂商?: string;
+    设备别名?: string;
+    设备型号?: string;
+    硬件版本?: string;
+    内存使用率?: string;
+    CPU使用率?: string;
+  };
 }

src/components/device/device-card/ndm-alarm-host/alarm-host-current-diag.vue

@@ -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 {
+  return [
-    创建时间: createdTime ?? '-',
+    {
-    更新时间: updatedTime ?? '-',
+      title: '设备接入信息',
-    制造商: manufacturer ?? '-',
+      items: [
-  };
+        { label: '创建时间', value: createdTime || '-' },
+        { label: '更新时间', value: updatedTime || '-' },
+        { label: '制造商', value: manufacturer || '-' },
+      ],
+    },
+  ];
 });
 </script>
 

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

@@ -16,11 +16,12 @@ const isCameraTypeCode = (code: string): code is CameraType => {
 </script>
 
 <script setup lang="ts">
-import type { NdmCameraResultVO, Station } from '@/apis';
+import type { NdmCameraDiagInfo, NdmCameraResultVO, Station } from '@/apis';
-import { DeviceCommonCard, DeviceHeaderCard } from '@/components';
+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 ?? '-',
+  return [
-    更新时间: updatedTime ?? '-',
+    {
-    制造商: manufacturer ?? '-',
+      title: '设备型号信息',
-    GB28181启用: `${!!gb28181Enabled ? '是' : '否'}`,
+      items: [
-    ONVIF端口: `${onvifPort ?? '-'}`,
+        { label: '设备ID', value: 设备ID || '-' },
-    ONVIF用户名: onvifUsername ?? '-',
+        { label: '软件版本', value: 软件版本 || '-' },
-    ONVIF密码: onvifPassword ?? '-',
+        { label: '设备厂商', value: 设备厂商 || manufacturer || '-' },
-    ONVIF主流索引: `${onvifMajorIndex ?? '-'}`,
+        { label: '设备别名', value: 设备别名 || '-' },
-    ONVIF辅流索引: `${onvifMinorIndex ?? '-'}`,
+        { label: '设备型号', value: 设备型号 || '-' },
-    ICMP启用: `${!!icmpEnabled ? '是' : '否'}`,
+        { label: '硬件版本', value: 硬件版本 || '-' },
-    团体字符串: community ?? '-',
+      ],
-  };
+    },
+    {
+      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

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

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

@@ -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使用率);