| | |
| | | <el-row :gutter="[8,8]"> |
| | | <el-col :span="4"> |
| | | <div :style="'height:' +left_p+'px'"> |
| | | <div class="fa-card-a" style="height: 100%"> |
| | | <div style="height: 100%"> |
| | | <div id="stencilImg"></div> |
| | | </div> |
| | | </div> |
| | |
| | | id: '', |
| | | graph: null, |
| | | globalGridAttr: { |
| | | voteSum: '', |
| | | productType:'', |
| | | voteNum: null, |
| | | 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, |
| | | }) |
| | | }, |
| | |
| | | }) |
| | | this.graph.centerContent() |
| | | const stencil = new Addon.Stencil({ |
| | | getDragNode: (node) => node.clone({ keepId: true }), |
| | | getDropNode(node) { |
| | | let {width, height} = node.size() |
| | | if (node.getData().imgWidth) { |
| | |
| | | if (node.getData().imgHeight) { |
| | | height = node.getData().imgHeight |
| | | } |
| | | console.log(node.getData().imgWidth, node.getData().imgHeight, 'node.size()') |
| | | return node.clone().size(width, height) |
| | | return node.clone({ keepId: true }).size(width, height) |
| | | }, |
| | | // 返回一个新的节点作为实际放置到画布上的节点 |
| | | validateNode(node){ |
| | | console.log(node.id) |
| | | }, |
| | | 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:null |
| | | }, |
| | | attrs: { |
| | | text: { |
| | |
| | | imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`, |
| | | width: 60, |
| | | height: 60, |
| | | id: item.dataId, // 手动设置节点的 ID |
| | | 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:null, |
| | | }, |
| | | attrs: { |
| | | text: { |
| | |
| | | this.id = cell.id |
| | | if (this.type === 'node') { |
| | | this.nodeType = cell.getData().nodeType |
| | | console.log(this.nodeType, 'this.nodeType') |
| | | console.log(this.nodeType,cell.id,'this.nodeType') |
| | | } |
| | | console.log(this.shape, 'this.shape') |
| | | // this.nodeOpt(this.id, this.globalGridAttr) |
| | |
| | | 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> |