feat: 基站状态页面及拓扑展示页面功能实现

src/views/monitor/topologyBuild/hooks/registerEdge.ts

@@ -130,26 +130,17 @@ export function edgeLineAnimateState() {
 
         // circle-move 圆点沿边运动
         if (name === 'circle-move') {
-          let back1 = group.find(
-            (ele: any) => ele.get('name') === 'circle-stroke1'
+          const backArr = group.findAll((ele: any) =>
+            ele.get('name').startsWith('circle-stroke')
           );
-          if (back1) {
-            back1.remove();
-            back1.destroy();
-          }
-          let back2 = group.find(
-            (ele: any) => ele.get('name') === 'circle-stroke2'
-          );
-          if (back2) {
-            back2.remove();
-            back2.destroy();
-          }
           if (value) {
+            if (backArr.length > 0) return;
+
             // 第一个矩形边
             const fillColor = typeof value === 'string' ? value : '#1890ff';
             // 边缘路径的起始位置
             const startPoint = keyShape.getPoint(0);
-            back1 = group.addShape('circle', {
+            const back1 = group.addShape('circle', {
               attrs: {
                 x: startPoint.x,
                 y: startPoint.y,
@@ -159,6 +150,7 @@ export function edgeLineAnimateState() {
               // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
               name: 'circle-stroke1',
             });
+            back1.show();
             back1.animate(
               (ratio: any) => {
                 // 每帧中的操作。比率范围从 0 到 1，表示动画的进度。返回修改后的配置
@@ -177,7 +169,7 @@ export function edgeLineAnimateState() {
             );
             // 第二个矩形边
             const endPoint = keyShape.getPoint(1);
-            back2 = group.addShape('circle', {
+            const back2 = group.addShape('circle', {
               zIndex: -2,
               attrs: {
                 x: endPoint.x,
@@ -188,7 +180,7 @@ export function edgeLineAnimateState() {
               // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
               name: 'circle-stroke2',
             });
-
+            back2.show();
             back2.animate(
               (ratio: any) => {
                 // 每帧中的操作。比率范围从 0 到 1，表示动画的进度。返回修改后的配置
@@ -205,6 +197,14 @@ export function edgeLineAnimateState() {
                 duration: 2 * 1000, // 执行一次的持续时间
               }
             );
+          } else {
+            if (backArr.length <= 0) return;
+            backArr.forEach((ele: any) => {
+              ele.hide();
+              ele.remove();
+              ele.destroy();
+            });
+            backArr.length = 0;
           }
           return;
         }
@@ -212,11 +212,7 @@ export function edgeLineAnimateState() {
         // line-dash 虚线运动
         if (name === 'line-dash') {
           if (value) {
-            keyShape.stopAnimate();
-            keyShape.attr({
-              lineDash: null,
-              lineDashOffset: null,
-            });
+            if (keyShape.cfg.animating) return;
             let index = 0;
             keyShape.animate(
               () => {
@@ -234,6 +230,12 @@ export function edgeLineAnimateState() {
                 duration: 3000, // 执行一次的持续时间
               }
             );
+          } else {
+            keyShape.stopAnimate();
+            keyShape.attr({
+              lineDash: null,
+              lineDashOffset: null,
+            });
           }
           return;
         }
@@ -246,6 +248,7 @@ export function edgeLineAnimateState() {
             back.remove();
             back.destroy();
           }
+
           const { path, stroke, lineWidth } = keyShape.attr();
           back = group.addShape('path', {
             attrs: {

src/views/monitor/topologyBuild/hooks/registerNode.ts

@@ -300,12 +300,23 @@ export function nodeImageAnimateState() {
             ele.get('name').startsWith('circle-shape')
           );
           if (value) {
-            if (Array.isArray(backArr) && backArr.length === 3) return;
+            const fillColor = typeof value === 'string' ? value : '#f5222d';
+            // 移除
+            if (Array.isArray(backArr) && backArr.length >= 3) {
+              for (const back of backArr) {
+                back.stopAnimate();
+                back.hide();
+                back.remove();
+                back.destroy();
+              }
+              backArr.length = 0;
+            }
+
+            // 根据大小确定半径
             const size = Array.isArray(model?.size) ? model?.size : [40, 40];
             const x = size[0] / 2;
             const y = -size[1] / 2;
             const r = 3;
-            const fillColor = typeof value === 'string' ? value : '#f5222d';
 
             // 第一个背景圆
             const back1 = group.addShape('circle', {