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 | 213 +++++++++++++++++++++++++++++++----------------------
1 files changed, 125 insertions(+), 88 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index b3fe5d6..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,7 +203,8 @@
id: '',
graph: null,
globalGridAttr: {
- voteSum: '',
+ productType:'',
+ voteNum: '',
repairMttcr: '',
repairMttcrOther: '',
repairDistribType: '',
@@ -335,19 +355,24 @@
},
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()
}
@@ -356,8 +381,8 @@
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) {
@@ -372,15 +397,16 @@
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,
// },
@@ -450,6 +476,12 @@
}
}
}],
+ tools: {
+ name: 'segments',
+ args: {
+ attrs: { fill: '#666' },
+ },
+ },
zIndex: 0,
})
},
@@ -485,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) {
@@ -493,31 +526,33 @@
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)
@@ -527,12 +562,11 @@
imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
width: item.imgWidth,
height: item.imgHeight,
- x: item.imgWidth,
- y: item.imgHeight,
data: {
dataId: '',
nodeType: item.nodeType,
- nodeTypeExt: ''
+ nodeTypeExt: '',
+ voteNum:''
},
attrs: {
text: {
@@ -563,8 +597,9 @@
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,
@@ -576,9 +611,9 @@
repairMttcrOther: item.repairMttcrOther,
taskMtbcf: item.taskMtbcf,
taskMtbcfOther: item.taskMtbcfOther,
- voteSum: '',
imgHeight: item.imgHeight,
- imgWidth: item.imgWidth
+ imgWidth: item.imgWidth,
+ voteNum:'',
},
attrs: {
text: {
@@ -718,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)
@@ -799,7 +834,7 @@
this.showPorts(ports, false)
})
- this.graph.on('edge:mouseenter', ({cell, view}) => {
+ this.graph.on('edge:mouseenter', ({cell}) => {
// alert(123)
cell.addTools([
{
@@ -813,15 +848,11 @@
},
},
},
- ])
- cell.addTools(
- [
{
- name: 'segments',
- args: {snapRadius: 20, attrs: {fill: '#444'}}
- }
- ]
- )
+ name: 'segments',
+ args: {snapRadius: 20, attrs: {fill: '#444'}}
+ },
+ ])
})
this.graph.on('edge:mouseleave', ({cell}) => {
@@ -889,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') {
@@ -901,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('瑙ｆ瀽鎴愬姛', '鎻愮ず', {
@@ -1055,10 +1087,15 @@
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>
--
Gitblit v1.9.1