Merge remote-tracking branch 'origin/master'

xyc

2024-05-11 08dfaa8824d174bae7a84f7f99a3db4d76542471

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

@@ -1,14 +1,14 @@
<template>
  <div>
    <el-row :gutter="[8,8]">
      <el-col :span="4">
      <el-col :span="3">
        <div :style="'height:' +left_p+'px'">
          <div style="height: 100%">
            <div id="stencilImg"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
      <el-col :span="21">
        <div class="fa-card-a">
          <el-form :inline="true">
            <el-form-item>
@@ -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',
@@ -98,67 +103,65 @@
        modelType: '',
        timer: null,
        imagesList: [
          {imgPath: 'start', imgName: 'start', nodeType: 'start', imgWidth: 60, imgHeight: 60, imgId: '1', data: {}},
          {imgPath: 'end', imgName: 'end', nodeType: 'end', imgWidth: 60, imgHeight: 60, imgId: '2', data: {}},
          {
            imgPath: 'connect',
            imgName: 'connect',
            nodeType: 'connect',
            imgWidth: 30,
            imgHeight: 30,
            imgId: '3',
            data: {}
          },
          {
            imgPath: 'connect',
            imgName: 'bridge',
            nodeType: 'bridge',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '12',
            data: {}
          },
          {
            imgPath: 'switch',
            imgName: 'switch',
            nodeType: 'switch',
            imgWidth: 60,
            imgHeight: 60,
            imgId: '5',
            data: {}
          },
          // {imgPath: 'start', imgName: 'start', nodeType: 'start', imgWidth: 60, imgHeight: 60, imgId: '1', data: {}},
          // {imgPath: 'end', imgName: 'end', nodeType: 'end', imgWidth: 60, imgHeight: 60, imgId: '2', data: {}},
          // {
          //   imgPath: 'connect',
          //   imgName: 'connect',
          //   nodeType: 'connect',
          //   imgWidth: 30,
          //   imgHeight: 30,
          //   imgId: '3',
          //   data: {}
          // },
          // {
          //   imgPath: 'connect',
          //   imgName: 'bridge',
          //   nodeType: 'bridge',
          //   imgWidth: 50,
          //   imgHeight: 50,
          //   imgId: '12',
          //   data: {}
          // },
          {
            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: 'dashedBox',
            imgName: 'dashedBox',
            nodeType: 'dashedBox',
            imgWidth: 60,
            imgHeight: 60,
            imgId: '10000',
            imgPath: 'switch',
            imgName: 'switch',
            nodeType: 'switch',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '5',
            data: {}
          },
          {
            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: {}
          // },
        ],
        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,
@@ -367,11 +348,7 @@
        if (res.data !== null && (res.data.content != null)) {
          this.dataForm = res.data
          this.diagramJson = JSON.parse(this.dataForm.content)
          if (this.diagramJson.cells.length !== 0) {
            this.graph.fromJSON(this.diagramJson)
          } else {
            this.initCells()
          }
          this.isFirstLoad = false;
          console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')

@@ -379,13 +356,16 @@
          // this.graph.centerContent()
          // this.graph.zoomToFit()
        } else {
          await this.clearDiagram()
          this.graph.fromJSON(RBDDefault)
          this.isFirstLoad = false
        }
      },
      async clearDiagram() {
        this.dataForm.id = null
        // this.graph.fromJSON(this.emptyJson)
        this.graph.fromJSON('')
        this.graph.fromJSON(RBDDefault)
        this.graph.positionContent('left')
        this.isFirstLoad = false;
        // this.graph.centerContent()
        // this.graph.zoomToFit()
        // this.graph.freeze()
@@ -520,7 +500,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 +526,7 @@
            {
              title: '运算符号',
              name: 'group1',
              graphHeight: 360,
              graphHeight: 200,
            },
            {
              title: '设备节点',
@@ -694,21 +674,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()
@@ -719,68 +684,120 @@
//delete
        this.graph.bindKey('delete', () => {
          const cells = this.graph.getSelectedCells()
          console.log(cells,'cells')
          console.log(cells, 'cells')
          if (cells.length === 1) {
            this.$confirm('是否删除该节点?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let node = cells[0]
              if (!node.isNode()){
                this.$message({message: '请选中节点', type: 'warning'})
                return false; // 取消操作
            let node = cells[0]
            if (!node.isNode()) {
              this.$confirm('是否删除该连接线点?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
              })
              // this.$message({message: '请选中节点', type: 'warning'})
              return false; // 取消操作
            }
            let nodeType = node.getData().nodeType
            let deleteType = 0
            if (nodeType === 'node' || nodeType === 'dashedBox') {
              deleteType = 1
            } else if ('parallel,switch,vote,bridge'.indexOf(nodeType) > -1) {
              deleteType = 2
            }
            let canDelete = false
            if (nodeType === 'start' || nodeType === 'end') {
              this.$message({message: '无法删除起始和结束节点', type: 'warning'})
              return false; // 取消操作
            }
            if (deleteType > 0) {
              let startNode = null
              if (deleteType === 1) {
                startNode = node
              } else if (deleteType === 2) {
                startNode = this.graph.getCellById(node.getData().startNodeId)
              }
              let nodeType = node.getData().nodeType
              let canDelete = false
              if (nodeType==='start' || nodeType==='end'){
                this.$message({message: '无法删除起始和结束节点', type: 'warning'})
                return false; // 取消操作
              }
              if(nodeType === 'node' || nodeType ==='dashedBox'){
                let isSeriesNode = this.isSeriesNode(node)
                if (isSeriesNode){
                  //删掉，前后线连起来
                  this.graph.addEdge({
                    source: {cell: isSeriesNode.inNode, port: 'right1'},
                    target: {cell: isSeriesNode.outNode, port: 'left1'},
                    router: {name: 'manhattan'},
                    connector: {name: 'rounded'}
              let isSeriesNode = this.isSeriesNode(startNode, node)
              if (isSeriesNode) {
                let inLine = this.getInLinesOfNode(startNode)
                let outLine = this.getOutLinesOfNode(node)
                let inLineIsToLine = this.hasOtherLineToMyLine(inLine[0].id)
                let inNode = isSeriesNode.inNode
                let outNode = isSeriesNode.outNode
                console.log(inLine, outLine, 'inLine,outLine')
                console.log(inNode, outNode, 'inNode,outNode')
                //提示是否要删除
                this.$confirm('是否删除该节点?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  if (inLineIsToLine) {
                    inLine[0].target = {cell: outNode.id, port: 'left1'}
                  } else {
                    outLine[0].source = {cell: inNode.id, port: 'right1'}
                  }
                  if (deleteType === 1){
                    node.remove()
                  }
                  else{
                    this.deleteCombination(node)
                  }
                  this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  })
                  node.remove()
                  return
                }
                if (this.isMultipleBrach(node)){
                  //直接删掉，不用管线
                  return
                }else{
                  //提示这个组合只有一条之路，在组合点删除
                  return
                }
                  return false
                })
              }
              if (nodeType==='connect'){
                try{
                   let endNodeId = node.getData().endNodeId
                    // 提示不能直接删除左连接点
                    return
                }catch(e){}
              if (this.isMultipleBrach(node)) {
                //提示是否要删除
                this.$confirm('是否删除该节点?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  if (inLineIsToLine) {
                    inLine[0].target = {cell: outNode.id, port: 'left1'}
                  } else {
                    outLine[0].source = {cell: inNode.id, port: 'right1'}
                  }
                  if (deleteType === 1)
                    node.remove()
                  else
                    this.deleteCombination(node)
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })

                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  })
                  return false
                })
              }
              //做个迭代删除整个组合
              //this.deleteCombination();

              // this.graph.removeCells(cells)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
          }else{

            }
            //提示不能删除
          } else {
            //提示不能删除
            this.$message({message: '只能选中一个节点', type: 'warning'})
            return false; // 取消操作
          }
        })
// zoom
@@ -818,6 +835,7 @@
          let intersectNode = this.findIntersectsNode(node)
          if (intersectNode) { // 当有节点相交 ==>并行
            this.addBranch(intersectNode, nodeObj)
            return
          } else {
            let isSelfCreated = null
            try {
@@ -828,12 +846,13 @@
              let intersectEdge = this.findIntersectsEdge(this.graph, node)
              if (intersectEdge) { // 当有边相交 ==>串联
                this.addNodeAndInsertEdge(intersectEdge, nodeObj)
                return
              } else {
                //提示
              }
            }
          }

          node.remove()

          /*//如果节点与节点相交
          console.log(node.position().x, node.position().x, 'node.position().x')
@@ -841,12 +860,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
@@ -1116,7 +1130,7 @@
        for (const otherNode of nodes) {
          if (otherNode === node) continue;
          let nodeType = otherNode.getData().nodeType
          if (nodeType === "parallel" || nodeType === "switch" || nodeType === "vote" || nodeType === "end" || nodeType === "dashedBox") {
          if (nodeType === "parallel" || nodeType === "switch" || nodeType === "vote" || nodeType === "dashedBox") {
            const bbox2 = otherNode.getBBox();
            if (bbox1.x < bbox2.x + bbox2.width &&
              bbox1.x + bbox1.width > bbox2.x &&
@@ -1139,15 +1153,15 @@
        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 {
          offHeight = 70
        }
        if (graphNodeType === 'dashedBox') {
        if (graphNodeType === 'dashedBox') { //虚框
          const edges = this.graph.getConnectedEdges(graphNode); // 获取画布上原有的节点所有进来的线
          let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
          let startNode = null
@@ -1162,11 +1176,18 @@
            endNode = this.graph.getCellById(endNodeId)
          }
          if (startNode && endNode) {
            graphNode.remove()
            let centerY = graphNode.position().y
            this.addNodeAndConnect(startNode, endNode, dragNode, centerY)
            let result = this.addNodeAndConnect(graphNode, dragNode, dragNode.position().x - dragNode.size().width/2, centerY)
            if (!result){
              dragNode.remove()
              this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
              return
            }
            inEdges[0].target = {cell: result.newStartNode.id, port: 'left1'}
            outEdges[0].source = {cell: result.newEndNode.id, port: 'right1'}
            graphNode.remove()
          }
        } else {
        } else { //并行结构
          const graphNodeStartNodeId = graphNode.getData().startNodeId  // 获取画布上原有节点的开始ID
          const graphNodeStartNode = this.graph.getCellById(graphNodeStartNodeId) // 通过开始ID得到初始节点对象
          let graphNodeY = graphNode.position().y - graphNode.getBBox().height / 2 // 获取画布原有节点的y坐标
@@ -1182,35 +1203,62 @@
          this.getYRange(inEdges, graphNodeStartNode, pointXY)
          console.log(pointXY, 'new')

          let minX = graphNodeStartNode.position().x + graphNodeStartNode.getBBox().width
          let maxX = graphNode.position().x
          let centerX = minX + (maxX - minX) / 2
          let centerY = graphNodeY - pointXY.minY > pointXY.maxY - graphNodeY ? pointXY.maxY + 30 : pointXY.minY - offHeight - 30

          this.addNodeAndConnect(graphNodeStartNode, graphNode, dragNode, centerY)
          let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
          if (!result){
            dragNode.remove()
            this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
            return
          }
          this.graph.addEdge({
            source: {cell: graphNodeStartNode, port: 'right1'},
            target: {cell: result.newStartNode, port: 'left1'},
            router: {name: 'manhattan'},
            connector: {name: 'rounded'}
          })
          this.graph.addEdge({
            source: {cell: result.newEndNode, port: 'right1'},
            target: {cell: graphNode, port: 'left1'},
            router: {name: 'manhattan'},
            connector: {name: 'rounded'}
          })
        }
      },
      addNodeAndConnect(startNode, endNode, dragNode, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
        let minX = startNode.position().x + startNode.getBBox().width
        let maxX = endNode.position().x

        let centerX = minX + (maxX - minX) / 2
      addNodeAndConnect(targetNode, dragNode, leftX, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
        let width =100, height = 80, leftTopX = leftX , leftTopY = centerY
        let dragNodeType = dragNode.getData().nodeType
        if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
          dragNode.position(minX + 50, centerY);
          this.graph.addEdge({
            source: {cell: startNode, port: 'right1'},
            target: {cell: dragNode, 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'}
          })
        if (dragNodeType === 'node') {
          width =60
          height = 60
        }else if (dragNodeType === 'dashedBox') {
          width =100
          height = 60
        } else if (dragNodeType === 'bridgeConnection') {
          this.createBridgeConnection(minX, centerY, startNode, endNode, dragNode)
          width =550
          height = 115
          leftTopX = leftX - width/2
          leftTopY = centerY - height/2
          // leftTopY = 240/2
        } else {
          this.createParallelBrach(minX, centerY, startNode, endNode, dragNode)
          width =270
          height = 60
        }

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

        if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
          dragNode.position(leftX, centerY)
          return {newStartNode: dragNode, newEndNode: dragNode}
        } else if (dragNodeType === 'bridgeConnection') {
          return this.createBridgeConnection(leftTopX, leftTopY, dragNode)
        } else {
          return this.createParallelBrach(leftTopX, leftTopY, dragNode)
        }
      },
      // 相交的边
@@ -1220,115 +1268,48 @@
        let endNodeId = graphEdge.target.cell
        let endNode = this.graph.getCellById(endNodeId)
        if (startNode && endNode) {
          graphEdge.remove()
          let centerY = startNode.position().y
          this.addNodeAndConnect(startNode, endNode, dragNode, centerY)
          let centerY = dragNode.position().y
          let isRight = true;
          let startPort = 'right1'
          let endPort = 'left1'
          if (this.isTopBottom(graphEdge)) {
            startPort = 'bottom1'
            endPort = 'top1'
          }
          if (this.hasOtherLineToMyLine(graphEdge.id)) {
            let leftX = startNode.position().x + startNode.getBBox().width
            let rightX = endNode.position().x
            let centerX = dragNode.position().x + dragNode.getBBox().width / 2
            if (centerX - leftX < rightX - centerX) {
              isRight = false
            }
          }
          let result = this.addNodeAndConnect(null, dragNode, dragNode.position().x, centerY)
          if (!result){
            dragNode.remove()
            this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
            return
          }
          if (isRight) {
            graphEdge.target = {cell: result.newStartNode.id, port: endPort}
            this.graph.addEdge({
              source: {cell: result.newEndNode, port: startPort},
              target: {cell: endNode, port: endPort},
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
            })

          } else {
            this.graph.addEdge({
              source: {cell: startNode, port: startPort},
              target: {cell: result.newStartNode, port: endPort},
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
            })
            graphEdge.source = {cell: result.newEndNode.id, port: startPort}
          }
          // 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()
@@ -1354,7 +1335,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)
@@ -1372,45 +1353,46 @@
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })

        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'}
        })
        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, startNode, endNode, dragNode) {
        const leftTopDashedBox = this.createDashedBox(x + 120, y)
        const rightTopDashedBox = this.createDashedBox(x + 400, y)
      createBridgeConnection(x, y, dragNode) {
        console.log(x,y,'leftX centerY')
        const leftTopDashedBox = this.createDashedBox(x + 40, y)
        const rightTopDashedBox = this.createDashedBox(x + 380, y)

        const leftConnectNode = this.createConnectNode(x + 50, y + 80)
        const alignCenterDashedBox = this.createDashedBox(x + 260, y + 80)
        const rightConnectNode = this.createBridgeNode(x + 550, y + 80)
        const leftConnectNode = this.createConnectNode(x, y + 87)
        const alignCenterDashedBox = this.createDashedBox(x+ 210, y + 87)
        const rightConnectNode = this.createBridgeNode(x + 530, y + 87)

        const leftBottomDashedBox = this.createDashedBox(x + 120, y + 160)
        const rightBottomDashedBox = this.createDashedBox(x + 400, y + 160)
        const leftBottomDashedBox = this.createDashedBox(x+ 50, y + 160)
        const rightBottomDashedBox = this.createDashedBox(x + 370 , y + 160)

        rightConnectNode.setData({startNodeId: leftConnectNode.id})
        leftConnectNode.setData({endNodeId: rightConnectNode.id})
        this.graph.addEdge({
          source: {cell: startNode, port: 'right1'},
          target: {cell: leftConnectNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'},
        })
        this.graph.addEdge({
          source: {cell: rightConnectNode, port: 'right1'},
          target: {cell: endNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        /*        this.graph.addEdge({
                  source: {cell: startNode, port: 'right1'},
                  target: {cell: leftConnectNode, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'},
                })
                this.graph.addEdge({
                  source: {cell: rightConnectNode, port: 'right1'},
                  target: {cell: endNode, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })*/
        this.graph.addEdge({
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftTopDashedBox, port: 'left1'},
@@ -1452,17 +1434,18 @@

        this.graph.addEdge({
          source: {cell: edgeTop},
          target: {cell: alignCenterDashedBox},
          target: {cell: alignCenterDashedBox, port: 'top1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'},
        })
        this.graph.addEdge({
          source: {cell: alignCenterDashedBox},
          source: {cell: alignCenterDashedBox, port: 'bottom1'},
          target: {cell: edgeBottom},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'},
        })
        dragNode.remove()
        return {newStartNode: leftConnectNode, newEndNode: rightConnectNode}
      },
      createDashedBox(x, y) {
        const dashId = getUUID().toString()
@@ -1504,9 +1487,8 @@
        const dragNodeId = getUUID().toString()
        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,
@@ -1539,10 +1521,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,
@@ -1569,8 +1551,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) {
@@ -1590,55 +1572,160 @@
          this.getYRange(inEdgesPrev, startNode, pointXY)
        }
      },
      isSeriesNode(node){
      isSeriesNode(startNode, endNode) {
        let result = false
        let inNode = null
        let outNode = null
        let inEdges = this.getInLinesOfNode(node)
        if (inEdges.length === 1){
          let inEdgeId = inEdges[0].id
          let isLineToLine = this.isLineToLine(inEdgeId)
        let inEdges = this.getInLinesOfNode(startNode)
        console.log(inEdges, 'inEdges')
        if (inEdges.length === 1) {
          let isMyLineToOtherLine = this.isMyLineToOtherLine(inEdges[0])
          let hasOtherLineToMyLine = this.hasOtherLineToMyLine(inEdges[0].id)
          let inNodeId = inEdges[0].source.cell
          inNode = this.graph.getCellById(inNodeId)
          let inNodeType = inNode.getData().nodeType
          if (!isLineToLine && 'node,parallel,switch,vote'.indexOf(inNodeType)>-1){
            result = true
          if (!isMyLineToOtherLine && !hasOtherLineToMyLine) {
            let inNodeType = inNode.getData().nodeType
            console.log(inNodeType, 'inNodeType')
            if ('node,dashedBox,parallel,switch,vote,bridge'.indexOf(inNodeType) > -1) {
              result = true
            }
          }
        }
        let outEdges = this.getOutLinesOfNode(node)
        if (outEdges.length === 1){
          let outEdgeId = inEdges[0].id
          let isLineToLine = this.isLineToLine(outEdgeId)
          let outNodeId = inEdges[0].target.cell
        let outEdges = this.getOutLinesOfNode(endNode)
        console.log(outEdges, 'outEdges')
        if (outEdges.length === 1) {
          let isMyLineToOtherLine = this.isMyLineToOtherLine(outEdges[0])
          let hasOtherLineToMyLine = this.hasOtherLineToMyLine(outEdges[0].id)
          let outNodeId = outEdges[0].target.cell
          outNode = this.graph.getCellById(outNodeId)
          let outNodeType = outNode.getData().nodeType
          if (!isLineToLine && 'node,connect'.indexOf(outNodeType)>-1){
            result =  true
          if (!isMyLineToOtherLine && !hasOtherLineToMyLine) {
            let outNodeType = outNode.getData().nodeType
            if ('node,connect,dashedBox'.indexOf(outNodeType) > -1) {
              result = true
            }
          }
        }
        if (result && inNode && outNode){
          return {inNode,outNode}
        }else {
        console.log(result, 'result')
        if (result && inNode && outNode) {
          console.log(inNode, outNode, 'inNode, outNode')
          return {inNode, outNode}
        } else {
          return false
        }
      },
      isLineToLine(edgeId){
        for(let edge of this.graph.getEdges()){
      hasOtherLineToMyLine(edgeId) {
        for (let edge of this.graph.getEdges()) {
          if (edge.source.cell === edgeId || edge.target.cell === edgeId)
            return true
        }
        return false
      },
      isMultipleBrach(){},
      deleteCombination(){},
      isMyLineToOtherLine(myEdge) {
        for (let edge of this.graph.getEdges()) {
          if (myEdge.source.cell === edge.id || myEdge.target.cell === edge.id)
            return true
        }
        return false
      },
      isTopBottom(edge) {
        if (edge.source.port === 'top1' || edge.source.port === 'bottom1' || edge.target.port === 'top1' || edge.target.port === 'bottom1') {
          return true
        }
      },
      isMultipleBrach(node) {
        let outEdges = this.getOutLinesOfNode(node)
        let outNodeId = outEdges[0].target.cell
        if (this.isTopBottom(outEdges[0]))
          return false
        let outNode = this.graph.getCellById(outNodeId)
        if ('bridge,end'.indexOf(outNode.getData().nodeType) > -1) {
          return false
        }
        let inEdges = this.getInLinesOfNode(outNode)
        return inEdges.length > 1;
      },
      deleteCombination(node) {
        let startNode = this.graph.getCellById(node.getData().startNodeId)
        let allCombinationNodes = []
        console.log(startNode, 'startNode')
        this.getAllCombinationNodes(startNode.id, node, allCombinationNodes)
        console.log(allCombinationNodes, 'allCombinationNodes')
        this.graph.removeCells(allCombinationNodes)
      },
      getAllCombinationNodes(startNodeId, node, allCombinationNodes) {
        allCombinationNodes.push(node)
        if (node.id == startNodeId || node.isEdge()) {
          return
        }
        let inEdges = this.getInLinesOfNode(node) // 如果？？？
        for (let inEdge of inEdges) {
          let lineNode = this.getNodeOfConectLine(inEdge)
          if (lineNode) {
            this.getAllCombinationNodes(startNodeId, lineNode, allCombinationNodes)
          }
          let inNodeId = inEdge.source.cell
          let inNode = this.graph.getCellById(inNodeId)
          if (inNode.isEdge())
            continue
          this.getAllCombinationNodes(startNodeId, inNode, allCombinationNodes)
        }
      },
      getNodeOfConectLine(paramEdge) {
        for (let edge of this.graph.getEdges()) {
          let nodeId = null
          /*          if (edge.source.cell === paramEdge.id){
                      nodeId = edge.target.cell
                    }*/
          if (edge.target.cell === paramEdge.id) {
            nodeId = edge.source.cell
          }
          if (nodeId) {
            let node = this.graph.getCellById(nodeId)
            if (node.isNode())
              return node
          }
        }
        return null
      },
      getInLinesOfNode(node) {
        const edges = this.graph.getConnectedEdges(node); // 获取画布上原有的节点所有进来的线
        console.log(edges, '获取画布上开始节点所有的线 edges')
        return edges.filter(edge => edge.target.cell === node.id)
      },
      getOutLinesOfNode(node) {
        console.log(node, '获取画布上的结束节点 node')
        const edges = this.graph.getConnectedEdges(node); // 获取画布上原有的节点所有进来的线
        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>