feat(数据大屏): 数据大屏缩放模式优化

core/core-frontend/src/components/data-visualization/CanvasAttr.vue

@@ -22,8 +22,7 @@ const canvasAttrActiveNames = ref(['size', 'background', 'color'])
 const screenAdaptorList = [
   { label: '宽度优先', value: 'widthFirst' },
   { label: '高度优先', value: 'heightFirst' },
-  { label: '铺满全屏', value: 'full' },
-  { label: '不缩放', value: 'keepSize' }
+  { label: '铺满全屏', value: 'full' }
 ]
 const init = () => {
   nextTick(() => {
@@ -35,6 +34,10 @@ const onColorChange = val => {
   themeAttrChange('customAttr', 'color', val)
 }
 
+const onStyleChange = () => {
+  snapshotStore.recordSnapshotCache('renderChart')
+}
+
 const onBaseChange = () => {
   snapshotStore.recordSnapshotCache('renderChart')
   useEmitt().emitter.emit('initScroll')
@@ -128,6 +131,7 @@ onMounted(() => {
                 style="margin: 0 0 0 8px; flex: 1"
                 effect="dark"
                 v-model="canvasStyleData.screenAdaptor"
+                @change="onStyleChange"
                 size="small"
               >
                 <el-option

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

@@ -3,7 +3,7 @@ import { getCanvasStyle, getShapeItemStyle } from '@/utils/style'
 import ComponentWrapper from './ComponentWrapper.vue'
 import { changeStyleWithScale } from '@/utils/translate'
 import { computed, nextTick, ref, toRefs, watch, onBeforeUnmount, onMounted } from 'vue'
-import { changeRefComponentsSizeWithScale } from '@/utils/changeComponentsSizeWithScale'
+import { changeRefComponentsSizeWithScalePoint } from '@/utils/changeComponentsSizeWithScale'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import elementResizeDetectorMaker from 'element-resize-detector'
@@ -83,8 +83,8 @@ const {
   outerScale
 } = toRefs(props)
 const domId = 'preview-' + canvasId.value
-const scaleWidth = ref(100)
-const scaleHeight = ref(100)
+const scaleWidthPoint = ref(100)
+const scaleHeightPoint = ref(100)
 const scaleMin = ref(100)
 const previewCanvas = ref(null)
 const cellWidth = ref(10)
@@ -97,6 +97,11 @@ const userInfo = ref(null)
 const dashboardActive = computed(() => {
   return dvInfo.value.type === 'dashboard'
 })
+
+// 大屏是否保持宽高比例 非全屏 full 都需要保持宽高比例
+const dataVKeepRadio = computed(() => {
+  return canvasStyleData.value.screenAdaptor !== 'full'
+})
 const isReport = computed(() => {
   return !!router.currentRoute.value.query?.report
 })
@@ -117,8 +122,15 @@ const canvasStyle = computed(() => {
         ? downloadStatus.value
           ? getDownloadStatusMainHeight()
           : '100%'
-        : changeStyleWithScale(canvasStyleData.value?.height, scaleMin.value) + 'px'
+        : !canvasStyleData.value?.screenAdaptor ||
+          canvasStyleData.value?.screenAdaptor === 'widthFirst'
+        ? changeStyleWithScale(canvasStyleData.value?.height, scaleMin.value) + 'px'
+        : '100%'
     }
+    style['width'] =
+      !dashboardActive.value && canvasStyleData.value?.screenAdaptor === 'heightFirst'
+        ? changeStyleWithScale(canvasStyleData.value?.width, scaleHeightPoint.value) + 'px'
+        : '100%'
   }
   if (!dashboardActive.value) {
     style['overflow-y'] = 'hidden'
@@ -179,11 +191,11 @@ const resetLayout = () => {
       //div容器获取tableBox.value.clientWidth
       let canvasWidth = previewCanvas.value.clientWidth
       let canvasHeight = previewCanvas.value.clientHeight
-      scaleWidth.value = Math.floor((canvasWidth * 100) / canvasStyleData.value.width)
-      scaleHeight.value = Math.floor((canvasHeight * 100) / canvasStyleData.value.height)
+      scaleWidthPoint.value = (canvasWidth * 100) / canvasStyleData.value.width
+      scaleHeightPoint.value = (canvasHeight * 100) / canvasStyleData.value.height
       scaleMin.value = isDashboard()
-        ? Math.min(scaleWidth.value, scaleHeight.value)
-        : (canvasWidth * 100) / canvasStyleData.value.width
+        ? Math.floor(Math.min(scaleWidthPoint.value, scaleHeightPoint.value))
+        : scaleWidthPoint.value
       if (dashboardActive.value) {
         cellWidth.value = canvasWidth / pcMatrixCount.value.x
         cellHeight.value = canvasHeight / pcMatrixCount.value.y
@@ -191,10 +203,13 @@ const resetLayout = () => {
           ? scaleMin.value * 1.2
           : outerScale.value * 100
       } else {
-        changeRefComponentsSizeWithScale(
+        // 需要保持宽高比例时 高度伸缩和宽度伸缩保持一致 否则 高度伸缩单独计算
+        const scaleMinHeight = dataVKeepRadio.value ? scaleMin.value : scaleHeightPoint.value
+        changeRefComponentsSizeWithScalePoint(
           baseComponentData.value,
           canvasStyleData.value,
-          scaleMin.value
+          scaleMin.value,
+          scaleMinHeight
         )
       }
     }