feat: 内存占用图使用百分比

This commit is contained in:
amtoaer
2023-09-04 23:05:16 +08:00
parent f135804c4b
commit 353bdc5989
+8 -6
View File
@@ -20,8 +20,10 @@ const series = ref([
}, },
]) ])
// 当前值 // 占用的内存
const current = ref(0) const usedMemory = ref(0)
// 内存使用百分比
const memoryUsage = ref(0)
const chartOptions = controlledComputed(() => vuetifyTheme.name.value, () => { const chartOptions = controlledComputed(() => vuetifyTheme.name.value, () => {
return { return {
@@ -80,6 +82,7 @@ const chartOptions = controlledComputed(() => vuetifyTheme.name.value, () => {
}, },
yaxis: { yaxis: {
labels: { show: false }, labels: { show: false },
max: 100,
}, },
} }
}) })
@@ -88,9 +91,8 @@ const chartOptions = controlledComputed(() => vuetifyTheme.name.value, () => {
async function getMemorgUsage() { async function getMemorgUsage() {
try { try {
// 请求数据 // 请求数据
current.value = await api.get('dashboard/memory') ?? 0 [usedMemory.value, memoryUsage.value] = await api.get('dashboard/memory')
// 添加到序列 series.value[0].data.push(memoryUsage.value)
series.value[0].data.push(current.value / 1024 / 1024 / 1024)
// 序列超过30条记录时,清掉前面的 // 序列超过30条记录时,清掉前面的
if (series.value[0].data.length > 30) if (series.value[0].data.length > 30)
series.value[0].data.shift() series.value[0].data.shift()
@@ -131,7 +133,7 @@ onUnmounted(() => {
/> />
<p class="text-center font-weight-medium mb-0"> <p class="text-center font-weight-medium mb-0">
当前{{ formatBytes(current) }} 当前{{ formatBytes(usedMemory) }}
</p> </p>
</VCardText> </VCardText>
</VCard> </VCard>