From a81cdbb074be03c9157791258e47128e8849f114 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 22 Nov 2024 14:51:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=8D=E7=BC=A9=E6=94=BE=E7=9A=84=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/CanvasAttr.vue           |  3 ++-
 .../data-visualization/canvas/DePreview.vue     | 17 ++++++++++-------
 core/core-frontend/src/style/index.less         | 11 +++++++++++
 .../src/views/data-visualization/DvPreview.vue  |  2 ++
 .../views/data-visualization/PreviewCanvas.vue  |  8 ++++++--
 .../views/data-visualization/PreviewShow.vue    | 11 ++++++++++-
 6 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
index b313920963..a664d55c08 100644
--- a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
+++ b/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(() => {
diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index 67ebec8c8c..77b5318254 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/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
 })
diff --git a/core/core-frontend/src/style/index.less b/core/core-frontend/src/style/index.less
index 3289a8bc9c..a3083a5a6f 100644
--- a/core/core-frontend/src/style/index.less
+++ b/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;
+}
diff --git a/core/core-frontend/src/views/data-visualization/DvPreview.vue b/core/core-frontend/src/views/data-visualization/DvPreview.vue
index b5b787f3af..b0c4edabd3 100644
--- a/core/core-frontend/src/views/data-visualization/DvPreview.vue
+++ b/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'
   }
diff --git a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
index 2e4152142b..c3af3f48ce 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
+++ b/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"
diff --git a/core/core-frontend/src/views/data-visualization/PreviewShow.vue b/core/core-frontend/src/views/data-visualization/PreviewShow.vue
index c515a87e66..6b44b7dc19 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewShow.vue
+++ b/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"