fix: 类型异常导致编译失败

src/components/ChartGraphG6/index.vue

@@ -51,26 +51,31 @@ const ExtGraph = extend(Graph, {
   // },
   edges: {
     'polyline-edge': Extensions.PolylineEdge,
-    'custom-edge': Extensions.CubicEdge,
+    'cubic-edge': Extensions.CubicEdge,
+    // 'custom-edge': Extensions.CubicEdge,
   },
 });
 
 const data = {
   nodes: [
+    // 0 基站
     {
       id: '0',
       data: {
-        x: 100,
+        x: 80,
-        y: 100,
+        y: 150,
         type: 'circle-node',
-        color: '#5a99d5',
+        color: '#fffff',
         keyShape: {
-          r: 32,
+          r: 24,
           width: 48,
           height: 48,
+          fill: '#9EC9FF',
+          stroke: '#5B8FF9',
+          lineWidth: 2,
         },
         labelShape: {
-          text: '基站222222222222222222',
+          text: '基站',
           position: 'bottom',
           maxWidth: '200%',
           offsetY: 10,
@@ -78,39 +83,12 @@ const data = {
         labelBackgroundShape: {},
         iconShape: {
           img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-          width: 48,
+          width: 24,
-          height: 48,
+          height: 24,
-        },
-        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,
-            },
-          ],
         },
       },
     },
+    // 1 DM
     {
       id: '1',
       data: {
@@ -119,6 +97,7 @@ const data = {
         y: 350,
       },
     },
+    // 2 O&M
     {
       id: '2',
       data: {
@@ -237,7 +216,7 @@ const data = {
       source: '0',
       target: 'combo-5gc',
       data: {
-        type: 'custom-edge',
+        type: 'cubic-edge',
         animates: {
           update: [
             {
@@ -468,7 +447,7 @@ function initChart() {
         type: 'lod-controller',
         disableLod: true,
       },
-    ],
+    ] as any,
     modes: {
       default: [
         {
@@ -489,7 +468,7 @@ function initChart() {
         'drag-canvas',
         // 'click-select',
         'zoom-canvas',
-      ],
+      ] as any,
     },
 
     theme: {
@@ -500,73 +479,85 @@ function initChart() {
           dataTypeField: 'parentId',
         },
       },
+    } 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: data.label,
+          },
+          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,
+        },
+      };
     },
-    // node: model => {
+    // 全局边 三次贝塞尔曲线
-    //   const { id, data } = model;
+    edge: model => {
-    //   return {
+      const { id, source, target, data } = model;
-    //     id,
+      return {
-    //     data: {
+        id,
-    //       ...data,
+        source,
-    //       type: 'rect-node',
+        target,
-    //       keyShape: {
+        data: {
-    //         width: 80,
+          type: 'cubic-edge',
-    //         height: 40,
+          animates: {
-    //         radius: 8,
+            update: [
-    //       },
+              {
-    //       labelShape: {
+                fields: ['lineDash'],
-    //         position: 'center',
+                shapeId: 'keyShape',
-    //         text: data.label,
+                states: ['growing', 'running'],
-    //       },
+                iterations: Infinity,
-    //       animates: {
+                duration: 2000,
-    //         update: [
+              },
-    //           {
+              {
-    //             fields: ['opacity'],
+                fields: ['offsetDistance'],
-    //             shapeId: 'haloShape',
+                shapeId: 'buShape',
-    //             states: ['breathing'],
+                states: ['circleRunning'],
-    //             iterations: Infinity,
+                iterations: Infinity,
-    //             direction: 'alternate',
+                duration: 2000,
-    //             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,
-    //           },
-    //         ],
-    //       },
-    //     },
-    //   };
-    // },
-    edge: {
-      animates: {
-        update: [
-          {
-            fields: ['lineDash'],
-            shapeId: 'keyShape',
-            states: ['growing', 'running'],
-            iterations: Infinity,
-            duration: 2000,
           },
-          {
+          ...data,
-            fields: ['offsetDistance'],
+        },
-            shapeId: 'buShape',
+      };
-            states: ['circleRunning'],
-            iterations: Infinity,
-            duration: 2000,
-          },
-        ],
-      },
     },
     combo: model => {
       const { id, data } = model;
@@ -596,6 +587,7 @@ function initChart() {
         },
       };
     },
+    // 节点状态
     nodeState: {
       breathing: {
         haloShape: {
@@ -613,7 +605,7 @@ function initChart() {
           height: 60,
         },
       },
-    },
+    } as any,
     edgeState: {
       growing: {
         keyShape: {
@@ -693,7 +685,7 @@ function initChart() {
 const actions = {
   'Enable/Disable Node States': {
     Breathing: () => {
-      graph.getAllNodesData().forEach(node => {
+      graph.getAllNodesData().forEach((node:any) => {
         if (graph.getItemState(node.id, 'breathing')) {
           graph.setItemState(node.id, 'breathing', false);
         } else {
@@ -703,7 +695,7 @@ const actions = {
       });
     },
     Scaling: () => {
-      graph.getAllNodesData().forEach(node => {
+      graph.getAllNodesData().forEach((node:any) => {
         if (graph.getItemState(node.id, 'scaling')) {
           graph.setItemState(node.id, 'scaling', false);
         } else {
@@ -715,7 +707,7 @@ const actions = {
   },
   'Enable/Disable Edge States': {
     Growing: () => {
-      graph.getAllEdgesData().forEach(edge => {
+      graph.getAllEdgesData().forEach((edge:any) => {
         if (graph.getItemState(edge.id, 'growing')) {
           graph.setItemState(edge.id, 'growing', false);
         } else {
@@ -725,7 +717,7 @@ const actions = {
       });
     },
     Running: () => {
-      graph.getAllEdgesData().forEach(edge => {
+      graph.getAllEdgesData().forEach((edge:any) => {
         if (graph.getItemState(edge.id, 'running')) {
           graph.setItemState(edge.id, 'running', false);
         } else {