修改

jinlin

2024-07-16 c2f855eb59e9d19d4957bc4cb51e3ca63d4ce4c4

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

@@ -48,12 +48,8 @@
          <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>
@@ -62,19 +58,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
@@ -94,230 +88,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,
@@ -325,7 +102,7 @@
              },
              "size": {
                "width": 60,
                "height": 60
                "height": 40
              },
              "attrs": {
                "text": {
@@ -335,7 +112,7 @@
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "/modelImg/start.svg"
                  "xlink:href": "${url}10011"
                }
              },
              "visible": true,
@@ -447,8 +224,8 @@
                "y": 0
              },
              "size": {
                "width": 100,
                "height": 60
                "width": 60,
                "height": 40
              },
              "attrs": {
                "text": {
@@ -458,7 +235,7 @@
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "/modelImg/dashedBox.svg"
                  "xlink:href": "${url}10015"
                }
              },
              "visible": true,
@@ -570,7 +347,7 @@
              },
              "size": {
                "width": 60,
                "height": 60
                "height": 40
              },
              "attrs": {
                "text": {
@@ -580,7 +357,7 @@
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "/modelImg/end.svg"
                  "xlink:href": "${url}10012"
                }
              },
              "visible": true,
@@ -726,6 +503,219 @@
            }
          ]
        }
        `
        return JSON.parse(result)
      }
    },
    data() {
      return {
        nodeX:'',
        nodeY:'',
        isFirstLoad: true,
        hasMoveNode: false,
        hasMoveSingleNode: null,
        nodeAdded: false,
        connectNode: {},
        modelId: '',
        modelName: '',
        modelType: '',
        timer: null,
        imagesList: [
          {
            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,
          pid: null,
          model_tag: '',
          model_name: '',
          product_id: null,
          content: null,
          publishContent: null,
          hasPublish: 0,
          urlPref: '',
          nodeArr: []
        },
        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',
            },
          ],
        }
      }
    },
    watch: {
@@ -758,8 +748,10 @@
          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.isFirstLoad = false;
@@ -769,14 +761,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()
@@ -805,9 +797,6 @@
              }
            },
          },
          // panning: {
          //   enabled: true,
          // },
          scroller: {
            enabled: true,
            pageVisible: true,
@@ -828,9 +817,6 @@
          connecting: {
            router: {
              name: 'manhattan',
              // args: {
              //   padding: 1,
              // },
            },
            connector: {
              name: 'rounded',
@@ -841,6 +827,7 @@
            anchor: 'center',
            connectionPoint: 'anchor',
            allowBlank: false,
            allowLoop:false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true
            snap: {
              radius: 20,
            },
@@ -848,9 +835,10 @@
              return new Shape.Edge({
                attrs: {
                  line: {
                    //  sourceMarker: 'block', // 实心箭头
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: {fill: 'none'}
                    targetMarker: null
                  }
                },
                labels: [{
@@ -913,7 +901,7 @@
          getDropNode: (node) => {
            const {width, height} = node.size()
            if (node.getData().type && node.getData().nodeType === 'dashedBox') {
              return node.clone().size(100, 60)
              return node.clone().size(60, 40)
            }
            if (node.getData().type && node.getData().type === 'imageNodes2') {
              return node.clone({keepId: true})
@@ -997,9 +985,10 @@
        }
        let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
        this.imagesList2 = res.data
        console.log(this.imagesList2, 'getProduct(productId)234567890')
        let urlObject = window.URL || window.webkitURL || window;
        /*for(let i =0;i<this.imagesList2.length;i++){

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

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

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

              imgHeight: item.imgHeight,
              imgWidth: item.imgWidth,
              voteNum: '',
@@ -1070,6 +1062,42 @@
        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) {
@@ -1120,7 +1148,7 @@
        })

        this.graph.on('blank:click', ({cell}) => {
          this.reset()
          // this.reset()
          // this.type.value = "grid"
          this.type = 'grid'
          // this.id = cell.id
@@ -1157,41 +1185,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()
@@ -1422,11 +1442,22 @@
      },
      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')
        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: '确定'
            })
@@ -1435,10 +1466,31 @@
      },
      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 === 'dashedBox'){
            this.$message({message: '该模型中存在虚框，无法保存', type: 'warning'})
            return false; // 取消添加节点操作
          }
          if(node.getData().nodeType === 'vote'){
            const edges = this.graph.getConnectedEdges(node);
            if(node.getData().voteNum>=edges.length){
              this.$message({message: '表决数量不能高于该节点的进线数量', type: 'warning'})
              return false; // 取消添加节点操作
            }
          }
          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 => {
          if (res.msg === 'success') {
            this.$emit('refreshDataList')
            this.$alert('解析成功', '提示', {
              confirmButtonText: '确定'
            })
@@ -1678,8 +1730,8 @@
          width = 60
          height = 60
        } else if (dragNodeType === 'dashedBox') {
          width = 100
          height = 60
          width = 60
          height = 40
        } else if (dragNodeType === 'bridgeConnection') {
          width = 550
          height = 175
@@ -1836,11 +1888,11 @@
        const rightTopDashedBox = this.createDashedBox(x + 380, y)

        const leftConnectNode = this.createConnectNode(x, y + 87)
        const alignCenterDashedBox = this.createDashedBox(x + 210, y + 87)
        const alignCenterDashedBox = this.createDashedBox(x + 209, y + 87)
        const rightConnectNode = this.createBridgeNode(x + 530, y + 87)

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

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

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

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

        this.graph.addEdge({
@@ -1915,8 +1967,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,