| | |
| | | </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> |
| | |
| | | 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 { |
| | |
| | | }, |
| | | "size": { |
| | | "width": 60, |
| | | "height": 60 |
| | | "height": 40 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | |
| | | }, |
| | | "size": { |
| | | "width": 60, |
| | | "height": 60 |
| | | "height": 40 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | |
| | | }, |
| | | "size": { |
| | | "width": 60, |
| | | "height": 60 |
| | | "height": 40 |
| | | }, |
| | | "attrs": { |
| | | "text": { |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | nodeX:'', |
| | | nodeY:'', |
| | | isFirstLoad: true, |
| | | hasMoveNode: false, |
| | | hasMoveSingleNode: null, |
| | |
| | | productType: '', |
| | | voteNum: '', |
| | | repairMttcr: '', |
| | | repairMttcrOther: '', |
| | | repairMttcrOtherParams2: '', |
| | | repairMttcrOtherParams3: '', |
| | | repairDistribType: '', |
| | | reliabDistribType: '', |
| | | taskMtbcfOther: '', |
| | | taskMtbcfOtherParams2: '', |
| | | taskMtbcfOtherParams3: '', |
| | | isRepair: 0, |
| | | taskMtbcf: '', |
| | | numberInputValue: '', |
| | |
| | | anchor: 'center', |
| | | connectionPoint: 'anchor', |
| | | allowBlank: false, |
| | | allowLoop:false, // 是否允许创建循环连线,即边的起始节点和终止节点为同一节点,默认为 true |
| | | snap: { |
| | | radius: 20, |
| | | }, |
| | |
| | | return new Shape.Edge({ |
| | | attrs: { |
| | | line: { |
| | | // sourceMarker: 'block', // 实心箭头 |
| | | stroke: '#A2B1C3', |
| | | strokeWidth: 2, |
| | | targetMarker: {fill: 'none'} |
| | | targetMarker: null |
| | | } |
| | | }, |
| | | labels: [{ |
| | |
| | | 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}) |
| | |
| | | |
| | | 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, |
| | |
| | | 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) { |
| | |
| | | }) |
| | | |
| | | this.graph.on('blank:click', ({cell}) => { |
| | | this.reset() |
| | | // this.reset() |
| | | // this.type.value = "grid" |
| | | this.type = 'grid' |
| | | // this.id = cell.id |
| | |
| | | }) |
| | | //单击边节点 |
| | | 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() |
| | |
| | | }, |
| | | 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: '确定' |
| | | }) |
| | |
| | | height = 60 |
| | | } else if (dragNodeType === 'dashedBox') { |
| | | width = 60 |
| | | height = 60 |
| | | height = 40 |
| | | } else if (dragNodeType === 'bridgeConnection') { |
| | | width = 550 |
| | | height = 175 |
| | |
| | | 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}) |
| | |
| | | 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({ |
| | |
| | | shape: 'image', |
| | | // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'), |
| | | width: 60, |
| | | height: 60, |
| | | height: 40, |
| | | id: dashId, |
| | | data: { |
| | | isSelfCreated: true, |