fix: 修改系统监控页面

src/i18n/langs/cn.json

@@ -1041,10 +1041,11 @@
     "License": "许可证",
     "SystemMonitor": "系统监控",
     "ServiceRatio": "组件负载统计",
-    "LoadStatus":"组件负载状态",
-    "NormalLoad":"负载正常",
-    "HighLoad":"负载较高",
-    "CriticalLoad":"负载严重",
+    "LoadStatus":"组件状态",
+    "NormalLoad":"正常",
+    "HighLoad":"较高",
+    "CriticalLoad":"严重",
+    "Offline": "离线",
     "LicenseDetail": "许可证详情",
     "LicenseFile": "许可证文件",
     "NoLicense": "暂无许可证",

src/i18n/langs/en.json

@@ -1030,10 +1030,11 @@
     "LicenseDetail": "License detail",
     "SystemMonitor": "System Monitor",
     "ServiceRatio": "Service ratio",
-    "LoadStatus":"Load status",
-    "NormalLoad":"Normal load",
-    "HighLoad":"High load",
-    "CriticalLoad":"Critical load",
+    "LoadStatus":"Status",
+    "NormalLoad":"Normal",
+    "HighLoad":"High",
+    "Offline": "Offline",
+    "CriticalLoad":"Critical",
     "LicenseFile": "License file",
     "NoLicense": "No License",
     "Node": "Node",

src/views/xpack/SystemMonitor/component/MonitorCard.vue

@@ -26,6 +26,11 @@
                 role="progressbar"
                 :style="{'width':toPercent(serviceData.critical) }"
               />
+              <div
+                class="progress-bar progress-bar-offline"
+                role="progressbar"
+                :style="{'width':toPercent(serviceData.offline) }"
+              />
             </div>
             <div style="display: flex;justify-content: space-around;font-size: 14px;">
               <span>
@@ -33,13 +38,17 @@
                 {{ $t('xpack.NormalLoad') }}: {{ serviceData.normal }}
               </span>
               <span>
-                <i class="el-icon-warning" style="color: #E6A23C;" />
+                <i class="el-icon-bell" style="color: #E6A23C;" />
                 {{ $t('xpack.HighLoad') }}: {{ serviceData.high }}
               </span>
               <span>
-                <i class="el-icon-circle-close" style="color: #FF4949;" />
+                <i class="el-icon-message-solid" style="color: #FF4949;" />
                 {{ $t('xpack.CriticalLoad') }}: {{ serviceData.critical }}
               </span>
+              <span>
+                <i class="el-icon-circle-close" style="color: #bfbaba;" />
+                {{ $t('xpack.Offline') }}: {{ serviceData.offline }}
+              </span>
             </div>
           </div>
         </el-col>
@@ -123,6 +132,9 @@ export default {
 .progress-bar-danger{
   background-color: #FF4949 !important;
 }
+.progress-bar-offline{
+  background-color: #bfbaba !important;
+}
 .progress-bar {
   float: left;
   width: 0;

src/views/xpack/SystemMonitor/index.vue

@@ -1,13 +1,13 @@
 <template>
   <Page>
     <el-row :gutter="40">
-      <el-col :lg="{span:8,offset:4 }" :md="24" class="monitorCard">
+      <el-col :lg="{span:10,offset:2 }" :md="24" class="monitorCard">
         <MonitorCard type="koko" />
       </el-col>
-      <el-col :lg="8" :md="24" class="monitorCard">
+      <el-col :lg="10" :md="24" class="monitorCard">
         <MonitorCard type="guacamole" />
       </el-col>
-      <el-col :lg="{span:8,offset:4 }" :md="24" class="monitorCard">
+      <el-col :lg="{span:10,offset:2 }" :md="24" class="monitorCard">
         <MonitorCard type="omnidb" />
       </el-col>
     </el-row>