From 7917c76b02b213a5fa805a6e2c9936167fae5cc8 Mon Sep 17 00:00:00 2001 From: wente <329538422@qq.com> Date: 星期一, 14 十月 2024 09:23:29 +0800 Subject: [PATCH] 时序图 --- web/src/views/modules/taskReliability/RBD-edit-img.vue | 138 +++++++++++++++++++++------------------------ 1 files changed, 65 insertions(+), 73 deletions(-) diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue index b6b9c82..b92bdab 100644 --- a/web/src/views/modules/taskReliability/RBD-edit-img.vue +++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue @@ -109,7 +109,7 @@ "text": { "refY": "100%", "textVerticalAnchor": "top", - "text": "start", + "text": "", "refY2": 4 }, "image": { @@ -232,7 +232,7 @@ "text": { "refY": "100%", "textVerticalAnchor": "top", - "text": "dashedBox", + "text": "", "refY2": 4 }, "image": { @@ -260,7 +260,7 @@ "r": 4, "magnet": true, "stroke": "#5F95FF", - "strokeWidth": 1, + "fill": "#fff", "style": { "visibility": "hidden" @@ -354,7 +354,7 @@ "text": { "refY": "100%", "textVerticalAnchor": "top", - "text": "end", + "text": "", "refY2": 4 }, "image": { @@ -468,7 +468,11 @@ "shape": "edge", "id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7", "router": { - "name": "manhattan" + "name": "manhattan", + "args": { + "startDirections": ["right"], + "endDirections": ["left"] + } }, "connector": { "name": "rounded" @@ -485,7 +489,11 @@ "shape": "edge", "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f", "router": { - "name": "manhattan" + "name": "manhattan", + "args": { + "startDirections": ["right"], + "endDirections": ["left"] + } }, "connector": { "name": "rounded" @@ -519,19 +527,19 @@ timer: null, imagesList: [ { - imgPath: 'parallel', - imgName: 'parallel', - nodeType: 'parallel', + imgPath: 'switch', + imgName: '', + nodeType: 'switch', imgWidth: 50, imgHeight: 50, imgId: '9', data: {} }, - {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}}, + {imgPath: 'vote', imgName: '', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}}, { - imgPath: 'switch', - imgName: 'switch', - nodeType: 'switch', + imgPath: 'parallel', + imgName: '', + nodeType: 'parallel', imgWidth: 50, imgHeight: 50, imgId: '5', @@ -539,22 +547,13 @@ }, { imgPath: 'bridgeConnection', - imgName: 'bridgeConnection', + imgName: '', nodeType: 'bridgeConnection', imgWidth: 50, imgHeight: 50, imgId: '10', data: {} }, - // { - // imgPath: 'dashedBox', - // imgName: 'dashedBox', - // nodeType: 'dashedBox', - // imgWidth: 60, - // imgHeight: 60, - // imgId: '10000', - // data: {} - // }, ], imagesList2: [], nodeType: '', @@ -1927,6 +1926,12 @@ createParallelBrach(x, y, dragNode) { dragNode.position(x + 320, y - dragNode.size().height / 2) const connectNode = this.createConnectNode(x + 50, y) + this.createBrach(dragNode,connectNode,x,y-50) + this.createBrach(dragNode,connectNode,x,y+50) + + return {newStartNode: connectNode, newEndNode: dragNode} + }, + createBrach(dragNode,connectNode,x,y){ const dashedBox = this.createDashedBox(x + 150, y) dragNode.setData({startNodeId: connectNode.id}) @@ -1936,7 +1941,7 @@ router: { name: 'manhattan', args: { - startDirections: ['right'], // 浠庝笅鏂瑰紑濮� + startDirections: ['top','bottom'], // 浠庝笅鏂瑰紑濮� endDirections: ['left'], // 鍚戝乏鏂圭粨鏉� }, }, @@ -1950,25 +1955,12 @@ name: 'manhattan', args: { startDirections: ['right'], // 浠庝笅鏂瑰紑濮� - endDirections: ['left'], // 鍚戝乏鏂圭粨鏉� + endDirections: ['top','bottom'], // 鍚戝乏鏂圭粨鏉� }, }, connector: {name: 'rounded'}, zIndex: -1 }) - return {newStartNode: connectNode, newEndNode: dragNode} - /* this.graph.addEdge({ - source: {cell: startNode, port: 'right1'}, - target: {cell: connectNode, port: 'left1'}, - router: {name: 'manhattan'}, - connector: {name: 'rounded'} - }) - this.graph.addEdge({ - source: {cell: dragNode, port: 'right1'}, - target: {cell: endNode, port: 'left1'}, - router: {name: 'manhattan'}, - connector: {name: 'rounded'} - })*/ }, createBridgeConnection(x, y, dragNode) { console.log(x, y, 'leftX centerY') @@ -1977,10 +1969,36 @@ const leftConnectNode = this.createConnectNode(x, y + 87) const alignCenterDashedBox = this.createDashedBox(x + 209, y + 87) - const rightConnectNode = this.createBridgeNode(x + 530, y + 87) - const leftBottomDashedBox = this.createDashedBox(x + 40, y + 160) const rightBottomDashedBox = this.createDashedBox(x + 380, y + 160) + let edgeTop = this.graph.addEdge({ + source: {cell: leftTopDashedBox}, + target: {cell: rightTopDashedBox}, + router: { + name: 'manhattan', + args: { + startDirections: ['right'], // 浠庝笅鏂瑰紑濮� + endDirections: ['left'], // 鍚戝乏鏂圭粨鏉� + }, + }, + connector: {name: 'rounded'}, + zIndex: -1 + }) + let edgeBottom = this.graph.addEdge({ + source: {cell: leftBottomDashedBox}, + target: {cell: rightBottomDashedBox}, + router: { + name: 'manhattan', + args: { + startDirections: ['right'], // 浠庝笅鏂瑰紑濮� + endDirections: ['left'], // 鍚戝乏鏂圭粨鏉� + }, + }, + connector: {name: 'rounded'}, + zIndex: -1 + }) + + const rightConnectNode = this.createBridgeNode(x + 530, y + 87, leftConnectNode.id, edgeTop.id, edgeBottom.id) rightConnectNode.setData({startNodeId: leftConnectNode.id}) leftConnectNode.setData({endNodeId: rightConnectNode.id}) @@ -2016,33 +2034,6 @@ name: 'manhattan', args: { startDirections: ['top', 'bottom'], // 浠庝笅鏂瑰紑濮� - endDirections: ['left'], // 鍚戝乏鏂圭粨鏉� - }, - }, - connector: {name: 'rounded'}, - zIndex: -1 - }) - - let edgeTop = this.graph.addEdge({ - source: {cell: leftTopDashedBox}, - target: {cell: rightTopDashedBox}, - router: { - name: 'manhattan', - args: { - startDirections: ['right'], // 浠庝笅鏂瑰紑濮� - endDirections: ['left'], // 鍚戝乏鏂圭粨鏉� - }, - }, - connector: {name: 'rounded'}, - zIndex: -1 - }) - let edgeBottom = this.graph.addEdge({ - source: {cell: leftBottomDashedBox}, - target: {cell: rightBottomDashedBox}, - router: { - name: 'manhattan', - args: { - startDirections: ['right'], // 浠庝笅鏂瑰紑濮� endDirections: ['left'], // 鍚戝乏鏂圭粨鏉� }, }, @@ -2127,7 +2118,7 @@ 'xlink:href': '/modelImg/dashedBox.svg', }, text: { - text: 'dashedBox', + text: '', fontSize: 14, refX: 0.5, refY: '100%', @@ -2163,7 +2154,7 @@ 'xlink:href': '/modelImg/connect.svg', }, text: { - text: 'connect', + text: '', fontSize: 14, refX: 0.5, refY: '100%', @@ -2177,18 +2168,19 @@ connectNode.position(x, y - connectNode.size().height / 2) return connectNode }, - createBridgeNode(x, y) { - const connectId = getUUID().toString() + createBridgeNode(x, y, connectId, edgeTopId, edgeBottomId) { const dragNodeId = getUUID().toString() let bridgeNode = this.graph.addNode({ shape: 'image', width: 30, height: 30, - id: connectId, + id: dragNodeId, data: { isSelfCreated: true, type: 'imageNodes', - endNodeId: dragNodeId, + startNodeId: connectId, + edgeTopId: edgeTopId, + edgeBottomId: edgeBottomId, dataId: '', nodeType: 'bridge', nodeTypeExt: '', -- Gitblit v1.9.1