时序图

wente

2024-10-14 7917c76b02b213a5fa805a6e2c9936167fae5cc8

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

@@ -109,7 +109,7 @@
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "start",
                  "text": "",
                  "refY2": 4
                },
                "image": {
@@ -232,7 +232,7 @@
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "dashedBox",
                  "text": "",
                  "refY2": 4
                },
                "image": {
@@ -260,7 +260,7 @@
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,

                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
@@ -354,7 +354,7 @@
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "end",
                  "text": "",
                  "refY2": 4
                },
                "image": {
@@ -468,7 +468,11 @@
              "shape": "edge",
              "id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7",
              "router": {
                "name": "manhattan"
                "name": "manhattan",
                "args": {
                        "startDirections": ["right"],
                        "endDirections": ["left"]
                       }
              },
              "connector": {
                "name": "rounded"
@@ -485,7 +489,11 @@
              "shape": "edge",
              "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f",
              "router": {
                "name": "manhattan"
                "name": "manhattan",
                "args": {
                        "startDirections": ["right"],
                        "endDirections": ["left"]
                       }
              },
              "connector": {
                "name": "rounded"
@@ -519,19 +527,19 @@
        timer: null,
        imagesList: [
          {
            imgPath: 'parallel',
            imgName: 'parallel',
            nodeType: 'parallel',
            imgPath: 'switch',
            imgName: '',
            nodeType: 'switch',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '9',
            data: {}
          },
          {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
          {imgPath: 'vote', imgName: '', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
          {
            imgPath: 'switch',
            imgName: 'switch',
            nodeType: 'switch',
            imgPath: 'parallel',
            imgName: '',
            nodeType: 'parallel',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '5',
@@ -539,22 +547,13 @@
          },
          {
            imgPath: 'bridgeConnection',
            imgName: 'bridgeConnection',
            imgName: '',
            nodeType: 'bridgeConnection',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '10',
            data: {}
          },
          // {
          //   imgPath: 'dashedBox',
          //   imgName: 'dashedBox',
          //   nodeType: 'dashedBox',
          //   imgWidth: 60,
          //   imgHeight: 60,
          //   imgId: '10000',
          //   data: {}
          // },
        ],
        imagesList2: [],
        nodeType: '',
@@ -1927,6 +1926,12 @@
      createParallelBrach(x, y, dragNode) {
        dragNode.position(x + 320, y - dragNode.size().height / 2)
        const connectNode = this.createConnectNode(x + 50, y)
        this.createBrach(dragNode,connectNode,x,y-50)
        this.createBrach(dragNode,connectNode,x,y+50)

        return {newStartNode: connectNode, newEndNode: dragNode}
      },
      createBrach(dragNode,connectNode,x,y){
        const dashedBox = this.createDashedBox(x + 150, y)
        dragNode.setData({startNodeId: connectNode.id})

@@ -1936,7 +1941,7 @@
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['right'], // 从下方开始
              startDirections: ['top','bottom'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
@@ -1950,25 +1955,12 @@
            name: 'manhattan',
            args: {
              startDirections: ['right'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
              endDirections: ['top','bottom'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        return {newStartNode: connectNode, newEndNode: dragNode}
        /*        this.graph.addEdge({
                  source: {cell: startNode, port: 'right1'},
                  target: {cell: connectNode, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })
                this.graph.addEdge({
                  source: {cell: dragNode, port: 'right1'},
                  target: {cell: endNode, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })*/
      },
      createBridgeConnection(x, y, dragNode) {
        console.log(x, y, 'leftX centerY')
@@ -1977,10 +1969,36 @@

        const leftConnectNode = this.createConnectNode(x, y + 87)
        const alignCenterDashedBox = this.createDashedBox(x + 209, y + 87)
        const rightConnectNode = this.createBridgeNode(x + 530, y + 87)

        const leftBottomDashedBox = this.createDashedBox(x + 40, y + 160)
        const rightBottomDashedBox = this.createDashedBox(x + 380, y + 160)
        let edgeTop = this.graph.addEdge({
          source: {cell: leftTopDashedBox},
          target: {cell: rightTopDashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['right'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        let edgeBottom = this.graph.addEdge({
          source: {cell: leftBottomDashedBox},
          target: {cell: rightBottomDashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['right'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })

        const rightConnectNode = this.createBridgeNode(x + 530, y + 87, leftConnectNode.id, edgeTop.id, edgeBottom.id)

        rightConnectNode.setData({startNodeId: leftConnectNode.id})
        leftConnectNode.setData({endNodeId: rightConnectNode.id})
@@ -2016,33 +2034,6 @@
            name: 'manhattan',
            args: {
              startDirections: ['top', 'bottom'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })

        let edgeTop = this.graph.addEdge({
          source: {cell: leftTopDashedBox},
          target: {cell: rightTopDashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['right'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        let edgeBottom = this.graph.addEdge({
          source: {cell: leftBottomDashedBox},
          target: {cell: rightBottomDashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['right'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
@@ -2127,7 +2118,7 @@
              'xlink:href': '/modelImg/dashedBox.svg',
            },
            text: {
              text: 'dashedBox',
              text: '',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
@@ -2163,7 +2154,7 @@
              'xlink:href': '/modelImg/connect.svg',
            },
            text: {
              text: 'connect',
              text: '',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
@@ -2177,18 +2168,19 @@
        connectNode.position(x, y - connectNode.size().height / 2)
        return connectNode
      },
      createBridgeNode(x, y) {
        const connectId = getUUID().toString()
      createBridgeNode(x, y, connectId, edgeTopId, edgeBottomId) {
        const dragNodeId = getUUID().toString()
        let bridgeNode = this.graph.addNode({
          shape: 'image',
          width: 30,
          height: 30,
          id: connectId,
          id: dragNodeId,
          data: {
            isSelfCreated: true,
            type: 'imageNodes',
            endNodeId: dragNodeId,
            startNodeId: connectId,
            edgeTopId: edgeTopId,
            edgeBottomId: edgeBottomId,
            dataId: '',
            nodeType: 'bridge',
            nodeTypeExt: '',