diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue index f2a29054fd..93e4e2d348 100644 --- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue +++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue @@ -49,6 +49,21 @@ {{ t('visualization.no_gap') }} + + + {{ + t('visualization.scale_keep_height_and_width') + }} + {{ + t('visualization.scale_with_width') + }} + + { 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 diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts index 70e71fde9f..93d6b979b4 100644 --- a/core/core-frontend/src/locales/en.ts +++ b/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', diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts index 04c2ef49e1..17c1193c10 100644 --- a/core/core-frontend/src/locales/tw.ts +++ b/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: '二', diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index b1e2ed2110..1a8bcc41ef 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/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: '二', diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index a5fd3f0fa8..3f52bff740 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/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 diff --git a/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts b/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts index 379ae9d550..fece2c775b 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts +++ b/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,