diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue index d35f8a7278..bde1ea4b4c 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue @@ -55,7 +55,6 @@
{ isFirst = false } // 修改当前组件样式 - dvMainStore.setShapeStyle(pos, areaData.value.components) + dvMainStore.setShapeStyle(pos, areaData.value.components, 'move') // 等更新完当前组件的样式并绘制到屏幕后再判断是否需要吸附 - // GroupArea是分组视括租金 不需要进行吸附 + // GroupArea是分组视括组件 不需要进行吸附 // 如果不使用 nextTick,吸附后将无法移动 if (!isGroupArea.value) { nextTick(() => { @@ -685,7 +684,7 @@ const handleMouseDownOnPoint = (point, e) => { } calculateRadioComponentPositionAndSize(point, style, symmetricPoint) - dvMainStore.setShapeStyle(style) + dvMainStore.setShapeStyle(style, areaData.value.components, 'resize') // 矩阵逻辑 如果当前是仪表板(矩阵模式)则要进行矩阵重排 dashboardActive.value && emit('onResizing', moveEvent) //如果当前组件是Group分组 则要进行内部组件深度计算 diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts index 490bcd851e..d3e44a30d1 100644 --- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts +++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts @@ -255,18 +255,31 @@ export const dvMainStore = defineStore('dataVisualization', { this.bashMatrixInfo = bashMatrixInfo }, - setShapeStyle({ top, left, width, height, rotate }, areaDataComponents = []) { + setShapeStyle( + { top, left, width, height, rotate }, + areaDataComponents = [], + moveType = 'move' + ) { if (this.curComponent.component === 'GroupArea' && areaDataComponents.length > 0) { const topOffset = top - this.curComponent.style.top const leftOffset = left - this.curComponent.style.left const widthOffset = width - this.curComponent.style.width const heightOffset = height - this.curComponent.style.height - areaDataComponents.forEach(component => { - component.style.top = component.style.top + topOffset - component.style.left = component.style.left + leftOffset - component.style.width = component.style.width + widthOffset - component.style.height = component.style.height + heightOffset - }) + if (moveType === 'move') { + areaDataComponents.forEach(component => { + component.style.top = component.style.top + topOffset + component.style.left = component.style.left + leftOffset + component.style.width = component.style.width + widthOffset + component.style.height = component.style.height + heightOffset + }) + } else { + areaDataComponents.forEach(component => { + component.style.top = component.style.top + topOffset + component.style.left = component.style.left + leftOffset + component.style.width = component.style.width + widthOffset + component.style.height = component.style.height + heightOffset + }) + } } if (this.dvInfo.type === 'dashboard') { if (top) this.curComponent.style.top = top < 0 ? 0 : Math.round(top)