Merge branch 'fix/edge-charts-edit' into 'main_dev'

fix: 修改边缘监控图标样式 See merge request yunteng/thingskit-front!1444

Merge branch 'fix/edge-charts-edit' into 'main_dev'
fix: 修改边缘监控图标样式 See merge request yunteng/thingskit-front!1444
xp.Huang
2 parents 1c039a32 4a8e124a
Showing 5 changed files with 265 additions and 59 deletions
src/assets/icons/cpu.svg
src/assets/icons/disk.svg
src/assets/icons/memory.svg
src/views/edge/instance/components/EdgeInstanceTabInfo/index.vue
src/views/edge/instance/components/EdgeMonitoring/index.vue
--- a/src/assets/icons/cpu.svg 0 → 100644
View file @0faa8e5
+++ b/src/assets/icons/cpu.svg 0 → 100644
View file @0faa8e5
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.933" viewBox="0 0 16 15.933"><defs><style>.a{fill:#343c4c;}</style></defs><path class="a" d="M345.333,337.067h-2.667a1.337,1.337,0,0,0-1.333,1.333v2.667a1.337,1.337,0,0,0,1.333,1.333h2.667a1.337,1.337,0,0,0,1.333-1.333V338.4A1.337,1.337,0,0,0,345.333,337.067Zm0,4h-2.667V338.4h2.667Z" transform="translate(-335.999 -331.8)"/><path class="a" d="M15.333,8.533a.667.667,0,1,0,0-1.333H14V5.867h1.333A.63.63,0,0,0,16,5.2a.63.63,0,0,0-.667-.667H14A2.7,2.7,0,0,0,11.333,2V.667A.667.667,0,1,0,10,.667V2H8.667V.667a.667.667,0,0,0-1.333,0V2H6V.667A.63.63,0,0,0,5.333,0a.668.668,0,0,0-.667.667V2A2.7,2.7,0,0,0,2,4.533H.667A.63.63,0,0,0,0,5.2a.63.63,0,0,0,.667.667H2V7.2H.667a.667.667,0,0,0,0,1.333H2V9.867H.667a.667.667,0,1,0,0,1.333H2v.133A2.675,2.675,0,0,0,4.667,14v1.267a.63.63,0,0,0,.667.667A.63.63,0,0,0,6,15.267V14H7.333v1.267a.667.667,0,1,0,1.333,0V14H10v1.267a.667.667,0,1,0,1.333,0V14A2.675,2.675,0,0,0,14,11.333V11.2h1.333a.667.667,0,0,0,0-1.333H14V8.533h1.333Zm-2.667,2.8a1.337,1.337,0,0,1-1.333,1.333H4.667a1.337,1.337,0,0,1-1.333-1.333V4.667A1.337,1.337,0,0,1,4.667,3.333h6.667a1.337,1.337,0,0,1,1.333,1.333v6.667Z"/></svg>
--- a/src/assets/icons/disk.svg 0 → 100644
View file @0faa8e5
+++ b/src/assets/icons/disk.svg 0 → 100644
View file @0faa8e5
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.873" viewBox="0 0 16 15.873"><defs><style>.a{fill:#343c4c;}</style></defs><g transform="translate(-75.041 -99.03)"><path class="a" d="M90.95,111.459l-1.7-11.191,0-.014a1.344,1.344,0,0,0-1.276-1.225H78.36a1.356,1.356,0,0,0-1.236,1.2l0,.011-2.049,11.425.011,0a2.32,2.32,0,0,0-.042.446v.384a2.4,2.4,0,0,0,2.4,2.4h11.2a2.4,2.4,0,0,0,2.4-2.4v-.384a2.4,2.4,0,0,0-.09-.658ZM78.292,100.645c.1-.389.256-.424.344-.434h9.108c.223,0,.3.335.317.416l1.38,9.1a2.292,2.292,0,0,0-1.065-.263H77.706a2.29,2.29,0,0,0-1.046.252ZM89.936,112.4a1.378,1.378,0,0,1-1.415,1.339H77.56a1.378,1.378,0,0,1-1.415-1.339v-.356a1.378,1.378,0,0,1,1.415-1.339H88.522a1.412,1.412,0,0,1,1.34.907l.066.418h.008v.369h0Z"/><path class="a" d="M160.413,229.5H158.5a.48.48,0,1,0,0,.96h1.916a.48.48,0,0,0,0-.96Zm1.964-3.83h5.032a1.864,1.864,0,0,0,1.391-.587,2.344,2.344,0,0,0,.522-1.826,2.536,2.536,0,0,0-1.747-1.987,2.511,2.511,0,0,0-2.416-2.261,2.382,2.382,0,0,0-1.789.835,1.835,1.835,0,0,0-1.685,1.245,2.49,2.49,0,0,0-1.953,2.063,1.87,1.87,0,0,0,.415,1.428A3.433,3.433,0,0,0,162.378,225.673Zm-1.514-2.45c.094-.792.66-1.029,1.454-1.287l.267-.089.054-.261a.852.852,0,0,1,.794-.719.616.616,0,0,1,.121.011l.291.048.167-.24a1.354,1.354,0,0,1,1.12-.617,1.509,1.509,0,0,1,1.414,1.559l0,.293.3.132c.7.31,1.293.614,1.352,1.244a1.34,1.34,0,0,1-.261,1.045.826.826,0,0,1-.652.267h-4.739a2.362,2.362,0,0,1-1.478-.708A.86.86,0,0,1,160.864,223.223Z" transform="translate(-81.382 -117.677)"/></g></svg>
--- a/src/assets/icons/memory.svg 0 → 100644
View file @0faa8e5
+++ b/src/assets/icons/memory.svg 0 → 100644
View file @0faa8e5
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:#343c4c;}</style></defs><g transform="translate(-562 -613)"><rect class="a" width="16" height="16" transform="translate(562 613)"/><g transform="translate(563.294 613)"><path class="b" d="M148.64,80.44H138.412a1.594,1.594,0,0,1-1.592-1.592V66.032a1.594,1.594,0,0,1,1.592-1.592h6.36a1.567,1.567,0,0,1,1.132.487l3.9,4.115a1.554,1.554,0,0,1,.428,1.073v8.733a1.594,1.594,0,0,1-1.592,1.592ZM138.412,65.714a.319.319,0,0,0-.318.318V78.848a.319.319,0,0,0,.318.318H148.64a.319.319,0,0,0,.318-.318V70.115a.285.285,0,0,0-.079-.2l-3.9-4.115a.287.287,0,0,0-.208-.089Z" transform="translate(-136.82 -64.44)"/><path class="b" d="M310.723,460.845h-6.046a.7.7,0,0,1-.7-.7v-5.04a.7.7,0,0,1,.7-.7h6.046a.7.7,0,0,1,.7.7v5.04a.7.7,0,0,1-.7.7Zm-5.787-.955h5.53v-4.524h-5.53Z" transform="translate(-300.992 -447.439)"/><path class="b" d="M426.518,592.369a.478.478,0,0,1-.478-.478v-2.774a.478.478,0,0,1,.955,0v2.774A.477.477,0,0,1,426.518,592.369Zm2.378,0a.478.478,0,0,1-.478-.478v-2.774a.478.478,0,0,1,.955,0v2.774A.478.478,0,0,1,428.9,592.369Z" transform="translate(-420.87 -579.27)"/></g></g></svg>
--- a/src/views/edge/instance/components/EdgeInstanceTabInfo/index.vue
View file @0faa8e5
+++ b/src/views/edge/instance/components/EdgeInstanceTabInfo/index.vue
View file @0faa8e5
@@ -42,7 +42,7 @@
           <EdgeMonitoring
             v-if="recordData"
             :recordData="recordData"
-            class="p-4 bg-neutral-100 dark:bg-dark-700"
+            class="p-4 bg-fff dark:bg-dark-700"
           />
         </Tabs.TabPane>
         <Tabs.TabPane tab="边缘事件" :key="ActiveKey.EDGEEVENTS">
--- a/src/views/edge/instance/components/EdgeMonitoring/index.vue
View file @0faa8e5
+++ b/src/views/edge/instance/components/EdgeMonitoring/index.vue
View file @0faa8e5
@@ -18,8 +18,11 @@
   import { useGlobSetting } from '/@/hooks/setting';
   import moment from 'moment';
   import { EdgeInstanceItemType } from '/@/api/edgeManage/model/edgeInstance';
-  import { isArray } from '/@/utils/is';
+  import { isArray, isNumber } from '/@/utils/is';
   import { formatSizeUnits } from '/@/utils';
+  import cpuSvg from '/@/assets/icons/cpu.svg';
+  import diskSvg from '/@/assets/icons/disk.svg';
+  import memorySvg from '/@/assets/icons/memory.svg';
   interface ChartInstance {
     name: string;
@@ -30,6 +33,7 @@
     text: string;
     xAxisData: string[];
     seriesData: number[];
+    icon: any;
   }
   enum DeviceInfoOfEdge {
@@ -67,11 +71,11 @@
           cmdId: 11,
           entityType: 'EDGE',
           keys: `${DeviceInfoOfEdge.CPU_USAGE_OF_EDGE},${DeviceInfoOfEdge.DISC_USAGE_OF_EDGE},${DeviceInfoOfEdge.MEMORY_USAGE_OF_EDGE},${DeviceInfoOfEdge.CPU_COUNT_OF_EDGE},${DeviceInfoOfEdge.TOTAL_MEMORY_OF_EDGE},${DeviceInfoOfEdge.TOTAL_DISC_SPACE_OF_EDGE}`,
-          startTs: moment(moment().subtract(1, 'hours')).valueOf(),
+          startTs: moment(moment().subtract(1, 'minute')).valueOf(),
           timeWindow: 3600000,
           interval: 10000,
           intervalType: 'MILLISECONDS',
-          limit: 360,
+          // limit: 360,
           timeZoneId: 'Asia/Shanghai',
           agg: 'AVG',
           unsubscribe: false,
@@ -90,6 +94,7 @@
       type: DeviceInfoOfEdge.CPU_USAGE_OF_EDGE,
       xAxisData: [],
       seriesData: [],
+      icon: cpuSvg,
     },
     {
       name: '内存',
@@ -100,6 +105,7 @@
       type: DeviceInfoOfEdge.MEMORY_USAGE_OF_EDGE,
       xAxisData: [],
       seriesData: [],
+      icon: memorySvg,
     },
     {
       name: '磁盘',
@@ -110,17 +116,18 @@
       type: DeviceInfoOfEdge.DISC_USAGE_OF_EDGE,
       xAxisData: [],
       seriesData: [],
+      icon: diskSvg,
     },
   ]);
   const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({});
-  const cacheUsedSpace = (total, percentage) => {
-    if (!total) return;
-    const takeValue = total.split('.')[0];
-    const takeUnit = total.split('.')[1];
-    return `${(takeValue * (percentage / 100)).toFixed(1)}${takeUnit}`;
-  };
+  // const cacheUsedSpace = (total, percentage) => {
+  //   if (!total) return;
+  //   const takeValue = total.split('.')[0];
+  //   const takeUnit = total.split('.')[1];
+  //   return `${(takeValue * (percentage / 100)).toFixed(1)}${takeUnit}`;
+  // };
   const { send, close, data, open } = useWebSocket(socketInfo.origin, {
     immediate: false,
@@ -139,7 +146,8 @@
             chartInstance.value.forEach((chartItem: ChartInstance) => {
               if (chartItem.type === key) {
                 chartItem.xAxisData.push(moment(data[key][0][0]).format('HH:mm'));
-                chartItem.seriesData.push(data[key][0][1]);
+                // chartItem.seriesData = [];
+                chartItem.seriesData = data[key][0][1] ? [data[key][0][1]] : [];
                 chartItem.currentValue = Number(data[key][0][1]);
               }
               if (chartItem.totalKey === key) {
@@ -167,50 +175,246 @@
     },
   });
-  const handleRenderChartInstance = async (chartInstance: ChartInstance[]) => {
-    await nextTick();
-    if (!chartInstance) return;
-    if (isArray(chartInstance) && chartInstance.length <= 0) return;
-    for (const item of unref(chartInstance)) {
-      const { type, xAxisData, seriesData, text } = item;
-      chartsInstance[type] = echarts.init(document.getElementById(`chart-${type}`) as HTMLElement);
-      const chartOption = {
-        title: {
-          text,
-          textAlign: 'left',
-          textStyle: {
-            fontSize: 12,
+  function onResize(type) {
+    if (!chartsInstance[type]) return;
+    chartsInstance[type]?.resize();
+  }
+
+  const chartOption = {
+    series: [
+      {
+        data: [],
+        detail: {
+          formatter: `暂无数据`,
+        },
+        type: 'gauge',
+        axisLine: {
+          lineStyle: {
+            width: 10,
+            color: [
+              [0.2, '#739ded'],
+              [0.8, '#5f89d8'],
+              [1, '#377dff'],
+            ],
+          },
+        },
+        pointer: {
+          itemStyle: {
+            color: 'auto',
           },
         },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
+        axisTick: {
+          distance: 0,
+          length: 8,
+          lineStyle: {
+            color: 'auto',
           },
         },
-        xAxis: {
-          type: 'category',
-          data: xAxisData,
+        splitLine: {
+          distance: 0,
+          length: 10,
+          lineStyle: {
+            color: 'auto',
+            width: 3,
+          },
         },
-        yAxis: {
-          type: 'value',
-          name: '%',
+        axisLabel: {
+          color: 'inherit',
+          distance: 15,
+          fontSize: 8,
         },
-        series: [
-          {
-            data: seriesData,
-            type: 'line',
+      },
+    ],
+  };
+  const pieOption = {
+    grid: {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}<br/>{d}%',
+      textStyle: {
+        fontSize: 12,
+      },
+    },
+    title: {
+      text: '磁盘容量',
+      subtext: '暂无数据',
+      textStyle: {
+        fontSize: 12,
+        color: '#72767c',
+      },
+      subtextStyle: {
+        fontSize: 14,
+        color: '#000000',
+        fontWeight: 500,
+      },
+      textAlign: 'center',
+      left: '48.5%',
+      top: '44%',
+    },
+    legend: {
+      show: true,
+      icon: 'circle',
+
+      bottom: '0%',
+      data: [{ name: '磁盘已使用' }, { name: '磁盘剩余空间' }].map((item) => ({
+        name: item.name,
+      })),
+      formatter(name: string) {
+        return `{b_style|${name}} `;
+      },
+      textStyle: {
+        color: '#000',
+        rich: {
+          b_style: {
+            color: '#8d8ea0',
+            fontSize: 12,
+            padding: [0, 5, 0, 0],
           },
+        },
+      },
+    },
+    series: [
+      {
+        type: 'pie',
+        // center: ['35%', '50%'],
+        radius: ['40%', '67%'],
+        startAngle: 30,
+        emphasis: {
+          scale: false,
+        },
+        label: {
+          position: 'outside',
+          alignTo: 'labelLine',
+          height: 0,
+          width: 0,
+          lineHeight: 0,
+          distanceToLabelLine: 75,
+          borderRadius: 3,
+          borderWidth: 1,
+          borderColor: 'none',
+          padding: [20, -15, 0, -10],
+          rich: {
+            a: {
+              padding: [0, -80, 55, -80],
+              fontSize: '12px',
+              color: '#000000',
+            },
+            b: {
+              padding: [20, -80, 40, -80],
+              fontSize: '12px',
+              color: '#72767c',
+            },
+          },
+          // formatter: (params: any) => {
+          //   const { data } = params;
+          //   const { value } = data || {};
+
+          //   const total = Number(totalCount.totalDisc?.split('.')[0] || 0);
+          //   const totalUnit = totalCount.totalDisc?.split('.')[1] || 0;
+
+          //   return `{a|${value && total ? value : ''}${value && total ? '%' : ''}} \n {b|${
+          //     total ? (total * (value / 100)).toFixed(1) : ''
+          //   }${total ? totalUnit : ''}}`;
+          // },
+        },
+        labelLine: {
+          show: false,
+          length: 5,
+          // align: 'bottom',
+          lineStyle: {
+            width: 1,
+          },
+        },
+        data: [
+          { name: '磁盘已使用', value: 0, itemStyle: { color: '#90b2f1' } },
+          { name: '磁盘剩余空间', value: 100, itemStyle: { color: '#377dff' } },
         ],
-      };
-      chartsInstance[type].setOption(chartOption);
+      },
+    ],
+  };
+
+  const handleRenderChartInstance = async (chartInstance: ChartInstance[]) => {
+    await nextTick();
+    if (!chartInstance) return;
+    if (isArray(chartInstance) && chartInstance.length <= 0) return;
+    for (const item of unref(chartInstance)) {
+      const { type, seriesData, currentValue, totalCount } = item;
+      // chartsInstance[type] = echarts.init(document.getElementById(`chart-${type}`) as HTMLElement);
+      if (type !== DeviceInfoOfEdge.DISC_USAGE_OF_EDGE) {
+        chartsInstance[type].setOption({
+          series: [
+            {
+              data: seriesData,
+              detail: {
+                formatter: `${isNumber(currentValue) ? '{value} %' : '暂无数据'}`,
+              },
+            },
+          ],
+        });
+      } else {
+        chartsInstance[type].setOption({
+          title: {
+            subtext: totalCount.totalDisc,
+          },
+          series: [
+            {
+              label: {
+                formatter: (params: any) => {
+                  const { data } = params;
+                  const { value } = data || {};
+
+                  const total = Number(totalCount.totalDisc?.split('.')[0] || 0);
+                  const totalUnit = totalCount.totalDisc?.split('.')[1] || 0;
+
+                  return `{a|${value && total ? value : ''}${value && total ? '%' : ''}} \n {b|${
+                    total ? (total * (value / 100)).toFixed(1) : ''
+                  }${total ? totalUnit : ''}}`;
+                },
+              },
+              data: [
+                { name: '磁盘已使用', value: currentValue, itemStyle: { color: '#90b2f1' } },
+                {
+                  name: '磁盘剩余空间',
+                  value: 100 - currentValue,
+                  itemStyle: { color: '#377dff' },
+                },
+              ],
+            },
+          ],
+        });
+      }
+
+      window.addEventListener('resize', () => onResize(type));
     }
   };
+  onUnmounted(() => {
+    window.removeEventListener('resize', onResize);
+  });
+
   onMounted(() => {
     socketInfo.entityId = props.recordData?.id?.id as string;
     if (socketInfo.entityId) {
       open();
+      [
+        DeviceInfoOfEdge.CPU_USAGE_OF_EDGE,
+        DeviceInfoOfEdge.MEMORY_USAGE_OF_EDGE,
+        DeviceInfoOfEdge.DISC_USAGE_OF_EDGE,
+      ].forEach((item) => {
+        chartsInstance[item] = echarts.init(
+          document.getElementById(`chart-${item}`) as HTMLElement
+        );
+        if (item !== DeviceInfoOfEdge.DISC_USAGE_OF_EDGE) {
+          chartsInstance[item]?.setOption(chartOption);
+        } else {
+          chartsInstance[item]?.setOption(pieOption);
+        }
+      });
     }
   });
@@ -220,14 +424,18 @@
 <template>
   <div>
     <a-row justify="space-around" align="middle" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
-      <a-col class="gutter-row" :span="8" v-for="(item, index) in chartInstance" :key="index">
-        <a-row justify="space-around" align="middle">
-          <div
-            style="background-color: #d3d3d3; border-radius: 20px"
-            class="!flex justify-between items-center gap-8 font-bold fill-dark-900 p-2.5 mt-4"
-          >
-            <span>{{ item.name }}</span>
-            <span>{{ item.currentValue }}%</span>
+      <a-col
+        class="gutter-row"
+        style="background: #f5f5f5; border-radius: 20px"
+        :span="7"
+        v-for="(item, index) in chartInstance"
+        :key="index"
+      >
+        <a-row align="middle">
+          <div class="!flex justify-between items-center font-bold fill-dark-900 p-2.5 mt-4">
+            <img :src="item.icon" />
+            <span class="ml-1">{{ item.text }}</span>
+            <!-- <span>{{ item.currentValue }}%</span>
             <span v-if="item.type !== DeviceInfoOfEdge.DISC_USAGE_OF_EDGE"
               >{{
                 item.type === DeviceInfoOfEdge.CPU_USAGE_OF_EDGE
@@ -242,25 +450,20 @@
             >
             <span v-if="item.type === DeviceInfoOfEdge.DISC_USAGE_OF_EDGE" style="color: #1677ff"
               >可用{{ item.totalCount.totalDisc }}</span
-            >
+            > -->
           </div>
         </a-row>
         <a-row class="mt-8" justify="space-around" align="middle">
-          <div
-            :style="`border-width:${item.seriesData.length <= 0 ? 0 : 1}px`"
-            style="border-color: #d3d3d3"
-            class="flex items-center"
-          >
+          <div class="flex w-full justify-center relative">
             <Empty
-              v-if="item.seriesData.length <= 0"
               description="暂无数据"
-              class="text-dark-50 m-4"
+              class="text-dark-50 m-4 absolute"
+              :style="{ display: item.seriesData.length == 0 ? 'block' : 'none' }"
             />
             <div
-              v-else
               :id="`chart-${item.type}`"
-              style="width: 380px; height: 300px"
-              class="m-4"
+              class="m-4 w-8.5/10 h-300px"
+              :style="{ opacity: item.seriesData.length > 0 ? 1 : 0 }"
             ></div>
           </div>
         </a-row>