Merge pull request #11451 from dataease/pr@dev-v2@feat_fullscreen-scroll

Pr@dev v2@feat fullscreen scroll

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>