From 50fc25abbcc87bf27580f54332eb55316a8ea260 Mon Sep 17 00:00:00 2001 From: limengnan <420004014@qq.com> Date: Thu, 9 Apr 2026 17:14:36 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=86=E6=9E=90=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/components/antvx6/index.vue | 302 ++++++++++++++++-- .../src/components/antvx6/readonlyx6.vue | 178 +++++------ .../src/components/antvx6/tableModel.vue | 3 +- 3 files changed, 360 insertions(+), 123 deletions(-) diff --git a/business-css/frontend/src/components/antvx6/index.vue b/business-css/frontend/src/components/antvx6/index.vue index 82d67fb..7b999a7 100644 --- a/business-css/frontend/src/components/antvx6/index.vue +++ b/business-css/frontend/src/components/antvx6/index.vue @@ -22,22 +22,7 @@ import ScenarioModel from '@/views/component/scenario/index.vue' import { addDevices } from "@/api/business/database/device"; import { saveOrUpdate} from "@/api/business/database/material"; -import img1 from '@/assets/x6/1.png' -import img2 from '@/assets/x6/2.png' -import img3 from '@/assets/x6/3.png' -import img4 from '@/assets/x6/4.png' -import img5 from '@/assets/x6/5.png' -import img6 from '@/assets/x6/6.png' -import img7 from '@/assets/x6/7.png' - -import img11 from '@/assets/x6/11.png' -import img22 from '@/assets/x6/22.png' -import img33 from '@/assets/x6/33.png' -import img44 from '@/assets/x6/44.png' -import img55 from '@/assets/x6/55.png' -import img66 from '@/assets/x6/66.png' -import img77 from '@/assets/x6/77.png' - +import { projectsById} from "@/api/business/project"; import line1 from '@/assets/x6/line1.png' import line2 from '@/assets/x6/line2.png' import line3 from '@/assets/x6/line3.png' @@ -50,6 +35,7 @@ import MaterialModels from './materialmodel.vue'; import ChangesettingsModels from './changesettings.vue'; import ConnectingwireModel from './connectingwire.vue'; +import { TurnOff } from '@element-plus/icons-vue/dist/types'; const emit = defineEmits([ 'closeAntvx6']); const props = defineProps({ projectInfo: { @@ -71,6 +57,8 @@ const isExpansionandcontraction = ref(false) // 是否显示展开收起按钮 let graph: Graph onMounted(() => { preWork() + + // #region 初始化画布 graph = new Graph({ container: document.getElementById('graph-container') as HTMLElement, @@ -745,7 +733,50 @@ graph.on('blank:mouseup', (e) => { }, true, ) - + Graph.registerNode( + 'rect-text', + { + inherit: 'rect', + width: 120, + height: 60, + markup: [ + { + tagName: 'rect', + selector: 'body', + }, + { + tagName: 'image', + selector: 'img', + }, + { + tagName: 'text', + selector: 'label', + }, + ], + attrs: { + body: { + stroke: 'transparent', + strokeWidth: 1, + fill: 'transparent', + rx: 6, + ry: 6, + }, + label: { + text: '', + fill: '#333', + fontSize: 12, + refX: 0.5, + refY: 0.5, + textAnchor: 'middle', + dy: 10, + }, + '.': { + class: 'custom-image-node', + }, + }, + }, + true, + ) const imageShapes = [ { label: '圆柱槽', @@ -901,9 +932,17 @@ graph.on('blank:mouseup', (e) => { stencil.load(lineNodes, 'group3') if (!graph || !projectInfo.value || !projectInfo.value.topology) return; graph.clearCells(); - const topology:any = JSON.parse(projectInfo.value.topology) - if(!topology.designData)return - graph.fromJSON(topology.designData); + projectsById({projectId:props.projectInfo.projectId}).then((res:any) => { + if(res.topology != null && res.topology != ''){ + projectInfo.value = res + if (!graph || !projectInfo.value || !projectInfo.value.topology) return; + graph.clearCells(); + const topology:any = JSON.parse(projectInfo.value.topology) + if(!topology.designData)return + graph.fromJSON(topology.designData); + } + + }) // #endregion }) @@ -1015,7 +1054,21 @@ function copyNode() { // 复制节点 function closeAntvx6() { - emit('closeAntvx6') + let isSaveDesign = false + const designData:any = graph.toJSON() + for(let i = 0;i { + emit('closeAntvx6') + }, 100); + } function revokeClick(){ @@ -1145,7 +1198,7 @@ function closeAdddevice(e:any){ // 关闭新增设备弹窗 retrievedNode.attr('text/text', e.name) retrievedNode.attr('label/text', e.name) retrievedNode.store.data.deviceInfo = e - saveDesign() + saveDesign(false) isAdddevice.value = false; } @@ -1166,7 +1219,7 @@ function closeEditdevice(e:any){ // 关闭编辑设备弹窗 retrievedNode.attr('text/text', e.name) retrievedNode.attr('label/text', e.name) isEditdevice.value = false; - saveDesign() + saveDesign(false) } function dialogEditdevice(){ // 关闭设备弹窗 @@ -1201,7 +1254,7 @@ function closeMaterialModel(e:any){ // 关闭物料信息弹窗 selectedMaterial.value = e let retrievedNode:any = graph.getCellById(nodeId.value) retrievedNode.store.data.materialInfo = e - saveDesign() + saveDesign(false) isMaterialModel.value = false; } @@ -1332,10 +1385,20 @@ function remarkChange(e:any){ -function saveDesign() { // 保存设计 +function saveDesign(is:any) { // 保存设计 try { // 获取画布内容并转换为JSON const designData:any = graph.toJSON() + if(is == true){ + isDisplay.value = true + for(let i = 0;i0){ cells = designData.cells @@ -1539,10 +1602,184 @@ copyNodeInfo.value.store.data.attrs.label.text = copyDeviceInfo.value.name graph.addNode(copyNodeInfo.value) isLock.value = false loading.value = false - saveDesign() + saveDesign(false) isCopy.value = false } + + +function isDisplayClick(){ + let tempGraph:any = graph.toJSON().cells + if(isDisplay.value == false){ + isDisplay.value = true + for(let i = 0;i { + let num = -1 + let tempInfo = {...item.deviceInfo} + if(tempInfo.size != null && tempInfo.size != ''){ + tempInfo = {...tempInfo, ...JSON.parse(tempInfo.size)} + } + if(item.materialInfo != null && item.materialInfo.materialId != null){ + tempInfo = {...tempInfo,...item.materialInfo} + + + } + for (const key in tempInfo) { + if (!Object.hasOwn(tempInfo, key)) continue; + + const element = tempInfo[key]; + if(getName(key) != '' && tempInfo[key] != null){ + if(isDisplay.value == true){ + return + } + num = num + 1 + graph.addNode({ + shape: 'rect-text', + x: item.position.x, + y: item.position.y + 153 + num * 25, + width: 260, + height: 30, + // label: data[i].name + '：' + data[i].value, + attrs: { + body: { + stroke: 'transparent', + fill: 'transparent', + strokeWidth: 1, + }, + label: { + textAnchor: 'left', + refX: 0, + text: getName(key) + '：' + element, + textWrap: { + width: 250, + height: 30, + ellipsis: true, + }, + }, + text: { + text: '', + fill: '#363636', // 蓝色文字 + fontSize: 12, + }, + }, + }) + } + } + }) + isLock.value = false + } + +} + +function appendAttrText(key:any,element:any){ + + +} +function getName(code:any) { + let name = '' + switch (code) { + case 'width': + return name = "宽度cm"; + break; + case 'outer_diameter': + return name = "外径cm"; + break; + case 'height': + return name = "高度cm"; + break; + case 'length': + return name = "长度cm"; + break; + case 'diameter': + return name = "外径cm"; + break; + case 'volume': + return name = "体积（单位：L）"; + break; + case 'flow_rate': + return name = "流量（单位：m3/h）"; + break; + case 'flowRate': + return name = "流量（单位：m3/h）"; + break; + case 'pulse_velocity': + return name = "脉冲速度（单位：Hz）"; + break; + case 'pulseVelocity': + return name = "脉冲速度（单位：Hz）"; + break; + case 'u_concentration': + return name = "铀浓度（g/L）"; + break; + case 'uConcentration': + return name = "铀浓度（g/L）"; + break; + case 'uo2_density': + return name = "氧化铀密度（g/cm3）"; + break; + case 'uo2Density': + return name = "氧化铀密度（g/cm3）"; + break; + case 'u_enrichment': + return name = "铀富集度（%）"; + break; + case 'uEnrichment': + return name = "铀富集度（%）"; + break; + case 'pu_concentration': + return name = "钚浓度（g/L）"; + break; + case 'puConcentration': + return name = "钚浓度（g/L）"; + break; + case 'puo2_density': + return name = "氧化钚密度（g/cm3）"; + break; + case 'puo2Density': + return name = "氧化钚密度（g/cm3）"; + break; + case 'pu_isotope': + return name = "钚同位素比例（PU-240占比）%"; + break; + case 'puIsotope': + return name = "钚同位素比例（PU-240占比）%"; + break; + case 'hno3_acidity': + return name = "硝酸酸度（mol/L）"; + break; + case 'hno3Acidity': + return name = "硝酸酸度（mol/L）"; + break; + case 'h2c2o4_concentration': + return name = "草酸浓度（mol/L）"; + break; + case 'h2c2o4Concentration': + return name = "草酸浓度（mol/L）"; + break; + case 'organic_ratio': + return name = "有机相比例%"; + break; + case 'organicRatio': + return name = "有机相比例%"; + break; + case 'moisture_content': + return name = "含水率%"; + break; + case 'moistureContent': + return name = "含水率%"; + break; + default: + return name = ""; + } + return name + } diff --git a/business-css/frontend/src/components/antvx6/readonlyx6.vue b/business-css/frontend/src/components/antvx6/readonlyx6.vue index 7ad698c..d4f445f 100644 --- a/business-css/frontend/src/components/antvx6/readonlyx6.vue +++ b/business-css/frontend/src/components/antvx6/readonlyx6.vue @@ -214,100 +214,100 @@ onMounted(() => { true, ) Graph.registerNode( - 'image-node', - { - inherit: 'rect', - width: 120, - height: 60, - markup: [ - { - tagName: 'rect', - selector: 'body', - }, - { - tagName: 'image', - selector: 'img', - }, - { - tagName: 'text', - selector: 'label', - }, - ], - attrs: { - body: { - stroke: 'transparent', - strokeWidth: 1, - fill: 'transparent', - rx: 6, - ry: 6, - }, - img: { - 'xlink:href': 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', - width: 24, - height: 24, - x: 0, - y: 0, - }, - label: { - text: 'Image Node', - fill: '#333', - fontSize: 12, - refX: 0.5, - refY: 0.5, - textAnchor: 'middle', - dy: 10, - }, - '.': { - class: 'custom-image-node', + 'image-node', + { + inherit: 'rect', + width: 120, + height: 60, + markup: [ + { + tagName: 'rect', + selector: 'body', + }, + { + tagName: 'image', + selector: 'img', + }, + { + tagName: 'text', + selector: 'label', + }, + ], + attrs: { + body: { + stroke: 'transparent', + strokeWidth: 1, + fill: 'transparent', + rx: 6, + ry: 6, + }, + img: { + 'xlink:href': 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', + width: 24, + height: 24, + x: 0, + y: 0, + }, + label: { + text: 'Image Node', + fill: '#333', + fontSize: 12, + refX: 0.5, + refY: 0.5, + textAnchor: 'middle', + dy: 10, + }, + '.': { + class: 'custom-image-node', + }, }, }, - }, - true, -) + true, + ) Graph.registerNode( - 'rect-text', - { - inherit: 'rect', - width: 120, - height: 60, - markup: [ - { - tagName: 'rect', - selector: 'body', - }, - { - tagName: 'image', - selector: 'img', - }, - { - tagName: 'text', - selector: 'label', - }, - ], - attrs: { - body: { - stroke: 'transparent', - strokeWidth: 1, - fill: 'transparent', - rx: 6, - ry: 6, - }, - label: { - text: '', - fill: '#333', - fontSize: 12, - refX: 0.5, - refY: 0.5, - textAnchor: 'middle', - dy: 10, - }, - '.': { - class: 'custom-image-node', + 'rect-text', + { + inherit: 'rect', + width: 120, + height: 60, + markup: [ + { + tagName: 'rect', + selector: 'body', + }, + { + tagName: 'image', + selector: 'img', + }, + { + tagName: 'text', + selector: 'label', + }, + ], + attrs: { + body: { + stroke: 'transparent', + strokeWidth: 1, + fill: 'transparent', + rx: 6, + ry: 6, + }, + label: { + text: '', + fill: '#333', + fontSize: 12, + refX: 0.5, + refY: 0.5, + textAnchor: 'middle', + dy: 10, + }, + '.': { + class: 'custom-image-node', + }, }, }, - }, - true, -) + true, + ) diff --git a/business-css/frontend/src/components/antvx6/tableModel.vue b/business-css/frontend/src/components/antvx6/tableModel.vue index 8d75d2c..f7db3b0 100644 --- a/business-css/frontend/src/components/antvx6/tableModel.vue +++ b/business-css/frontend/src/components/antvx6/tableModel.vue @@ -86,8 +86,7 @@ function downloadFile(obj :any, name :any, suffix :any) { function exportExportsClick(){ exportAllExports(props.scenarioId,props.deviceId).then((response:any) => { - debugger - downloadFile(response, '结果数据' , 'xlsx') + downloadFile(response, '结果数据' , 'xlsx') }); }