From 79eab76ac1b4b77696c92d72cfbde1e122c4c28f Mon Sep 17 00:00:00 2001 From: jinlin <jinlin> Date: 星期一, 28 十月 2024 17:58:44 +0800 Subject: [PATCH] 关于修改可靠性产品重复 --- web/src/views/modules/taskReliability/RBD-edit-img.vue | 110 +++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 70 insertions(+), 40 deletions(-) diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue index accfeeb..74bf82b 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> @@ -906,14 +906,16 @@ }) 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().type === 'imageNodes2') { 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) { @@ -928,8 +930,8 @@ for (let i = 1; i <= node.getData().basicUnitNum; i++) { if (deviceNoArr.findIndex(item => item === i) === -1) { no = i - node.getData().deviceNo = i if (node.getData().basicUnitNum>1){ + node.getData().deviceNo = i node.attr('text/text', node.attr('text/text') + '-' + i) } break @@ -951,7 +953,7 @@ }, title: '', target: this.graph, - stencilGraphWidth: 200, + stencilGraphWidth: 240, stencilGraphHeight: 280, collapsable: true, groups: [ @@ -965,13 +967,13 @@ name: 'group2', graphHeight: '', layoutOptions: { - rowHeight: 90, + rowHeight: 100, }, } ], layoutOptions: { columns: 2, - columnWidth: 105, + columnWidth: 130, }, }) document.getElementById('stencilImg').appendChild(stencil.container) @@ -1025,7 +1027,7 @@ shape: 'image', //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`, width: 60, - height: 60, + height: 70, //id: item.dataId, // 鎵嬪姩璁剧疆鑺傜偣鐨� ID data: { type: 'imageNodes2', @@ -1055,43 +1057,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}, }), ) @@ -1191,6 +1218,9 @@ }) // 鐩戝惉鑺傜偣娣诲姞浜嬩欢 this.graph.on('node:added', ({node}) => { + node.setAttrs({ + title: { text: '' }, + }) if (this.isFirstLoad) { return } @@ -1709,7 +1739,7 @@ let dragNodeType = dragNode.getData().nodeType let offHeight = 50 if (dragNodeType === 'node') { - offHeight = 60 + offHeight = 70 } else if (dragNodeType === 'bridgeConnection') { offHeight = 175 } else { @@ -1767,13 +1797,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}, @@ -1814,8 +1844,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 @@ -1824,7 +1854,7 @@ height = 175 } else { width = 270 - height = 60 + height = 70 } leftTopX = centerX - width / 2 leftTopY = centerY - height / 2 -- Gitblit v1.9.1