From 3c1e76d75ade4719913be985b14f0bd615a130b4 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Sun, 3 Nov 2024 15:18:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E5=9B=BE=E7=89=87=E5=88=B7=E6=96=B0=E6=97=A0?=
 =?UTF-8?q?=E6=95=88=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/utils/canvasUtils.ts   | 31 +++++++++++++------
 .../src/views/dashboard/MobileConfigPanel.vue | 21 ++++++++-----
 .../src/views/mobile/panel/Mobile.vue         | 24 ++++++++++++--
 3 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index 415444aa87..c79d46e6d3 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -29,8 +29,15 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
 import { deepCopy } from '@/utils/utils'
 import { ElMessage } from 'element-plus-secondary'
 const dvMainStore = dvMainStoreWithOut()
-const { curBatchOptComponents, dvInfo, canvasStyleData, componentData, canvasViewInfo, appData } =
-  storeToRefs(dvMainStore)
+const {
+  inMobile,
+  curBatchOptComponents,
+  dvInfo,
+  canvasStyleData,
+  componentData,
+  canvasViewInfo,
+  appData
+} = storeToRefs(dvMainStore)
 const snapshotStore = snapshotStoreWithOut()
 
 export function chartTransStr2Object(targetIn, copy) {
@@ -262,15 +269,19 @@ export function refreshOtherComponent(dvId, busiFlag) {
       for (let i = 0; i < componentData.value.length; i++) {
         const component = componentData.value[i]
         if (refreshIdList.includes(component.id) && canvasDataResultMap[component.id]) {
-          const { top, left, height, width, fontSize } = componentData.value[i].style
-          canvasDataResultMap[component.id].style.top = top
-          canvasDataResultMap[component.id].style.left = left
-          canvasDataResultMap[component.id].style.height = height
-          canvasDataResultMap[component.id].style.width = width
-          if (fontSize) {
-            canvasDataResultMap[component.id].style.fontSize = fontSize
+          if (inMobile.value) {
+            componentData.value[i].propValue = canvasDataResultMap[component.id].mPropValue
+          } else {
+            const { top, left, height, width, fontSize } = componentData.value[i].style
+            canvasDataResultMap[component.id].style.top = top
+            canvasDataResultMap[component.id].style.left = left
+            canvasDataResultMap[component.id].style.height = height
+            canvasDataResultMap[component.id].style.width = width
+            if (fontSize) {
+              canvasDataResultMap[component.id].style.fontSize = fontSize
+            }
+            componentData.value[i] = canvasDataResultMap[component.id]
           }
-          componentData.value[i] = canvasDataResultMap[component.id]
         }
       }
     })
diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
index 046e7d311e..d6dfd959c1 100644
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@@ -29,8 +29,8 @@ const getComponentStyleDefault = () => {
   return {
     top: 0,
     left: 0,
-    width: '190px',
-    height: '190px'
+    width: 'calc(100% -8px)',
+    height: 'calc(100% -8px)'
   }
 }
 const mobileStatusChange = (type, value) => {
@@ -247,11 +247,11 @@ const addToMobile = com => {
 const changeTimes = ref(0)
 const activeCollapse = ref('com')
 const handleBack = () => {
+  dvMainStore.setCurComponent({ component: null, index: null })
   if (!changeTimes.value) {
     mobileStatusChange('mobilePatch', undefined)
     return
   }
-  dvMainStore.setCurComponent({ component: null, index: null })
   ElMessageBox.confirm('当前的更改尚未保存，确定退出吗？', {
     confirmButtonType: 'primary',
     type: 'warning',
@@ -327,7 +327,7 @@ const save = () => {
         </div>
         <div class="config-mobile-tab" v-show="activeCollapse === 'com'">
           <div
-            :style="{ height: '198px', width: '198px' }"
+            :style="{ height: '196px', width: '196px' }"
             class="mobile-wrapper-inner-adaptor"
             v-for="item in componentDataNotInMobile"
             :key="item.id"
@@ -341,7 +341,7 @@ const save = () => {
                 :canvas-view-info="canvasViewInfoMobile"
                 :view-info="canvasViewInfoMobile[item.id]"
                 :config="item"
-                :style="getComponentStyleDefault()"
+                class="wrapper-design"
                 show-position="preview"
                 :search-count="0"
                 :scale="80"
@@ -549,7 +549,7 @@ const save = () => {
     }
 
     .config-mobile-tab {
-      padding: 16px 8px;
+      padding: 16px 0;
     }
     .config-mobile-tab-style {
       padding: 0;
@@ -561,7 +561,7 @@ const save = () => {
     }
     .mobile-wrapper-inner-adaptor {
       position: relative;
-      margin-right: 8px;
+      margin-left: 8px;
       margin-bottom: 8px;
       float: left;
       background: #fff;
@@ -612,6 +612,13 @@ const save = () => {
     }
   }
 }
+
+.wrapper-design {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 </style>
 
 <style lang="less">
diff --git a/core/core-frontend/src/views/mobile/panel/Mobile.vue b/core/core-frontend/src/views/mobile/panel/Mobile.vue
index c23f39727b..32b316dacb 100644
--- a/core/core-frontend/src/views/mobile/panel/Mobile.vue
+++ b/core/core-frontend/src/views/mobile/panel/Mobile.vue
@@ -9,6 +9,8 @@ import VanSticky from 'vant/es/sticky'
 import VanNavBar from 'vant/es/nav-bar'
 import 'vant/es/nav-bar/style'
 import 'vant/es/sticky/style'
+import { downloadCanvas2 } from '@/utils/imgUtils'
+import { useEmitt } from '@/hooks/web/useEmitt'
 const dvMainStore = dvMainStoreWithOut()
 const state = reactive({
   canvasDataPreview: null,
@@ -21,6 +23,8 @@ const state = reactive({
 })
 const dataInitState = ref(true)
 const dashboardPreview = ref(null)
+const previewCanvasContainer = ref(null)
+const downloadStatus = ref(false)
 
 const loadCanvasData = (dvId, weight?) => {
   dataInitState.value = false
@@ -58,8 +62,24 @@ onBeforeMount(() => {
   fromPage = route.query.from as unknown as string
   cache = route.query.cache as unknown as string
   loadCanvasData(dvId)
+  useEmitt({
+    name: 'canvasDownload',
+    callback: function () {
+      downloadH2('img')
+    }
+  })
 })
 
+const downloadH2 = type => {
+  downloadStatus.value = true
+  nextTick(() => {
+    const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')
+    downloadCanvas2(type, vueDom, state.dvInfo.name, () => {
+      downloadStatus.value = false
+    })
+  })
+}
+
 const onClickLeft = () => {
   router.replace({
     path: '/index',
@@ -72,7 +92,7 @@ const onClickLeft = () => {
 </script>
 
 <template>
-  <div class="dv-common-layout-mobile">
+  <div class="dv-common-layout-mobile" ref="previewCanvasContainer">
     <van-sticky>
       <van-nav-bar :title="state.dvInfo.name" left-arrow @click-left="onClickLeft" />
     </van-sticky>
@@ -84,7 +104,7 @@ const onClickLeft = () => {
       :component-data="state.canvasDataPreview"
       :canvas-style-data="state.canvasStylePreview"
       :canvas-view-info="state.canvasViewInfoPreview"
-      :download-status="false"
+      :download-status="downloadStatus"
     ></de-preview>
   </div>
 </template>