From 317ab351ce7523779f52229b398e36233a878d56 Mon Sep 17 00:00:00 2001
From: 疯狂的狮子Li <15040126243@163.com>
Date: 星期日, 25 十二月 2022 20:23:24 +0800
Subject: [PATCH] fix 修复 升级 echarts 导致缓存监控图表异常
---
ruoyi-ui/src/views/monitor/cache/index.vue | 292 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 146 insertions(+), 146 deletions(-)
diff --git a/ruoyi-ui/src/views/monitor/cache/index.vue b/ruoyi-ui/src/views/monitor/cache/index.vue
index cfef20d..53f6eee 100644
--- a/ruoyi-ui/src/views/monitor/cache/index.vue
+++ b/ruoyi-ui/src/views/monitor/cache/index.vue
@@ -1,146 +1,146 @@
-<template>
- <div class="app-container">
- <el-row>
- <el-col :span="24" class="card-box">
- <el-card>
- <div slot="header"><span>鍩烘湰淇℃伅</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>鍛戒护缁熻</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>鍐呭瓨淇℃伅</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 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: "鍐呭瓨娑堣��",
- }
- ]
- }
- ]
- });
- });
- },
- // 鎵撳紑鍔犺浇灞�
- openLoading() {
- this.$modal.loading("姝ｅ湪鍔犺浇缂撳瓨鐩戞帶鏁版嵁锛岃绋嶅�欙紒");
- }
- }
-};
-</script>
+<template>
+ <div class="app-container">
+ <el-row>
+ <el-col :span="24" class="card-box">
+ <el-card>
+ <div slot="header"><span>鍩烘湰淇℃伅</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>鍛戒护缁熻</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>鍐呭瓨淇℃伅</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: "鍐呭瓨娑堣��",
+ }
+ ]
+ }
+ ]
+ });
+ });
+ },
+ // 鎵撳紑鍔犺浇灞�
+ openLoading() {
+ this.$modal.loading("姝ｅ湪鍔犺浇缂撳瓨鐩戞帶鏁版嵁锛岃绋嶅�欙紒");
+ }
+ }
+};
+</script>
--
Gitblit v1.9.3