From 48b122a348c1f993eba2ea059091d1e44fd9245e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=BA=A2=E4=B8=BD?= <1181930680@qq.com>
Date: Tue, 6 Aug 2024 08:36:42 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=93=E5=AD=98=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/monitor/cache/gaugeBox.vue | 50 ++++++++++++++++
 src/views/monitor/cache/index.vue    | 88 ++++++++++++++++++++++++++++
 src/views/monitor/cache/pieBox.vue   | 43 ++++++++++++++
 3 files changed, 181 insertions(+)
 create mode 100644 src/views/monitor/cache/gaugeBox.vue
 create mode 100644 src/views/monitor/cache/index.vue
 create mode 100644 src/views/monitor/cache/pieBox.vue

diff --git a/src/views/monitor/cache/gaugeBox.vue b/src/views/monitor/cache/gaugeBox.vue
new file mode 100644
index 0000000..d8e9be4
--- /dev/null
+++ b/src/views/monitor/cache/gaugeBox.vue
@@ -0,0 +1,50 @@
+<template>
+    <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts" setup>
+import { onMounted, PropType, ref, Ref } from 'vue';
+import { useECharts } from '@/hooks/web/useECharts';
+
+const props = defineProps({
+    width: {
+        type: String as PropType<string>,
+        default: '100%',
+    },
+    height: {
+        type: String as PropType<string>,
+        default: '300px',
+    },
+    data: {
+        type: String,
+        default: ''
+    }
+});
+const chartRef = ref<HTMLDivElement | null>(null);
+const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+const option = {
+    tooltip: {
+        formatter: '{a} <br/>{b} : {c}%',
+    },
+    series: [
+        {
+            name: 'Pressure',
+            type: 'gauge',
+            radius: '100%',
+            detail: {
+                formatter: '{value}'+'M',
+            },
+            data: [
+                {
+                    value: props.data,
+                    name: '内存消耗',
+                },
+            ],
+        }
+    ]
+};
+
+onMounted(() => {
+    setOptions(option as any);
+});
+</script>
\ No newline at end of file
diff --git a/src/views/monitor/cache/index.vue b/src/views/monitor/cache/index.vue
new file mode 100644
index 0000000..b9b3fe1
--- /dev/null
+++ b/src/views/monitor/cache/index.vue
@@ -0,0 +1,88 @@
+<template>
+    <PageWrapper>
+        <el-card :bordered="false" header="基本信息" style="margin-bottom:20px;">
+            <el-table :data="tabledata" :show-header="false">
+                <el-table-column width="150" align="center">Redis版本</el-table-column>
+                <el-table-column>{{ baseInfo.redis_version }}</el-table-column>
+                <el-table-column width="150" align="center">运行模式</el-table-column>
+                <el-table-column align="center">{{ baseInfo.redis_mode == 'standalone' ? '单机' : '集群' }}</el-table-column>
+                <el-table-column width="150" align="center">端口</el-table-column>
+                <el-table-column>{{ baseInfo.tcp_port }}</el-table-column>
+                <el-table-column width="150" align="center">客户端数</el-table-column>
+                <el-table-column align="center">{{ baseInfo.connected_clients }}</el-table-column>
+            </el-table>
+            <el-table :data="tabledata" :show-header="false">
+                <el-table-column width="150" align="center">运行时间(天)</el-table-column>
+                <el-table-column>{{ baseInfo.uptime_in_days }}</el-table-column>
+                <el-table-column width="150" align="center">使用内存</el-table-column>
+                <el-table-column align="center">{{ baseInfo.used_memory_human }}</el-table-column>
+                <el-table-column width="150" align="center">使用CUP</el-table-column>
+                <el-table-column>{{ baseInfo.used_cpu_user_children }}</el-table-column>
+                <el-table-column width="150" align="center">内存配置</el-table-column>
+                <el-table-column align="center">{{ baseInfo.maxmemory_human }}</el-table-column>
+            </el-table>
+            <el-table :data="tabledata" :show-header="false">
+                <el-table-column width="150" align="center">AOF是否开启</el-table-column>
+                <el-table-column>{{ baseInfo.aof_enabled == 0 ? '开启' : '关闭' }}</el-table-column>
+                <el-table-column width="150" align="center">RDB是否成功</el-table-column>
+                <el-table-column align="center">{{ baseInfo.aof_enabled == 'ok' ? '成功' : '失败' }}</el-table-column>
+                <el-table-column width="150" align="center">key数量</el-table-column>
+                <el-table-column>{{ baseInfo.dbSize }}</el-table-column>
+                <el-table-column width="150" align="center">网络入口/出口</el-table-column>
+                <el-table-column align="center">
+                    {{ baseInfo.instantaneous_input_kbps }}
+                    /
+                    {{ baseInfo.instantaneous_output_kbps }}</el-table-column>
+            </el-table>
+        </el-card>
+        <div class="cache-box">
+            <el-card :bordered="false" header="命令统计">
+                <pie-box :pieData="commandStats" v-if="commandStats.length > 0" />
+            </el-card>
+            <el-card :bordered="false" header="内存信息">
+                <gauge-box :data="gaugeValue" v-if="gaugeValue"/>
+            </el-card>
+        </div>
+    </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted} from 'vue';
+import { getCacheInfo } from '@/api/monitor/cache';
+import pieBox from './pieBox.vue';
+import gaugeBox from './gaugeBox.vue';
+const tabledata = ref([{}])
+const baseInfo = ref<any>({});
+const commandStats = ref([])
+const gaugeValue = ref('')
+const loadCacheInfo = async () => {
+    const result = await getCacheInfo();
+    commandStats.value = result.commandStats
+    baseInfo.value = result.info
+    baseInfo.value.dbSize = result.dbSize;
+    gaugeValue.value =  (result.info.used_memory / 1024 / 1024).toFixed(2);
+};
+
+onMounted(() => {
+    loadCacheInfo()
+})
+</script>
+<style lang="scss" scoped>
+.cache-box {
+    display: flex;
+
+    >.el-card {
+        flex: 1;
+
+        &:nth-child(2) {
+            margin: 0 15px;
+        }
+    }
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/monitor/cache/pieBox.vue b/src/views/monitor/cache/pieBox.vue
new file mode 100644
index 0000000..8ae2306
--- /dev/null
+++ b/src/views/monitor/cache/pieBox.vue
@@ -0,0 +1,43 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, PropType, ref, Ref } from 'vue';
+  import { useECharts } from '@/hooks/web/useECharts';
+
+  const props = defineProps({
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '300px',
+    },
+    pieData:{
+      type:Array,
+      default:[]
+    }
+  });
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  const option = {
+    tooltip: {
+			trigger: 'item'
+		},
+    series: [
+      {
+        type: 'pie',
+        data: props.pieData,
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+      },
+    ]
+  };
+
+  onMounted(() => {
+    setOptions(option as any);
+  });
+</script>