From a4f002edc01dd2ea7e8358e42be3e54ce65bdad2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Sun, 17 Apr 2022 10:35:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=A0=E7=BC=93=E5=AD=98?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Echarts/Gauge.vue  |  99 ++++++++++++++++
 src/views/monitor/cache/index.vue | 185 ++++++++++++++++++++++++++++++
 2 files changed, 284 insertions(+)
 create mode 100644 src/components/Echarts/Gauge.vue
 create mode 100644 src/views/monitor/cache/index.vue

diff --git a/src/components/Echarts/Gauge.vue b/src/components/Echarts/Gauge.vue
new file mode 100644
index 0000000..76332d8
--- /dev/null
+++ b/src/components/Echarts/Gauge.vue
@@ -0,0 +1,99 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+// import("echarts/theme/macarons"); // echarts theme
+import { debounce } from "@/utils";
+
+export default {
+  props: {
+    name: {
+      type: String,
+      default: "业务指标",
+    },
+    min: {
+      type: [Object, Number],
+      default: 0,
+    },
+    max: {
+      type: [Object, Number],
+      default: 0,
+    },
+    data: {
+      type: Array,
+      default: () => [
+        {
+          value: "",
+          name: "占比",
+        },
+      ],
+    },
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "300px",
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }, 100);
+    window.addEventListener("resize", this.__resizeHandler);
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    window.removeEventListener("resize", this.__resizeHandler);
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+
+      this.chart.setOption({
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}",
+        },
+        // toolbox: {
+        //   feature: {
+        //     restore: {},
+        //     saveAsImage: {},
+        //   },
+        // },
+        series: [
+          {
+            name: this.name,
+            type: "gauge",
+            min: this.min,
+            max: this.max,
+            detail: {
+              formatter: "{value}%",
+            },
+            data: this.data,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/monitor/cache/index.vue b/src/views/monitor/cache/index.vue
new file mode 100644
index 0000000..7992969
--- /dev/null
+++ b/src/views/monitor/cache/index.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="app-container">
+    <el-row>
+      <el-col :lg="24" class="card-box">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>基本信息</span>
+            </div>
+          </template>
+          <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 :lg="8" class="card-box">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>命令统计</span>
+            </div>
+          </template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <div ref="commandstatsRef" style="height: 300px" />
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="8" class="card-box" v-if="cache.info">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>内存消耗</span>
+            </div>
+          </template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <gauge name="内存消耗" :max="100"
+              :data="[{ value: (parseFloat(cache.info.used_memory_human) / parseFloat(cache.info.total_system_memory_human)).toFixed(2), name: '内存消耗'}]" />
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :lg="8" class="card-box" v-if="cache.info">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>使用CPU</span>
+            </div>
+          </template>
+          <div class="el-table el-table--enable-row-hover el-table--medium">
+            <gauge name="CPU" :max="100" :data="[{ value: parseFloat(cache.info.used_cpu_user_children * 100).toFixed(0), name: 'CPU消耗'}]" />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup name="cache">
+import { getCache } from '@/api/monitor/cache'
+import * as echarts from 'echarts'
+import { getCurrentInstance } from 'vue-demi'
+// import Gauge from '@/components/Echarts/Gauge.vue'
+
+// 统计命令信息
+const commandstats = ref(null)
+// 使用内存
+const usedmemory = ref(null)
+// cache信息
+const cache = ref([])
+const commandstatsRef = ref(null)
+const { proxy } = getCurrentInstance()
+
+/** 查缓存询信息 */
+function getList() {
+  getCache().then((response) => {
+    cache.value = response.data
+    // this.$modal.closeLoading();
+
+    // 命令使用占比
+    commandstats.value = echarts.init(proxy.$refs.commandstatsRef)
+    commandstats.value.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,
+        },
+      ],
+    })
+  })
+}
+
+getList()
+</script>
\ No newline at end of file