refactor: 提取设备硬件卡片中通用百分比解析函数并优化空值展示

提取统一的百分比字符串解析工具函数,替换原有重复的解析逻辑,新增空值或无效值时显示 `-` 的处理
This commit is contained in:
yangsy
2026-05-17 18:28:26 +08:00
parent f36e5c3d3c
commit dc8184d5dd
@@ -1,3 +1,18 @@
<script lang="ts">
const parsePercentMetric = (raw?: string) => {
const trimmed = raw?.trim();
if (!!trimmed) {
const value = Number(trimmed);
if (Number.isFinite(value)) {
return value;
}
}
return undefined;
};
</script>
<script setup lang="ts">
import { ClockCheckIcon, CpuIcon, HardDriveIcon, MemoryStickIcon } from 'lucide-vue-next';
import { NCard, NFlex, NIcon, NProgress, type ProgressStatus } from 'naive-ui';
@@ -21,25 +36,23 @@ const showCard = computed(() => {
});
const cpuPercent = computed(() => {
if (!cpuUsage?.value) return 0;
return parseFloat(cpuUsage.value.replace('%', ''));
return parsePercentMetric(cpuUsage.value);
});
const memPercent = computed(() => {
if (!memUsage?.value) return 0;
return parseFloat(memUsage.value.replace('%', ''));
return parsePercentMetric(memUsage.value);
});
const diskPercent = computed(() => {
if (!diskUsage?.value) return 0;
return parseFloat(diskUsage.value.replace('%', ''));
return parsePercentMetric(diskUsage.value);
});
const formattedRunningTime = computed(() => {
return (runningTime?.value ?? '-').replace('days', '天');
});
const getProgressStatus = (percent: number): ProgressStatus => {
const getProgressStatus = (percent?: number): ProgressStatus | undefined => {
if (!percent) return undefined;
if (percent >= 90) return 'error';
if (percent >= 70) return 'warning';
return 'success';
@@ -56,17 +69,17 @@ const getProgressStatus = (percent: number): ProgressStatus => {
<NFlex v-if="cpuUsage" style="width: 100%" align="center" :wrap="false">
<NIcon :component="CpuIcon" />
<span style="word-break: keep-all">{{ cpuUsageLabel || 'CPU' }}</span>
<NProgress :percentage="cpuPercent" :status="getProgressStatus(cpuPercent)">{{ cpuPercent }}%</NProgress>
<NProgress :percentage="cpuPercent" :status="getProgressStatus(cpuPercent)">{{ cpuPercent ?? '-' }}%</NProgress>
</NFlex>
<NFlex v-if="memUsage" style="width: 100%" align="center" :wrap="false">
<NIcon :component="MemoryStickIcon" />
<span style="word-break: keep-all">{{ memUsageLabel || '内存' }}</span>
<NProgress :percentage="memPercent" :status="getProgressStatus(memPercent)">{{ memPercent }}%</NProgress>
<NProgress :percentage="memPercent" :status="getProgressStatus(memPercent)">{{ memPercent ?? '-' }}%</NProgress>
</NFlex>
<NFlex v-if="diskUsage" style="width: 100%" align="center" :wrap="false">
<NIcon :component="HardDriveIcon" />
<span style="word-break: keep-all">{{ diskUsageLabel || '磁盘' }}</span>
<NProgress :percentage="diskPercent" :status="getProgressStatus(diskPercent)">{{ diskPercent }}%</NProgress>
<NProgress :percentage="diskPercent" :status="getProgressStatus(diskPercent)">{{ diskPercent ?? '-' }}%</NProgress>
</NFlex>
<NFlex v-if="runningTime" style="width: 100%" align="center" :wrap="false">
<NIcon :component="ClockCheckIcon" />