From 5ef47212d7a7d5d8fa2b02674c1f1263b07826d0 Mon Sep 17 00:00:00 2001
From: jinlin <jinlin>
Date: 星期四, 07 十一月 2024 17:45:41 +0800
Subject: [PATCH] 修改工况bug，新增产品节点时存在
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 182 ++++++++++++++++++++++++++++-----------------
1 files changed, 113 insertions(+), 69 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index 9326360..93c984d 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -1,14 +1,14 @@
<template>
<div>
<el-row :gutter="[8,8]">
- <el-col :span="3">
+ <el-col :span="4">
<div :style="'height:' +left_p+'px'">
<div style="height: 100%">
<div id="stencilImg"></div>
</div>
</div>
</el-col>
- <el-col :span="21">
+ <el-col :span="20">
<div class="fa-card-a">
<el-form :inline="true">
<el-form-item>
@@ -18,7 +18,10 @@
<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 type="primary" @click="layoutDiagram()">涓�閿帓鐗�</el-button>
+ <el-checkbox style="margin: 0 10px 0 10px" v-model="dataForm.autoLayout" :true-label="1" :false-label="0">
+ 鏄惁寮�鍚竴閿帓鐗�
+ </el-checkbox>
+ <el-button type="primary" @click="layoutDiagram()" :disabled="!dataForm.autoLayout">涓�閿帓鐗�</el-button>
<el-button @click="leftAlign()">
<i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i>
</el-button>
@@ -576,7 +579,8 @@
publishContent: null,
hasPublish: 0,
urlPref: '',
- nodeArr: []
+ nodeArr: [],
+ autoLayout: 1,
},
type: '',
id: '',
@@ -754,6 +758,7 @@
}
let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
this.dataForm = res.data
+ this.dataForm.autoLayout = parseInt(this.dataForm.autoLayout)
if (res.data.content != null) {
console.log(this.dataForm, 'getDiagram datafrom')
console.log(res.data, 'getDiagram res.data')
@@ -906,14 +911,16 @@
})
this.graph.centerContent()
const stencil = new Addon.Stencil({
- //getDragNode: (node) => node.clone({keepId: true}),
+ // getDragNode: (node) => {
+ // node.removeAttrs('title')
+ // },
getDropNode: (node) => {
this.canAdd = true
const {width, height} = node.size()
if (node.getData().type && node.getData().type === 'imageNodes2') {
const nodes = this.graph.getNodes()
let deviceNoArr = []
- // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜�
+
for (const node2 of nodes) {
console.log(node2, 'saveDiagram node')
if (node2.getData().nodeType == 'node' && node2.getData().dataId) {
@@ -928,7 +935,7 @@
for (let i = 1; i <= node.getData().basicUnitNum; i++) {
if (deviceNoArr.findIndex(item => item === i) === -1) {
no = i
- if (node.getData().basicUnitNum>1){
+ if (node.getData().basicUnitNum > 1) {
node.getData().deviceNo = i
node.attr('text/text', node.attr('text/text') + '-' + i)
}
@@ -951,7 +958,7 @@
},
title: '',
target: this.graph,
- stencilGraphWidth: 200,
+ stencilGraphWidth: 240,
stencilGraphHeight: 280,
collapsable: true,
groups: [
@@ -965,13 +972,13 @@
name: 'group2',
graphHeight: '',
layoutOptions: {
- rowHeight: 90,
+ rowHeight: 100,
},
}
],
layoutOptions: {
columns: 2,
- columnWidth: 105,
+ columnWidth: 130,
},
})
document.getElementById('stencilImg').appendChild(stencil.container)
@@ -1025,7 +1032,7 @@
shape: 'image',
//imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
width: 60,
- height: 60,
+ height: 70,
//id: item.dataId, // 鎵嬪姩璁剧疆鑺傜偣鐨� ID
data: {
type: 'imageNodes2',
@@ -1055,43 +1062,68 @@
},
attrs: {
image: {
- 'xlink:href': `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=${item.imgPath}`,
+ 'xlink:href': `${window.SITE_CONFIG['apiURL']}/basicInfo/XhProductModel/getImg?token=${Cookies.get('token')}&id=${item.dataId}&t=${new Date().getTime()}`,
//'xlink:href': urlObject.createObjectURL(new Blob([item.svgContent])),
+ },
+ title: {
+ text: item.basicUnitNum > 1 ? item.basicUnitNum : '',
+ refX: 15,
+ refY: 10,
+ fill: '#748be7',
+ fontSize: 14,
+ fontWeight: 'bold',
+ 'text-anchor': 'start',
},
text: {
text: item.imgName,
fontSize: 14,
- style: {
- color: this.globalGridAttr.nodeColor
- },
refX: 0.5,
- refY: '100%',
+ refY: '85%',
refY2: 4,
textAnchor: 'middle',
textVerticalAnchor: 'top',
+ textWrap: {
+ width: 120, // 瀹藉害涓� 120px鎹㈣
+ ellipsis: false, // 鏂囨湰瓒呭嚭鏄剧ず鑼冨洿鏃讹紝鑷姩娣诲姞鐪佺暐鍙�
+ breakWord: true, // 鏄惁鎴柇鍗曡瘝
+ }
},
},
- tools: [
+ markup: [
{
- 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
- }
- }
- ]
- }
- }
+ tagName: 'image',
+ selector: 'image',
+ },
+ {
+ tagName: 'text',
+ selector: 'title',
+ },
+ {
+ tagName: 'text',
+ selector: 'text',
+ },
],
+ // 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},
}),
)
@@ -1191,6 +1223,9 @@
})
// 鐩戝惉鑺傜偣娣诲姞浜嬩欢
this.graph.on('node:added', ({node}) => {
+ node.setAttrs({
+ title: {text: ''},
+ })
if (this.isFirstLoad) {
return
}
@@ -1550,26 +1585,28 @@
})
},
async layoutDiagram() {
- console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
- this.dataForm.content = JSON.stringify(this.graph.toJSON())
- this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
- await this.$http['post'](`/taskReliability/ModelLine/layout`, this.dataForm).then(async res => {
- if (res.msg === 'success') {
- // this.$emit('refreshDataList')
- // this.$alert('瑙ｆ瀽鎴愬姛', '鎻愮ず', {
- // confirmButtonText: '纭畾'
- // })
- console.log(res.data, 'layoutDiagram res.data')
- this.dataForm.content = res.data.content
- console.log(this.dataForm.content, 'layoutDiagram dataForm.content')
- this.diagramJson = JSON.parse(this.dataForm.content)
- this.graph.fromJSON(this.diagramJson)
- this.isFirstLoad = false;
- // console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
+ if (this.dataForm.autoLayout == 1) {
+ console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
+ this.dataForm.content = JSON.stringify(this.graph.toJSON())
+ this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
+ await this.$http['post'](`/taskReliability/ModelLine/layout`, this.dataForm).then(async res => {
+ if (res.msg === 'success') {
+ // this.$emit('refreshDataList')
+ // this.$alert('瑙ｆ瀽鎴愬姛', '鎻愮ず', {
+ // confirmButtonText: '纭畾'
+ // })
+ console.log(res.data, 'layoutDiagram res.data')
+ this.dataForm.content = res.data.content
+ console.log(this.dataForm.content, 'layoutDiagram dataForm.content')
+ this.diagramJson = JSON.parse(this.dataForm.content)
+ this.graph.fromJSON(this.diagramJson)
+ this.isFirstLoad = false;
+ // console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
- this.graph.positionContent('left')
- }
- })
+ this.graph.positionContent('left')
+ }
+ })
+ }
},
leftAlign() {
const NODE = this.graph.getSelectedCells()
@@ -1709,7 +1746,7 @@
let dragNodeType = dragNode.getData().nodeType
let offHeight = 50
if (dragNodeType === 'node') {
- offHeight = 60
+ offHeight = 70
} else if (dragNodeType === 'bridgeConnection') {
offHeight = 175
} else {
@@ -1746,9 +1783,11 @@
inEdges[0].target = {cell: result.newStartNode.id}
outEdges[0].source = {cell: result.newEndNode.id}
graphNode.remove()
- if (!result.canPlace) {
-//璋冪敤鑷姩鎺掔増
- this.layoutDiagram()
+ if (this.dataForm.autoLayout == 1) {
+ if (!result.canPlace) {
+ //璋冪敤鑷姩鎺掔増
+ this.layoutDiagram()
+ }
}
}
} else { //骞惰缁撴瀯
@@ -1767,13 +1806,13 @@
this.getYRange(inEdges, graphNodeStartNode, pointXY)
console.log(pointXY, 'new')
- let minX = graphNodeStartNode.position().x + graphNode.getBBox().width + 15
- let maxX = graphNode.position().x
+ let minX = graphNodeStartNode.position().x + graphNode.getBBox().width
+ let maxX = graphNode.position().x - dragNode.getBBox().width / 2
let centerX = minX + (maxX - minX) / 2
let centerY = graphNodeY + graphNode.getBBox().height / 2 - pointXY.minY > pointXY.maxY - (graphNodeY + graphNode.getBBox().height / 2) ?
pointXY.maxY + offHeight / 2 + 30 : pointXY.minY - offHeight / 2 - 30
- let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
+ let result = this.addNodeAndConnect(null, dragNode, centerX, centerY)
console.log(result, 'result111')
this.graph.addEdge({
source: {cell: graphNodeStartNode},
@@ -1801,9 +1840,11 @@
connector: {name: 'rounded'},
zIndex: -1
})
- if (!result.canPlace) {
-//璋冪敤鑷姩鎺掔増
- this.layoutDiagram()
+ if (this.dataForm.autoLayout == 1) {
+ if (!result.canPlace) {
+ //璋冪敤鑷姩鎺掔増
+ this.layoutDiagram()
+ }
}
}
},
@@ -1814,8 +1855,8 @@
leftTopY = centerY
let dragNodeType = dragNode.getData().nodeType
if (dragNodeType === 'node') {
- width = 60
- height = 60
+ width = 100
+ height = 70
} else if (dragNodeType === 'dashedBox') {
width = 60
height = 40
@@ -1824,7 +1865,7 @@
height = 175
} else {
width = 270
- height = 60
+ height = 70
}
leftTopX = centerX - width / 2
leftTopY = centerY - height / 2
@@ -1933,8 +1974,11 @@
})
graphEdge.source = {cell: result.newEndNode.id}
}
- if (!result.canPlace) {
- this.layoutDiagram()
+ if (this.dataForm.autoLayout == 1) {
+ if (!result.canPlace) {
+ //璋冪敤鑷姩鎺掔増
+ this.layoutDiagram()
+ }
}
// graphEdge.remove()
}
--
Gitblit v1.9.1