xyc
2024-07-24 d8cb08ce6b68b50d2475b70eb522ea6bbbb17686
web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -16,7 +16,7 @@
            </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="analyzeDiagram()">提交</el-button>
              <el-button type="primary" @click="clearDiagram()">清空图形</el-button>
              <el-button @click="leftAlign()">
                <i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i>
@@ -63,6 +63,8 @@
  import {setHartBeat} from '@/commonJS/common';
  import Cookies from 'js-cookie'
  import {getUUID} from '../../../../packages/utils'
  // import Mousetrap from 'mousetrap'
  // var Mousetrap = require('mousetrap');
  // import RBDDefault from './RBD-default.json'
  export default {
@@ -100,7 +102,7 @@
              },
              "size": {
                "width": 60,
                "height": 60
                "height": 40
              },
              "attrs": {
                "text": {
@@ -223,7 +225,7 @@
              },
              "size": {
                "width": 60,
                "height": 60
                "height": 40
              },
              "attrs": {
                "text": {
@@ -345,7 +347,7 @@
              },
              "size": {
                "width": 60,
                "height": 60
                "height": 40
              },
              "attrs": {
                "text": {
@@ -507,6 +509,8 @@
    },
    data() {
      return {
        nodeX:'',
        nodeY:'',
        isFirstLoad: true,
        hasMoveNode: false,
        hasMoveSingleNode: null,
@@ -584,10 +588,12 @@
          productType: '',
          voteNum: '',
          repairMttcr: '',
          repairMttcrOther: '',
          repairMttcrOtherParams2: '',
          repairMttcrOtherParams3: '',
          repairDistribType: '',
          reliabDistribType: '',
          taskMtbcfOther: '',
          taskMtbcfOtherParams2: '',
          taskMtbcfOtherParams3: '',
          isRepair: 0,
          taskMtbcf: '',
          numberInputValue: '',
@@ -823,6 +829,7 @@
            anchor: 'center',
            connectionPoint: 'anchor',
            allowBlank: false,
            allowLoop:false, // 是否允许创建循环连线,即边的起始节点和终止节点为同一节点,默认为 true
            snap: {
              radius: 20,
            },
@@ -830,9 +837,10 @@
              return new Shape.Edge({
                attrs: {
                  line: {
                    //  sourceMarker: 'block', // 实心箭头
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: {fill: 'none'}
                    targetMarker: null
                  }
                },
                labels: [{
@@ -895,7 +903,7 @@
          getDropNode: (node) => {
            const {width, height} = node.size()
            if (node.getData().type && node.getData().nodeType === 'dashedBox') {
              return node.clone().size(60, 60)
              return node.clone().size(60, 40)
            }
            if (node.getData().type && node.getData().type === 'imageNodes2') {
              return node.clone({keepId: true})
@@ -1000,12 +1008,14 @@
              reliabDistribType: item.reliabDistribType ? item.reliabDistribType : 1,
              taskMtbcf: item.taskMtbcf,
              taskMtbcfOther: item.taskMtbcfOther,
              taskMtbcfOther2: item.taskMtbcfOtherParams2,
              taskMtbcfOther3: item.taskMtbcfOtherParams3,
              isRepair: item.isRepair,
              repairDistribType: item.repairDistribType ? item.repairDistribType : 1,
              repairMttcr: item.repairMttcr,
              repairMttcrOther: item.repairMttcrOther,
              repairMttcrOther2: item.repairMttcrOtherParams2,
              repairMttcrOther3: item.repairMttcrOtherParams3,
              imgHeight: item.imgHeight,
              imgWidth: item.imgWidth,
@@ -1056,6 +1066,42 @@
        stencil.load(imageNodes, 'group1')
        stencil.load(imageNodes2, 'group2')
// konami code!
        // 单击node节点
        // this.graph.on('node:click', ({ e, x, y, node, view}) => {
        //   Mousetrap.bind('up', function(e) {
        //     e.preventDefault();
        //     node.getBBox().x
        //     node.getBBox().y
        //     setTimeout(()=>{
        //       node.position(node.getBBox().x,node.getBBox().y -0.5)
        //       console.log(x,y,'按下了↑键 up');
        //     },100)
        //   })
        //   Mousetrap.bind('down', function(e) {
        //     e.preventDefault();
        //     setTimeout(()=>{
        //       node.position(node.getBBox().x,node.getBBox().y+0.5)
        //       console.log(x,y,'按下了↓键 down');
        //     },100)
        //
        //   })
        //   Mousetrap.bind('left', function(e) {
        //     e.preventDefault();
        //     setTimeout(()=>{
        //       node.position(node.getBBox().x-0.5,node.getBBox().y)
        //       console.log(x,y,'按下了←键 left');
        //     },100)
        //
        //   })
        //   Mousetrap.bind('right', function(e) {
        //     e.preventDefault();
        //     setTimeout(()=>{
        //       node.position(node.getBBox().x+0.5,node.getBBox().y)
        //       console.log(x,y,'按下了→键 right');
        //     },100)
        //   })
        // })
        this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
          const cells = this.graph.getSelectedCells()
          if (cells.length) {
@@ -1106,7 +1152,7 @@
        })
        this.graph.on('blank:click', ({cell}) => {
          this.reset()
          // this.reset()
          // this.type.value = "grid"
          this.type = 'grid'
          // this.id = cell.id
@@ -1158,20 +1204,18 @@
        })
        //单击边节点
        this.graph.on('edge:click', ({edge}) => {
          this.reset()
          edge.attr('line/stroke', 'orange')
          edge.prop('labels/0', {
            attrs: {
              body: {
                stroke: 'orange',
              },
            },
          // this.reset()
          // edge.attr('line/stroke', 'orange')
          // edge.prop('labels/0', {
          //   attrs: {
          //     body: {
          //       stroke: 'orange',
          //     },
          //   },
          //
          // })
        })
          })
        })
        // 单击node节点
        this.graph.on('node:click', ({node}) => {
        })
        // 控制连接桩显示/隐藏
        this.graph.on('node:delete', ({view, e}) => {
          e.stopPropagation()
@@ -1402,42 +1446,56 @@
      },
      async saveDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        const nodes = this.graph.getNodes()
        let nodeArr2 = []
        // 检查除当前节点之外的所有节点的包围框是否相交
        for (const node of nodes) {
          console.log(node, 'saveDiagram node')
          if (node.getData().nodeType == 'node' && node.getData().productType != 'product_xdy' && node.getData().dataId) {
            nodeArr2.push(node.getData().dataId)
          }
        }
        this.dataForm.nodeArr = nodeArr2
        //   获取所有子节点
        this.getNodeArr()
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        console.log(this.dataForm, 'dataFrom')
        await this.$http[this.dataForm.id === null ? 'post' : 'put'](`/taskReliability/ModelLine/`, this.dataForm).then(async res => {
          if (res.msg === 'success') {
            this.$emit('refreshDataList')
            this.$alert('保存成功', '提示', {
              confirmButtonText: '确定'
            })
          }
        })
      },
      async analyzeDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
      getNodeArr(){
        const nodes = this.graph.getNodes()
        let nodeArr2 = []
        // 检查除当前节点之外的所有节点的包围框是否相交
        for (const node of nodes) {
          if (node.getData().nodeType === 'node' && node.getData().productType !== 'product_xdy' && node.getData().dataId) {
          console.log(node, 'saveDiagram node')
          if (node.getData().nodeType == 'node'  && node.getData().dataId) {
            nodeArr2.push(node.getData().dataId)
          }
        }
        this.dataForm.nodeArr = nodeArr2
      },
      async analyzeDiagram() {
        console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
        // 检查除当前节点之外的所有节点的包围框是否相交
        //   获取所有子节点
        this.getNodeArr()
        const nodes = this.graph.getNodes()
        for (const node of nodes) {
          if(node.getData().nodeType === 'dashedBox'){
            this.$message({message: '该模型中存在虚框,无法保存', type: 'warning'})
            return false; // 取消添加节点操作
          }
          if(node.getData().nodeType === 'vote'){
            const edges = this.graph.getConnectedEdges(node);
            if(node.getData().voteNum>=edges.length){
              this.$message({message: '表决数量不能高于该节点的进线数量', type: 'warning'})
              return false; // 取消添加节点操作
            }
          }
        }
        this.dataForm.content = JSON.stringify(this.graph.toJSON())
        this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
        await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => {
          if (res.msg === 'success') {
            this.$emit('refreshDataList')
            this.$alert('解析成功', '提示', {
              confirmButtonText: '确定'
            })
@@ -1678,7 +1736,7 @@
          height = 60
        } else if (dragNodeType === 'dashedBox') {
          width = 60
          height = 60
          height = 40
        } else if (dragNodeType === 'bridgeConnection') {
          width = 550
          height = 175
@@ -1835,11 +1893,11 @@
        const rightTopDashedBox = this.createDashedBox(x + 380, y)
        const leftConnectNode = this.createConnectNode(x, y + 87)
        const alignCenterDashedBox = this.createDashedBox(x + 210, y + 87)
        const alignCenterDashedBox = this.createDashedBox(x + 209, y + 87)
        const rightConnectNode = this.createBridgeNode(x + 530, y + 87)
        const leftBottomDashedBox = this.createDashedBox(x + 50, y + 160)
        const rightBottomDashedBox = this.createDashedBox(x + 370, y + 160)
        const leftBottomDashedBox = this.createDashedBox(x + 40, y + 160)
        const rightBottomDashedBox = this.createDashedBox(x + 380, y + 160)
        rightConnectNode.setData({startNodeId: leftConnectNode.id})
        leftConnectNode.setData({endNodeId: rightConnectNode.id})
@@ -1859,39 +1917,39 @@
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftTopDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })
        this.graph.addEdge({
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftBottomDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })
        let edgeTop = this.graph.addEdge({
          source: {cell: leftTopDashedBox, port: 'right1'},
          target: {cell: rightTopDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })
        let edgeBottom = this.graph.addEdge({
          source: {cell: leftBottomDashedBox, port: 'right1'},
          target: {cell: rightBottomDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })
        this.graph.addEdge({
          source: {cell: rightTopDashedBox, port: 'right1'},
          target: {cell: rightConnectNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })
        this.graph.addEdge({
          source: {cell: rightBottomDashedBox, port: 'right1'},
          target: {cell: rightConnectNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })
        this.graph.addEdge({
@@ -1915,7 +1973,7 @@
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 60,
          height: 60,
          height: 40,
          id: dashId,
          data: {
            isSelfCreated: true,