Merge pull request #9530 from dataease/pr@dev-v2_st

fix(嵌入式): 修复嵌入式场景下仪表板切换到移动端无法正常显示的问题
This commit is contained in:
dataeaseShu 2024-05-08 12:41:38 +08:00 committed by GitHub
commit 853fcb75ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,5 +1,6 @@
<script lang="ts" setup>
import { ref, onMounted, unref, onBeforeUnmount, computed } from 'vue'
import { XpackComponent } from '@/components/plugin'
import { ElMessage, ElMessageBox } from 'element-plus-secondary'
import MobileBackgroundSelector from './MobileBackgroundSelector.vue'
import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
@ -43,9 +44,20 @@ const embeddedStore = useEmbedded()
const iframeSrc = computed(() => {
return embeddedStore.baseUrl
? `${embeddedStore.baseUrl}/mobile.html#/panel`
? `${embeddedStore.baseUrl}mobile.html#/panel`
: './mobile.html#/panel'
})
const openHandler = ref(null)
const initOpenHandler = newWindow => {
if (openHandler?.value && !!embeddedStore.baseUrl) {
const pm = {
methodName: 'initOpenHandler',
args: newWindow
}
openHandler.value.invokeMethod(pm)
}
}
const handleLoad = () => {
mobileStatusChange(
@ -134,6 +146,7 @@ const setMobileStyle = debounce(() => {
transformOrigin: '0 0'
}
}, 100)
const newWindow = ref()
onMounted(() => {
window.addEventListener('message', hanedleMessage)
window.addEventListener('resize', setMobileStyle)
@ -145,6 +158,9 @@ onMounted(() => {
}
})
setMobileStyle()
setTimeout(() => {
initOpenHandler(newWindow.value)
}, 300)
})
onBeforeUnmount(() => {
@ -214,7 +230,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>
@ -258,6 +274,7 @@ const save = () => {
</div>
</div>
</div>
<XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
</template>
<style lang="less" scoped>