fix🐛: fix monitor macos env error

public/index.html

@@ -7,10 +7,12 @@
   <meta name="renderer" content="webkit">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <title><%= webpackConfig.name %> - go-admin</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.css" rel="stylesheet">
+  <title>
+    <%= webpackConfig.name %> - go-admin
+  </title>
   <meta name="keywords" content="go-admin,gin,权限管理系统,gin-admin,gin-vue-admin,go">
-  <meta name="description" content="基于Gin + Vue + Element UI的前后端分离权限管理系统，初始化极度简单，只需要配置文件中，修改数据库连接，系统启动后会自动初始化数据库信息以及必须的基础数据">
+  <meta name="description"
+    content="基于Gin + Vue + Element UI的前后端分离权限管理系统，初始化极度简单，只需要配置文件中，修改数据库连接，系统启动后会自动初始化数据库信息以及必须的基础数据">
   <style>
     html,
     body,

src/views/sys-tools/monitor.vue

@@ -4,119 +4,124 @@
       <template #wrapper>
         <el-row :gutter="10" class="mb10">
           <el-col :sm="24" :md="8">
-            <el-card v-if="info.cpu" class="box-card">
+            <el-card v-if="info.cpu" class="box-card" shadow="always" :body-style="{paddingTop:'0 !important'}">
               <div slot="header" class="clearfix">
-                <span>CPU使用率</span>
+                <el-row :gutter="10">
+                  <el-col :sm="24" :md="8">
+                    <el-tag
+                      type="success"
+                      effect="dark"
+                    >
+                      {{ info.location }}
+                    </el-tag>
+                  </el-col>
+                  <el-col :sm="24" :md="8" class="" style="line-height:28px;text-align:center;">
+                    Aliyun
+                  </el-col>
+                </el-row>
               </div>
-              <div class="monitor">
-                <div class="monitor-header">
-                  <el-progress :color="$store.state.settings.theme" type="circle" :percentage="info.cpu.Percent" />
+              <div class="monitor" style="padding-top:0px;">
+                <div class="monitor-content">
+                  <el-row :gutter="10">
+                    <el-col :sm="24" :md="12">
+                      <Cell label="系统" :value="info.os.goOs" border />
+                      <Cell label="内存" :value="`${info.mem.used}MB/${info.mem.total}MB`" border />
+                      <Cell label="交换" :value="`${info.swap.used}/${info.swap.total}`" border />
+                    </el-col>
+                    <el-col :sm="24" :md="12">
+                      <Cell label="时间" :value="info.os.time" border />
+                      <Cell label="在线" :value="`${info.bootTime}小时`" border />
+                      <Cell label="硬盘" :value="`${info.disk.used}GB/${info.disk.total}GB`" border />
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="10">
+                    <el-col :sm="12" :md="12" class="line">
+                      <el-col :sm="6" :md="6">
+                        下载<i class="el-icon-caret-bottom" />
+                      </el-col>
+                      <el-col :sm="18" :md="18" class="line-value">
+                        {{ info.net.in }}KB
+                      </el-col>
+                    </el-col>
+                    <el-col :sm="12" :md="12" class="line">
+                      <el-col :sm="6" :md="6">
+                        上传<i class="el-icon-caret-top" />
+                      </el-col>
+                      <el-col :sm="18" :md="18" class="line-value">
+                        {{ info.net.out }}KB
+                      </el-col>
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="10" class="monitor-progress">
+                    <el-col :sm="24" :md="4">
+                      CPU
+                    </el-col>
+                    <el-col :sm="24" :md="20">
+                      <el-progress :color="customColors" :text-inside="true" :stroke-width="24" :percentage="info.cpu.percent" />
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="10" class="monitor-progress">
+                    <el-col :sm="24" :md="4">
+                      RAM
+                    </el-col>
+                    <el-col :sm="24" :md="20">
+                      <el-progress :color="customColors" :text-inside="true" :stroke-width="24" :percentage="info.mem.percent" />
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="10" class="monitor-progress">
+                    <el-col :sm="24" :md="4">
+                      硬盘
+                    </el-col>
+                    <el-col :sm="24" :md="20">
+                      <el-progress :color="customColors" :text-inside="true" :stroke-width="24" :percentage="info.disk.percent" />
+                    </el-col>
+                  </el-row>
+                  <!-- <el-progress :color="$store.state.settings.theme" type="circle" :percentage="info.cpu.Percent" /> -->
                 </div>
-                <div class="monitor-footer">
+                <!-- <div class="monitor-footer">
+
                   <Cell label="CPU主频" :value="info.cpu.cpuInfo[0].modelName.split('@ ')[1]" border />
                   <Cell label="核心数" :value="`${info.cpu.cpuInfo[0].cores}`" />
-                </div>
-              </div>
-            </el-card>
-          </el-col>
-          <el-col :sm="24" :md="8">
-            <el-card v-if="info.mem" class="box-card">
-              <div slot="header" class="clearfix">
-                <span>内存使用率</span>
-              </div>
-              <div class="monitor">
-                <div class="monitor-header">
-                  <el-progress :color="$store.state.settings.theme" type="circle" :percentage="info.mem.usage" />
-                </div>
-                <div class="monitor-footer">
-                  <Cell label="总内存" :value="info.mem.total+'G'" border />
-                  <Cell label="已用内存" :value="info.mem.used+'G'" />
-                </div>
-              </div>
-            </el-card>
-          </el-col>
-          <el-col :sm="24" :md="8">
-            <el-card v-if="info.disk" class="box-card">
-              <div slot="header" class="clearfix">
-                <span>磁盘信息</span>
-              </div>
-              <div class="monitor">
-                <div class="monitor-header">
-                  <el-progress :color="$store.state.settings.theme" type="circle" :percentage=" Number(( (info.disk.total-info.disk.free) / info.disk.total * 100).toFixed(2))" />
-                </div>
-                <div class="monitor-footer">
-                  <Cell label="总磁盘" :value="info.disk.total+'G'" border />
-                  <Cell label="已用磁盘" :value="info.disk.total-info.disk.free+'G'" />
-                </div>
+                </div> -->
               </div>
             </el-card>
           </el-col>
-        </el-row>
-
-        <el-card v-if="info.os" class="box-card">
-          <div slot="header" class="clearfix">
-            <span>go运行环境</span>
-          </div>
-          <div class="monitor">
-            <Cell label="GO 版本" :value="info.os.version" border />
-            <Cell label="Goroutine" :value="`${info.os.numGoroutine}`" border />
-            <Cell label="项目地址" :value="info.os.projectDir" />
-          </div>
-        </el-card>
-
-        <el-card v-if="info.os" class="box-card">
-          <div slot="header" class="clearfix">
-            <span>服务器信息</span>
-          </div>
-          <div class="monitor">
-            <Cell label="主机名称" :value="info.os.hostName" border />
-            <Cell label="操作系统" :value="info.os.goOs" border />
-            <Cell label="服务器IP" :value="info.os.ip" border />
-            <Cell label="系统架构" :value="info.os.arch" border />
-            <Cell label="CPU" :value="info.cpu.cpuInfo[0].modelName" border />
-            <Cell label="当前时间" :value="info.os.time" />
-          </div>
-        </el-card>
 
-        <el-card>
-          <div slot="header">
-            <span>磁盘状态</span>
-          </div>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%;">
-              <thead>
-                <tr>
-                  <th class="is-leaf"><div class="cell">盘符路径</div></th>
-                  <th class="is-leaf"><div class="cell">文件系统</div></th>
-                  <th class="is-leaf"><div class="cell">总大小</div></th>
+          <!-- <el-card v-if="info.os" class="box-card">
+            <div slot="header" class="clearfix">
+              <span>go运行环境</span>
+            </div>
+            <div class="monitor">
+              <Cell label="GO 版本" :value="info.os.version" border />
+              <Cell label="Goroutine" :value="`${info.os.numGoroutine}`" border />
+              <Cell label="项目地址" :value="info.os.projectDir" />
+            </div>
+          </el-card> -->
 
-                  <th class="is-leaf"><div class="cell">可用大小</div></th>
-                  <th class="is-leaf"><div class="cell">已用大小</div></th>
-                  <th class="is-leaf"><div class="cell">已用百分比</div></th>
-                </tr>
-              </thead>
-              <tbody v-if="info.diskList">
-                <tr v-for="(forList,index) in info.diskList" :key="index">
-                  <td><div class="cell">{{ forList.path }}</div></td>
-                  <td><div class="cell">{{ forList.fstype }}</div></td>
-                  <td><div class="cell">{{ forList.total }}M</div></td>
-                  <td><div class="cell">{{ forList.free }}M</div></td>
-                  <td><div class="cell">{{ forList.used }}M</div></td>
-                  <td><div class="cell" :class="{'text-danger': forList.usedPercent > 80}">{{ forList.usedPercent }}%</div></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </el-card>
+          <el-card v-if="info.os" class="box-card">
+            <div slot="header" class="clearfix">
+              <span>服务器信息</span>
+            </div>
+            <div class="monitor">
+              <Cell label="主机名称" :value="info.os.hostName" border />
+              <Cell label="操作系统" :value="info.os.goOs" border />
+              <Cell label="服务器IP" :value="info.os.ip" border />
+              <Cell label="系统架构" :value="info.os.arch" border />
+              <Cell label="CPU" :value="info.cpu.cpuInfo[0].modelName" border />
+              <Cell label="当前时间" :value="info.os.time" />
+            </div>
+          </el-card>
 
-      </template>
+        </el-row></template>
     </BasicLayout>
   </div>
 </template>
 
 <script>
 import Cell from '@/components/Cell/index'
-import { getServer } from '@/api/monitor/server'
+import {
+  getServer
+} from '@/api/monitor/server'
 export default {
   name: 'Monitor',
   components: {
@@ -124,11 +129,21 @@ export default {
   },
   data() {
     return {
-      info: {}
+      info: {},
+      customColors: [
+        { color: '#13ce66', percentage: 20 },
+        { color: '#1890ff', percentage: 40 },
+        { color: '#e6a23c', percentage: 60 },
+        { color: '#1989fa', percentage: 80 },
+        { color: '#F56C6C', percentage: 100 }
+      ]
     }
   },
   created() {
     this.getServerInfo()
+    setInterval(() => {
+      this.getServerInfo()
+    }, 5000)
   },
   methods: {
     getServerInfo() {
@@ -143,14 +158,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .monitor{
-    .monitor-header{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+.line{
+  line-height: 49px;
+  font-size: 14px ;
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+  .line-value{
+    text-align: right;
+    color: #969799;
+  }
+}
+
+.monitor {
+  .monitor-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
-  .el-card__body{
-    padding: 20px 20px 0 20px!important;
+  .monitor-progress{
+    padding-top: 15px;
   }
+}
+
 </style>

vue.config.js

@@ -105,7 +105,7 @@ module.exports = {
             .plugin('ScriptExtHtmlWebpackPlugin')
             .after('html')
             .use('script-ext-html-webpack-plugin', [{
-            // `runtime` must same as runtimeChunk name. default is `runtime`
+              // `runtime` must same as runtimeChunk name. default is `runtime`
               inline: /runtime\..*\.js$/
             }])
             .end()