From 6da756c685a0dac1b05b2c788a5ef3c311bac4c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Sun, 17 Apr 2022 10:35:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=A0=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=99=A8=E7=9B=91=E6=8E=A7=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/monitor/server/index.vue | 326 +++++++++++++++++++++++++++++
 src/views/system/menu/index.vue    |   4 +-
 2 files changed, 329 insertions(+), 1 deletion(-)
 create mode 100644 src/views/monitor/server/index.vue

diff --git a/src/views/monitor/server/index.vue b/src/views/monitor/server/index.vue
new file mode 100644
index 0000000..a57c560
--- /dev/null
+++ b/src/views/monitor/server/index.vue
@@ -0,0 +1,326 @@
+<template>
+  <div class="app-container">
+    <el-row>
+      <el-col :lg="24" class="card-box">
+        <el-card class="box-card">
+          <template #header>
+            <div class="card-header clearfix">
+              <span style="font-weight: bold;color: #666;font-size: 15px">状态</span>
+            </div>
+          </template>
+          <div>
+            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
+              <div class="title">CPU使用率</div>
+              <el-tooltip placement="top-end">
+                <div class="content" v-if="server.cpu">
+                  <el-progress type="dashboard" :percentage="parseFloat(server.cpu.cpuRate)" />
+                </div>
+              </el-tooltip>
+              <div class="footer" v-if="server.sys">{{ server.sys.cpuNum }} 核心</div>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px" v-if="server.cpu">
+              <div class="title">内存使用率</div>
+              <el-tooltip placement="top-end">
+                <template #content>
+                  <div style="font-size: 12px;">
+                    <div style="padding: 3px;">
+                      总量：{{ server.cpu.totalRAM }}
+                    </div>
+                    <div style="padding: 3px">
+                      已使用：{{ server.cpu.usedRam }}
+                    </div>
+                    <div style="padding: 3px">
+                      空闲：{{ server.cpu.freeRam }}
+                    </div>
+                  </div>
+                </template>
+
+                <div class="content">
+                  <el-progress type="dashboard" :percentage="parseFloat( server.cpu.ramRate)" />
+                </div>
+              </el-tooltip>
+              <div class="footer"> {{server.cpu.usedRam}} / {{ server.cpu.totalRAM }}</div>
+            </el-col>
+            <!--
+            
+            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
+              <div class="title">磁盘使用率</div>
+              <div class="content">
+                <el-tooltip placement="top-end">
+                  <div slot="content" style="font-size: 12px;">
+                    <div style="padding: 3px">
+                      总量：{{ 1 }}
+                    </div>
+                    <div style="padding: 3px">
+                      空闲：{{ 1 }}
+                    </div>
+                  </div>
+                  <div class="content">
+                    <el-progress type="dashboard" :percentage="parseFloat(3)" />
+                  </div>
+                </el-tooltip>
+              </div>
+              <div class="footer">{{ 1 }} / {{ 100 }}</div>
+            </el-col> -->
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="24" class="card-box">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>服务器信息</span>
+            </div>
+          </template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%;" v-if="server.sys">
+              <tbody>
+                <tr>
+                  <td>
+                    <div class="cell">服务器名称</div>
+                  </td>
+                  <td>
+                    <div class="cell">{{ server.sys.computerName }}</div>
+                  </td>
+                  <td>
+                    <div class="cell">操作系统</div>
+                  </td>
+                  <td>
+                    <div class="cell">{{ server.sys.osName }}</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <div class="cell">服务器IP</div>
+                  </td>
+                  <td>
+                    <div class="cell">{{ server.sys.serverIP }}</div>
+                  </td>
+                  <td>
+                    <div class="cell">系统架构</div>
+                  </td>
+                  <td>
+                    <div class="cell">{{ server.sys.osArch }}</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <div class="cell">系统运行时长</div>
+                  </td>
+                  <td>
+                    <div class="cell">{{ server.sys.runTime }}</div>
+                  </td>
+                  <td>
+                    <div class="cell"></div>
+                  </td>
+                  <td>
+                    <div class="cell"></div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="24" class="card-box">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>磁盘状态</span>
+            </div>
+          </template>
+          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="sysFile in server.disk" :key="sysFile.diskName" style="margin-bottom: 10px">
+            <div class="title">{{sysFile.diskName }}盘使用率</div>
+            <div class="content">
+              <el-tooltip placement="top-end">
+                <template #content>
+                  <div style="font-size: 12px;">
+                    <div style="padding: 3px">
+                      总量：{{ sysFile.totalSize }}GB
+                    </div>
+                    <div style="padding: 3px">
+                      空闲：{{ sysFile.availableFreeSpace }}GB
+                    </div>
+                    <div style="padding: 3px">
+                      已用：{{ sysFile.used }}GB
+                    </div>
+                  </div>
+                </template>
+                <div class="content">
+                  <el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" />
+                </div>
+              </el-tooltip>
+            </div>
+            <div class="footer">{{ sysFile.availableFreeSpace }}GB可用，共{{ sysFile.totalSize }}GB</div>
+          </el-col>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="24" class="card-box">
+        <el-card>
+          <template #header>
+            <div>
+              <span>.NET Core信息</span>
+            </div>
+          </template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <table cellspacing="0" style="width: 100%;">
+              <tbody>
+                <tr>
+                  <td>
+                    <div class="cell">环境变量</div>
+                  </td>
+                  <td>
+                    <div class="cell" v-if="server.app">{{ server.app.name }}</div>
+                  </td>
+                  <td>
+                    <div class="cell">.Net版本</div>
+                  </td>
+                  <td>
+                    <div class="cell" v-if="server.app">{{ server.app.version }}</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <div class="cell">启动时间</div>
+                  </td>
+                  <td>
+                    <div class="cell" v-if="server.app">{{ server.app.startTime }}</div>
+                  </td>
+                  <td>
+                    <div class="cell">运行时长</div>
+                  </td>
+                  <td>
+                    <div class="cell" v-if="server.app">{{ server.app.runTime }}</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <div class="cell">占用内存</div>
+                  </td>
+                  <td>
+                    <div class="cell" v-if="server.app">{{ server.app.appRAM }}</div>
+                  </td>
+                  <td>
+                    <div class="cell">启动地址</div>
+                  </td>
+                  <td>
+                    <div class="cell" v-if="server.app">{{server.app.host}}</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <div class="cell">ContentRootPath</div>
+                  </td>
+                  <td>
+                    <div class="cell" v-if="server.app">{{ server.app.rootPath }}</div>
+                  </td>
+                  <td>
+                    <div class="cell">webPath</div>
+                  </td>
+                  <td>
+                    <div class="cell" v-if="server.app">{{ server.app.webRootPath }}</div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getServer } from '@/api/monitor/server'
+
+export default {
+  name: 'Server',
+  data() {
+    return {
+      // 加载层信息
+      loading: [],
+      // 服务器信息
+      server: [],
+      intervalId: null,
+    }
+  },
+  created() {
+    this.getList()
+    this.openLoading()
+    this.dataRefreh()
+  },
+  methods: {
+    /** 查询服务器信息 */
+    getList() {
+      getServer()
+        .then((response) => {
+          this.server = response.data
+          this.loading.close()
+        })
+        .catch((err) => {
+          this.loading.close()
+        })
+    },
+    // 打开加载层
+    openLoading() {
+      this.loading = this.$loading({
+        lock: true,
+        text: '拼命读取中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)',
+      })
+    },
+    dataRefreh() {
+      if (this.intervalId != null) {
+        return
+      }
+      this.intervalId = setInterval(() => {
+        this.getList()
+      }, 10000)
+    },
+    /**
+     * 停止定时器
+     */
+    clear() {
+      clearInterval(this.intervalId)
+      this.intervalId = null
+    },
+  },
+  destroyed() {
+    this.clear()
+  },
+}
+</script>
+<style scoped>
+table tr {
+  height: 30px;
+}
+.is-leaf {
+  text-align: center;
+  padding: 0 10px;
+}
+.title {
+  text-align: center;
+  font-size: 15px;
+  font-weight: 500;
+  color: #999;
+  margin-bottom: 16px;
+}
+.footer {
+  text-align: center;
+  font-size: 15px;
+  font-weight: 500;
+  color: #999;
+  margin-top: -5px;
+  margin-bottom: 10px;
+}
+.content {
+  text-align: center;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 4d65a13..3f60464 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -119,7 +119,9 @@
               <template #label>
                 <span>
                   <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
-                    <i class="question"></i>
+                    <el-icon :size="15">
+                      <questionFilled />
+                    </el-icon>
                   </el-tooltip>是否外链
                 </span>
               </template>