From 3c4fee1db116c11d4f04727cfe076d7c94daeaf2 Mon Sep 17 00:00:00 2001 From: yanzhaofeige <yanzhaofeige@qq.com> Date: Mon, 30 Sep 2024 12:10:57 +0800 Subject: [PATCH] init --- cpzidc-ui/src/views/monitor/cache/index.vue | 148 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 148 insertions(+), 0 deletions(-) diff --git a/cpzidc-ui/src/views/monitor/cache/index.vue b/cpzidc-ui/src/views/monitor/cache/index.vue new file mode 100644 index 0000000..8d2f378 --- /dev/null +++ b/cpzidc-ui/src/views/monitor/cache/index.vue @@ -0,0 +1,148 @@ +<template> + <div class="app-container"> + <el-row> + <el-col :span="24" class="card-box"> + <el-card> + <div slot="header"><span><i class="el-icon-monitor"></i> 基本信息</span></div> + <div class="el-table el-table--enable-row-hover el-table--medium"> + <table cellspacing="0" style="width: 100%"> + <tbody> + <tr> + <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">运行模式</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" 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" v-if="cache.info">{{ cache.info.connected_clients }}</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="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" 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" 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" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td> + </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" 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" 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" 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" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td> + </tr> + </tbody> + </table> + </div> + </el-card> + </el-col> + + <el-col :span="12" class="card-box"> + <el-card> + <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 ref="commandstats" style="height: 420px" /> + </div> + </el-card> + </el-col> + + <el-col :span="12" class="card-box"> + <el-card> + <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 ref="usedmemory" style="height: 420px" /> + </div> + </el-card> + </el-col> + </el-row> + </div> +</template> + +<script> +import { getCache } from "@/api/monitor/cache"; +import * as echarts from "echarts"; + +export default { + name: "Cache", + data() { + return { + // 统计命令信息 + commandstats: null, + // 使用内存 + usedmemory: null, + // cache信息 + cache: [] + } + }, + created() { + this.getList(); + this.openLoading(); + }, + methods: { + /** 查缓存询信息 */ + getList() { + getCache().then((response) => { + this.cache = response.data; + this.$modal.closeLoading(); + + 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, + }, + 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: "内存消耗", + } + ] + } + ] + }); + window.addEventListener("resize", () => { + this.commandstats.resize(); + this.usedmemory.resize(); + }); + }); + }, + // 打开加载层 + openLoading() { + this.$modal.loading("正在加载缓存监控数据,请稍候!"); + } + } +}; +</script> -- Gitblit v1.9.3