From 8e692a97b83e815bac380e4395c507361460c61d 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, 29 May 2022 14:18:50 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=85=B3=E9=97=AD=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E7=9B=91=E6=8E=A7=E9=A1=B5=E9=9D=A2=E5=90=8E=E8=BF=98?=
 =?UTF-8?q?=E4=BC=9A=E7=BB=A7=E7=BB=AD=E8=AF=B7=E6=B1=82=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/monitor/server/index.vue | 115 ++++++++++++-----------------
 1 file changed, 49 insertions(+), 66 deletions(-)

diff --git a/src/views/monitor/server/index.vue b/src/views/monitor/server/index.vue
index 8830b20..af8bee7 100644
--- a/src/views/monitor/server/index.vue
+++ b/src/views/monitor/server/index.vue
@@ -1,22 +1,21 @@
 <template>
   <div class="app-container">
     <el-row>
-      <el-col :lg="24" class="card-box">
+      <el-col :lg="24" class="card-box" v-if="server.cpu">
         <el-card class="box-card">
           <template #header>
             <span>状态</span>
           </template>
 
-          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="mr20">
             <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="content">
+              <el-progress type="dashboard" :percentage="parseFloat(server.cpu.cpuRate)" />
+            </div>
             <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" v-if="server.cpu">
+
+          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
             <div class="title">内存使用率</div>
             <el-tooltip placement="top-end">
               <template #content>
@@ -193,66 +192,50 @@
   </div>
 </template>
 
-<script>
+<script setup name="server">
 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()
-  },
+import { onBeforeRouteLeave } from 'vue-router'
+onBeforeRouteLeave((to) => {
+  clear()
+})
+// 服务器信息
+const server = ref([])
+const intervalId = ref(null)
+const { proxy } = getCurrentInstance()
+/** 查询服务器信息 */
+function getList() {
+  getServer()
+    .then((response) => {
+      server.value = response.data
+      proxy.$modal.closeLoading()
+    })
+    .catch((err) => {
+      proxy.$modal.closeLoading()
+    })
 }
+// 打开加载层
+function openLoading() {
+  proxy.$modal.loading('拼命读取中')
+}
+function dataRefreh() {
+  if (intervalId.value != null) {
+    return
+  }
+  intervalId.value = setInterval(() => {
+    getList()
+  }, 10000)
+}
+/**
+ * 停止定时器
+ */
+function clear() {
+  clearInterval(intervalId.value)
+  intervalId.value = null
+}
+
+getList()
+openLoading()
+dataRefreh()
 </script>
 <style scoped>
 table tr {