|  |  |  | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | 
|---|
|  |  |  | publishContent: null, | 
|---|
|  |  |  | hasPublish: 0, | 
|---|
|  |  |  | urlPref: '', | 
|---|
|  |  |  | nodeArr: [] | 
|---|
|  |  |  | nodeArr: [], | 
|---|
|  |  |  | autoLayout: 1, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | type: '', | 
|---|
|  |  |  | id: '', | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 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') | 
|---|
|  |  |  | 
|---|
|  |  |  | for (let i = 1; i <= node.getData().basicUnitNum; i++) { | 
|---|
|  |  |  | if (deviceNoArr.findIndex(item => item === i) === -1) { | 
|---|
|  |  |  | no = i | 
|---|
|  |  |  | if (node.getData().basicUnitNum>1){ | 
|---|
|  |  |  | if (node.getData().basicUnitNum >= 1) { | 
|---|
|  |  |  | node.getData().deviceNo = i | 
|---|
|  |  |  | node.attr('text/text', node.attr('text/text') + '-' + i) | 
|---|
|  |  |  | if(node.getData().deviceNo > 1){ | 
|---|
|  |  |  | node.attr('text/text', node.attr('text/text') + '-' + i) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | break | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | this.graph.createNode({ | 
|---|
|  |  |  | shape: 'image', | 
|---|
|  |  |  | //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`, | 
|---|
|  |  |  | width: 100, | 
|---|
|  |  |  | width: 60, | 
|---|
|  |  |  | height: 70, | 
|---|
|  |  |  | //id: item.dataId, // 手动设置节点的 ID | 
|---|
|  |  |  | data: { | 
|---|
|  |  |  | type: 'imageNodes2', | 
|---|
|  |  |  | dataId: item.dataId, | 
|---|
|  |  |  | basicUnitNum: item.basicUnitNum, | 
|---|
|  |  |  | deviceNo: 0, | 
|---|
|  |  |  | deviceNo: 1, | 
|---|
|  |  |  | nodeType: item.nodeType, | 
|---|
|  |  |  | nodeTypeExt: item.nodeTypeExt, | 
|---|
|  |  |  | productType: item.productType, | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 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:'', | 
|---|
|  |  |  | text: item.basicUnitNum > 1 ? item.basicUnitNum : '', | 
|---|
|  |  |  | refX: 15, | 
|---|
|  |  |  | refY: 10, | 
|---|
|  |  |  | fill: '#748be7', | 
|---|
|  |  |  | fontSize: 14, | 
|---|
|  |  |  | fontWeight:'bold', | 
|---|
|  |  |  | fontWeight: 'bold', | 
|---|
|  |  |  | 'text-anchor': 'start', | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | text: { | 
|---|
|  |  |  | 
|---|
|  |  |  | // 监听节点添加事件 | 
|---|
|  |  |  | this.graph.on('node:added', ({node}) => { | 
|---|
|  |  |  | node.setAttrs({ | 
|---|
|  |  |  | title: { text: '' }, | 
|---|
|  |  |  | title: {text: ''}, | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | if (this.isFirstLoad) { | 
|---|
|  |  |  | return | 
|---|
|  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 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() | 
|---|
|  |  |  | 
|---|
|  |  |  | let dragNodeType = dragNode.getData().nodeType | 
|---|
|  |  |  | let offHeight = 50 | 
|---|
|  |  |  | if (dragNodeType === 'node') { | 
|---|
|  |  |  | offHeight = 60 | 
|---|
|  |  |  | offHeight = 70 | 
|---|
|  |  |  | } else if (dragNodeType === 'bridgeConnection') { | 
|---|
|  |  |  | offHeight = 175 | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | 
|---|
|  |  |  | 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 { //并行结构 | 
|---|
|  |  |  | 
|---|
|  |  |  | 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}, | 
|---|
|  |  |  | 
|---|
|  |  |  | connector: {name: 'rounded'}, | 
|---|
|  |  |  | zIndex: -1 | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | if (!result.canPlace) { | 
|---|
|  |  |  | //调用自动排版 | 
|---|
|  |  |  | this.layoutDiagram() | 
|---|
|  |  |  | if (this.dataForm.autoLayout == 1) { | 
|---|
|  |  |  | if (!result.canPlace) { | 
|---|
|  |  |  | //调用自动排版 | 
|---|
|  |  |  | this.layoutDiagram() | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | 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 | 
|---|
|  |  |  | 
|---|
|  |  |  | height = 175 | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | width = 270 | 
|---|
|  |  |  | height = 60 | 
|---|
|  |  |  | height = 70 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | leftTopX = centerX - width / 2 | 
|---|
|  |  |  | leftTopY = centerY - height / 2 | 
|---|
|  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | graphEdge.source = {cell: result.newEndNode.id} | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (!result.canPlace) { | 
|---|
|  |  |  | this.layoutDiagram() | 
|---|
|  |  |  | if (this.dataForm.autoLayout == 1) { | 
|---|
|  |  |  | if (!result.canPlace) { | 
|---|
|  |  |  | //调用自动排版 | 
|---|
|  |  |  | this.layoutDiagram() | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // graphEdge.remove() | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | <style> | 
|---|
|  |  |  | #containerImg { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | border: 1px solid #dfe3e8; | 
|---|
|  |  |  | /*border: 1px solid #dfe3e8;*/ | 
|---|
|  |  |  | height: 400px; | 
|---|
|  |  |  | width: 100% !important; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | 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> | 
|---|