YouShang/erp-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
NewYoung208 2025-03-04 16:58:16 +08:00
parent 193c256e71
commit 8d5ecc7ff4
3 changed files with 355 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ruoyi-ui/src/assets/styles/ruoyi.scss
View File

@ -194,8 +194,6 @@
} }
.card-box { .card-box {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 10px; margin-bottom: 10px;
} }

296
ruoyi-ui/src/views/monitor/cache/index.vue vendored
View File

@ -1,148 +1,148 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row> <el-row :gutter="10">
<el-col :span="24" class="card-box"> <el-col :span="24" class="card-box">
<el-card> <el-card>
<div slot="header"><span><i class="el-icon-monitor"></i> 基本信息</span></div> <div slot="header"><span><i class="el-icon-monitor"></i> 基本信息</span></div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%"> <table cellspacing="0" style="width: 100%">
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td> <td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td> <td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">端口</div></td> <td class="el-table__cell is-leaf"><div class="cell">端口</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td> <td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td> <td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td> <td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td> <td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td>
<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> <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>
<td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td> <td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td> <td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td> <td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td> <td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
<td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td> <td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td>
<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> <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>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12" class="card-box"> <el-col :span="12" class="card-box">
<el-card> <el-card>
<div slot="header"><span><i class="el-icon-pie-chart"></i> 命令统计</span></div> <div slot="header"><span><i class="el-icon-pie-chart"></i> 命令统计</span></div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<div ref="commandstats" style="height: 420px" /> <div ref="commandstats" style="height: 420px" />
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12" class="card-box"> <el-col :span="12" class="card-box">
<el-card> <el-card>
<div slot="header"><span><i class="el-icon-odometer"></i> 内存信息</span></div> <div slot="header"><span><i class="el-icon-odometer"></i> 内存信息</span></div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<div ref="usedmemory" style="height: 420px" /> <div ref="usedmemory" style="height: 420px" />
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import { getCache } from "@/api/monitor/cache"; import { getCache } from "@/api/monitor/cache";
import * as echarts from "echarts"; import * as echarts from "echarts";
export default { export default {
name: "Cache", name: "Cache",
data() { data() {
return { return {
// 统计命令信息 // 统计命令信息
commandstats: null, commandstats: null,
// 使用内存 // 使用内存
usedmemory: null, usedmemory: null,
// cache信息 // cache信息
cache: [] cache: []
} }
}, },
created() { created() {
this.getList(); this.getList();
this.openLoading(); this.openLoading();
}, },
methods: { methods: {
/** 查缓存询信息 */ /** 查缓存询信息 */
getList() { getList() {
getCache().then((response) => { getCache().then((response) => {
this.cache = response.data; this.cache = response.data;
this.$modal.closeLoading(); this.$modal.closeLoading();
this.commandstats = echarts.init(this.$refs.commandstats, "macarons"); this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
this.commandstats.setOption({ this.commandstats.setOption({
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{a} <br/>{b} : {c} ({d}%)",
}, },
series: [ series: [
{ {
name: "命令", name: "命令",
type: "pie", type: "pie",
roseType: "radius", roseType: "radius",
radius: [15, 95], radius: [15, 95],
center: ["50%", "38%"], center: ["50%", "38%"],
data: response.data.commandStats, data: response.data.commandStats,
animationEasing: "cubicInOut", animationEasing: "cubicInOut",
animationDuration: 1000, animationDuration: 1000,
} }
] ]
}); });
this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons"); this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
this.usedmemory.setOption({ this.usedmemory.setOption({
tooltip: { tooltip: {
formatter: "{b} <br/>{a} : " + this.cache.info.used_memory_human, formatter: "{b} <br/>{a} : " + this.cache.info.used_memory_human,
}, },
series: [ series: [
{ {
name: "峰值", name: "峰值",
type: "gauge", type: "gauge",
min: 0, min: 0,
max: 1000, max: 1000,
detail: { detail: {
formatter: this.cache.info.used_memory_human, formatter: this.cache.info.used_memory_human,
}, },
data: [ data: [
{ {
value: parseFloat(this.cache.info.used_memory_human), value: parseFloat(this.cache.info.used_memory_human),
name: "内存消耗", name: "内存消耗",
} }
] ]
} }
] ]
}); });
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
this.commandstats.resize(); this.commandstats.resize();
this.usedmemory.resize(); this.usedmemory.resize();
}); });
}); });
}, },
// 打开加载层 // 打开加载层
openLoading() { openLoading() {
this.$modal.loading("正在加载缓存监控数据，请稍候！"); this.$modal.loading("正在加载缓存监控数据，请稍候！");
} }
} }
}; };
</script> </script>

414
ruoyi-ui/src/views/monitor/server/index.vue
View File

@ -1,207 +1,207 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row> <el-row :gutter="10">
<el-col :span="12" class="card-box"> <el-col :span="12" class="card-box">
<el-card> <el-card>
<div slot="header"><span><i class="el-icon-cpu"></i> CPU</span></div> <div slot="header"><span><i class="el-icon-cpu"></i> CPU</span></div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%;"> <table cellspacing="0" style="width: 100%;">
<thead> <thead>
<tr> <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>
<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> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">核心数</div></td> <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> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td> <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> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td> <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> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td> <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> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12" class="card-box"> <el-col :span="12" class="card-box">
<el-card> <el-card>
<div slot="header"><span><i class="el-icon-tickets"></i> 内存</span></div> <div slot="header"><span><i class="el-icon-tickets"></i> 内存</span></div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%;"> <table cellspacing="0" style="width: 100%;">
<thead> <thead>
<tr> <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>
<th class="el-table__cell is-leaf"><div class="cell">内存</div></th> <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
<th class="el-table__cell is-leaf"><div class="cell">JVM</div></th> <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">总内存</div></td> <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.mem">{{ server.mem.total }}G</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td> <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.mem">{{ server.mem.used}}G</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td> <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.mem">{{ server.mem.free }}G</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">使用率</div></td> <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.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td> <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>
<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> <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>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="24" class="card-box"> <el-col :span="24" class="card-box">
<el-card> <el-card>
<div slot="header"> <div slot="header">
<span><i class="el-icon-monitor"></i> 服务器信息</span> <span><i class="el-icon-monitor"></i> 服务器信息</span>
</div> </div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%;"> <table cellspacing="0" style="width: 100%;">
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">服务器名称</div></td> <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.sys">{{ server.sys.computerName }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">操作系统</div></td> <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.sys">{{ server.sys.osName }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td> <td class="el-table__cell is-leaf"><div class="cell">服务器IP</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">系统架构</div></td> <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.sys">{{ server.sys.osArch }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="24" class="card-box"> <el-col :span="24" class="card-box">
<el-card> <el-card>
<div slot="header"> <div slot="header">
<span><i class="el-icon-coffee-cup"></i> Java虚拟机信息</span> <span><i class="el-icon-coffee-cup"></i> Java虚拟机信息</span>
</div> </div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%;table-layout:fixed;"> <table cellspacing="0" style="width: 100%;table-layout:fixed;">
<tbody> <tbody>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td> <td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td> <td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
</tr> </tr>
<tr> <tr>
<td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td> <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.jvm">{{ server.jvm.startTime }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td> <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.jvm">{{ server.jvm.runTime }}</div></td> <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
</tr> </tr>
<tr> <tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td> <td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td>
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td> <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
</tr> </tr>
<tr> <tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td> <td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td>
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td> <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
</tr> </tr>
<tr> <tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td> <td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td>
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td> <td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="24" class="card-box"> <el-col :span="24" class="card-box">
<el-card> <el-card>
<div slot="header"> <div slot="header">
<span><i class="el-icon-receiving"></i> 磁盘状态</span> <span><i class="el-icon-receiving"></i> 磁盘状态</span>
</div> </div>
<div class="el-table el-table--enable-row-hover el-table--medium"> <div class="el-table el-table--enable-row-hover el-table--medium">
<table cellspacing="0" style="width: 100%;"> <table cellspacing="0" style="width: 100%;">
<thead> <thead>
<tr> <tr>
<th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th> <th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th>
<th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th> <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>
<th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th> <th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th>
<th class="el-table__cell is-leaf"><div class="cell">总大小</div></th> <th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>
<th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th> <th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>
<th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th> <th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>
<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> </tr>
</thead> </thead>
<tbody v-if="server.sysFiles"> <tbody v-if="server.sysFiles">
<tr v-for="(sysFile, index) in server.sysFiles" :key="index"> <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td> <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td> <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td> <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td> <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td> <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td> <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td> <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import { getServer } from "@/api/monitor/server"; import { getServer } from "@/api/monitor/server";
export default { export default {
name: "Server", name: "Server",
data() { data() {
return { return {
// 服务器信息 // 服务器信息
server: [] server: []
}; };
}, },
created() { created() {
this.getList(); this.getList();
this.openLoading(); this.openLoading();
}, },
methods: { methods: {
/** 查询服务器信息 */ /** 查询服务器信息 */
getList() { getList() {
getServer().then(response => { getServer().then(response => {
this.server = response.data; this.server = response.data;
this.$modal.closeLoading(); this.$modal.closeLoading();
}); });
}, },
// 打开加载层 // 打开加载层
openLoading() { openLoading() {
this.$modal.loading("正在加载服务监控数据，请稍候！"); this.$modal.loading("正在加载服务监控数据，请稍候！");
} }
} }
}; };
</script> </script>