From 3e4eddfd547186805305828254678e9f39c2c51f Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 2 Jul 2024 15:54:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E7=95=8C=E9=9D=A2=E7=BB=84=E4=BB=B6=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E8=B7=9F=E9=9A=8F=E7=AA=97=E5=8F=A3=E5=A4=A7=E5=B0=8F?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE=E7=9A=84=E6=A8=A1=E5=BC=8F=20#10397?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/CanvasCore.vue  |  4 +--
 .../modules/data-visualization/dvMain.ts      |  3 ++
 core/core-frontend/src/utils/canvasUtils.ts   |  4 +++
 .../src/views/canvas/DeCanvas.vue             | 31 +++++++++++++++++--
 4 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index 2217027e66..c5fa8c2241 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -279,7 +279,7 @@ const { emitter } = useEmitt()
 
 const curScale = computed(() => {
   if (dashboardActive.value) {
-    return (canvasStyleData.value.scale * 1.5) / 100
+    return (canvasStyleData.value.scale * 1.2) / 100
   } else {
     return canvasStyleData.value.scale / 100
   }
@@ -287,7 +287,7 @@ const curScale = computed(() => {
 
 const curBaseScale = computed(() => {
   if (dashboardActive.value) {
-    return (dvMainStore.canvasStyleData.scale * 1.5) / 100
+    return (dvMainStore.canvasStyleData.scale * 1.2) / 100
   } else {
     return dvMainStore.canvasStyleData.scale / 100
   }
diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
index a994231fee..b59dee90ce 100644
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
@@ -234,6 +234,9 @@ export const dvMainStore = defineStore('dataVisualization', {
         style.component['seniorStyleSetting'] || deepCopy(SENIOR_STYLE_SETTING_LIGHT)
       this.canvasStyleData = style
     },
+    setCanvasStyleScale(value) {
+      this.canvasStyleData.scale = value
+    },
     setCanvasViewInfo(canvasViewInfo) {
       this.canvasViewInfo = canvasViewInfo
     },
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index 1b163807b7..3fb905ba3a 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -520,6 +520,10 @@ export async function decompressionPre(params, callBack) {
   callBack(deTemplateData)
 }
 
+export function isDashboard() {
+  return dvInfo.value.type === 'dashboard'
+}
+
 export function trackBarStyleCheck(element, trackbarStyle, _scale, trackMenuNumber) {
   const { width, height } = element.style
   const widthReal = width
diff --git a/core/core-frontend/src/views/canvas/DeCanvas.vue b/core/core-frontend/src/views/canvas/DeCanvas.vue
index 385571f060..9d476d0ba9 100644
--- a/core/core-frontend/src/views/canvas/DeCanvas.vue
+++ b/core/core-frontend/src/views/canvas/DeCanvas.vue
@@ -10,7 +10,7 @@ import elementResizeDetectorMaker from 'element-resize-detector'
 import { getCanvasStyle, syncShapeItemStyle } from '@/utils/style'
 import { adaptCurThemeCommonStyle } from '@/utils/canvasStyle'
 import CanvasCore from '@/components/data-visualization/canvas/CanvasCore.vue'
-import { isMainCanvas } from '@/utils/canvasUtils'
+import { isMainCanvas, isDashboard } from '@/utils/canvasUtils'
 
 // change-begin
 const props = defineProps({
@@ -34,9 +34,15 @@ const props = defineProps({
   canvasActive: {
     type: Boolean,
     default: true
+  },
+  outerScale: {
+    type: Number,
+    required: false,
+    default: 1
   }
 })
-const { canvasStyleData, componentData, canvasViewInfo, canvasId, canvasActive } = toRefs(props)
+const { canvasStyleData, componentData, canvasViewInfo, canvasId, canvasActive, outerScale } =
+  toRefs(props)
 const domId = ref('de-canvas-' + canvasId.value)
 // change-end
 
@@ -46,6 +52,9 @@ const { pcMatrixCount, curOriginThemes } = storeToRefs(dvMainStore)
 const canvasOut = ref(null)
 const canvasInner = ref(null)
 const canvasInitStatus = ref(false)
+const scaleWidth = ref(100)
+const scaleHeight = ref(100)
+const scaleMin = ref(100)
 
 const state = reactive({
   screenWidth: 1920,
@@ -151,11 +160,29 @@ const canvasSizeInit = () => {
       dashboardCanvasSizeInit()
       nextTick(() => {
         cyGridster.value.canvasSizeInit() //在适当的时候初始化布局组件
+        // 缩放比例变化
+        scaleInit()
       })
     }
   })
 }
 
+const scaleInit = () => {
+  nextTick(() => {
+    if (canvasOut.value) {
+      //div容器获取tableBox.value.clientWidth
+      let canvasWidth = canvasOut.value.clientWidth
+      let canvasHeight = canvasOut.value.clientHeight
+      scaleWidth.value = Math.floor((canvasWidth * 100) / canvasStyleData.value.width)
+      scaleHeight.value = Math.floor((canvasHeight * 100) / canvasStyleData.value.height)
+      scaleMin.value = Math.min(scaleWidth.value, scaleHeight.value)
+      if (isDashboard() && isMainCanvas(canvasId.value)) {
+        dvMainStore.setCanvasStyleScale(scaleMin.value)
+      }
+    }
+  })
+}
+
 const dashboardCanvasSizeInit = () => {
   //div容器获取tableBox.value.clientWidth
   state.screenWidth = canvasOut.value.clientWidth - 4