Merge pull request #13799 from dataease/pr@dev-v2@fix_ios-scale

fix(数据大屏): 修复IOS设备部分css属性不支持导致的缩放不一致问题

core/core-frontend/src/custom-component/user-view/Component.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed, toRefs, PropType } from 'vue'
+import { computed, toRefs, PropType, CSSProperties } from 'vue'
 import Chart from '@/views/chart/components/views/index.vue'
+import { isISOMobile } from '@/utils/utils'
 
 const props = defineProps({
   active: {
@@ -69,7 +70,18 @@ const props = defineProps({
 const { element, view, active, searchCount, scale } = toRefs(props)
 const autoStyle = computed(() => {
   if (element.value.innerType === 'rich-text') {
-    return { zoom: scale.value }
+    if (isISOMobile()) {
+      return {
+        position: 'absolute',
+        height: 100 / scale.value + '%!important',
+        width: 100 / scale.value + '%!important',
+        left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+        top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+        transform: 'scale(' + scale.value + ') translateZ(0)'
+      } as CSSProperties
+    } else {
+      return { zoom: scale.value }
+    }
   } else {
     return {}
   }

core/core-frontend/src/custom-component/v-query/Component.vue

@@ -2,7 +2,7 @@
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import eventBus from '@/utils/eventBus'
-import { isMobile } from '@/utils/utils'
+import { isISOMobile, isMobile } from '@/utils/utils'
 import { ElMessage } from 'element-plus-secondary'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import QueryConditionConfiguration from './QueryConditionConfiguration.vue'
@@ -674,7 +674,18 @@ const marginRight = computed<CSSProperties>(() => {
 })
 
 const autoStyle = computed(() => {
-  return { zoom: scale.value }
+  if (isISOMobile()) {
+    return {
+      position: 'absolute',
+      height: 100 / scale.value + '%!important',
+      width: 100 / scale.value + '%!important',
+      left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+      top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+      transform: 'scale(' + scale.value + ') translateZ(0)'
+    } as CSSProperties
+  } else {
+    return { zoom: scale.value }
+  }
 })
 </script>
 

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

@@ -136,6 +136,10 @@ export function isMobile() {
   )
 }
 
+export function isISOMobile() {
+  return navigator.userAgent.match(/(iPhone|iPad|iPod)/i) && !isTablet()
+}
+
 export const isDingTalk = window.navigator.userAgent.toLowerCase().includes('dingtalk')
 
 export const setTitle = (title?: string) => {

core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import {
   computed,
+  CSSProperties,
   inject,
   nextTick,
   onBeforeUnmount,
@@ -25,7 +26,7 @@ import ChartError from '@/views/chart/components/views/components/ChartError.vue
 import { defaultsDeep, cloneDeep, debounce } from 'lodash-es'
 import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
 import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
-import { deepCopy } from '@/utils/utils'
+import { deepCopy, isISOMobile } from '@/utils/utils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { trackBarStyleCheck } from '@/utils/canvasUtils'
 import { type SpreadSheet } from '@antv/s2'
@@ -628,7 +629,18 @@ onBeforeUnmount(() => {
 })
 
 const autoStyle = computed(() => {
-  return { zoom: scale.value }
+  if (isISOMobile()) {
+    return {
+      position: 'absolute',
+      height: 100 / scale.value + '%!important',
+      width: 100 / scale.value + '%!important',
+      left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+      top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+      transform: 'scale(' + scale.value + ') translateZ(0)'
+    } as CSSProperties
+  } else {
+    return { zoom: scale.value }
+  }
 })
 
 const autoHeightStyle = computed(() => {