From 21dff46677c9172c98d38192bc2982a8764f65fc Mon Sep 17 00:00:00 2001
From: jinlin <jinlin>
Date: 星期二, 26 三月 2024 08:37:15 +0800
Subject: [PATCH] 修改
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 101 +++++++++++++++++++++++++++++---------------------
1 files changed, 59 insertions(+), 42 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..b4b9bf1 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>
@@ -184,7 +184,8 @@
id: '',
graph: null,
globalGridAttr: {
- voteSum: '',
+ productType:'',
+ voteNum: null,
repairMttcr: '',
repairMttcrOther: '',
repairDistribType: '',
@@ -339,15 +340,18 @@
}
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 +360,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 +376,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 +455,12 @@
}
}
}],
+ tools: {
+ name: 'segments',
+ args: {
+ attrs: { fill: '#666' },
+ },
+ },
zIndex: 0,
})
},
@@ -485,6 +496,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 +505,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)
@@ -532,7 +546,8 @@
data: {
dataId: '',
nodeType: item.nodeType,
- nodeTypeExt: ''
+ nodeTypeExt: '',
+ voteNum:null
},
attrs: {
text: {
@@ -563,8 +578,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 +592,9 @@
repairMttcrOther: item.repairMttcrOther,
taskMtbcf: item.taskMtbcf,
taskMtbcfOther: item.taskMtbcfOther,
- voteSum: '',
imgHeight: item.imgHeight,
- imgWidth: item.imgWidth
+ imgWidth: item.imgWidth,
+ voteNum:null,
},
attrs: {
text: {
@@ -718,7 +734,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 +815,7 @@
this.showPorts(ports, false)
})
- this.graph.on('edge:mouseenter', ({cell, view}) => {
+ this.graph.on('edge:mouseenter', ({cell}) => {
// alert(123)
cell.addTools([
{
@@ -813,15 +829,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}) => {
@@ -1055,10 +1067,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