组合图

wente

2024-04-30 225616b409fff50107ad7e9c790c96a65434e35d

组合图

 web/public/modelImg/bridgeConnection.svg

New file
@@ -0,0 +1,33 @@
<svg width="150.000000" height="150.000000" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <desc>
            Created with Pixso.
    </desc>
    <defs>
        <clipPath id="clip18_6">
            <rect id="画板 1" width="150.000000" height="150.000000" fill="white" fill-opacity="0"/>
        </clipPath>
    </defs>
    <rect id="画板 1" width="150.000000" height="150.000000" fill="#FFFFFF" fill-opacity="0"/>
    <g clip-path="url(#clip18_6)">
        <circle id="椭圆 1" cx="75.000000" cy="75.000000" r="75.000000" fill="#C4C4C4" fill-opacity="0"/>
        <circle id="椭圆 1" cx="75.000000" cy="75.000000" r="72.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 1" x1="25.000000" y1="112.500000" x2="125.000000" y2="112.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 2" x1="127.000000" y1="115.000000" x2="127.000000" y2="35.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 2" x1="25.000000" y1="115.000000" x2="25.000000" y2="35.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 3" x1="26.000000" y1="37.500000" x2="126.000000" y2="37.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 7" x1="129.000000" y1="75.000000" x2="149.000000" y2="75.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 7" x1="77.000000" y1="63.000000" x2="77.000000" y2="37.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 7" x1="77.000000" y1="111.000000" x2="77.000000" y2="86.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 7" x1="3.000000" y1="75.000000" x2="23.000000" y2="75.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <rect id="矩形 1" x="37.000000" y="31.000000" width="25.000000" height="14.000000" fill="#FFFFFF" fill-opacity="1.000000"/>
        <rect id="矩形 1" x="39.500000" y="33.500000" width="20.000000" height="9.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <rect id="矩形 1" x="89.000000" y="30.000000" width="25.000000" height="14.000000" fill="#FFFFFF" fill-opacity="1.000000"/>
        <rect id="矩形 1" x="91.500000" y="32.500000" width="20.000000" height="9.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <rect id="矩形 1" x="37.000000" y="104.000000" width="25.000000" height="14.000000" fill="#FFFFFF" fill-opacity="1.000000"/>
        <rect id="矩形 1" x="39.500000" y="106.500000" width="20.000000" height="9.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <rect id="矩形 1" x="92.000000" y="105.000000" width="25.000000" height="14.000000" fill="#FFFFFF" fill-opacity="1.000000"/>
        <rect id="矩形 1" x="94.500000" y="107.500000" width="20.000000" height="9.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <rect id="矩形 1" x="70.500000" y="87.500000" width="25.000000" height="14.000000" transform="rotate(-90 70.500000 87.500000)" fill="#FFFFFF" fill-opacity="1.000000"/>
        <rect id="矩形 1" x="73.000000" y="85.000000" width="20.000000" height="9.000000" transform="rotate(-90 73.000000 85.000000)" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
    </g>
</svg>

 web/public/modelImg/dashedBox.svg

New file
@@ -0,0 +1,15 @@
<svg width="170.000000" height="90.000000" viewBox="0 0 170 90" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <desc>
            Created with Pixso.
    </desc>
    <defs>
        <clipPath id="clip17_2">
            <rect id="画板 1" width="170.000000" height="90.000000" fill="white" fill-opacity="0"/>
        </clipPath>
    </defs>
    <rect id="画板 1" width="170.000000" height="90.000000" fill="#FFFFFF" fill-opacity="0"/>
    <g clip-path="url(#clip17_2)">
        <rect id="矩形 1" width="170.000000" height="90.000000" fill="#FFFFFF" fill-opacity="1.000000"/>
        <rect id="矩形 1" x="1.000000" y="1.000000" width="168.000000" height="88.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="2.000000" stroke-dasharray="4 8 12 16"/>
    </g>
</svg>

 web/public/modelImg/parallel.svg

New file
@@ -0,0 +1,22 @@
<svg width="150.000000" height="150.000000" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <desc>
            Created with Pixso.
    </desc>
    <defs>
        <clipPath id="clip15_2">
            <rect id="画板 1" width="150.000000" height="150.000000" fill="white" fill-opacity="0"/>
        </clipPath>
    </defs>
    <rect id="画板 1" width="150.000000" height="150.000000" fill="#FFFFFF" fill-opacity="0"/>
    <g clip-path="url(#clip15_2)">
        <circle id="椭圆 1" cx="75.000000" cy="75.000000" r="75.000000" fill="#C4C4C4" fill-opacity="0"/>
        <circle id="椭圆 1" cx="75.000000" cy="75.000000" r="72.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 1" x1="11.000000" y1="111.000000" x2="103.000000" y2="111.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 2" x1="104.000000" y1="113.500000" x2="104.000000" y2="33.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 3" x1="14.000000" y1="36.000000" x2="103.000000" y2="36.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 4" x1="5.000000" y1="55.000000" x2="103.000000" y2="55.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 5" x1="2.000000" y1="75.000000" x2="103.000000" y2="75.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 6" x1="4.000000" y1="93.000000" x2="103.000000" y2="93.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 7" x1="106.000000" y1="75.000000" x2="146.000000" y2="75.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
    </g>
</svg>

 web/public/modelImg/switch.svg

@@ -11,12 +11,10 @@
    <g clip-path="url(#clip9_15)">
        <circle id="椭圆 1" cx="75.000000" cy="75.000000" r="75.000000" fill="#C4C4C4" fill-opacity="0"/>
        <circle id="椭圆 1" cx="75.000000" cy="75.000000" r="72.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 1" x1="0.000000" y1="72.000000" x2="30.000000" y2="72.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 2" x1="31.500000" y1="113.002548" x2="31.500000" y2="33.002548" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 3" x1="29.000000" y1="35.000000" x2="79.000000" y2="35.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 4" x1="30.000000" y1="58.000000" x2="80.000000" y2="58.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 5" x1="30.000000" y1="85.000000" x2="80.000000" y2="85.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 6" x1="30.000000" y1="110.500000" x2="80.000000" y2="110.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 3" x1="14.000000" y1="35.000000" x2="79.000000" y2="35.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 4" x1="4.000000" y1="58.000000" x2="80.000000" y2="58.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 5" x1="4.000000" y1="85.000000" x2="81.000000" y2="85.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 6" x1="12.000000" y1="110.500000" x2="80.000000" y2="110.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 7" x1="118.000000" y1="76.000000" x2="148.000000" y2="76.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <line id="直线 8" x1="85.896255" y1="37.340614" x2="111.483505" y2="73.882980" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
        <circle id="椭圆 2" cx="114.000000" cy="76.000000" r="5.000000" fill="#C4C4C4" fill-opacity="0"/>

 web/src/views/modules/taskReliability/ConfigNode/index.vue

@@ -464,12 +464,12 @@
        globalGridAttr.isRepair = cell.getData().isRepair
        globalGridAttr.voteNum = cell.getData().voteNum
        globalGridAttr.productType= cell.getData().productType
        console.log(cell.getData().voteNum,'cell.getData().voteNum')
        // console.log(cell.getData().voteNum,'cell.getData().voteNum')
        if(this.nodeType==='vote' || this.globalGridAttr.nodeTypeExt === 'vote' || (cell.getData().voteNum!==undefined && cell.getData().voteNum!=='')){
          console.log(cell.getData().voteNum,'cell.getData().voteNum')
          this.showNumberInput = true
        }
        console.log(this.showNumberInput,'this.showNumberInput')
        // console.log(this.showNumberInput,'this.showNumberInput')
        this.showRepairInput = cell.getData().isRepair
        cell.removeTools()
        cell.addTools([

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

@@ -87,13 +87,15 @@
  },
  data() {
    return {
        hasMoveNode: false,
        hasMoveSingleNode: null,
      nodeAdded: false,
      connectNode: {},
      modelId: '',
      modelName: '',
      modelType: '',
      timer: null,
      imgsList: [
        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: {}},
        {
@@ -114,22 +116,37 @@
          imgId: '5',
          data: {}
        },
        {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}},
      ],
      imgsList2: [
        // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
      ],
      combiningImages: [
        {
          imgPath: 'switch',
          imgName: 'switch',
          nodeType: 'switch',
            imgPath: 'parallel',
            imgName: 'parallel',
            nodeType: 'parallel',
          imgWidth: 60,
          imgHeight: 60,
          imgId: '5',
            imgId: '9',
          data: {}
        },
        {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}}
          {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}},
          {
            imgPath: 'dashedBox',
            imgName: 'dashedBox',
            nodeType: 'dashedBox',
            imgWidth: 60,
            imgHeight: 60,
            imgId: '9',
            data: {}
          },
          {
            imgPath: 'bridgeConnection',
            imgName: 'bridgeConnection',
            nodeType: 'bridgeConnection',
            imgWidth: 60,
            imgHeight: 60,
            imgId: '9',
            data: {}
          },
        ],
        imagesList2: [
          // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
      ],
      nodeType: '',
      first: true,
@@ -335,16 +352,16 @@
        token: Cookies.get('token'),
      }
      let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
      console.log(res, 'async getDiagram( res')
      if (res.data !== null && (res.data.content != null)) {
        this.dataForm = res.data
        console.log(this.dataForm, 'this.dataForm in getDiagram')
        if (this.dataForm.content != '') {
          this.diagramJson = JSON.parse(this.dataForm.content)
        }
        // console.log(this.dataForm.content,'this.Diagram content')
        console.log(this.diagramJson, 'this.Diagram json')
          if(this.diagramJson.cells.length!==0){
        this.graph.fromJSON(this.diagramJson)
          }else {
            this.initCells()
          }
          console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')

        this.graph.positionContent('left')
        // this.graph.centerContent()
        // this.graph.zoomToFit()
@@ -377,7 +394,7 @@
          enabled: true,
          beforeAddCommand(event, args) {
            if (args.key === 'tools') {
              console.log(args.key, 'event, args')
                // console.log(args.key, 'event, args')
              return false
            }
          },
@@ -478,7 +495,7 @@
          enabled: true,
          rubberband: true,
          rubberEdge: true,
          // showNodeSelectionBox: true,
            showNodeSelectionBox: true,
        },
        snapline: true,
        keyboard: true,
@@ -488,6 +505,10 @@
      const stencil = new Addon.Stencil({
        getDragNode: (node) => node.clone({keepId: true}),
        getDropNode: (node) => {
            const { width, height } = node.size()
            if(node.getData().type && node.getData().nodeType === 'dashedBox'){
              return node.clone().size(170, 90)
            }
          if (node.getData().type && node.getData().type === 'imageNodes2') {
            return node.clone({keepId: true})
          } else {
@@ -512,11 +533,7 @@
          {
            title: '运算符号',
            name: 'group1',
          },
          {
            title: '组合图',
            name: 'combiningImages',
            graphHeight: 100,
              graphHeight: 360,
          },
          {
            title: '设备节点',
@@ -533,40 +550,7 @@
        },
      })
      document.getElementById('stencilImg').appendChild(stencil.container)
      const imageNodes = this.imgsList.map((item) =>
          this.graph.createNode({
            shape: 'image',
            // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
            width: item.imgWidth,
            height: item.imgHeight,
            data: {
              type: 'imageNodes',
              dataId: '',
              nodeType: item.nodeType,
              nodeTypeExt: '',
              voteNum: ''
            },
            attrs: {
              image: {
                'xlink:href': '/modelImg/' + item.imgPath + '.svg',
              },
              text: {
                text: item.imgName,
                fontSize: 14,
                style: {
                  color: this.globalGridAttr.nodeColor
                },
                refX: 0.5,
                refY: '100%',
                refY2: 4,
                textAnchor: 'middle',
                textVerticalAnchor: 'top',
              },
            },
            ports: {...this.ports},
          }),
      )
      const combiningImages = this.combiningImages.map((item) =>
        const imageNodes = this.imagesList.map((item) =>
          this.graph.createNode({
            shape: 'image',
            // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
@@ -603,9 +587,9 @@
        productId: productId
      }
      let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
      this.imgsList2 = res.data
      console.log(this.imgsList2, 'getProduct(productId)234567890')
      const imageNodes2 = this.imgsList2.map((item) =>
        this.imagesList2 = res.data
        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}`,
@@ -670,7 +654,6 @@
      )
      stencil.load(imageNodes, 'group1')
      stencil.load(imageNodes2, 'group2')
      stencil.load(combiningImages, 'combiningImages')

      this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
        const cells = this.graph.getSelectedCells()
@@ -782,6 +765,59 @@
          })
        }
      });
        // 监听节点位置改变事件
        this.graph.on('node:change:position', ({node}) => {
          this.hasMoveNode = true
          this.hasMoveSingleNode = node
        });
        // 抬起
        this.graph.on('node:mouseup', ({e,x,y,node}) => {

          if (this.hasMoveNode) {
            const selectionNodes = this.graph.getSelectedCells().filter(node => node.isNode() )
            if (selectionNodes.length == 0){
              selectionNodes.push(this.hasMoveSingleNode)
            }
            //let selectionNodes = []
            console.log('横坐标：',x,'纵坐标：'+y)
            // let allNodes = this.graph.getNodes()
            //
            // for(let node of allNodes){
            //    if (this.graph.isSelected(node)){
            //      selectionNodes.push(node)
            //    }
            //
            // }
            // 获取包含指定坐标点的节点
            const nodes = this.graph.getNodes();
            let hasNodes = []
            for (let i = 0; i < nodes.length; i++) {
              const node = nodes[i];
              const bbox = node.getBBox();
              if (x>=bbox.x && x <= bbox.x + bbox.width && y>=bbox.y && y <= bbox.y + bbox.height) {
                if ( selectionNodes.indexOf(node)===-1) {
                  hasNodes.push(node);
                }
              }
            }
            if(hasNodes){}
            console.log('获取包含指定坐标点的节点集合',hasNodes)
            console.log('选中的节点集合：',selectionNodes)

            // if (selectionNodes.length>2)
            //   this.graph.addEdge({
            //     source: {cell: selectionNodes[0], port: 'left1'},
            //     target: {cell: selectionNodes[selectionNodes.length-1], port: 'right1'},
            //     router: {name: 'manhattan'},
            //     connector: {name: 'rounded'}
            //   })
            this.hasMoveNode = false
            this.hasMoveSingleNode = null


            // console.log('移动过节点（多个）再抬起鼠标后得到的节点',selectedNodes);
          }
        });
      this.graph.on('cell:click', ({cell}) => {
        // this.type.value = cell.isNode() ? "node" : "edge"
        this.type = cell.isNode() ? 'node' : 'edge'
@@ -789,9 +825,9 @@
        this.id = cell.id
        if (this.type === 'node') {
          this.nodeType = cell.getData().nodeType
          console.log(this.nodeType, cell.id, 'this.nodeType')
            // console.log(this.nodeType, cell.id, 'this.nodeType')
        }
        console.log(this.shape, 'this.shape')
          // console.log(this.shape, 'this.shape')
        // this.nodeOpt(this.id, this.globalGridAttr)
      })
      //单击边节点
@@ -965,7 +1001,6 @@
      for (let a of NODE) {
        let x = a.getBBox().x
        a.position(x, topY)
        // console.log(leftX, ':', y, '  x:y')
      }
    },
    centerAlign() {
@@ -988,7 +1023,6 @@
      for (let a of NODE) {
        let y = a.getBBox().y
        a.position(centerX - a.getBBox().width / 2, y)
        // console.log(leftX, ':', y, '  x:y')
      }
    },
    shuipingAlign() {
@@ -1055,12 +1089,13 @@
      )
    },
    addNodeAndConnect(node, nodeObj) { // node是画布原有的节点。nodeObj是当前拖拽的节点
      const nodeType = node.getData().nodeType  // 获取节点类型
        const nodeType = node.getData().nodeType  // 获取画布原有的节点类型
        const nodeObjType = nodeObj.getData().nodeType  // 获取当前拖拽的节点类型
      const edges = this.graph.getConnectedEdges(node); // 获取与原节点相关联的所有连接线
      let TopSum = 0 // 在原节点上方
      let BottomSum = 0 // 在原节点下方
      const edgesSum = edges.length
      if (nodeType !== 'node') {
        if ((nodeType === 'end'|| nodeType === 'vote' || nodeType === 'switch' || nodeType === 'parallel') && nodeObjType === 'node') {
        if (edges.length === 0) {
          if (!this.nodeAdded) {
            // 添加节点的操作
@@ -1072,6 +1107,7 @@
              data: {
                type: 'imageNodes',
                dataId: '',
                  signId:node.id,
                nodeType: 'connect',
                nodeTypeExt: '',
                voteNum: ''
@@ -1095,11 +1131,11 @@
            // 设置标记为 true，表示已经添加过节点
            this.nodeAdded = true;
          }
          nodeObj.position(node.position().x - 240, node.position().y - (120 * edgesSum));
          this.connectNode.position(node.position().x - 480, node.position().y + (node.size().height - this.connectNode.size().height) / 2);
            nodeObj.position(node.position().x - 120, node.position().y - (120 * edgesSum));
            this.connectNode.position(node.position().x - 240, node.position().y + (node.size().height - this.connectNode.size().height) / 2);
        } else if (edges.length === 1) {
          // 将节点移动到指定的位置
          nodeObj.position(node.position().x - 240, node.position().y - (120 * edgesSum));
            nodeObj.position(node.position().x - 120, node.position().y - (120 * edgesSum));
        } else {
          for (const edge of edges) {
            const sourcePointY = edge.getSourcePoint().y; // 获取连接线的起始点y坐标
@@ -1113,9 +1149,9 @@
          }
          console.log('在原节点上方的连接线数量:' + TopSum, '在原节点下方的连接线数量:' + BottomSum)
          if (TopSum > BottomSum) {
            nodeObj.position(node.position().x - 240, node.position().y + (120 + (120 * BottomSum)))
              nodeObj.position(node.position().x - 120, node.position().y + (120 + (120 * BottomSum)))
          } else {
            nodeObj.position(node.position().x - 240, node.position().y - (120 + (120 * TopSum)));
              nodeObj.position(node.position().x - 120, node.position().y - (120 + (120 * TopSum)));
          }
        }
        this.graph.addEdge({
@@ -1133,7 +1169,8 @@
            connector: {name: 'rounded'}
          })
        }
      } else {
        }
        if (nodeType === 'node' || (nodeType === 'dashedBox' && nodeObjType === 'dashedBox')) {
          // 遍历所有连接线并删除与给定节点对象相关的连接线
        console.log(edges, '所有有关联的连接线 edge')
        if(edges.length === 0){
@@ -1152,7 +1189,7 @@
              const targetNode = this.graph.getCellById(edge.target.cell) // 获取连接线的目标节点对象
              console.log(sourceNode, targetNode, 'targetNode 目标节点对象')
              // edge.remove(); // 从图中删除该连接线
              nodeObj.position(node.position().x +node.getBBox().width+50, node.position().y);
                nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y + (node.size().height - nodeObj.size().height) / 2);
              // edge.source = {cell: node, port: 'right1'}
              edge.target = {cell: nodeObj, port: 'left1'}
              // targetNode.position(nodeObj.position().x +nodeObj.getBBox().width+50, node.position().y);
@@ -1183,6 +1220,106 @@

      }
    },
      initCells(){
        const startNode = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 60,
          height: 60,
          data: {
            type: 'imageNodes',
            dataId: '',
            nodeType: 'start',
            nodeTypeExt: '',
            voteNum: ''
          },
          attrs: {
            image: {
              'xlink:href': '/modelImg/start.svg',
            },
            text: {
              text: 'start',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
          },
          ports: {...this.ports},
        })
        const dashedBox = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 170,
          height: 90,
          data: {
            type: 'imageNodes',
            dataId: '',
            nodeType: 'dashedBox',
            nodeTypeExt: '',
            voteNum: ''
          },
          attrs: {
            image: {
              'xlink:href': '/modelImg/dashedBox.svg',
            },
            text: {
              text: 'dashedBox',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
          },
          ports: {...this.ports},
        })
        const endNode = this.graph.addNode({
          shape: 'image',
          width: 60,
          height: 60,
          data: {
            type: 'imageNodes',
            dataId: '',
            nodeType: 'end',
            nodeTypeExt: '',
            voteNum: ''
          },
          attrs: {
            image: {
              'xlink:href': '/modelImg/end.svg',
            },
            text: {
              text: 'end',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
          },
          ports: {...this.ports},
        })
        startNode.position(-600, 0);
        dashedBox.position(0, (startNode.size().height - dashedBox.size().height) / 2);
        endNode.position(600, 0);
        this.graph.addEdge({
          source: {cell: startNode, port: 'right1'},
          target: {cell: dashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        this.graph.addEdge({
          source: {cell: dashedBox, port: 'right1'},
          target: {cell: endNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
      },
  },

}