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>

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/utils/changeComponentsSizeWithScale.ts

@@ -8,16 +8,24 @@ const dvMainStore = dvMainStoreWithOut()
 const { componentData, curComponentIndex, canvasStyleData } = storeToRefs(dvMainStore)
 
 const needToChangeAttrs = ['top', 'left', 'width', 'height', 'fontSize', 'letterSpacing']
+const needToChangeDirectionAttrs = {
+  width: ['left', 'width', 'fontSize', 'letterSpacing'],
+  height: ['top', 'height']
+}
 
 export function changeSizeWithScale(scale) {
   return changeComponentsSizeWithScale(scale)
 }
 
-export function changeComponentsSizeWithScale(scale) {
+export function changeSizeWithDirectionScale(scale, direction) {
+  return changeComponentsSizeWithScale(scale, needToChangeDirectionAttrs[direction])
+}
+
+export function changeComponentsSizeWithScale(scale, changeAttrs = needToChangeAttrs) {
   const componentDataCopy = deepCopy(componentData.value)
   componentDataCopy.forEach(component => {
     Object.keys(component.style).forEach(key => {
-      if (needToChangeAttrs.includes(key)) {
+      if (changeAttrs.includes(key)) {
         if (key === 'fontSize' && component.style[key] === '') return
         // 根据原来的比例获取样式原来的尺寸
         // 再用原来的尺寸 * 现在的比例得出新的尺寸
@@ -52,21 +60,35 @@ export function changeComponentsSizeWithScale(scale) {
   })
 }
 
-export function changeRefComponentsSizeWithScale(componentDataRef, canvasStyleDataRef, scale) {
+export function changeRefComponentsSizeWithScale(
+  componentDataRef,
+  canvasStyleDataRef,
+  scaleWidth,
+  scaleHeight
+) {
   componentDataRef.forEach(component => {
     Object.keys(component.style).forEach(key => {
-      if (needToChangeAttrs.includes(key)) {
       if (key === 'fontSize' && component.style[key] === '') return
+      if (needToChangeDirectionAttrs.width.includes(key)) {
         // 根据原来的比例获取样式原来的尺寸
         // 再用原来的尺寸 * 现在的比例得出新的尺寸
         component.style[key] = format(
           getOriginStyle(component.style[key], canvasStyleDataRef.scale),
-          scale
+          scaleWidth
+        )
+      } else if (needToChangeDirectionAttrs.height.includes(key)) {
+        // 根据原来的比例获取样式原来的尺寸
+        // 再用原来的尺寸 * 现在的比例得出新的尺寸
+        component.style[key] = format(
+          getOriginStyle(component.style[key], canvasStyleDataRef.scale),
+          scaleHeight
         )
       }
     })
   })
-  canvasStyleDataRef.scale = scale
+  canvasStyleDataRef.scale = scaleWidth
+  canvasStyleDataRef.scaleWidth = scaleWidth
+  canvasStyleDataRef.scaleHeight = scaleHeight
 }
 
 const needToChangeAttrs2 = ['width', 'height', 'fontSize']

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,