Merge remote-tracking branch 'origin/master'

xyc

2024-04-26 9ef61aec5e8b218db9d60941ef3ad576a927338b

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

@@ -37,51 +37,9 @@
                <i style="font-size: 1rem;" class="wt-iconfont icon-diduiqi"></i>
              </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-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"
@@ -129,6 +87,8 @@
    },
    data() {
      return {
      nodeAdded: false,
      connectNode: {},
        modelId: '',
        modelName: '',
        modelType: '',
@@ -140,15 +100,13 @@
            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,
@@ -156,10 +114,22 @@
            imgId: '5',
            data: {}
          },
          {imgPath: 'voteRight', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', 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',
          imgWidth: 60,
          imgHeight: 60,
          imgId: '5',
          data: {}
        },
        {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}}
        ],
        nodeType: '',
        first: true,
@@ -231,7 +201,8 @@

          stroke: '#5F95FF',
          strokeWidth: 1,
          connector: 'normal',
        connector: 'rounded',
        router: 'manhattan',
          label: '',
          nodeStroke: '#5F95FF',
          nodeStrokeWidth: 1,
@@ -254,7 +225,7 @@
        ports: {
          groups: {
            top: {
              position: 'top',
            position: {name: 'top'},
              attrs: {
                circle: {
                  r: 4,
@@ -269,7 +240,7 @@
              },
            },
            right: {
              position: 'right',
            position: {name: 'right'},
              attrs: {
                circle: {
                  r: 4,
@@ -284,7 +255,7 @@
              },
            },
            bottom: {
              position: 'bottom',
            position: {name: 'bottom'},
              attrs: {
                circle: {
                  r: 4,
@@ -299,7 +270,7 @@
              },
            },
            left: {
              position: 'left',
            position: {name: 'left'},
              attrs: {
                circle: {
                  r: 4,
@@ -316,15 +287,19 @@
          },
          items: [
            {
            id: 'top1',
              group: 'top',
            },
            {
            id: 'right1',
              group: 'right',
            },
            {
            id: 'bottom1',
              group: 'bottom',
            },
            {
            id: 'left1',
              group: 'left',
            },
          ],
@@ -413,26 +388,23 @@
          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,
              // },
@@ -440,10 +412,10 @@
            connector: {
              name: 'rounded',
              args: {
                radius: 8,
              radius: 5,
              },
            },
            // anchor: 'center',
          anchor: 'center',
            connectionPoint: 'anchor',
            allowBlank: false,
            snap: {
@@ -500,10 +472,7 @@
              },
            },
          },
          resizing: {
            enabled: true,
            restricted: true
          },
        resizing: true,
          rotating: true,
          selecting: {
            enabled: true,
@@ -518,18 +487,21 @@
        this.graph.centerContent()
        const stencil = new Addon.Stencil({
          getDragNode: (node) => node.clone({ keepId: true }),
          getDropNode(node) {
            let {width, height} = node.size()
            if (node.getData().imgWidth) {
              width = node.getData().imgWidth
        getDropNode: (node) => {
          if (node.getData().type && node.getData().type === 'imageNodes2') {
            return node.clone({keepId: true})
          } else {
            return node.clone()
            }
            if (node.getData().imgHeight) {
              height = node.getData().imgHeight
            }
            return node.clone({ keepId: true }).size(width, height)
          },
            validateNode(node){
              console.log(node.id)
        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,
@@ -540,6 +512,11 @@
            {
              title: '运算符号',
              name: 'group1',
          },
          {
            title: '组合图',
            name: 'combiningImages',
            graphHeight: 100,
            },
            {
              title: '设备节点',
@@ -559,16 +536,53 @@
        const imageNodes = this.imgsList.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,
            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) =>
          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,
@@ -599,6 +613,7 @@
            height: 60,
            id: item.dataId, // 手动设置节点的 ID
            data: {
              type: 'imageNodes2',
              isRepair: item.isRepair,
              dataId: item.dataId,
              nodeType: item.nodeType,
@@ -655,7 +670,7 @@
        )
        stencil.load(imageNodes, 'group1')
        stencil.load(imageNodes2, 'group2')

      stencil.load(combiningImages, 'combiningImages')

        this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
          const cells = this.graph.getSelectedCells()
@@ -745,7 +760,28 @@
          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('cell:click', ({cell}) => {
          // this.type.value = cell.isNode() ? "node" : "edge"
          this.type = cell.isNode() ? 'node' : 'edge'
@@ -773,15 +809,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}) => {
@@ -884,36 +911,6 @@
          })
        })
      },
      // 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();
      },
@@ -942,17 +939,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
@@ -1059,6 +1045,144 @@
          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 edges = this.graph.getConnectedEdges(node); // 获取与原节点相关联的所有连接线
      let TopSum = 0 // 在原节点上方
      let BottomSum = 0 // 在原节点下方
      const edgesSum = edges.length
      if (nodeType !== '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: '',
                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 - 240, node.position().y - (120 * edgesSum));
          this.connectNode.position(node.position().x - 480, 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));
        } 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 - 240, node.position().y + (120 + (120 * BottomSum)))
          } else {
            nodeObj.position(node.position().x - 240, 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'}
          })
        }
      } else {
          // 遍历所有连接线并删除与给定节点对象相关的连接线
        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);
              // 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);
            }
          }
        }


      }
    },
    },

  }
@@ -1087,13 +1211,16 @@
    position: relative;
    height: 100%;
  }

#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
  }