From a7fe0c87a594d749af2485ee32daf534d6587290 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=97=E5=AD=90?= <i@haozi.net>
Date: Thu, 17 Oct 2024 22:46:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E8=B5=84=E6=BA=90?=
 =?UTF-8?q?=E6=80=BB=E8=A7=88=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/home/IndexView.vue | 51 +++++++++++++++++++++++++++-----
 1 file changed, 44 insertions(+), 7 deletions(-)

diff --git a/web/src/views/home/IndexView.vue b/web/src/views/home/IndexView.vue
index d9cbc547..250b46c2 100644
--- a/web/src/views/home/IndexView.vue
+++ b/web/src/views/home/IndexView.vue
@@ -80,6 +80,28 @@ const current = reactive({
   time: 0
 })
 
+const statusColor = (percentage: number) => {
+  if (percentage >= 90) {
+    return 'var(--error-color)'
+  } else if (percentage >= 80) {
+    return 'var(--warning-color)'
+  } else if (percentage >= 70) {
+    return 'var(--info-color)'
+  }
+  return 'var(--success-color)'
+}
+
+const statusText = (percentage: number) => {
+  if (percentage >= 90) {
+    return '运行堵塞'
+  } else if (percentage >= 80) {
+    return '运行缓慢'
+  } else if (percentage >= 70) {
+    return '运行正常'
+  }
+  return '运行流畅'
+}
+
 const chartDisk = computed(() => {
   return {
     title: {
@@ -414,11 +436,12 @@ if (import.meta.hot) {
                 <n-flex vertical flex items-center p-20 pl-40 pr-40>
                   <p>负载状态</p>
                   <n-progress
-                    :percentage="formatPercent((realtime.load.load1 / cores) * 100)"
                     type="dashboard"
+                    :percentage="formatPercent((realtime.load.load1 / cores) * 100)"
+                    :color="statusColor((realtime.load.load1 / cores) * 100)"
                   >
                   </n-progress>
-                  <p>运行流畅</p>
+                  <p>{{ statusText((realtime.load.load1 / cores) * 100) }}</p>
                 </n-flex>
               </template>
               <n-table :single-line="false" striped>
@@ -449,8 +472,13 @@ if (import.meta.hot) {
               <template #trigger>
                 <n-flex vertical flex items-center p-20 pl-40 pr-40>
                   <p>CPU</p>
-                  <n-progress :percentage="realtime.percent" type="dashboard"> </n-progress>
-                  <p>{{ cores }}核心</p>
+                  <n-progress
+                    type="dashboard"
+                    :percentage="realtime.percent"
+                    :color="statusColor(realtime.percent)"
+                  >
+                  </n-progress>
+                  <p>{{ cores }} 核心</p>
                 </n-flex>
               </template>
               <n-table :single-line="false" striped>
@@ -477,8 +505,13 @@ if (import.meta.hot) {
               <template #trigger>
                 <n-flex vertical flex items-center p-20 pl-40 pr-40>
                   <p>内存</p>
-                  <n-progress :percentage="realtime.mem.usedPercent" type="dashboard"> </n-progress>
-                  <p>运行流畅</p>
+                  <n-progress
+                    type="dashboard"
+                    :percentage="realtime.mem.usedPercent"
+                    :color="statusColor(realtime.mem.usedPercent)"
+                  >
+                  </n-progress>
+                  <p>{{ formatBytes(realtime.mem.total) }}</p>
                 </n-flex>
               </template>
               <n-table :single-line="false" striped>
@@ -566,7 +599,11 @@ if (import.meta.hot) {
               <template #trigger>
                 <n-flex vertical flex items-center p-20 pl-40 pr-40>
                   <p>{{ item.path }}</p>
-                  <n-progress :percentage="formatPercent(item.usedPercent)" type="dashboard">
+                  <n-progress
+                    type="dashboard"
+                    :percentage="formatPercent(item.usedPercent)"
+                    :color="statusColor(item.usedPercent)"
+                  >
                   </n-progress>
                   <p>{{ formatBytes(item.used) }} / {{ formatBytes(item.total) }}</p>
                 </n-flex>