From 298e0ee6500dd85c4d5bbcc3221ec9807639de44 Mon Sep 17 00:00:00 2001 From: limengnan <420004014@qq.com> Date: Mon, 26 Jan 2026 08:30:09 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9x6=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/components/antvx6/index.vue | 126 +++++----------- .../frontend/src/components/antvx6/viewx6.vue | 136 +++++++++++++----- .../src/views/component/scenario/index.vue | 4 +- 3 files changed, 143 insertions(+), 123 deletions(-) diff --git a/business-css/frontend/src/components/antvx6/index.vue b/business-css/frontend/src/components/antvx6/index.vue index 62ba7d7..cba5009 100644 --- a/business-css/frontend/src/components/antvx6/index.vue +++ b/business-css/frontend/src/components/antvx6/index.vue @@ -46,6 +46,7 @@ const props = defineProps({ default: {} }, }) +const isLock = ref(false) // 是否锁定 const deviceTypetype:any = ref('') // 设备类型 const isAdddevice = ref(false) // 是否添加设备 const isEditdevice = ref(false) // 是否编辑设备 @@ -56,53 +57,12 @@ const isDisplay = ref(true) // 是否显示 const isExpansionandcontraction = ref(false) // 是否显示展开收起按钮 // 为了协助代码演示 let graph: Graph -let currentArrowStyle = 'single' // 默认单箭头 -let currentLineStyle = 'solid' // 默认实线 - -// 设置箭头样式 -// function setArrowStyle(style: 'single' | 'double' | 'none', lineStyle: 'solid' | 'dashed' = 'solid') { -// currentArrowStyle = style -// currentLineStyle = lineStyle -// // 重新配置连接线 -// graph.options.connecting.createEdge = () => { -// const edge = new Shape.Edge({ -// attrs: { -// line: { -// stroke: '#A2B1C3', -// strokeWidth: 2, -// strokeDasharray: lineStyle === 'dashed' ? 5 : 0, -// targetMarker: style === 'none' ? null : { -// name: 'block', -// width: 12, -// height: 8, -// }, -// sourceMarker: style === 'double' ? { -// name: 'block', -// width: 12, -// height: 8, -// } : null, -// }, -// }, -// zIndex: 0, -// }) -// return edge -// } -// } - onMounted(() => { preWork() - if(projectInfo.value.topology != null && projectInfo.value.topology != ''){ - - } - - // #region 初始化画布 graph = new Graph({ container: document.getElementById('graph-container') as HTMLElement, grid: true, - background: { - color: '#ffffff' // Set a solid color background instead of an image - }, mousewheel: { enabled: true, zoomAtMousePosition: true, @@ -249,18 +209,7 @@ onMounted(() => { // 包含箭头样式选项 } // 监听Stencil内部的Dnd事件 - stencil.on('dnd:start', (args:any) => { - console.log('Stencil节点开始拖拽', args) - }) - - stencil.on('dnd:drag', (args:any) => { - console.log('Stencil节点拖拽中', args) - }) - - stencil.on('dnd:end', (args:any) => { - console.log('Stencil节点结束拖拽', args) - }) document .getElementById('stencil') ?.appendChild(stencil.container as HTMLElement) @@ -268,6 +217,9 @@ onMounted(() => { // 监听Graph中节点创建事件 graph.on('node:added', (args:any) => { console.log('节点已添加到画布', args) + if(isLock.value == true){ + return + } const { node } = args // 检查是否是管线节点 @@ -312,8 +264,6 @@ onMounted(() => { }else if(node.store.data.attrs.text.text == '锥底环形槽'){ deviceTypetype.value = 'ACFTank' } - - // 设置固定大小 node.size(160, 160) // 去掉背景节点 @@ -321,13 +271,13 @@ onMounted(() => { // 图片居中 node.attr('image/refX', 0) node.attr('image/refY', 0) + // node.attr('label/refX', 40) + node.attr('label/refY', 160) node.attr('image/width', 160) // 修改宽度 node.attr('image/height', 160) // 修改高度 // 删除节点上的文字 node.attr('text/text', '') node.attr('label/text', '') - - isAdddevice.value = true @@ -848,8 +798,12 @@ function copyNode() { // 复制节点 const newNode = selectedNode.value.clone() // 设置新位置（偏移50px） newNode.position(position.x + 50, position.y + 50) + deviceTypetype.value = newNode.store.data.deviceInfo.type // 添加到画布 graph.addNode(newNode) + // + // :deviceId="nodeId" :projectInfo="projectInfo" + // :deviceTypetype="deviceTypetype" isMenuShow.value = false } catch (error) { console.error('节点复制失败:', error) @@ -863,13 +817,17 @@ function closeAntvx6() { } function revokeClick(){ - if (graph.canUndo()) { - graph.undo() - } + if (graph.canUndo()) { + graph.undo() + } } function removeClick(){ if (graph.canRedo()) { + isLock.value = true graph.redo() + setTimeout(() => { + isLock.value = false + }, 500); } } function bigClick(){ @@ -906,7 +864,9 @@ const selectedDevice = ref({}) function closeAdddevice(e:any){ // 关闭新增设备弹窗 selectedDevice.value = e let retrievedNode:any = graph.getCellById(nodeId.value) - retrievedNode.store.data.deviceInfo = e + retrievedNode.attr('text/text', e.name) + retrievedNode.attr('label/text', e.name) + retrievedNode.store.data.deviceInfo = e saveDesign() isAdddevice.value = false; } @@ -925,6 +885,9 @@ function closeEditdevice(e:any){ // 关闭编辑设备弹窗 selectedDevice.value = e let retrievedNode:any = graph.getCellById(nodeId.value) retrievedNode.store.data.deviceInfo = e + retrievedNode.attr('label/refY', 160) + retrievedNode.attr('text/text', e.name) + retrievedNode.attr('label/text', e.name) isEditdevice.value = false; saveDesign() } @@ -1080,6 +1043,7 @@ function saveDesign() { // 保存设计 // type: getName(key).type, // parentName : getName(key).type == 'device' ? '('+item.deviceName +')' : '('+item.materialName +')', // parentId : getName(key).type == 'device' ? item.deviceId : item.materialId + if(cells[i].changesettings[j].deviceMaterialData[k] == null){ return } @@ -1105,18 +1069,20 @@ function saveDesign() { // 保存设计 } } - - devices.push({ - deviceId:cells[i].id, - name:cells[i].deviceInfo.name, - type:cells[i].deviceInfo.type, - properties:{}, - material: cells[i].materialInfo != null ? { - materialId:cells[i].id, - name:cells[i].materialInfo.name, - properties:tempData - }:{} - }) + if(cells[i].deviceInfo != null){ + devices.push({ + deviceId:cells[i].id, + name:cells[i].deviceInfo.name, + type:cells[i].deviceInfo.type, + properties:{}, + material: cells[i].materialInfo != null ? { + materialId:cells[i].id, + name:cells[i].materialInfo.name, + properties:tempData + }:{} + }) + } + } } console.log(devices) @@ -1160,21 +1126,7 @@ function saveDesign() { // 保存设计