From d3b9bb68b9cf89b3677b2f393559dd52886efe4a Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 27 Dec 2023 20:56:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=88=86=E7=BB=84=E4=BD=8D=E7=BD=AE=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D=E4=B8=8D=E5=87=86=E7=A1=AE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/Shape.vue       |  2 -
 .../custom-component/common/CanvasGroup.vue   | 13 ++--
 .../custom-component/group/GroupPreview.vue   | 73 +++++++++++++++++++
 core/core-frontend/src/utils/DeShortcutKey.ts |  1 -
 core/core-frontend/src/utils/canvasUtils.ts   |  6 ++
 5 files changed, 85 insertions(+), 10 deletions(-)
 create mode 100644 core/core-frontend/src/custom-component/group/GroupPreview.vue

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 dcf3108462..ef870cb74e 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -371,9 +371,7 @@ const areaDataPush = component => {
   }
 }
 const handleDbClick = e => {
-  console.log('111=0' + element.value.canvasId)
   if (element.value.canvasId !== 'canvas-main') {
-    console.log('111=1' + canvasActive.value)
     dvMainStore.setCurComponent({ component: element.value, index: index.value })
   }
 }
diff --git a/core/core-frontend/src/custom-component/common/CanvasGroup.vue b/core/core-frontend/src/custom-component/common/CanvasGroup.vue
index 15eefa3399..09e75892b8 100644
--- a/core/core-frontend/src/custom-component/common/CanvasGroup.vue
+++ b/core/core-frontend/src/custom-component/common/CanvasGroup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { toRefs } from 'vue'
-import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import CanvasCore from '@/components/data-visualization/canvas/CanvasCore.vue'
+import GroupPreview from '@/custom-component/group/GroupPreview.vue'
 
 const props = defineProps({
   canvasStyleData: {
@@ -63,16 +63,15 @@ const { element, isEdit, showPosition, canvasStyleData, canvasViewInfo, dvInfo,
     :canvas-id="canvasId"
     :canvas-active="element['canvasActive']"
   ></canvas-core>
-  <de-preview
+  <group-preview
     v-else
     :ref="'dashboardPreview'"
     :dv-info="dvInfo"
-    :component-data="componentData"
-    :canvas-style-data="canvasStyleData"
-    :canvas-view-info="canvasViewInfo"
-    :canvas-id="canvasId"
+    :element="element"
+    :search-count="searchCount"
+    :prop-value="element.propValue"
     :show-position="showPosition"
-  ></de-preview>
+  ></group-preview>
 </template>
 
 <style lang="less" scoped></style>
diff --git a/core/core-frontend/src/custom-component/group/GroupPreview.vue b/core/core-frontend/src/custom-component/group/GroupPreview.vue
new file mode 100644
index 0000000000..e60ae2e4f9
--- /dev/null
+++ b/core/core-frontend/src/custom-component/group/GroupPreview.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
+import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
+const dvMainStore = dvMainStoreWithOut()
+const { canvasViewInfo } = storeToRefs(dvMainStore)
+
+const props = defineProps({
+  propValue: {
+    type: Array,
+    default: () => []
+  },
+  element: {
+    type: Object,
+    default() {
+      return {
+        propValue: null
+      }
+    }
+  },
+  showPosition: {
+    type: String,
+    required: false,
+    default: 'canvas'
+  },
+  dvInfo: {
+    type: Object,
+    required: true
+  },
+  // 仪表板刷新计时器
+  searchCount: {
+    type: Number,
+    required: false,
+    default: 0
+  }
+})
+
+const { propValue, dvInfo, searchCount } = toRefs(props)
+</script>
+
+<template>
+  <div class="group">
+    <div>
+      <component-wrapper
+        v-for="(item, index) in propValue"
+        :id="'component' + item.id"
+        :view-info="canvasViewInfo[item.id]"
+        :key="index"
+        :config="item"
+        :index="index"
+        :dv-info="dvInfo"
+        :style="item.groupStyle"
+        :show-position="showPosition"
+        :search-count="searchCount"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.group {
+  & > div {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .component {
+      position: absolute;
+    }
+  }
+}
+</style>
diff --git a/core/core-frontend/src/utils/DeShortcutKey.ts b/core/core-frontend/src/utils/DeShortcutKey.ts
index 665f3bbb26..0a6f846971 100644
--- a/core/core-frontend/src/utils/DeShortcutKey.ts
+++ b/core/core-frontend/src/utils/DeShortcutKey.ts
@@ -125,7 +125,6 @@ export function listenGlobalKeyDown() {
         lockMap[keyCode]()
       }
     }
-    console.log('1111=isCtrlOrCommandDown' + isCtrlOrCommandDown + ';isShiftDown=' + isShiftDown)
   }
 
   window.onkeyup = e => {
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index fda4c11916..0f31d450ed 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -141,8 +141,14 @@ export function canvasSave(callBack) {
     if (item.component === 'UserView') {
       item.linkageFilters = []
     } else if (item.component === 'Group') {
+      const groupStyle = item.style
       item.propValue.forEach(groupItem => {
         groupItem.linkageFilters = []
+        // 计算groupStyle
+        groupItem.groupStyle.left = groupItem.style.left / groupStyle.width
+        groupItem.groupStyle.top = groupItem.style.top / groupStyle.height
+        groupItem.groupStyle.width = groupItem.style.width / groupStyle.width
+        groupItem.groupStyle.height = groupItem.style.height / groupStyle.height
       })
     } else if (item.component === 'DeTabs') {
       item.propValue.forEach(tabItem => {