修改

jinlin

2024-06-11 c1c99506314644355c105de2a525ea3a248fd91f

 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": 60
              },
              "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": 100,
                "height": 60
              },
              "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": 60
              },
              "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: '',
@@ -312,6 +711,416 @@
              group: 'left',
            },
          ],
        },
        initJson: {
          "cells": [
            {
              "position": {
                "x": -600,
                "y": 0
              },
              "size": {
                "width": 60,
                "height": 60
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "start",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "/modelImg/start.svg"
                }
              },
              "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": 100,
                "height": 60
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "dashedBox",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "/modelImg/dashedBox.svg"
                }
              },
              "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": 60
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "end",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "/modelImg/end.svg"
                }
              },
              "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
            }
          ]
        }
      }
    },
@@ -345,10 +1154,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 +1167,16 @@
          // 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('')
        console.log(this.RBDDefault, 'clearDiagram')
        this.graph.fromJSON(this.RBDDefault)
        this.graph.positionContent('left')
        this.isFirstLoad = false;
        // this.graph.centerContent()
        // this.graph.zoomToFit()
        // this.graph.freeze()
@@ -390,9 +1203,6 @@
              }
            },
          },
          // panning: {
          //   enabled: true,
          // },
          scroller: {
            enabled: true,
            pageVisible: true,
@@ -413,9 +1223,6 @@
          connecting: {
            router: {
              name: 'manhattan',
              // args: {
              //   padding: 1,
              // },
            },
            connector: {
              name: 'rounded',
@@ -582,33 +1389,43 @@
        }
        let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
        this.imagesList2 = res.data
        /*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',
            imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
            //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
            width: 60,
            height: 60,
            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: '',
            },
            attrs: {
              image: {
                'xlink:href': `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=${item.imgPath}`,
                //'xlink:href': urlObject.createObjectURL(new Blob([item.svgContent])),
              },
              text: {
                text: item.imgName,
                fontSize: 14,
@@ -681,85 +1498,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.$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')
                if (inLineIsToLine) {
                  inLine[0].target = {cell: outNode.id, port: 'left1'}
                } else {
                  outLine[0].source = {cell: inNode.id, port: 'right1'}
                }
                //提示是否要删除
                this.$confirm('是否删除该节点?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  if (deleteType === 1){
                    node.remove()
                  }
                  else{
                    this.deleteCombination(node)
                  }
                  this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  })
                })
              }
              if (this.isMultipleBrach(node)) {
                //提示是否要删除
                if (deleteType === 1)
                  node.remove()
                else
                  this.deleteCombination(node)
                return
              }
            }
            //提示不能删除
          } else {
            //提示不能删除
            this.$message({message: '只能选中一个节点', type: 'warning'})
            return false; // 取消操作
          }
          this.deleteCompment()
        })
// zoom
        this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
@@ -814,24 +1553,18 @@
            }
          }
          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}) => {
@@ -950,11 +1683,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')
@@ -968,6 +1835,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 => {
@@ -1116,12 +1992,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)
@@ -1137,14 +2015,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 { //并行结构
@@ -1155,22 +2043,24 @@
          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
          }
          this.graph.addEdge({
@@ -1187,47 +2077,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
        } else if (dragNodeType === 'dashedBox') {
          width = 100
          height = 60
        } 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'
@@ -1235,17 +2147,20 @@
            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
          }
          if (isRight) {
@@ -1256,7 +2171,6 @@
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
            })

          } else {
            this.graph.addEdge({
              source: {cell: startNode, port: startPort},
@@ -1326,16 +2240,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 + 210, 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 + 50, y + 160)
        const rightBottomDashedBox = this.createDashedBox(x + 370, y + 160)

        rightConnectNode.setData({startNodeId: leftConnectNode.id})
        leftConnectNode.setData({endNodeId: rightConnectNode.id})
@@ -1656,30 +2570,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()
        }