| | |
| | | <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) |
| | | } |
| | |
| | | //'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() |
| | |
| | | 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 { //并行结构 |
| | |
| | | connector: {name: 'rounded'}, |
| | | zIndex: -1 |
| | | }) |
| | | if (!result.canPlace) { |
| | | //调用自动排版 |
| | | this.layoutDiagram() |
| | | if (this.dataForm.autoLayout == 1) { |
| | | if (!result.canPlace) { |
| | | //调用自动排版 |
| | | this.layoutDiagram() |
| | | } |
| | | } |
| | | } |
| | | }, |
| | |
| | | }) |
| | | graphEdge.source = {cell: result.newEndNode.id} |
| | | } |
| | | if (!result.canPlace) { |
| | | this.layoutDiagram() |
| | | if (this.dataForm.autoLayout == 1) { |
| | | if (!result.canPlace) { |
| | | //调用自动排版 |
| | | this.layoutDiagram() |
| | | } |
| | | } |
| | | // graphEdge.remove() |
| | | } |