fix: 修复设备硬件卡片进度条异常值并完善状态判断逻辑
新增进度百分比限制函数,修正0值进度的状态判断,调整模板变量判断条件
This commit is contained in:
@@ -51,8 +51,13 @@ const formattedRunningTime = computed(() => {
|
|||||||
return (runningTime?.value ?? '-').replace('days', '天');
|
return (runningTime?.value ?? '-').replace('days', '天');
|
||||||
});
|
});
|
||||||
|
|
||||||
const getProgressStatus = (percent?: number): ProgressStatus | undefined => {
|
const getProgressPercentage = (percent: number) => {
|
||||||
if (!percent) return undefined;
|
if (percent < 0) return 0;
|
||||||
|
if (percent > 100) return 100;
|
||||||
|
return percent;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getProgressStatus = (percent: number): ProgressStatus => {
|
||||||
if (percent >= 90) return 'error';
|
if (percent >= 90) return 'error';
|
||||||
if (percent >= 70) return 'warning';
|
if (percent >= 70) return 'warning';
|
||||||
return 'success';
|
return 'success';
|
||||||
@@ -66,20 +71,20 @@ const getProgressStatus = (percent?: number): ProgressStatus | undefined => {
|
|||||||
</template>
|
</template>
|
||||||
<template #default>
|
<template #default>
|
||||||
<NFlex vertical>
|
<NFlex vertical>
|
||||||
<NFlex v-if="cpuUsage" style="width: 100%" align="center" :wrap="false">
|
<NFlex v-if="cpuPercent" style="width: 100%" align="center" :wrap="false">
|
||||||
<NIcon :component="CpuIcon" />
|
<NIcon :component="CpuIcon" />
|
||||||
<span style="word-break: keep-all">{{ cpuUsageLabel || 'CPU' }}</span>
|
<span style="word-break: keep-all">{{ cpuUsageLabel || 'CPU' }}</span>
|
||||||
<NProgress :percentage="cpuPercent" :status="getProgressStatus(cpuPercent)">{{ cpuPercent ?? '-' }}%</NProgress>
|
<NProgress :percentage="getProgressPercentage(cpuPercent)" :status="getProgressStatus(cpuPercent)">{{ cpuPercent }}%</NProgress>
|
||||||
</NFlex>
|
</NFlex>
|
||||||
<NFlex v-if="memUsage" style="width: 100%" align="center" :wrap="false">
|
<NFlex v-if="memPercent" style="width: 100%" align="center" :wrap="false">
|
||||||
<NIcon :component="MemoryStickIcon" />
|
<NIcon :component="MemoryStickIcon" />
|
||||||
<span style="word-break: keep-all">{{ memUsageLabel || '内存' }}</span>
|
<span style="word-break: keep-all">{{ memUsageLabel || '内存' }}</span>
|
||||||
<NProgress :percentage="memPercent" :status="getProgressStatus(memPercent)">{{ memPercent ?? '-' }}%</NProgress>
|
<NProgress :percentage="getProgressPercentage(memPercent)" :status="getProgressStatus(memPercent)">{{ memPercent }}%</NProgress>
|
||||||
</NFlex>
|
</NFlex>
|
||||||
<NFlex v-if="diskUsage" style="width: 100%" align="center" :wrap="false">
|
<NFlex v-if="diskPercent" style="width: 100%" align="center" :wrap="false">
|
||||||
<NIcon :component="HardDriveIcon" />
|
<NIcon :component="HardDriveIcon" />
|
||||||
<span style="word-break: keep-all">{{ diskUsageLabel || '磁盘' }}</span>
|
<span style="word-break: keep-all">{{ diskUsageLabel || '磁盘' }}</span>
|
||||||
<NProgress :percentage="diskPercent" :status="getProgressStatus(diskPercent)">{{ diskPercent ?? '-' }}%</NProgress>
|
<NProgress :percentage="getProgressPercentage(diskPercent)" :status="getProgressStatus(diskPercent)">{{ diskPercent }}%</NProgress>
|
||||||
</NFlex>
|
</NFlex>
|
||||||
<NFlex v-if="runningTime" style="width: 100%" align="center" :wrap="false">
|
<NFlex v-if="runningTime" style="width: 100%" align="center" :wrap="false">
|
||||||
<NIcon :component="ClockCheckIcon" />
|
<NIcon :component="ClockCheckIcon" />
|
||||||
|
|||||||
Reference in New Issue
Block a user