Merge pull request #13495 from dataease/pr@dev-v2@feat_scale-keep

feat: 数据大屏增加不缩放的预览模式

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

@@ -24,7 +24,8 @@ const canvasAttrActiveNames = ref(['size', 'baseSetting', 'background', 'color']
 const screenAdaptorList = [
   { label: '宽度优先', value: 'widthFirst' },
   { label: '高度优先', value: 'heightFirst' },
-  { label: '铺满全屏', value: 'full' }
+  { label: '铺满全屏', value: 'full' },
+  { label: '不缩放', value: 'keep' }
 ]
 const init = () => {
   nextTick(() => {

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

@@ -141,9 +141,12 @@ const canvasStyle = computed(() => {
     style['overflowY'] = 'hidden !important'
   }
   if (canvasStyleData.value && canvasStyleData.value.width && isMainCanvas(canvasId.value)) {
-    style = {
-      ...getCanvasStyle(canvasStyleData.value),
-      height: dashboardActive.value
+    style = getCanvasStyle(canvasStyleData.value)
+    if (canvasStyleData.value?.screenAdaptor === 'keep') {
+      style['height'] = canvasStyleData.value?.height + 'px'
+      style['width'] = canvasStyleData.value?.width + 'px'
+    } else {
+      style['height'] = dashboardActive.value
         ? downloadStatus.value
           ? getDownloadStatusMainHeight()
           : '100%'
@@ -151,11 +154,11 @@ const canvasStyle = computed(() => {
           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%'
     }
-    style['width'] =
-      !dashboardActive.value && canvasStyleData.value?.screenAdaptor === 'heightFirst'
-        ? changeStyleWithScale(canvasStyleData.value?.width, scaleHeightPoint.value) + 'px'
-        : '100%'
   }
   return style
 })

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

@@ -590,6 +590,13 @@ strong {
   overflow-y: auto;
 }
 
+.preview-content-inner-size-keep {
+  width: 100%;
+  height: auto;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
 .preview-content-inner-height-first {
   width: auto;
   height: 100%;
@@ -607,3 +614,7 @@ strong {
 .ed-message .ed-message__closeBtn:hover {
   background: #ebebebe6 !important;
 }
+
+.canvas_keep-size {
+  overflow-x: auto!important;
+}

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

@@ -52,6 +52,8 @@ const contentInnerClass = computed(() => {
     return 'preview-content-inner-height-first'
   } else if (props.canvasStylePreview.screenAdaptor === 'full') {
     return 'preview-content-inner-full'
+  } else if (props.canvasStylePreview.screenAdaptor === 'keep') {
+    return 'preview-content-inner-size-keep'
   } else {
     return 'preview-content-inner-width-first'
   }

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { nextTick, onMounted, reactive, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import router from '@/router'
 import { useEmitt } from '@/hooks/web/useEmitt'
@@ -188,13 +188,17 @@ onMounted(async () => {
   dvMainStore.setPublicLinkStatus(props.publicLinkStatus)
 })
 
+const dataVKeepSize = computed(() => {
+  return state.canvasStylePreview?.screenAdaptor === 'keep'
+})
+
 defineExpose({
   loadCanvasDataAsync
 })
 </script>
 
 <template>
-  <div class="content" ref="previewCanvasContainer">
+  <div class="content" :class="{ 'canvas_keep-size': dataVKeepSize }" ref="previewCanvasContainer">
     <de-preview
       ref="dvPreview"
       v-if="state.canvasStylePreview && state.initState"

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

@@ -170,6 +170,10 @@ const resourceNodeClick = data => {
   loadCanvasData(data.id, data.weight, data.ext)
 }
 
+const dataVKeepSize = computed(() => {
+  return state.canvasStylePreview?.screenAdaptor === 'keep'
+})
+
 const state = reactive({
   canvasDataPreview: null,
   canvasStylePreview: null,
@@ -276,7 +280,12 @@ onBeforeMount(() => {
             :dv-info="state.dvInfo"
           ></multiplex-preview-show>
         </div>
-        <div v-if="showPosition === 'preview'" ref="previewCanvasContainer" class="content">
+        <div
+          v-if="showPosition === 'preview'"
+          :class="{ 'canvas_keep-size': dataVKeepSize }"
+          ref="previewCanvasContainer"
+          class="content"
+        >
           <dv-preview
             ref="dvPreviewRef"
             v-if="state.canvasStylePreview && dataInitState"