From 31651f8786e75854359abbfacb19811f0dbe0104 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 25 Jan 2024 16:32:15 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=9C=8B=E6=9D=BF=E6=8B=93=E6=89=91?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=94=B9=E5=8F=98=E8=B5=84=E6=BA=90=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../overview/components/NeResources/index.vue | 310 +++++++++---------
 .../overview/components/Topology/index.vue    |  88 ++---
 .../dashboard/overview/hooks/useTopology.ts   |  26 ++
 src/views/dashboard/overview/index.vue        |   5 +-
 4 files changed, 221 insertions(+), 208 deletions(-)
 create mode 100644 src/views/dashboard/overview/hooks/useTopology.ts

diff --git a/src/views/dashboard/overview/components/NeResources/index.vue b/src/views/dashboard/overview/components/NeResources/index.vue
index 12520b67..048e29cb 100644
--- a/src/views/dashboard/overview/components/NeResources/index.vue
+++ b/src/views/dashboard/overview/components/NeResources/index.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { onMounted, ref, onBeforeUnmount } from 'vue';
+import { onMounted, ref, onBeforeUnmount, nextTick } from 'vue';
 import * as echarts from 'echarts/core';
 import { TooltipComponent } from 'echarts/components';
 import { GaugeChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
-
+import { graphNodeClickID, graphNodeState } from '../../hooks/useTopology';
 import useI18n from '@/hooks/useI18n';
 import { GaugeSeriesOption } from 'echarts/types/dist/echarts';
+import { watch } from 'vue';
 const { t } = useI18n();
 
 echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
@@ -27,8 +28,8 @@ const optionData: EChartsOption = {
     {
       name: '系统内存',
       type: 'gauge',
-      center: ['30%', '25%'],
-      radius: '40%',
+      center: ['15%', '45%'],
+      radius: '65%',
       startAngle: 90,
       endAngle: -270,
       min: 1,
@@ -38,7 +39,7 @@ const optionData: EChartsOption = {
       },
       progress: {
         show: true,
-        width: 10,
+        width: 20,
         overlap: true,
         roundCap: true,
         clip: false,
@@ -48,7 +49,7 @@ const optionData: EChartsOption = {
       },
       axisLine: {
         lineStyle: {
-          width: 10,
+          width: 20,
         },
       },
       axisTick: {
@@ -65,8 +66,8 @@ const optionData: EChartsOption = {
       },
       title: {
         show: true,
-        offsetCenter: [0, -5],
-        fontSize: 10,
+        offsetCenter: [0, '-10%'],
+        fontSize: 15,
         color: '#fafafa',
       },
       detail: {
@@ -74,8 +75,8 @@ const optionData: EChartsOption = {
         width: '60%',
         lineHeight: 40,
         borderRadius: 8,
-        offsetCenter: [0, 10],
-        fontSize: 10,
+        offsetCenter: [0, '30%'],
+        fontSize: 15,
         fontWeight: 'bolder',
         formatter: '{value}%',
         color: 'inherit',
@@ -83,15 +84,15 @@ const optionData: EChartsOption = {
       data: [
         {
           name: '系统内存',
-          value: 20,
+          value: 1,
         },
       ],
     },
     {
       name: '系统CPU',
       type: 'gauge',
-      center: ['70%', '25%'],
-      radius: '40%',
+      center: ['50%', '45%'],
+      radius: '65%',
       startAngle: 90,
       endAngle: -270,
       min: 1,
@@ -101,7 +102,7 @@ const optionData: EChartsOption = {
       },
       progress: {
         show: true,
-        width: 10,
+        width: 20,
         overlap: true,
         roundCap: true,
         clip: false,
@@ -111,7 +112,7 @@ const optionData: EChartsOption = {
       },
       axisLine: {
         lineStyle: {
-          width: 10,
+          width: 20,
         },
       },
       axisTick: {
@@ -128,8 +129,8 @@ const optionData: EChartsOption = {
       },
       title: {
         show: true,
-        offsetCenter: [0, -5],
-        fontSize: 10,
+        offsetCenter: [0, '-10%'],
+        fontSize: 15,
         color: '#fafafa',
       },
       detail: {
@@ -137,8 +138,8 @@ const optionData: EChartsOption = {
         width: '60%',
         lineHeight: 40,
         borderRadius: 8,
-        offsetCenter: [0, 10],
-        fontSize: 10,
+        offsetCenter: [0, '30%'],
+        fontSize: 15,
         fontWeight: 'bolder',
         formatter: '{value}%',
         color: 'inherit',
@@ -153,8 +154,8 @@ const optionData: EChartsOption = {
     {
       name: '网元内存',
       type: 'gauge',
-      center: ['30%', '75%'],
-      radius: '40%',
+      center: ['85%', '45%'],
+      radius: '65%',
       startAngle: 90,
       endAngle: -270,
       min: 1,
@@ -164,7 +165,7 @@ const optionData: EChartsOption = {
       },
       progress: {
         show: true,
-        width: 10,
+        width: 20,
         overlap: true,
         roundCap: true,
         clip: false,
@@ -174,7 +175,7 @@ const optionData: EChartsOption = {
       },
       axisLine: {
         lineStyle: {
-          width: 10,
+          width: 20,
         },
       },
       axisTick: {
@@ -191,8 +192,8 @@ const optionData: EChartsOption = {
       },
       title: {
         show: true,
-        offsetCenter: [0, -5],
-        fontSize: 10,
+        offsetCenter: [0, '-10%'],
+        fontSize: 15,
         color: '#fafafa',
       },
       detail: {
@@ -200,71 +201,8 @@ const optionData: EChartsOption = {
         width: '60%',
         lineHeight: 40,
         borderRadius: 8,
-        offsetCenter: [0, 10],
-        fontSize: 10,
-        fontWeight: 'bolder',
-        formatter: '{value}%',
-        color: 'inherit',
-      },
-      data: [
-        {
-          name: '系统内存',
-          value: 20,
-        },
-      ],
-    },
-    {
-      name: '网元CPU',
-      type: 'gauge',
-      center: ['70%', '75%'],
-      radius: '40%',
-      startAngle: 90,
-      endAngle: -270,
-      min: 1,
-      max: 100,
-      itemStyle: {
-        color: '#1890ff',
-      },
-      progress: {
-        show: true,
-        width: 10,
-        overlap: true,
-        roundCap: true,
-        clip: false,
-      },
-      pointer: {
-        show: false,
-      },
-      axisLine: {
-        lineStyle: {
-          width: 10,
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      anchor: {
-        show: false,
-      },
-      title: {
-        show: true,
-        offsetCenter: [0, -5],
-        fontSize: 10,
-        color: '#fafafa',
-      },
-      detail: {
-        valueAnimation: true,
-        width: '60%',
-        lineHeight: 40,
-        borderRadius: 8,
-        offsetCenter: [0, 10],
-        fontSize: 10,
+        offsetCenter: [0, '30%'],
+        fontSize: 15,
         fontWeight: 'bolder',
         formatter: '{value}%',
         color: 'inherit',
@@ -285,71 +223,151 @@ function handleRanderChart(
   option: EChartsOption
 ) {
   if (!container) return;
-  const { clientHeight, clientWidth } = container;
-
-  neResourcesChart.value = echarts.init(container, 'light', {
-    width: clientWidth,
-    height: clientHeight - 36,
-  });
+  neResourcesChart.value = echarts.init(container, 'light');
   option && neResourcesChart.value.setOption(option);
+
+  // 创建 ResizeObserver 实例
+  var observer = new ResizeObserver(function (entries) {
+    neResourcesChart.value.resize();
+  });
+  // 监听元素大小变化
+  observer.observe(container);
 }
 
-onMounted(() => {
-  setInterval(function () {
-    const random = +(Math.random() * 90).toFixed(2);
-    const random2 = +(Math.random() * 90).toFixed(2);
-    const random3 = +(Math.random() * 90).toFixed(2);
-    const random4 = +(Math.random() * 90).toFixed(2);
+function fnChangeData(data: any[], itemID: string) {
+  let info = data.find((item: any) => item.id === itemID);
+  if (!info.neState.online) {
+    info = data.find((item: any) => item.id === 'OMC');
+    graphNodeClickID.value = 'OMC';
+  }
+  let sysMemUsage = 0;
+  let sysCpuUsage = 0;
+  let nfCpuUsage = 0;
+  if (info.neState.cpu) {
+    nfCpuUsage = +(info.neState.cpu.nfCpuUsage / 100).toFixed(2);
+    sysCpuUsage = +(info.neState.cpu.sysCpuUsage / 100).toFixed(2);
+  }
+  if (info.neState.mem) {
+    let men = info.neState.mem.sysMemUsage;
+    if (men > 1000) {
+      men = +(men / 100).toFixed(2);
+    }
+    sysMemUsage = men;
+  }
+
+  function colorStyle(v: number): string {
     let color = '#1890ff';
-    if (random < 30) {
+    if (v < 30) {
       color = '#73d13d';
     }
-    if (random > 60) {
+    if (v > 60) {
       color = '#ff4d4f';
     }
-    neResourcesChart.value.setOption({
-      series: [
-        {
-          data: [
-            {
-              name: '系统内存',
-              value: random,
-              itemStyle: {
-                color: color,
-                shadowColor: color,
-              },
-            },
-          ],
-        },
-        {
-          data: [
-            {
-              name: '系统CPU',
-              value: random2,
-            },
-          ],
-        },
-        {
-          data: [
-            {
-              name: '网元内存',
-              value: random3,
-            },
-          ],
-        },
-        {
-          data: [
-            {
-              name: '网元CPU',
-              value: random4,
-            },
-          ],
-        },
-      ],
-    });
-  }, 2000);
+    return color;
+  }
 
-  handleRanderChart(neResourcesDom.value, optionData);
+  neResourcesChart.value.setOption({
+    series: [
+      {
+        data: [
+          {
+            name: '系统内存',
+            value: sysMemUsage,
+            itemStyle: {
+              color: colorStyle(sysMemUsage),
+              shadowColor: colorStyle(sysMemUsage),
+            },
+          },
+        ],
+      },
+      {
+        data: [
+          {
+            name: '系统CPU',
+            value: sysCpuUsage,
+            itemStyle: {
+              color: colorStyle(sysCpuUsage),
+              shadowColor: colorStyle(sysCpuUsage),
+            },
+          },
+        ],
+      },
+      {
+        data: [
+          {
+            name: '网元CPU',
+            value: nfCpuUsage,
+            itemStyle: {
+              color: colorStyle(nfCpuUsage),
+              shadowColor: colorStyle(nfCpuUsage),
+            },
+          },
+        ],
+      },
+    ],
+  });
+}
+
+watch(
+  graphNodeState,
+  v => {
+    fnChangeData(v, graphNodeClickID.value);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(graphNodeClickID, v => {
+  fnChangeData(graphNodeState.value, v);
+});
+
+onMounted(() => {
+  // setInterval(function () {
+  //   neResourcesChart.value.setOption({
+  //     series: [
+  //       {
+  //         data: [
+  //           {
+  //             name: '系统内存',
+  //             value: sysMemUsage,
+  //             itemStyle: {
+  //               color: colorStyle(sysMemUsage),
+  //               shadowColor: colorStyle(sysMemUsage),
+  //             },
+  //           },
+  //         ],
+  //       },
+  //       {
+  //         data: [
+  //           {
+  //             name: '系统CPU',
+  //             value: sysCpuUsage,
+  //             itemStyle: {
+  //               color: colorStyle(sysCpuUsage),
+  //               shadowColor: colorStyle(sysCpuUsage),
+  //             },
+  //           },
+  //         ],
+  //       },
+  //       {
+  //         data: [
+  //           {
+  //             name: '网元CPU',
+  //             value: nfCpuUsage,
+  //             itemStyle: {
+  //               color: colorStyle(nfCpuUsage),
+  //               shadowColor: colorStyle(nfCpuUsage),
+  //             },
+  //           },
+  //         ],
+  //       },
+  //     ],
+  //   });
+  // }, 2000);
+  nextTick(() => {
+    handleRanderChart(neResourcesDom.value, optionData);
+  });
 });
 
 onBeforeUnmount(() => {});
diff --git a/src/views/dashboard/overview/components/Topology/index.vue b/src/views/dashboard/overview/components/Topology/index.vue
index d96d142c..76c607c0 100644
--- a/src/views/dashboard/overview/components/Topology/index.vue
+++ b/src/views/dashboard/overview/components/Topology/index.vue
@@ -18,23 +18,25 @@ import {
   nodeImageAnimateState,
   nodeRectAnimateState,
 } from '@/views/monitor/topologyBuild/hooks/registerNode';
+import { graphState, graphNodeClickID } from '../../hooks/useTopology';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
+// const { graphState } = useTopology();
 
 /**图DOM节点实例对象 */
 const graphG6Dom = ref<HTMLElement | undefined>(undefined);
 
 /**图状态 */
-const graphState = reactive<Record<string, any>>({
-  /**当前图组名 */
-  group: '5GC System Architecture2',
-  /**图数据 */
-  data: {
-    combos: [],
-    edges: [],
-    nodes: [],
-  },
-});
+// const graphState = reactive<Record<string, any>>({
+//   /**当前图组名 */
+//   group: '5GC System Architecture2',
+//   /**图数据 */
+//   data: {
+//     combos: [],
+//     edges: [],
+//     nodes: [],
+//   },
+// });
 
 /**非网元元素 */
 const notNeNodes = ['5GC', 'DN', 'UE', 'Base'];
@@ -42,52 +44,6 @@ const notNeNodes = ['5GC', 'DN', 'UE', 'Base'];
 /**图实例对象 */
 const graphG6 = ref<any>(null);
 
-/**图节点右击菜单 */
-const graphNodeMenu = new Menu({
-  offsetX: 6,
-  offseY: 10,
-  itemTypes: ['node'],
-  getContent(evt) {
-    if (!evt) return t('views.monitor.topologyBuild.graphNotInfo');
-    const { id, label, neState }: any = evt.item?.getModel();
-    if (notNeNodes.includes(id)) {
-      return `<div><span>${label || id}</span></div>`;
-    }
-    if (!neState) {
-      return `<div><span>${label || id}</span></div>`;
-    }
-    return `
-    <div
-      style="
-        display: flex;
-        flex-direction: column;
-        width: 140px;
-      "
-    >
-      <h3 style="margin-bottom: 8px">
-      ${t('views.monitor.topology.name')}:
-      ${neState.neName ?? '--'}
-      </h3>
-      <div id="restart" style="cursor: pointer; margin-bottom: 4px">
-        > ${t('views.configManage.neManage.restart')}
-      </div>
-      <div id="stop" style="cursor: pointer; margin-bottom: 4px;">
-        > ${t('views.configManage.neManage.stop')}
-      </div>
-      <div id="log" style="cursor: pointer; margin-bottom: 4px;">
-        > ${t('views.monitor.topology.viewLogFile')}
-      </div>
-    </div>
-    `;
-  },
-  handleMenuClick(target, item) {
-    const { neInfo }: any = item?.getModel();
-    const { neName, neType, neId } = neInfo;
-    const targetId = target.id;
-    console.log(targetId);
-  },
-});
-
 /**图节点展示 */
 const graphNodeTooltip = new Tooltip({
   offsetX: 10,
@@ -140,6 +96,18 @@ const graphNodeTooltip = new Tooltip({
   itemTypes: ['node'],
 });
 
+/**图绑定事件 */
+function fnGraphEvent(graph: Graph) {
+  // 节点点击
+  graph.on('node:click', evt => {
+    // 获得鼠标当前目标节点
+    const node = evt.item?.getModel();
+    if (node && node.id) {
+      graphNodeClickID.value = node.id;
+    }
+  });
+}
+
 /**注册自定义边或节点 */
 function registerEdgeNode() {
   // 边
@@ -184,7 +152,7 @@ function handleRanderGraph(
         fill: 'transparent',
       },
     },
-    plugins: [graphNodeMenu, graphNodeTooltip],
+    plugins: [graphNodeTooltip],
     animate: true, // 是否使用动画过度，默认为 false
     animateCfg: {
       duration: 500, // Number，一次动画的时长
@@ -194,6 +162,8 @@ function handleRanderGraph(
   graph.data(data);
   graph.render();
 
+  fnGraphEvent(graph);
+
   graphG6.value = graph;
 
   return graph;
@@ -233,7 +203,6 @@ function fnGraphDataLoad(reload: boolean = false) {
       }
     })
     .then(res => {
-      console.log('fnGraphDataLoad', res);
       if (!res) return;
       const { combos, edges, nodes } = res.graphData;
 
@@ -255,7 +224,6 @@ function fnGraphDataLoad(reload: boolean = false) {
           return false;
         }
       );
-      console.log(nf);
 
       // 边过滤
       const ef: Record<string, any>[] = edges.filter(
@@ -396,7 +364,7 @@ async function fnGetState() {
     }
   }
 
-  stateTimeout.value = setTimeout(() => fnGetState(), 30_000);
+  stateTimeout.value = setTimeout(() => fnGetState(), 5_000);
 }
 
 onMounted(() => {
diff --git a/src/views/dashboard/overview/hooks/useTopology.ts b/src/views/dashboard/overview/hooks/useTopology.ts
new file mode 100644
index 00000000..0c490952
--- /dev/null
+++ b/src/views/dashboard/overview/hooks/useTopology.ts
@@ -0,0 +1,26 @@
+import { computed, reactive, ref } from 'vue';
+
+/**图状态 */
+export const graphState = reactive<Record<string, any>>({
+  /**当前图组名 */
+  group: '5GC System Architecture2',
+  /**图数据 */
+  data: {
+    combos: [],
+    edges: [],
+    nodes: [],
+  },
+});
+
+/**图点击选择 */
+export const graphNodeClickID = ref<string>('UPF');
+
+/**图节点网元信息状态 */
+export const graphNodeState = computed(() =>
+  graphState.data.nodes.map((item: any) => ({
+    id: item.id,
+    label: item.label,
+    neInfo: item.neInfo,
+    neState: item.neState,
+  }))
+);
diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue
index 105339f3..3f545e43 100644
--- a/src/views/dashboard/overview/index.vue
+++ b/src/views/dashboard/overview/index.vue
@@ -7,7 +7,7 @@ import CDR from './components/CDR/index.vue';
 import AlarnDayLine from './components/AlarnDayLine/index.vue';
 import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
 import UPFFlow from './components/UPFFlow/index.vue';
-
+import { graphNodeClickID } from './hooks/useTopology';
 import { useFullscreen } from '@vueuse/core';
 import useAppStore from '@/store/modules/app';
 const appStore = useAppStore();
@@ -141,7 +141,8 @@ onMounted(() => {});
       <div class="resources panel">
         <div class="inner">
           <h3>
-            <DashboardOutlined style="color: #68d8fe" />&nbsp;&nbsp; 资源情况
+            <DashboardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
+            资源情况：{{ graphNodeClickID }}
           </h3>
           <div class="chart">
             <NeResources />