From 4816bf8faa8bb42b2c92de571bbe46745abfe6fb Mon Sep 17 00:00:00 2001
From: xingyuv <xingyu4j@vip.qq.com>
Date: Thu, 23 Mar 2023 17:14:54 +0800
Subject: [PATCH] feat: redis erchat

---
 .../infra/redis/components/CommandStats.vue   | 51 +++++++++++++++++
 src/views/infra/redis/components/Memory.vue   | 55 +++++++++++++++++++
 src/views/infra/redis/index.vue               | 23 ++++++--
 3 files changed, 123 insertions(+), 6 deletions(-)
 create mode 100644 src/views/infra/redis/components/CommandStats.vue
 create mode 100644 src/views/infra/redis/components/Memory.vue

diff --git a/src/views/infra/redis/components/CommandStats.vue b/src/views/infra/redis/components/CommandStats.vue
new file mode 100644
index 00000000..6e8abbe3
--- /dev/null
+++ b/src/views/infra/redis/components/CommandStats.vue
@@ -0,0 +1,51 @@
+<template>
+  <Card title="命令统计" :loading="loading">
+    <div ref="chartRef" :style="{ width, height }"></div>
+  </Card>
+</template>
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Card } from 'ant-design-vue'
+import { useECharts } from '@/hooks/web/useECharts'
+import { propTypes } from '@/utils/propTypes'
+
+const props = defineProps({
+  loading: Boolean,
+  commandStats: propTypes.array,
+  width: propTypes.string.def('100%'),
+  height: propTypes.string.def('300px')
+})
+
+const chartRef = ref<HTMLDivElement | null>(null)
+const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+const optionsData = ref<any[]>(props.commandStats)
+
+watch(
+  () => props.loading,
+  () => {
+    if (props.loading) {
+      return
+    }
+    setOptions({
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b} : {c} ({d}%)'
+      },
+      series: [
+        {
+          name: '命令',
+          type: 'pie',
+          roseType: 'radius',
+          radius: [15, 95],
+          center: ['50%', '38%'],
+          data: optionsData.value,
+          animationEasing: 'cubicInOut',
+          animationDuration: 1000
+        }
+      ]
+    })
+  },
+  { immediate: true }
+)
+</script>
diff --git a/src/views/infra/redis/components/Memory.vue b/src/views/infra/redis/components/Memory.vue
new file mode 100644
index 00000000..b436a304
--- /dev/null
+++ b/src/views/infra/redis/components/Memory.vue
@@ -0,0 +1,55 @@
+<template>
+  <Card title="内存信息" :loading="loading">
+    <div ref="chartRef" :style="{ width, height }"></div>
+  </Card>
+</template>
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Card } from 'ant-design-vue'
+import { useECharts } from '@/hooks/web/useECharts'
+import { propTypes } from '@/utils/propTypes'
+
+const props = defineProps({
+  loading: Boolean,
+  cacheInfo: propTypes.object,
+  width: propTypes.string.def('100%'),
+  height: propTypes.string.def('300px')
+})
+
+const chartRef = ref<HTMLDivElement | null>(null)
+const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+const optionsData = ref<any>(props.cacheInfo)
+
+watch(
+  () => props.loading,
+  () => {
+    if (props.loading) {
+      return
+    }
+    setOptions({
+      tooltip: {
+        formatter: '{b} <br/>{a} : ' + optionsData.value.used_memory_human
+      },
+      series: [
+        {
+          name: '峰值',
+          type: 'gauge',
+          min: 0,
+          max: 1000,
+          detail: {
+            formatter: optionsData.value.used_memory_human
+          },
+          data: [
+            {
+              value: parseFloat(optionsData.value.used_memory_human),
+              name: '内存消耗'
+            }
+          ]
+        }
+      ]
+    })
+  },
+  { immediate: true }
+)
+</script>
diff --git a/src/views/infra/redis/index.vue b/src/views/infra/redis/index.vue
index 81a0e230..a7f2ae72 100644
--- a/src/views/infra/redis/index.vue
+++ b/src/views/infra/redis/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="p-4">
     <Description
       title="基础信息"
       :collapseOptions="{ canExpand: true, helpMessage: 'Redis 基本信息' }"
@@ -7,23 +7,34 @@
       :data="cacheInfo"
       :schema="baseInfoSchema"
     />
+    <div class="md:flex enter-y mt-4">
+      <CommandStats class="md:w-1/2 w-full" :loading="loading" :commandStats="commandStats" />
+      <Memory class="md:w-1/2 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" :cacheInfo="cacheInfo" />
+    </div>
   </div>
 </template>
 <script lang="ts" setup name="Redis">
+import { ref, onMounted } from 'vue'
 import { Description } from '@/components/Description'
 import { baseInfoSchema } from './redis.data'
 // import { getCache, getKeyDefineList, getKeyList, getKeyValue, deleteKey, deleteKeys } from '@/api/infra/redis'
 import { getCache } from '@/api/infra/redis'
-import { ref } from 'vue'
-import { onMounted } from 'vue'
+import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
 
-const cacheInfo = ref()
-const commandStats = ref()
+const CommandStats = createAsyncComponent(() => import('./components/CommandStats.vue'))
+const Memory = createAsyncComponent(() => import('./components/Memory.vue'))
+
+const loading = ref(true)
+const cacheInfo = ref<any>()
+const commandStats = ref<any[]>([])
 
 async function getList() {
   const res = await getCache()
   cacheInfo.value = res.info
-  commandStats.value = res.commandStats
+  await res.commandStats.forEach((val) => {
+    commandStats.value.push({ name: val.command, value: val.calls })
+  })
+  loading.value = false
 }
 
 onMounted(async () => {