Merge pull request #11454 from dataease/pr@dev-v2@refactor_full-screen

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

core/core-frontend/src/style/index.less

@@ -516,3 +516,25 @@ strong {
     overflow: hidden;
   }
 }
+
+
+.preview-content-inner-full {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.preview-content-inner-width-first {
+  width: 100%;
+  height: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.preview-content-inner-height-first {
+  width: auto;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}

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

@@ -131,6 +131,9 @@ export function historyAdaptor(
   canvasStyleResult.component['seniorStyleSetting'] =
     canvasStyleResult.component['seniorStyleSetting'] || deepCopy(SENIOR_STYLE_SETTING_LIGHT)
   canvasStyleResult['screenAdaptor'] = canvasStyleResult['screenAdaptor'] || 'widthFirst'
+  // 同步宽高比例(大屏使用)
+  canvasStyleResult['scaleWidth'] = canvasStyleResult['scale']
+  canvasStyleResult['scaleHeight'] = canvasStyleResult['scale']
   canvasStyleResult['popupAvailable'] =
     canvasStyleResult['popupAvailable'] === undefined ? true : canvasStyleResult['popupAvailable'] //兼容弹框区域开关
   const reportFilterInfo = canvasInfo.reportFilterInfo

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

@@ -54,8 +54,11 @@ export function changeComponentsSizeWithScale(scale, changeAttrs = needToChangeA
     index: curComponentIndex.value
   })
 
+  // 分开保存初始化宽高比例
   dvMainStore.setCanvasStyle({
     ...canvasStyleData.value,
+    scaleWidth: scale,
+    scaleHeight: scale,
     scale
   })
 }
@@ -96,7 +99,7 @@ export function changeRefComponentsSizeWithScalePoint(
         // 根据原来的比例获取样式原来的尺寸
         // 再用原来的尺寸 * 现在的比例得出新的尺寸
         component.style[key] = format(
-          getOriginStyle(component.style[key], canvasStyleDataRef.scale),
+          getOriginStyle(component.style[key], canvasStyleDataRef.scaleHeight),
           scaleHeight
         )
       }

core/core-frontend/src/views/data-visualization/DvPreview.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import { storeToRefs } from 'pinia'
 
@@ -8,7 +8,7 @@ const dvMainStore = dvMainStoreWithOut()
 const { fullscreenFlag } = storeToRefs(dvMainStore)
 const dePreviewRef = ref(null)
 const dataInitState = ref(true)
-defineProps({
+const props = defineProps({
   canvasStylePreview: {
     required: true,
     type: Object
@@ -46,6 +46,17 @@ const restore = () => {
   dePreviewRef.value.restore()
 }
 
+const contentInnerClass = computed(() => {
+  //屏幕适配方式 widthFirst=宽度优先(默认) heightFirst=高度优先 full=铺满全屏 keepSize=不缩放
+  if (props.canvasStylePreview.screenAdaptor === 'heightFirst') {
+    return 'preview-content-inner-height-first'
+  } else if (props.canvasStylePreview.screenAdaptor === 'full') {
+    return 'preview-content-inner-full'
+  } else {
+    return 'preview-content-inner-width-first'
+  }
+})
+
 defineExpose({
   restore
 })
@@ -53,7 +64,7 @@ defineExpose({
 
 <template>
   <div id="de-preview-content" :class="{ 'de-screen-full': fullscreenFlag }" class="content-outer">
-    <div class="content-inner">
+    <div class="content-inner" :class="contentInnerClass">
       <de-preview
         ref="dePreviewRef"
         v-if="canvasStylePreview && dataInitState"
@@ -79,11 +90,5 @@ defineExpose({
   align-items: center;
   flex-direction: column;
   justify-content: center; /* 上下居中 */
-  .content-inner {
-    width: 100%;
-    height: auto;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
 }
 </style>

core/core-frontend/src/views/data-visualization/PreviewShow.vue

@@ -344,22 +344,6 @@ onBeforeMount(() => {
       overflow-x: hidden;
       overflow-y: auto;
       align-items: center;
-      .content-outer {
-        width: 100%;
-        height: calc(100vh - 112px);
-        background: #f5f6f7;
-        display: flex;
-        overflow-y: auto;
-        align-items: center;
-        flex-direction: column;
-        justify-content: center; /* 上下居中 */
-        .content-inner {
-          width: 100%;
-          height: auto;
-          overflow-x: hidden;
-          overflow-y: auto;
-        }
-      }
     }
   }
 }