refactor(数据大屏): 优化Tab内部画布，防止内部组件变形比例不协调问题

core/core-frontend/src/components/data-visualization/canvas/DePreview.vue

@@ -94,8 +94,7 @@ const cellHeight = ref(10)
 const userViewEnlargeRef = ref(null)
 const searchCount = ref(0)
 const refreshTimer = ref(null)
-const userInfo = ref(null)
-
+const renderReady = ref(false)
 const dashboardActive = computed(() => {
   return dvInfo.value.type === 'dashboard'
 })
@@ -193,6 +192,14 @@ const resetLayout = () => {
       //div容器获取tableBox.value.clientWidth
       let canvasWidth = previewCanvas.value.clientWidth
       let canvasHeight = previewCanvas.value.clientHeight
+      console.log(
+        '===canvasId=' +
+          canvasId.value +
+          ';canvasWidth =' +
+          canvasWidth +
+          ';canvasHeight =' +
+          canvasHeight
+      )
       scaleWidthPoint.value = (canvasWidth * 100) / canvasStyleData.value.width
       scaleHeightPoint.value = (canvasHeight * 100) / canvasStyleData.value.height
       scaleMin.value = isDashboard()
@@ -214,6 +221,7 @@ const resetLayout = () => {
           scaleMinHeight
         )
       }
+      renderReady.value = true
       emits('onResetLayout')
     }
   })
@@ -398,26 +406,28 @@ defineExpose({
       :canvas-style-data="canvasStyleData"
       :component-data="baseComponentData"
     ></canvas-opt-bar>
-    <ComponentWrapper
-      v-for="(item, index) in baseComponentData"
-      v-show="item.isShow"
-      :active="item.id === (curComponent || {})['id']"
-      :canvas-id="canvasId"
-      :canvas-style-data="canvasStyleData"
-      :dv-info="dvInfo"
-      :canvas-view-info="canvasViewInfo"
-      :view-info="canvasViewInfo[item.id]"
-      :key="index"
-      :config="item"
-      :style="getShapeItemShowStyle(item)"
-      :show-position="showPosition"
-      :search-count="searchCount"
-      :scale="mobileInPc ? 100 : scaleMin"
-      :is-selector="props.isSelector"
-      @userViewEnlargeOpen="userViewEnlargeOpen($event, item)"
-      @datasetParamsInit="datasetParamsInit(item)"
-      @onPointClick="onPointClick"
-    />
+    <template v-if="renderReady">
+      <ComponentWrapper
+        v-for="(item, index) in baseComponentData"
+        v-show="item.isShow"
+        :active="item.id === (curComponent || {})['id']"
+        :canvas-id="canvasId"
+        :canvas-style-data="canvasStyleData"
+        :dv-info="dvInfo"
+        :canvas-view-info="canvasViewInfo"
+        :view-info="canvasViewInfo[item.id]"
+        :key="index"
+        :config="item"
+        :style="getShapeItemShowStyle(item)"
+        :show-position="showPosition"
+        :search-count="searchCount"
+        :scale="mobileInPc ? 100 : scaleMin"
+        :is-selector="props.isSelector"
+        @userViewEnlargeOpen="userViewEnlargeOpen($event, item)"
+        @datasetParamsInit="datasetParamsInit(item)"
+        @onPointClick="onPointClick"
+      />
+    </template>
     <user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>
   </div>
   <dataset-params-component ref="customDatasetParamsRef"></dataset-params-component>

core/core-frontend/src/components/data-visualization/canvas/Shape.vue

@@ -114,7 +114,7 @@ import Icon from '@/components/icon-custom/src/Icon.vue'
 import ComponentEditBar from '@/components/visualization/ComponentEditBar.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
-import { dataVTabComponentAdd, groupSizeStyleAdaptor, groupStyleRevert } from '@/utils/style'
+import { groupSizeStyleAdaptor, groupStyleRevert } from '@/utils/style'
 import { isGroupCanvas, isMainCanvas, isTabCanvas } from '@/utils/canvasUtils'
 import Board from '@/components/de-board/Board.vue'
 import { activeWatermarkCheckUser, removeActiveWatermark } from '@/components/watermark/watermark'
@@ -551,14 +551,6 @@ const handleMouseDownOnShape = e => {
         height: parentNode.value.offsetHeight
       })
     }
-    //如果当前画布是Tab内部画布 则对应组件定位在resize时要还原到groupStyle中
-    if (isTabCanvas(canvasId.value)) {
-      groupStyleRevert(element.value, {
-        width: parentNode.value.offsetWidth,
-        height: parentNode.value.offsetHeight
-      })
-    }
-
     // 防止首次组件在tab旁边无法触发矩阵移动
     if (isFirst) {
       isFirst = false
@@ -744,7 +736,7 @@ const handleMouseDownOnPoint = (point, e) => {
       groupSizeStyleAdaptor(element.value)
     }
     //如果当前画布是Group内部画布 则对应组件定位在resize时要还原到groupStyle中
-    if (isGroupCanvas(canvasId.value)) {
+    if (isGroupCanvas(canvasId.value) || isTabCanvas(canvasId.value)) {
       groupStyleRevert(element.value, {
         width: parentNode.value.offsetWidth,
         height: parentNode.value.offsetHeight

core/core-frontend/src/utils/style.ts

@@ -1,8 +1,8 @@
-import { sin, cos } from '@/utils/translate'
+import { sin, cos, toPercent } from '@/utils/translate'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import { hexColorToRGBA } from '@/views/chart/components/js/util'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { isMainCanvas } from '@/utils/canvasUtils'
+import { isMainCanvas, isTabCanvas } from '@/utils/canvasUtils'
 const dvMainStore = dvMainStoreWithOut()
 export function getShapeStyle(style) {
   const result = {}
@@ -27,6 +27,18 @@ export function getShapeItemStyle(item, { dvModel, cellWidth, cellHeight, curGap
       left: cellWidth * (item.x - 1) + 'px',
       top: cellHeight * (item.y - 1) + 'px'
     }
+  } else if (
+    dvModel === 'dataV' &&
+    isTabCanvas(item.canvasId) &&
+    dvMainStore.editMode === 'preview'
+  ) {
+    result = {
+      padding: curGap + 'px!important',
+      width: toPercent(item.groupStyle.width),
+      height: toPercent(item.groupStyle.height),
+      top: toPercent(item.groupStyle.top),
+      left: toPercent(item.groupStyle.left)
+    }
   } else {
     result = {
       padding: curGap + 'px!important',