feat: redis view

src/views/infra/redis/components/Memory.vue

@@ -11,7 +11,7 @@ import { propTypes } from '@/utils/propTypes'
 
 const props = defineProps({
   loading: Boolean,
-  cacheInfo: Object,
+  memoryHuman: String,
   width: propTypes.string.def('100%'),
   height: propTypes.string.def('300px')
 })
@@ -19,8 +19,6 @@ const props = defineProps({
 const chartRef = ref<HTMLDivElement | null>(null)
 const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
 
-const optionsData = ref<any>(props.cacheInfo)
-
 watch(
   () => props.loading,
   () => {
@@ -29,7 +27,7 @@ watch(
     }
     setOptions({
       tooltip: {
-        formatter: '{b} <br/>{a} : ' + optionsData.value.used_memory_human
+        formatter: '{b} <br/>{a} : ' + props.memoryHuman
       },
       series: [
         {
@@ -38,11 +36,11 @@ watch(
           min: 0,
           max: 100,
           detail: {
-            formatter: optionsData.value.used_memory_human
+            formatter: props.memoryHuman
           },
           data: [
             {
-              value: parseFloat(optionsData.value.used_memory_human),
+              value: parseFloat(props.memoryHuman as unknown as number),
               name: '内存消耗'
             }
           ]

src/views/infra/redis/index.vue

@@ -9,7 +9,7 @@
     />
     <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" />
+      <Memory class="md:w-1/2 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" :memoryHuman="memoryHuman" />
     </div>
   </div>
 </template>
@@ -27,10 +27,12 @@ const Memory = createAsyncComponent(() => import('./components/Memory.vue'))
 const loading = ref(true)
 const cacheInfo = ref<any>()
 const commandStats = ref<any[]>([])
+const memoryHuman = ref<any>()
 
 async function getList() {
   const res = await getCache()
   cacheInfo.value = res.info
+  memoryHuman.value = res.info.used_memory_human
   await res.commandStats.forEach((val) => {
     commandStats.value.push({ name: val.command, value: val.calls })
   })