From 9223a881122475bb626430a5ab0ca63a357e13b9 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 16 Apr 2024 12:03:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E4=BC=98=E5=8C=96=E6=89=B9=E9=87=8F=E6=94=B9=E5=8F=98?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=A4=A7=E5=B0=8F=E9=80=BB=E8=BE=91=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BA=E6=8C=89=E7=85=A7=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8D=A0=E6=AF=94=E6=94=BE=E5=A4=A7=E7=BC=A9=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/Shape.vue           | 15 ++++++++++++++-
 .../store/modules/data-visualization/dvMain.ts    | 14 +++++++++-----
 2 files changed, 23 insertions(+), 6 deletions(-)

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
+            }
           })
         }
       }