Merge pull request #7422 from dataease/pr@dev-v2@fix_group-position

fix: 修改大屏预览分组位置定位不准确问题

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

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>

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>

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 => {

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 => {