feat(数据大屏): 数据大屏支持不同伸缩方式设置

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

@@ -3,7 +3,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { storeToRefs } from 'pinia'
 import { nextTick, onMounted, ref } from 'vue'
-import { ElFormItem } from 'element-plus-secondary'
+import { ElFormItem, ElIcon } from 'element-plus-secondary'
 
 import { merge, cloneDeep } from 'lodash-es'
 import { useEmitt } from '@/hooks/web/useEmitt'
@@ -11,12 +11,20 @@ import ComponentColorSelector from '@/components/dashboard/subject-setting/dashb
 import OverallSetting from '@/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue'
 import CanvasBackground from '@/components/visualization/component-background/CanvasBackground.vue'
 import SeniorStyleSetting from '@/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue'
+import Icon from '../icon-custom/src/Icon.vue'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const { canvasStyleData, canvasViewInfo } = storeToRefs(dvMainStore)
 let canvasAttrInit = false
 
 const canvasAttrActiveNames = ref(['size', 'background', 'color'])
+
+const screenAdaptorList = [
+  { label: '宽度优先', value: 'widthFirst' },
+  { label: '高度优先', value: 'heightFirst' },
+  { label: '铺满全屏', value: 'full' },
+  { label: '不缩放', value: 'keepSize' }
+]
 const init = () => {
   nextTick(() => {
     canvasAttrInit = true
@@ -105,6 +113,33 @@ onMounted(() => {
               </el-form-item>
             </el-col>
           </el-row>
+          <el-row v-if="canvasStyleData.screenAdaptor">
+            <el-form-item style="margin-top: 16px">
+              <span class="form-item-scroll"> 缩放方式 </span>
+              <el-tooltip class="item" effect="dark" placement="top">
+                <template #content>
+                  <div>预览时生效</div>
+                </template>
+                <el-icon class="hint-icon--dark">
+                  <Icon name="icon_info_outlined" />
+                </el-icon>
+              </el-tooltip>
+              <el-select
+                style="margin: 0 0 0 8px; flex: 1"
+                effect="dark"
+                v-model="canvasStyleData.screenAdaptor"
+                size="small"
+              >
+                <el-option
+                  v-for="option in screenAdaptorList"
+                  size="small"
+                  :key="option.value"
+                  :label="option.label"
+                  :value="option.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-row>
         </el-form>
       </el-collapse-item>
       <el-collapse-item effect="dark" title="背景" name="background">
@@ -129,6 +164,10 @@ onMounted(() => {
 </template>
 
 <style lang="less" scoped>
+.form-item-scroll {
+  font-size: 12px;
+  color: @canvas-main-font-color-dark;
+}
 :deep(.ed-collapse-item) {
   &:first-child {
     .ed-collapse-item__header {
@@ -358,4 +397,8 @@ onMounted(() => {
     border-bottom: none;
   }
 }
+
+.hint-icon--dark {
+  color: #a6a6a6;
+}
 </style>

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

@@ -130,6 +130,7 @@ export function historyAdaptor(
   //历史字段适配
   canvasStyleResult.component['seniorStyleSetting'] =
     canvasStyleResult.component['seniorStyleSetting'] || deepCopy(SENIOR_STYLE_SETTING_LIGHT)
+  canvasStyleResult['screenAdaptor'] = canvasStyleResult['screenAdaptor'] || 'widthFirst'
   canvasStyleResult['popupAvailable'] =
     canvasStyleResult['popupAvailable'] === undefined ? true : canvasStyleResult['popupAvailable'] //兼容弹框区域开关
   const reportFilterInfo = canvasInfo.reportFilterInfo

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

@@ -85,6 +85,7 @@ export const DEFAULT_CANVAS_STYLE_DATA_BASE = {
   refreshUnit: 'minute', // 仪表板刷新时间带外 默认 分钟
   refreshTime: 5, // 仪表板刷新时间 默认5分钟
   popupAvailable: true, // 弹窗区域是否可用 默认为true
+  screenAdaptor: 'widthFirst', // 屏幕适配方式 widthFirst=宽度优先 heightFirst=高度优先 full=铺满全屏 keepSize=不缩放
   scale: 60,
   scaleWidth: 100,
   scaleHeight: 100,