bug-5492-9

src/view/process/process-flow/config/ProcessConfig.js

@@ -82,10 +82,10 @@ export default class Process {
         line: {
           stroke: '#A2B1C3',
           strokeWidth: 3,
-          strokeDasharray: 5,
-          style: {
-            animation: 'ant-line 30s infinite linear',
-          },
+          strokeDasharray: 6,
+          // style: {
+          //   animation: 'ant-line 30s infinite linear',
+          // },
         },
         router: {
           name: 'metro',
@@ -112,9 +112,9 @@ export default class Process {
                 stroke: '#A2B1C3',
                 strokeWidth: 3,
                 strokeDasharray: 6,
-                style: {
-                  animation: 'ant-line 30s infinite linear',
-                },
+                // style: {
+                //   animation: 'ant-line 30s infinite linear',
+                // },
               },
             },
             zIndex: 0,
@@ -451,10 +451,22 @@ export default class Process {
 
     this.graph.on('node:mouseleave', ({ view} ) => {
     })
+
     this.graph.on('node:click', ({ node} ) => {
-      console.log('click')
+      console.log('node:click')
       // this.graph.clearTransformWidgets()
+      //取消动画
+      let allEdges=this.graph.getEdges()
+      allEdges?.forEach((edge) => {
+        edge.attr('line/style/animation', '')
+      })
+      //设置动画
+      let edges = this.graph.getOutgoingEdges(node)
+      edges?.forEach((edge) => {
+        edge.attr('line/style/animation', 'ant-line 30s infinite linear')
+      })
     })
+
     // 监听节点选中
     this.graph.on('node:selected', ({ node} ) => {
       console.log('selected')
@@ -462,6 +474,11 @@ export default class Process {
     })
     this.graph.on('node:unselected', ({ node} ) => {
       this.showPorts(this.graph.findViewByCell(node.id),false)
+      //取消动画
+      let allEdges=this.graph.getEdges()
+      allEdges?.forEach((edge) => {
+        edge.attr('line/style/animation', '')
+      })
     })
     // endregion
 

src/view/process/process-flow/process-setting.vue

@@ -393,6 +393,11 @@ export default {
      * @date   : 2023/2/3 9:30
      */
     save() {
+      //取消动画
+      let allEdges=this.graph.getEdges()
+      allEdges?.forEach((edge) => {
+        edge.attr('line/style/animation', '')
+      })
       //节点组大小和是否展开存在data中
       this.graph.getNodes().filter(it => it.shape == 'groupNode').forEach((it) => {
         //如果是收起状态，存展开大小，如果展开，存当时的实际大小