refactor: 提取设备硬件卡片中通用百分比解析函数并优化空值展示
提取统一的百分比字符串解析工具函数,替换原有重复的解析逻辑,新增空值或无效值时显示 `-` 的处理
This commit is contained in:
+23
-10
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user