From c2f855eb59e9d19d4957bc4cb51e3ca63d4ce4c4 Mon Sep 17 00:00:00 2001 From: jinlin <jinlin> Date: 星期二, 16 七月 2024 14:51:24 +0800 Subject: [PATCH] 修改 --- web/src/views/modules/taskReliability/RBD-edit-img.vue | 529 +++++++++------------------------------------------------- 1 files changed, 86 insertions(+), 443 deletions(-) diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue index bc9afcc..6b71cbf 100644 --- a/web/src/views/modules/taskReliability/RBD-edit-img.vue +++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue @@ -63,6 +63,8 @@ import {setHartBeat} from '@/commonJS/common'; import Cookies from 'js-cookie' import {getUUID} from '../../../../packages/utils' + // import Mousetrap from 'mousetrap' + // var Mousetrap = require('mousetrap'); // import RBDDefault from './RBD-default.json' export default { @@ -100,7 +102,7 @@ }, "size": { "width": 60, - "height": 60 + "height": 40 }, "attrs": { "text": { @@ -222,8 +224,8 @@ "y": 0 }, "size": { - "width": 100, - "height": 60 + "width": 60, + "height": 40 }, "attrs": { "text": { @@ -345,7 +347,7 @@ }, "size": { "width": 60, - "height": 60 + "height": 40 }, "attrs": { "text": { @@ -507,6 +509,8 @@ }, data() { return { + nodeX:'', + nodeY:'', isFirstLoad: true, hasMoveNode: false, hasMoveSingleNode: null, @@ -711,416 +715,6 @@ group: 'left', }, ], - }, - initJson: { - "cells": [ - { - "position": { - "x": -600, - "y": 0 - }, - "size": { - "width": 60, - "height": 60 - }, - "attrs": { - "text": { - "refY": "100%", - "textVerticalAnchor": "top", - "text": "start", - "refY2": 4 - }, - "image": { - "xlink:href": "/modelImg/start.svg" - } - }, - "visible": true, - "shape": "image", - "id": "10000", - "data": { - "type": "imageNodes", - "endNodeId": "20000", - "dataId": "", - "nodeType": "start", - "nodeTypeExt": "", - "voteNum": "" - }, - "ports": { - "groups": { - "top": { - "position": { - "name": "top" - }, - "attrs": { - "circle": { - "r": 4, - "magnet": true, - "stroke": "#5F95FF", - "strokeWidth": 1, - "fill": "#fff", - "style": { - "visibility": "hidden" - } - } - } - }, - "right": { - "position": { - "name": "right" - }, - "attrs": { - "circle": { - "r": 4, - "magnet": true, - "stroke": "#5F95FF", - "strokeWidth": 1, - "fill": "#fff", - "style": { - "visibility": "hidden" - } - } - } - }, - "bottom": { - "position": { - "name": "bottom" - }, - "attrs": { - "circle": { - "r": 4, - "magnet": true, - "stroke": "#5F95FF", - "strokeWidth": 1, - "fill": "#fff", - "style": { - "visibility": "hidden" - } - } - } - }, - "left": { - "position": { - "name": "left" - }, - "attrs": { - "circle": { - "r": 4, - "magnet": true, - "stroke": "#5F95FF", - "strokeWidth": 1, - "fill": "#fff", - "style": { - "visibility": "hidden" - } - } - } - } - }, - "items": [ - { - "id": "top1", - "group": "top" - }, - { - "id": "right1", - "group": "right" - }, - { - "id": "bottom1", - "group": "bottom" - }, - { - "id": "left1", - "group": "left" - } - ] - }, - "zIndex": 1 - }, - { - "position": { - "x": 0, - "y": 0 - }, - "size": { - "width": 100, - "height": 60 - }, - "attrs": { - "text": { - "refY": "100%", - "textVerticalAnchor": "top", - "text": "dashedBox", - "refY2": 4 - }, - "image": { - "xlink:href": "/modelImg/dashedBox.svg" - } - }, - "visible": true, - "shape": "image", - "id": 15000, - "data": { - "type": "imageNodes", - "dataId": "", - "nodeType": "dashedBox", - "nodeTypeExt": "", - "voteNum": "" - }, - "ports": { - "groups": { - "top": { - "position": { - "name": "top" - }, - "attrs": { - "circle": { - "r": 4, - "magnet": true, - "stroke": "#5F95FF", - "strokeWidth": 1, - "fill": "#fff", - "style": { - "visibility": "hidden" - } - } - } - }, - "right": { - "position": { - "name": "right" - }, - "attrs": { - "circle": { - "r": 4, - "magnet": true, - "stroke": "#5F95FF", - "strokeWidth": 1, - "fill": "#fff", - "style": { - "visibility": "hidden" - } - } - } - }, - "bottom": { - "position": { - "name": "bottom" - }, - "attrs": { - "circle": { - "r": 4, - "magnet": true, - "stroke": "#5F95FF", - "strokeWidth": 1, - "fill": "#fff", - "style": { - "visibility": "hidden" - } - } - } - }, - "left": { - "position": { - "name": "left" - }, - "attrs": { - "circle": { - "r": 4, - "magnet": true, - "stroke": "#5F95FF", - "strokeWidth": 1, - "fill": "#fff", - "style": { - "visibility": "hidden" - } - } - } - } - }, - "items": [ - { - "id": "top1", - "group": "top" - }, - { - "id": "right1", - "group": "right" - }, - { - "id": "bottom1", - "group": "bottom" - }, - { - "id": "left1", - "group": "left" - } - ] - }, - "zIndex": 2 - }, - { - "position": { - "x": 600, - "y": 0 - }, - "size": { - "width": 60, - "height": 60 - }, - "attrs": { - "text": { - "refY": "100%", - "textVerticalAnchor": "top", - "text": "end", - "refY2": 4 - }, - "image": { - "xlink:href": "/modelImg/end.svg" - } - }, - "visible": true, - "shape": "image", - "id": "20000", - "data": { - "type": "imageNodes", - "startNodeId": "10000", - "dataId": "", - "nodeType": "end", - "nodeTypeExt": "", - "voteNum": "" - }, - "ports": { - "groups": { - "top": { - "position": { - "name": "top" - }, - "attrs": { - "circle": { - "r": 4, - "magnet": true, - "stroke": "#5F95FF", - "strokeWidth": 1, - "fill": "#fff", - "style": { - "visibility": "hidden" - } - } - } - }, - "right": { - "position": { - "name": "right" - }, - "attrs": { - "circle": { - "r": 4, - "magnet": true, - "stroke": "#5F95FF", - "strokeWidth": 1, - "fill": "#fff", - "style": { - "visibility": "hidden" - } - } - } - }, - "bottom": { - "position": { - "name": "bottom" - }, - "attrs": { - "circle": { - "r": 4, - "magnet": true, - "stroke": "#5F95FF", - "strokeWidth": 1, - "fill": "#fff", - "style": { - "visibility": "hidden" - } - } - } - }, - "left": { - "position": { - "name": "left" - }, - "attrs": { - "circle": { - "r": 4, - "magnet": true, - "stroke": "#5F95FF", - "strokeWidth": 1, - "fill": "#fff", - "style": { - "visibility": "hidden" - } - } - } - } - }, - "items": [ - { - "id": "top1", - "group": "top" - }, - { - "id": "right1", - "group": "right" - }, - { - "id": "bottom1", - "group": "bottom" - }, - { - "id": "left1", - "group": "left" - } - ] - }, - "zIndex": 3 - }, - { - "shape": "edge", - "id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7", - "router": { - "name": "manhattan" - }, - "connector": { - "name": "rounded" - }, - "source": { - "cell": "10000", - "port": "right1" - }, - "target": { - "cell": 15000, - "port": "left1" - }, - "zIndex": 4 - }, - { - "shape": "edge", - "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f", - "router": { - "name": "manhattan" - }, - "connector": { - "name": "rounded" - }, - "source": { - "cell": 15000, - "port": "right1" - }, - "target": { - "cell": "20000", - "port": "left1" - }, - "zIndex": 5 - } - ] } } }, @@ -1233,6 +827,7 @@ anchor: 'center', connectionPoint: 'anchor', allowBlank: false, + allowLoop:false, // 鏄惁鍏佽鍒涘缓寰幆杩炵嚎锛屽嵆杈圭殑璧峰鑺傜偣鍜岀粓姝㈣妭鐐逛负鍚屼竴鑺傜偣锛岄粯璁や负 true snap: { radius: 20, }, @@ -1240,9 +835,10 @@ return new Shape.Edge({ attrs: { line: { + // sourceMarker: 'block', // 瀹炲績绠ご stroke: '#A2B1C3', strokeWidth: 2, - targetMarker: {fill: 'none'} + targetMarker: null } }, labels: [{ @@ -1305,7 +901,7 @@ getDropNode: (node) => { const {width, height} = node.size() if (node.getData().type && node.getData().nodeType === 'dashedBox') { - return node.clone().size(100, 60) + return node.clone().size(60, 40) } if (node.getData().type && node.getData().type === 'imageNodes2') { return node.clone({keepId: true}) @@ -1466,6 +1062,42 @@ stencil.load(imageNodes, 'group1') stencil.load(imageNodes2, 'group2') +// konami code! + // 鍗曞嚮node鑺傜偣 + // this.graph.on('node:click', ({ e, x, y, node, view}) => { + // Mousetrap.bind('up', function(e) { + // e.preventDefault(); + // node.getBBox().x + // node.getBBox().y + // setTimeout(()=>{ + // node.position(node.getBBox().x,node.getBBox().y -0.5) + // console.log(x,y,'鎸変笅浜嗏啈閿� up'); + // },100) + // }) + // Mousetrap.bind('down', function(e) { + // e.preventDefault(); + // setTimeout(()=>{ + // node.position(node.getBBox().x,node.getBBox().y+0.5) + // console.log(x,y,'鎸変笅浜嗏啌閿� down'); + // },100) + // + // }) + // Mousetrap.bind('left', function(e) { + // e.preventDefault(); + // setTimeout(()=>{ + // node.position(node.getBBox().x-0.5,node.getBBox().y) + // console.log(x,y,'鎸変笅浜嗏啇閿� left'); + // },100) + // + // }) + // Mousetrap.bind('right', function(e) { + // e.preventDefault(); + // setTimeout(()=>{ + // node.position(node.getBBox().x+0.5,node.getBBox().y) + // console.log(x,y,'鎸変笅浜嗏啋閿� right'); + // },100) + // }) + // }) this.graph.bindKey(['meta+c', 'ctrl+c'], () => { const cells = this.graph.getSelectedCells() if (cells.length) { @@ -1516,7 +1148,7 @@ }) this.graph.on('blank:click', ({cell}) => { - this.reset() + // this.reset() // this.type.value = "grid" this.type = 'grid' // this.id = cell.id @@ -1568,20 +1200,18 @@ }) //鍗曞嚮杈硅妭鐐� this.graph.on('edge:click', ({edge}) => { - this.reset() - edge.attr('line/stroke', 'orange') - edge.prop('labels/0', { - attrs: { - body: { - stroke: 'orange', - }, - }, + // this.reset() + // edge.attr('line/stroke', 'orange') + // edge.prop('labels/0', { + // attrs: { + // body: { + // stroke: 'orange', + // }, + // }, + // + // }) + }) - }) - }) - // 鍗曞嚮node鑺傜偣 - this.graph.on('node:click', ({node}) => { - }) // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌 this.graph.on('node:delete', ({view, e}) => { e.stopPropagation() @@ -1827,6 +1457,7 @@ 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') { + this.$emit('refreshDataList') this.$alert('淇濆瓨鎴愬姛', '鎻愮ず', { confirmButtonText: '纭畾' }) @@ -1839,6 +1470,17 @@ let nodeArr2 = [] // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜� for (const node of nodes) { + if(node.getData().nodeType === 'dashedBox'){ + this.$message({message: '璇ユā鍨嬩腑瀛樺湪铏氭锛屾棤娉曚繚瀛�', type: 'warning'}) + return false; // 鍙栨秷娣诲姞鑺傜偣鎿嶄綔 + } + if(node.getData().nodeType === 'vote'){ + const edges = this.graph.getConnectedEdges(node); + if(node.getData().voteNum>=edges.length){ + this.$message({message: '琛ㄥ喅鏁伴噺涓嶈兘楂樹簬璇ヨ妭鐐圭殑杩涚嚎鏁伴噺', type: 'warning'}) + return false; // 鍙栨秷娣诲姞鑺傜偣鎿嶄綔 + } + } if (node.getData().nodeType === 'node' && node.getData().productType !== 'product_xdy' && node.getData().dataId) { nodeArr2.push(node.getData().dataId) } @@ -1848,6 +1490,7 @@ this.dataForm.urlPref = window.SITE_CONFIG['apiURL'] await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => { if (res.msg === 'success') { + this.$emit('refreshDataList') this.$alert('瑙f瀽鎴愬姛', '鎻愮ず', { confirmButtonText: '纭畾' }) @@ -2087,8 +1730,8 @@ width = 60 height = 60 } else if (dragNodeType === 'dashedBox') { - width = 100 - height = 60 + width = 60 + height = 40 } else if (dragNodeType === 'bridgeConnection') { width = 550 height = 175 @@ -2245,11 +1888,11 @@ const rightTopDashedBox = this.createDashedBox(x + 380, y) const leftConnectNode = this.createConnectNode(x, y + 87) - const alignCenterDashedBox = this.createDashedBox(x + 210, y + 87) + const alignCenterDashedBox = this.createDashedBox(x + 209, y + 87) const rightConnectNode = this.createBridgeNode(x + 530, y + 87) - const leftBottomDashedBox = this.createDashedBox(x + 50, y + 160) - const rightBottomDashedBox = this.createDashedBox(x + 370, y + 160) + const leftBottomDashedBox = this.createDashedBox(x + 40, y + 160) + const rightBottomDashedBox = this.createDashedBox(x + 380, y + 160) rightConnectNode.setData({startNodeId: leftConnectNode.id}) leftConnectNode.setData({endNodeId: rightConnectNode.id}) @@ -2269,39 +1912,39 @@ source: {cell: leftConnectNode, port: 'right1'}, target: {cell: leftTopDashedBox, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) this.graph.addEdge({ source: {cell: leftConnectNode, port: 'right1'}, target: {cell: leftBottomDashedBox, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) let edgeTop = this.graph.addEdge({ source: {cell: leftTopDashedBox, port: 'right1'}, target: {cell: rightTopDashedBox, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) let edgeBottom = this.graph.addEdge({ source: {cell: leftBottomDashedBox, port: 'right1'}, target: {cell: rightBottomDashedBox, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) this.graph.addEdge({ source: {cell: rightTopDashedBox, port: 'right1'}, target: {cell: rightConnectNode, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) this.graph.addEdge({ source: {cell: rightBottomDashedBox, port: 'right1'}, target: {cell: rightConnectNode, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) this.graph.addEdge({ @@ -2324,8 +1967,8 @@ let dashedBox = this.graph.addNode({ shape: 'image', // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'), - width: 100, - height: 60, + width: 60, + height: 40, id: dashId, data: { isSelfCreated: true, -- Gitblit v1.9.1