Pr@dev v2@feat new adaptor (#16631)

* fix(数据大屏): 修复图层名称长度为交易问题

* feat(数据大屏): 增加大屏屏幕适配方式

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

@@ -26,7 +26,8 @@ const screenAdaptorList = [
   { label: t('visualization.screen_adaptor_width_first'), value: 'widthFirst' },
   { label: t('visualization.screen_adaptor_height_first'), value: 'heightFirst' },
   { label: t('visualization.screen_adaptor_full'), value: 'full' },
-  { label: t('visualization.screen_adaptor_keep'), value: 'keep' }
+  { label: t('visualization.screen_adaptor_keep'), value: 'keep' },
+  { label: t('visualization.screen_adaptor_keep_proportion'), value: 'keepProportion' }
 ]
 const init = () => {
   nextTick(() => {

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

@@ -180,6 +180,11 @@ const canvasStyle = computed(() => {
       style['height'] = canvasStyleData.value?.height + 'px'
       style['width'] = canvasStyleData.value?.width + 'px'
       style['margin'] = 'auto'
+    } else if (canvasStyleData.value?.screenAdaptor === 'keepProportion') {
+      style['aspect-ratio'] = canvasStyleData.value?.width / canvasStyleData.value?.height
+      style['height'] = canvasStyleData.value?.height + 'px'
+      style['width'] = canvasStyleData.value?.width + 'px'
+      style['margin'] = 'auto'
     } else {
       style['height'] = dashboardActive.value
         ? downloadStatus.value

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

@@ -3131,6 +3131,7 @@ export default {
     screen_adaptor_width_first: 'Width First',
     screen_adaptor_height_first: 'Height First',
     screen_adaptor_full: 'Full Screen',
+    screen_adaptor_keep_proportion: 'Keep Proportion:',
     screen_adaptor_keep: 'No Scaling',
     effective_during_preview: 'Effective during preview',
     base_config: 'Base Configuration',

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

@@ -3045,6 +3045,7 @@ export default {
     screen_adaptor_width_first: '寬度優先',
     screen_adaptor_height_first: '高度優先',
     screen_adaptor_full: '鋪滿全屏',
+    screen_adaptor_keep_proportion: '保持比例填充',
     screen_adaptor_keep: '不縮放',
     effective_during_preview: '預覽時生效',
     base_config: '基礎配置',

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

@@ -3048,6 +3048,7 @@ export default {
     external_parameter_settings: '外部参数设置',
     screen_config: '大屏配置',
     screen_adaptor: '缩放方式',
+    screen_adaptor_keep_proportion: '保持比例填充',
     screen_adaptor_width_first: '宽度优先',
     screen_adaptor_height_first: '高度优先',
     screen_adaptor_full: '铺满全屏',

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

@@ -600,6 +600,14 @@ strong {
   overflow-y: auto;
 }
 
+.preview-content-inner-keep-proportion {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .preview-content-inner-height-first {
   width: auto;
   height: 100%;

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

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