去系统建模坐标辅助线

wente

2024-12-04 142c2321e95bdb274f7451e2f070847a631f32c4

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

@@ -1,14 +1,14 @@
<template>
  <div>
    <el-row :gutter="[8,8]">
      <el-col :span="3">
      <el-col :span="4">
        <div :style="'height:' +left_p+'px'">
          <div style="height: 100%">
            <div id="stencilImg"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="21">
      <el-col :span="20">
        <div class="fa-card-a">
          <el-form :inline="true">
            <el-form-item>
@@ -18,7 +18,10 @@
              <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-button type="primary" @click="layoutDiagram()">一键排版</el-button>
              <el-checkbox style="margin: 0 10px 0 10px" v-model="dataForm.autoLayout" :true-label="1" :false-label="0">
                是否开启一键排版
              </el-checkbox>
              <el-button type="primary" @click="layoutDiagram()" :disabled="!dataForm.autoLayout">一键排版</el-button>
              <el-button @click="leftAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i>
              </el-button>
@@ -514,6 +517,7 @@
    },
    data() {
      return {
        canAdd: true,
        nodeX: '',
        nodeY: '',
        isFirstLoad: true,
@@ -575,7 +579,8 @@
          publishContent: null,
          hasPublish: 0,
          urlPref: '',
          nodeArr: []
          nodeArr: [],
          autoLayout: 1,
        },
        type: '',
        id: '',
@@ -753,6 +758,7 @@
        }
        let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
        this.dataForm = res.data
        this.dataForm.autoLayout = parseInt(this.dataForm.autoLayout)
        if (res.data.content != null) {
          console.log(this.dataForm, 'getDiagram datafrom')
          console.log(res.data, 'getDiagram res.data')
@@ -905,30 +911,56 @@
        })
        this.graph.centerContent()
        const stencil = new Addon.Stencil({
          getDragNode: (node) => node.clone({keepId: true}),
          // getDragNode: (node) => {
          // node.removeAttrs('title')
          // },
          getDropNode: (node) => {
            this.canAdd = true
            const {width, height} = node.size()
            if (node.getData().type && node.getData().nodeType === 'dashedBox') {
              return node.clone().size(60, 40)
            }
            if (node.getData().type && node.getData().type === 'imageNodes2') {
              return node.clone({keepId: true})
            } else {
              return node.clone()
            }
          },
          validateNode: (node) => {
            const existingNodes = this.graph.getNodes(); // 获取画布上所有节点
            for (const existingNode of existingNodes) {
              if (existingNode.id === node.id) {
                this.$message({message: '该设备节点已在画布上，无法再次绘制', type: 'warning'})
                return false; // 取消添加节点操作
              const nodes = this.graph.getNodes()
              let deviceNoArr = []

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

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

          },
          title: '',
          target: this.graph,
          stencilGraphWidth: 200,
          stencilGraphWidth: 240,
          stencilGraphHeight: 280,
          collapsable: true,
          groups: [
@@ -942,13 +974,13 @@
              name: 'group2',
              graphHeight: '',
              layoutOptions: {
                rowHeight: 90,
                rowHeight: 100,
              },
            }
          ],
          layoutOptions: {
            columns: 2,
            columnWidth: 105,
            columnWidth: 130,
          },
        })
        document.getElementById('stencilImg').appendChild(stencil.container)
@@ -1002,11 +1034,13 @@
            shape: 'image',
            //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
            width: 60,
            height: 60,
            id: item.dataId, // 手动设置节点的 ID
            height: 70,
            //id: item.dataId, // 手动设置节点的 ID
            data: {
              type: 'imageNodes2',
              dataId: item.dataId,
              basicUnitNum: item.basicUnitNum,
              deviceNo: 1,
              nodeType: item.nodeType,
              nodeTypeExt: item.nodeTypeExt,
              productType: item.productType,
@@ -1030,43 +1064,68 @@
            },
            attrs: {
              image: {
                'xlink:href': `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=${item.imgPath}`,
                'xlink:href': `${window.SITE_CONFIG['apiURL']}/basicInfo/XhProductModel/getImg?token=${Cookies.get('token')}&id=${item.dataId}&t=${new Date().getTime()}`,
                //'xlink:href': urlObject.createObjectURL(new Blob([item.svgContent])),
              },
              title: {
                text: item.basicUnitNum > 1 ? item.basicUnitNum : '',
                refX: 15,
                refY: 10,
                fill: '#748be7',
                fontSize: 14,
                fontWeight: 'bold',
                'text-anchor': 'start',
              },
              text: {
                text: item.imgName,
                fontSize: 14,
                style: {
                  color: this.globalGridAttr.nodeColor
                },
                refX: 0.5,
                refY: '100%',
                refY: '85%',
                refY2: 4,
                textAnchor: 'middle',
                textVerticalAnchor: 'top',
                textWrap: {
                  width: 120,      // 宽度为 120px换行
                  ellipsis: false,  // 文本超出显示范围时，自动添加省略号
                  breakWord: true, // 是否截断单词
                }
              },
            },
            tools: [
            markup: [
              {
                name: 'button',
                args: {
                  markup: [
                    {
                      tagName: 'image',
                      selector: 'icon',
                      attrs: {
                        // 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
                        'xlink:href': item.statusImg,
                        width: 30,
                        height: 30,
                        x: 0,
                        y: 0
                      }
                    }
                  ]
                }
              }
                tagName: 'image',
                selector: 'image',
              },
              {
                tagName: 'text',
                selector: 'title',
              },
              {
                tagName: 'text',
                selector: 'text',
              },
            ],
            // tools: [
            //   {
            //     name: 'button',
            //     args: {
            //       markup: [
            //         {
            //           tagName: 'image',
            //           selector: 'icon',
            //           attrs: {
            //             'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
            //             // 'xlink:href': item.statusImg,
            //             width: 30,
            //             height: 30,
            //             x: 0,
            //             y: 0
            //           }
            //         }
            //       ]
            //     }
            //   }
            // ],
            ports: {...this.ports},
          }),
        )
@@ -1166,6 +1225,9 @@
        })
        // 监听节点添加事件
        this.graph.on('node:added', ({node}) => {
          node.setAttrs({
            title: {text: ''},
          })
          if (this.isFirstLoad) {
            return
          }
@@ -1174,7 +1236,7 @@
          }
          const nodeType = node.getData().nodeType; // 获取节点的类型
          const nodeObj = node
          console.log(123)
          console.log(node.id, 'node.id')
          let intersectNode = this.findIntersectsNode(node)
          if (intersectNode) { // 当有节点相交 ==>并行
            this.addBranch(intersectNode, nodeObj)
@@ -1487,14 +1549,29 @@
        const nodes = this.graph.getNodes()
        for (const node of nodes) {
          if (node.getData().nodeType === 'dashedBox') {
            this.$message({message: '该模型中存在虚框，无法保存', type: 'warning'})
            return false; // 取消添加节点操作
            this.$message({message: '该模型中存在虚框，无法提交', type: 'warning'})
            return false;
          }
          if (node.getData().nodeType === 'vote') {
            const edges = this.graph.getConnectedEdges(node);
            if (node.getData().voteNum === null || node.getData().voteNum === '') {
              this.$message({message: '表决节点的表决数量未设置', type: 'warning'})
              return false;
            }
            const edges = this.graph.getIncomingEdges(node);
            if (node.getData().voteNum >= edges.length) {
              this.$message({message: '表决数量不能高于该节点的进线数量', type: 'warning'})
              return false; // 取消添加节点操作
              this.$message({message: '表决节点的表决数量必须小于该节点的进线数量', type: 'warning'})
              return false;
            }
          }
          if (node.getData().nodeType === 'switch') {
            if (node.getData().voteNum === null || node.getData().voteNum === '') {
              this.$message({message: '旁联节点的备份数量未设置', type: 'warning'})
              return false;
            }
            const edges = this.graph.getIncomingEdges(node);
            if (node.getData().voteNum >= edges.length) {
              this.$message({message: '旁联节点的备份数量必须小于该节点的进线数量', type: 'warning'})
              return false;
            }
          }
        }
@@ -1503,33 +1580,35 @@
        await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => {
          if (res.msg === 'success') {
            this.$emit('refreshDataList')
            this.$alert('解析成功', '提示', {
            this.$alert('提交成功', '提示', {
              confirmButtonText: '确定'
            })
          }
        })
      },
      async layoutDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        await this.$http['post'](`/taskReliability/ModelLine/layout`, this.dataForm).then(async res => {
          if (res.msg === 'success') {
            // this.$emit('refreshDataList')
            // this.$alert('解析成功', '提示', {
            //   confirmButtonText: '确定'
            // })
            console.log(res.data, 'layoutDiagram res.data')
            this.dataForm.content = res.data.content
            console.log(this.dataForm.content, 'layoutDiagram dataForm.content')
            this.diagramJson = JSON.parse(this.dataForm.content)
            this.graph.fromJSON(this.diagramJson)
            this.isFirstLoad = false;
            // console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
        if (this.dataForm.autoLayout == 1) {
          console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
          this.dataForm.content = JSON.stringify(this.graph.toJSON())
          this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
          await this.$http['post'](`/taskReliability/ModelLine/layout`, this.dataForm).then(async res => {
            if (res.msg === 'success') {
              // this.$emit('refreshDataList')
              // this.$alert('解析成功', '提示', {
              //   confirmButtonText: '确定'
              // })
              console.log(res.data, 'layoutDiagram res.data')
              this.dataForm.content = res.data.content
              console.log(this.dataForm.content, 'layoutDiagram dataForm.content')
              this.diagramJson = JSON.parse(this.dataForm.content)
              this.graph.fromJSON(this.diagramJson)
              this.isFirstLoad = false;
              // console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')

            this.graph.positionContent('left')
          }
        })
              this.graph.positionContent('left')
            }
          })
        }
      },
      leftAlign() {
        const NODE = this.graph.getSelectedCells()
@@ -1669,7 +1748,7 @@
        let dragNodeType = dragNode.getData().nodeType
        let offHeight = 50
        if (dragNodeType === 'node') {
          offHeight = 60
          offHeight = 70
        } else if (dragNodeType === 'bridgeConnection') {
          offHeight = 175
        } else {
@@ -1706,9 +1785,11 @@
            inEdges[0].target = {cell: result.newStartNode.id}
            outEdges[0].source = {cell: result.newEndNode.id}
            graphNode.remove()
            if (!result.canPlace) {
//调用自动排版
              this.layoutDiagram()
            if (this.dataForm.autoLayout == 1) {
              if (!result.canPlace) {
                //调用自动排版
                this.layoutDiagram()
              }
            }
          }
        } else { //并行结构
@@ -1727,13 +1808,13 @@
          this.getYRange(inEdges, graphNodeStartNode, pointXY)
          console.log(pointXY, 'new')

          let minX = graphNodeStartNode.position().x + graphNode.getBBox().width + 15
          let maxX = graphNode.position().x
          let minX = graphNodeStartNode.position().x + graphNode.getBBox().width
          let maxX = graphNode.position().x - dragNode.getBBox().width / 2
          let centerX = minX + (maxX - minX) / 2
          let centerY = graphNodeY + graphNode.getBBox().height / 2 - pointXY.minY > pointXY.maxY - (graphNodeY + graphNode.getBBox().height / 2) ?
            pointXY.maxY + offHeight / 2 + 30 : pointXY.minY - offHeight / 2 - 30

          let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
          let result = this.addNodeAndConnect(null, dragNode, centerX, centerY)
          console.log(result, 'result111')
          this.graph.addEdge({
            source: {cell: graphNodeStartNode},
@@ -1761,9 +1842,11 @@
            connector: {name: 'rounded'},
            zIndex: -1
          })
          if (!result.canPlace) {
//调用自动排版
            this.layoutDiagram()
          if (this.dataForm.autoLayout == 1) {
            if (!result.canPlace) {
              //调用自动排版
              this.layoutDiagram()
            }
          }
        }
      },
@@ -1774,8 +1857,8 @@
          leftTopY = centerY
        let dragNodeType = dragNode.getData().nodeType
        if (dragNodeType === 'node') {
          width = 60
          height = 60
          width = 100
          height = 70
        } else if (dragNodeType === 'dashedBox') {
          width = 60
          height = 40
@@ -1784,7 +1867,7 @@
          height = 175
        } else {
          width = 270
          height = 60
          height = 70
        }
        leftTopX = centerX - width / 2
        leftTopY = centerY - height / 2
@@ -1893,8 +1976,11 @@
            })
            graphEdge.source = {cell: result.newEndNode.id}
          }
          if (!result.canPlace) {
            this.layoutDiagram()
          if (this.dataForm.autoLayout == 1) {
            if (!result.canPlace) {
              //调用自动排版
              this.layoutDiagram()
            }
          }
          // graphEdge.remove()
        }
@@ -1926,12 +2012,12 @@
      createParallelBrach(x, y, dragNode) {
        dragNode.position(x + 320, y - dragNode.size().height / 2)
        const connectNode = this.createConnectNode(x + 50, y)
        this.createBrach(dragNode,connectNode,x,y-50)
        this.createBrach(dragNode,connectNode,x,y+50)
        this.createBrach(dragNode, connectNode, x, y - 50)
        this.createBrach(dragNode, connectNode, x, y + 50)

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

@@ -1941,7 +2027,7 @@
          router: {
            name: 'manhattan',
            args: {
              startDirections: ['top','bottom'], // 从下方开始
              startDirections: ['top', 'bottom'], // 从下方开始
              endDirections: ['left'],      // 向左方结束
            },
          },
@@ -1955,7 +2041,7 @@
            name: 'manhattan',
            args: {
              startDirections: ['right'], // 从下方开始
              endDirections: ['top','bottom'],      // 向左方结束
              endDirections: ['top', 'bottom'],      // 向左方结束
            },
          },
          connector: {name: 'rounded'},
@@ -2395,7 +2481,7 @@
<style>
  #containerImg {
    display: flex;
    border: 1px solid #dfe3e8;
    /*border: 1px solid #dfe3e8;*/
    height: 400px;
    width: 100% !important;
  }
@@ -2429,4 +2515,20 @@
    top: 0
  }

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