From 664db98c9e8595ce4dd636a27f480e3a08b81ff5 Mon Sep 17 00:00:00 2001 From: xyc <jc_xiong@hotmail.com> Date: 星期五, 21 二月 2025 11:13:51 +0800 Subject: [PATCH] 新增可忽略的维修时间 --- web/src/views/modules/taskReliability/RBD-edit-img.vue | 407 +++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 251 insertions(+), 156 deletions(-) diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue index 8eb84ff..a83d7e4 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> @@ -18,7 +18,10 @@ <el-button type="primary" @click="saveDiagram()">鏆傚瓨</el-button> <el-button type="primary" @click="analyzeDiagram()">鎻愪氦</el-button> <el-button type="primary" @click="clearDiagram()">娓呯┖鍥惧舰</el-button> - <el-button type="primary" @click="layoutDiagram()">涓�閿帓鐗�</el-button> + <el-checkbox style="margin: 0 10px 0 10px" v-model="dataForm.autoLayout" :true-label="1" :false-label="0"> + 鏄惁寮�鍚竴閿帓鐗� + </el-checkbox> + <el-button type="primary" @click="layoutDiagram()" :disabled="!dataForm.autoLayout">涓�閿帓鐗�</el-button> <el-button @click="leftAlign()"> <i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i> </el-button> @@ -109,7 +112,7 @@ "text": { "refY": "100%", "textVerticalAnchor": "top", - "text": "start", + "text": "", "refY2": 4 }, "image": { @@ -232,7 +235,7 @@ "text": { "refY": "100%", "textVerticalAnchor": "top", - "text": "dashedBox", + "text": "", "refY2": 4 }, "image": { @@ -260,7 +263,7 @@ "r": 4, "magnet": true, "stroke": "#5F95FF", - "strokeWidth": 1, + "fill": "#fff", "style": { "visibility": "hidden" @@ -354,7 +357,7 @@ "text": { "refY": "100%", "textVerticalAnchor": "top", - "text": "end", + "text": "", "refY2": 4 }, "image": { @@ -514,6 +517,7 @@ }, data() { return { + canAdd: true, nodeX: '', nodeY: '', isFirstLoad: true, @@ -528,26 +532,26 @@ imagesList: [ { imgPath: 'switch', - imgName: 'switch', + imgName: '', nodeType: 'switch', - imgWidth: 50, - imgHeight: 50, - imgId: '5', - data: {} - }, - {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}}, - { - imgPath: 'parallel', - imgName: 'parallel', - nodeType: 'parallel', imgWidth: 50, imgHeight: 50, imgId: '9', data: {} }, + {imgPath: 'vote', imgName: '', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}}, + { + imgPath: 'parallel', + imgName: '', + nodeType: 'parallel', + imgWidth: 50, + imgHeight: 50, + imgId: '5', + data: {} + }, { imgPath: 'bridgeConnection', - imgName: 'bridgeConnection', + imgName: '', nodeType: 'bridgeConnection', imgWidth: 50, imgHeight: 50, @@ -575,7 +579,8 @@ publishContent: null, hasPublish: 0, urlPref: '', - nodeArr: [] + nodeArr: [], + autoLayout: 1, }, type: '', id: '', @@ -753,6 +758,7 @@ } let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params}) this.dataForm = res.data + this.dataForm.autoLayout = parseInt(this.dataForm.autoLayout) if (res.data.content != null) { console.log(this.dataForm, 'getDiagram datafrom') console.log(res.data, 'getDiagram res.data') @@ -905,30 +911,56 @@ }) 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 + if(node.getData().deviceNo > 1){ + 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 +974,13 @@ name: 'group2', graphHeight: '', layoutOptions: { - rowHeight: 90, + rowHeight: 100, }, } ], layoutOptions: { columns: 2, - columnWidth: 105, + columnWidth: 130, }, }) document.getElementById('stencilImg').appendChild(stencil.container) @@ -1002,11 +1034,13 @@ shape: 'image', //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`, width: 60, - height: 60, - id: item.dataId, // 鎵嬪姩璁剧疆鑺傜偣鐨� ID + height: 70, + //id: item.dataId, // 鎵嬪姩璁剧疆鑺傜偣鐨� ID data: { type: 'imageNodes2', dataId: item.dataId, + basicUnitNum: item.basicUnitNum, + deviceNo: 1, nodeType: item.nodeType, nodeTypeExt: item.nodeTypeExt, productType: item.productType, @@ -1030,43 +1064,68 @@ }, attrs: { image: { - 'xlink:href': `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=${item.imgPath}`, + 'xlink:href': `${window.SITE_CONFIG['apiURL']}/basicInfo/XhProductModel/getImg?token=${Cookies.get('token')}&id=${item.dataId}&t=${new Date().getTime()}`, //'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 +1225,9 @@ }) // 鐩戝惉鑺傜偣娣诲姞浜嬩欢 this.graph.on('node:added', ({node}) => { + node.setAttrs({ + title: {text: ''}, + }) if (this.isFirstLoad) { return } @@ -1174,7 +1236,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 +1549,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,33 +1580,35 @@ 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: '纭畾' }) } }) }, async layoutDiagram() { - console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()') - this.dataForm.content = JSON.stringify(this.graph.toJSON()) - this.dataForm.urlPref = window.SITE_CONFIG['apiURL'] - await this.$http['post'](`/taskReliability/ModelLine/layout`, this.dataForm).then(async res => { - if (res.msg === 'success') { - // this.$emit('refreshDataList') - // this.$alert('瑙f瀽鎴愬姛', '鎻愮ず', { - // confirmButtonText: '纭畾' - // }) - console.log(res.data, 'layoutDiagram res.data') - this.dataForm.content = res.data.content - console.log(this.dataForm.content, 'layoutDiagram dataForm.content') - this.diagramJson = JSON.parse(this.dataForm.content) - this.graph.fromJSON(this.diagramJson) - this.isFirstLoad = false; - // console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length') + if (this.dataForm.autoLayout == 1) { + console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()') + this.dataForm.content = JSON.stringify(this.graph.toJSON()) + this.dataForm.urlPref = window.SITE_CONFIG['apiURL'] + await this.$http['post'](`/taskReliability/ModelLine/layout`, this.dataForm).then(async res => { + if (res.msg === 'success') { + // this.$emit('refreshDataList') + // this.$alert('瑙f瀽鎴愬姛', '鎻愮ず', { + // confirmButtonText: '纭畾' + // }) + console.log(res.data, 'layoutDiagram res.data') + this.dataForm.content = res.data.content + console.log(this.dataForm.content, 'layoutDiagram dataForm.content') + this.diagramJson = JSON.parse(this.dataForm.content) + this.graph.fromJSON(this.diagramJson) + this.isFirstLoad = false; + // console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length') - this.graph.positionContent('left') - } - }) + this.graph.positionContent('left') + } + }) + } }, leftAlign() { const NODE = this.graph.getSelectedCells() @@ -1669,7 +1748,7 @@ let dragNodeType = dragNode.getData().nodeType let offHeight = 50 if (dragNodeType === 'node') { - offHeight = 60 + offHeight = 70 } else if (dragNodeType === 'bridgeConnection') { offHeight = 175 } else { @@ -1706,9 +1785,11 @@ inEdges[0].target = {cell: result.newStartNode.id} outEdges[0].source = {cell: result.newEndNode.id} graphNode.remove() - if (!result.canPlace) { -//璋冪敤鑷姩鎺掔増 - this.layoutDiagram() + if (this.dataForm.autoLayout == 1) { + if (!result.canPlace) { + //璋冪敤鑷姩鎺掔増 + this.layoutDiagram() + } } } } else { //骞惰缁撴瀯 @@ -1727,13 +1808,13 @@ this.getYRange(inEdges, graphNodeStartNode, pointXY) console.log(pointXY, 'new') - let minX = graphNodeStartNode.position().x + graphNode.getBBox().width + 15 - let maxX = graphNode.position().x + let minX = graphNodeStartNode.position().x + graphNode.getBBox().width + let maxX = graphNode.position().x - dragNode.getBBox().width / 2 let centerX = minX + (maxX - minX) / 2 let centerY = graphNodeY + graphNode.getBBox().height / 2 - pointXY.minY > pointXY.maxY - (graphNodeY + graphNode.getBBox().height / 2) ? pointXY.maxY + offHeight / 2 + 30 : pointXY.minY - offHeight / 2 - 30 - let result = this.addNodeAndConnect(null, dragNode, minX, centerY) + let result = this.addNodeAndConnect(null, dragNode, centerX, centerY) console.log(result, 'result111') this.graph.addEdge({ source: {cell: graphNodeStartNode}, @@ -1761,9 +1842,11 @@ connector: {name: 'rounded'}, zIndex: -1 }) - if (!result.canPlace) { -//璋冪敤鑷姩鎺掔増 - this.layoutDiagram() + if (this.dataForm.autoLayout == 1) { + if (!result.canPlace) { + //璋冪敤鑷姩鎺掔増 + this.layoutDiagram() + } } } }, @@ -1774,8 +1857,8 @@ leftTopY = centerY let dragNodeType = dragNode.getData().nodeType if (dragNodeType === 'node') { - width = 60 - height = 60 + width = 100 + height = 70 } else if (dragNodeType === 'dashedBox') { width = 60 height = 40 @@ -1784,7 +1867,7 @@ height = 175 } else { width = 270 - height = 60 + height = 70 } leftTopX = centerX - width / 2 leftTopY = centerY - height / 2 @@ -1893,8 +1976,11 @@ }) graphEdge.source = {cell: result.newEndNode.id} } - if (!result.canPlace) { - this.layoutDiagram() + if (this.dataForm.autoLayout == 1) { + if (!result.canPlace) { + //璋冪敤鑷姩鎺掔増 + this.layoutDiagram() + } } // graphEdge.remove() } @@ -1926,6 +2012,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 +2027,7 @@ router: { name: 'manhattan', args: { - startDirections: ['right'], // 浠庝笅鏂瑰紑濮� + startDirections: ['top', 'bottom'], // 浠庝笅鏂瑰紑濮� endDirections: ['left'], // 鍚戝乏鏂圭粨鏉� }, }, @@ -1949,25 +2041,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 +2055,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 +2120,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 +2204,7 @@ 'xlink:href': '/modelImg/dashedBox.svg', }, text: { - text: 'dashedBox', + text: '', fontSize: 14, refX: 0.5, refY: '100%', @@ -2162,7 +2240,7 @@ 'xlink:href': '/modelImg/connect.svg', }, text: { - text: 'connect', + text: '', fontSize: 14, refX: 0.5, refY: '100%', @@ -2176,18 +2254,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: '', @@ -2402,7 +2481,7 @@ <style> #containerImg { display: flex; - border: 1px solid #dfe3e8; + /*border: 1px solid #dfe3e8;*/ height: 400px; width: 100% !important; } @@ -2436,4 +2515,20 @@ top: 0 } + #containerImg .x6-graph-pagebreak>.x6-graph-pagebreak-horizontal { + position: absolute; + right: 0; + left: 0; + box-sizing: border-box; + height: 0; + border-top: none; + } + #containerImg .x6-graph-pagebreak>.x6-graph-pagebreak-vertical { + position: absolute; + top: 0; + bottom: 0; + box-sizing: border-box; + width: 0; + border-left: none; + } </style> -- Gitblit v1.9.1