Merge remote-tracking branch 'origin/master'

xyc

2024-05-09 a9bf1966f94955f542d39147fb1539befe2b4eec

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

@@ -37,6 +37,10 @@
                <i style="font-size: 1rem;" class="wt-iconfont icon-diduiqi"></i>
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="undo()">撤销</el-button>
              <el-button @click="redo()">重做</el-button>
            </el-form-item>
          </el-form>
          <div id="containerImg" style="border: 1px solid #EAEBEE;border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);height: 100%">
@@ -61,6 +65,7 @@
  import {setHartBeat} from '@/commonJS/common';
  import Cookies from 'js-cookie'
  import {getUUID} from '../../../../packages/utils'
  import RBDDefault from './RBD-default.json'

  export default {
    name: 'RBD-edit-img',
@@ -122,18 +127,18 @@
            imgPath: 'parallel',
            imgName: 'parallel',
            nodeType: 'parallel',
            imgWidth: 60,
            imgHeight: 60,
            imgWidth: 50,
            imgHeight: 50,
            imgId: '9',
            data: {}
          },
          {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}},
          {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
          {
            imgPath: 'switch',
            imgName: 'switch',
            nodeType: 'switch',
            imgWidth: 60,
            imgHeight: 60,
            imgWidth: 50,
            imgHeight: 50,
            imgId: '5',
            data: {}
          },
@@ -141,24 +146,22 @@
            imgPath: 'bridgeConnection',
            imgName: 'bridgeConnection',
            nodeType: 'bridgeConnection',
            imgWidth: 60,
            imgHeight: 60,
            imgWidth: 50,
            imgHeight: 50,
            imgId: '10',
            data: {}
          },
          {
            imgPath: 'dashedBox',
            imgName: 'dashedBox',
            nodeType: 'dashedBox',
            imgWidth: 60,
            imgHeight: 60,
            imgId: '10000',
            data: {}
          },
          // {
          //   imgPath: 'dashedBox',
          //   imgName: 'dashedBox',
          //   nodeType: 'dashedBox',
          //   imgWidth: 60,
          //   imgHeight: 60,
          //   imgId: '10000',
          //   data: {}
          // },
        ],
        imagesList2: [
          // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
        ],
        imagesList2: [],
        nodeType: '',
        first: true,
        shape: '',
@@ -175,28 +178,6 @@
          hasPublish: 0,
          urlPref: '',
        },
        // emptyJson: {
        //   // 节点
        //   nodes: [
        //     {
        //       id: 'node1', // String，可选，节点的唯一标识
        //       width: 500,   // Number，可选，节点大小的 width 值
        //       height: 300,  // Number，可选，节点大小的 height 值
        //       label: '该项目还未配置厂家网络图',
        //       attrs: {
        //         body: {
        //           strokeWidth: 0
        //         },
        //       }
        //       //   text: {
        //       //     text: '该项目还未编制网络图',
        //       //     // fontSize: 56,
        //       //     fill: 'rgba(0,0,0,0.7)'
        //       //   },
        //       // },
        //     }
        //   ],
        // },
        type: '',
        id: '',
        graph: null,
@@ -370,7 +351,7 @@
          if (this.diagramJson.cells.length !== 0) {
            this.graph.fromJSON(this.diagramJson)
          } else {
            this.initCells()
            this.graph.fromJSON(RBDDefault)
          }
          this.isFirstLoad = false;
          console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
@@ -520,7 +501,7 @@
          getDropNode: (node) => {
            const {width, height} = node.size()
            if (node.getData().type && node.getData().nodeType === 'dashedBox') {
              return node.clone().size(100, 80)
              return node.clone().size(100, 60)
            }
            if (node.getData().type && node.getData().type === 'imageNodes2') {
              return node.clone({keepId: true})
@@ -546,7 +527,7 @@
            {
              title: '运算符号',
              name: 'group1',
              graphHeight: 260,
              graphHeight: 200,
            },
            {
              title: '设备节点',
@@ -694,21 +675,6 @@
          }
          return false
        })
//undo redo
        this.graph.bindKey(['meta+z', 'ctrl+z'], () => {
          if (this.graph.history.canUndo()) {
            this.graph.history.undo()
          }
          return false
        })

        this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
          if (this.graph.history.canRedo()) {
            this.graph.history.redo()
          }
          return false
        })

// select all
        this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
          const nodes = this.graph.getNodes()
@@ -858,12 +824,7 @@
            this.getBridgeConnection()
          }*/
        });
        // 监听节点位置改变事件
        // this.graph.on('node:change:position', ({node}) => {
        //   this.hasMoveNode = true
        //   this.hasMoveSingleNode = node
        // });
        this.graph.on('cell:click', ({cell}) => {
        this.graph.on('cell:contextmenu', ({cell}) => {
          // this.type.value = cell.isNode() ? "node" : "edge"
          this.type = cell.isNode() ? 'node' : 'edge'
          this.shape = cell.shape
@@ -1156,9 +1117,9 @@
        let graphNodeType = graphNode.getData().nodeType

        let dragNodeType = dragNode.getData().nodeType
        let offHeight = 60
        let offHeight = 50
        if (dragNodeType === 'node') {
          offHeight = 60
          offHeight = 50
        } else if (dragNodeType === 'bridgeConnection') {
          offHeight = 230
        } else {
@@ -1180,7 +1141,11 @@
          }
          if (startNode && endNode) {
            let centerY = graphNode.position().y
            let result = this.addNodeAndConnect(startNode, endNode, dragNode, dragNode.position().x, centerY)
            let result = this.addNodeAndConnect(graphNode, dragNode, dragNode.position().x, centerY)
            if (!result){
              dragNode.remove()
              return
            }
            inEdges[0].target = {cell: result.newStartNode.id, port: 'left1'}
            outEdges[0].source = {cell: result.newEndNode.id, port: 'right1'}
            graphNode.remove()
@@ -1206,7 +1171,11 @@
          let centerX = minX + (maxX - minX) / 2
          let centerY = graphNodeY - pointXY.minY > pointXY.maxY - graphNodeY ? pointXY.maxY + 30 : pointXY.minY - offHeight - 30

          let result = this.addNodeAndConnect(graphNodeStartNode, graphNode, dragNode, minX, centerY)
          let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
          if (!result){
            dragNode.remove()
            return
          }
          this.graph.addEdge({
            source: {cell: graphNodeStartNode, port: 'right1'},
            target: {cell: result.newStartNode, port: 'left1'},
@@ -1221,15 +1190,35 @@
          })
        }
      },
      addNodeAndConnect(startNode, endNode, dragNode, leftX, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
      addNodeAndConnect(targetNode, dragNode, leftX, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
        let width =100, height = 80, leftTopX = leftX , leftTopY = centerY
        let dragNodeType = dragNode.getData().nodeType
        if (dragNodeType === 'node') {
          width =60
          height = 60
        }else if (dragNodeType === 'dashedBox') {
          width =100
          height = 60
        } else if (dragNodeType === 'bridgeConnection') {
          width =450
          height = 160
          // leftTopY = 240/2
        } else {
          width =270
          height = 60
        }

        if (!this.canPlace(targetNode,dragNode,{leftTopX, leftTopY, width, height})){
          return false
        }

        if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
          dragNode.position(leftX + 50, centerY);
          dragNode.position(leftX, centerY)
          return {newStartNode: dragNode, newEndNode: dragNode}
        } else if (dragNodeType === 'bridgeConnection') {
          return this.createBridgeConnection(leftX, centerY, startNode, endNode, dragNode)
          return this.createBridgeConnection(leftX, centerY, dragNode)
        } else {
          return this.createParallelBrach(leftX, centerY, startNode, endNode, dragNode)
          return this.createParallelBrach(leftX, centerY, dragNode)
        }
      },
      // 相交的边
@@ -1255,7 +1244,11 @@
              isRight = false
            }
          }
          let result = this.addNodeAndConnect(startNode, endNode, dragNode, dragNode.position().x, centerY)
          let result = this.addNodeAndConnect(null, dragNode, dragNode.position().x, centerY)
          if (!result){
            dragNode.remove()
            return
          }
          if (isRight) {
            graphEdge.target = {cell: result.newStartNode.id, port: endPort}
            this.graph.addEdge({
@@ -1276,111 +1269,6 @@
          }
          // graphEdge.remove()
        }
      },
      initCells() {
        const startNode = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 60,
          height: 60,
          id: '10000',
          data: {
            type: 'imageNodes',
            endNodeId: '20000',
            dataId: '',
            nodeType: 'start',
            nodeTypeExt: '',
            voteNum: ''
          },
          attrs: {
            image: {
              'xlink:href': '/modelImg/start.svg',
            },
            text: {
              text: 'start',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
          },
          ports: {...this.ports},
        })
        const dashedBox = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 100,
          height: 80,
          id: 15000,
          data: {
            type: 'imageNodes',
            dataId: '',
            nodeType: 'dashedBox',
            nodeTypeExt: '',
            voteNum: ''
          },
          attrs: {
            image: {
              'xlink:href': '/modelImg/dashedBox.svg',
            },
            text: {
              text: 'dashedBox',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
          },
          ports: {...this.ports},
        })
        const endNode = this.graph.addNode({
          shape: 'image',
          width: 60,
          height: 60,
          id: '20000',
          data: {
            type: 'imageNodes',
            startNodeId: '10000',
            dataId: '',
            nodeType: 'end',
            nodeTypeExt: '',
            voteNum: ''
          },
          attrs: {
            image: {
              'xlink:href': '/modelImg/end.svg',
            },
            text: {
              text: 'end',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
          },
          ports: {...this.ports},
        })
        startNode.position(-600, 0);
        dashedBox.position(0, (startNode.size().height - dashedBox.size().height) / 2);
        endNode.position(600, 0);
        this.graph.addEdge({
          source: {cell: startNode, port: 'right1'},
          target: {cell: dashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        this.graph.addEdge({
          source: {cell: dashedBox, port: 'right1'},
          target: {cell: endNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
      },
      findIntersectsEdge(graph, node) {
        const edges = graph.getEdges()
@@ -1406,7 +1294,7 @@
          return false
        }
      },
      createParallelBrach(x, y, startNode, endNode, dragNode) {
      createParallelBrach(x, y, dragNode) {
        dragNode.position(x + 320, y - dragNode.size().height / 2)
        const connectNode = this.createConnectNode(x + 50, y)
        const dashedBox = this.createDashedBox(x + 150, y)
@@ -1438,7 +1326,7 @@
                  connector: {name: 'rounded'}
                })*/
      },
      createBridgeConnection(x, y, startNode, endNode, dragNode) {
      createBridgeConnection(x, y, dragNode) {
        const leftTopDashedBox = this.createDashedBox(x + 120, y)
        const rightTopDashedBox = this.createDashedBox(x + 400, y)

@@ -1558,8 +1446,8 @@
        let connectNode = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 30,
          height: 30,
          width: 10,
          height: 10,
          id: connectId,
          data: {
            isSelfCreated: true,
@@ -1592,10 +1480,10 @@
      createBridgeNode(x, y) {
        const connectId = getUUID().toString()
        const dragNodeId = getUUID().toString()
        let connectNode = this.graph.addNode({
        let bridgeNode = this.graph.addNode({
          shape: 'image',
          width: 50,
          height: 50,
          width: 30,
          height: 30,
          id: connectId,
          data: {
            isSelfCreated: true,
@@ -1622,8 +1510,8 @@
          },
          ports: {...this.ports},
        })
        connectNode.position(x, y - connectNode.size().height / 2)
        return connectNode
        bridgeNode.position(x, y - bridgeNode.size().height / 2)
        return bridgeNode
      },
      getYRange(inEdges, startNode, pointXY) {
        for (let inEdge of inEdges) {
@@ -1769,6 +1657,34 @@
        console.log(edges, '获取画布上的结束节点所有的线 edges')
        return edges.filter(edge => edge.source.cell === node.id)
      },
      canPlace(targetNode,dragNode,box2){
        const nodes = this.graph.getNodes()
        let intersectNodes = []
        // 检查除当前节点之外的所有节点的包围框是否相交
        for (const otherNode of nodes) {
          if (otherNode === dragNode || otherNode === targetNode) continue;
             const bbox1 = otherNode.getBBox();
            if (bbox1.x < box2.leftTopX + box2.width &&
              bbox1.x + bbox1.width > box2.leftTopX &&
              bbox1.y < box2.leftTopY + box2.height &&
              bbox1.y + bbox1.height > box2.leftTopY) {
              intersectNodes.push(otherNode);
            }
        }
        console.log(box2,'box2')
        console.log(intersectNodes,'intersectNodes')
        return intersectNodes.length <= 0;
      },
      undo(){
        if (this.graph.history.canUndo()) {
          this.graph.history.undo()
        }
      },
      redo(){
        if (this.graph.history.canRedo()) {
          this.graph.history.redo()
        }
      }
    },
  }
</script>