From 652ec7d6dfdee121704961847fae3a3a5be3f5b6 Mon Sep 17 00:00:00 2001 From: jinlin <jinlin> Date: 星期一, 01 四月 2024 15:26:15 +0800 Subject: [PATCH] 修改 --- web/src/views/modules/taskReliability/RBD-edit-img.vue | 151 ++++++++++++++++++++++++++++++++------------------ 1 files changed, 96 insertions(+), 55 deletions(-) diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue index d31fb73..dcaa6b1 100644 --- a/web/src/views/modules/taskReliability/RBD-edit-img.vue +++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue @@ -3,7 +3,7 @@ <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> @@ -18,49 +18,67 @@ <el-button type="primary" @click="saveDiagram()">鏆傚瓨</el-button> <el-button type="primary" @click="analyzeDiagram()">淇濆瓨</el-button> <el-button type="primary" @click="clearDiagram()">娓呯┖鍥惧舰</el-button> + <el-button @click="leftAlign()"> + <i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i> + </el-button> + <el-button @click="centerAlign()"> + <i style="font-size: 1rem;" class="wt-iconfont icon-chuizhiduiqi"></i> + </el-button> + <el-button @click="rightAlign()"> + <i style="font-size: 1rem;" class="wt-iconfont icon-youduiqi"></i> + </el-button> + <el-button @click="topAlign()"> + <i style="font-size: 1rem;" class="wt-iconfont icon-dingduiqi"></i> + </el-button> + <el-button @click="shuipingAlign()"> + <i style="font-size: 1rem;" class="wt-iconfont icon-shuipingduiqi"></i> + </el-button> + <el-button @click="bottomAlign()"> + <i style="font-size: 1rem;" class="wt-iconfont icon-diduiqi"></i> + </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;" - @click="leftAlign()"><i style="font-size: 2rem;" - class="wt-iconfont icon-zuoduiqi"></i></el-button> - </el-tooltip> - </el-form-item> - <el-form-item> - <el-tooltip class="item" effect="dark" content="灞呬腑瀵归綈" placement="left"> - <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF" - @click="centerAlign()"><i style="font-size: 2rem;" - class="wt-iconfont icon-chuizhiduiqi"></i></el-button> - </el-tooltip> - </el-form-item> - <el-form-item> - <el-tooltip class="item" effect="dark" content="鍙冲榻�" placement="left"> - <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF" - @click="rightAlign()"><i style="font-size: 2rem;" - class="wt-iconfont icon-youduiqi"></i></el-button> - </el-tooltip> - </el-form-item> - <el-form-item> - <el-tooltip class="item" effect="dark" content="椤堕儴瀵归綈" placement="left"> - <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF" - @click="topAlign()"><i style="font-size: 2rem;" - class="wt-iconfont icon-dingduiqi"></i></el-button> - </el-tooltip> - </el-form-item> - <el-form-item> - <el-tooltip class="item" effect="dark" content="姘村钩瀵归綈" placement="left"> - <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF" - @click="shuipingAlign()"><i style="font-size: 2rem;" - class="wt-iconfont icon-shuipingduiqi"></i></el-button> - </el-tooltip> - </el-form-item> - <el-form-item> - <el-tooltip class="item" effect="dark" content="搴曢儴瀵归綈" placement="left"> - <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF" - @click="bottomAlign()"><i style="font-size: 2rem;" - class="wt-iconfont icon-diduiqi"></i></el-button> - </el-tooltip> - </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;" @click="leftAlign()">--> +<!-- <i style="font-size: 2rem;" class="wt-iconfont icon-zuoduiqi"></i>--> +<!-- </el-button>--> +<!-- </el-tooltip>--> +<!-- </el-form-item>--> +<!-- <el-form-item>--> +<!-- <el-tooltip class="item" effect="dark" content="灞呬腑瀵归綈" placement="left">--> +<!-- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"--> +<!-- @click="centerAlign()"><i style="font-size: 2rem;"--> +<!-- class="wt-iconfont icon-chuizhiduiqi"></i></el-button>--> +<!-- </el-tooltip>--> +<!-- </el-form-item>--> +<!-- <el-form-item>--> +<!-- <el-tooltip class="item" effect="dark" content="鍙冲榻�" placement="left">--> +<!-- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"--> +<!-- @click="rightAlign()"><i style="font-size: 2rem;"--> +<!-- class="wt-iconfont icon-youduiqi"></i></el-button>--> +<!-- </el-tooltip>--> +<!-- </el-form-item>--> +<!-- <el-form-item>--> +<!-- <el-tooltip class="item" effect="dark" content="椤堕儴瀵归綈" placement="left">--> +<!-- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"--> +<!-- @click="topAlign()"><i style="font-size: 2rem;"--> +<!-- class="wt-iconfont icon-dingduiqi"></i></el-button>--> +<!-- </el-tooltip>--> +<!-- </el-form-item>--> +<!-- <el-form-item>--> +<!-- <el-tooltip class="item" effect="dark" content="姘村钩瀵归綈" placement="left">--> +<!-- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"--> +<!-- @click="shuipingAlign()"><i style="font-size: 2rem;"--> +<!-- class="wt-iconfont icon-shuipingduiqi"></i></el-button>--> +<!-- </el-tooltip>--> +<!-- </el-form-item>--> +<!-- <el-form-item>--> +<!-- <el-tooltip class="item" effect="dark" content="搴曢儴瀵归綈" placement="left">--> +<!-- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"--> +<!-- @click="bottomAlign()"><i style="font-size: 2rem;"--> +<!-- class="wt-iconfont icon-diduiqi"></i></el-button>--> +<!-- </el-tooltip>--> +<!-- </el-form-item>--> </el-form> <div id="containerImg" style="border: 1px solid #EAEBEE;border-radius: 6px; box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);"> @@ -157,6 +175,7 @@ content: null, publishContent: null, hasPublish: 0, + urlPref: '', }, // emptyJson: { // // 鑺傜偣 @@ -184,6 +203,7 @@ id: '', graph: null, globalGridAttr: { + productType:'', voteNum: '', repairMttcr: '', repairMttcrOther: '', @@ -335,14 +355,18 @@ }, 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) @@ -493,6 +517,7 @@ }) 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) { @@ -501,9 +526,11 @@ 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, @@ -535,8 +562,6 @@ imageUrl: require('/public/modelImg/' + item.imgPath + '.png'), width: item.imgWidth, height: item.imgHeight, - x: item.imgWidth, - y: item.imgHeight, data: { dataId: '', nodeType: item.nodeType, @@ -572,6 +597,7 @@ 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, @@ -727,7 +753,7 @@ 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) @@ -810,9 +836,23 @@ this.graph.on('edge:mouseenter', ({cell}) => { // alert(123) - cell.addTools( - ['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}) => { @@ -880,6 +920,7 @@ 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') { @@ -892,7 +933,7 @@ 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('瑙f瀽鎴愬姛', '鎻愮ず', { -- Gitblit v1.9.1