| | |
| | | <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: { |
| | | voteNum: '', |
| | | 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) { |
| | |
| | | autoResize: true, |
| | | history: { |
| | | enabled: true, |
| | | ignoreAdd: true, |
| | | ignoreRemove: true, |
| | | ignoreChange: true, |
| | | beforeAddCommand(event, args) { |
| | | if (args.key==='tools') { |
| | | console.log(args.key,'event, args') |
| | | return false |
| | | } |
| | | }, |
| | | }, |
| | | // panning: { |
| | | // enabled: true, |
| | |
| | | } |
| | | }], |
| | | tools: { |
| | | name: 'vertices', |
| | | name: 'segments', |
| | | args: { |
| | | attrs: { fill: '#666' }, |
| | | }, |
| | |
| | | }) |
| | | 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: 200, |
| | |
| | | dataId: '', |
| | | nodeType: item.nodeType, |
| | | nodeTypeExt: '', |
| | | voteNum:'' |
| | | 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: item.isRepair, |
| | | dataId: item.dataId, |
| | |
| | | taskMtbcfOther: item.taskMtbcfOther, |
| | | imgHeight: item.imgHeight, |
| | | imgWidth: item.imgWidth, |
| | | voteNum:'', |
| | | 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.graph.on('edge:mouseenter', ({cell}) => { |
| | | // alert(123) |
| | | cell.addTools( |
| | | ['vertices', 'segments'] |
| | | ) |
| | | cell.addTools([ |
| | | { |
| | | name: 'source-arrowhead', |
| | | }, |
| | | { |
| | | name: 'target-arrowhead', |
| | | args: { |
| | | attrs: { |
| | | fill: 'red', |
| | | }, |
| | | }, |
| | | }, |
| | | { |
| | | name: 'segments', |
| | | args: {snapRadius: 20, attrs: {fill: '#444'}} |
| | | }, |
| | | ]) |
| | | }) |
| | | |
| | | this.graph.on('edge:mouseleave', ({cell}) => { |