Files
ndm-web-platform/src/components/device/device-card/ndm-security-box/security-box-current-diag.vue
T
yangsy 01a2a5bda6 feat: 新增安防箱网卡信息展示并更新卡片标题
- 修改安防箱环境卡片标题为“安防箱环境状态”
- 新增网卡信息展示模块,包含IP、子网掩码、MAC地址等参数
2026-05-20 12:48:18 +08:00

95 lines
3.7 KiB
Vue

<script setup lang="ts">
import type { NdmSecurityBoxDiagInfo, NdmSecurityBoxResultVO, Station } from '@/apis';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, SecurityBoxCircuitCard, SecurityBoxEnvCard, type DeviceCommonCardProps } from '@/components';
import { SECURITY_BOX_VENDOR_LITERALS } from '@/helpers';
import destr from 'destr';
import { NFlex } from 'naive-ui';
import { computed, toRefs } from 'vue';
const props = defineProps<{
ndmDevice: NdmSecurityBoxResultVO;
station: Station;
}>();
const { ndmDevice, station } = toRefs(props);
const lastDiagInfo = computed(() => {
const result = destr<any>(ndmDevice.value.lastDiagInfo);
if (!result) return null;
if (typeof result !== 'object') return null;
return result as NdmSecurityBoxDiagInfo;
});
// 解析安防箱厂商
const vendor = computed(() => {
// 先读取诊断信息中的 stCommonInfo 中的设备厂商
if (!!lastDiagInfo.value?.stCommonInfo?.设备厂商) {
return lastDiagInfo.value.stCommonInfo.设备厂商.trim().toLocaleLowerCase();
}
// 如果 stCommonInfo 中没有设备厂商,再读取 ndmDevice 中的 manufacturer
if (!!ndmDevice.value.manufacturer) {
return ndmDevice.value.manufacturer.trim().toLocaleLowerCase();
}
// 如果 ndmDevice 中也没有 manufacturer,返回 beidian 作为兜底
return SECURITY_BOX_VENDOR_LITERALS.beidian;
});
const commonInfo = computed<DeviceCommonCardProps['commonInfo']>(() => {
const { ipAddress } = ndmDevice.value;
const { ethInfo, ipInfo, stCommonInfo } = lastDiagInfo.value ?? {};
const { 设备ID, 软件版本, 设备厂商, 设备别名, 设备型号, 硬件版本 } = stCommonInfo ?? {};
let operStatus = '-';
if (!!ethInfo?.operStatus) {
operStatus = ethInfo?.operStatus === '1' ? '正常' : '异常';
}
return [
{
title: '设备型号信息',
items: [
{ label: '设备ID', value: 设备ID || '-' },
{ label: '软件版本', value: 软件版本 || '-' },
{ label: '设备厂商', value: 设备厂商 || '-' },
{ 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: operStatus },
],
},
];
});
const cpuUsage = computed(() => lastDiagInfo.value?.stCommonInfo?.CPU使用率);
const memUsage = computed(() => lastDiagInfo.value?.stCommonInfo?.内存使用率);
const fanSpeeds = computed(() => lastDiagInfo.value?.info?.at(0)?.fanSpeeds);
const temperature = computed(() => lastDiagInfo.value?.info?.at(0)?.temperature);
const humidity = computed(() => lastDiagInfo.value?.info?.at(0)?.humidity);
const switches = computed(() => lastDiagInfo.value?.info?.at(0)?.switches);
const circuits = computed(() => lastDiagInfo.value?.info?.at(0)?.circuits);
</script>
<template>
<NFlex vertical>
<DeviceHeaderCard :ndm-device="ndmDevice" :station="station" />
<DeviceCommonCard :common-info="commonInfo" />
<DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
<SecurityBoxEnvCard :fan-speeds="fanSpeeds" :temperature="temperature" :humidity="humidity" :switches="switches" />
<SecurityBoxCircuitCard :ndm-device="ndmDevice" :station="station" :vendor="vendor" :circuits="circuits" />
</NFlex>
</template>
<style scoped lang="scss"></style>