change

src/views/index.vue

@@ -1,21 +1,73 @@
 <template>
   <div>
-    <el-form ref="form" :model="form" label-width="80px" style="margin-left: 20%;margin-top: 20px;" @submit.native.prevent>
-      <el-form-item label="机号">
-        <el-input v-model="searchNum" style=" width: 50%;" placeholder="请输入内容" @keyup.enter.native="search" @clear="search" clearable> </el-input>
-        <el-button type="primary" icon="el-icon-search" @click="search"></el-button>
-      </el-form-item>
-      <span></span>
-    </el-form>
-    <el-row style="margin: 20px;">
-      <el-col :span="3" v-for="(items,indexs) in numList" :key="items.id" @click.native="showDrawer(items)">
-        <div shadow="hover" @click="showDrawer(items)" class="card">
-          <span style="font-size: 25px;display: block; color: wheat">机号</span>
-          <span class="span1" :style="{color: items.color1}">{{items.num}}</span>
-          <span style="color: wheat">状态：<span :style="{color: items.color2}">{{items.name}}</span></span>
-        </div>
+    <el-row>
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <el-form ref="form" :model="form" label-width="80px" style="margin-left: 20%;margin-top: 20px;" @submit.native.prevent>
+            <el-form-item label="机号">
+              <el-input v-model="searchNum" style=" width: 50%;" placeholder="请输入内容" @keyup.enter.native="search" @clear="search" clearable> </el-input>
+              <el-button type="primary" icon="el-icon-search" @click="search"></el-button>
+            </el-form-item>
+            <span></span>
+          </el-form>
+          <el-row style="margin: 20px;">
+            <el-col :span="4" v-for="(items,indexs) in numList" :key="items.id" @click.native="showDrawer(items)">
+              <div shadow="hover" @click="showDrawer(items)" class="card">
+                <span style="font-size: 25px;display: block; color: wheat">机号</span>
+                <span class="span1" :style="{color: items.color1}">{{items.num}}</span>
+                <span style="color: wheat">状态：<span :style="{color: items.color2}">{{items.name}}</span></span>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
       </el-col>
+    <el-col :span="12" class="card-box">
+    <el-row>
+      <el-card>
+        <div slot="header"><span>CPU</span></div>
+        <div class="el-table el-table--enable-row-hover el-table--medium">
+          <table cellspacing="0" style="width: 100%;">
+            <thead>
+            <tr>
+              <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
+              <th class="el-table__cell is-leaf"><div class="cell">值</div></th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+              <td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>
+              <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
+            </tr>
+            <tr>
+              <td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>
+              <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
+            </tr>
+            <tr>
+              <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
+              <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
+            </tr>
+            <tr>
+              <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
+              <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </el-card>
     </el-row>
+      <el-row>
+        <el-card>
+          <div slot="header">
+            <span>内存信息</span>
+          </div>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <div ref="usedmemory" style="height: 420px" />
+          </div>
+        </el-card>
+      </el-row>
+    </el-col>
+    </el-row>
+
 
     <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" center>
       <div>
@@ -123,8 +175,9 @@
 </template>
 
 <script>
-  import * as echarts from "echarts";
-  // import { getMotitorByNum } from '@/api/graph/monitor'
+  import echarts from "echarts";
+  import { getServer } from "@/api/monitor/server";
+  import { getCache } from "@/api/monitor/cache";
   export default {
     data() {
       return {
@@ -133,6 +186,11 @@
         name: '',
         direction: 'rtl',
         searchNum: '',
+        server: [],
+        // 使用内存
+        usedmemory: null,
+        // cache信息
+        cache: [],
         form: {
           number: '',
           name: '',
@@ -358,44 +416,64 @@
     },
     created() {
       this.search();
-      setTimeout(() => {
-        this.getChart()
-      }, 0);
+      this.getList();
+      this.getCache();
     },
     methods: {
-      getChart() {
-        //组件一加载就渲染折线图
-        //初始化
-        let myChart = echarts.init(document.getElementById("chart"));
-        //创建配置项
-        let option = {
-          title: {
-            text: '系统',
-            left: 'center',
-          },
-          tooltip: {
-            trigger: 'axis'
-          },
-          xAxis: {
-            type: "category",
-            data: ['2018', '2019', '2020',
-              '2021', '2022'
-            ],
-          },
-          yAxis: {
-            type: "value",
-          },
-          series: [
-            //data替换成后端的数据
-            {
-              data: [50, 300, 700, 40, 12],
-              type: "line",
+      getList() {
+        getServer().then(response => {
+          this.server = response.data;
+        });
+      },
+      /** 查缓存询信息 */
+      getCache() {
+        getCache().then((response) => {
+          this.cache = response.data;
+          this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
+          this.commandstats.setOption({
+            tooltip: {
+              trigger: "item",
+              formatter: "{a} <br/>{b} : {c} ({d}%)",
+            },
+            series: [
+              {
+                name: "命令",
+                type: "pie",
+                roseType: "radius",
+                radius: [15, 95],
+                center: ["50%", "38%"],
+                data: response.data.commandStats,
+                animationEasing: "cubicInOut",
+                animationDuration: 1000,
+              }
+            ]
+          });
+          this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
+          this.usedmemory.setOption({
+            tooltip: {
+              formatter: "{b} <br/>{a} : " + this.cache.info.used_memory_human,
             },
-          ],
-        };
-        // 设置配置项
-        myChart.setOption(option)
+            series: [
+              {
+                name: "峰值",
+                type: "gauge",
+                min: 0,
+                max: 1000,
+                detail: {
+                  formatter: this.cache.info.used_memory_human,
+                },
+                data: [
+                  {
+                    value: parseFloat(this.cache.info.used_memory_human),
+                    name: "内存消耗",
+                  }
+                ]
+              }
+            ]
+          });
+        });
       },
+
       getPopup(e) {
         this.dialogVisible = true
       },