新增可忽略的维修时间

xyc

2025-02-21 664db98c9e8595ce4dd636a27f480e3a08b81ff5

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

@@ -1,14 +1,14 @@
<template>
  <div>
    <el-row :gutter="[8,8]">
      <el-col :span="3">
      <el-col :span="4">
        <div :style="'height:' +left_p+'px'">
          <div style="height: 100%">
            <div id="stencilImg"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="21">
      <el-col :span="20">
        <div class="fa-card-a">
          <el-form :inline="true">
            <el-form-item>
@@ -16,8 +16,12 @@
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveDiagram()">暂存</el-button>
              <el-button type="primary" @click="analyzeDiagram()">保存</el-button>
              <el-button type="primary" @click="analyzeDiagram()">提交</el-button>
              <el-button type="primary" @click="clearDiagram()">清空图形</el-button>
              <el-checkbox style="margin: 0 10px 0 10px" v-model="dataForm.autoLayout" :true-label="1" :false-label="0">
                是否开启一键排版
              </el-checkbox>
              <el-button type="primary" @click="layoutDiagram()" :disabled="!dataForm.autoLayout">一键排版</el-button>
              <el-button @click="leftAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i>
              </el-button>
@@ -41,16 +45,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 +62,17 @@

<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 Mousetrap from 'mousetrap'
  // var Mousetrap = require('mousetrap');
  // import RBDDefault from './RBD-default.json'

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

    },*/
    props: {
      projectId: {
        type: String
@@ -91,230 +92,13 @@
      ConfigNode,
      ConfigEdge
    },
    data() {
      return {
        isFirstLoad: true,
        hasMoveNode: false,
        hasMoveSingleNode: null,
        nodeAdded: false,
        connectNode: {},
        modelId: '',
        modelName: '',
        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',
            nodeType: 'parallel',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '9',
            data: {}
          },
          {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
          {
            imgPath: 'switch',
            imgName: 'switch',
            nodeType: 'switch',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '5',
            data: {}
          },
          {
            imgPath: 'bridgeConnection',
            imgName: 'bridgeConnection',
            nodeType: 'bridgeConnection',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '10',
            data: {}
          },
          // {
          //   imgPath: 'dashedBox',
          //   imgName: 'dashedBox',
          //   nodeType: 'dashedBox',
          //   imgWidth: 60,
          //   imgHeight: 60,
          //   imgId: '10000',
          //   data: {}
          // },
        ],
        imagesList2: [],
        nodeType: '',
        first: true,
        shape: '',
        projectList: [],
        diagramList: [],
        diagramId: '',
        projectId: '',
        diagramJson: '',
        diagramIdDisabled: false,
        dataForm: {
          id: null,
          content: null,
          publishContent: null,
          hasPublish: 0,
          urlPref: '',
        },
        type: '',
        id: '',
        graph: null,
        globalGridAttr: {
          productType: '',
          voteNum: '',
          repairMttcr: '',
          repairMttcrOther: '',
          repairDistribType: '',
          reliabDistribType: '',
          taskMtbcfOther: '',
          isRepair: 0,
          taskMtbcf: '',
          numberInputValue: '',
          statusImg: '',
          nodeTypeExt: '',
          type: 'mesh',
          size: 10,
          color: '#e5e5e5',
          thickness: 1,
          colorSecond: '#d0d0d0',
          thicknessSecond: 1,
          factor: 4,
          bgColor: '#e5e5e5',
          showImage: true,
          repeat: 'watermark',
          position: 'center',
          bgSize: JSON.stringify({width: 150, height: 150}),
          opacity: 0.1,

          stroke: '#5F95FF',
          strokeWidth: 1,
          connector: 'rounded',
          router: 'manhattan',
          label: '',
          nodeStroke: '#5F95FF',
          nodeStrokeWidth: 1,
          nodeFill: '#ffffff',
          nodeFontSize: 12,
          nodeColor: '#080808',
          nodeText: '',
          nodeDate: '',
          nodeUsers: '',
          nodeDataDate: '',
          nodeDataText: '',
          dataId: '',
          inspectName: '',
          distance: 0.5,
          angle: 0,
        },
        isReady: false,
        curCel: Cell,
        left_p: document.documentElement.clientHeight - 100,
        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',
            },
          ],
        },
        initJson: {
          "cells": [
    computed: {
      RBDDefault() {
        let url = `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=`
        let result = `
        {
          "cells":
          [
            {
              "position": {
                "x": -600,
@@ -322,17 +106,17 @@
              },
              "size": {
                "width": 60,
                "height": 60
                "height": 40
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "start",
                  "text": "",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "/modelImg/start.svg"
                  "xlink:href": "${url}10011"
                }
              },
              "visible": true,
@@ -444,18 +228,18 @@
                "y": 0
              },
              "size": {
                "width": 100,
                "height": 60
                "width": 60,
                "height": 40
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "dashedBox",
                  "text": "",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "/modelImg/dashedBox.svg"
                  "xlink:href": "${url}10015"
                }
              },
              "visible": true,
@@ -479,7 +263,7 @@
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,

                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
@@ -567,17 +351,17 @@
              },
              "size": {
                "width": 60,
                "height": 60
                "height": 40
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "end",
                  "text": "",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "/modelImg/end.svg"
                  "xlink:href": "${url}10012"
                }
              },
              "visible": true,
@@ -687,41 +471,259 @@
              "shape": "edge",
              "id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7",
              "router": {
                "name": "manhattan"
                "name": "manhattan",
                "args": {
                        "startDirections": ["right"],
                        "endDirections": ["left"]
                       }
              },
              "connector": {
                "name": "rounded"
              },
              "source": {
                "cell": "10000",
                "port": "right1"
                "cell": "10000"
              },
              "target": {
                "cell": 15000,
                "port": "left1"
                "cell": 15000
              },
              "zIndex": 4
              "zIndex": -1
            },
            {
              "shape": "edge",
              "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f",
              "router": {
                "name": "manhattan"
                "name": "manhattan",
                "args": {
                        "startDirections": ["right"],
                        "endDirections": ["left"]
                       }
              },
              "connector": {
                "name": "rounded"
              },
              "source": {
                "cell": 15000,
                "port": "right1"
                "cell": 15000
              },
              "target": {
                "cell": "20000",
                "port": "left1"
                "cell": "20000"
              },
              "zIndex": 5
              "zIndex": -1
            }
          ]
        }
        `
        return JSON.parse(result)
      }
    },
    data() {
      return {
        canAdd: true,
        nodeX: '',
        nodeY: '',
        isFirstLoad: true,
        hasMoveNode: false,
        hasMoveSingleNode: null,
        nodeAdded: false,
        connectNode: {},
        modelId: '',
        modelName: '',
        modelType: '',
        timer: null,
        imagesList: [
          {
            imgPath: 'switch',
            imgName: '',
            nodeType: 'switch',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '9',
            data: {}
          },
          {imgPath: 'vote', imgName: '', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
          {
            imgPath: 'parallel',
            imgName: '',
            nodeType: 'parallel',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '5',
            data: {}
          },
          {
            imgPath: 'bridgeConnection',
            imgName: '',
            nodeType: 'bridgeConnection',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '10',
            data: {}
          },
        ],
        imagesList2: [],
        nodeType: '',
        first: true,
        shape: '',
        projectList: [],
        diagramList: [],
        diagramId: '',
        projectId: '',
        diagramJson: '',
        diagramIdDisabled: false,
        dataForm: {
          id: null,
          pid: null,
          model_tag: '',
          model_name: '',
          product_id: null,
          content: null,
          publishContent: null,
          hasPublish: 0,
          urlPref: '',
          nodeArr: [],
          autoLayout: 1,
        },
        type: '',
        id: '',
        graph: null,
        globalGridAttr: {
          productType: '',
          voteNum: '',
          repairMttcr: '',
          repairMttcrOtherParams2: '',
          repairMttcrOtherParams3: '',
          repairDistribType: '',
          reliabDistribType: '',
          taskMtbcfOtherParams2: '',
          taskMtbcfOtherParams3: '',
          isRepair: 0,
          taskMtbcf: '',
          numberInputValue: '',
          statusImg: '',
          nodeTypeExt: '',
          type: 'mesh',
          size: 10,
          color: '#e5e5e5',
          thickness: 1,
          colorSecond: '#d0d0d0',
          thicknessSecond: 1,
          factor: 4,
          bgColor: '#e5e5e5',
          showImage: true,
          repeat: 'watermark',
          position: 'center',
          bgSize: JSON.stringify({width: 150, height: 150}),
          opacity: 0.1,

          stroke: '#5F95FF',
          strokeWidth: 1,
          connector: 'rounded',
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top', 'bottom'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
          label: '',
          nodeStroke: '#5F95FF',
          nodeStrokeWidth: 1,
          nodeFill: '#ffffff',
          nodeFontSize: 12,
          nodeColor: '#080808',
          nodeText: '',
          nodeDate: '',
          nodeUsers: '',
          nodeDataDate: '',
          nodeDataText: '',
          dataId: '',
          inspectName: '',
          distance: 0.5,
          angle: 0,
        },
        isReady: false,
        curCel: Cell,
        left_p: document.documentElement.clientHeight - 100,
        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',
            },
          ],
        }
      }
    },
@@ -755,8 +757,11 @@
          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
        this.dataForm.autoLayout = parseInt(this.dataForm.autoLayout)
        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.isFirstLoad = false;
@@ -766,14 +771,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()
@@ -802,9 +807,6 @@
              }
            },
          },
          // panning: {
          //   enabled: true,
          // },
          scroller: {
            enabled: true,
            pageVisible: true,
@@ -825,9 +827,10 @@
          connecting: {
            router: {
              name: 'manhattan',
              // args: {
              //   padding: 1,
              // },
              args: {
                startDirections: ['top', 'bottom'], // 从下方开始
                endDirections: ['left'],      // 向左方结束
              },
            },
            connector: {
              name: 'rounded',
@@ -838,6 +841,7 @@
            anchor: 'center',
            connectionPoint: 'anchor',
            allowBlank: false,
            allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true
            snap: {
              radius: 20,
            },
@@ -845,9 +849,10 @@
              return new Shape.Edge({
                attrs: {
                  line: {
                    //  sourceMarker: 'block', // 实心箭头
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: {fill: 'none'}
                    targetMarker: null
                  }
                },
                labels: [{
@@ -906,30 +911,56 @@
        })
        this.graph.centerContent()
        const stencil = new Addon.Stencil({
          getDragNode: (node) => node.clone({keepId: true}),
          // getDragNode: (node) => {
          // node.removeAttrs('title')
          // },
          getDropNode: (node) => {
            this.canAdd = true
            const {width, height} = node.size()
            if (node.getData().type && node.getData().nodeType === 'dashedBox') {
              return node.clone().size(100, 60)
            }
            if (node.getData().type && node.getData().type === 'imageNodes2') {
              return node.clone({keepId: true})
            } else {
              return node.clone()
            }
          },
          validateNode: (node) => {
            const existingNodes = this.graph.getNodes(); // 获取画布上所有节点
            for (const existingNode of existingNodes) {
              if (existingNode.id === node.id) {
                this.$message({message: '该设备节点已在画布上，无法再次绘制', type: 'warning'})
                return false; // 取消添加节点操作
              const nodes = this.graph.getNodes()
              let deviceNoArr = []

              for (const node2 of nodes) {
                console.log(node2, 'saveDiagram node')
                if (node2.getData().nodeType == 'node' && node2.getData().dataId) {
                  if (node2.getData().dataId == node.getData().dataId) {
                    deviceNoArr.push(node2.getData().deviceNo)
                  }
                }
              }
              let no = 0
              console.log(node, 'node')
              console.log(deviceNoArr, 'deviceNoArr')
              for (let i = 1; i <= node.getData().basicUnitNum; i++) {
                if (deviceNoArr.findIndex(item => item === i) === -1) {
                  no = i
                  if (node.getData().basicUnitNum >= 1) {
                    node.getData().deviceNo = i
                    if(node.getData().deviceNo > 1){
                      node.attr('text/text', node.attr('text/text') + '-' + i)
                    }
                  }
                  break
                }
              }
              if (no === 0) {
                this.canAdd = false
              }
            }
            return node.clone()

          },
          validateNode: (node) => {
            if (!this.canAdd) {
              this.$message({message: '该设备节点已在画布上，无法再次绘制', type: 'warning'})
              return false
            }

          },
          title: '',
          target: this.graph,
          stencilGraphWidth: 200,
          stencilGraphWidth: 240,
          stencilGraphHeight: 280,
          collapsable: true,
          groups: [
@@ -943,13 +974,13 @@
              name: 'group2',
              graphHeight: '',
              layoutOptions: {
                rowHeight: 90,
                rowHeight: 100,
              },
            }
          ],
          layoutOptions: {
            columns: 2,
            columnWidth: 105,
            columnWidth: 130,
          },
        })
        document.getElementById('stencilImg').appendChild(stencil.container)
@@ -994,79 +1025,149 @@
        }
        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',
            //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
            width: 60,
            height: 60,
            id: item.dataId, // 手动设置节点的 ID
            height: 70,
            //id: item.dataId, // 手动设置节点的 ID
            data: {
              type: 'imageNodes2',
              isRepair: item.isRepair,
              dataId: item.dataId,
              basicUnitNum: item.basicUnitNum,
              deviceNo: 1,
              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,
              taskMtbcfOther2: item.taskMtbcfOtherParams2,
              taskMtbcfOther3: item.taskMtbcfOtherParams3,

              isRepair: item.isRepair,
              repairDistribType: item.repairDistribType ? item.repairDistribType : 1,
              repairMttcr: item.repairMttcr,
              repairMttcrOther2: item.repairMttcrOtherParams2,
              repairMttcrOther3: item.repairMttcrOtherParams3,
              successRate: item.successRate,

              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': `${window.SITE_CONFIG['apiURL']}/basicInfo/XhProductModel/getImg?token=${Cookies.get('token')}&id=${item.dataId}&t=${new Date().getTime()}`,
                //'xlink:href': urlObject.createObjectURL(new Blob([item.svgContent])),
              },
              title: {
                text: item.basicUnitNum > 1 ? item.basicUnitNum : '',
                refX: 15,
                refY: 10,
                fill: '#748be7',
                fontSize: 14,
                fontWeight: 'bold',
                'text-anchor': 'start',
              },
              text: {
                text: item.imgName,
                fontSize: 14,
                style: {
                  color: this.globalGridAttr.nodeColor
                },
                refX: 0.5,
                refY: '100%',
                refY: '85%',
                refY2: 4,
                textAnchor: 'middle',
                textVerticalAnchor: 'top',
                textWrap: {
                  width: 120,      // 宽度为 120px换行
                  ellipsis: false,  // 文本超出显示范围时，自动添加省略号
                  breakWord: true, // 是否截断单词
                }
              },
            },
            tools: [
            markup: [
              {
                name: 'button',
                args: {
                  markup: [
                    {
                      tagName: 'image',
                      selector: 'icon',
                      attrs: {
                        // 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
                        'xlink:href': item.statusImg,
                        width: 30,
                        height: 30,
                        x: 0,
                        y: 0
                      }
                    }
                  ]
                }
              }
                tagName: 'image',
                selector: 'image',
              },
              {
                tagName: 'text',
                selector: 'title',
              },
              {
                tagName: 'text',
                selector: 'text',
              },
            ],
            // tools: [
            //   {
            //     name: 'button',
            //     args: {
            //       markup: [
            //         {
            //           tagName: 'image',
            //           selector: 'icon',
            //           attrs: {
            //             'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
            //             // 'xlink:href': item.statusImg,
            //             width: 30,
            //             height: 30,
            //             x: 0,
            //             y: 0
            //           }
            //         }
            //       ]
            //     }
            //   }
            // ],
            ports: {...this.ports},
          }),
        )
        stencil.load(imageNodes, 'group1')
        stencil.load(imageNodes2, 'group2')

// konami code!
        // 单击node节点
        // this.graph.on('node:click', ({ e, x, y, node, view}) => {
        //   Mousetrap.bind('up', function(e) {
        //     e.preventDefault();
        //     node.getBBox().x
        //     node.getBBox().y
        //     setTimeout(()=>{
        //       node.position(node.getBBox().x,node.getBBox().y -0.5)
        //       console.log(x,y,'按下了↑键 up');
        //     },100)
        //   })
        //   Mousetrap.bind('down', function(e) {
        //     e.preventDefault();
        //     setTimeout(()=>{
        //       node.position(node.getBBox().x,node.getBBox().y+0.5)
        //       console.log(x,y,'按下了↓键 down');
        //     },100)
        //
        //   })
        //   Mousetrap.bind('left', function(e) {
        //     e.preventDefault();
        //     setTimeout(()=>{
        //       node.position(node.getBBox().x-0.5,node.getBBox().y)
        //       console.log(x,y,'按下了←键 left');
        //     },100)
        //
        //   })
        //   Mousetrap.bind('right', function(e) {
        //     e.preventDefault();
        //     setTimeout(()=>{
        //       node.position(node.getBBox().x+0.5,node.getBBox().y)
        //       console.log(x,y,'按下了→键 right');
        //     },100)
        //   })
        // })
        this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
          const cells = this.graph.getSelectedCells()
          if (cells.length) {
@@ -1117,13 +1218,16 @@
        })

        this.graph.on('blank:click', ({cell}) => {
          this.reset()
          // this.reset()
          // this.type.value = "grid"
          this.type = 'grid'
          // this.id = cell.id
        })
        // 监听节点添加事件
        this.graph.on('node:added', ({node}) => {
          node.setAttrs({
            title: {text: ''},
          })
          if (this.isFirstLoad) {
            return
          }
@@ -1132,7 +1236,7 @@
          }
          const nodeType = node.getData().nodeType; // 获取节点的类型
          const nodeObj = node
          console.log(123)
          console.log(node.id, 'node.id')
          let intersectNode = this.findIntersectsNode(node)
          if (intersectNode) { // 当有节点相交 ==>并行
            this.addBranch(intersectNode, nodeObj)
@@ -1154,41 +1258,33 @@
            }
          }
          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}) => {
        })
        // 控制连接桩显示/隐藏
        this.graph.on('node:delete', ({view, e}) => {
          e.stopPropagation()
@@ -1221,57 +1317,57 @@
          })
        })

        this.graph.on('node:mouseenter', ({node}) => {
          const container = document.getElementById('containerImg')
          const ports = container.querySelectorAll(
            '.x6-port-body',
          )
          this.showPorts(ports, true)
        })
        // this.graph.on('node:mouseenter', ({node}) => {
        //   const container = document.getElementById('containerImg')
        //   const ports = container.querySelectorAll(
        //     '.x6-port-body',
        //   )
        //   this.showPorts(ports, true)
        // })

        this.graph.on('node:mouseleave', ({node}) => {
          // if (node.hasTool('button-remove')) {
          //   node.removeTool('button-remove')
          // }
          const container = document.getElementById('containerImg')
          const ports = container.querySelectorAll(
            '.x6-port-body',
          )
          this.showPorts(ports, false)
        })
        // this.graph.on('node:mouseleave', ({node}) => {
        //   // if (node.hasTool('button-remove')) {
        //   //   node.removeTool('button-remove')
        //   // }
        //   const container = document.getElementById('containerImg')
        //   const ports = container.querySelectorAll(
        //     '.x6-port-body',
        //   )
        //   this.showPorts(ports, false)
        // })

        this.graph.on('edge:mouseenter', ({cell}) => {
          // alert(123)
          cell.addTools([
            {
              name: 'source-arrowhead',
            },
            {
              name: 'target-arrowhead',
              args: {
                attrs: {
                  fill: 'red',
                },
              },
            },
            {
              name: 'segments',
              args: {snapRadius: 20, attrs: {fill: '#444'}}
            },
          ])
        })

        this.graph.on('edge:mouseleave', ({cell}) => {
          cell.removeTools()
        })
        // this.graph.on('edge:mouseenter', ({cell}) => {
        //   // alert(123)
        //   cell.addTools([
        //     {
        //       name: 'source-arrowhead',
        //     },
        //     {
        //       name: 'target-arrowhead',
        //       args: {
        //         attrs: {
        //           fill: 'red',
        //         },
        //       },
        //     },
        //     {
        //       name: 'segments',
        //       args: {snapRadius: 20, attrs: {fill: '#444'}}
        //     },
        //   ])
        // })
        //
        // this.graph.on('edge:mouseleave', ({cell}) => {
        //   cell.removeTools()
        // })

        await this.getDiagram(this.dataForm.id)
      },
      showPorts(ports, show) {
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
          ports[i].style.visibility = show ? 'visible' : 'hidden'
        }
      },
      // showPorts(ports, show) {
      //   for (let i = 0, len = ports.length; i < len; i = i + 1) {
      //     ports[i].style.visibility = show ? 'visible' : 'hidden'
      //   }
      // },
      reset() {
        this.graph.drawBackground({color: '#fff'})
        const nodes = this.graph.getNodes()
@@ -1337,6 +1433,7 @@
            }

            let isSeriesNode = this.isSeriesNode(startNode, node)
            let isMultipleBrach = this.isMultipleBrach(node)
            if (isSeriesNode) {
              //串联
              let inLine = this.getInLinesOfNode(startNode)
@@ -1373,8 +1470,7 @@
                })
                return false
              })
            }
            if (this.isMultipleBrach(node)) {
            } else if (this.isMultipleBrach(node)) {
              //提示是否要删除
              this.$confirm('是否删除该节点?', '提示', {
                confirmButtonText: '确定',
@@ -1402,9 +1498,12 @@
                })
                return false
              })
            } else {
              //提示不能删除
              this.$message({message: '该条线路上只有该节点，无法删除', type: 'warning'})
              return false; // 取消操作
            }
          }
          //提示不能删除
        } else {
          //提示不能删除
          this.$message({message: '只能选中一个节点', type: 'warning'})
@@ -1416,28 +1515,100 @@
      },
      async saveDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        //   获取所有子节点
        this.getNodeArr()
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        console.log(this.dataForm, 'dataFrom')
        await this.$http[this.dataForm.id === null ? 'post' : 'put'](`/taskReliability/ModelLine/`, this.dataForm).then(async res => {
          if (res.msg === 'success') {
            this.$emit('refreshDataList')
            this.$alert('保存成功', '提示', {
              confirmButtonText: '确定'
            })
          }
        })
      },
      getNodeArr() {
        const nodes = this.graph.getNodes()
        let nodeArr2 = []
        // 检查除当前节点之外的所有节点的包围框是否相交
        for (const node of nodes) {
          console.log(node, 'saveDiagram node')
          if (node.getData().nodeType == 'node' && node.getData().dataId) {
            nodeArr2.push(node.getData().dataId)
          }
        }
        this.dataForm.nodeArr = nodeArr2
      },
      async analyzeDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        // 检查除当前节点之外的所有节点的包围框是否相交
        //   获取所有子节点
        this.getNodeArr()
        const nodes = this.graph.getNodes()
        for (const node of nodes) {
          if (node.getData().nodeType === 'dashedBox') {
            this.$message({message: '该模型中存在虚框，无法提交', type: 'warning'})
            return false;
          }
          if (node.getData().nodeType === 'vote') {
            if (node.getData().voteNum === null || node.getData().voteNum === '') {
              this.$message({message: '表决节点的表决数量未设置', type: 'warning'})
              return false;
            }
            const edges = this.graph.getIncomingEdges(node);
            if (node.getData().voteNum >= edges.length) {
              this.$message({message: '表决节点的表决数量必须小于该节点的进线数量', type: 'warning'})
              return false;
            }
          }
          if (node.getData().nodeType === 'switch') {
            if (node.getData().voteNum === null || node.getData().voteNum === '') {
              this.$message({message: '旁联节点的备份数量未设置', type: 'warning'})
              return false;
            }
            const edges = this.graph.getIncomingEdges(node);
            if (node.getData().voteNum >= edges.length) {
              this.$message({message: '旁联节点的备份数量必须小于该节点的进线数量', type: 'warning'})
              return false;
            }
          }
        }
        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 => {
          if (res.msg === 'success') {
            this.$alert('解析成功', '提示', {
            this.$emit('refreshDataList')
            this.$alert('提交成功', '提示', {
              confirmButtonText: '确定'
            })
          }
        })
      },
      async layoutDiagram() {
        if (this.dataForm.autoLayout == 1) {
          console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
          this.dataForm.content = JSON.stringify(this.graph.toJSON())
          this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
          await this.$http['post'](`/taskReliability/ModelLine/layout`, this.dataForm).then(async res => {
            if (res.msg === 'success') {
              // this.$emit('refreshDataList')
              // this.$alert('解析成功', '提示', {
              //   confirmButtonText: '确定'
              // })
              console.log(res.data, 'layoutDiagram res.data')
              this.dataForm.content = res.data.content
              console.log(this.dataForm.content, 'layoutDiagram dataForm.content')
              this.diagramJson = JSON.parse(this.dataForm.content)
              this.graph.fromJSON(this.diagramJson)
              this.isFirstLoad = false;
              // console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')

              this.graph.positionContent('left')
            }
          })
        }
      },
      leftAlign() {
        const NODE = this.graph.getSelectedCells()
@@ -1577,7 +1748,7 @@
        let dragNodeType = dragNode.getData().nodeType
        let offHeight = 50
        if (dragNodeType === 'node') {
          offHeight = 60
          offHeight = 70
        } else if (dragNodeType === 'bridgeConnection') {
          offHeight = 175
        } else {
@@ -1603,11 +1774,6 @@
            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
            }

            let startPort = 'right1'
            let endPort = 'left1'
@@ -1616,9 +1782,15 @@
              endPort = 'top1'
            }

            inEdges[0].target = {cell: result.newStartNode.id, port: endPort}
            outEdges[0].source = {cell: result.newEndNode.id, port: startPort}
            inEdges[0].target = {cell: result.newStartNode.id}
            outEdges[0].source = {cell: result.newEndNode.id}
            graphNode.remove()
            if (this.dataForm.autoLayout == 1) {
              if (!result.canPlace) {
                //调用自动排版
                this.layoutDiagram()
              }
            }
          }
        } else { //并行结构
          const graphNodeStartNodeId = graphNode.getData().startNodeId  // 获取画布上原有节点的开始ID
@@ -1636,30 +1808,46 @@
          this.getYRange(inEdges, graphNodeStartNode, pointXY)
          console.log(pointXY, 'new')

          let minX = graphNodeStartNode.position().x + graphNode.getBBox().width + 15
          let maxX = graphNode.position().x
          let minX = graphNodeStartNode.position().x + graphNode.getBBox().width
          let maxX = graphNode.position().x - dragNode.getBBox().width / 2
          let centerX = minX + (maxX - minX) / 2
          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) {
            dragNode.remove()
            this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
            return
          let result = this.addNodeAndConnect(null, dragNode, centerX, centerY)
          console.log(result, 'result111')
          this.graph.addEdge({
            source: {cell: graphNodeStartNode},
            target: {cell: result.newStartNode},
            router: {
              name: 'manhattan',
              args: {
                startDirections: ['top', 'bottom'], // 从下方开始
                endDirections: ['left'],      // 向左方结束
              },
            },
            connector: {name: 'rounded'},
            zIndex: -1
          })
          this.graph.addEdge({
            source: {cell: result.newEndNode},
            target: {cell: graphNode},
            router: {
              name: 'manhattan',
              args: {
                startDirections: ['right'], // 从下方开始
                endDirections: ['top', 'bottom'],      // 向左方结束
              },
            },
            connector: {name: 'rounded'},
            zIndex: -1
          })
          if (this.dataForm.autoLayout == 1) {
            if (!result.canPlace) {
              //调用自动排版
              this.layoutDiagram()
            }
          }
          this.graph.addEdge({
            source: {cell: graphNodeStartNode, port: 'right1'},
            target: {cell: result.newStartNode, port: 'left1'},
            router: {name: 'manhattan'},
            connector: {name: 'rounded'}
          })
          this.graph.addEdge({
            source: {cell: result.newEndNode, port: 'right1'},
            target: {cell: graphNode, port: 'left1'},
            router: {name: 'manhattan'},
            connector: {name: 'rounded'}
          })
        }
      },
      addNodeAndConnect(targetNode, dragNode, centerX, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
@@ -1669,31 +1857,38 @@
          leftTopY = centerY
        let dragNodeType = dragNode.getData().nodeType
        if (dragNodeType === 'node') {
          width = 60
          height = 60
        } else if (dragNodeType === 'dashedBox') {
          width = 100
          height = 60
          height = 70
        } else if (dragNodeType === 'dashedBox') {
          width = 60
          height = 40
        } else if (dragNodeType === 'bridgeConnection') {
          width = 550
          height = 175
        } else {
          width = 270
          height = 60
          height = 70
        }
        leftTopX = centerX - width / 2
        leftTopY = centerY - height / 2
        let canPlace = true;
        if (!this.canPlace(targetNode, dragNode, {leftTopX, leftTopY, width, height})) {
          return false
          canPlace = false
        }

        if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
          dragNode.position(leftTopX, leftTopY)
          return {newStartNode: dragNode, newEndNode: dragNode}
          return {newStartNode: dragNode, newEndNode: dragNode, canPlace: canPlace}
        } else if (dragNodeType === 'bridgeConnection') {
          return this.createBridgeConnection(leftTopX, leftTopY, dragNode)
          return {
            ...this.createBridgeConnection(leftTopX, leftTopY, dragNode),
            ...{canPlace: canPlace}
          }
        } else {
          return this.createParallelBrach(leftTopX, centerY, dragNode)
          return {
            ...this.createParallelBrach(leftTopX, centerY, dragNode),
            ...{canPlace: canPlace}
          }
        }
      },
      // 相交的边
@@ -1714,7 +1909,7 @@
        } else {
          centerX = dragNode.position().x + dragNode.getBBox().width / 2
          centerY = source.position().y + source.getBBox().height / 2
          if (target.getData().nodeType === 'node') {
          if (target.getData().nodeType === 'node' || target.getData().nodeType === 'dashedBox') {
            centerY = target.position().y + target.getBBox().height / 2
          }
        }
@@ -1725,14 +1920,14 @@
        let endNode = this.graph.getCellById(endNodeId)

        if (startNode && endNode) {
          let isRight = true;
          let startPort = 'right1'
          let endPort = 'left1'
          let routerStart = ['right'];
          let routerEnd = ['left'];
          if (this.isTopBottom(graphEdge)) {
            startPort = 'bottom1'
            endPort = 'top1'
            routerStart = ['top', 'bottom'];
            routerEnd = ['top', 'bottom'];
          }

          let isRight = true;
          if (this.hasOtherLineToMyLine(graphEdge.id)) {
            let leftX = startNode.position().x + startNode.getBBox().width
            let rightX = endNode.position().x
@@ -1741,29 +1936,51 @@
              isRight = false
            }
          }

          let result = this.addNodeAndConnect(null, dragNode, centerX, centerY)
          if (!result) {
            dragNode.remove()
            this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
            return
          }
          if (isRight) {
            graphEdge.target = {cell: result.newStartNode.id, port: endPort}
            if (endNode.getData()) {
              if ("parallel,vote,bridge".indexOf(endNode.getData().nodeType) > -1) {
                isRight = false
              }
            }
          }
          let result = this.addNodeAndConnect(null, dragNode, centerX, centerY)

          if (isRight) {
            graphEdge.target = {cell: result.newStartNode.id}
            this.graph.addEdge({
              source: {cell: result.newEndNode, port: startPort},
              target: {cell: endNode, port: endPort},
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
              source: {cell: result.newEndNode},
              target: {cell: endNode},
              router: {
                name: 'manhattan',
                args: {
                  startDirections: routerStart, // 从下方开始
                  endDirections: routerEnd,      // 向左方结束
                },
              },
              connector: {name: 'rounded'},
              zIndex: -1
            })
          } else {
            this.graph.addEdge({
              source: {cell: startNode, port: startPort},
              target: {cell: result.newStartNode, port: endPort},
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
              source: {cell: startNode},
              target: {cell: result.newStartNode},
              router: {
                name: 'manhattan',
                args: {
                  startDirections: routerStart, // 从下方开始
                  endDirections: routerEnd,      // 向左方结束
                },
              },
              connector: {name: 'rounded'},
              zIndex: -1
            })
            graphEdge.source = {cell: result.newEndNode.id, port: startPort}
            graphEdge.source = {cell: result.newEndNode.id}
          }
          if (this.dataForm.autoLayout == 1) {
            if (!result.canPlace) {
              //调用自动排版
              this.layoutDiagram()
            }
          }
          // graphEdge.remove()
        }
@@ -1795,34 +2012,41 @@
      createParallelBrach(x, y, dragNode) {
        dragNode.position(x + 320, y - dragNode.size().height / 2)
        const connectNode = this.createConnectNode(x + 50, y)
        this.createBrach(dragNode, connectNode, x, y - 50)
        this.createBrach(dragNode, connectNode, x, y + 50)

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

        this.graph.addEdge({
          source: {cell: connectNode, port: 'right1'},
          target: {cell: dashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          source: {cell: connectNode},
          target: {cell: dashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top', 'bottom'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        this.graph.addEdge({
          source: {cell: dashedBox, port: 'right1'},
          target: {cell: dragNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          source: {cell: dashedBox},
          target: {cell: dragNode},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['right'], // 从下方开始
              endDirections: ['top', 'bottom'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        return {newStartNode: connectNode, newEndNode: dragNode}
        /*        this.graph.addEdge({
                  source: {cell: startNode, port: 'right1'},
                  target: {cell: connectNode, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })
                this.graph.addEdge({
                  source: {cell: dragNode, port: 'right1'},
                  target: {cell: endNode, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })*/
      },
      createBridgeConnection(x, y, dragNode) {
        console.log(x, y, 'leftX centerY')
@@ -1830,11 +2054,37 @@
        const rightTopDashedBox = this.createDashedBox(x + 380, y)

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

        const leftBottomDashedBox = this.createDashedBox(x + 50, y + 160)
        const rightBottomDashedBox = this.createDashedBox(x + 370, y + 160)
        const rightConnectNode = this.createBridgeNode(x + 530, y + 87, leftConnectNode.id, edgeTop.id, edgeBottom.id)

        rightConnectNode.setData({startNodeId: leftConnectNode.id})
        leftConnectNode.setData({endNodeId: rightConnectNode.id})
@@ -1851,55 +2101,84 @@
                  connector: {name: 'rounded'}
                })*/
        this.graph.addEdge({
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftTopDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          source: {cell: leftConnectNode},
          target: {cell: leftTopDashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top', 'bottom'],
              endDirections: ['left'],
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        this.graph.addEdge({
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftBottomDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })

        let edgeTop = this.graph.addEdge({
          source: {cell: leftTopDashedBox, port: 'right1'},
          target: {cell: rightTopDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        let edgeBottom = this.graph.addEdge({
          source: {cell: leftBottomDashedBox, port: 'right1'},
          target: {cell: rightBottomDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          source: {cell: leftConnectNode},
          target: {cell: leftBottomDashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top', 'bottom'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })

        this.graph.addEdge({
          source: {cell: rightTopDashedBox, port: 'right1'},
          target: {cell: rightConnectNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          source: {cell: rightTopDashedBox},
          target: {cell: rightConnectNode},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['right'], // 从下方开始
              endDirections: ['top', 'bottom'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        this.graph.addEdge({
          source: {cell: rightBottomDashedBox, port: 'right1'},
          target: {cell: rightConnectNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          source: {cell: rightBottomDashedBox},
          target: {cell: rightConnectNode},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['right'],
              endDirections: ['top', 'bottom'],
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })

        this.graph.addEdge({
          source: {cell: edgeTop},
          target: {cell: alignCenterDashedBox, port: 'top1'},
          router: {name: 'manhattan'},
          target: {cell: alignCenterDashedBox},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top', 'bottom'], // 从下方开始
              endDirections: ['top', 'bottom'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        this.graph.addEdge({
          source: {cell: alignCenterDashedBox, port: 'bottom1'},
          source: {cell: alignCenterDashedBox},
          target: {cell: edgeBottom},
          router: {name: 'manhattan'},
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top', 'bottom'], // 从下方开始
              endDirections: ['top', 'bottom'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
          zIndex: -1
        })
        dragNode.remove()
        return {newStartNode: leftConnectNode, newEndNode: rightConnectNode}
@@ -1909,8 +2188,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,
@@ -1925,7 +2204,7 @@
              'xlink:href': '/modelImg/dashedBox.svg',
            },
            text: {
              text: 'dashedBox',
              text: '',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
@@ -1961,7 +2240,7 @@
              'xlink:href': '/modelImg/connect.svg',
            },
            text: {
              text: 'connect',
              text: '',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
@@ -1975,18 +2254,19 @@
        connectNode.position(x, y - connectNode.size().height / 2)
        return connectNode
      },
      createBridgeNode(x, y) {
        const connectId = getUUID().toString()
      createBridgeNode(x, y, connectId, edgeTopId, edgeBottomId) {
        const dragNodeId = getUUID().toString()
        let bridgeNode = this.graph.addNode({
          shape: 'image',
          width: 30,
          height: 30,
          id: connectId,
          id: dragNodeId,
          data: {
            isSelfCreated: true,
            type: 'imageNodes',
            endNodeId: dragNodeId,
            startNodeId: connectId,
            edgeTopId: edgeTopId,
            edgeBottomId: edgeBottomId,
            dataId: '',
            nodeType: 'bridge',
            nodeTypeExt: '',
@@ -2085,9 +2365,20 @@
        return false
      },
      isTopBottom(edge) {
        if (edge.source.port === 'top1' || edge.source.port === 'bottom1' || edge.target.port === 'top1' || edge.target.port === 'bottom1') {
        if (this.hasTopBottom(edge.getRouter().args.startDirections) && this.hasTopBottom(edge.getRouter().args.endDirections)) {
          return true
        }
        return false
      },
      hasTopBottom(object) {
        let result = false
        for (let a of object) {
          if (a == "top" || a == "bottom") {
            result = true
            break
          }
        }
        return result
      },
      isMultipleBrach(node) {
        let outEdges = this.getOutLinesOfNode(node)
@@ -2190,7 +2481,7 @@
<style>
  #containerImg {
    display: flex;
    border: 1px solid #dfe3e8;
    /*border: 1px solid #dfe3e8;*/
    height: 400px;
    width: 100% !important;
  }
@@ -2224,4 +2515,20 @@
    top: 0
  }

  #containerImg .x6-graph-pagebreak>.x6-graph-pagebreak-horizontal {
    position: absolute;
    right: 0;
    left: 0;
    box-sizing: border-box;
    height: 0;
    border-top: none;
  }
  #containerImg .x6-graph-pagebreak>.x6-graph-pagebreak-vertical {
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    width: 0;
    border-left: none;
  }
</style>