| | |
| | | <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> |
| | |
| | | content: null, |
| | | publishContent: null, |
| | | hasPublish: 0, |
| | | urlPref: '', |
| | | }, |
| | | // emptyJson: { |
| | | // // 节点 |
| | |
| | | id: '', |
| | | graph: null, |
| | | globalGridAttr: { |
| | | productType:'', |
| | | voteNum: '', |
| | | repairMttcr: '', |
| | | repairMttcrOther: '', |
| | |
| | | }, |
| | | async getDiagram(modelId) { |
| | | let params = { |
| | | modelId: modelId |
| | | modelId: modelId, |
| | | urlPref: window.SITE_CONFIG['apiURL'], |
| | | token: Cookies.get('token'), |
| | | } |
| | | let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params}) |
| | | console.log(res, 'async getDiagram( res') |
| | | if (res.data !== null && res.data.content != null) { |
| | | if (res.data !== null && (res.data.content != null)) { |
| | | this.dataForm = res.data |
| | | console.log(this.dataForm, 'this.dataForm in getDiagram') |
| | | this.diagramJson = JSON.parse(this.dataForm.content) |
| | | if(this.dataForm.content!=''){ |
| | | this.diagramJson = JSON.parse(this.dataForm.content) |
| | | } |
| | | // 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) { |
| | |
| | | } |
| | | }], |
| | | 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, |
| | |
| | | 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, |
| | |
| | | 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}) => { |
| | |
| | | async saveDiagram() { |
| | | console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()') |
| | | this.dataForm.content = JSON.stringify(this.graph.toJSON()) |
| | | this.dataForm.urlPref = window.SITE_CONFIG['apiURL'] |
| | | console.log(this.dataForm, 'dataFrom') |
| | | await this.$http[this.dataForm.id === null ? 'post' : 'put'](`/taskReliability/ModelLine/`, this.dataForm).then(async res => { |
| | | if (res.msg === 'success') { |
| | |
| | | async analyzeDiagram() { |
| | | console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()') |
| | | this.dataForm.content = JSON.stringify(this.graph.toJSON()) |
| | | console.log(this.dataForm, 'dataFrom') |
| | | this.dataForm.urlPref = window.SITE_CONFIG['apiURL'] |
| | | await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => { |
| | | if (res.msg === 'success') { |
| | | this.$alert('解析成功', '提示', { |