From ba6785931dd6e1784c349db157d8d9dae0cc408d Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Sun, 23 Mar 2025 13:30:40 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9=E4=B8=BAsetup?=
 =?UTF-8?q?=E5=BD=A2=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cache/components/command-chart.vue        | 113 ++++++-------
 .../monitor/cache/components/memory-chart.vue | 151 ++++++++----------
 2 files changed, 122 insertions(+), 142 deletions(-)

diff --git a/apps/web-antd/src/views/monitor/cache/components/command-chart.vue b/apps/web-antd/src/views/monitor/cache/components/command-chart.vue
index df17a1c3..a2ae46b4 100644
--- a/apps/web-antd/src/views/monitor/cache/components/command-chart.vue
+++ b/apps/web-antd/src/views/monitor/cache/components/command-chart.vue
@@ -1,72 +1,61 @@
-<script lang="ts">
-import type { PropType } from 'vue';
-
+<script setup lang="ts">
 import type { EchartsUIType } from '@vben/plugins/echarts';
 
-import { defineComponent, onActivated, onMounted, ref, watch } from 'vue';
+import { onActivated, onMounted, ref, watch } from 'vue';
 
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
-export default defineComponent({
-  components: { EchartsUI },
-  props: {
-    data: {
-      default: () => [],
-      type: Array as PropType<{ name: string; value: string }[]>,
-    },
-  },
-  setup(props, { expose }) {
-    expose({});
+interface Props {
+  data?: { name: string; value: string }[];
+}
 
-    const chartRef = ref<EchartsUIType>();
-    const { renderEcharts, resize } = useEcharts(chartRef);
-
-    watch(
-      () => props.data,
-      () => {
-        if (!chartRef.value) return;
-        setEchartsOption(props.data);
-      },
-      { immediate: true },
-    );
-
-    onMounted(() => {
-      setEchartsOption(props.data);
-    });
-    /**
-     * 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
-     * 该饼图组件需要关闭animation
-     */
-    onActivated(() => resize(false));
-
-    type EChartsOption = Parameters<typeof renderEcharts>['0'];
-    function setEchartsOption(data: any[]) {
-      const option: EChartsOption = {
-        series: [
-          {
-            animationDuration: 1000,
-            animationEasing: 'cubicInOut',
-            center: ['50%', '50%'],
-            data,
-            name: '命令',
-            radius: [15, 95],
-            roseType: 'radius',
-            type: 'pie',
-          },
-        ],
-        tooltip: {
-          formatter: '{a} <br/>{b} : {c} ({d}%)',
-          trigger: 'item',
-        },
-      };
-      renderEcharts(option);
-    }
-
-    return {
-      chartRef,
-    };
-  },
+const props = withDefaults(defineProps<Props>(), {
+  data: () => [],
 });
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts, resize } = useEcharts(chartRef);
+
+watch(
+  () => props.data,
+  () => {
+    if (!chartRef.value) return;
+    setEchartsOption(props.data);
+  },
+  { immediate: true },
+);
+
+onMounted(() => {
+  setEchartsOption(props.data);
+});
+/**
+ * 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
+ * 该饼图组件需要关闭animation
+ */
+onActivated(() => resize(false));
+
+type EChartsOption = Parameters<typeof renderEcharts>['0'];
+function setEchartsOption(data: any[]) {
+  const option: EChartsOption = {
+    series: [
+      {
+        animationDuration: 1000,
+        animationEasing: 'cubicInOut',
+        center: ['50%', '50%'],
+        data,
+        name: '命令',
+        radius: [15, 95],
+        roseType: 'radius',
+        type: 'pie',
+      },
+    ],
+    tooltip: {
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
+      trigger: 'item',
+    },
+  };
+  renderEcharts(option);
+}
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/monitor/cache/components/memory-chart.vue b/apps/web-antd/src/views/monitor/cache/components/memory-chart.vue
index 4f18a6c5..b9582be4 100644
--- a/apps/web-antd/src/views/monitor/cache/components/memory-chart.vue
+++ b/apps/web-antd/src/views/monitor/cache/components/memory-chart.vue
@@ -1,96 +1,87 @@
-<script lang="ts">
+<script setup lang="ts">
 import type { EchartsUIType } from '@vben/plugins/echarts';
 
-import { defineComponent, onActivated, onMounted, ref, watch } from 'vue';
+import { onActivated, onMounted, ref, watch } from 'vue';
 
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
-export default defineComponent({
-  components: { EchartsUI },
-  props: {
-    data: {
-      default: '0',
-      type: String,
-    },
+interface Props {
+  data?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: '0',
+});
+
+const memoryHtmlRef = ref<EchartsUIType>();
+const { renderEcharts, resize } = useEcharts(memoryHtmlRef);
+
+watch(
+  () => props.data,
+  () => {
+    if (!memoryHtmlRef.value) return;
+    setEchartsOption(props.data);
   },
-  setup(props, { expose }) {
-    expose({});
+  { immediate: true },
+);
 
-    const memoryHtmlRef = ref<EchartsUIType>();
-    const { renderEcharts, resize } = useEcharts(memoryHtmlRef);
+onMounted(() => {
+  setEchartsOption(props.data);
+});
+// 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
+onActivated(resize);
 
-    watch(
-      () => props.data,
-      () => {
-        if (!memoryHtmlRef.value) return;
-        setEchartsOption(props.data);
-      },
-      { immediate: true },
-    );
+/**
+ * 获取最近的十的幂次
+ * 该函数用于寻找大于给定数字num的最近的10的幂次
+ * 主要解决的问题是确定一个数附近较大的十的幂次，这在某些算法中很有用
+ *
+ * @param num {number} 输入的数字，用于寻找最近的十的幂次
+ */
+function getNearestPowerOfTen(num: number) {
+  let power = 10;
+  while (power <= num) {
+    power *= 10;
+  }
+  return power;
+}
 
-    onMounted(() => {
-      setEchartsOption(props.data);
-    });
-    // 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
-    onActivated(resize);
-
-    /**
-     * 获取最近的十的幂次
-     * 该函数用于寻找大于给定数字num的最近的10的幂次
-     * 主要解决的问题是确定一个数附近较大的十的幂次，这在某些算法中很有用
-     *
-     * @param num {number} 输入的数字，用于寻找最近的十的幂次
-     */
-    function getNearestPowerOfTen(num: number) {
-      let power = 10;
-      while (power <= num) {
-        power *= 10;
-      }
-      return power;
-    }
-
-    type EChartsOption = Parameters<typeof renderEcharts>['0'];
-    function setEchartsOption(value: string) {
-      // x10
-      const formattedValue = Math.floor(Number.parseFloat(value));
-      // 最大值 10以内取10  100以内取100 以此类推
-      const max = getNearestPowerOfTen(formattedValue);
-      const options: EChartsOption = {
-        series: [
+type EChartsOption = Parameters<typeof renderEcharts>['0'];
+function setEchartsOption(value: string) {
+  // x10
+  const formattedValue = Math.floor(Number.parseFloat(value));
+  // 最大值 10以内取10  100以内取100 以此类推
+  const max = getNearestPowerOfTen(formattedValue);
+  const options: EChartsOption = {
+    series: [
+      {
+        animation: true,
+        animationDuration: 1000,
+        data: [
           {
-            animation: true,
-            animationDuration: 1000,
-            data: [
-              {
-                name: '内存消耗',
-                value: Number.parseFloat(value),
-              },
-            ],
-            detail: {
-              formatter: `${value}M`,
-              valueAnimation: true,
-            },
-            max,
-            min: 0,
-            name: '峰值',
-            progress: {
-              show: true,
-            },
-            type: 'gauge',
+            name: '内存消耗',
+            value: Number.parseFloat(value),
           },
         ],
-        tooltip: {
-          formatter: `{b} <br/>{a} : ${value}M`,
+        detail: {
+          formatter: `${value}M`,
+          valueAnimation: true,
         },
-      };
-      renderEcharts(options);
-    }
-
-    return {
-      memoryHtmlRef,
-    };
-  },
-});
+        max,
+        min: 0,
+        name: '峰值',
+        progress: {
+          show: true,
+        },
+        type: 'gauge',
+      },
+    ],
+    tooltip: {
+      formatter: `{b} <br/>{a} : ${value}M`,
+    },
+  };
+  renderEcharts(options);
+}
 </script>
 
 <template>