Kaynağa Gözat

fix 修复 缓存监控图表 支持跟随屏幕大小自适应调整

疯狂的狮子Li 1 yıl önce
ebeveyn
işleme
d930b15104
1 değiştirilmiş dosya ile 50 ekleme ve 47 silme
  1. 50 47
      src/views/monitor/cache/index.vue

+ 50 - 47
src/views/monitor/cache/index.vue

@@ -134,56 +134,59 @@ const usedmemory = ref();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const getList = async () => {
-    proxy?.$modal.loading("正在加载缓存监控数据,请稍候!");
-    const res = await getCache();
-    proxy?.$modal.closeLoading();
-    cache.value = res.data;
-    const commandstatsIntance = echarts.init(commandstats.value, "macarons");
-    commandstatsIntance.setOption({
-        tooltip: {
-            trigger: "item",
-            formatter: "{a} <br/>{b} : {c} ({d}%)"
+  proxy?.$modal.loading("正在加载缓存监控数据,请稍候!");
+  const res = await getCache();
+  proxy?.$modal.closeLoading();
+  cache.value = res.data;
+  const commandstatsIntance = echarts.init(commandstats.value, "macarons");
+  commandstatsIntance.setOption({
+    tooltip: {
+      trigger: "item",
+      formatter: "{a} <br/>{b} : {c} ({d}%)"
+    },
+    series: [
+      {
+        name: "命令",
+        type: "pie",
+        roseType: "radius",
+        radius: [15, 95],
+        center: ["50%", "38%"],
+        data: res.data.commandStats,
+        animationEasing: "cubicInOut",
+        animationDuration: 1000
+      }
+    ]
+  });
+  const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
+  usedmemoryInstance.setOption({
+    tooltip: {
+      formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human
+    },
+    series: [
+      {
+        name: "峰值",
+        type: "gauge",
+        min: 0,
+        max: 1000,
+        detail: {
+          formatter: cache.value.info.used_memory_human
         },
-        series: [
-            {
-                name: "命令",
-                type: "pie",
-                roseType: "radius",
-                radius: [15, 95],
-                center: ["50%", "38%"],
-                data: res.data.commandStats,
-                animationEasing: "cubicInOut",
-                animationDuration: 1000
-            }
+        data: [
+          {
+            value: parseFloat(cache.value.info.used_memory_human),
+            name: "内存消耗"
+          }
         ]
-    });
-
-    const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
-    usedmemoryInstance.setOption({
-        tooltip: {
-            formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human
-        },
-        series: [
-            {
-                name: "峰值",
-                type: "gauge",
-                min: 0,
-                max: 1000,
-                detail: {
-                    formatter: cache.value.info.used_memory_human
-                },
-                data: [
-                    {
-                        value: parseFloat(cache.value.info.used_memory_human),
-                        name: "内存消耗"
-                    }
-                ]
-            }
-        ]
-    })
+      }
+    ]
+  })
+  window.addEventListener("resize",()=>{
+    commandstatsIntance.resize()
+    usedmemoryInstance.resize()
+  });
 }
 
 onMounted(() => {
-    getList();
+  getList();
 })
-</script>
+</script>