Jcdm042-Mes.git

懒羊羊

2024-01-31 e57a8990ae56f657a59c435a0613c5f7a8728003

提交 \| 用户 \| 时间
e57a89	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>