jinlin
2024-09-06 3ecb68c427a627ad8e90d8c555655e7724be2d96
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": {
@@ -222,8 +224,8 @@
                "y": 0
              },
              "size": {
                "width": 100,
                "height": 60
                "width": 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: '',
@@ -711,416 +717,6 @@
              group: 'left',
            },
          ],
        },
        initJson: {
          "cells": [
            {
              "position": {
                "x": -600,
                "y": 0
              },
              "size": {
                "width": 60,
                "height": 60
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "start",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "/modelImg/start.svg"
                }
              },
              "visible": true,
              "shape": "image",
              "id": "10000",
              "data": {
                "type": "imageNodes",
                "endNodeId": "20000",
                "dataId": "",
                "nodeType": "start",
                "nodeTypeExt": "",
                "voteNum": ""
              },
              "ports": {
                "groups": {
                  "top": {
                    "position": {
                      "name": "top"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "right": {
                    "position": {
                      "name": "right"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "bottom": {
                    "position": {
                      "name": "bottom"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "left": {
                    "position": {
                      "name": "left"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  }
                },
                "items": [
                  {
                    "id": "top1",
                    "group": "top"
                  },
                  {
                    "id": "right1",
                    "group": "right"
                  },
                  {
                    "id": "bottom1",
                    "group": "bottom"
                  },
                  {
                    "id": "left1",
                    "group": "left"
                  }
                ]
              },
              "zIndex": 1
            },
            {
              "position": {
                "x": 0,
                "y": 0
              },
              "size": {
                "width": 100,
                "height": 60
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "dashedBox",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "/modelImg/dashedBox.svg"
                }
              },
              "visible": true,
              "shape": "image",
              "id": 15000,
              "data": {
                "type": "imageNodes",
                "dataId": "",
                "nodeType": "dashedBox",
                "nodeTypeExt": "",
                "voteNum": ""
              },
              "ports": {
                "groups": {
                  "top": {
                    "position": {
                      "name": "top"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "right": {
                    "position": {
                      "name": "right"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "bottom": {
                    "position": {
                      "name": "bottom"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "left": {
                    "position": {
                      "name": "left"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  }
                },
                "items": [
                  {
                    "id": "top1",
                    "group": "top"
                  },
                  {
                    "id": "right1",
                    "group": "right"
                  },
                  {
                    "id": "bottom1",
                    "group": "bottom"
                  },
                  {
                    "id": "left1",
                    "group": "left"
                  }
                ]
              },
              "zIndex": 2
            },
            {
              "position": {
                "x": 600,
                "y": 0
              },
              "size": {
                "width": 60,
                "height": 60
              },
              "attrs": {
                "text": {
                  "refY": "100%",
                  "textVerticalAnchor": "top",
                  "text": "end",
                  "refY2": 4
                },
                "image": {
                  "xlink:href": "/modelImg/end.svg"
                }
              },
              "visible": true,
              "shape": "image",
              "id": "20000",
              "data": {
                "type": "imageNodes",
                "startNodeId": "10000",
                "dataId": "",
                "nodeType": "end",
                "nodeTypeExt": "",
                "voteNum": ""
              },
              "ports": {
                "groups": {
                  "top": {
                    "position": {
                      "name": "top"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "right": {
                    "position": {
                      "name": "right"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "bottom": {
                    "position": {
                      "name": "bottom"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  },
                  "left": {
                    "position": {
                      "name": "left"
                    },
                    "attrs": {
                      "circle": {
                        "r": 4,
                        "magnet": true,
                        "stroke": "#5F95FF",
                        "strokeWidth": 1,
                        "fill": "#fff",
                        "style": {
                          "visibility": "hidden"
                        }
                      }
                    }
                  }
                },
                "items": [
                  {
                    "id": "top1",
                    "group": "top"
                  },
                  {
                    "id": "right1",
                    "group": "right"
                  },
                  {
                    "id": "bottom1",
                    "group": "bottom"
                  },
                  {
                    "id": "left1",
                    "group": "left"
                  }
                ]
              },
              "zIndex": 3
            },
            {
              "shape": "edge",
              "id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7",
              "router": {
                "name": "manhattan"
              },
              "connector": {
                "name": "rounded"
              },
              "source": {
                "cell": "10000",
                "port": "right1"
              },
              "target": {
                "cell": 15000,
                "port": "left1"
              },
              "zIndex": 4
            },
            {
              "shape": "edge",
              "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f",
              "router": {
                "name": "manhattan"
              },
              "connector": {
                "name": "rounded"
              },
              "source": {
                "cell": 15000,
                "port": "right1"
              },
              "target": {
                "cell": "20000",
                "port": "left1"
              },
              "zIndex": 5
            }
          ]
        }
      }
    },
@@ -1233,6 +829,7 @@
            anchor: 'center',
            connectionPoint: 'anchor',
            allowBlank: false,
            allowLoop:false, // 是否允许创建循环连线,即边的起始节点和终止节点为同一节点,默认为 true
            snap: {
              radius: 20,
            },
@@ -1240,9 +837,10 @@
              return new Shape.Edge({
                attrs: {
                  line: {
                    //  sourceMarker: 'block', // 实心箭头
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: {fill: 'none'}
                    targetMarker: null
                  }
                },
                labels: [{
@@ -1305,7 +903,7 @@
          getDropNode: (node) => {
            const {width, height} = node.size()
            if (node.getData().type && node.getData().nodeType === 'dashedBox') {
              return node.clone().size(100, 60)
              return node.clone().size(60, 40)
            }
            if (node.getData().type && node.getData().type === 'imageNodes2') {
              return node.clone({keepId: true})
@@ -1410,12 +1008,15 @@
              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,
              successRate:item.successRate,
              imgHeight: item.imgHeight,
              imgWidth: item.imgWidth,
@@ -1466,6 +1067,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) {
@@ -1516,7 +1153,7 @@
        })
        this.graph.on('blank:click', ({cell}) => {
          this.reset()
          // this.reset()
          // this.type.value = "grid"
          this.type = 'grid'
          // this.id = cell.id
@@ -1568,20 +1205,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()
@@ -1812,42 +1447,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: '确定'
            })
@@ -2087,8 +1736,8 @@
          width = 60
          height = 60
        } else if (dragNodeType === 'dashedBox') {
          width = 100
          height = 60
          width = 60
          height = 40
        } else if (dragNodeType === 'bridgeConnection') {
          width = 550
          height = 175
@@ -2245,11 +1894,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})
@@ -2269,39 +1918,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({
@@ -2324,8 +1973,8 @@
        let dashedBox = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 100,
          height: 60,
          width: 60,
          height: 40,
          id: dashId,
          data: {
            isSelfCreated: true,