feat: DeviceHardwareCard组件添加自定义标签属性

This commit is contained in:
yangsy
2025-12-19 12:46:27 +08:00
parent 24a7881b94
commit 5b989fab0f

View File

@@ -8,12 +8,16 @@ const props = defineProps<{
memUsage?: string; memUsage?: string;
diskUsage?: string; diskUsage?: string;
runningTime?: string; runningTime?: string;
cpuUsageLabel?: string;
memUsageLabel?: string;
diskUsageLabel?: string;
runningTimeLabel?: string;
}>(); }>();
const { cpuUsage, memUsage, diskUsage, runningTime } = toRefs(props); const { cpuUsage, memUsage, diskUsage, runningTime, cpuUsageLabel, memUsageLabel, diskUsageLabel, runningTimeLabel } = toRefs(props);
const showCard = computed(() => { const showCard = computed(() => {
return Object.values(props).some((value) => !!value); return Object.values({ cpuUsage, memUsage, diskUsage, runningTime }).some((value) => !!value);
}); });
const cpuPercent = computed(() => { const cpuPercent = computed(() => {
@@ -51,22 +55,22 @@ const getProgressStatus = (percent: number): ProgressStatus => {
<NFlex vertical> <NFlex vertical>
<NFlex v-if="cpuUsage" style="width: 100%" align="center" :wrap="false"> <NFlex v-if="cpuUsage" style="width: 100%" align="center" :wrap="false">
<NIcon :component="FireOutlined" /> <NIcon :component="FireOutlined" />
<span style="word-break: keep-all">CPU</span> <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>
<NFlex v-if="memUsage" style="width: 100%" align="center" :wrap="false"> <NFlex v-if="memUsage" style="width: 100%" align="center" :wrap="false">
<NIcon :component="CodeOutlined" /> <NIcon :component="CodeOutlined" />
<span style="word-break: keep-all">内存</span> <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>
<NFlex v-if="diskUsage" style="width: 100%" align="center" :wrap="false"> <NFlex v-if="diskUsage" style="width: 100%" align="center" :wrap="false">
<NIcon :component="SaveOutlined" /> <NIcon :component="SaveOutlined" />
<span style="word-break: keep-all">磁盘</span> <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>
<NFlex v-if="runningTime" style="width: 100%" align="center" :wrap="false"> <NFlex v-if="runningTime" style="width: 100%" align="center" :wrap="false">
<NIcon :component="ClockCircleOutlined" /> <NIcon :component="ClockCircleOutlined" />
<span>系统运行时间</span> <span>{{ runningTimeLabel || '运行时间' }}</span>
<span>{{ formattedRunningTime }}</span> <span>{{ formattedRunningTime }}</span>
</NFlex> </NFlex>
</NFlex> </NFlex>