From 85e8c7af0a03795490e1bba458018fe9e90499f8 Mon Sep 17 00:00:00 2001 From: xyc <jc_xiong@hotmail.com> Date: 星期一, 28 十月 2024 13:08:14 +0800 Subject: [PATCH] 新增可靠性仿真评估算法库进程管理功能 --- web/src/views/modules/taskReliability/RBD-edit-img.vue | 285 ++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 174 insertions(+), 111 deletions(-) diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue index 21089cb..b818414 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> @@ -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": { @@ -514,6 +514,7 @@ }, data() { return { + canAdd: true, nodeX: '', nodeY: '', isFirstLoad: true, @@ -528,17 +529,17 @@ imagesList: [ { imgPath: 'switch', - imgName: '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: 'parallel', - imgName: 'parallel', + imgName: '', nodeType: 'parallel', imgWidth: 50, imgHeight: 50, @@ -547,7 +548,7 @@ }, { imgPath: 'bridgeConnection', - imgName: 'bridgeConnection', + imgName: '', nodeType: 'bridgeConnection', imgWidth: 50, imgHeight: 50, @@ -905,30 +906,54 @@ }) 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().nodeType === 'dashedBox') { - return node.clone().size(60, 40) - } if (node.getData().type && node.getData().type === 'imageNodes2') { - return node.clone({keepId: true}) - } else { - return node.clone() - } - }, - validateNode: (node) => { - const existingNodes = this.graph.getNodes(); // 鑾峰彇鐢诲竷涓婃墍鏈夎妭鐐� - for (const existingNode of existingNodes) { - if (existingNode.id === node.id) { - this.$message({message: '璇ヨ澶囪妭鐐瑰凡鍦ㄧ敾甯冧笂锛屾棤娉曞啀娆$粯鍒�', type: 'warning'}) - return false; // 鍙栨秷娣诲姞鑺傜偣鎿嶄綔 + 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) { + if (node2.getData().dataId == node.getData().dataId) { + deviceNoArr.push(node2.getData().deviceNo) + } + } + } + let no = 0 + console.log(node, 'node') + console.log(deviceNoArr, 'deviceNoArr') + for (let i = 1; i <= node.getData().basicUnitNum; i++) { + if (deviceNoArr.findIndex(item => item === i) === -1) { + no = i + if (node.getData().basicUnitNum>1){ + node.getData().deviceNo = i + node.attr('text/text', node.attr('text/text') + '-' + i) + } + break + } + } + if (no === 0) { + this.canAdd = false } } + return node.clone() + + }, + validateNode: (node) => { + if (!this.canAdd) { + this.$message({message: '璇ヨ澶囪妭鐐瑰凡鍦ㄧ敾甯冧笂锛屾棤娉曞啀娆$粯鍒�', type: 'warning'}) + return false + } + }, title: '', target: this.graph, - stencilGraphWidth: 200, + stencilGraphWidth: 240, stencilGraphHeight: 280, collapsable: true, groups: [ @@ -942,13 +967,13 @@ name: 'group2', graphHeight: '', layoutOptions: { - rowHeight: 90, + rowHeight: 100, }, } ], layoutOptions: { columns: 2, - columnWidth: 105, + columnWidth: 130, }, }) document.getElementById('stencilImg').appendChild(stencil.container) @@ -1001,12 +1026,14 @@ this.graph.createNode({ shape: 'image', //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`, - width: 60, - height: 60, - id: item.dataId, // 鎵嬪姩璁剧疆鑺傜偣鐨� ID + width: 100, + height: 70, + //id: item.dataId, // 鎵嬪姩璁剧疆鑺傜偣鐨� ID data: { type: 'imageNodes2', dataId: item.dataId, + basicUnitNum: item.basicUnitNum, + deviceNo: 0, nodeType: item.nodeType, nodeTypeExt: item.nodeTypeExt, productType: item.productType, @@ -1033,40 +1060,65 @@ 'xlink:href': `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=${item.imgPath}`, //'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}, }), ) @@ -1166,6 +1218,9 @@ }) // 鐩戝惉鑺傜偣娣诲姞浜嬩欢 this.graph.on('node:added', ({node}) => { + node.setAttrs({ + title: { text: '' }, + }) if (this.isFirstLoad) { return } @@ -1174,7 +1229,7 @@ } const nodeType = node.getData().nodeType; // 鑾峰彇鑺傜偣鐨勭被鍨� const nodeObj = node - console.log(123) + console.log(node.id, 'node.id') let intersectNode = this.findIntersectsNode(node) if (intersectNode) { // 褰撴湁鑺傜偣鐩镐氦 ==>骞惰 this.addBranch(intersectNode, nodeObj) @@ -1487,14 +1542,29 @@ const nodes = this.graph.getNodes() for (const node of nodes) { if (node.getData().nodeType === 'dashedBox') { - this.$message({message: '璇ユā鍨嬩腑瀛樺湪铏氭锛屾棤娉曚繚瀛�', type: 'warning'}) - return false; // 鍙栨秷娣诲姞鑺傜偣鎿嶄綔 + this.$message({message: '璇ユā鍨嬩腑瀛樺湪铏氭锛屾棤娉曟彁浜�', type: 'warning'}) + return false; } if (node.getData().nodeType === 'vote') { - const edges = this.graph.getConnectedEdges(node); + if (node.getData().voteNum === null || node.getData().voteNum === '') { + this.$message({message: '琛ㄥ喅鑺傜偣鐨勮〃鍐虫暟閲忔湭璁剧疆', type: 'warning'}) + return false; + } + const edges = this.graph.getIncomingEdges(node); if (node.getData().voteNum >= edges.length) { - this.$message({message: '琛ㄥ喅鏁伴噺涓嶈兘楂樹簬璇ヨ妭鐐圭殑杩涚嚎鏁伴噺', type: 'warning'}) - return false; // 鍙栨秷娣诲姞鑺傜偣鎿嶄綔 + this.$message({message: '琛ㄥ喅鑺傜偣鐨勮〃鍐虫暟閲忓繀椤诲皬浜庤鑺傜偣鐨勮繘绾挎暟閲�', type: 'warning'}) + return false; + } + } + if (node.getData().nodeType === 'switch') { + if (node.getData().voteNum === null || node.getData().voteNum === '') { + this.$message({message: '鏃佽仈鑺傜偣鐨勫浠芥暟閲忔湭璁剧疆', type: 'warning'}) + return false; + } + const edges = this.graph.getIncomingEdges(node); + if (node.getData().voteNum >= edges.length) { + this.$message({message: '鏃佽仈鑺傜偣鐨勫浠芥暟閲忓繀椤诲皬浜庤鑺傜偣鐨勮繘绾挎暟閲�', type: 'warning'}) + return false; } } } @@ -1503,7 +1573,7 @@ await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => { if (res.msg === 'success') { this.$emit('refreshDataList') - this.$alert('瑙f瀽鎴愬姛', '鎻愮ず', { + this.$alert('鎻愪氦鎴愬姛', '鎻愮ず', { confirmButtonText: '纭畾' }) } @@ -1926,6 +1996,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}) @@ -1935,7 +2011,7 @@ router: { name: 'manhattan', args: { - startDirections: ['right'], // 浠庝笅鏂瑰紑濮� + startDirections: ['top', 'bottom'], // 浠庝笅鏂瑰紑濮� endDirections: ['left'], // 鍚戝乏鏂圭粨鏉� }, }, @@ -1949,25 +2025,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') @@ -1976,10 +2039,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}) @@ -2015,33 +2104,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'], // 鍚戝乏鏂圭粨鏉� }, }, @@ -2126,7 +2188,7 @@ 'xlink:href': '/modelImg/dashedBox.svg', }, text: { - text: 'dashedBox', + text: '', fontSize: 14, refX: 0.5, refY: '100%', @@ -2162,7 +2224,7 @@ 'xlink:href': '/modelImg/connect.svg', }, text: { - text: 'connect', + text: '', fontSize: 14, refX: 0.5, refY: '100%', @@ -2176,18 +2238,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