修改

jinlin

2024-09-19 79da50ff6a8cabc082472c27ac85724ef664db67

 web/src/views/modules/taskReliability/RBD-edit-img.vue

@@ -468,47 +468,35 @@
              "shape": "edge",
              "id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7",
              "router": {
                "name": "manhattan",
                args: {
                        startDirections: ['top','bottom'], // 从下方开始
                        endDirections: ['left'],      // 向左方结束
                       },
                "name": "manhattan"
              },
              "connector": {
                "name": "rounded"
              },
              "source": {
                "cell": "10000",
                "port": "right1"
                "cell": "10000"
              },
              "target": {
                "cell": 15000,
                "port": "left1"
                "cell": 15000
              },
              "zIndex": 4
              "zIndex": -1
            },
            {
              "shape": "edge",
              "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f",
              "router": {
                "name": "manhattan",
                args: {
                        startDirections: ['top','bottom'], // 从下方开始
                        endDirections: ['left'],      // 向左方结束
                       },
                "name": "manhattan"
              },
              "connector": {
                "name": "rounded"
              },
              "source": {
                "cell": 15000,
                "port": "right1"
                "cell": 15000
              },
              "target": {
                "cell": "20000",
                "port": "left1"
                "cell": "20000"
              },
              "zIndex": 5
              "zIndex": -1
            }
          ]
        }
@@ -628,7 +616,7 @@
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top','bottom'], // 从下方开始
              startDirections: ['top', 'bottom'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
@@ -835,7 +823,7 @@
            router: {
              name: 'manhattan',
              args: {
                startDirections: ['top','bottom'], // 从下方开始
                startDirections: ['top', 'bottom'], // 从下方开始
                endDirections: ['left'],      // 向左方结束
              },
            },
@@ -1268,57 +1256,57 @@
          })
        })

        this.graph.on('node:mouseenter', ({node}) => {
          const container = document.getElementById('containerImg')
          const ports = container.querySelectorAll(
            '.x6-port-body',
          )
          this.showPorts(ports, true)
        })
        // this.graph.on('node:mouseenter', ({node}) => {
        //   const container = document.getElementById('containerImg')
        //   const ports = container.querySelectorAll(
        //     '.x6-port-body',
        //   )
        //   this.showPorts(ports, true)
        // })

        this.graph.on('node:mouseleave', ({node}) => {
          // if (node.hasTool('button-remove')) {
          //   node.removeTool('button-remove')
          // }
          const container = document.getElementById('containerImg')
          const ports = container.querySelectorAll(
            '.x6-port-body',
          )
          this.showPorts(ports, false)
        })
        // this.graph.on('node:mouseleave', ({node}) => {
        //   // if (node.hasTool('button-remove')) {
        //   //   node.removeTool('button-remove')
        //   // }
        //   const container = document.getElementById('containerImg')
        //   const ports = container.querySelectorAll(
        //     '.x6-port-body',
        //   )
        //   this.showPorts(ports, false)
        // })

        this.graph.on('edge:mouseenter', ({cell}) => {
          // alert(123)
          cell.addTools([
            {
              name: 'source-arrowhead',
            },
            {
              name: 'target-arrowhead',
              args: {
                attrs: {
                  fill: 'red',
                },
              },
            },
            {
              name: 'segments',
              args: {snapRadius: 20, attrs: {fill: '#444'}}
            },
          ])
        })

        this.graph.on('edge:mouseleave', ({cell}) => {
          cell.removeTools()
        })
        // this.graph.on('edge:mouseenter', ({cell}) => {
        //   // alert(123)
        //   cell.addTools([
        //     {
        //       name: 'source-arrowhead',
        //     },
        //     {
        //       name: 'target-arrowhead',
        //       args: {
        //         attrs: {
        //           fill: 'red',
        //         },
        //       },
        //     },
        //     {
        //       name: 'segments',
        //       args: {snapRadius: 20, attrs: {fill: '#444'}}
        //     },
        //   ])
        // })
        //
        // this.graph.on('edge:mouseleave', ({cell}) => {
        //   cell.removeTools()
        // })

        await this.getDiagram(this.dataForm.id)
      },
      showPorts(ports, show) {
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
          ports[i].style.visibility = show ? 'visible' : 'hidden'
        }
      },
      // showPorts(ports, show) {
      //   for (let i = 0, len = ports.length; i < len; i = i + 1) {
      //     ports[i].style.visibility = show ? 'visible' : 'hidden'
      //   }
      // },
      reset() {
        this.graph.drawBackground({color: '#fff'})
        const nodes = this.graph.getNodes()
@@ -1708,11 +1696,6 @@
            centerX = graphNode.position().x + graphNode.getBBox().width / 2
            centerY = graphNode.position().y + graphNode.getBBox().height / 2
            let result = this.addNodeAndConnect(graphNode, dragNode, centerX, centerY)
            if (!result) {
              dragNode.remove()
              this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
              return
            }

            let startPort = 'right1'
            let endPort = 'left1'
@@ -1721,9 +1704,13 @@
              endPort = 'top1'
            }

            inEdges[0].target = {cell: result.newStartNode.id, port: endPort}
            outEdges[0].source = {cell: result.newEndNode.id, port: startPort}
            inEdges[0].target = {cell: result.newStartNode.id}
            outEdges[0].source = {cell: result.newEndNode.id}
            graphNode.remove()
            if (!result.canPlace) {
//调用自动排版
              this.layoutDiagram()
            }
          }
        } else { //并行结构
          const graphNodeStartNodeId = graphNode.getData().startNodeId  // 获取画布上原有节点的开始ID
@@ -1748,35 +1735,37 @@
            pointXY.maxY + offHeight / 2 + 30 : pointXY.minY - offHeight / 2 - 30

          let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
          if (!result) {
            dragNode.remove()
            this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
            return
          console.log(result, 'result111')
          this.graph.addEdge({
            source: {cell: graphNodeStartNode},
            target: {cell: result.newStartNode},
            router: {
              name: 'manhattan',
              args: {
                startDirections: ['top', 'bottom'], // 从下方开始
                endDirections: ['left'],      // 向左方结束
              },
            },
            connector: {name: 'rounded'},
            zIndex: -1
          })
          this.graph.addEdge({
            source: {cell: result.newEndNode},
            target: {cell: graphNode},
            router: {
              name: 'manhattan',
              args: {
                startDirections: ['right'], // 从下方开始
                endDirections: ['top', 'bottom'],      // 向左方结束
              },
            },
            connector: {name: 'rounded'},
            zIndex: -1
          })
          if (!result.canPlace) {
//调用自动排版
            this.layoutDiagram()
          }
          this.graph.addEdge({
            source: {cell: graphNodeStartNode, port: 'right1'},
            target: {cell: result.newStartNode, port: 'left1'},
            router: {
              name: 'manhattan',
              args: {
                startDirections: ['top','bottom'], // 从下方开始
                endDirections: ['left'],      // 向左方结束
              },
            },
            connector: {name: 'rounded'}
          })
          this.graph.addEdge({
            source: {cell: result.newEndNode, port: 'right1'},
            target: {cell: graphNode, port: 'left1'},
            router: {
              name: 'manhattan',
              args: {
                startDirections: ['top','bottom'], // 从下方开始
                endDirections: ['left'],      // 向左方结束
              },
            },
            connector: {name: 'rounded'}
          })
        }
      },
      addNodeAndConnect(targetNode, dragNode, centerX, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
@@ -1800,17 +1789,24 @@
        }
        leftTopX = centerX - width / 2
        leftTopY = centerY - height / 2
        let canPlace = true;
        if (!this.canPlace(targetNode, dragNode, {leftTopX, leftTopY, width, height})) {
          return false
          canPlace = false
        }

        if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
          dragNode.position(leftTopX, leftTopY)
          return {newStartNode: dragNode, newEndNode: dragNode}
          return {newStartNode: dragNode, newEndNode: dragNode, canPlace: canPlace}
        } else if (dragNodeType === 'bridgeConnection') {
          return this.createBridgeConnection(leftTopX, leftTopY, dragNode)
          return {
            ...this.createBridgeConnection(leftTopX, leftTopY, dragNode),
            ...{canPlace: canPlace}
          }
        } else {
          return this.createParallelBrach(leftTopX, centerY, dragNode)
          return {
            ...this.createParallelBrach(leftTopX, centerY, dragNode),
            ...{canPlace: canPlace}
          }
        }
      },
      // 相交的边
@@ -1831,7 +1827,7 @@
        } else {
          centerX = dragNode.position().x + dragNode.getBBox().width / 2
          centerY = source.position().y + source.getBBox().height / 2
          if (target.getData().nodeType === 'node') {
          if (target.getData().nodeType === 'node' || target.getData().nodeType === 'dashedBox') {
            centerY = target.position().y + target.getBBox().height / 2
          }
        }
@@ -1842,14 +1838,14 @@
        let endNode = this.graph.getCellById(endNodeId)

        if (startNode && endNode) {
          let isRight = true;
          let startPort = 'right1'
          let endPort = 'left1'
          let routerStart = ['right'];
          let routerEnd = ['left'];
          if (this.isTopBottom(graphEdge)) {
            startPort = 'bottom1'
            endPort = 'top1'
            routerStart = ['top', 'bottom'];
            routerEnd = ['top', 'bottom'];
          }

          let isRight = true;
          if (this.hasOtherLineToMyLine(graphEdge.id)) {
            let leftX = startNode.position().x + startNode.getBBox().width
            let rightX = endNode.position().x
@@ -1858,41 +1854,48 @@
              isRight = false
            }
          }

          let result = this.addNodeAndConnect(null, dragNode, centerX, centerY)
          if (!result) {
            dragNode.remove()
            this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
            return
          }
          if (isRight) {
            graphEdge.target = {cell: result.newStartNode.id, port: endPort}
            if (endNode.getData()) {
              if ("parallel,vote,bridge".indexOf(endNode.getData().nodeType) > -1) {
                isRight = false
              }
            }
          }
          let result = this.addNodeAndConnect(null, dragNode, centerX, centerY)

          if (isRight) {
            graphEdge.target = {cell: result.newStartNode.id}
            this.graph.addEdge({
              source: {cell: result.newEndNode, port: startPort},
              target: {cell: endNode, port: endPort},
              source: {cell: result.newEndNode},
              target: {cell: endNode},
              router: {
                name: 'manhattan',
                args: {
                  startDirections: ['top','bottom'], // 从下方开始
                  endDirections: ['left'],      // 向左方结束
                  startDirections: routerStart, // 从下方开始
                  endDirections: routerEnd,      // 向左方结束
                },
              },
              connector: {name: 'rounded'}
              connector: {name: 'rounded'},
              zIndex: -1
            })
          } else {
            this.graph.addEdge({
              source: {cell: startNode, port: startPort},
              target: {cell: result.newStartNode, port: endPort},
              source: {cell: startNode},
              target: {cell: result.newStartNode},
              router: {
                name: 'manhattan',
                args: {
                  startDirections: ['top','bottom'], // 从下方开始
                  endDirections: ['left'],      // 向左方结束
                  startDirections: routerStart, // 从下方开始
                  endDirections: routerEnd,      // 向左方结束
                },
              },
              connector: {name: 'rounded'}
              connector: {name: 'rounded'},
              zIndex: -1
            })
            graphEdge.source = {cell: result.newEndNode.id, port: startPort}
            graphEdge.source = {cell: result.newEndNode.id}
          }
          if (!result.canPlace) {
            this.layoutDiagram()
          }
          // graphEdge.remove()
        }
@@ -1928,28 +1931,30 @@
        dragNode.setData({startNodeId: connectNode.id})

        this.graph.addEdge({
          source: {cell: connectNode, port: 'right1'},
          target: {cell: dashedBox, port: 'left1'},
          source: {cell: connectNode},
          target: {cell: dashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top','bottom'], // 从下方开始
              startDirections: ['right'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
          zIndex: -1
        })
        this.graph.addEdge({
          source: {cell: dashedBox, port: 'right1'},
          target: {cell: dragNode, port: 'left1'},
          source: {cell: dashedBox},
          target: {cell: dragNode},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top','bottom'], // 从下方开始
              startDirections: ['right'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
          zIndex: -1
        })
        return {newStartNode: connectNode, newEndNode: dragNode}
        /*        this.graph.addEdge({
@@ -1992,103 +1997,111 @@
                  connector: {name: 'rounded'}
                })*/
        this.graph.addEdge({
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftTopDashedBox, port: 'left1'},
          source: {cell: leftConnectNode},
          target: {cell: leftTopDashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top','bottom'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
              startDirections: ['top', 'bottom'],
              endDirections: ['left'],
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        this.graph.addEdge({
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftBottomDashedBox, port: 'left1'},
          source: {cell: leftConnectNode},
          target: {cell: leftBottomDashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top','bottom'], // 从下方开始
              startDirections: ['top', 'bottom'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })

        let edgeTop = this.graph.addEdge({
          source: {cell: leftTopDashedBox, port: 'right1'},
          target: {cell: rightTopDashedBox, port: 'left1'},
          source: {cell: leftTopDashedBox},
          target: {cell: rightTopDashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top','bottom'], // 从下方开始
              startDirections: ['right'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        let edgeBottom = this.graph.addEdge({
          source: {cell: leftBottomDashedBox, port: 'right1'},
          target: {cell: rightBottomDashedBox, port: 'left1'},
          source: {cell: leftBottomDashedBox},
          target: {cell: rightBottomDashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top','bottom'], // 从下方开始
              startDirections: ['right'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })

        this.graph.addEdge({
          source: {cell: rightTopDashedBox, port: 'right1'},
          target: {cell: rightConnectNode, port: 'left1'},
          source: {cell: rightTopDashedBox},
          target: {cell: rightConnectNode},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top','bottom'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
              startDirections: ['right'], // 从下方开始
              endDirections: ['top', 'bottom'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        this.graph.addEdge({
          source: {cell: rightBottomDashedBox, port: 'right1'},
          target: {cell: rightConnectNode, port: 'left1'},
          source: {cell: rightBottomDashedBox},
          target: {cell: rightConnectNode},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top','bottom'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
              startDirections: ['right'],
              endDirections: ['top', 'bottom'],
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })

        this.graph.addEdge({
          source: {cell: edgeTop},
          target: {cell: alignCenterDashedBox, port: 'top1'},
          target: {cell: alignCenterDashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top','bottom'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
              startDirections: ['top', 'bottom'], // 从下方开始
              endDirections: ['top', 'bottom'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        this.graph.addEdge({
          source: {cell: alignCenterDashedBox, port: 'bottom1'},
          source: {cell: alignCenterDashedBox},
          target: {cell: edgeBottom},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top','bottom'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
              startDirections: ['top', 'bottom'], // 从下方开始
              endDirections: ['top', 'bottom'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        dragNode.remove()
        return {newStartNode: leftConnectNode, newEndNode: rightConnectNode}
@@ -2274,9 +2287,20 @@
        return false
      },
      isTopBottom(edge) {
        if (edge.source.port === 'top1' || edge.source.port === 'bottom1' || edge.target.port === 'top1' || edge.target.port === 'bottom1') {
        if (this.hasTopBottom(edge.getRouter().args.startDirections) && this.hasTopBottom(edge.getRouter().args.endDirections)) {
          return true
        }
        return false
      },
      hasTopBottom(object) {
        let result = false
        for (let a of object) {
          if (a == "top" || a == "bottom") {
            result = true
            break
          }
        }
        return result
      },
      isMultipleBrach(node) {
        let outEdges = this.getOutLinesOfNode(node)