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,
+          controlPoints: [{ x: 400, y: 400 }],
+          lineWidth: 1,
+          stroke: '#d580ff',
         },
-    {
+        labelShape: {
-      id: 'ims-ems',
+          text: 'N6',
-      source: 'combo-ims',
+          position: 'start',
-      target: 'combo-ems',
+          autoRotate: true,
-      data: {},
+          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: [
               {