feat: 拓扑图Dome

package.json

@@ -13,13 +13,12 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
-    "@antv/g6": "^5.0.0-beta.27",
+    "@antv/g6": "^5.0.0-beta.28",
     "@codemirror/lang-javascript": "^6.2.1",
-    "@codemirror/merge": "^6.1.2",
+    "@codemirror/merge": "^6.4.0",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@tato30/vue-pdf": "^1.8.1",
-    "@vueuse/components": "^10.6.1",
+    "@vueuse/core": "^10.7.0",
-    "@vueuse/core": "^10.6.1",
     "ant-design-vue": "^3.2.20",
     "antdv-pro-layout": "^3.2.6",
     "codemirror": "^6.0.1",
@@ -30,7 +29,7 @@
     "js-cookie": "^3.0.5",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
-    "vue": "^3.3.10",
+    "vue": "^3.3.11",
     "vue-codemirror": "^6.1.1",
     "vue-i18n": "^9.8.0",
     "vue-router": "^4.2.5",
@@ -41,12 +40,12 @@
     "@types/file-saver": "^2.0.7",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^18.0.0",
-    "@types/nprogress": "^0.2.0",
+    "@types/nprogress": "^0.2.3",
-    "@vitejs/plugin-vue": "^4.5.1",
+    "@vitejs/plugin-vue": "^4.5.2",
     "less": "^4.2.0",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.0.5",
+    "vite": "^5.0.9",
     "vite-plugin-compression": "^0.5.1",
     "vue-tsc": "^1.8.25"
   }

src/components/ChartGraphG6/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div ref="g6Dom" :style="{ height: height, width: width }"></div>
+    <div ref="chartGraphG6Dom" :style="{ height: height, width: width }"></div>
     <button @click="actions['Enable/Disable Node States'].Breathing()">
       Breathing()
     </button>
@@ -43,7 +43,7 @@ const props = defineProps({
   },
 });
 
-const g6Dom = ref<HTMLElement | undefined>(undefined);
+const chartGraphG6Dom = ref<HTMLElement | undefined>(undefined);
 
 const ExtGraph = extend(Graph, {
   layouts: {},
@@ -60,7 +60,7 @@ const data = {
     {
       id: '0',
       data: {
-        x: 80,
+        x: 50,
         y: 150,
         type: 'circle-node',
         color: '#fffff',
@@ -91,8 +91,19 @@ const data = {
       id: '1',
       data: {
         label: 'DM',
-        x: 600,
+        x: 450,
-        y: 350,
+        y: 450,
+        keyShape: {
+          width: 80,
+          height: 40,
+          radius: 8,
+          fill: '#00b050',
+        },
+        labelShape: {
+          position: 'center',
+          text: 'DM',
+          fill: '#fff', // 节点标签文字颜色
+        },
       },
     },
     // 2 O&M
@@ -100,8 +111,58 @@ const data = {
       id: '2',
       data: {
         label: 'O&M',
-        x: 900,
+        x: 50,
-        y: 100,
+        y: 450,
+      },
+    },
+    // 100 EMS
+    {
+      id: '100',
+      data: {
+        label: 'EMS',
+        parentId: 'combo-ems',
+        x: 300,
+        y: 450,
+      },
+    },
+    // 190 UPF
+    {
+      id: '190',
+      data: {
+        parentId: 'combo-upf',
+        x: 300,
+        y: 350,
+        keyShape: {
+          width: 80,
+          height: 40,
+          radius: 8,
+          fill: '#d580ff',
+        },
+        labelShape: {
+          position: 'center',
+          text: 'UPF',
+          fill: '#fff', // 节点标签文字颜色
+        },
+      },
+    },
+    // EP-IMS
+    {
+      id: '110',
+      data: {
+        parentId: 'combo-ims',
+        x: 600,
+        y: 350,
+        keyShape: {
+          width: 80,
+          height: 40,
+          radius: 8,
+          fill: '#ed7d31',
+        },
+        labelShape: {
+          position: 'center',
+          text: 'IMS',
+          fill: '#fff', // 节点标签文字颜色
+        },
       },
     },
     // 5GC控制面
@@ -119,7 +180,7 @@ const data = {
       data: {
         label: 'AUSF',
         parentId: 'combo-5gc',
-        x: 400,
+        x: 450,
         y: 50,
       },
     },
@@ -128,7 +189,7 @@ const data = {
       data: {
         label: 'UDM',
         parentId: 'combo-5gc',
-        x: 500,
+        x: 600,
         y: 50,
       },
     },
@@ -146,7 +207,7 @@ const data = {
       data: {
         label: 'NRF',
         parentId: 'combo-5gc',
-        x: 400,
+        x: 450,
         y: 150,
       },
     },
@@ -155,7 +216,7 @@ const data = {
       data: {
         label: 'SMF',
         parentId: 'combo-5gc',
-        x: 500,
+        x: 300,
         y: 250,
       },
     },
@@ -164,93 +225,67 @@ const data = {
       data: {
         label: 'PCF',
         parentId: 'combo-5gc',
-        x: 600,
+        x: 700,
         y: 250,
       },
     },
-    // 5GC用户面
-    {
-      id: '190',
-      data: {
-        label: 'UPF',
-        parentId: 'combo-upf',
-        x: 300,
-        y: 350,
-      },
-    },
-    // EP-IMS
-    {
-      id: '110',
-      data: {
-        label: 'I/S-CSCF',
-        parentId: 'combo-ims',
-        x: 800,
-        y: 350,
-      },
-    },
-    {
-      id: '111',
-      data: {
-        label: 'P-CSCF',
-        parentId: 'combo-ims',
-        x: 800,
-        y: 400,
-      },
-    },
-    // O&M
-    {
-      id: '100',
-      data: {
-        label: 'EMS',
-        parentId: 'combo-ems',
-        x: 800,
-        y: 100,
-      },
-    },
   ],
   edges: [
     {
       id: '0-5gc',
       source: '0',
       target: 'combo-5gc',
+      data: {},
+    },
+    {
+      id: '0-upf',
+      source: '0',
+      target: 'combo-upf',
       data: {
-        type: 'cubic-edge',
+        keyShape: {
-        animates: {
+          radius: 4,
-          update: [
+          controlPoints: [
-            {
+            { x: 150, y: 150 },
-              // 在 selected 和 active 状态变化导致的 haloShape opacity 变化时，使 opacity 带动画地更新
+            { x: 150, y: 350 },
-              fields: ['opacity'],
-              shapeId: 'haloShape',
-              states: ['selected', 'active'],
-              duration: 500,
-            },
           ],
+          lineWidth: 1,
+          stroke: '#d580ff',
         },
+        labelShape: {
+          text: 'N3',
+          position: 'end',
+          autoRotate: true,
+          offsetY: 10,
+        },
+        labelBackgroundShape: {},
       },
     },
     {
-      id: '5gc-ems',
+      id: 'upf-1',
-      source: 'combo-5gc',
-      target: 'combo-ems',
-      data: {},
-    },
-    {
-      id: 'upf-ems',
       source: 'combo-upf',
-      target: 'combo-ems',
+      target: '1',
-      data: {},
+      data: {
-    },
+        keyShape: {
-    {
+          radius: 4,
-      id: 'ims-ems',
+          controlPoints: [{ x: 400, y: 400 }],
-      source: 'combo-ims',
+          lineWidth: 1,
-      target: 'combo-ems',
+          stroke: '#d580ff',
-      data: {},
+        },
+        labelShape: {
+          text: 'N6',
+          position: 'start',
+          autoRotate: true,
+          offsetX: 10,
+        },
+        labelBackgroundShape: {},
+      },
     },
+
     {
       id: 'ems-2',
       source: 'combo-ems',
       target: '2',
-      data: {},
+      data: { type: 'cubic-edge' },
     },
     {
       id: '170-120',
@@ -375,34 +410,42 @@ const data = {
       },
     },
     {
-      id: '160-111',
+      id: '160-110',
       source: '160',
-      target: '111',
+      target: '110',
-      data: {},
-    },
-    {
-      id: '0-upf',
-      source: '0',
-      target: 'combo-upf',
       data: {},
     },
+
     {
       id: '150-190',
       source: '150',
       target: '190',
       data: {},
     },
-    {
+
-      id: 'upf-1',
-      source: 'combo-upf',
-      target: '1',
-      data: {},
-    },
     {
       id: 'upf-ims',
       source: 'combo-upf',
       target: 'combo-ims',
-      data: {},
+      data: { type: 'cubic-edge' },
+    },
+    {
+      id: 'ems-5gc',
+      source: 'combo-ems',
+      target: 'combo-5gc',
+      data: { type: 'cubic-edge' },
+    },
+    {
+      id: 'ems-upf',
+      source: 'combo-ems',
+      target: 'combo-upf',
+      data: { type: 'cubic-edge' },
+    },
+    {
+      id: 'ems-ims',
+      source: 'combo-ems',
+      target: 'combo-ims',
+      data: { type: 'cubic-edge' },
     },
   ],
   combos: [
@@ -415,50 +458,57 @@ const data = {
     {
       id: 'combo-upf',
       data: {
-        label: '5GC用户面',
+        keyShape: {
+          opacity: 0.8,
+          padding: [20, 20, 20, 20],
+          radius: 4,
+          lineWidth: 1,
+          stroke: '#d580ff',
+        },
       },
     },
     {
       id: 'combo-ims',
-      data: {
+      data: {},
-        label: 'EP-IMS用户面',
-      },
     },
     {
       id: 'combo-ems',
-      data: {
+      data: {},
-        label: 'EMS',
-      },
     },
   ],
 };
 let graph: any = null;
 /**初始化渲染图表 */
 function initChart() {
-  if (!g6Dom.value) return;
+  if (!chartGraphG6Dom.value) return;
+  console.log(chartGraphG6Dom.value.offsetWidth);
+  console.log(chartGraphG6Dom.value.clientWidth);
+  console.log(chartGraphG6Dom.value.scrollWidth);
   graph = new ExtGraph({
-    container: g6Dom.value,
+    container: chartGraphG6Dom.value,
     height: 500,
+    width: chartGraphG6Dom.value.clientWidth,
+    // autoFit: 'center',
     modes: {
       default: [
-        {
+        // {
-          type: 'drag-node',
+        //   type: 'drag-node',
-          enableTransient: false,
+        //   enableTransient: false,
-          updateComboStructure: false,
+        //   updateComboStructure: false,
-        },
+        // },
-        {
+        // {
-          type: 'click-select',
+        //   type: 'click-select',
-          itemTypes: ['node', 'edge', 'combo'],
+        //   itemTypes: ['node', 'edge', 'combo'],
-        },
+        // },
-        {
+        // {
-          type: 'drag-combo',
+        //   type: 'drag-combo',
-          enableTransient: true,
+        //   enableTransient: true,
-          updateComboStructure: true,
+        //   updateComboStructure: true,
-        },
+        // },
         // 'drag-combo',
         'drag-canvas',
-        // 'click-select',
+        'click-select',
-        'zoom-canvas',
+        // 'zoom-canvas',
       ] as any,
     },
     // 布局 力向吸引
@@ -503,7 +553,8 @@ function initChart() {
           },
           labelShape: {
             position: 'center',
-            text: data.label,
+            text: `${id} - ${data.label}`,
+            fill: '#fff',
           },
           animates: {
             update: [
@@ -545,7 +596,7 @@ function initChart() {
         source,
         target,
         data: {
-          type: 'cubic-edge',
+          type: 'polyline-edge',
           animates: {
             update: [
               {

src/views/monitor/topology/index.vue

@@ -1,68 +1,924 @@
 <script setup lang="ts">
-import { reactive, onMounted } from 'vue';
+import { reactive, onMounted, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import ChartGraphG6 from '@/components/ChartGraphG6/index.vue';
 import useI18n from '@/hooks/useI18n';
+import useNeInfoStore from '@/store/modules/neinfo';
+import { Extensions, Graph, GraphData, extend } from '@antv/g6';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import message from 'ant-design-vue/lib/message';
+const neInfoStore = useNeInfoStore();
 const { t } = useI18n();
 
+/**图DOM节点实例对象 */
+const graphG6Dom = ref<HTMLElement | undefined>(undefined);
+
+/**图实例对象 */
+let graphChart: any = null;
+
+/**图拓展 */
+const ExtGraph = extend(Graph, {
+  layouts: {},
+  edges: {
+    'polyline-edge': Extensions.PolylineEdge,
+    'cubic-edge': Extensions.CubicEdge,
+  },
+});
+
+/**图DOM节点实例对象 */
+const graphData = reactive<GraphData>({
+  nodes: [],
+  edges: [],
+  combos: [],
+});
+
+const data = {
+  nodes: [
+    // 0 基站
+    {
+      id: '0',
+      data: {
+        x: 50,
+        y: 150,
+        type: 'circle-node',
+        color: '#fffff',
+        keyShape: {
+          r: 24,
+          width: 48,
+          height: 48,
+          fill: '#9EC9FF',
+          stroke: '#5B8FF9',
+          lineWidth: 2,
+        },
+        labelShape: {
+          text: '基站',
+          position: 'bottom',
+          maxWidth: '200%',
+          offsetY: 10,
+        },
+        labelBackgroundShape: {},
+        iconShape: {
+          img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+          width: 24,
+          height: 24,
+        },
+      },
+    },
+    // 1 DM
+    {
+      id: '1',
+      data: {
+        label: 'DM',
+        x: 450,
+        y: 450,
+        keyShape: {
+          width: 80,
+          height: 40,
+          radius: 8,
+          fill: '#00b050',
+        },
+        labelShape: {
+          position: 'center',
+          text: 'DM',
+          fill: '#fff', // 节点标签文字颜色
+        },
+      },
+    },
+    // 2 O&M
+    {
+      id: '2',
+      data: {
+        label: 'O&M',
+        x: 50,
+        y: 450,
+      },
+    },
+    // 100 EMS
+    {
+      id: '100',
+      data: {
+        label: 'EMS',
+        parentId: 'combo-ems',
+        x: 300,
+        y: 450,
+      },
+    },
+    // 190 UPF
+    {
+      id: '190',
+      data: {
+        parentId: 'combo-upf',
+        x: 300,
+        y: 350,
+        keyShape: {
+          width: 80,
+          height: 40,
+          radius: 8,
+          fill: '#d580ff',
+        },
+        labelShape: {
+          position: 'center',
+          text: 'UPF',
+          fill: '#fff', // 节点标签文字颜色
+        },
+      },
+    },
+    // EP-IMS
+    {
+      id: '110',
+      data: {
+        parentId: 'combo-ims',
+        x: 600,
+        y: 350,
+        keyShape: {
+          width: 80,
+          height: 40,
+          radius: 8,
+          fill: '#ed7d31',
+        },
+        labelShape: {
+          position: 'center',
+          text: 'IMS',
+          fill: '#fff', // 节点标签文字颜色
+        },
+      },
+    },
+    // 5GC控制面
+    {
+      id: '170',
+      data: {
+        label: 'NSSF',
+        parentId: 'combo-5gc',
+        x: 300,
+        y: 50,
+      },
+    },
+    {
+      id: '130',
+      data: {
+        label: 'AUSF',
+        parentId: 'combo-5gc',
+        x: 450,
+        y: 50,
+      },
+    },
+    {
+      id: '140',
+      data: {
+        label: 'UDM',
+        parentId: 'combo-5gc',
+        x: 600,
+        y: 50,
+      },
+    },
+    {
+      id: '120',
+      data: {
+        label: 'AMF',
+        parentId: 'combo-5gc',
+        x: 300,
+        y: 150,
+      },
+    },
+    {
+      id: '180',
+      data: {
+        label: 'NRF',
+        parentId: 'combo-5gc',
+        x: 450,
+        y: 150,
+      },
+    },
+    {
+      id: '150',
+      data: {
+        label: 'SMF',
+        parentId: 'combo-5gc',
+        x: 300,
+        y: 250,
+      },
+    },
+    {
+      id: '160',
+      data: {
+        label: 'PCF',
+        parentId: 'combo-5gc',
+        x: 700,
+        y: 250,
+      },
+    },
+  ],
+  edges: [
+    {
+      id: '0-5gc',
+      source: '0',
+      target: 'combo-5gc',
+      data: {},
+    },
+    {
+      id: '0-upf',
+      source: '0',
+      target: 'combo-upf',
+      data: {
+        keyShape: {
+          radius: 4,
+          controlPoints: [
+            { x: 150, y: 150 },
+            { x: 150, y: 350 },
+          ],
+          lineWidth: 1,
+          stroke: '#d580ff',
+        },
+        labelShape: {
+          text: 'N3',
+          position: 'end',
+          autoRotate: true,
+          offsetY: 10,
+        },
+        labelBackgroundShape: {},
+      },
+    },
+    {
+      id: 'upf-1',
+      source: 'combo-upf',
+      target: '1',
+      data: {
+        keyShape: {
+          radius: 4,
+          controlPoints: [{ x: 400, y: 400 }],
+          lineWidth: 1,
+          stroke: '#d580ff',
+        },
+        labelShape: {
+          text: 'N6',
+          position: 'start',
+          autoRotate: true,
+          offsetX: 10,
+        },
+        labelBackgroundShape: {},
+      },
+    },
+
+    {
+      id: 'ems-2',
+      source: 'combo-ems',
+      target: '2',
+      data: { type: 'cubic-edge' },
+    },
+    {
+      id: '170-120',
+      source: '170',
+      target: '120',
+      data: {},
+    },
+    {
+      id: '130-120',
+      source: '130',
+      target: '120',
+      data: {},
+    },
+    {
+      id: '140-120',
+      source: '140',
+      target: '120',
+      data: {},
+    },
+    {
+      id: '140-180',
+      source: '140',
+      target: '180',
+      data: {},
+    },
+    {
+      id: '120-180',
+      source: '120',
+      target: '180',
+      data: {
+        type: 'polyline-edge',
+        keyShape: {
+          endArrow: true,
+          routeCfg: {
+            /**
+             * 目前支持正交路由 'orth' 和地铁路由 'er'
+             */
+            // name: 'er',
+            /**
+             * 是否开启自动避障，默认为 false
+             * Whether to enable automatic obstacle avoidance, default is false
+             */
+            enableObstacleAvoidance: true,
+          },
+          /**
+           * 拐弯处的圆角弧度，默认为直角，值为 0
+           * The radius of the corner rounding, defaults to a right angle
+           */
+          // radius: 20,
+          /**
+           * 拐弯处距离节点最小距离, 默认为 2
+           * Minimum distance from the node at the corner, default is 5.
+           */
+          // offset: 0,
+          /**
+           * 控制点数组，不指定时根据 A* 算法自动生成折线。若指定了，则按照 controlPoints 指定的位置进行弯折
+           * An array of control points that, when not specified, automatically generates the bends according to the A* algorithm. If specified, bends are made at the position specified by controlPoints.
+           */
+          // controlPoints: [],
+        },
+      },
+    },
+    {
+      id: '130-180',
+      source: '130',
+      target: '180',
+      data: {
+        type: 'polyline-edge',
+      },
+    },
+    {
+      id: '140-150',
+      source: '140',
+      target: '150',
+      data: {
+        type: 'polyline-edge',
+      },
+    },
+    {
+      id: '140-110',
+      source: '140',
+      target: '110',
+      data: {
+        type: 'polyline-edge',
+      },
+    },
+    {
+      id: '120-150',
+      source: '120',
+      target: '150',
+      data: {},
+    },
+    {
+      id: '150-180',
+      source: '150',
+      target: '180',
+      data: {},
+    },
+    {
+      id: '150-160',
+      source: '150',
+      target: '160',
+      data: { type: 'polyline-edge' },
+    },
+    {
+      id: '160-120',
+      source: '160',
+      target: '120',
+      data: {},
+    },
+    {
+      id: '160-180',
+      source: '160',
+      target: '180',
+      data: {
+        keyShape: {
+          endArrow: true,
+        },
+        labelShape: {
+          text: 'asdf-arrow',
+        },
+      },
+    },
+    {
+      id: '160-110',
+      source: '160',
+      target: '110',
+      data: {},
+    },
+
+    {
+      id: '150-190',
+      source: '150',
+      target: '190',
+      data: {},
+    },
+
+    {
+      id: 'upf-ims',
+      source: 'combo-upf',
+      target: 'combo-ims',
+      data: { type: 'cubic-edge' },
+    },
+    {
+      id: 'ems-5gc',
+      source: 'combo-ems',
+      target: 'combo-5gc',
+      data: { type: 'cubic-edge' },
+    },
+    {
+      id: 'ems-upf',
+      source: 'combo-ems',
+      target: 'combo-upf',
+      data: { type: 'cubic-edge' },
+    },
+    {
+      id: 'ems-ims',
+      source: 'combo-ems',
+      target: 'combo-ims',
+      data: { type: 'cubic-edge' },
+    },
+  ],
+  combos: [
+    {
+      id: 'combo-5gc',
+      data: {
+        text: '5GC控制面',
+      },
+    },
+    {
+      id: 'combo-upf',
+      data: {
+        keyShape: {
+          opacity: 0.8,
+          padding: [20, 20, 20, 20],
+          radius: 4,
+          lineWidth: 1,
+          stroke: '#d580ff',
+        },
+      },
+    },
+    {
+      id: 'combo-ims',
+      data: {},
+    },
+    {
+      id: 'combo-ems',
+      data: {},
+    },
+  ],
+};
+
+/**初始化渲染图表 */
+function initChart() {
+  if (!graphG6Dom.value) return;
+  console.log(graphG6Dom.value.offsetWidth);
+  console.log(graphG6Dom.value.clientWidth);
+  console.log(graphG6Dom.value.scrollWidth);
+  const graph = new ExtGraph({
+    container: graphG6Dom.value,
+    height: 500,
+    width: graphG6Dom.value.clientWidth,
+    // autoFit: 'center',
+    modes: {
+      default: [
+        // {
+        //   type: 'drag-node',
+        //   enableTransient: false,
+        //   updateComboStructure: false,
+        // },
+        // {
+        //   type: 'click-select',
+        //   itemTypes: ['node', 'edge', 'combo'],
+        // },
+        // {
+        //   type: 'drag-combo',
+        //   enableTransient: true,
+        //   updateComboStructure: true,
+        // },
+        'drag-combo',
+        'drag-canvas',
+        'click-select',
+        // 'zoom-canvas',
+      ] as any,
+    },
+    // 布局 力向吸引
+    layout: {
+      type: 'force',
+      animated: true,
+      linkDistance: 280,
+      maxSpeed: 100,
+      clustering: true,
+      nodeClusterBy: 'parentId',
+      clusterNodeStrength: 80,
+    },
+    // 主题
+    theme: {
+      type: 'spec',
+      base: 'light',
+      specification: {
+        node: {
+          dataTypeField: 'parentId',
+        },
+      },
+    } as any,
+    // 插件
+    plugins: [
+      {
+        // 避免文本过于密集导致的视觉混乱
+        type: 'lod-controller',
+        disableLod: true,
+      },
+    ] as any,
+    // 全局节点 矩形
+    node: model => {
+      const { id, data } = model;
+      return {
+        id,
+        data: {
+          type: 'rect-node',
+          keyShape: {
+            width: 80,
+            height: 40,
+            radius: 8,
+          },
+          labelShape: {
+            position: 'center',
+            text: `${id} - ${data.label}`,
+            fill: '#fff',
+          },
+          animates: {
+            update: [
+              {
+                fields: ['opacity'],
+                shapeId: 'haloShape',
+                states: ['breathing'],
+                iterations: Infinity,
+                direction: 'alternate',
+                duration: 500,
+              },
+              {
+                fields: ['lineWidth'],
+                shapeId: 'keyShape',
+                states: ['breathing'],
+                iterations: Infinity,
+                direction: 'alternate',
+                duration: 500,
+              },
+              {
+                fields: ['height', 'width'],
+                shapeId: 'keyShape',
+                states: ['scaling'],
+                iterations: Infinity,
+                direction: 'alternate',
+                duration: 500,
+              },
+            ],
+          },
+          ...data,
+        },
+      };
+    },
+    // 全局边 三次贝塞尔曲线
+    edge: model => {
+      const { id, source, target, data } = model;
+      return {
+        id,
+        source,
+        target,
+        data: {
+          type: 'polyline-edge',
+          animates: {
+            update: [
+              {
+                fields: ['lineDash'],
+                shapeId: 'keyShape',
+                states: ['growing', 'running'],
+                iterations: Infinity,
+                duration: 2000,
+              },
+              {
+                fields: ['offsetDistance'],
+                shapeId: 'buShape',
+                states: ['circleRunning'],
+                iterations: Infinity,
+                duration: 2000,
+              },
+            ],
+          },
+          ...data,
+        },
+      };
+    },
+    // 全局框节点 矩形
+    combo: model => {
+      const { id, data } = model;
+      return {
+        id,
+        data: {
+          type: 'rect-combo',
+          keyShape: {
+            opacity: 0.8,
+            padding: [20, 20, 20, 20],
+            radius: 8,
+          },
+          labelShape: {
+            text: data.label,
+            offsetY: 8,
+          },
+          labelBackgroundShape: {},
+          buildIn: [
+            {
+              fields: ['opacity'],
+              duration: 500,
+              delay: 500 + Math.random() * 500,
+            },
+          ],
+          buildOut: [
+            {
+              fields: ['opacity'],
+              duration: 200,
+            },
+          ],
+          animates: {
+            update: [
+              {
+                fields: ['width', 'height', 'x', 'y'],
+                shapeId: 'keyShape',
+              },
+            ],
+          },
+          ...data,
+        },
+      };
+    },
+    // 节点状态
+    nodeState: {
+      breathing: {
+        haloShape: {
+          opacity: 0.25,
+          lineWidth: 20,
+          visible: true,
+        },
+        keyShape: {
+          radius: 4,
+        },
+      },
+      scaling: {
+        keyShape: {
+          width: 100,
+          height: 60,
+        },
+      },
+    } as any,
+    edgeState: {
+      growing: {
+        keyShape: {
+          lineWidth: 2,
+          lineDash: ['100%', 0],
+        },
+      },
+      running: {
+        keyShape: {
+          lineWidth: 2,
+          lineDash: [2, 2],
+          //  TODO: lineDashOffset
+        },
+      },
+    },
+    data: graphData,
+  });
+
+  graph.on('node:click', (e: any) => {
+    const s = graphChart.getItemState(e.itemId);
+    console.log(s);
+    // graph.updateData('node', {
+    //   id: e.itemId,
+    //   data: {
+    //     cluster: Math.random(),
+    //     keyShape: {
+    //       r: 32 + Math.random() * 10 - 5,
+    //       lineWidth: 6 + Math.random() * 6 - 3,
+    //       stroke: '#000',
+    //     },
+    //     labelShape: {
+    //       fontWeight: 700,
+    //     },
+    //   },
+    // });
+  });
+
+  graph.on('node:pointerenter', (e: any) => {
+    const { itemId } = e;
+    if (graph.getItemState(itemId, 'breathing')) {
+      graph.setItemState(itemId, 'breathing', false);
+    } else {
+      graph.setItemState(itemId, 'scaling', false);
+      graph.setItemState(itemId, 'breathing', true);
+    }
+    // graph.updateData('node', {
+    //   id: itemId,
+    //   data: {
+    //     label: `after been hovered ${itemId}`,
+    //     labelShape: {
+    //       fill: '#0f0',
+    //     },
+    //   },
+    // });
+  });
+
+  graph.on('node:pointerleave', (e: any) => {
+    const { itemId } = e;
+    if (graph.getItemState(itemId, 'breathing')) {
+      graph.setItemState(itemId, 'breathing', false);
+    } else {
+      graph.setItemState(itemId, 'scaling', false);
+      graph.setItemState(itemId, 'breathing', true);
+    }
+    // graph.updateData('node', {
+    //   id: itemId,
+    //   data: {
+    //     label: 'label before been hovered',
+    //     labelShape: {
+    //       fill: '#000',
+    //     },
+    //   },
+    // });
+  });
+
+  graphChart = graph;
+}
+
+const actions = {
+  'Enable/Disable Node States': {
+    Breathing: () => {
+      graphChart.getAllNodesData().forEach((node: any) => {
+        if (graphChart.getItemState(node.id, 'breathing')) {
+          graphChart.setItemState(node.id, 'breathing', false);
+        } else {
+          graphChart.setItemState(node.id, 'scaling', false);
+          graphChart.setItemState(node.id, 'breathing', true);
+        }
+      });
+    },
+    Scaling: () => {
+      graphChart.getAllNodesData().forEach((node: any) => {
+        if (graphChart.getItemState(node.id, 'scaling')) {
+          graphChart.setItemState(node.id, 'scaling', false);
+        } else {
+          graphChart.setItemState(node.id, 'breathing', false);
+          graphChart.setItemState(node.id, 'scaling', true);
+        }
+      });
+    },
+  },
+  'Enable/Disable Edge States': {
+    Growing: () => {
+      graphChart.getAllEdgesData().forEach((edge: any) => {
+        if (graphChart.getItemState(edge.id, 'growing')) {
+          graphChart.setItemState(edge.id, 'growing', false);
+        } else {
+          graphChart.setItemState(edge.id, 'running', false);
+          graphChart.setItemState(edge.id, 'growing', true);
+        }
+      });
+    },
+    Running: () => {
+      graphChart.getAllEdgesData().forEach((edge: any) => {
+        if (graphChart.getItemState(edge.id, 'running')) {
+          graphChart.setItemState(edge.id, 'running', false);
+        } else {
+          graphChart.setItemState(edge.id, 'growing', false);
+          graphChart.setItemState(edge.id, 'running', true);
+        }
+      });
+    },
+  },
+};
+
 /**查询全部网元数据列表 */
 function fnGetList() {}
 
-onMounted(() => {});
+onMounted(() => {
+  // 获取网元网元列表
+  neInfoStore.fnNelist().then(res => {
+    if (
+      res.code === RESULT_CODE_SUCCESS &&
+      Array.isArray(res.data) &&
+      res.data.length > 0
+    ) {
+      console.log(res.data);
+      console.log(neInfoStore.neCascaderOptions);
+
+      const itemNode = neInfoStore.neCascaderOptions;
+      for (const item of itemNode) {
+        graphData.combos?.push({
+          id: item.value,
+          data: {
+            color: '#fff',
+            label: item.value,
+          },
+        });
+      }
+
+      fnGetList();
+      initChart();
+    } else {
+      message.warning({
+        content: t('common.noData'),
+        duration: 2,
+      });
+    }
+  });
+});
 </script>
 
 <template>
   <PageContainer>
     <a-card
       :bordered="false"
-      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+      :body-style="{ marginBottom: '24px' }"
+      size="small"
     >
-      <!-- 表格搜索栏 -->
+      <!-- 插槽-卡片左侧侧 -->
-      <a-form name="queryParams" layout="horizontal">
+      <template #title>
-        <a-row :gutter="16">
+        <div class="button-container" style="margin-bottom: -12px">
-          <a-col :lg="10" :md="10" :xs="24">
+          <a-button type="primary">
-            <a-form-item
+            <template #icon>
-              :label="t('views.monitor.monitor.filter')"
+              <PlusOutlined />
-              name="neTypeSelect"
+            </template>
-            >
+            {{ t('common.addText') }}
-              ssdf
+          </a-button>
-            </a-form-item>
+
-          </a-col>
+          <a-button type="primary" danger ghost>
-          <a-col :lg="6" :md="12" :xs="24">
+            <template #icon>
-            <a-form-item>
+              <DeleteOutlined />
-              <a-space :size="8">
+            </template>
-                <a-button type="primary" @click.prevent="fnGetList()">
+            {{ t('views.neUser.auth.batchDelText') }}
-                  <template #icon><SearchOutlined /></template>
+          </a-button>
-                  {{ t('common.search') }}
+          <a-popconfirm
-                </a-button>
+            :title="t('views.neUser.sub.loadDataConfirm')"
-              </a-space>
+            :ok-text="t('common.ok')"
-            </a-form-item>
+            :cancel-text="t('common.cancel')"
-          </a-col>
+          >
-        </a-row>
+            <a-button type="dashed" danger>
-      </a-form>
+              <template #icon>
+                <SyncOutlined />
+              </template>
+              {{ t('views.neUser.sub.loadData') }}
+            </a-button>
+          </a-popconfirm>
+
+          <a-button type="dashed">
+            <template #icon>
+              <ImportOutlined />
+            </template>
+            {{ t('views.neUser.sub.import') }}
+          </a-button>
+
+          <a-popconfirm
+            :title="t('views.neUser.sub.exportConfirm')"
+            ok-text="TXT"
+            ok-type="default"
+          >
+            <a-button type="dashed">
+              <template #icon>
+                <ExportOutlined />
+              </template>
+              {{ t('views.neUser.sub.export') }}
+            </a-button>
+          </a-popconfirm>
+        </div>
+      </template>
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-tooltip>
+          <template #title>{{ t('common.reloadText') }}</template>
+          <a-button type="text" @click.prevent="fnGetList()">
+            <template #icon><ReloadOutlined /></template>
+          </a-button>
+        </a-tooltip>
+      </template>
+
+      <div ref="graphG6Dom" class="chart"></div>
+      <button @click="actions['Enable/Disable Node States'].Breathing()">
+        Breathing()
+      </button>
+      <button @click="actions['Enable/Disable Node States'].Scaling()">
+        Scaling()
+      </button>
+
+      <button @click="actions['Enable/Disable Edge States'].Growing()">
+        Growing()
+      </button>
+      <button @click="actions['Enable/Disable Edge States'].Running()">
+        Running()
+      </button>
+      <!-- 组件 -->
+      <div class="charts">
+        <ChartGraphG6></ChartGraphG6>
+      </div>
     </a-card>
-
-    <a-row :gutter="16">
-      <a-col :lg="24" :md="24" :xs="24">
-        <a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
-          <!-- 插槽-卡片左侧侧 -->
-          <template #title>asdf</template>
-          <!-- 插槽-卡片右侧 -->
-          <template #extra> adf </template>
-
-          <div class="chart">
-            <ChartGraphG6 :option="{}"></ChartGraphG6>
-          </div>
-        </a-card>
-      </a-col>
-    </a-row>
   </PageContainer>
 </template>
 
 <style lang="less" scoped>
 .chart {
+  width: 100%;
+  height: calc(100vh - 300px);
+  background-color: rgb(255, 237, 237);
+}
+.charts {
   width: 100%;
   height: 500px;
   background-color: rgb(238, 237, 237);
+  margin-top: 32px;
 }
 </style>