feat(camera-card): detail panel

src/components/device-page/device-card/camera-card.vue

@@ -7,6 +7,7 @@ import { computed, ref, toRefs } from 'vue';
 
 import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
 import CameraHistoryDiagCard from './history-diag-card/camera-history-diag-card.vue';
+import DeviceCommonCard from './current-diag-card/device-common-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -24,6 +25,40 @@ const lastDiagInfo = computed(() => {
   return result;
 });
 
+const commonInfo = computed(() => {
+  const {
+    createdTime,
+    updatedTime,
+    manufacturer,
+    gb28181Enabled,
+    onvifPort,
+    onvifUsername,
+    onvifPassword,
+    onvifMajorIndex,
+    onvifMinorIndex,
+    icmpEnabled,
+    deviceType,
+    cameraType,
+    community,
+    //
+  } = ndmCamera.value;
+  return {
+    创建时间: createdTime ?? '',
+    更新时间: updatedTime ?? '',
+    制造商: manufacturer ?? '',
+    GB28181使能: `${gb28181Enabled !== undefined ? gb28181Enabled : ''}`,
+    ONVIF端口: `${onvifPort ?? ''}`,
+    ONVIF用户名: onvifUsername ?? '',
+    ONVIF密码: onvifPassword ?? '',
+    ONVIF主流索引: `${onvifMajorIndex ?? ''}`,
+    ONVIF辅流索引: `${onvifMinorIndex ?? ''}`,
+    ICMP使能: `${icmpEnabled !== undefined ? icmpEnabled : ''}`,
+    设备类型: deviceType ?? '',
+    相机类型: cameraType ?? '',
+    团体字符串: community ?? '',
+  };
+});
+
 const selectedTab = ref('设备状态');
 </script>
 
@@ -33,6 +68,7 @@ const selectedTab = ref('设备状态');
       <NTabPane name="设备状态" tab="设备状态">
         <NFlex vertical>
           <DeviceHeaderCard :device="ndmCamera" />
+          <DeviceCommonCard :common-info="commonInfo" />
         </NFlex>
       </NTabPane>
       <NTabPane name="历史诊断" tab="历史诊断">