feat: DeviceHardwareCard组件添加自定义标签属性
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user