| | |
| | | id: '', |
| | | graph: null, |
| | | globalGridAttr: { |
| | | voteSum: '', |
| | | voteNum: '', |
| | | repairMttcr: '', |
| | | repairMttcrOther: '', |
| | | repairDistribType: '', |
| | |
| | | // console.log(this.dataForm.content,'this.Diagram content') |
| | | console.log(this.diagramJson, 'this.Diagram json') |
| | | this.graph.fromJSON(this.diagramJson) |
| | | this.graph.centerContent() |
| | | this.graph.zoomToFit() |
| | | this.graph.positionContent('left') |
| | | // this.graph.centerContent() |
| | | // this.graph.zoomToFit() |
| | | } else { |
| | | await this.clearDiagram() |
| | | } |
| | |
| | | this.dataForm.id = null |
| | | // this.graph.fromJSON(this.emptyJson) |
| | | this.graph.fromJSON('') |
| | | this.graph.centerContent() |
| | | this.graph.zoomToFit() |
| | | // this.graph.centerContent() |
| | | // this.graph.zoomToFit() |
| | | // this.graph.freeze() |
| | | }, |
| | | async initDigram(productId) { |
| | |
| | | grid: { |
| | | visible: true, |
| | | }, |
| | | onToolItemCreated({tool}) { |
| | | const handle = tool |
| | | const options = handle.options |
| | | if (options && options.index % 2 === 1) { |
| | | tool.setAttrs({fill: 'red'}) |
| | | } |
| | | }, |
| | | autoResize: true, |
| | | history: true, |
| | | history: { |
| | | enabled: true, |
| | | beforeAddCommand(event, args) { |
| | | if (args.key==='tools') { |
| | | console.log(args.key,'event, args') |
| | | return false |
| | | } |
| | | }, |
| | | }, |
| | | // panning: { |
| | | // enabled: true, |
| | | // }, |
| | |
| | | } |
| | | } |
| | | }], |
| | | tools: { |
| | | name: 'segments', |
| | | args: { |
| | | attrs: { fill: '#666' }, |
| | | }, |
| | | }, |
| | | zIndex: 0, |
| | | }) |
| | | }, |
| | |
| | | console.log(node.getData().imgWidth, node.getData().imgHeight, 'node.size()') |
| | | return node.clone().size(width, height) |
| | | }, |
| | | // 返回一个新的节点作为实际放置到画布上的节点 |
| | | title: '', |
| | | target: this.graph, |
| | | stencilGraphWidth: 230, |
| | | stencilGraphHeight: 300, |
| | | collapsable: false, |
| | | stencilGraphWidth: 200, |
| | | stencilGraphHeight: 280, |
| | | collapsable: true, |
| | | groups: [ |
| | | { |
| | | title: '运算符号', |
| | | name: 'group1', |
| | | collapsable: false |
| | | }, |
| | | { |
| | | title: '设备节点', |
| | | name: 'group2', |
| | | collapsable: false |
| | | graphHeight: '', |
| | | layoutOptions: { |
| | | rowHeight: 90, |
| | | }, |
| | | } |
| | | ], |
| | | layoutOptions: { |
| | | columns: 2, |
| | | columnWidth: 110, |
| | | // rowHeight: 75, |
| | | columnWidth: 105, |
| | | }, |
| | | }) |
| | | document.getElementById('stencilImg').appendChild(stencil.container) |
| | |
| | | data: { |
| | | dataId: '', |
| | | nodeType: item.nodeType, |
| | | nodeTypeExt: '' |
| | | nodeTypeExt: '', |
| | | voteNum:'' |
| | | }, |
| | | attrs: { |
| | | text: { |
| | |
| | | width: 60, |
| | | height: 60, |
| | | data: { |
| | | isRepair: false, |
| | | isRepair: item.isRepair, |
| | | dataId: item.dataId, |
| | | nodeType: item.nodeType, |
| | | nodeTypeExt: item.nodeTypeExt, |
| | |
| | | repairMttcrOther: item.repairMttcrOther, |
| | | taskMtbcf: item.taskMtbcf, |
| | | taskMtbcfOther: item.taskMtbcfOther, |
| | | voteSum: '', |
| | | imgHeight: item.imgHeight, |
| | | imgWidth: item.imgWidth |
| | | imgWidth: item.imgWidth, |
| | | voteNum:'', |
| | | }, |
| | | attrs: { |
| | | text: { |
| | |
| | | this.showPorts(ports, false) |
| | | }) |
| | | |
| | | this.graph.on('edge:mouseenter', ({cell, view}) => { |
| | | this.graph.on('edge:mouseenter', ({cell}) => { |
| | | // alert(123) |
| | | cell.addTools([ |
| | | { |
| | |
| | | }, |
| | | }, |
| | | }, |
| | | ]) |
| | | cell.addTools( |
| | | [ |
| | | { |
| | | name: 'segments', |
| | | args: {snapRadius: 20, attrs: {fill: '#444'}} |
| | | } |
| | | ] |
| | | ) |
| | | name: 'segments', |
| | | args: {snapRadius: 20, attrs: {fill: '#444'}} |
| | | }, |
| | | ]) |
| | | }) |
| | | |
| | | this.graph.on('edge:mouseleave', ({cell}) => { |
| | |
| | | position: relative; |
| | | height: 100%; |
| | | } |
| | | |
| | | #stencilImg .x6-graph-svg-viewport{ |
| | | height: 100%; |
| | | } |
| | | .x6-widget-stencil-content { |
| | | position: relative; |
| | | height: 100%; |
| | | height: calc(100% - 32px); |
| | | } |
| | | #stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content{ |
| | | top:0 |
| | | } |
| | | |
| | | </style> |