Merge remote-tracking branch 'origin/master'

xyc

2024-05-08 563640b16778af6a281ed9417e2dcbed0ba5aa54

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

@@ -3,7 +3,7 @@
    <el-row :gutter="[8,8]">
      <el-col :span="4">
        <div :style="'height:' +left_p+'px'">
          <div class="fa-card-a" style="height: 100%">
          <div style="height: 100%">
            <div id="stencilImg"></div>
          </div>
        </div>
@@ -12,58 +12,34 @@
        <div class="fa-card-a">
          <el-form :inline="true">
            <el-form-item>
              模型名称：{{modelName}}
              模型名称：{{ modelName }}
            </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="clearDiagram()">清空图形</el-button>
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="左对齐" placement="left">
                <el-button class="" style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF;"
                           @click="leftAlign()"><i style="font-size: 2rem;"
                                                   class="wt-iconfont icon-zuoduiqi"></i></el-button>
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="居中对齐" placement="left">
                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                           @click="centerAlign()"><i style="font-size: 2rem;"
                                                     class="wt-iconfont icon-chuizhiduiqi"></i></el-button>
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="右对齐" placement="left">
                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                           @click="rightAlign()"><i style="font-size: 2rem;"
                                                    class="wt-iconfont icon-youduiqi"></i></el-button>
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="顶部对齐" placement="left">
                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                           @click="topAlign()"><i style="font-size: 2rem;"
                                                  class="wt-iconfont icon-dingduiqi"></i></el-button>
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="水平对齐" placement="left">
                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                           @click="shuipingAlign()"><i style="font-size: 2rem;"
                                                       class="wt-iconfont icon-shuipingduiqi"></i></el-button>
              </el-tooltip>
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="底部对齐" placement="left">
                <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
                           @click="bottomAlign()"><i style="font-size: 2rem;"
                                                     class="wt-iconfont icon-diduiqi"></i></el-button>
              </el-tooltip>
              <el-button @click="leftAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i>
              </el-button>
              <el-button @click="centerAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-chuizhiduiqi"></i>
              </el-button>
              <el-button @click="rightAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-youduiqi"></i>
              </el-button>
              <el-button @click="topAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-dingduiqi"></i>
              </el-button>
              <el-button @click="shuipingAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-shuipingduiqi"></i>
              </el-button>
              <el-button @click="bottomAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-diduiqi"></i>
              </el-button>
            </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%);">
        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"
@@ -111,26 +87,28 @@
    },
    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: {}},
          {
            imgPath: 'connect',
            imgName: 'connect',
            nodeType: 'connect',
            imgWidth: 20,
            imgHeight: 20,
            imgWidth: 30,
            imgHeight: 30,
            imgId: '3',
            data: {}
          },
          // {imgPath:'parallelLeft',imgName:'parallelLeft',nodeType:'parallelLeft',imgWidth:60,imgHeight:60,imgId:'3',data:{}},
          // {imgPath:'parallelRight',imgName:'parallel',nodeType:'parallel',imgWidth:60,imgHeight:60,imgId:'4',data:{}},
          {
            imgPath: 'switchRight',
            imgPath: 'switch',
            imgName: 'switch',
            nodeType: 'switch',
            imgWidth: 60,
@@ -138,9 +116,36 @@
            imgId: '5',
            data: {}
          },
          {imgPath: 'voteRight', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}},
          {
            imgPath: 'parallel',
            imgName: 'parallel',
            nodeType: 'parallel',
            imgWidth: 60,
            imgHeight: 60,
            imgId: '9',
            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: {}
          },
        ],
        imgsList2: [
        imagesList2: [
          // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
        ],
        nodeType: '',
@@ -157,6 +162,7 @@
          content: null,
          publishContent: null,
          hasPublish: 0,
          urlPref: '',
        },
        // emptyJson: {
        //   // 节点
@@ -184,6 +190,7 @@
        id: '',
        graph: null,
        globalGridAttr: {
          productType: '',
          voteNum: '',
          repairMttcr: '',
          repairMttcrOther: '',
@@ -211,7 +218,8 @@

          stroke: '#5F95FF',
          strokeWidth: 1,
          connector: 'normal',
          connector: 'rounded',
          router: 'manhattan',
          label: '',
          nodeStroke: '#5F95FF',
          nodeStrokeWidth: 1,
@@ -234,7 +242,7 @@
        ports: {
          groups: {
            top: {
              position: 'top',
              position: {name: 'top'},
              attrs: {
                circle: {
                  r: 4,
@@ -249,7 +257,7 @@
              },
            },
            right: {
              position: 'right',
              position: {name: 'right'},
              attrs: {
                circle: {
                  r: 4,
@@ -264,7 +272,7 @@
              },
            },
            bottom: {
              position: 'bottom',
              position: {name: 'bottom'},
              attrs: {
                circle: {
                  r: 4,
@@ -279,7 +287,7 @@
              },
            },
            left: {
              position: 'left',
              position: {name: 'left'},
              attrs: {
                circle: {
                  r: 4,
@@ -296,15 +304,19 @@
          },
          items: [
            {
              id: 'top1',
              group: 'top',
            },
            {
              id: 'right1',
              group: 'right',
            },
            {
              id: 'bottom1',
              group: 'bottom',
            },
            {
              id: 'left1',
              group: 'left',
            },
          ],
@@ -335,19 +347,24 @@
      },
      async getDiagram(modelId) {
        let params = {
          modelId: modelId
          modelId: modelId,
          urlPref: window.SITE_CONFIG['apiURL'],
          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) {
        if (res.data !== null && (res.data.content != null)) {
          this.dataForm = res.data
          console.log(this.dataForm, 'this.dataForm in getDiagram')
          this.diagramJson = JSON.parse(this.dataForm.content)
          // console.log(this.dataForm.content,'this.Diagram content')
          console.log(this.diagramJson, 'this.Diagram json')
          this.graph.fromJSON(this.diagramJson)
          this.graph.centerContent()
          this.graph.zoomToFit()
          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()
        } else {
          await this.clearDiagram()
        }
@@ -356,8 +373,8 @@
        this.dataForm.id = null
        // this.graph.fromJSON(this.emptyJson)
        this.graph.fromJSON('')
        this.graph.centerContent()
        this.graph.zoomToFit()
        // this.graph.centerContent()
        // this.graph.zoomToFit()
        // this.graph.freeze()
      },
      async initDigram(productId) {
@@ -373,41 +390,38 @@
            visible: true,
          },
          autoResize: true,
            history: {
                enabled: true,
                beforeAddCommand(event, args) {
                    if (args.key==='tools') {
                        console.log(args.key,'event, args')
                        return false
                    }
                },
          history: {
            enabled: true,
            beforeAddCommand(event, args) {
              if (args.key === 'tools') {
                // console.log(args.key, 'event, args')
                return false
              }
            },
          },
          // panning: {
          //   enabled: true,
          // },
          scroller: {
            enabled: true,
            pageVisible: true,
            autoResize: true,
            pageBreak: true,
            pannable: true,
            minVisibleWidth: 200,
            minVisibleHeight: 200,
            modifiers: 'shift',
          },
          // panning: {
          //   enabled: true,
          //   modifiers: 'shift',
          // },
          mousewheel: {
            enabled: true,
            zoomAtMousePosition: true,
            modifiers: 'ctrl',
            minScale: 0.1,
            maxScale: 10,
            minScale: 0.5,
            maxScale: 3,
          },
          connecting: {
            router: {
              name: 'normal',
              name: 'manhattan',
              // args: {
              //   padding: 1,
              // },
@@ -415,10 +429,10 @@
            connector: {
              name: 'rounded',
              args: {
                radius: 8,
                radius: 5,
              },
            },
            // anchor: 'center',
            anchor: 'center',
            connectionPoint: 'anchor',
            allowBlank: false,
            snap: {
@@ -452,9 +466,9 @@
                  }
                }],
                tools: {
                  name: 'vertices',
                  name: 'segments',
                  args: {
                    attrs: { fill: '#666' },
                    attrs: {fill: '#666'},
                  },
                },
                zIndex: 0,
@@ -475,16 +489,13 @@
              },
            },
          },
          resizing: {
            enabled: true,
            restricted: true
          },
          resizing: true,
          rotating: true,
          selecting: {
            enabled: true,
            rubberband: true,
            rubberEdge: true,
            // showNodeSelectionBox: true,
            showNodeSelectionBox: true,
          },
          snapline: true,
          keyboard: true,
@@ -492,34 +503,45 @@
        })
        this.graph.centerContent()
        const stencil = new Addon.Stencil({
          getDropNode(node) {
            let {width, height} = node.size()
            if (node.getData().imgWidth) {
              width = node.getData().imgWidth
          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().imgHeight) {
              height = node.getData().imgHeight
            if (node.getData().type && node.getData().type === 'imageNodes2') {
              return node.clone({keepId: true})
            } else {
              return node.clone()
            }
            console.log(node.getData().imgWidth, node.getData().imgHeight, 'node.size()')
            return node.clone().size(width, height)
          },
          validateNode: (node) => {
            const existingNodes = this.graph.getNodes(); // 获取画布上所有节点
            for (const existingNode of existingNodes) {
              if (existingNode.id === node.id) {
                this.$message({message: '该设备节点已在画布上，无法再次绘制', type: 'warning'})
                return false; // 取消添加节点操作
              }
            }
          },
          title: '',
          target: this.graph,
            stencilGraphWidth: 200,
            stencilGraphHeight: 280,
            collapsable: true,
          stencilGraphWidth: 200,
          stencilGraphHeight: 280,
          collapsable: true,
          groups: [
            {
              title: '运算符号',
              name: 'group1',
              graphHeight: 360,
            },
            {
              title: '设备节点',
              name: 'group2',
                graphHeight: '',
                layoutOptions: {
                    rowHeight: 90,
                },
              graphHeight: '',
              layoutOptions: {
                rowHeight: 90,
              },
            }
          ],
          layoutOptions: {
@@ -528,21 +550,23 @@
          },
        })
        document.getElementById('stencilImg').appendChild(stencil.container)
        const imageNodes = this.imgsList.map((item) =>
        const imageNodes = this.imagesList.map((item) =>
          this.graph.createNode({
            shape: 'image',
            imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
            // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
            width: item.imgWidth,
            height: item.imgHeight,
            x: item.imgWidth,
            y: item.imgHeight,
            data: {
              type: 'imageNodes',
              dataId: '',
              nodeType: item.nodeType,
              nodeTypeExt: '',
              voteNum:''
              voteNum: ''
            },
            attrs: {
              image: {
                'xlink:href': '/modelImg/' + item.imgPath + '.svg',
              },
              text: {
                text: item.imgName,
                fontSize: 14,
@@ -563,15 +587,17 @@
          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}`,
            width: 60,
            height: 60,
            id: item.dataId, // 手动设置节点的 ID
            data: {
              type: 'imageNodes2',
              isRepair: item.isRepair,
              dataId: item.dataId,
              nodeType: item.nodeType,
@@ -586,7 +612,7 @@
              taskMtbcfOther: item.taskMtbcfOther,
              imgHeight: item.imgHeight,
              imgWidth: item.imgWidth,
              voteNum:'',
              voteNum: '',
            },
            attrs: {
              text: {
@@ -628,7 +654,6 @@
        )
        stencil.load(imageNodes, 'group1')
        stencil.load(imageNodes2, 'group2')


        this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
          const cells = this.graph.getSelectedCells()
@@ -718,7 +743,81 @@
          this.type = 'grid'
          // this.id = cell.id
        })
        // 监听节点添加事件
        this.graph.on('node:added', ({node}) => {
          const nodeId = node.id; // 获取节点的唯一 ID
          const nodeObj = node
          const intersectNodes = [];
          // 检查除当前节点之外的所有节点的包围框是否相交
          for (const otherNode of this.graph.getNodes()) {
            if (otherNode === node) continue;
            const bbox1 = node.getBBox();
            const bbox2 = otherNode.getBBox();
            if (this.isIntersect(bbox1, bbox2)) {
              intersectNodes.push(otherNode);
            }
          }
          if (intersectNodes.length > 0) {
            // console.log('Nodes intersect with node:', node.id);
            console.log('Intersecting nodes:', intersectNodes.map(n => n)); // 相交节点的对象
            intersectNodes.map(node => {
              this.addNodeAndConnect(node, nodeObj);
            })
          }
        });
        // 监听节点位置改变事件
        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'
@@ -726,9 +825,9 @@
          this.id = cell.id
          if (this.type === 'node') {
            this.nodeType = cell.getData().nodeType
            console.log(this.nodeType, '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)
        })
        //单击边节点
@@ -746,15 +845,6 @@
        })
        // 单击node节点
        this.graph.on('node:click', ({node}) => {
          this.reset()
          node.attr('line/stroke', 'orange')
          node.prop('labels/0', {
            attrs: {
              body: {
                stroke: 'orange',
              },
            },
          })
        })
        // 控制连接桩显示/隐藏
        this.graph.on('node:delete', ({view, e}) => {
@@ -809,9 +899,23 @@

        this.graph.on('edge:mouseenter', ({cell}) => {
          // alert(123)
          cell.addTools(
              ['vertices', 'segments']
          )
          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}) => {
@@ -843,42 +947,13 @@
          })
        })
      },
      // nodeOpt(id, globalGridAttr) {
      //   this.curCel = null
      //   if (id) {
      //     let cell = this.graph.getCellById(id)
      //     console.log(cell, 'let cell 123456')
      //     if (!cell || !cell.isNode()) {
      //       return
      //     }
      //     this.curCel = cell
      //     globalGridAttr.nodeStroke = cell.attr('body/stroke')
      //     globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
      //     globalGridAttr.nodeFill = cell.attr('body/fill')
      //     globalGridAttr.nodeFontSize = cell.attr('text/fontSize')
      //     globalGridAttr.nodeFontSize = cell.attr('title/fontSize')
      //     globalGridAttr.nodeColor = cell.attr('text/fill')
      //     globalGridAttr.nodeColor = cell.attr('title/fill')
      //     globalGridAttr.nodeColor = cell.attr('text/style/color')
      //     globalGridAttr.nodeColor =  cell.attr('title/style/color')
      //     globalGridAttr.nodeUsers = cell.attr('approve/users')
      //     globalGridAttr.nodeText = cell.attr('text/text')
      //     globalGridAttr.nodeDate = cell.attr('title/text')
      //     // let data={
      //     //   dataId:this.projectId,
      //     //   finishDate: globalGridAttr.nodeDate,
      //     // }
      //     cell.getData()
      //     console.log( cell.getData(),' cell.getData() 909')
      //   }
      //   return this.curCel;
      // },
      async search() {
        await this.getDiagram();
      },
      async saveDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        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') {
@@ -891,7 +966,7 @@
      async analyzeDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        console.log(this.dataForm, 'dataFrom')
        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('解析成功', '提示', {
@@ -900,17 +975,6 @@
          }
        })
      },
      // AlignmentsChanges(val){
      //   console.log(val,'align.value')
      //     if(val ==='选项1'){
      //       console.log(val,'align.value')
      //        this.leftAlign()
      //     }
      //     if(val ==='选项2') {
      //       console.log('右对齐','align.value')
      //        this.rightAlign()
      //     }
      // },
      leftAlign() {
        const NODE = this.graph.getSelectedCells()
        let leftX = null
@@ -937,7 +1001,6 @@
        for (let a of NODE) {
          let x = a.getBBox().x
          a.position(x, topY)
          // console.log(leftX, ':', y, '  x:y')
        }
      },
      centerAlign() {
@@ -960,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() {
@@ -1017,6 +1079,247 @@
          window.clearInterval(this.timer)
        }
      },
      // 定义函数来检查两个包围框是否相交
      isIntersect(bbox1, bbox2) {
        return (
          bbox1.x < bbox2.x + bbox2.width &&
          bbox1.x + bbox1.width > bbox2.x &&
          bbox1.y < bbox2.y + bbox2.height &&
          bbox1.y + bbox1.height > bbox2.y
        )
      },
      addNodeAndConnect(node, nodeObj) { // node是画布原有的节点。nodeObj是当前拖拽的节点
        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 === 'end'|| nodeType === 'vote' || nodeType === 'switch' || nodeType === 'parallel') && nodeObjType === 'node') {
          if (edges.length === 0) {
            if (!this.nodeAdded) {
              // 添加节点的操作
              this.connectNode = this.graph.addNode({
                shape: 'image',
                // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
                width: 30,
                height: 30,
                data: {
                  type: 'imageNodes',
                  dataId: '',
                  signId:node.id,
                  nodeType: 'connect',
                  nodeTypeExt: '',
                  voteNum: ''
                },
                attrs: {
                  image: {
                    'xlink:href': '/modelImg/connect.svg',
                  },
                  text: {
                    text: 'connect',
                    fontSize: 14,
                    refX: 0.5,
                    refY: '100%',
                    refY2: 4,
                    textAnchor: 'middle',
                    textVerticalAnchor: 'top',
                  },
                },
                ports: {...this.ports},
              })
              // 设置标记为 true，表示已经添加过节点
              this.nodeAdded = true;
            }
            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 - 120, node.position().y - (120 * edgesSum));
          } else {
            for (const edge of edges) {
              const sourcePointY = edge.getSourcePoint().y; // 获取连接线的起始点y坐标
              const targetPointY = edge.getTargetPoint().y; // 获取连接线的结束点y坐标
              console.log('原节点Y坐标' + node.position().y, '连接线起始Y坐标' + sourcePointY)
              if (targetPointY > sourcePointY) {
                TopSum++
              } else if (targetPointY < sourcePointY) {
                BottomSum++
              }
            }
            console.log('在原节点上方的连接线数量:' + TopSum, '在原节点下方的连接线数量:' + BottomSum)
            if (TopSum > BottomSum) {
              nodeObj.position(node.position().x - 120, node.position().y + (120 + (120 * BottomSum)))
            } else {
              nodeObj.position(node.position().x - 120, node.position().y - (120 + (120 * TopSum)));
            }
          }
          this.graph.addEdge({
            source: {cell: nodeObj, port: 'right1'},
            target: {cell: node, port: 'left1'},
            router: {name: 'manhattan'},
            connector: {name: 'rounded'}
          })
          if (this.nodeAdded) {
            console.log(this.connectNode, 'connectNode')
            this.graph.addEdge({
              source: {cell: this.connectNode, port: 'right1'},
              target: {cell: nodeObj, port: 'left1'},
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
            })
          }
        }
        if (nodeType === 'node' || (nodeType === 'dashedBox' && nodeObjType === 'dashedBox')) {
          // 遍历所有连接线并删除与给定节点对象相关的连接线
          console.log(edges, '所有有关联的连接线 edge')
          if (edges.length === 0) {
            this.graph.addEdge({
              source: {cell: node, port: 'right1'},
              target: {cell: nodeObj, port: 'left1'},
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
            })
            return nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y);
          } else {
            for (const edge of edges) {
              console.log(edge, '所有有关联的连接线 edge')
              if (edge.source.cell === node.id) { // 如果连接线的起始节点等于当前画布目标节点的ID
                const sourceNode = this.graph.getCellById(edge.source.cell); // 获取连接线的源节点对象
                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 + (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);
                // this.graph.addEdge({
                //   source: {cell: node, port: 'right1'},
                //   target: {cell: nodeObj, port: 'left1'},
                //   router: {name: 'manhattan'},
                //   connector: {name: 'rounded'}
                // })
                this.graph.addEdge({
                  source: {cell: nodeObj, port: 'right1'},
                  target: {cell: targetNode, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })
              } else {
                this.graph.addEdge({
                  source: {cell: node, port: 'right1'},
                  target: {cell: nodeObj, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })
                nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y);
              }
            }
          }


        }
      },
      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'}
        })
      },
    },

  }
@@ -1045,15 +1348,18 @@
    position: relative;
    height: 100%;
  }
#stencilImg .x6-graph-svg-viewport{

  #stencilImg .x6-graph-svg-viewport {
    height: 100%;
}
  }

  .x6-widget-stencil-content {
    position: relative;
  height: calc(100% - 32px);
}
#stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content{
    top:0
    height: calc(100% - 32px);
  }

  #stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content {
    top: 0
  }

</style>