欧阳子桐 / RuoYi · 提交

转到一个项目

作者 NewYoung208
提交 8d5ecc7ff4f57c491c4b6796d9c5c31391f30bec 1 个父辈 193c256e

优化服务监控和缓存监控页面,页边距保持一致

内嵌 并排对比
正在显示 3 个修改的文件 包含 355 行增加 和 357 行删除
@@ -194,8 +194,6 @@ @@ -194,8 +194,6 @@
194 } 194 }
195 195
196 .card-box { 196 .card-box {
197 - padding-right: 15px;  
198 - padding-left: 15px;  
199 margin-bottom: 10px; 197 margin-bottom: 10px;
200 } 198 }
201 199
1 -<template>  
2 - <div class="app-container">  
3 - <el-row>  
4 - <el-col :span="24" class="card-box">  
5 - <el-card>  
6 - <div slot="header"><span><i class="el-icon-monitor"></i> 基本信息</span></div>  
7 - <div class="el-table el-table--enable-row-hover el-table--medium">  
8 - <table cellspacing="0" style="width: 100%">  
9 - <tbody>  
10 - <tr>  
11 - <td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td>  
12 - <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>  
13 - <td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td>  
14 - <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>  
15 - <td class="el-table__cell is-leaf"><div class="cell">端口</div></td>  
16 - <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>  
17 - <td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td>  
18 - <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>  
19 - </tr>  
20 - <tr>  
21 - <td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td>  
22 - <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>  
23 - <td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td>  
24 - <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>  
25 - <td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td>  
26 - <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>  
27 - <td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td>  
28 - <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>  
29 - </tr>  
30 - <tr>  
31 - <td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td>  
32 - <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>  
33 - <td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td>  
34 - <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>  
35 - <td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td>  
36 - <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>  
37 - <td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td>  
38 - <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>  
39 - </tr>  
40 - </tbody>  
41 - </table>  
42 - </div>  
43 - </el-card>  
44 - </el-col>  
45 -  
46 - <el-col :span="12" class="card-box">  
47 - <el-card>  
48 - <div slot="header"><span><i class="el-icon-pie-chart"></i> 命令统计</span></div>  
49 - <div class="el-table el-table--enable-row-hover el-table--medium">  
50 - <div ref="commandstats" style="height: 420px" />  
51 - </div>  
52 - </el-card>  
53 - </el-col>  
54 -  
55 - <el-col :span="12" class="card-box">  
56 - <el-card>  
57 - <div slot="header"><span><i class="el-icon-odometer"></i> 内存信息</span></div>  
58 - <div class="el-table el-table--enable-row-hover el-table--medium">  
59 - <div ref="usedmemory" style="height: 420px" />  
60 - </div>  
61 - </el-card>  
62 - </el-col>  
63 - </el-row>  
64 - </div>  
65 -</template>  
66 -  
67 -<script>  
68 -import { getCache } from "@/api/monitor/cache";  
69 -import * as echarts from "echarts";  
70 -  
71 -export default {  
72 - name: "Cache",  
73 - data() {  
74 - return {  
75 - // 统计命令信息  
76 - commandstats: null,  
77 - // 使用内存  
78 - usedmemory: null,  
79 - // cache信息  
80 - cache: []  
81 - }  
82 - },  
83 - created() {  
84 - this.getList();  
85 - this.openLoading();  
86 - },  
87 - methods: {  
88 - /** 查缓存询信息 */  
89 - getList() {  
90 - getCache().then((response) => {  
91 - this.cache = response.data;  
92 - this.$modal.closeLoading();  
93 -  
94 - this.commandstats = echarts.init(this.$refs.commandstats, "macarons");  
95 - this.commandstats.setOption({  
96 - tooltip: {  
97 - trigger: "item",  
98 - formatter: "{a} <br/>{b} : {c} ({d}%)",  
99 - },  
100 - series: [  
101 - {  
102 - name: "命令",  
103 - type: "pie",  
104 - roseType: "radius",  
105 - radius: [15, 95],  
106 - center: ["50%", "38%"],  
107 - data: response.data.commandStats,  
108 - animationEasing: "cubicInOut",  
109 - animationDuration: 1000,  
110 - }  
111 - ]  
112 - });  
113 - this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");  
114 - this.usedmemory.setOption({  
115 - tooltip: {  
116 - formatter: "{b} <br/>{a} : " + this.cache.info.used_memory_human,  
117 - },  
118 - series: [  
119 - {  
120 - name: "峰值",  
121 - type: "gauge",  
122 - min: 0,  
123 - max: 1000,  
124 - detail: {  
125 - formatter: this.cache.info.used_memory_human,  
126 - },  
127 - data: [  
128 - {  
129 - value: parseFloat(this.cache.info.used_memory_human),  
130 - name: "内存消耗",  
131 - }  
132 - ]  
133 - }  
134 - ]  
135 - });  
136 - window.addEventListener("resize", () => {  
137 - this.commandstats.resize();  
138 - this.usedmemory.resize();  
139 - });  
140 - });  
141 - },  
142 - // 打开加载层  
143 - openLoading() {  
144 - this.$modal.loading("正在加载缓存监控数据，请稍候！");  
145 - }  
146 - }  
147 -};  
148 -</script> 1 +<template>
  2 + <div class="app-container">
  3 + <el-row :gutter="10">
  4 + <el-col :span="24" class="card-box">
  5 + <el-card>
  6 + <div slot="header"><span><i class="el-icon-monitor"></i> 基本信息</span></div>
  7 + <div class="el-table el-table--enable-row-hover el-table--medium">
  8 + <table cellspacing="0" style="width: 100%">
  9 + <tbody>
  10 + <tr>
  11 + <td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td>
  12 + <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
  13 + <td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td>
  14 + <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
  15 + <td class="el-table__cell is-leaf"><div class="cell">端口</div></td>
  16 + <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
  17 + <td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td>
  18 + <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
  19 + </tr>
  20 + <tr>
  21 + <td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td>
  22 + <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
  23 + <td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td>
  24 + <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
  25 + <td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td>
  26 + <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
  27 + <td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td>
  28 + <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
  29 + </tr>
  30 + <tr>
  31 + <td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td>
  32 + <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
  33 + <td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td>
  34 + <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
  35 + <td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td>
  36 + <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
  37 + <td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td>
  38 + <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>
  39 + </tr>
  40 + </tbody>
  41 + </table>
  42 + </div>
  43 + </el-card>
  44 + </el-col>
  45 +
  46 + <el-col :span="12" class="card-box">
  47 + <el-card>
  48 + <div slot="header"><span><i class="el-icon-pie-chart"></i> 命令统计</span></div>
  49 + <div class="el-table el-table--enable-row-hover el-table--medium">
  50 + <div ref="commandstats" style="height: 420px" />
  51 + </div>
  52 + </el-card>
  53 + </el-col>
  54 +
  55 + <el-col :span="12" class="card-box">
  56 + <el-card>
  57 + <div slot="header"><span><i class="el-icon-odometer"></i> 内存信息</span></div>
  58 + <div class="el-table el-table--enable-row-hover el-table--medium">
  59 + <div ref="usedmemory" style="height: 420px" />
  60 + </div>
  61 + </el-card>
  62 + </el-col>
  63 + </el-row>
  64 + </div>
  65 +</template>
  66 +
  67 +<script>
  68 +import { getCache } from "@/api/monitor/cache";
  69 +import * as echarts from "echarts";
  70 +
  71 +export default {
  72 + name: "Cache",
  73 + data() {
  74 + return {
  75 + // 统计命令信息
  76 + commandstats: null,
  77 + // 使用内存
  78 + usedmemory: null,
  79 + // cache信息
  80 + cache: []
  81 + }
  82 + },
  83 + created() {
  84 + this.getList();
  85 + this.openLoading();
  86 + },
  87 + methods: {
  88 + /** 查缓存询信息 */
  89 + getList() {
  90 + getCache().then((response) => {
  91 + this.cache = response.data;
  92 + this.$modal.closeLoading();
  93 +
  94 + this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
  95 + this.commandstats.setOption({
  96 + tooltip: {
  97 + trigger: "item",
  98 + formatter: "{a} <br/>{b} : {c} ({d}%)",
  99 + },
  100 + series: [
  101 + {
  102 + name: "命令",
  103 + type: "pie",
  104 + roseType: "radius",
  105 + radius: [15, 95],
  106 + center: ["50%", "38%"],
  107 + data: response.data.commandStats,
  108 + animationEasing: "cubicInOut",
  109 + animationDuration: 1000,
  110 + }
  111 + ]
  112 + });
  113 + this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
  114 + this.usedmemory.setOption({
  115 + tooltip: {
  116 + formatter: "{b} <br/>{a} : " + this.cache.info.used_memory_human,
  117 + },
  118 + series: [
  119 + {
  120 + name: "峰值",
  121 + type: "gauge",
  122 + min: 0,
  123 + max: 1000,
  124 + detail: {
  125 + formatter: this.cache.info.used_memory_human,
  126 + },
  127 + data: [
  128 + {
  129 + value: parseFloat(this.cache.info.used_memory_human),
  130 + name: "内存消耗",
  131 + }
  132 + ]
  133 + }
  134 + ]
  135 + });
  136 + window.addEventListener("resize", () => {
  137 + this.commandstats.resize();
  138 + this.usedmemory.resize();
  139 + });
  140 + });
  141 + },
  142 + // 打开加载层
  143 + openLoading() {
  144 + this.$modal.loading("正在加载缓存监控数据，请稍候！");
  145 + }
  146 + }
  147 +};
  148 +</script>
1 -<template>  
2 - <div class="app-container">  
3 - <el-row>  
4 - <el-col :span="12" class="card-box">  
5 - <el-card>  
6 - <div slot="header"><span><i class="el-icon-cpu"></i> CPU</span></div>  
7 - <div class="el-table el-table--enable-row-hover el-table--medium">  
8 - <table cellspacing="0" style="width: 100%;">  
9 - <thead>  
10 - <tr>  
11 - <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>  
12 - <th class="el-table__cell is-leaf"><div class="cell">值</div></th>  
13 - </tr>  
14 - </thead>  
15 - <tbody>  
16 - <tr>  
17 - <td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>  
18 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>  
19 - </tr>  
20 - <tr>  
21 - <td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>  
22 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>  
23 - </tr>  
24 - <tr>  
25 - <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>  
26 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>  
27 - </tr>  
28 - <tr>  
29 - <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>  
30 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>  
31 - </tr>  
32 - </tbody>  
33 - </table>  
34 - </div>  
35 - </el-card>  
36 - </el-col>  
37 -  
38 - <el-col :span="12" class="card-box">  
39 - <el-card>  
40 - <div slot="header"><span><i class="el-icon-tickets"></i> 内存</span></div>  
41 - <div class="el-table el-table--enable-row-hover el-table--medium">  
42 - <table cellspacing="0" style="width: 100%;">  
43 - <thead>  
44 - <tr>  
45 - <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>  
46 - <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>  
47 - <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>  
48 - </tr>  
49 - </thead>  
50 - <tbody>  
51 - <tr>  
52 - <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>  
53 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>  
54 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>  
55 - </tr>  
56 - <tr>  
57 - <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>  
58 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>  
59 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>  
60 - </tr>  
61 - <tr>  
62 - <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>  
63 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>  
64 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>  
65 - </tr>  
66 - <tr>  
67 - <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>  
68 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>  
69 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>  
70 - </tr>  
71 - </tbody>  
72 - </table>  
73 - </div>  
74 - </el-card>  
75 - </el-col>  
76 -  
77 - <el-col :span="24" class="card-box">  
78 - <el-card>  
79 - <div slot="header">  
80 - <span><i class="el-icon-monitor"></i> 服务器信息</span>  
81 - </div>  
82 - <div class="el-table el-table--enable-row-hover el-table--medium">  
83 - <table cellspacing="0" style="width: 100%;">  
84 - <tbody>  
85 - <tr>  
86 - <td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td>  
87 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>  
88 - <td class="el-table__cell is-leaf"><div class="cell">操作系统</div></td>  
89 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>  
90 - </tr>  
91 - <tr>  
92 - <td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td>  
93 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>  
94 - <td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td>  
95 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>  
96 - </tr>  
97 - </tbody>  
98 - </table>  
99 - </div>  
100 - </el-card>  
101 - </el-col>  
102 -  
103 - <el-col :span="24" class="card-box">  
104 - <el-card>  
105 - <div slot="header">  
106 - <span><i class="el-icon-coffee-cup"></i> Java虚拟机信息</span>  
107 - </div>  
108 - <div class="el-table el-table--enable-row-hover el-table--medium">  
109 - <table cellspacing="0" style="width: 100%;table-layout:fixed;">  
110 - <tbody>  
111 - <tr>  
112 - <td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td>  
113 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>  
114 - <td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td>  
115 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>  
116 - </tr>  
117 - <tr>  
118 - <td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td>  
119 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>  
120 - <td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td>  
121 - <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>  
122 - </tr>  
123 - <tr>  
124 - <td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td>  
125 - <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>  
126 - </tr>  
127 - <tr>  
128 - <td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td>  
129 - <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>  
130 - </tr>  
131 - <tr>  
132 - <td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td>  
133 - <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td>  
134 - </tr>  
135 - </tbody>  
136 - </table>  
137 - </div>  
138 - </el-card>  
139 - </el-col>  
140 -  
141 - <el-col :span="24" class="card-box">  
142 - <el-card>  
143 - <div slot="header">  
144 - <span><i class="el-icon-receiving"></i> 磁盘状态</span>  
145 - </div>  
146 - <div class="el-table el-table--enable-row-hover el-table--medium">  
147 - <table cellspacing="0" style="width: 100%;">  
148 - <thead>  
149 - <tr>  
150 - <th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th>  
151 - <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>  
152 - <th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th>  
153 - <th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>  
154 - <th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>  
155 - <th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>  
156 - <th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th>  
157 - </tr>  
158 - </thead>  
159 - <tbody v-if="server.sysFiles">  
160 - <tr v-for="(sysFile, index) in server.sysFiles" :key="index">  
161 - <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>  
162 - <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>  
163 - <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>  
164 - <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>  
165 - <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>  
166 - <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>  
167 - <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>  
168 - </tr>  
169 - </tbody>  
170 - </table>  
171 - </div>  
172 - </el-card>  
173 - </el-col>  
174 - </el-row>  
175 - </div>  
176 -</template>  
177 -  
178 -<script>  
179 -import { getServer } from "@/api/monitor/server";  
180 -  
181 -export default {  
182 - name: "Server",  
183 - data() {  
184 - return {  
185 - // 服务器信息  
186 - server: []  
187 - };  
188 - },  
189 - created() {  
190 - this.getList();  
191 - this.openLoading();  
192 - },  
193 - methods: {  
194 - /** 查询服务器信息 */  
195 - getList() {  
196 - getServer().then(response => {  
197 - this.server = response.data;  
198 - this.$modal.closeLoading();  
199 - });  
200 - },  
201 - // 打开加载层  
202 - openLoading() {  
203 - this.$modal.loading("正在加载服务监控数据，请稍候！");  
204 - }  
205 - }  
206 -};  
207 -</script> 1 +<template>
  2 + <div class="app-container">
  3 + <el-row :gutter="10">
  4 + <el-col :span="12" class="card-box">
  5 + <el-card>
  6 + <div slot="header"><span><i class="el-icon-cpu"></i> CPU</span></div>
  7 + <div class="el-table el-table--enable-row-hover el-table--medium">
  8 + <table cellspacing="0" style="width: 100%;">
  9 + <thead>
  10 + <tr>
  11 + <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
  12 + <th class="el-table__cell is-leaf"><div class="cell">值</div></th>
  13 + </tr>
  14 + </thead>
  15 + <tbody>
  16 + <tr>
  17 + <td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>
  18 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
  19 + </tr>
  20 + <tr>
  21 + <td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>
  22 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
  23 + </tr>
  24 + <tr>
  25 + <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
  26 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
  27 + </tr>
  28 + <tr>
  29 + <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
  30 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
  31 + </tr>
  32 + </tbody>
  33 + </table>
  34 + </div>
  35 + </el-card>
  36 + </el-col>
  37 +
  38 + <el-col :span="12" class="card-box">
  39 + <el-card>
  40 + <div slot="header"><span><i class="el-icon-tickets"></i> 内存</span></div>
  41 + <div class="el-table el-table--enable-row-hover el-table--medium">
  42 + <table cellspacing="0" style="width: 100%;">
  43 + <thead>
  44 + <tr>
  45 + <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
  46 + <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
  47 + <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
  48 + </tr>
  49 + </thead>
  50 + <tbody>
  51 + <tr>
  52 + <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
  53 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
  54 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
  55 + </tr>
  56 + <tr>
  57 + <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
  58 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
  59 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
  60 + </tr>
  61 + <tr>
  62 + <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
  63 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
  64 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
  65 + </tr>
  66 + <tr>
  67 + <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
  68 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
  69 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
  70 + </tr>
  71 + </tbody>
  72 + </table>
  73 + </div>
  74 + </el-card>
  75 + </el-col>
  76 +
  77 + <el-col :span="24" class="card-box">
  78 + <el-card>
  79 + <div slot="header">
  80 + <span><i class="el-icon-monitor"></i> 服务器信息</span>
  81 + </div>
  82 + <div class="el-table el-table--enable-row-hover el-table--medium">
  83 + <table cellspacing="0" style="width: 100%;">
  84 + <tbody>
  85 + <tr>
  86 + <td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td>
  87 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
  88 + <td class="el-table__cell is-leaf"><div class="cell">操作系统</div></td>
  89 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
  90 + </tr>
  91 + <tr>
  92 + <td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td>
  93 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
  94 + <td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td>
  95 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
  96 + </tr>
  97 + </tbody>
  98 + </table>
  99 + </div>
  100 + </el-card>
  101 + </el-col>
  102 +
  103 + <el-col :span="24" class="card-box">
  104 + <el-card>
  105 + <div slot="header">
  106 + <span><i class="el-icon-coffee-cup"></i> Java虚拟机信息</span>
  107 + </div>
  108 + <div class="el-table el-table--enable-row-hover el-table--medium">
  109 + <table cellspacing="0" style="width: 100%;table-layout:fixed;">
  110 + <tbody>
  111 + <tr>
  112 + <td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td>
  113 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
  114 + <td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td>
  115 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
  116 + </tr>
  117 + <tr>
  118 + <td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td>
  119 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
  120 + <td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td>
  121 + <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
  122 + </tr>
  123 + <tr>
  124 + <td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td>
  125 + <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
  126 + </tr>
  127 + <tr>
  128 + <td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td>
  129 + <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
  130 + </tr>
  131 + <tr>
  132 + <td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td>
  133 + <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td>
  134 + </tr>
  135 + </tbody>
  136 + </table>
  137 + </div>
  138 + </el-card>
  139 + </el-col>
  140 +
  141 + <el-col :span="24" class="card-box">
  142 + <el-card>
  143 + <div slot="header">
  144 + <span><i class="el-icon-receiving"></i> 磁盘状态</span>
  145 + </div>
  146 + <div class="el-table el-table--enable-row-hover el-table--medium">
  147 + <table cellspacing="0" style="width: 100%;">
  148 + <thead>
  149 + <tr>
  150 + <th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th>
  151 + <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>
  152 + <th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th>
  153 + <th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>
  154 + <th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>
  155 + <th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>
  156 + <th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th>
  157 + </tr>
  158 + </thead>
  159 + <tbody v-if="server.sysFiles">
  160 + <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
  161 + <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
  162 + <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
  163 + <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
  164 + <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
  165 + <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
  166 + <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
  167 + <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
  168 + </tr>
  169 + </tbody>
  170 + </table>
  171 + </div>
  172 + </el-card>
  173 + </el-col>
  174 + </el-row>
  175 + </div>
  176 +</template>
  177 +
  178 +<script>
  179 +import { getServer } from "@/api/monitor/server";
  180 +
  181 +export default {
  182 + name: "Server",
  183 + data() {
  184 + return {
  185 + // 服务器信息
  186 + server: []
  187 + };
  188 + },
  189 + created() {
  190 + this.getList();
  191 + this.openLoading();
  192 + },
  193 + methods: {
  194 + /** 查询服务器信息 */
  195 + getList() {
  196 + getServer().then(response => {
  197 + this.server = response.data;
  198 + this.$modal.closeLoading();
  199 + });
  200 + },
  201 + // 打开加载层
  202 + openLoading() {
  203 + this.$modal.loading("正在加载服务监控数据，请稍候！");
  204 + }
  205 + }
  206 +};
  207 +</script>