From ea220d6bba2fefd738acce188607e327f13bfced Mon Sep 17 00:00:00 2001 From: xyc <jc_xiong@hotmail.com> Date: 星期四, 07 三月 2024 21:58:06 +0800 Subject: [PATCH] 能解析5种模型(串联、并联、旁联、表决、桥联)的版本 --- web/src/views/modules/taskReliability/RBD-edit-img.vue | 152 +++++++++++++++++++++++++++++--------------------- 1 files changed, 88 insertions(+), 64 deletions(-) diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue index 1991943..db54776 100644 --- a/web/src/views/modules/taskReliability/RBD-edit-img.vue +++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue @@ -1,36 +1,30 @@ <template> <div> <el-row :gutter="[8,8]"> - <el-col :span="5"> + <el-col :span="4"> <div :style="'height:' +left_p+'px'"> <div class="fa-card-a" style="height: 100%"> <div id="stencilImg"></div> </div> </div> </el-col> - <el-col :span="19"> + <el-col :span="20"> <div class="fa-card-a"> <el-form :inline="true"> - <el-form-item prop="projectId" style="margin-left:10px;width: 180px;"> - <zt-select v-model="projectId" :datas="projectList" clearable placeholder="宸ョ▼椤圭洰" - @change="projectChange"></zt-select> + <el-form-item> + 妯″瀷ID </el-form-item> <el-form-item> - <el-select v-model="diagramId" :disabled="diagramIdDisabled" placeholder="璇烽�夋嫨" - @change="diagramIdChanges"> - <el-option v-for="item in diagramList" - :key="item.diagramId" - :label="item.diagramName" - :value="item.diagramId"> - </el-option> - </el-select> + <el-input placeholder="鎼滅储妯″瀷ID" v-model="dataForm.modelId" clearable class="input-with-select"> + <el-button slot="append" icon="el-icon-search" @click="search()"></el-button> + </el-input> </el-form-item> - <el-form-item> - <el-button type="primary" @click="saveDiagram()">淇濆瓨</el-button> - <!-- <zt-button type="primary" v-show="pageCode === 'wlt_sp' && flowInfo.myStatus ===1" @click="reject()">椹冲洖</zt-button>--> - <el-button v-show="pageCode === 'wlt_pz' && flowInfo.myStatus ===1" type="warning" @click="finish">瀹屾垚 - </el-button> - </el-form-item> + + <el-form-item> + <el-button type="primary" @click="saveDiagram()">淇濆瓨</el-button> + <el-button type="primary" @click="analyzeDiagram()">瑙f瀽</el-button> + <el-button type="primary" @click="clearDiagram()">娓呯┖鍥惧舰</el-button> + </el-form-item> <el-form-item> <el-tooltip class="item" effect="dark" content="宸﹀榻�" placement="left"> <el-button class="" style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF;" @@ -79,6 +73,7 @@ </div> <config-node v-show="type === 'node'" :id="id" :diagramId="diagramId" :globalGridAttr="globalGridAttr" :graph="graph" + :nodeType="nodeType" :projectId="projectId" :shape="shape"/> <config-edge v-show="type === 'edge'" :id="id" :globalGridAttr="globalGridAttr" :graph="graph"/> @@ -125,14 +120,16 @@ imgsList:[ {imgPath:'start',imgName:'start',nodeType:'start',imgWidth:60,imgHeight:60,imgId:'1',data:{}}, {imgPath:'end',imgName:'end',nodeType:'end',imgWidth:60,imgHeight:60,imgId:'2',data:{}}, - {imgPath:'parallelLeft',imgName:'parallelLeft',nodeType:'parallelLeft',imgWidth:60,imgHeight:60,imgId:'3',data:{}}, - {imgPath:'parallelRight',imgName:'parallelRight',nodeType:'parallelRight',imgWidth:60,imgHeight:60,imgId:'4',data:{}}, - {imgPath:'switchRight',imgName:'switchRight',nodeType:'switchRight',imgWidth:60,imgHeight:60,imgId:'5',data:{}}, - {imgPath:'voteRight',imgName:'voteRight',nodeType:'voteRight',imgWidth:60,imgHeight:60,imgId:'6',data:{}}, + {imgPath:'connect',imgName:'connect',nodeType:'connect',imgWidth:20,imgHeight:20,imgId:'3',data:{}}, + // {imgPath:'parallelLeft',imgName:'parallelLeft',nodeType:'parallelLeft',imgWidth:60,imgHeight:60,imgId:'3',data:{}}, + // {imgPath:'parallelRight',imgName:'parallel',nodeType:'parallel',imgWidth:60,imgHeight:60,imgId:'4',data:{}}, + {imgPath:'switchRight',imgName:'switch',nodeType:'switch',imgWidth:60,imgHeight:60,imgId:'5',data:{}}, + {imgPath:'voteRight',imgName:'vote',nodeType:'vote',imgWidth:60,imgHeight:60,imgId:'6',data:{}}, ], imgsList2:[ - {imgPath:'logo',imgName:'logo',nodeType:'node',imgWidth:60,imgHeight:60,imgId:'100',data:{dataId:'123456',nodeTypeExt:'aaa'}}, + {imgPath:'logo',imgName:'logo',nodeType:'node',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',data:{dataId:'123456',nodeTypeExt:''}}, ], + nodeType:'', first: true, shape: '', projectList: [], @@ -148,7 +145,7 @@ content: null, publishContent: null, hasPublish: 0, - modelId: 1, + modelId: '1', }, flowInfo: { bizId: '', @@ -184,6 +181,8 @@ id: '', graph: null, globalGridAttr: { + statusImg:'', + nodeTypeExt:'', type: 'mesh', size: 10, color: '#e5e5e5', @@ -219,7 +218,7 @@ }, isReady: false, curCel: Cell, - left_p: document.documentElement.clientHeight-220, + left_p: document.documentElement.clientHeight-100, ports: { groups: { top: { @@ -354,7 +353,7 @@ await this.projectChange2(this.diagramId) }, - projectChange() { + /* projectChange() { // alert(555) this.projectChange2(this.projectId) }, @@ -394,35 +393,29 @@ console.log(this.dataForm.diagramId, 'this.dataForm.diagramId.........................') } await this.getDiagram() - }, + },*/ - diagramIdChanges() { +/* diagramIdChanges() { this.dataForm.diagramId = this.diagramId // this.diagramIdChange(this.diagramId) this.getDiagram() + },*/ + async clearDiagram() { + this.dataForm.id = null + // this.graph.fromJSON(this.emptyJson) + this.graph.fromJSON('') + this.graph.centerContent() + this.graph.zoomToFit() + // this.graph.freeze() }, async getDiagram() { - let includeCj = false - console.log(this.diagramList, 'this.diagramList') - console.log(this.diagramId, 'this.diagramId') - for (let val of this.diagramList) { - if (val.diagramId == this.diagramId) { - includeCj = true - break - } + let params = { + modelId : this.dataForm.modelId } - console.log(includeCj, 'includeCj') - if (includeCj) { - // alert(3) - let params = { - projectId: this.dataForm.projectId, - diagramId: this.dataForm.diagramId, - isShow: 'edit' - } - console.log(params, 'params') - let res = await this.$http.get(`/maintain/projectNetworkDiagram/getDiagram`, {params: params}) + let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params}) 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) // console.log(this.dataForm.content,'this.Diagram content') console.log(this.diagramJson, 'this.Diagram json') @@ -430,20 +423,9 @@ this.graph.centerContent() this.graph.zoomToFit() } else { - this.dataForm.id = null - // this.graph.fromJSON(this.emptyJson) - this.graph.centerContent() - this.graph.zoomToFit() - // this.graph.freeze() + await this.clearDiagram() } - } else { - this.dataForm.id = null - console.log(this.data, 'this.data asdfg') - // this.graph.fromJSON(this.emptyJson) - this.graph.positionContent('left',{ padding: { left: 200 }}) - // this.graph.centerContent() - // this.graph.zoomToFit() - } + }, init() { this.timer = setHartBeat(10, 240); @@ -453,7 +435,7 @@ this.graph = new Graph({ container: document.getElementById('containerImg'), width: document.documentElement.clientWidth, - height: document.documentElement.clientHeight - 220, + height: document.documentElement.clientHeight - 200, // async: true, grid: { visible: true, @@ -910,7 +892,8 @@ data: { dataId: item.data.dataId, nodeType: item.nodeType, - nodeTypeExt: item.data.nodeTypeExt + nodeTypeExt: item.data.nodeTypeExt, + statusImg:item.statusImg }, attrs: { text:{ @@ -926,13 +909,33 @@ textVerticalAnchor: 'top', }, }, + tools: [ + { + name: 'button', + args: { + markup: [ + { + tagName: 'image', + selector: 'icon', + attrs: { + // 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ', + 'xlink:href':item.statusImg, + width: 30, + height: 30, + x: 0, + y: 0 + } + } + ] + } + } + ], ports: {...this.ports}, }), ) - // r1.push(r5,r6,r9) - console.log(imageNodes,'group1') stencil.load(imageNodes, 'group1') stencil.load(imageNodes2, 'group2') + this.graph.bindKey(['meta+c', 'ctrl+c'], () => { const cells = this.graph.getSelectedCells() @@ -1028,6 +1031,10 @@ this.type = cell.isNode() ? 'node' : 'edge' this.shape = cell.shape this.id = cell.id + if(this.type==='node'){ + this.nodeType = cell.getData().nodeType + console.log(this.nodeType, 'this.nodeType') + } console.log(this.shape, 'this.shape') // this.nodeOpt(this.id, this.globalGridAttr) }) @@ -1135,6 +1142,8 @@ this.graph.on('edge:mouseleave', ({cell}) => { cell.removeTools() }) + + this.getDiagram() }, showPorts(ports, show) { for (let i = 0, len = ports.length; i < len; i = i + 1) { @@ -1189,6 +1198,9 @@ // } // return this.curCel; // }, + async search() { + await this.getDiagram(); + }, async saveDiagram() { console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()') this.dataForm.content = JSON.stringify(this.graph.toJSON()) @@ -1201,6 +1213,18 @@ } }) }, + async analyzeDiagram() { + console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()') + this.dataForm.content = JSON.stringify(this.graph.toJSON()) + console.log(this.dataForm, 'dataFrom') + await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => { + if (res.msg === 'success') { + this.$alert('瑙f瀽鎴愬姛', '鎻愮ず', { + confirmButtonText: '纭畾' + }) + } + }) + }, // AlignmentsChanges(val){ // console.log(val,'align.value') // if(val ==='閫夐」1'){ -- Gitblit v1.9.1