修改

jinlin

2024-06-24 3ca8ce266bf5b06556d80c78b31405e7a54aa4e5

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

@@ -41,16 +41,15 @@
              <el-button @click="undo()">撤销</el-button>
              <el-button @click="redo()">重做</el-button>
            </el-form-item>
            <el-form-item>
              <zt-button type="delete" @click="deleteCompment()" />
            </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%">
          </div>
          <config-node v-show="type === 'node'" :id="id" :diagramId="diagramId" :globalGridAttr="globalGridAttr"
                       :graph="graph"
                       :nodeType="nodeType"
                       :projectId="projectId"
                       :shape="shape"/>
          <config-edge v-show="type === 'edge'" :id="id" :globalGridAttr="globalGridAttr" :graph="graph"/>
          <config-node ref="configNode" v-show="type === 'node'"/>
          <config-edge ref="configEdge" v-show="type === 'edge'"/>
        </div>
      </el-col>
    </el-row>
@@ -59,19 +58,15 @@

<script>
  import {Graph, Shape, Addon, Cell} from '@antv/x6'
  import ConfigNode from './ConfigNode/index.vue'
  import ConfigEdge from './ConfigEdge/index.vue'
  import {removeCurrentTabHandle} from '@/commonJS/common'
  import ConfigNode from './ConfigNode/configNode.vue'
  import ConfigEdge from './ConfigEdge/configEdge.vue'
  import {setHartBeat} from '@/commonJS/common';
  import Cookies from 'js-cookie'
  import {getUUID} from '../../../../packages/utils'
  import RBDDefault from './RBD-default.json'
  // import RBDDefault from './RBD-default.json'

  export default {
    name: 'RBD-edit-img',
    /*props: {

    },*/
    props: {
      projectId: {
        type: String
@@ -91,6 +86,425 @@
      ConfigNode,
      ConfigEdge
    },
    computed: {
      RBDDefault() {
        let url = `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=`
        let result = `
        {
          "cells":
          [
            {
              "position": {
                "x": -600,
                "y": 0
              },
              "size": {
                "width": 60,
                "height": 40
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "start",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "${url}10011"
                }
              },
              "visible": true,
              "shape": "image",
              "id": "10000",
              "data": {
                "type": "imageNodes",
                "endNodeId": "20000",
                "dataId": "",
                "nodeType": "start",
                "nodeTypeExt": "",
                "voteNum": ""
              },
              "ports": {
                "groups": {
                  "top": {
                    "position": {
                      "name": "top"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "right": {
                    "position": {
                      "name": "right"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "bottom": {
                    "position": {
                      "name": "bottom"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "left": {
                    "position": {
                      "name": "left"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  }
                },
                "items": [
                  {
                    "id": "top1",
                    "group": "top"
                  },
                  {
                    "id": "right1",
                    "group": "right"
                  },
                  {
                    "id": "bottom1",
                    "group": "bottom"
                  },
                  {
                    "id": "left1",
                    "group": "left"
                  }
                ]
              },
              "zIndex": 1
            },
            {
              "position": {
                "x": 0,
                "y": 0
              },
              "size": {
                "width": 60,
                "height": 40
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "dashedBox",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "${url}10015"
                }
              },
              "visible": true,
              "shape": "image",
              "id": 15000,
              "data": {
                "type": "imageNodes",
                "dataId": "",
                "nodeType": "dashedBox",
                "nodeTypeExt": "",
                "voteNum": ""
              },
              "ports": {
                "groups": {
                  "top": {
                    "position": {
                      "name": "top"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "right": {
                    "position": {
                      "name": "right"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "bottom": {
                    "position": {
                      "name": "bottom"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "left": {
                    "position": {
                      "name": "left"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  }
                },
                "items": [
                  {
                    "id": "top1",
                    "group": "top"
                  },
                  {
                    "id": "right1",
                    "group": "right"
                  },
                  {
                    "id": "bottom1",
                    "group": "bottom"
                  },
                  {
                    "id": "left1",
                    "group": "left"
                  }
                ]
              },
              "zIndex": 2
            },
            {
              "position": {
                "x": 600,
                "y": 0
              },
              "size": {
                "width": 60,
                "height": 40
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "end",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "${url}10012"
                }
              },
              "visible": true,
              "shape": "image",
              "id": "20000",
              "data": {
                "type": "imageNodes",
                "startNodeId": "10000",
                "dataId": "",
                "nodeType": "end",
                "nodeTypeExt": "",
                "voteNum": ""
              },
              "ports": {
                "groups": {
                  "top": {
                    "position": {
                      "name": "top"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "right": {
                    "position": {
                      "name": "right"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "bottom": {
                    "position": {
                      "name": "bottom"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "left": {
                    "position": {
                      "name": "left"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  }
                },
                "items": [
                  {
                    "id": "top1",
                    "group": "top"
                  },
                  {
                    "id": "right1",
                    "group": "right"
                  },
                  {
                    "id": "bottom1",
                    "group": "bottom"
                  },
                  {
                    "id": "left1",
                    "group": "left"
                  }
                ]
              },
              "zIndex": 3
            },
            {
              "shape": "edge",
              "id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7",
              "router": {
                "name": "manhattan"
              },
              "connector": {
                "name": "rounded"
              },
              "source": {
                "cell": "10000",
                "port": "right1"
              },
              "target": {
                "cell": 15000,
                "port": "left1"
              },
              "zIndex": 4
            },
            {
              "shape": "edge",
              "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f",
              "router": {
                "name": "manhattan"
              },
              "connector": {
                "name": "rounded"
              },
              "source": {
                "cell": 15000,
                "port": "right1"
              },
              "target": {
                "cell": "20000",
                "port": "left1"
              },
              "zIndex": 5
            }
          ]
        }
        `
        return JSON.parse(result)
      }
    },
    data() {
      return {
        isFirstLoad: true,
@@ -103,26 +517,6 @@
        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: 'parallel',
            imgName: 'parallel',
@@ -173,10 +567,15 @@
        diagramIdDisabled: false,
        dataForm: {
          id: null,
          pid: null,
          model_tag: '',
          model_name: '',
          product_id: null,
          content: null,
          publishContent: null,
          hasPublish: 0,
          urlPref: '',
          nodeArr: []
        },
        type: '',
        id: '',
@@ -345,10 +744,12 @@
          token: Cookies.get('token'),
        }
        let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
        if (res.data !== null && (res.data.content != null)) {
          this.dataForm = res.data
        this.dataForm = res.data
        if (res.data.content != null) {
          console.log(this.dataForm, 'getDiagram datafrom')
          console.log(res.data, 'getDiagram res.data')
          this.diagramJson = JSON.parse(this.dataForm.content)
            this.graph.fromJSON(this.diagramJson)
          this.graph.fromJSON(this.diagramJson)
          this.isFirstLoad = false;
          console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')

@@ -356,14 +757,14 @@
          // this.graph.centerContent()
          // this.graph.zoomToFit()
        } else {
          this.graph.fromJSON(RBDDefault)
          this.graph.fromJSON(this.RBDDefault)
          this.isFirstLoad = false
        }
      },
      async clearDiagram() {
        this.dataForm.id = null
        // this.graph.fromJSON(this.emptyJson)
        this.graph.fromJSON(RBDDefault)
        console.log(this.RBDDefault, 'clearDiagram')
        this.graph.fromJSON(this.RBDDefault)
        this.graph.positionContent('left')
        this.isFirstLoad = false;
        // this.graph.centerContent()
@@ -392,9 +793,6 @@
              }
            },
          },
          // panning: {
          //   enabled: true,
          // },
          scroller: {
            enabled: true,
            pageVisible: true,
@@ -415,9 +813,6 @@
          connecting: {
            router: {
              name: 'manhattan',
              // args: {
              //   padding: 1,
              // },
            },
            connector: {
              name: 'rounded',
@@ -435,9 +830,10 @@
              return new Shape.Edge({
                attrs: {
                  line: {
                    //  sourceMarker: 'block', // 实心箭头
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: {fill: 'none'}
                    targetMarker: null
                  }
                },
                labels: [{
@@ -500,7 +896,7 @@
          getDropNode: (node) => {
            const {width, height} = node.size()
            if (node.getData().type && node.getData().nodeType === 'dashedBox') {
              return node.clone().size(100, 60)
              return node.clone().size(60, 40)
            }
            if (node.getData().type && node.getData().type === 'imageNodes2') {
              return node.clone({keepId: true})
@@ -584,9 +980,10 @@
        }
        let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
        this.imagesList2 = res.data
        console.log(this.imagesList2, 'getProduct(productId)234567890')
        let urlObject = window.URL || window.webkitURL || window;
        /*for(let i =0;i<this.imagesList2.length;i++){

        }*/
        console.log(this.imagesList2, 'getProduct(productId)234567890')
        const imageNodes2 = this.imagesList2.map((item) =>
          this.graph.createNode({
            shape: 'image',
@@ -596,18 +993,21 @@
            id: item.dataId, // 手动设置节点的 ID
            data: {
              type: 'imageNodes2',
              isRepair: item.isRepair,
              dataId: item.dataId,
              nodeType: item.nodeType,
              nodeTypeExt: item.nodeTypeExt,
              productType: item.productType,
              statusImg: item.statusImg,
              reliabDistribType: item.reliabDistribType,
              repairDistribType: item.repairDistribType,
              repairMttcr: item.repairMttcr,
              repairMttcrOther: item.repairMttcrOther,

              reliabDistribType: item.reliabDistribType ? item.reliabDistribType : 1,
              taskMtbcf: item.taskMtbcf,
              taskMtbcfOther: item.taskMtbcfOther,

              isRepair: item.isRepair,
              repairDistribType: item.repairDistribType ? item.repairDistribType : 1,
              repairMttcr: item.repairMttcr,
              repairMttcrOther: item.repairMttcrOther,

              imgHeight: item.imgHeight,
              imgWidth: item.imgWidth,
              voteNum: '',
@@ -657,6 +1057,10 @@
        stencil.load(imageNodes, 'group1')
        stencil.load(imageNodes2, 'group2')

        this.graph.bindKey(['meta+c', 'ctrl+up'], () => {
          console.log('按了小键盘的UP键')
        })

        this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
          const cells = this.graph.getSelectedCells()
          if (cells.length) {
@@ -689,122 +1093,7 @@
        })
//delete
        this.graph.bindKey('delete', () => {
          const cells = this.graph.getSelectedCells()
          console.log(cells, 'cells')
          if (cells.length === 1) {
            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 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: '已取消删除'
                  })
                  return false
                })
              }
              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
                })
              }
            }
            //提示不能删除
          } else {
            //提示不能删除
            this.$message({message: '只能选中一个节点', type: 'warning'})
            return false; // 取消操作
          }
          this.deleteCompment()
        })
// zoom
        this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
@@ -822,7 +1111,7 @@
        })

        this.graph.on('blank:click', ({cell}) => {
          this.reset()
          // this.reset()
          // this.type.value = "grid"
          this.type = 'grid'
          // this.id = cell.id
@@ -859,37 +1148,31 @@
            }
          }
          node.remove()

          /*//如果节点与节点相交
          console.log(node.position().x, node.position().x, 'node.position().x')
          if (nodeType === 'bridgeConnection') {
            this.getBridgeConnection()
          }*/
        });
        this.graph.on('cell:contextmenu', ({cell}) => {
          // this.type.value = cell.isNode() ? "node" : "edge"
          this.type = cell.isNode() ? 'node' : 'edge'
          this.shape = cell.shape
          this.id = cell.id
          /*          this.shape = cell.shape
                    this.id = cell.id*/
          if (this.type === 'node') {
            this.nodeType = cell.getData().nodeType
            // console.log(this.nodeType, cell.id, 'this.nodeType')
            //this.nodeType = cell.getData().nodeType
            this.$refs.configNode.loadData(cell)
          } else {
            this.$refs.configNode.loadData(cell)
          }
          // console.log(this.shape, 'this.shape')
          // this.nodeOpt(this.id, this.globalGridAttr)
        })
        //单击边节点
        this.graph.on('edge:click', ({edge}) => {
          this.reset()
          edge.attr('line/stroke', 'orange')
          edge.prop('labels/0', {
            attrs: {
              body: {
                stroke: 'orange',
              },
            },

          })
          // this.reset()
          // edge.attr('line/stroke', 'orange')
          // edge.prop('labels/0', {
          //   attrs: {
          //     body: {
          //       stroke: 'orange',
          //     },
          //   },
          //
          // })
        })
        // 单击node节点
        this.graph.on('node:click', ({node}) => {
@@ -995,11 +1278,145 @@
          })
        })
      },
      deleteCompment() {
        const cells = this.graph.getSelectedCells()
        console.log(cells, 'cells')
        if (cells.length === 1) {
          let node = cells[0]
          if (!node.isNode()) {
            this.$confirm('是否删除该连接线?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              node.remove()
              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 isSeriesNode = this.isSeriesNode(startNode, node)
            let isMultipleBrach = this.isMultipleBrach(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: '已取消删除'
                })
                return false
              })
            }else 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
              })
            }else {
              //提示不能删除
              this.$message({message: '该条线路上只有该节点，无法删除', type: 'warning'})
              return false; // 取消操作
            }
          }
        } else {
          //提示不能删除
          this.$message({message: '只能选中一个节点', type: 'warning'})
          return false; // 取消操作
        }
      },
      async search() {
        await this.getDiagram();
      },
      async saveDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        const nodes = this.graph.getNodes()
        let nodeArr2 = []
        // 检查除当前节点之外的所有节点的包围框是否相交
        for (const node of nodes) {
          console.log(node, 'saveDiagram node')
          if (node.getData().nodeType == 'node' && node.getData().productType != 'product_xdy' && node.getData().dataId) {
            nodeArr2.push(node.getData().dataId)
          }
        }
        this.dataForm.nodeArr = nodeArr2
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        console.log(this.dataForm, 'dataFrom')
@@ -1013,6 +1430,15 @@
      },
      async analyzeDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        const nodes = this.graph.getNodes()
        let nodeArr2 = []
        // 检查除当前节点之外的所有节点的包围框是否相交
        for (const node of nodes) {
          if (node.getData().nodeType === 'node' && node.getData().productType !== 'product_xdy' && node.getData().dataId) {
            nodeArr2.push(node.getData().dataId)
          }
        }
        this.dataForm.nodeArr = nodeArr2
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => {
@@ -1161,12 +1587,14 @@
        let dragNodeType = dragNode.getData().nodeType
        let offHeight = 50
        if (dragNodeType === 'node') {
          offHeight = 50
          offHeight = 60
        } else if (dragNodeType === 'bridgeConnection') {
          offHeight = 230
          offHeight = 175
        } else {
          offHeight = 70
        }
        let centerX = 0, centerY = 0;

        if (graphNodeType === 'dashedBox') { //虚框
          const edges = this.graph.getConnectedEdges(graphNode); // 获取画布上原有的节点所有进来的线
          let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
@@ -1182,15 +1610,24 @@
            endNode = this.graph.getCellById(endNodeId)
          }
          if (startNode && endNode) {
            let centerY = graphNode.position().y
            let result = this.addNodeAndConnect(graphNode, dragNode, dragNode.position().x - dragNode.size().width/2, centerY)
            if (!result){
            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
            }
            inEdges[0].target = {cell: result.newStartNode.id, port: 'left1'}
            outEdges[0].source = {cell: result.newEndNode.id, port: 'right1'}

            let startPort = 'right1'
            let endPort = 'left1'
            if ((inEdges[0].target.port == 'top1' || outEdges[0].source.port == 'bottom1') && ('parallel,switch,vote,bridge'.indexOf(dragNodeType)) == -1) {
              startPort = 'bottom1'
              endPort = 'top1'
            }

            inEdges[0].target = {cell: result.newStartNode.id, port: endPort}
            outEdges[0].source = {cell: result.newEndNode.id, port: startPort}
            graphNode.remove()
          }
        } else { //并行结构
@@ -1201,21 +1638,22 @@
          let maxY = graphNode.position().y + graphNode.getBBox().height

          const edges = this.graph.getConnectedEdges(graphNode); // 获取画布上原有的节点所有进来的线
          // 获取连接线的路径数据
          let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
          //遍历这个组合里面所有节点， 修改minY，maxY

          let pointXY = {minY: minY, maxY: maxY}
          console.log(pointXY, 'old')
          this.getYRange(inEdges, graphNodeStartNode, pointXY)
          console.log(pointXY, 'new')

          let minX = graphNodeStartNode.position().x + graphNodeStartNode.getBBox().width
          let minX = graphNodeStartNode.position().x + graphNode.getBBox().width + 15
          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
          let centerY = graphNodeY + graphNode.getBBox().height / 2 - pointXY.minY > pointXY.maxY - (graphNodeY + graphNode.getBBox().height / 2) ?
            pointXY.maxY + offHeight / 2 + 30 : pointXY.minY - offHeight / 2 - 30

          let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
          if (!result){
          if (!result) {
            dragNode.remove()
            this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
            return
@@ -1234,47 +1672,69 @@
          })
        }
      },
      addNodeAndConnect(targetNode, dragNode, leftX, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
        let width =100, height = 80, leftTopX = leftX , leftTopY = centerY
      addNodeAndConnect(targetNode, dragNode, centerX, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
        let width = 100,
          height = 80,
          leftTopX = centerX,
          leftTopY = centerY
        let dragNodeType = dragNode.getData().nodeType
        if (dragNodeType === 'node') {
          width =60
          width = 60
          height = 60
        }else if (dragNodeType === 'dashedBox') {
          width =100
          height = 60
        } else if (dragNodeType === 'dashedBox') {
          width = 60
          height = 40
        } else if (dragNodeType === 'bridgeConnection') {
          width =550
          height = 115
          leftTopX = leftX - width/2
          leftTopY = centerY - height/2
          // leftTopY = 240/2
          width = 550
          height = 175
        } else {
          width =270
          width = 270
          height = 60
        }

        if (!this.canPlace(targetNode,dragNode,{leftTopX, leftTopY, width, height})){
        leftTopX = centerX - width / 2
        leftTopY = centerY - height / 2
        if (!this.canPlace(targetNode, dragNode, {leftTopX, leftTopY, width, height})) {
          return false
        }

        if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
          dragNode.position(leftX, centerY)
          dragNode.position(leftTopX, leftTopY)
          return {newStartNode: dragNode, newEndNode: dragNode}
        } else if (dragNodeType === 'bridgeConnection') {
          return this.createBridgeConnection(leftTopX, leftTopY, dragNode)
        } else {
          return this.createParallelBrach(leftTopX, leftTopY, dragNode)
          return this.createParallelBrach(leftTopX, centerY, dragNode)
        }
      },
      // 相交的边
      addNodeAndInsertEdge(graphEdge, dragNode) {
        const source = graphEdge.getSourceCell()
        const target = graphEdge.getTargetCell()

        let centerX = 0
        let centerY = 0
        if (!source.isNode() || !target.isNode()) {
          if (source.isNode()) {
            centerX = source.position().x + source.getBBox().width / 2
            centerY = dragNode.position().y + dragNode.getBBox().height / 2
          } else {
            centerX = target.position().x + target.getBBox().width / 2
            centerY = dragNode.position().y + dragNode.getBBox().height / 2
          }
        } else {
          centerX = dragNode.position().x + dragNode.getBBox().width / 2
          centerY = source.position().y + source.getBBox().height / 2
          if (target.getData().nodeType === 'node') {
            centerY = target.position().y + target.getBBox().height / 2
          }
        }

        let startNodeId = graphEdge.source.cell
        let startNode = this.graph.getCellById(startNodeId)
        let endNodeId = graphEdge.target.cell
        let endNode = this.graph.getCellById(endNodeId)

        if (startNode && endNode) {
          let centerY = dragNode.position().y
          let isRight = true;
          let startPort = 'right1'
          let endPort = 'left1'
@@ -1282,16 +1742,18 @@
            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
            // 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){

          let result = this.addNodeAndConnect(null, dragNode, centerX, centerY)
          if (!result) {
            dragNode.remove()
            this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
            return
@@ -1304,7 +1766,6 @@
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
            })

          } else {
            this.graph.addEdge({
              source: {cell: startNode, port: startPort},
@@ -1374,16 +1835,16 @@
                })*/
      },
      createBridgeConnection(x, y, dragNode) {
        console.log(x,y,'leftX centerY')
        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, y + 87)
        const alignCenterDashedBox = this.createDashedBox(x+ 210, y + 87)
        const alignCenterDashedBox = this.createDashedBox(x + 209, y + 87)
        const rightConnectNode = this.createBridgeNode(x + 530, y + 87)

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

        rightConnectNode.setData({startNodeId: leftConnectNode.id})
        leftConnectNode.setData({endNodeId: rightConnectNode.id})
@@ -1403,39 +1864,39 @@
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftTopDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })
        this.graph.addEdge({
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftBottomDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })

        let edgeTop = this.graph.addEdge({
          source: {cell: leftTopDashedBox, port: 'right1'},
          target: {cell: rightTopDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })
        let edgeBottom = this.graph.addEdge({
          source: {cell: leftBottomDashedBox, port: 'right1'},
          target: {cell: rightBottomDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })

        this.graph.addEdge({
          source: {cell: rightTopDashedBox, port: 'right1'},
          target: {cell: rightConnectNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })
        this.graph.addEdge({
          source: {cell: rightBottomDashedBox, port: 'right1'},
          target: {cell: rightConnectNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })

        this.graph.addEdge({
@@ -1458,8 +1919,8 @@
        let dashedBox = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 100,
          height: 60,
          width: 60,
          height: 40,
          id: dashId,
          data: {
            isSelfCreated: true,
@@ -1704,30 +2165,30 @@
        console.log(edges, '获取画布上的结束节点所有的线 edges')
        return edges.filter(edge => edge.source.cell === node.id)
      },
      canPlace(targetNode,dragNode,box2){
      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);
            }
          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')
        console.log(box2, 'box2')
        console.log(intersectNodes, 'intersectNodes')
        return intersectNodes.length <= 0;
      },
      undo(){
      undo() {
        if (this.graph.history.canUndo()) {
          this.graph.history.undo()
        }
      },
      redo(){
      redo() {
        if (this.graph.history.canRedo()) {
          this.graph.history.redo()
        }