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 | 159 +++++++++++++++++++++++++++++++++++----------------- 1 files changed, 107 insertions(+), 52 deletions(-) diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue index b96eb43..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> @@ -514,6 +514,7 @@ }, data() { return { + canAdd: true, nodeX: '', nodeY: '', isFirstLoad: true, @@ -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) @@ -1941,12 +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) + this.createBrach(dragNode, connectNode, x, y - 50) + this.createBrach(dragNode, connectNode, x, y + 50) return {newStartNode: connectNode, newEndNode: dragNode} }, - createBrach(dragNode,connectNode,x,y){ + createBrach(dragNode, connectNode, x, y) { const dashedBox = this.createDashedBox(x + 150, y) dragNode.setData({startNodeId: connectNode.id}) @@ -1956,7 +2011,7 @@ router: { name: 'manhattan', args: { - startDirections: ['top','bottom'], // 浠庝笅鏂瑰紑濮� + startDirections: ['top', 'bottom'], // 浠庝笅鏂瑰紑濮� endDirections: ['left'], // 鍚戝乏鏂圭粨鏉� }, }, @@ -1970,7 +2025,7 @@ name: 'manhattan', args: { startDirections: ['right'], // 浠庝笅鏂瑰紑濮� - endDirections: ['top','bottom'], // 鍚戝乏鏂圭粨鏉� + endDirections: ['top', 'bottom'], // 鍚戝乏鏂圭粨鏉� }, }, connector: {name: 'rounded'}, -- Gitblit v1.9.1