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

feat: device cards

Browse Source
This commit is contained in:
yangsy
2025-09-02 23:35:54 +08:00
parent ced07b17ff
commit 9bf8229bf6
16 changed files with 2211 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

361
src/components/device-page/box-circuit-card.vue Normal file
View File

@@ -0,0 +1,361 @@
<script setup lang="ts">
import type { NdmSecurityBoxCircuit } from '@/apis/domains';
import type { NdmSecurityBoxResultVO } from '@/apis/models';
import { rebootSecurityBox, turnStatus } from '@/apis/requests';
import { PowerOutline, FlashOutline } from '@vicons/ionicons5';
import { NCard, NGrid, NGridItem, NPopover, NSwitch, NIcon, NFlex, NPopconfirm, NButton } from 'naive-ui';
import { computed, toRefs } from 'vue';
/**
* 安防箱电路状态卡片组件
*
* 功能描述：
* 1. 显示安防箱的电路状态信息（电压、电流、状态）
* 2. 提供电路开关控制功能
* 3. 支持浅色和深色主题模式
* 4. 响应式布局显示电路信息
*/
const props = defineProps<{
stationCode: string;
ndmSecurityBox: NdmSecurityBoxResultVO;
circuits?: NdmSecurityBoxCircuit[];
}>();
const { stationCode, ndmSecurityBox, circuits } = toRefs(props);
const validCircuits = computed(() => {
if (!circuits.value || circuits.value.length === 0) {
return [];
}
return circuits.value;
});
/**
* 获取电路状态样式类
* @param circuit 电路信息
* @returns CSS类名
*/
const getCircuitStatusClass = (circuit: NdmSecurityBoxCircuit) => {
if (circuit.status === 1) {
return 'circuit-on';
} else if (circuit.status === 0) {
return 'circuit-off';
}
return 'circuit-unknown';
};
/**
* 获取电路状态文本
* @param circuit 电路信息
* @returns 状态文本
*/
const getCircuitStatusText = (circuit: NdmSecurityBoxCircuit) => {
if (circuit.status === 1) {
return '开启';
} else if (circuit.status === 0) {
return '关闭';
}
return '未知';
};
/**
* 处理电路开关切换
* @param circuitIndex 电路索引
* @param newStatus 新状态
*/
const handleCircuitToggle = async (circuitIndex: number, newStatus: boolean) => {
if (!ndmSecurityBox.value.ipAddress) {
window.$message.error('设备IP地址不存在');
return;
}
try {
const status = newStatus ? 1 : 0;
await turnStatus(stationCode.value, ndmSecurityBox.value.ipAddress, circuitIndex, status);
window.$message.success(`电路${circuitIndex + 1}${newStatus ? '开启' : '关闭'}成功 下次更新诊断数据时将刷新状态`);
} catch (error) {
window.$message.error(`电路${circuitIndex + 1}操作失败`);
console.error('电路开关操作失败:', error);
}
};
const onClickReboot = async () => {
if (!ndmSecurityBox.value.ipAddress) {
window.$message.error('设备IP地址不存在');
return;
}
try {
await rebootSecurityBox(stationCode.value, ndmSecurityBox.value.ipAddress);
window.$message.success('设备重启成功');
} catch (error) {
window.$message.error('设备重启失败');
console.error('设备重启失败:', error);
}
};
</script>
<template>
<NCard v-if="validCircuits.length > 0" size="small" hoverable>
<template #header>
<NFlex :align="'center'">
<div>电路状态</div>
<NPopconfirm :positive-text="'确认'" :negative-text="'取消'" @positive-click="onClickReboot">
<template #trigger>
<NButton secondary size="small">重合闸</NButton>
</template>
确定要执行重合闸操作吗？此操作将重启安防箱设备。
</NPopconfirm>
</NFlex>
</template>
<div class="circuit-layout">
<NGrid :cols="Math.min(validCircuits.length, 4)" :x-gap="12" :y-gap="12" class="circuit-grid">
<NGridItem v-for="(circuit, index) in validCircuits" :key="index">
<!-- 电路信息弹窗 -->
<NPopover trigger="hover" placement="top">
<template #trigger>
<div class="circuit-item" :class="getCircuitStatusClass(circuit)">
<div class="circuit-header">
<NIcon size="16" class="circuit-icon">
<PowerOutline />
</NIcon>
<span class="circuit-name">电路{{ index + 1 }}</span>
</div>
<div class="circuit-status">
<div class="status-indicator" :class="getCircuitStatusClass(circuit)"></div>
<span class="status-text">{{ getCircuitStatusText(circuit) }}</span>
</div>
<div class="circuit-control">
<NPopconfirm :positive-text="'确认'" :negative-text="'取消'" @positive-click="() => handleCircuitToggle(index, circuit.status !== 1)">
<template #trigger>
<NSwitch :value="circuit.status === 1" size="small" />
</template>
确定要{{ circuit.status === 1 ? '关闭' : '开启' }}电路{{ index + 1 }}吗？
</NPopconfirm>
</div>
</div>
</template>
<!-- 弹窗详细信息 -->
<div class="circuit-popover-content">
<div class="circuit-info-row">
<span class="label">电路:</span>
<span class="value">电路{{ index + 1 }}</span>
</div>
<div class="circuit-info-row">
<span class="label">状态:</span>
<span class="value" :class="getCircuitStatusClass(circuit)">
{{ getCircuitStatusText(circuit) }}
</span>
</div>
<div class="circuit-info-row">
<NFlex :align="'center'" :size="4">
<NIcon size="12" style="color: #f0a020">
<FlashOutline />
</NIcon>
<span class="label">电压:</span>
</NFlex>
<span class="value">{{ circuit.voltage }}V</span>
</div>
<div class="circuit-info-row">
<NFlex :align="'center'" :size="4">
<NIcon size="12" style="color: #2080f0">
<FlashOutline />
</NIcon>
<span class="label">电流:</span>
</NFlex>
<span class="value">{{ circuit.current }}A</span>
</div>
</div>
</NPopover>
</NGridItem>
</NGrid>
</div>
</NCard>
</template>
<style scoped lang="scss">
/*
* 安防箱电路状态卡片样式
*
* 设计理念：
* 1. 清晰的电路状态指示
* 2. 直观的开关控制界面
* 3. 良好的交互体验
* 4. 亮色/暗色模式适配
*/
.circuit-layout {
.circuit-grid {
max-width: 100%;
}
/*
* 电路项样式 - 核心视觉元素
*
* 尺寸设计：120x80px，适合显示电路信息和控制开关
* 状态指示：通过边框颜色和状态指示器区分电路状态
* 交互效果：悬停时轻微上移和阴影效果
*/
.circuit-item {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 120px;
height: 80px;
padding: 8px;
border: 1px solid var(--border-color);
border-radius: 6px;
background: var(--card-color);
cursor: pointer;
transition: all 0.2s ease;
/* 悬停效果 */
&:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 电路头部 - 图标和名称 */
.circuit-header {
display: flex;
align-items: center;
gap: 6px;
.circuit-icon {
color: var(--text-color-3);
}
.circuit-name {
font-size: 12px;
font-weight: 500;
color: var(--text-color-2);
}
}
/* 电路状态显示 */
.circuit-status {
display: flex;
align-items: center;
gap: 6px;
.status-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
}
.status-text {
font-size: 11px;
color: var(--text-color-3);
}
}
/* 电路控制开关 */
.circuit-control {
display: flex;
justify-content: flex-end;
}
/* 电路开启状态 - 绿色主题 */
&.circuit-on {
border-color: #18a058;
.status-indicator {
background-color: #18a058;
}
&:hover {
background-color: rgba(24, 160, 88, 0.05);
}
}
/* 电路关闭状态 - 红色主题 */
&.circuit-off {
border-color: #d03050;
.status-indicator {
background-color: #d03050;
}
&:hover {
background-color: rgba(208, 48, 80, 0.05);
}
}
/* 电路未知状态 - 黄色主题 */
&.circuit-unknown {
border-color: #f0a020;
.status-indicator {
background-color: #f0a020;
}
&:hover {
background-color: rgba(240, 160, 32, 0.05);
}
}
}
}
/*
* 电路信息弹窗内容样式
*
* 功能：显示电路的详细信息，包括状态、电压、电流
* 布局：标签-值的两列布局，右对齐数值便于对比
*/
.circuit-popover-content {
min-width: 140px;
.circuit-info-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
&:last-child {
margin-bottom: 0;
}
/* 信息标签样式 */
.label {
font-size: 12px;
color: var(--text-color-3);
margin-right: 12px;
}
/* 信息值样式 */
.value {
font-size: 12px;
font-weight: 500;
color: var(--text-color-2);
/* 状态值的颜色区分 */
&.circuit-on {
color: #18a058;
}
&.circuit-off {
color: #d03050;
}
&.circuit-unknown {
color: #f0a020;
}
}
}
}
/*
* 暗色模式适配
*/
@media (prefers-color-scheme: dark) {
.circuit-layout {
.circuit-item {
&:hover {
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}
}
}
}
</style>

107
src/components/device-page/box-info-card.vue Normal file
View File

@@ -0,0 +1,107 @@
<script setup lang="ts">
import { NCard, NFlex, NText, NIcon, NTag } from 'naive-ui';
import { computed, toRefs } from 'vue';
import { Fan } from '@vicons/fa';
import { ThermometerOutline, WaterOutline, LockClosedOutline, ShieldCheckmarkOutline } from '@vicons/ionicons5';
const props = defineProps<{
fanSpeeds?: number[];
temperature?: number;
humidity?: number;
switches?: number[];
}>();
const { fanSpeeds, temperature, humidity, switches } = toRefs(props);
const cardShow = computed(() => {
return Object.values(props).some((value) => !!value);
});
// 门禁状态 (switches[0]: 0=关闭/失效, 1=打开/生效)
const accessControlStatus = computed(() => {
if (!switches?.value || switches.value.length === 0) return null;
return switches.value[0] === 1 ? '打开' : '关闭';
});
// 防雷状态 (switches[1]: 0=关闭/失效, 1=打开/生效)
const lightningProtectionStatus = computed(() => {
if (!switches?.value || switches.value.length < 2) return null;
return switches.value[1] === 1 ? '生效' : '失效';
});
// 获取状态标签类型
const getStatusTagType = (status: string | null) => {
if (['打开', '生效'].includes(status ?? '')) return 'success';
if (['关闭', '失效'].includes(status ?? '')) return 'error';
return 'default';
};
// 格式化风扇转速
const formatFanSpeeds = computed(() => {
if (!fanSpeeds?.value || fanSpeeds.value.length === 0) return null;
return fanSpeeds.value.map((speed, index) => `风扇${index + 1}: ${speed} RPM`).join(', ');
});
</script>
<template>
<NCard v-if="cardShow" size="small" title="安防箱状态" hoverable>
<NFlex vertical :size="16">
<!-- 温度 -->
<NFlex v-if="temperature !== undefined" :align="'center'" :size="12">
<NIcon size="16" style="color: #f0a020">
<ThermometerOutline />
</NIcon>
<NText style="width: 60px; font-size: 14px">温度</NText>
<NText style="flex: 1; font-size: 14px; color: #666"> {{ temperature }}°C </NText>
</NFlex>
<!-- 湿度 -->
<NFlex v-if="humidity !== undefined" :align="'center'" :size="12">
<NIcon size="16" style="color: #2080f0">
<WaterOutline />
</NIcon>
<NText style="width: 60px; font-size: 14px">湿度</NText>
<NText style="flex: 1; font-size: 14px; color: #666"> {{ humidity }}% </NText>
</NFlex>
<!-- 风扇转速 -->
<NFlex v-if="formatFanSpeeds" :align="'center'" :size="12">
<NIcon size="16" style="color: #18a058">
<Fan />
</NIcon>
<NText style="width: 60px; font-size: 14px">风扇</NText>
<NText style="flex: 1; font-size: 14px; color: #666">
{{ formatFanSpeeds }}
</NText>
</NFlex>
<!-- 门禁状态 -->
<NFlex v-if="accessControlStatus" :align="'center'" :size="12">
<NIcon size="16" style="color: #722ed1">
<LockClosedOutline />
</NIcon>
<NText style="width: 60px; font-size: 14px">门禁</NText>
<div style="flex: 1">
<NTag :type="getStatusTagType(accessControlStatus)" size="small">
{{ accessControlStatus }}
</NTag>
</div>
</NFlex>
<!-- 防雷状态 -->
<NFlex v-if="lightningProtectionStatus" :align="'center'" :size="12">
<NIcon size="16" style="color: #d4380d">
<ShieldCheckmarkOutline />
</NIcon>
<NText style="width: 60px; font-size: 14px">防雷</NText>
<div style="flex: 1">
<NTag :type="getStatusTagType(lightningProtectionStatus)" size="small">
{{ lightningProtectionStatus }}
</NTag>
</div>
</NFlex>
</NFlex>
</NCard>
</template>
<style scoped lang="scss"></style>

41
src/components/device-page/camera-card.vue Normal file
View File

@@ -0,0 +1,41 @@
<script setup lang="ts">
import type { NdmCameraResultVO } from '@/apis/models';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './device-header-card.vue';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { destr } from 'destr';
import type { NdmDecoderDiagInfo } from '@/apis/domains';
const props = defineProps<{
stationCode: string;
ndmCamera: NdmCameraResultVO;
}>();
const { stationCode, ndmCamera } = toRefs(props);
const lastDiagInfo = computed(() => {
const result = destr<NdmDecoderDiagInfo>(ndmCamera.value.lastDiagInfo);
if (!result) return null;
if (typeof result !== 'object') return null;
return result;
});
const selectedTab = ref('设备状态');
</script>
<template>
<NCard size="small">
<NTabs v-model:value="selectedTab" size="small">
<NTabPane name="设备状态" tab="设备状态">
<NFlex vertical>
<DeviceHeaderCard :device="ndmCamera" />
<div v-if="false">{{ lastDiagInfo }}</div>
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
</NTabs>
</NCard>
</template>
<style scoped lang="scss"></style>

60
src/components/device-page/decoder-card.vue Normal file
View File

@@ -0,0 +1,60 @@
<script setup lang="ts">
import type { NdmDecoderResultVO } from '@/apis/models';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './device-header-card.vue';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { destr } from 'destr';
import type { NdmDecoderDiagInfo } from '@/apis/domains';
import DeviceHardwareCard from './device-hardware-card.vue';
import DeviceCommonCard from './device-common-card.vue';
const props = defineProps<{
stationCode: string;
ndmDecoder: NdmDecoderResultVO;
}>();
const { stationCode, ndmDecoder } = toRefs(props);
const lastDiagInfo = computed(() => {
const result = destr<NdmDecoderDiagInfo>(ndmDecoder.value.lastDiagInfo);
if (!result) return null;
if (typeof result !== 'object') return null;
return result;
});
const commonInfo = computed<Record<string, string> | undefined>(() => {
const info = lastDiagInfo.value?.stCommonInfo;
if (info) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { CPU使用率, 内存使用率, ...rest } = info;
return rest;
}
return info;
});
const cpuUsage = computed(() => lastDiagInfo.value?.stCommonInfo.CPU使用率);
const memUsage = computed(() => lastDiagInfo.value?.stCommonInfo.内存使用率);
const selectedTab = ref('设备状态');
</script>
<template>
<NCard size="small">
<NTabs v-model:value="selectedTab" size="small">
<NTabPane name="设备状态" tab="设备状态">
<NFlex vertical>
<DeviceHeaderCard :device="ndmDecoder" />
<DeviceCommonCard :common-info="commonInfo" />
<DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<!-- <NTabPane name="原始数据" tab="原始数据">
<pre>{{ { ...ndmDecoder, lastDiagInfo } }}</pre>
</NTabPane> -->
</NTabs>
</NCard>
</template>
<style scoped lang="scss"></style>

26
src/components/device-page/device-common-card.vue Normal file
View File

@@ -0,0 +1,26 @@
<script setup lang="ts">
import { NCard } from 'naive-ui';
import { computed, toRefs } from 'vue';
const props = defineProps<{
commonInfo?: Record<string, string>;
}>();
const { commonInfo } = toRefs(props);
const commonInfoEntries = computed(() => Object.entries(commonInfo.value ?? {}));
</script>
<template>
<NCard v-if="commonInfo" size="small" hoverable>
<template #header>
<div>设备信息</div>
</template>
<div v-for="item in commonInfoEntries" :key="item[0]">
<span>{{ item[0] }}：</span>
<span>{{ item[1] }}</span>
</div>
</NCard>
</template>
<style scoped></style>

95
src/components/device-page/device-hardware-card.vue Normal file
View File

@@ -0,0 +1,95 @@
<script setup lang="ts">
import { NCard, NProgress, NFlex, NText, NIcon, type ProgressStatus } from 'naive-ui';
import { TimeOutline, HardwareChipOutline, ServerOutline, FolderOutline } from '@vicons/ionicons5';
import { computed, toRefs } from 'vue';
const props = defineProps<{
cpuUsage?: string;
memUsage?: string;
diskUsage?: string;
runningTime?: string;
}>();
const { cpuUsage, memUsage, diskUsage, runningTime } = toRefs(props);
const cardShow = computed(() => {
return cpuUsage?.value || memUsage?.value || diskUsage?.value || runningTime?.value;
});
const cpuPercent = computed(() => {
if (!cpuUsage?.value) return 0;
return parseFloat(cpuUsage.value.replace('%', ''));
});
const memPercent = computed(() => {
if (!memUsage?.value) return 0;
return parseFloat(memUsage.value.replace('%', ''));
});
const diskPercent = computed(() => {
if (!diskUsage?.value) return 0;
return parseFloat(diskUsage.value.replace('%', ''));
});
const formattedRunningTime = computed(() => {
return runningTime?.value ?? '未知';
});
const getProgressStatus = (percent: number): ProgressStatus => {
if (percent >= 90) return 'error';
if (percent >= 70) return 'warning';
return 'success';
};
</script>
<template>
<NCard v-if="cardShow" size="small" title="硬件占用率" hoverable>
<NFlex vertical :size="16">
<!-- CPU 使用率 -->
<NFlex v-if="cpuUsage" :align="'center'" :size="12">
<NIcon size="16" style="color: #18a058">
<HardwareChipOutline />
</NIcon>
<NText style="width: 60px; font-size: 14px">CPU</NText>
<NProgress :percentage="cpuPercent" :status="getProgressStatus(cpuPercent)" style="flex: 1">
<div>{{ cpuPercent }}%</div>
</NProgress>
</NFlex>
<!-- 内存使用率 -->
<NFlex v-if="memUsage" :align="'center'" :size="12">
<NIcon size="16" style="color: #2080f0">
<ServerOutline />
</NIcon>
<NText style="width: 60px; font-size: 14px">内存</NText>
<NProgress :percentage="memPercent" :status="getProgressStatus(memPercent)" style="flex: 1">
<div>{{ memPercent }}%</div>
</NProgress>
</NFlex>
<!-- 硬盘使用率 -->
<NFlex v-if="diskUsage" :align="'center'" :size="12">
<NIcon size="16" style="color: #f0a020">
<FolderOutline />
</NIcon>
<NText style="width: 60px; font-size: 14px">硬盘</NText>
<NProgress :percentage="diskPercent" :status="getProgressStatus(diskPercent)" style="flex: 1">
<div>{{ diskPercent }}%</div>
</NProgress>
</NFlex>
<!-- 运行时间 -->
<NFlex v-if="runningTime" :align="'center'" :size="12">
<NIcon size="16" style="color: #722ed1">
<TimeOutline />
</NIcon>
<NText style="width: 100px; font-size: 14px">系统运行时间</NText>
<NText style="flex: 1; font-size: 14px; color: #666">
{{ formattedRunningTime }}
</NText>
</NFlex>
</NFlex>
</NCard>
</template>
<style scoped lang="scss"></style>

57
src/components/device-page/device-header-card.vue Normal file
View File

@@ -0,0 +1,57 @@
<script setup lang="ts">
import type { NdmDeviceResultVO } from '@/apis/models';
import { DeviceTypeName, getDeviceTypeVal } from '@/enums/device-type';
import { NCard, NFlex, NTag } from 'naive-ui';
import { computed, toRefs } from 'vue';
const props = defineProps<{
device: NdmDeviceResultVO;
}>();
// const emit = defineEmits<{}>();
const { device } = toRefs(props);
const type = computed(() => DeviceTypeName[getDeviceTypeVal(device.value.deviceType)]);
const name = computed(() => device.value.name ?? '-');
const ipAddr = computed(() => device.value.ipAddress ?? '-');
const gbCode = computed(() => Reflect.get(device.value, 'gbCode') as string | undefined);
const status = computed(() => device.value.deviceStatus);
</script>
<template>
<NCard size="small" hoverable>
<template #header>
<NFlex :align="'center'">
<NTag v-if="status === '10'" size="small" type="success">在线</NTag>
<NTag v-else-if="status === '20'" size="small" type="error">离线</NTag>
<NTag v-else size="small" type="warning">未知</NTag>
<div>{{ name }}</div>
</NFlex>
<div style="font-size: small; color: #666">
<div>
<span>设备类型：</span>
<span>{{ type }}</span>
</div>
<div>
<span>IP地址：</span>
<span>{{ ipAddr }}</span>
</div>
<div v-if="gbCode">
<span>国标编码：</span>
<span>{{ gbCode }}</span>
</div>
<!-- <div>
<span>上游设备：</span>
<span>{{ device.linkDescription ?? '暂无' }}</span>
</div> -->
<div v-if="device.snmpEnabled">
<span>上次诊断时间：</span>
<span>{{ device.lastDiagTime ?? '暂无' }}</span>
</div>
</div>
</template>
</NCard>
</template>
<style scoped lang="scss"></style>

31
src/components/device-page/keyboard-card.vue Normal file
View File

@@ -0,0 +1,31 @@
<script setup lang="ts">
import type { NdmKeyboardResultVO } from '@/apis/models';
import { ref, toRefs } from 'vue';
import DeviceHeaderCard from './device-header-card.vue';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
const props = defineProps<{
stationCode: string;
ndmKeyboard: NdmKeyboardResultVO;
}>();
const { stationCode, ndmKeyboard } = toRefs(props);
const selectedTab = ref('设备状态');
</script>
<template>
<NCard size="small">
<NTabs v-model:value="selectedTab" size="small">
<NTabPane name="设备状态" tab="设备状态">
<NFlex vertical>
<DeviceHeaderCard :device="ndmKeyboard" />
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
</NTabs>
</NCard>
</template>
<style scoped lang="scss"></style>

75
src/components/device-page/nvr-card.vue Normal file
View File

@@ -0,0 +1,75 @@
<script setup lang="ts">
import type { NdmNvrResultVO } from '@/apis/models';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './device-header-card.vue';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { destr } from 'destr';
import type { NdmNvrDiagInfo } from '@/apis/domains';
import DeviceHardwareCard from './device-hardware-card.vue';
import DeviceCommonCard from './device-common-card.vue';
import NvrDiskCard from './nvr-disk-card.vue';
import NvrRecordDiagCard from './nvr-record-diag-card.vue';
const props = defineProps<{
stationCode: string;
ndmNvr: NdmNvrResultVO;
}>();
const { stationCode, ndmNvr } = toRefs(props);
const lastDiagInfo = computed(() => {
const result = destr<NdmNvrDiagInfo>(ndmNvr.value.lastDiagInfo);
if (!result) return null;
if (typeof result !== 'object') return null;
return result;
});
const cpuUsage = computed(() => lastDiagInfo.value?.stCommonInfo.CPU使用率);
const memUsage = computed(() => lastDiagInfo.value?.stCommonInfo.内存使用率);
const commonInfo = computed<Record<string, string> | undefined>(() => {
const info = lastDiagInfo.value?.stCommonInfo;
if (info) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { CPU使用率, 内存使用率, ...rest } = info;
return rest;
}
return info;
});
const diskHealth = computed(() => lastDiagInfo.value?.info.diskHealth);
const groupInfoList = computed(() => lastDiagInfo.value?.info.groupInfoList);
const isCluster = computed(() => {
const { ipAddress, clusterList } = ndmNvr.value;
if (!clusterList?.trim()) return false;
if (clusterList === ipAddress) return false;
return true;
});
const selectedTab = ref('设备状态');
</script>
<template>
<NCard size="small">
<NTabs v-model:value="selectedTab" size="small">
<NTabPane name="设备状态" tab="设备状态">
<NFlex vertical>
<DeviceHeaderCard :device="ndmNvr" />
<DeviceCommonCard :common-info="commonInfo" />
<DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
<NvrDiskCard :disk-health="diskHealth" :group-info-list="groupInfoList" />
<!-- 切换选择的录像机集群时，props会改变，但是录像诊断组件需要发起请求获取诊断数据，请求函数没有响应性，因此添加显式的key触发组件的更新 -->
<NvrRecordDiagCard v-if="isCluster" :station-code="stationCode" :ndm-nvr="ndmNvr" :key="ndmNvr.id" />
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<!-- <NTabPane name="原始数据" tab="原始数据">
<pre>{{ { ...ndmNvr, lastDiagInfo } }}</pre>
</NTabPane> -->
</NTabs>
</NCard>
</template>
<style scoped lang="scss"></style>

398
src/components/device-page/nvr-disk-card.vue Normal file
View File

@@ -0,0 +1,398 @@
<script setup lang="ts">
import type { NdmNvrDiagInfo } from '@/apis/domains';
import { NCard, NFlex, NProgress, NText, NIcon, NPopover, NGrid, NGridItem } from 'naive-ui';
import { HardwareChipOutline, CheckmarkCircleOutline, CloseCircleOutline, WarningOutline } from '@vicons/ionicons5';
import { computed, toRefs } from 'vue';
const props = defineProps<{
diskHealth?: NdmNvrDiagInfo['info']['diskHealth'];
groupInfoList?: NdmNvrDiagInfo['info']['groupInfoList'];
}>();
const { diskHealth, groupInfoList } = toRefs(props);
const cardShow = computed(() => diskHealth.value || groupInfoList.value);
// 计算硬盘健康状态统计
const diskHealthStats = computed(() => {
if (!diskHealth.value) return null;
const total = diskHealth.value.length;
const healthy = diskHealth.value.filter((status) => status === 0).length;
const warning = diskHealth.value.filter((status) => status === 1).length;
const error = diskHealth.value.filter((status) => status === 2).length;
return { total, healthy, warning, error };
});
// 获取硬盘状态样式类
const getDiskStatusClass = (status: number) => {
if (status === 0) return 'disk-healthy';
if (status === 1) return 'disk-warning';
return 'disk-error';
};
// 获取硬盘状态文本
const getDiskStatusText = (status: number) => {
if (status === 0) return '正常';
if (status === 1) return '警告';
return '故障';
};
// 格式化存储大小
const formatSize = (megabytes: number): string => {
const units = ['MB', 'GB', 'TB'];
let index = 0;
while (megabytes >= 1024 && index < units.length - 1) {
megabytes /= 1024;
index++;
}
return `${megabytes.toFixed(2)} ${units[index]}`;
};
// 计算使用率
const getUsagePercent = (freeSize: number, totalSize: number) => {
if (totalSize === 0) return 0;
return Math.round(((totalSize - freeSize) / totalSize) * 100);
};
// 获取使用率状态
const getUsageStatus = (percent: number) => {
if (percent >= 90) return 'error';
if (percent >= 70) return 'warning';
return 'success';
};
</script>
<template>
<NCard v-if="cardShow" size="small" title="磁盘状态" hoverable>
<!-- 硬盘健康状态展示 -->
<NFlex v-if="diskHealth && diskHealthStats" vertical :size="16">
<!-- 硬盘健康统计 -->
<div class="disk-health-summary">
<NFlex :align="'center'" :size="12">
<NIcon size="16" style="color: #18a058">
<HardwareChipOutline />
</NIcon>
<NText style="font-size: 14px; font-weight: 600">硬盘健康状态</NText>
<NText style="font-size: 12px; color: var(--text-color-3)"> ({{ diskHealthStats.total }}个硬盘槽位) </NText>
</NFlex>
<NFlex :size="16" style="margin-top: 8px">
<div class="health-stat">
<NIcon size="14" style="color: #18a058">
<CheckmarkCircleOutline />
</NIcon>
<span class="stat-text">正常: {{ diskHealthStats.healthy }}</span>
</div>
<div v-if="diskHealthStats.warning > 0" class="health-stat">
<NIcon size="14" style="color: #f0a020">
<WarningOutline />
</NIcon>
<span class="stat-text">警告: {{ diskHealthStats.warning }}</span>
</div>
<div v-if="diskHealthStats.error > 0" class="health-stat">
<NIcon size="14" style="color: #d03050">
<CloseCircleOutline />
</NIcon>
<span class="stat-text">故障: {{ diskHealthStats.error }}</span>
</div>
</NFlex>
</div>
<!-- 硬盘槽位状态网格 -->
<div class="disk-slots-grid">
<NGrid :cols="12" :x-gap="4" :y-gap="4">
<NGridItem v-for="(status, index) in diskHealth" :key="index">
<NPopover trigger="hover" placement="top">
<template #trigger>
<div class="disk-slot" :class="getDiskStatusClass(status)">
<div class="slot-number">{{ index + 1 }}</div>
<div class="slot-indicator"></div>
</div>
</template>
<div class="disk-popover-content">
<div class="disk-info-row">
<span class="label">硬盘槽位:</span>
<span class="value">{{ index + 1 }}</span>
</div>
<div class="disk-info-row">
<span class="label">状态:</span>
<span class="value" :class="getDiskStatusClass(status)">
{{ getDiskStatusText(status) }}
</span>
</div>
</div>
</NPopover>
</NGridItem>
</NGrid>
</div>
</NFlex>
<!-- 磁盘阵列信息展示 -->
<NFlex v-if="groupInfoList && groupInfoList.length > 0" vertical :size="16" :style="{ marginTop: diskHealth ? '24px' : '0' }">
<div class="disk-group-header">
<NFlex :align="'center'" :size="12">
<NIcon size="16" style="color: #2080f0">
<HardwareChipOutline />
</NIcon>
<NText style="font-size: 14px; font-weight: 600">磁盘阵列信息</NText>
<NText style="font-size: 12px; color: var(--text-color-3)"> ({{ groupInfoList.length }}个磁盘阵列) </NText>
</NFlex>
</div>
<div v-for="(group, index) in groupInfoList" :key="index" class="disk-group-item">
<div class="group-header">
<span class="group-title">磁盘阵列 {{ index + 1 }}</span>
<span class="group-status" :class="group.state === 1 ? 'status-normal' : 'status-error'">
{{ group.stateValue }}
</span>
</div>
<NFlex vertical :size="8" style="margin-top: 12px">
<!-- 存储使用率 -->
<NFlex :align="'center'" :size="12">
<NText style="width: 80px; font-size: 14px">存储使用率</NText>
<NProgress :percentage="getUsagePercent(group.freeSize, group.totalSize)" :status="getUsageStatus(getUsagePercent(group.freeSize, group.totalSize))" style="flex: 1">
<div>{{ getUsagePercent(group.freeSize, group.totalSize) }}%</div>
</NProgress>
</NFlex>
<!-- 存储详情 -->
<div class="storage-details">
<div class="storage-item">
<span class="storage-label">总容量:</span>
<span class="storage-value">{{ formatSize(group.totalSize) }}</span>
</div>
<div class="storage-item">
<span class="storage-label">已用:</span>
<span class="storage-value">{{ formatSize(group.totalSize - group.freeSize) }}</span>
</div>
<div class="storage-item">
<span class="storage-label">可用:</span>
<span class="storage-value">{{ formatSize(group.freeSize) }}</span>
</div>
</div>
</NFlex>
</div>
</NFlex>
</NCard>
</template>
<style scoped lang="scss">
// 硬盘健康状态样式
.disk-health-summary {
padding: 12px;
background: var(--card-color);
border: 1px solid var(--border-color);
border-radius: 6px;
}
.health-stat {
display: flex;
align-items: center;
gap: 4px;
.stat-text {
font-size: 12px;
color: var(--text-color-2);
}
}
// 硬盘槽位网格样式
.disk-slots-grid {
padding: 12px;
background: var(--card-color);
border: 1px solid var(--border-color);
border-radius: 6px;
}
.disk-slot {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 32px;
height: 28px;
border: 1px solid var(--border-color);
border-radius: 4px;
background: var(--card-color);
cursor: pointer;
transition: all 0.2s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.slot-number {
font-size: 10px;
font-weight: 500;
color: var(--text-color-2);
line-height: 1;
}
.slot-indicator {
width: 4px;
height: 4px;
border-radius: 50%;
margin-top: 2px;
}
// 健康状态
&.disk-healthy {
border-color: #18a058;
.slot-indicator {
background-color: #18a058;
}
&:hover {
background-color: rgba(24, 160, 88, 0.05);
}
}
// 警告状态
&.disk-warning {
border-color: #f0a020;
.slot-indicator {
background-color: #f0a020;
}
&:hover {
background-color: rgba(240, 160, 32, 0.05);
}
}
// 故障状态
&.disk-error {
border-color: #d03050;
.slot-indicator {
background-color: #d03050;
}
&:hover {
background-color: rgba(208, 48, 80, 0.05);
}
}
}
// 磁盘阵列信息样式
.disk-group-header {
padding: 12px;
background: var(--card-color);
border: 1px solid var(--border-color);
border-radius: 6px;
}
.disk-group-item {
padding: 16px;
background: var(--card-color);
border: 1px solid var(--border-color);
border-radius: 6px;
.group-header {
display: flex;
justify-content: space-between;
align-items: center;
.group-title {
font-size: 14px;
font-weight: 600;
color: var(--text-color-1);
}
.group-status {
font-size: 12px;
font-weight: 500;
padding: 2px 8px;
border-radius: 12px;
&.status-normal {
color: #18a058;
background-color: rgba(24, 160, 88, 0.1);
}
&.status-error {
color: #d03050;
background-color: rgba(208, 48, 80, 0.1);
}
}
}
}
.storage-details {
display: flex;
gap: 16px;
margin-top: 8px;
.storage-item {
display: flex;
flex-direction: column;
gap: 2px;
.storage-label {
font-size: 11px;
color: var(--text-color-3);
}
.storage-value {
font-size: 12px;
font-weight: 500;
color: var(--text-color-2);
}
}
}
// 弹窗内容样式
.disk-popover-content {
min-width: 120px;
.disk-info-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
&:last-child {
margin-bottom: 0;
}
.label {
font-size: 12px;
color: var(--text-color-3);
margin-right: 12px;
}
.value {
font-size: 12px;
font-weight: 500;
color: var(--text-color-2);
&.disk-healthy {
color: #18a058;
}
&.disk-warning {
color: #f0a020;
}
&.disk-error {
color: #d03050;
}
}
}
}
// 暗色模式适配
@media (prefers-color-scheme: dark) {
.disk-slot {
&:hover {
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}
}
}
</style>

310
src/components/device-page/nvr-record-diag-card.vue Normal file
View File

@@ -0,0 +1,310 @@
<script lang="ts">
import { groupBy } from 'es-toolkit';
import { useMutation } from '@tanstack/vue-query';
type NvrRecordDiag = {
gbCode: string;
recordName: string;
recordDuration: {
startTime: string;
endTime: string;
};
lostRecordList: {
startTime: string;
endTime: string;
}[];
};
// 过滤出丢失的录像时间段
const filterLostRecordList = (recordCheckRawData: any): NvrRecordDiag[] => {
const rawData = (recordCheckRawData as any[]).map((item) => {
return {
...item,
diagInfo: JSON.parse(item.diagInfo),
};
});
// 按国标码分组
const groupedData = groupBy(rawData, (item) => item.gbCode);
// 拆分keys和values
const gbCodeList = Object.keys(groupedData);
const groupedDiagRecordsList = Object.values(groupedData);
// 初始化
let recordChunks = gbCodeList.map((gbCode, index) => ({
gbCode,
recordName: groupedDiagRecordsList[index].at(-1).name,
videoList: [] as any[],
lostVideoList: [] as any[],
}));
// 合并同一gbCode的录像时间记录
groupedDiagRecordsList.forEach((records, index) => {
records.forEach((record) => {
recordChunks[index].videoList.push(...record.diagInfo.recordList);
});
});
recordChunks = recordChunks.filter((chunk) => chunk.videoList.length > 0);
// 计算丢失的录像时间段
recordChunks.forEach((chunk) => {
chunk.videoList.forEach((video, index, videoList) => {
if (videoList[index + 1]) {
// 如果时间不连续，则初步判断录像出现丢失
if (videoList[index + 1].startTime !== video.endTime) {
chunk.lostVideoList.push({
startTime: video.endTime,
endTime: videoList[index + 1].startTime,
});
}
}
});
});
return recordChunks.map((chunk) => ({
gbCode: chunk.gbCode,
recordName: chunk.recordName,
recordDuration: {
startTime: chunk.videoList[0].startTime,
endTime: chunk.videoList.at(-1).endTime,
},
lostRecordList: chunk.lostVideoList,
}));
};
</script>
<script setup lang="ts">
import type { ClientChannel, NdmNvrResultVO, NdmRecordCheck } from '@/apis/models';
import { getChannelList as getChannelListApi, getRecordCheckByParentId as getRecordCheckByParentIdApi, reloadAllRecordCheck as reloadAllRecordCheckApi } from '@/apis/requests';
import { NCard, NFlex, NText, NTag, NTimeline, NTimelineItem, NIcon, NEmpty, NStatistic, NGrid, NGridItem, NCollapse, NCollapseItem, NButton, NPopconfirm } from 'naive-ui';
import { VideocamOutline, TimeOutline, WarningOutline, CheckmarkCircleOutline, RefreshOutline } from '@vicons/ionicons5';
import { computed, onMounted, ref, toRefs } from 'vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
dayjs.extend(duration);
const props = defineProps<{
stationCode: string;
ndmNvr: NdmNvrResultVO;
}>();
const { stationCode, ndmNvr } = toRefs(props);
const clientChannelList = ref<ClientChannel[]>([]);
const recordCheckList = ref<NdmRecordCheck[]>([]);
const lostRecordList = computed(() => filterLostRecordList(recordCheckList.value));
// 时间格式化函数
const formatTime = (timeStr: string) => {
return dayjs(timeStr).format('MM-DD HH:mm:ss');
};
const formatDuration = (startTime: string, endTime: string) => {
const start = dayjs(startTime);
const end = dayjs(endTime);
const diff = end.diff(start);
const dur = dayjs.duration(diff);
if (dur.asHours() >= 1) {
return `${Math.floor(dur.asHours())}小时${dur.minutes()}分钟`;
} else if (dur.asMinutes() >= 1) {
return `${dur.minutes()}分钟${dur.seconds()}秒`;
} else {
return `${dur.seconds()}秒`;
}
};
/**
* 录像诊断统计信息计算
* 基于lostRecordList数据计算各项统计指标，用于在UI顶部展示概览信息
*/
const recordStats = computed(() => {
// 总通道数：参与录像诊断的通道总数
const totalChannels = lostRecordList.value.length;
// 有缺失通道数：存在录像缺失的通道数量
const channelsWithLoss = lostRecordList.value.filter((item) => item.lostRecordList.length > 0).length;
// 总缺失次数：所有通道的录像缺失次数总和
const totalLossCount = lostRecordList.value.reduce((sum, item) => sum + item.lostRecordList.length, 0);
// 计算总缺失时长（毫秒）
let totalLossDuration = 0;
lostRecordList.value.forEach((item) => {
item.lostRecordList.forEach((loss) => {
// 计算每个缺失时间段的持续时长并累加
totalLossDuration += dayjs(loss.endTime).diff(dayjs(loss.startTime));
});
});
// 格式化总缺失时长为可读格式
// 根据时长大小选择合适的显示单位（小时分钟 或 分钟秒）
const formattedTotalDuration =
dayjs.duration(totalLossDuration).asHours() >= 1
? `${Math.floor(dayjs.duration(totalLossDuration).asHours())}小时${dayjs.duration(totalLossDuration).minutes()}分钟`
: `${dayjs.duration(totalLossDuration).minutes()}分钟${dayjs.duration(totalLossDuration).seconds()}秒`;
return {
totalChannels, // 总通道数
channelsWithLoss, // 有缺失通道数
totalLossCount, // 总缺失次数
formattedTotalDuration, // 格式化的总缺失时长
};
});
const {} = useMutation({
mutationFn: async () => {
const channelList = await getChannelListApi(stationCode.value, ndmNvr.value);
return channelList;
},
onSuccess: (channelList) => {
clientChannelList.value = channelList;
},
});
const { mutate: getRecordCheckByParentId, isPending: loading } = useMutation({
mutationFn: async () => {
const recordCheckList = await getRecordCheckByParentIdApi(stationCode.value, ndmNvr.value, 90);
return recordCheckList;
},
onSuccess: (checkList) => {
recordCheckList.value = checkList;
},
});
const { mutate: reloadAllRecordCheck, isPending: reloading } = useMutation({
mutationFn: async () => {
await reloadAllRecordCheckApi(stationCode.value, 90);
},
onSuccess: () => {
window.$message.success('正在逐步刷新中，请稍后点击刷新按钮查看');
},
});
onMounted(() => {
getRecordCheckByParentId();
});
</script>
<template>
<NCard size="small" hoverable>
<template #header>
<NFlex :align="'center'" :size="24">
<div>录像诊断</div>
<NPopconfirm @positive-click="() => reloadAllRecordCheck()">
<template #trigger>
<NButton secondary size="small" :loading="reloading">
<span>点击更新所有通道录像诊断</span>
</NButton>
</template>
<template #default>
<span>确认更新所有通道录像诊断吗？</span>
</template>
</NPopconfirm>
</NFlex>
</template>
<template #header-extra>
<NButton size="small" quaternary circle :loading="loading" @click="() => getRecordCheckByParentId()">
<template #icon>
<NIcon>
<RefreshOutline />
</NIcon>
</template>
</NButton>
</template>
<!-- 统计信息 -->
<NFlex vertical :size="16">
<NGrid :cols="4" :x-gap="12">
<NGridItem>
<NStatistic label="总通道数" :value="recordStats.totalChannels" />
</NGridItem>
<NGridItem>
<NStatistic label="有缺失通道" :value="recordStats.channelsWithLoss" />
</NGridItem>
<NGridItem>
<NStatistic label="缺失次数" :value="recordStats.totalLossCount" />
</NGridItem>
<NGridItem>
<NStatistic label="缺失时长" :value="recordStats.formattedTotalDuration" />
</NGridItem>
</NGrid>
<!-- 通道录像缺失详情 -->
<div v-if="lostRecordList.length > 0">
<NCollapse>
<NCollapseItem v-for="channel in lostRecordList" :key="channel.gbCode" :name="channel.gbCode">
<template #header>
<NFlex align="center" :size="8">
<NIcon size="16" :color="channel.lostRecordList.length > 0 ? '#f5222d' : '#52c41a'">
<VideocamOutline />
</NIcon>
<NText strong>{{ channel.recordName }}</NText>
<NTag :type="channel.lostRecordList.length > 0 ? 'error' : 'success'" size="small">
{{ channel.lostRecordList.length > 0 ? `${channel.lostRecordList.length}次缺失` : '正常' }}
</NTag>
</NFlex>
</template>
<template #header-extra>
<NFlex align="center" :size="4">
<NIcon size="14" color="#666">
<TimeOutline />
</NIcon>
<NText depth="3" style="font-size: 12px"> {{ formatTime(channel.recordDuration.startTime) }} ~ {{ formatTime(channel.recordDuration.endTime) }} </NText>
</NFlex>
</template>
<div style="padding-left: 24px">
<!-- 录像缺失时间轴 -->
<div v-if="channel.lostRecordList.length > 0">
<NText depth="2" style="margin-bottom: 12px; display: block"> 录像缺失时间段： </NText>
<NTimeline>
<NTimelineItem v-for="(loss, index) in channel.lostRecordList" :key="index" type="error" :time="formatTime(loss.startTime)">
<template #icon>
<NIcon>
<WarningOutline />
</NIcon>
</template>
<template #default>
<NFlex vertical :size="4">
<NText> 缺失时段：{{ formatTime(loss.startTime) }} ~ {{ formatTime(loss.endTime) }} </NText>
<NText depth="3" style="font-size: 12px"> 持续时长：{{ formatDuration(loss.startTime, loss.endTime) }} </NText>
</NFlex>
</template>
</NTimelineItem>
</NTimeline>
</div>
<!-- 无缺失状态 -->
<div v-else>
<NFlex align="center" :size="8" style="padding: 16px 0">
<NIcon size="16" color="#52c41a">
<CheckmarkCircleOutline />
</NIcon>
<NText type="success">该通道录像完整，无缺失时间段</NText>
</NFlex>
</div>
</div>
</NCollapseItem>
</NCollapse>
</div>
<!-- 空状态 -->
<div v-else>
<NEmpty description="暂无录像诊断数据" style="padding: 40px 0" />
</div>
</NFlex>
</NCard>
</template>
<style scoped lang="scss">
// 自定义样式
.n-collapse-item {
margin-bottom: 8px;
}
.n-timeline {
padding-left: 8px;
}
.n-statistic {
text-align: center;
}
</style>

71
src/components/device-page/security-box-card.vue Normal file
View File

@@ -0,0 +1,71 @@
<script setup lang="ts">
import type { NdmDecoderResultVO, NdmNvrResultVO, NdmSecurityBoxResultVO } from '@/apis/models';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './device-header-card.vue';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { destr } from 'destr';
import type { NdmDecoderDiagInfo, NdmNvrDiagInfo, NdmSecurityBoxDiagInfo } from '@/apis/domains';
import DeviceHardwareCard from './device-hardware-card.vue';
import DeviceCommonCard from './device-common-card.vue';
import BoxInfoCard from './box-info-card.vue';
import BoxCircuitCard from './box-circuit-card.vue';
const props = defineProps<{
stationCode: string;
ndmSecurityBox: NdmSecurityBoxResultVO;
}>();
const { stationCode, ndmSecurityBox } = toRefs(props);
const lastDiagInfo = computed(() => {
const result = destr<NdmSecurityBoxDiagInfo>(ndmSecurityBox.value.lastDiagInfo);
if (!result) return null;
if (typeof result !== 'object') return null;
return result;
});
const commonInfo = computed<Record<string, string> | undefined>(() => {
const info = lastDiagInfo.value?.stCommonInfo;
if (info) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { CPU使用率, 内存使用率, ...rest } = info;
return rest;
}
return info;
});
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);
const selectedTab = ref('设备状态');
</script>
<template>
<NCard size="small">
<NTabs v-model:value="selectedTab" size="small">
<NTabPane name="设备状态" tab="设备状态">
<NFlex vertical>
<DeviceHeaderCard :device="ndmSecurityBox" />
<DeviceCommonCard :common-info="commonInfo" />
<DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
<BoxInfoCard :fan-speeds="fanSpeeds" :temperature="temperature" :humidity="humidity" :switches="switches" />
<BoxCircuitCard :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :circuits="circuits" />
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<!-- <NTabPane name="原始数据" tab="原始数据">
<pre>{{ { ...ndmSecurityBox, lastDiagInfo } }}</pre>
</NTabPane> -->
</NTabs>
</NCard>
</template>
<style scoped lang="scss"></style>

50
src/components/device-page/server-card.vue Normal file
View File

@@ -0,0 +1,50 @@
<script setup lang="ts">
import type { NdmServerDiagInfo } from '@/apis/domains';
import type { NdmServerResultVO } from '@/apis/models';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './device-header-card.vue';
import DeviceHardwareCard from './device-hardware-card.vue';
const props = defineProps<{
stationCode: string;
ndmServer: NdmServerResultVO;
}>();
const { stationCode, ndmServer } = toRefs(props);
const lastDiagInfo = computed(() => {
const result = destr<NdmServerDiagInfo>(ndmServer.value.lastDiagInfo);
if (!result) return null;
if (typeof result !== 'object') return null;
return result;
});
const cpuUsage = computed(() => lastDiagInfo.value?.commInfo.CPU使用率);
const memUsage = computed(() => lastDiagInfo.value?.commInfo.内存使用率);
const diskUsage = computed(() => lastDiagInfo.value?.commInfo.磁盘使用率);
const runningTime = computed(() => lastDiagInfo.value?.commInfo.系统运行时间);
const selectedTab = ref('设备状态');
</script>
<template>
<NCard size="small">
<NTabs v-model:value="selectedTab" size="small">
<NTabPane name="设备状态">
<NFlex vertical>
<DeviceHeaderCard :device="ndmServer" />
<DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" :disk-usage="diskUsage" :running-time="runningTime" />
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<!-- <NTabPane name="原始数据" tab="原始数据">
<pre>{{ { ...ndmServer, lastDiagInfo } }}</pre>
</NTabPane> -->
</NTabs>
</NCard>
</template>
<style scoped lang="scss"></style>

6
src/components/device-page/switch-card.vue
View File

@@ -38,11 +38,13 @@ const selectedTab = ref('设备状态');
<DeviceHeaderCard :device="ndmSwitch" />
<DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
<SwitchPortCard :port-info-list="portInfoList" />
<pre style="width: 500px; height: 400px; overflow: auto">{{ lastDiagInfo }}</pre>
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<NTabPane name="设备配置" tab="设备配置"></NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<!-- <NTabPane name="原始数据" tab="原始数据">
<pre>{{ { ...ndmSwitch, lastDiagInfo } }}</pre>
</NTabPane> -->
</NTabs>
</NCard>
</template>

517
src/components/device-page/switch-port-card.vue Normal file
View File

@@ -0,0 +1,517 @@
<script lang="ts">
const transformPortSpeed = (portInfo: NdmSwitchPortInfo, type: 'in' | 'out' | 'total'): string => {
const units = ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s'];
const { inBytes, lastInBytes, outBytes, lastOutBytes, inFlow, outFlow, flow } = portInfo;
let result: number = 0;
if (inFlow && outFlow && flow) {
if (type === 'in') {
result = inFlow;
}
if (type === 'out') {
result = outFlow;
}
if (type === 'total') {
result = flow;
}
} else {
let dInBytes = 0;
let dOutBytes = 0;
if (inBytes < lastInBytes) {
dInBytes = inBytes + JAVA_UNSIGNED_INTEGER_MAX_VALUE - lastInBytes;
} else {
dInBytes = inBytes - lastInBytes;
}
if (outBytes < lastOutBytes) {
dOutBytes = outBytes + JAVA_UNSIGNED_INTEGER_MAX_VALUE - lastOutBytes;
} else {
dOutBytes = outBytes - lastOutBytes;
}
if (type === 'in') {
result = dInBytes;
}
if (type === 'out') {
result = dOutBytes;
}
if (type === 'total') {
result = dInBytes + dOutBytes;
}
result /= NDM_SWITCH_PROBE_INTERVAL;
}
let index = 0;
while (result >= 1024 && index < units.length - 1) {
result /= 1024;
index++;
}
return `${result.toFixed(3)} ${units[index]}`;
};
</script>
<script setup lang="ts">
/**
* 交换机端口布局组件
*
* 功能描述：
* 1. 解析端口名称格式（x/y/z），按槽位（x/y）进行分组
* 2. 实现两行纵向优先的Grid布局显示端口
* 3. 提供端口状态的可视化指示（在线/离线/未知）
* 4. 通过悬停弹窗显示端口详细信息和速率数据
*
* 技术特点：
* - 基于 Vue 3 Composition API
* - 使用 NaiveUI 组件库
* - 支持亮色/暗色主题切换
* - 响应式数据处理和布局
*/
// 类型定义导入
import type { NdmSwitchPortInfo } from '@/apis/domains';
// 常量导入
import { JAVA_UNSIGNED_INTEGER_MAX_VALUE, NDM_SWITCH_PROBE_INTERVAL } from '@/constants';
// NaiveUI 组件导入
import { NCard, NGrid, NGridItem, NPopover } from 'naive-ui';
// Vue 3 响应式 API
import { computed, toRefs } from 'vue';
/**
* 组件属性定义
*
* @param portInfoList 端口信息列表
* 数据格式：NdmSwitchPortInfo[]
* 每个端口包含：portName, upDown, inFlow, outFlow, inBytes, outBytes 等字段
*
* 端口名称格式："x/y/z"
* - x: 槽位号
* - y: 子卡号
* - z: 接口序号
*
* 示例数据：
* [
* { portName: "1/0/1", upDown: 1, inFlow: 1024, outFlow: 2048, ... },
* { portName: "1/0/2", upDown: 0, inFlow: 0, outFlow: 0, ... },
* { portName: "2/0/1", upDown: 2, inFlow: 512, outFlow: 1024, ... }
* ]
*/
const props = defineProps<{
portInfoList: NdmSwitchPortInfo[];
}>();
const { portInfoList } = toRefs(props);
/**
* 解析端口名称并按槽位分组
*
* 示例输入数据：
* portInfoList = [
* { portName: "1/0/3", upDown: 1, ... },
* { portName: "1/0/1", upDown: 0, ... },
* { portName: "2/0/2", upDown: 1, ... },
* { portName: "1/1/1", upDown: 2, ... },
* { portName: "2/0/1", upDown: 1, ... }
* ]
*/
const groupedPorts = computed(() => {
// 第一步：创建分组容器
// 使用 Map 数据结构存储分组结果，key 为槽位标识，value 为端口数组
const groups = new Map<string, NdmSwitchPortInfo[]>();
// 第二步：遍历所有端口，按槽位进行分组
portInfoList.value.forEach((port) => {
// 解析端口名称格式 "x/y/z" -> ["x", "y", "z"]
// 例如："1/0/3" -> ["1", "0", "3"]
const parts = port.portName.split('/');
if (parts.length >= 3) {
// 组合槽位键：槽位号/子卡号 (parts[0]/parts[1])
// 例如："1" + "/" + "0" = "1/0"
const slotKey = `${parts[0]}/${parts[1]}`;
// 如果该槽位组不存在，创建新的空数组
if (!groups.has(slotKey)) {
groups.set(slotKey, []);
}
// 将端口添加到对应的槽位组中
groups.get(slotKey)!.push(port);
}
});
// 此时 groups 的结构示例：
// Map {
// "1/0" => [{ portName: "1/0/3" }, { portName: "1/0/1" }],
// "2/0" => [{ portName: "2/0/2" }, { portName: "2/0/1" }],
// "1/1" => [{ portName: "1/1/1" }]
// }
// 第三步：对槽位组进行排序并处理每组内的端口排序
return Array.from(groups.entries()) // 转换为数组：[["1/0", [...]], ["2/0", [...]], ["1/1", [...]]]
.sort(([a], [b]) => {
// 解析槽位键进行数值排序
// 例如："1/0" -> [1, 0], "2/0" -> [2, 0]
const [slotA, subA] = a.split('/').map(Number);
const [slotB, subB] = b.split('/').map(Number);
// 首先按槽位号排序，如果相同则按子卡号排序
// 排序结果："1/0" -> "1/1" -> "2/0"
return slotA - slotB || subA - subB;
})
.map(([slotKey, ports]) => ({
slotKey, // 槽位标识，如 "1/0"
ports: ports.sort((a, b) => {
// 对每个槽位组内的端口按接口序号排序
// 提取接口序号："1/0/3" -> "3" -> 3
const portNumA = parseInt(a.portName.split('/')[2]);
const portNumB = parseInt(b.portName.split('/')[2]);
// 按接口序号升序排列：端口1 -> 端口2 -> 端口3
return portNumA - portNumB;
}),
}));
// 最终返回结果示例：
// [
// {
// slotKey: "1/0",
// ports: [{ portName: "1/0/1" }, { portName: "1/0/3" }]
// },
// {
// slotKey: "1/1",
// ports: [{ portName: "1/1/1" }]
// },
// {
// slotKey: "2/0",
// ports: [{ portName: "2/0/1" }, { portName: "2/0/2" }]
// }
// ]
});
/**
* 获取端口状态样式类
*
* @param port 端口信息对象
* @returns 对应的CSS类名
*
* 状态映射：
* - upDown = 1: 端口启用 -> 'port-up' (绿色)
* - upDown = 2: 端口禁用 -> 'port-down' (红色)
* - 其他值: 状态未知 -> 'port-unknown' (黄色)
*
* 示例：
* getPortStatusClass({upDown: 1}) -> 'port-up'
* getPortStatusClass({upDown: 2}) -> 'port-down'
* getPortStatusClass({upDown: 0}) -> 'port-unknown'
*/
const getPortStatusClass = (port: NdmSwitchPortInfo) => {
if (port.upDown === 1) {
return 'port-up';
} else if (port.upDown === 2) {
return 'port-down';
}
return 'port-unknown';
};
</script>
<template>
<!-- 主容器：使用 NaiveUI 卡片组件包装整个端口布局 -->
<NCard v-if="portInfoList.length > 0" size="small" title="端口数据" hoverable>
<div class="switch-port-layout">
<!--
槽位组遍历：根据 groupedPorts 计算属性渲染每个槽位组
数据结构示例：
groupedPorts = [
{ slotKey: "1/0", ports: [port1, port2, ...] },
{ slotKey: "1/1", ports: [port3, port4, ...] },
{ slotKey: "2/0", ports: [port5, port6, ...] }
]
-->
<div v-for="group in groupedPorts" :key="group.slotKey" class="slot-group">
<!-- 槽位标题：显示槽位标识和端口数量统计 -->
<div class="slot-header">
<span class="slot-title">槽位 {{ group.slotKey }}</span>
<span class="port-count">({{ group.ports.length }}个端口)</span>
</div>
<NGrid :cols="Math.ceil(group.ports.length / 2)" :x-gap="8" :y-gap="8" class="port-grid">
<!--
布局映射逻辑：实现两行纵向优先的Grid布局
示例：假设有6个端口 [port1, port2, port3, port4, port5, port6]
portIndex: 0 1 2 3 4 5
gridRow: 1 2 1 2 1 2 ((portIndex % 2) + 1)
gridColumn: 1 1 2 2 3 3 (Math.floor(portIndex / 2) + 1)
最终布局效果：
第1行：port1 port3 port5
第2行：port2 port4 port6
这样实现了纵向优先填充的两行布局
-->
<NGridItem
v-for="(port, portIndex) in group.ports"
:key="port.portName"
:style="{
gridRow: (portIndex % 2) + 1, // 奇偶索引分别占第1、2行
gridColumn: Math.floor(portIndex / 2) + 1, // 每两个端口占一列
}"
>
<!--
端口信息弹窗：使用 NaiveUI Popover 组件显示详细信息
触发方式：hover（悬停触发）
位置：top（在端口项上方显示）
-->
<NPopover trigger="hover" placement="top">
<template #trigger>
<!--
端口项显示：
- 动态应用状态样式类（port-up/port-down/port-unknown）
- 显示端口接口序号（从完整端口名 x/y/z 中提取 z 部分）
- 状态指示器圆点
-->
<div class="port-item" :class="getPortStatusClass(port)">
<div class="port-name">{{ port.portName.split('/')[2] }}</div>
<div class="port-status-indicator"></div>
</div>
</template>
<!--
弹窗内容：显示端口的详细信息
信息包括：
1. 完整端口名称
2. 端口状态（启用/禁用/未知）
3. 上行速率（使用 transformPortSpeed 函数计算）
4. 下行速率（使用 transformPortSpeed 函数计算）
5. 总速率（使用 transformPortSpeed 函数计算）
-->
<div class="port-popover-content">
<div class="port-info-row">
<span class="label">端口:</span>
<span class="value">{{ port.portName }}</span>
</div>
<div class="port-info-row">
<span class="label">状态:</span>
<span class="value" :class="getPortStatusClass(port)">
{{ port.upDown === 1 ? '启用' : port.upDown === 2 ? '禁用' : '未知' }}
</span>
</div>
<div class="port-info-row">
<span class="label">上行速率:</span>
<span class="value">{{ transformPortSpeed(port, 'out') }}</span>
</div>
<div class="port-info-row">
<span class="label">下行速率:</span>
<span class="value">{{ transformPortSpeed(port, 'in') }}</span>
</div>
<div class="port-info-row">
<span class="label">总速率:</span>
<span class="value">{{ transformPortSpeed(port, 'total') }}</span>
</div>
</div>
</NPopover>
</NGridItem>
</NGrid>
</div>
</div>
</NCard>
</template>
<style scoped lang="scss">
/*
* 交换机端口布局样式
*
* 设计理念：
* 1. 简约清晰的视觉风格
* 2. 直观的端口状态指示
* 3. 良好的交互体验
* 4. 亮色/暗色模式适配
*/
.switch-port-layout {
/* 槽位组容器 - 每个槽位之间保持适当间距 */
.slot-group {
margin-bottom: 24px;
&:last-child {
margin-bottom: 0; // 最后一个槽位组不需要下边距
}
}
/* 槽位标题头部 - 显示槽位信息和端口数量 */
.slot-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color); // 使用主题变量适配亮暗模式
.slot-title {
font-weight: 600;
font-size: 14px;
color: var(--text-color-1); // 主要文本颜色
}
.port-count {
font-size: 12px;
color: var(--text-color-3); // 次要文本颜色
}
}
/* 端口网格容器 - 限制最大宽度防止过度拉伸 */
.port-grid {
max-width: 100%;
}
/*
* 端口项样式 - 核心视觉元素
*
* 尺寸设计：48x36px，适合显示端口号和状态指示器
* 状态指示：通过边框颜色和圆点颜色区分端口状态
* 交互效果：悬停时轻微上移和阴影效果
*/
.port-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 48px; // 固定宽度确保布局一致性
height: 36px; // 固定高度确保视觉平衡
border: 1px solid var(--border-color);
border-radius: 4px;
background: var(--card-color);
cursor: pointer;
transition: all 0.2s ease; // 平滑的交互动画
/* 悬停效果 - 提升交互体验 */
&:hover {
transform: translateY(-1px); // 轻微上移
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); // 添加阴影
}
/* 端口名称显示 - 只显示接口序号部分 */
.port-name {
font-size: 11px;
font-weight: 500;
color: var(--text-color-2);
line-height: 1; // 紧凑行高
}
/* 端口状态指示器 - 小圆点显示状态 */
.port-status-indicator {
width: 6px;
height: 6px;
border-radius: 50%;
margin-top: 2px;
}
/* 端口启用状态 - 绿色主题 */
&.port-up {
border-color: #18a058; // NaiveUI 成功色
.port-status-indicator {
background-color: #18a058;
}
&:hover {
background-color: rgba(24, 160, 88, 0.05); // 浅绿色背景
}
}
/* 端口禁用状态 - 红色主题 */
&.port-down {
border-color: #d03050; // NaiveUI 错误色
.port-status-indicator {
background-color: #d03050;
}
&:hover {
background-color: rgba(208, 48, 80, 0.05); // 浅红色背景
}
}
/* 端口未知状态 - 黄色主题 */
&.port-unknown {
border-color: #f0a020; // NaiveUI 警告色
.port-status-indicator {
background-color: #f0a020;
}
&:hover {
background-color: rgba(240, 160, 32, 0.05); // 浅黄色背景
}
}
}
}
/*
* 端口信息弹窗内容样式
*
* 功能：显示端口的详细信息，包括状态和速率数据
* 布局：标签-值的两列布局，右对齐数值便于对比
*/
.port-popover-content {
min-width: 160px; // 确保弹窗有足够宽度显示内容
.port-info-row {
display: flex;
justify-content: space-between; // 标签和值分别左右对齐
align-items: center;
margin-bottom: 6px;
&:last-child {
margin-bottom: 0; // 最后一行不需要下边距
}
/* 信息标签样式 - 统一的次要文本样式 */
.label {
font-size: 12px;
color: var(--text-color-3); // 次要文本颜色
margin-right: 12px;
}
/* 信息值样式 - 突出显示的数据 */
.value {
font-size: 12px;
font-weight: 500; // 稍微加粗突出数值
color: var(--text-color-2);
/* 状态值的颜色区分 - 与端口项状态颜色保持一致 */
&.port-up {
color: #18a058; // 启用状态：绿色
}
&.port-down {
color: #d03050; // 禁用状态：红色
}
&.port-unknown {
color: #f0a020; // 未知状态：黄色
}
}
}
}
/*
* 暗色模式适配
*
* 针对系统暗色模式的特殊样式调整
* 主要调整阴影效果，使其在暗色背景下更加明显
*/
@media (prefers-color-scheme: dark) {
.switch-port-layout {
.port-item {
&:hover {
/* 暗色模式下使用白色阴影替代黑色阴影 */
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}
}
}
}
</style>

17
src/pages/device-page.vue
View File

@@ -9,7 +9,7 @@ import ServerCard from '@/components/device-page/server-card.vue';
import SwitchCard from '@/components/device-page/switch-card.vue';
import { useDeviceSelection } from '@/composables/device';
import { useLineDevicesQuery } from '@/composables/query';
import { DeviceType, getDeviceTypeVal, type DeviceTypeVal } from '@/enums/device-type';
import { DeviceType, type DeviceTypeVal } from '@/enums/device-type';
import { useLineDevicesStore } from '@/stores/line-devices';
import { useStationStore } from '@/stores/station';
import { ChevronBack } from '@vicons/ionicons5';
@@ -93,28 +93,27 @@ watch(
<!-- 内容区域 -->
<template v-if="selectedDevice && selectedStationCode">
<NScrollbar x-scrollable style="height: 100%; padding-right: 24px">
<template v-if="getDeviceTypeVal(selectedDevice.deviceType) === DeviceType.Camera">
<template v-if="selectedDeviceType === DeviceType.Camera">
<CameraCard :station-code="selectedStationCode" :ndm-camera="selectedDevice" />
</template>
<template v-if="getDeviceTypeVal(selectedDevice.deviceType) === DeviceType.Decoder">
<template v-if="selectedDeviceType === DeviceType.Decoder">
<DecoderCard :station-code="selectedStationCode" :ndm-decoder="selectedDevice" />
</template>
<template v-if="getDeviceTypeVal(selectedDevice.deviceType) === DeviceType.Keyboard">
<template v-if="selectedDeviceType === DeviceType.Keyboard">
<KeyboardCard :station-code="selectedStationCode" :ndm-keyboard="selectedDevice" />
</template>
<template v-if="getDeviceTypeVal(selectedDevice.deviceType) === DeviceType.Nvr">
<template v-if="selectedDeviceType === DeviceType.Nvr">
<NvrCard :station-code="selectedStationCode" :ndm-nvr="selectedDevice" />
</template>
<template v-if="getDeviceTypeVal(selectedDevice.deviceType) === DeviceType.SecurityBox">
<template v-if="selectedDeviceType === DeviceType.SecurityBox">
<SecurityBoxCard :station-code="selectedStationCode" :ndm-security-box="selectedDevice" />
</template>
<template v-if="([DeviceType.MediaServer, DeviceType.VideoServer] as DeviceTypeVal[]).includes(getDeviceTypeVal(selectedDevice.deviceType))">
<template v-if="([DeviceType.MediaServer, DeviceType.VideoServer] as DeviceTypeVal[]).includes(selectedDeviceType)">
<ServerCard :station-code="selectedStationCode" :ndm-server="selectedDevice" />
</template>
<template v-if="getDeviceTypeVal(selectedDevice.deviceType) === DeviceType.Switch">
<template v-if="selectedDeviceType === DeviceType.Switch">
<SwitchCard :station-code="selectedStationCode" :ndm-switch="selectedDevice" />
</template>
<!-- <pre style="width: 500px; height: 300px; overflow: scroll">{{ selectedDevice }}</pre> -->
</NScrollbar>
</template>
<template v-else>