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>