v0.0.3: 修复CPU/内存显示 - 列表和仪表盘显示使用量/总量格式,修复详情页CPU数据获取bug

This commit is contained in:
admin
2026-05-14 14:48:48 +08:00
parent da741e7593
commit f4f5475ffb
4 changed files with 96 additions and 15 deletions
+23 -3
View File
@@ -63,9 +63,23 @@
</el-tag>
</template>
</el-table-column>
<el-table-column prop="vcpus" label="CPU" width="80" align="center" />
<el-table-column label="内存" width="110" align="center">
<template #default="{ row }">{{ row.memory_mb }} MB</template>
<el-table-column label="CPU" width="120" align="center">
<template #default="{ row }">
<span v-if="row.state === 'running' && row.cpu_percent !== undefined">
<span :style="{ color: row.cpu_percent > 80 ? '#f56c6c' : row.cpu_percent > 50 ? '#e6a23c' : '#67c23a' }">
{{ row.cpu_percent }}%</span> / {{ row.vcpus }}
</span>
<span v-else>{{ row.vcpus }}</span>
</template>
</el-table-column>
<el-table-column label="内存" width="150" align="center">
<template #default="{ row }">
<span v-if="row.state === 'running' && row.memory_rss_mb">
<span :style="{ color: row.memory_usage_percent > 80 ? '#f56c6c' : '#67c23a' }">
{{ formatMem(row.memory_rss_mb) }}</span> / {{ formatMem(row.memory_mb) }}
</span>
<span v-else>{{ formatMem(row.memory_mb) }}</span>
</template>
</el-table-column>
<el-table-column label="IP 地址" min-width="130">
<template #default="{ row }">
@@ -188,6 +202,12 @@ function poolColor(pool) {
return '#409eff'
}
function formatMem(mb) {
if (!mb) return '-'
if (mb >= 1024) return (mb / 1024).toFixed(1) + ' GB'
return mb + ' MB'
}
let refreshTimer = null
async function loadData() {
+17 -3
View File
@@ -63,9 +63,23 @@
</el-tag>
</template>
</el-table-column>
<el-table-column prop="vcpus" label="CPU" width="80" align="center" />
<el-table-column label="内存" width="110" align="center">
<template #default="{ row }">{{ formatMem(row.memory_mb) }}</template>
<el-table-column label="CPU" width="120" align="center">
<template #default="{ row }">
<span v-if="row.state === 'running' && row.cpu_percent !== undefined">
<span :style="{ color: row.cpu_percent > 80 ? '#f56c6c' : row.cpu_percent > 50 ? '#e6a23c' : '#67c23a' }">
{{ row.cpu_percent }}%</span> / {{ row.vcpus }}
</span>
<span v-else>{{ row.vcpus }}</span>
</template>
</el-table-column>
<el-table-column label="内存" width="150" align="center">
<template #default="{ row }">
<span v-if="row.state === 'running' && row.memory_rss_mb">
<span :style="{ color: row.memory_usage_percent > 80 ? '#f56c6c' : '#67c23a' }">
{{ formatMem(row.memory_rss_mb) }}</span> / {{ formatMem(row.memory_mb) }}
</span>
<span v-else>{{ formatMem(row.memory_mb) }}</span>
</template>
</el-table-column>
<el-table-column label="IP 地址" min-width="140">
<template #default="{ row }">