fix(嵌入式): 修复嵌入式移动端bug

This commit is contained in:
dataeaseShu 2024-05-08 18:07:49 +08:00
parent 3a067334f0
commit 5972cfe12d
2 changed files with 29 additions and 6 deletions

View File

@ -46,7 +46,6 @@ const iframeSrc = computed(() => {
? `${embeddedStore.baseUrl}mobile.html#/panel`
: './mobile.html#/panel'
})
const handleLoad = () => {
mobileStatusChange(
'panelInit',
@ -67,7 +66,19 @@ const componentDataNotInMobile = computed(() => {
return componentData.value.filter(ele => !ele.inMobile)
})
const newWindow = ref()
const hanedleMessage = event => {
if (event.data?.msgOrigin === 'de-fit2cloud' && !!embeddedStore.token) {
const params = {
embeddedToken: embeddedStore.token
}
params['de-embedded'] = true
const contentWindow = newWindow.value.contentWindow
console.log('call back from dataease!', contentWindow)
contentWindow.postMessage(params, '*')
return
}
if (event.data.type === 'panelInit') {
loadCanvasData()
}
@ -214,7 +225,7 @@ const save = () => {
{{ dvInfo.name }}
</div>
<div class="config-panel-content" v-loading="mobileLoading">
<iframe :src="iframeSrc" frameborder="0" width="375" />
<iframe ref="newWindow" :src="iframeSrc" frameborder="0" width="375" />
</div>
<div class="config-panel-foot"></div>
</div>

View File

@ -3,6 +3,7 @@ import { onBeforeMount, ref, onBeforeUnmount } from 'vue'
import { useEmitt } from '@/hooks/web/useEmitt'
import eventBus from '@/utils/eventBus'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { XpackComponent } from '@/components/plugin'
import DePreviewMobile from './MobileInPc.vue'
const panelInit = ref(false)
const dvMainStore = dvMainStoreWithOut()
@ -61,7 +62,7 @@ const hanedleMessage = event => {
}
if (event.data.type === 'mobileSave') {
window.top.postMessage(
window.parent.postMessage(
{
type: 'mobileSaveFromMobile',
value: dvMainStore.componentData.reduce((pre, next) => {
@ -89,8 +90,15 @@ const hanedleMessage = event => {
}
}
onBeforeMount(async () => {
window.top.postMessage({ type: 'panelInit', value: true }, '*')
const initIframe = () => {
panelInit.value = false
setTimeout(() => {
panelInit.value = true
})
}
onBeforeMount(() => {
window.parent.postMessage({ type: 'panelInit', value: true }, '*')
window.addEventListener('message', hanedleMessage)
useEmitt({
name: 'onMobileStatusChange',
@ -101,7 +109,7 @@ onBeforeMount(async () => {
})
const mobileStatusChange = (type, value) => {
window.top.postMessage({ type, value }, '*')
window.parent.postMessage({ type, value }, '*')
if (type === 'delFromMobile') {
eventBus.emit('removeMatrixItemById-canvas-main', value)
}
@ -116,6 +124,10 @@ onBeforeUnmount(() => {
<div class="panel-mobile">
<de-preview-mobile v-if="panelInit"></de-preview-mobile>
</div>
<XpackComponent
@initIframe="initIframe"
jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvRW50cmFuY2Vz"
/>
</template>
<style lang="less" scoped>