From 971bc523d06f21878a1532ef622b72c7e917ae2a Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期四, 09 五月 2024 17:56:41 +0800
Subject: [PATCH] RBD
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 292 ++++++++++++++++++++-------------------------------------
1 files changed, 104 insertions(+), 188 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index 8984205..8566355 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -37,6 +37,10 @@
<i style="font-size: 1rem;" class="wt-iconfont icon-diduiqi"></i>
</el-button>
</el-form-item>
+ <el-form-item>
+ <el-button @click="undo()">鎾ら攢</el-button>
+ <el-button @click="redo()">閲嶅仛</el-button>
+ </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%);height: 100%">
@@ -61,6 +65,7 @@
import {setHartBeat} from '@/commonJS/common';
import Cookies from 'js-cookie'
import {getUUID} from '../../../../packages/utils'
+ import RBDDefault from './RBD-default.json'
export default {
name: 'RBD-edit-img',
@@ -122,18 +127,18 @@
imgPath: 'parallel',
imgName: 'parallel',
nodeType: 'parallel',
- imgWidth: 60,
- imgHeight: 60,
+ imgWidth: 50,
+ imgHeight: 50,
imgId: '9',
data: {}
},
- {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}},
+ {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
{
imgPath: 'switch',
imgName: 'switch',
nodeType: 'switch',
- imgWidth: 60,
- imgHeight: 60,
+ imgWidth: 50,
+ imgHeight: 50,
imgId: '5',
data: {}
},
@@ -141,24 +146,22 @@
imgPath: 'bridgeConnection',
imgName: 'bridgeConnection',
nodeType: 'bridgeConnection',
- imgWidth: 60,
- imgHeight: 60,
+ imgWidth: 50,
+ imgHeight: 50,
imgId: '10',
data: {}
},
- {
- imgPath: 'dashedBox',
- imgName: 'dashedBox',
- nodeType: 'dashedBox',
- imgWidth: 60,
- imgHeight: 60,
- imgId: '10000',
- data: {}
- },
+ // {
+ // imgPath: 'dashedBox',
+ // imgName: 'dashedBox',
+ // nodeType: 'dashedBox',
+ // imgWidth: 60,
+ // imgHeight: 60,
+ // imgId: '10000',
+ // data: {}
+ // },
],
- imagesList2: [
- // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
- ],
+ imagesList2: [],
nodeType: '',
first: true,
shape: '',
@@ -175,28 +178,6 @@
hasPublish: 0,
urlPref: '',
},
- // emptyJson: {
- // // 鑺傜偣
- // nodes: [
- // {
- // id: 'node1', // String锛屽彲閫夛紝鑺傜偣鐨勫敮涓�鏍囪瘑
- // width: 500, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� width 鍊�
- // height: 300, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� height 鍊�
- // label: '璇ラ」鐩繕鏈厤缃巶瀹剁綉缁滃浘',
- // attrs: {
- // body: {
- // strokeWidth: 0
- // },
- // }
- // // text: {
- // // text: '璇ラ」鐩繕鏈紪鍒剁綉缁滃浘',
- // // // fontSize: 56,
- // // fill: 'rgba(0,0,0,0.7)'
- // // },
- // // },
- // }
- // ],
- // },
type: '',
id: '',
graph: null,
@@ -370,7 +351,7 @@
if (this.diagramJson.cells.length !== 0) {
this.graph.fromJSON(this.diagramJson)
} else {
- this.initCells()
+ this.graph.fromJSON(RBDDefault)
}
this.isFirstLoad = false;
console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
@@ -520,7 +501,7 @@
getDropNode: (node) => {
const {width, height} = node.size()
if (node.getData().type && node.getData().nodeType === 'dashedBox') {
- return node.clone().size(100, 80)
+ return node.clone().size(100, 60)
}
if (node.getData().type && node.getData().type === 'imageNodes2') {
return node.clone({keepId: true})
@@ -546,7 +527,7 @@
{
title: '杩愮畻绗﹀彿',
name: 'group1',
- graphHeight: 260,
+ graphHeight: 200,
},
{
title: '璁惧鑺傜偣',
@@ -694,21 +675,6 @@
}
return false
})
-//undo redo
- this.graph.bindKey(['meta+z', 'ctrl+z'], () => {
- if (this.graph.history.canUndo()) {
- this.graph.history.undo()
- }
- return false
- })
-
- this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
- if (this.graph.history.canRedo()) {
- this.graph.history.redo()
- }
- return false
- })
-
// select all
this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
const nodes = this.graph.getNodes()
@@ -858,12 +824,7 @@
this.getBridgeConnection()
}*/
});
- // 鐩戝惉鑺傜偣浣嶇疆鏀瑰彉浜嬩欢
- // this.graph.on('node:change:position', ({node}) => {
- // this.hasMoveNode = true
- // this.hasMoveSingleNode = node
- // });
- this.graph.on('cell:click', ({cell}) => {
+ this.graph.on('cell:contextmenu', ({cell}) => {
// this.type.value = cell.isNode() ? "node" : "edge"
this.type = cell.isNode() ? 'node' : 'edge'
this.shape = cell.shape
@@ -1156,9 +1117,9 @@
let graphNodeType = graphNode.getData().nodeType
let dragNodeType = dragNode.getData().nodeType
- let offHeight = 60
+ let offHeight = 50
if (dragNodeType === 'node') {
- offHeight = 60
+ offHeight = 50
} else if (dragNodeType === 'bridgeConnection') {
offHeight = 230
} else {
@@ -1180,7 +1141,11 @@
}
if (startNode && endNode) {
let centerY = graphNode.position().y
- let result = this.addNodeAndConnect(startNode, endNode, dragNode, dragNode.position().x, centerY)
+ let result = this.addNodeAndConnect(graphNode, dragNode, dragNode.position().x, centerY)
+ if (!result){
+ dragNode.remove()
+ return
+ }
inEdges[0].target = {cell: result.newStartNode.id, port: 'left1'}
outEdges[0].source = {cell: result.newEndNode.id, port: 'right1'}
graphNode.remove()
@@ -1206,7 +1171,11 @@
let centerX = minX + (maxX - minX) / 2
let centerY = graphNodeY - pointXY.minY > pointXY.maxY - graphNodeY ? pointXY.maxY + 30 : pointXY.minY - offHeight - 30
- let result = this.addNodeAndConnect(graphNodeStartNode, graphNode, dragNode, minX, centerY)
+ let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
+ if (!result){
+ dragNode.remove()
+ return
+ }
this.graph.addEdge({
source: {cell: graphNodeStartNode, port: 'right1'},
target: {cell: result.newStartNode, port: 'left1'},
@@ -1221,15 +1190,35 @@
})
}
},
- addNodeAndConnect(startNode, endNode, dragNode, leftX, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
+ addNodeAndConnect(targetNode, dragNode, leftX, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
+ let width =100, height = 80, leftTopX = leftX , leftTopY = centerY
let dragNodeType = dragNode.getData().nodeType
+ if (dragNodeType === 'node') {
+ width =60
+ height = 60
+ }else if (dragNodeType === 'dashedBox') {
+ width =100
+ height = 60
+ } else if (dragNodeType === 'bridgeConnection') {
+ width =450
+ height = 160
+ // leftTopY = 240/2
+ } else {
+ width =270
+ height = 60
+ }
+
+ if (!this.canPlace(targetNode,dragNode,{leftTopX, leftTopY, width, height})){
+ return false
+ }
+
if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
- dragNode.position(leftX + 50, centerY);
+ dragNode.position(leftX, centerY)
return {newStartNode: dragNode, newEndNode: dragNode}
} else if (dragNodeType === 'bridgeConnection') {
- return this.createBridgeConnection(leftX, centerY, startNode, endNode, dragNode)
+ return this.createBridgeConnection(leftX, centerY, dragNode)
} else {
- return this.createParallelBrach(leftX, centerY, startNode, endNode, dragNode)
+ return this.createParallelBrach(leftX, centerY, dragNode)
}
},
// 鐩镐氦鐨勮竟
@@ -1255,7 +1244,11 @@
isRight = false
}
}
- let result = this.addNodeAndConnect(startNode, endNode, dragNode, dragNode.position().x, centerY)
+ let result = this.addNodeAndConnect(null, dragNode, dragNode.position().x, centerY)
+ if (!result){
+ dragNode.remove()
+ return
+ }
if (isRight) {
graphEdge.target = {cell: result.newStartNode.id, port: endPort}
this.graph.addEdge({
@@ -1276,111 +1269,6 @@
}
// graphEdge.remove()
}
- },
- initCells() {
- const startNode = this.graph.addNode({
- shape: 'image',
- // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
- width: 60,
- height: 60,
- id: '10000',
- data: {
- type: 'imageNodes',
- endNodeId: '20000',
- dataId: '',
- nodeType: 'start',
- nodeTypeExt: '',
- voteNum: ''
- },
- attrs: {
- image: {
- 'xlink:href': '/modelImg/start.svg',
- },
- text: {
- text: 'start',
- fontSize: 14,
- refX: 0.5,
- refY: '100%',
- refY2: 4,
- textAnchor: 'middle',
- textVerticalAnchor: 'top',
- },
- },
- ports: {...this.ports},
- })
- const dashedBox = this.graph.addNode({
- shape: 'image',
- // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
- width: 100,
- height: 80,
- id: 15000,
- data: {
- type: 'imageNodes',
- dataId: '',
- nodeType: 'dashedBox',
- nodeTypeExt: '',
- voteNum: ''
- },
- attrs: {
- image: {
- 'xlink:href': '/modelImg/dashedBox.svg',
- },
- text: {
- text: 'dashedBox',
- fontSize: 14,
- refX: 0.5,
- refY: '100%',
- refY2: 4,
- textAnchor: 'middle',
- textVerticalAnchor: 'top',
- },
- },
- ports: {...this.ports},
- })
- const endNode = this.graph.addNode({
- shape: 'image',
- width: 60,
- height: 60,
- id: '20000',
- data: {
- type: 'imageNodes',
- startNodeId: '10000',
- dataId: '',
- nodeType: 'end',
- nodeTypeExt: '',
- voteNum: ''
- },
- attrs: {
- image: {
- 'xlink:href': '/modelImg/end.svg',
- },
- text: {
- text: 'end',
- fontSize: 14,
- refX: 0.5,
- refY: '100%',
- refY2: 4,
- textAnchor: 'middle',
- textVerticalAnchor: 'top',
- },
- },
- ports: {...this.ports},
- })
- startNode.position(-600, 0);
- dashedBox.position(0, (startNode.size().height - dashedBox.size().height) / 2);
- endNode.position(600, 0);
- this.graph.addEdge({
- source: {cell: startNode, port: 'right1'},
- target: {cell: dashedBox, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
- this.graph.addEdge({
- source: {cell: dashedBox, port: 'right1'},
- target: {cell: endNode, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
},
findIntersectsEdge(graph, node) {
const edges = graph.getEdges()
@@ -1406,7 +1294,7 @@
return false
}
},
- createParallelBrach(x, y, startNode, endNode, dragNode) {
+ createParallelBrach(x, y, dragNode) {
dragNode.position(x + 320, y - dragNode.size().height / 2)
const connectNode = this.createConnectNode(x + 50, y)
const dashedBox = this.createDashedBox(x + 150, y)
@@ -1438,7 +1326,7 @@
connector: {name: 'rounded'}
})*/
},
- createBridgeConnection(x, y, startNode, endNode, dragNode) {
+ createBridgeConnection(x, y, dragNode) {
const leftTopDashedBox = this.createDashedBox(x + 120, y)
const rightTopDashedBox = this.createDashedBox(x + 400, y)
@@ -1558,8 +1446,8 @@
let connectNode = this.graph.addNode({
shape: 'image',
// imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
- width: 30,
- height: 30,
+ width: 10,
+ height: 10,
id: connectId,
data: {
isSelfCreated: true,
@@ -1592,10 +1480,10 @@
createBridgeNode(x, y) {
const connectId = getUUID().toString()
const dragNodeId = getUUID().toString()
- let connectNode = this.graph.addNode({
+ let bridgeNode = this.graph.addNode({
shape: 'image',
- width: 50,
- height: 50,
+ width: 30,
+ height: 30,
id: connectId,
data: {
isSelfCreated: true,
@@ -1622,8 +1510,8 @@
},
ports: {...this.ports},
})
- connectNode.position(x, y - connectNode.size().height / 2)
- return connectNode
+ bridgeNode.position(x, y - bridgeNode.size().height / 2)
+ return bridgeNode
},
getYRange(inEdges, startNode, pointXY) {
for (let inEdge of inEdges) {
@@ -1769,6 +1657,34 @@
console.log(edges, '鑾峰彇鐢诲竷涓婄殑缁撴潫鑺傜偣鎵�鏈夌殑绾� edges')
return edges.filter(edge => edge.source.cell === node.id)
},
+ canPlace(targetNode,dragNode,box2){
+ const nodes = this.graph.getNodes()
+ let intersectNodes = []
+ // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜�
+ for (const otherNode of nodes) {
+ if (otherNode === dragNode || otherNode === targetNode) continue;
+ const bbox1 = otherNode.getBBox();
+ if (bbox1.x < box2.leftTopX + box2.width &&
+ bbox1.x + bbox1.width > box2.leftTopX &&
+ bbox1.y < box2.leftTopY + box2.height &&
+ bbox1.y + bbox1.height > box2.leftTopY) {
+ intersectNodes.push(otherNode);
+ }
+ }
+ console.log(box2,'box2')
+ console.log(intersectNodes,'intersectNodes')
+ return intersectNodes.length <= 0;
+ },
+ undo(){
+ if (this.graph.history.canUndo()) {
+ this.graph.history.undo()
+ }
+ },
+ redo(){
+ if (this.graph.history.canRedo()) {
+ this.graph.history.redo()
+ }
+ }
},
}
</script>
--
Gitblit v1.9.1