Jcdm042-Mes.git

懒羊羊

2024-01-31 e57a8990ae56f657a59c435a0613c5f7a8728003

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