Merge pull request #8362 from dataease/pr@dev-v2_mobile_tab

fix(移动端): tab组件中无法正常显示过滤组件和图表

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

@@ -276,7 +276,7 @@ defineExpose({
       :style="getShapeItemShowStyle(item)"
       :show-position="showPosition"
       :search-count="searchCount"
-      :scale="mobileInPc ? scaleWidth * 3 : scaleWidth"
+      :scale="mobileInPc ? 100 : scaleWidth"
       @userViewEnlargeOpen="userViewEnlargeOpen($event, item)"
     />
     <user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>

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

@@ -160,6 +160,16 @@ export function initCanvasDataMobile(dvId, busiFlag, callBack) {
         ele.y = my
         ele.sizeX = mSizeX
         ele.sizeY = mSizeY
+        if (ele.component === 'DeTabs') {
+          ele.propValue.forEach(tabItem => {
+            tabItem.componentData.forEach(tabComponent => {
+              tabComponent.x = tabComponent.mx
+              tabComponent.y = tabComponent.my
+              tabComponent.sizeX = tabComponent.mSizeX
+              tabComponent.sizeY = tabComponent.mSizeY
+            })
+          })
+        }
       })
       dvMainStore.setComponentData(componentData)
       dvMainStore.setCanvasStyle(canvasStyleResult)

core/core-frontend/src/views/dashboard/MobileConfigPanel.vue

@@ -81,6 +81,17 @@ const hanedleMessage = event => {
         ele.my = y
         ele.mSizeX = sizeX
         ele.mSizeY = sizeY
+        if (ele.component === 'DeTabs') {
+          ele.propValue.forEach(tabItem => {
+            tabItem.componentData.forEach(tabComponent => {
+              const { x: tx, y: ty, sizeX: tSizeX, sizeY: tSizeY } = com.tab[tabComponent.id]
+              tabComponent.mx = tx
+              tabComponent.my = ty
+              tabComponent.mSizeX = tSizeX
+              tabComponent.mSizeY = tSizeY
+            })
+          })
+        }
       }
     })
 

core/core-frontend/src/views/mobile/panel/index.vue

@@ -13,6 +13,7 @@ const checkItemPosition = component => {
   component.y = dvMainStore.componentData.reduce((pre, next) => {
     return Math.max(pre, next.y + next.sizeY)
   }, 1)
+  component.sizeY = 10
 }
 
 const hanedleMessage = event => {
@@ -50,8 +51,22 @@ const hanedleMessage = event => {
       {
         type: 'mobileSaveFromMobile',
         value: dvMainStore.componentData.reduce((pre, next) => {
-          const { x, y, sizeX, sizeY, id } = next
+          const { x, y, sizeX, sizeY, id, component } = next
-          pre[id] = { x, y, sizeX, sizeY }
+          pre[id] = { x, y, sizeX, sizeY, component }
+          if (next.component === 'DeTabs') {
+            pre[id].tab = {}
+            next.propValue.forEach(tabItem => {
+              tabItem.componentData.forEach(tabComponent => {
+                const { x: tx, y: ty, sizeX: tSizeX, sizeY: tSizeY, id: tId } = tabComponent
+                pre[id].tab[tId] = {
+                  x: tx,
+                  y: ty,
+                  sizeX: tSizeX,
+                  sizeY: tSizeY
+                }
+              })
+            })
+          }
           return pre
         }, {})
       },