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 bde1ea4b4c..b6f959c181 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue @@ -644,6 +644,19 @@ const handleMouseDownOnPoint = (point, e) => { const needLockProportion = isNeedLockProportion() const originRadio = curComponent.value.aspectRatio + const baseGroupComponentsRadio = {} + // 计算初始状态 分组内组件宽高占比 + if (areaData.value.components.length > 0) { + areaData.value.components.forEach(groupComponent => { + baseGroupComponentsRadio[groupComponent.id] = { + topRadio: (groupComponent.style.top - style.top) / style.height, + leftRadio: (groupComponent.style.left - style.left) / style.width, + widthRadio: groupComponent.style.width / style.width, + heightRadio: groupComponent.style.height / style.height + } + }) + } + const move = moveEvent => { // 第一次点击时也会触发 move,所以会有“刚点击组件但未移动,组件的大小却改变了”的情况发生 // 因此第一次点击时不触发 move 事件 @@ -684,7 +697,7 @@ const handleMouseDownOnPoint = (point, e) => { } calculateRadioComponentPositionAndSize(point, style, symmetricPoint) - dvMainStore.setShapeStyle(style, areaData.value.components, 'resize') + dvMainStore.setShapeStyle(style, areaData.value.components, 'resize', baseGroupComponentsRadio) // 矩阵逻辑 如果当前是仪表板(矩阵模式)则要进行矩阵重排 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 d3e44a30d1..80a0214186 100644 --- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts +++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts @@ -258,7 +258,8 @@ export const dvMainStore = defineStore('dataVisualization', { setShapeStyle( { top, left, width, height, rotate }, areaDataComponents = [], - moveType = 'move' + moveType = 'move', + baseGroupComponentsRadio = {} ) { if (this.curComponent.component === 'GroupArea' && areaDataComponents.length > 0) { const topOffset = top - this.curComponent.style.top @@ -274,10 +275,13 @@ export const dvMainStore = defineStore('dataVisualization', { }) } 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 + const componentRadio = baseGroupComponentsRadio[component.id] + if (componentRadio) { + component.style.top = top + height * componentRadio.topRadio + component.style.left = left + width * componentRadio.leftRadio + component.style.width = width * componentRadio.widthRadio + component.style.height = height * componentRadio.heightRadio + } }) } }