feat(仪表板): 仪表板提供按照实际宽高比例缩放的方式 #14027

core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue

@@ -49,6 +49,21 @@
         <el-radio :effect="themes" label="no">{{ t('visualization.no_gap') }}</el-radio>
       </el-radio-group>
     </el-form-item>
+    <el-form-item
+      v-if="dvInfo.type === 'dashboard'"
+      class="form-item"
+      :class="'form-item-' + themes"
+      :label="t('visualization.dashboard_adaptor')"
+    >
+      <el-radio-group v-model="canvasStyleData.dashboardAdaptor" @change="themeChange">
+        <el-radio :effect="themes" label="keepHeightAndWidth">{{
+          t('visualization.scale_keep_height_and_width')
+        }}</el-radio>
+        <el-radio :effect="themes" label="withWidth">{{
+          t('visualization.scale_with_width')
+        }}</el-radio>
+      </el-radio-group>
+    </el-form-item>
     <el-form-item class="form-item" :class="'form-item-' + themes" style="margin-bottom: 8px">
       <el-checkbox
         :effect="themes"

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

@@ -133,6 +133,11 @@ const curSearchCount = computed(() => {
 const dataVKeepRadio = computed(() => {
   return canvasStyleData.value?.screenAdaptor !== 'full'
 })
+
+// 仪表板是否跟随宽度缩放 非全屏 full 都需要保持宽高比例
+const dashboardScaleWithWidth = computed(() => {
+  return isDashboard() && canvasStyleData.value?.dashboardAdaptor === 'withWidth'
+})
 const isReport = computed(() => {
   return !!router.currentRoute.value.query?.report
 })
@@ -235,13 +240,21 @@ const resetLayout = () => {
       let canvasWidth = previewCanvas.value.clientWidth
       let canvasHeight = previewCanvas.value.clientHeight
       scaleWidthPoint.value = (canvasWidth * 100) / canvasStyleData.value.width
-      scaleHeightPoint.value = (canvasHeight * 100) / canvasStyleData.value.height
+      if (dashboardScaleWithWidth.value) {
+        scaleHeightPoint.value = scaleWidthPoint.value * 0.7
+      } else {
+        scaleHeightPoint.value = (canvasHeight * 100) / canvasStyleData.value.height
+      }
       scaleMin.value = isDashboard()
         ? 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
+        if (dashboardScaleWithWidth.value) {
+          cellHeight.value = (canvasHeight * 0.7) / cellWidth.value
+        } else {
+          cellHeight.value = canvasHeight / pcMatrixCount.value.y
+        }
         scaleMin.value = isMainCanvas(canvasId.value)
           ? scaleMin.value * 1.2
           : outerScale.value * 100

core/core-frontend/src/locales/en.ts

@@ -2806,6 +2806,9 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
     column_name: 'Field name'
   },
   visualization: {
+    dashboard_adaptor: 'Zoom Mode',
+    scale_keep_height_and_width: 'Default Aspect Ratio',
+    scale_with_width: 'Actual Aspect Ratio',
     multi_selected: '{0} components selected',
     number1: '1',
     number2: '2',

core/core-frontend/src/locales/tw.ts

@@ -2734,6 +2734,9 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    dashboard_adaptor: '縮放模式',
+    scale_keep_height_and_width: '按預設寬高比例縮放',
+    scale_with_width: '按照實際寬高比例縮放',
     multi_selected: '已選{0}項',
     number1: '一',
     number2: '二',

core/core-frontend/src/locales/zh-CN.ts

@@ -2736,6 +2736,9 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    dashboard_adaptor: '缩放模式',
+    scale_keep_height_and_width: '按默认宽高比例缩放',
+    scale_with_width: '按照实际宽高比例缩放',
     multi_selected: '已选{0}项',
     number1: '一',
     number2: '二',

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

@@ -250,6 +250,8 @@ export function historyAdaptor(
       ? false
       : canvasStyleResult['suspensionButtonAvailable']
   canvasStyleResult['screenAdaptor'] = canvasStyleResult['screenAdaptor'] || 'widthFirst'
+  canvasStyleResult['dashboardAdaptor'] =
+    canvasStyleResult['dashboardAdaptor'] || 'keepHeightAndWidth'
   canvasStyleResult['refreshBrowserEnable'] =
     canvasStyleResult['refreshBrowserEnable'] === undefined
       ? false

core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts

@@ -93,6 +93,7 @@ export const DEFAULT_CANVAS_STYLE_DATA_BASE = {
   popupButtonAvailable: true, // 弹框区域显示按钮是否可用 默认为true
   suspensionButtonAvailable: false, // 悬浮按钮是否可用 默认false
   screenAdaptor: 'widthFirst', // 屏幕适配方式 widthFirst=宽度优先 heightFirst=高度优先 full=铺满全屏 keepSize=不缩放
+  dashboardAdaptor: 'keepHeightAndWidth', //仪表板预览展示适配方式 keepHeightAndWidth=高度宽度独立缩放(默认模式)，withWidth=跟随宽度
   scale: 60,
   scaleWidth: 60,
   scaleHeight: 60,