96 lines
3.0 KiB
Vue
96 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { NCard, NProgress, NFlex, NText, NIcon, type ProgressStatus } from 'naive-ui';
|
|
import { TimeOutline, HardwareChipOutline, ServerOutline, FolderOutline } from '@vicons/ionicons5';
|
|
import { computed, toRefs } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
cpuUsage?: string;
|
|
memUsage?: string;
|
|
diskUsage?: string;
|
|
runningTime?: string;
|
|
}>();
|
|
|
|
const { cpuUsage, memUsage, diskUsage, runningTime } = toRefs(props);
|
|
|
|
const cardShow = computed(() => {
|
|
return cpuUsage?.value || memUsage?.value || diskUsage?.value || runningTime?.value;
|
|
});
|
|
|
|
const cpuPercent = computed(() => {
|
|
if (!cpuUsage?.value) return 0;
|
|
return parseFloat(cpuUsage.value.replace('%', ''));
|
|
});
|
|
|
|
const memPercent = computed(() => {
|
|
if (!memUsage?.value) return 0;
|
|
return parseFloat(memUsage.value.replace('%', ''));
|
|
});
|
|
|
|
const diskPercent = computed(() => {
|
|
if (!diskUsage?.value) return 0;
|
|
return parseFloat(diskUsage.value.replace('%', ''));
|
|
});
|
|
|
|
const formattedRunningTime = computed(() => {
|
|
return runningTime?.value ?? '未知';
|
|
});
|
|
|
|
const getProgressStatus = (percent: number): ProgressStatus => {
|
|
if (percent >= 90) return 'error';
|
|
if (percent >= 70) return 'warning';
|
|
return 'success';
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<NCard v-if="cardShow" size="small" title="硬件占用率" hoverable>
|
|
<NFlex vertical :size="16">
|
|
<!-- CPU 使用率 -->
|
|
<NFlex v-if="cpuUsage" :align="'center'" :size="12">
|
|
<NIcon size="16" style="color: #18a058">
|
|
<HardwareChipOutline />
|
|
</NIcon>
|
|
<NText style="width: 60px; font-size: 14px">CPU</NText>
|
|
<NProgress :percentage="cpuPercent" :status="getProgressStatus(cpuPercent)" style="flex: 1">
|
|
<div>{{ cpuPercent }}%</div>
|
|
</NProgress>
|
|
</NFlex>
|
|
|
|
<!-- 内存使用率 -->
|
|
<NFlex v-if="memUsage" :align="'center'" :size="12">
|
|
<NIcon size="16" style="color: #2080f0">
|
|
<ServerOutline />
|
|
</NIcon>
|
|
<NText style="width: 60px; font-size: 14px">内存</NText>
|
|
<NProgress :percentage="memPercent" :status="getProgressStatus(memPercent)" style="flex: 1">
|
|
<div>{{ memPercent }}%</div>
|
|
</NProgress>
|
|
</NFlex>
|
|
|
|
<!-- 硬盘使用率 -->
|
|
<NFlex v-if="diskUsage" :align="'center'" :size="12">
|
|
<NIcon size="16" style="color: #f0a020">
|
|
<FolderOutline />
|
|
</NIcon>
|
|
<NText style="width: 60px; font-size: 14px">硬盘</NText>
|
|
<NProgress :percentage="diskPercent" :status="getProgressStatus(diskPercent)" style="flex: 1">
|
|
<div>{{ diskPercent }}%</div>
|
|
</NProgress>
|
|
</NFlex>
|
|
|
|
<!-- 运行时间 -->
|
|
<NFlex v-if="runningTime" :align="'center'" :size="12">
|
|
<NIcon size="16" style="color: #722ed1">
|
|
<TimeOutline />
|
|
</NIcon>
|
|
<NText style="width: 100px; font-size: 14px">系统运行时间</NText>
|
|
<NText style="flex: 1; font-size: 14px; color: #666">
|
|
{{ formattedRunningTime }}
|
|
</NText>
|
|
</NFlex>
|
|
</NFlex>
|
|
</NCard>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|