refactor(数据大屏): 优化全屏退出逻辑,解决部分图表因销毁异常导致无法退出全屏问题

This commit is contained in:
wangjiahao 2024-08-09 10:42:12 +08:00
parent 91508f7091
commit c1171f3efc
3 changed files with 27 additions and 7 deletions

View File

@ -530,8 +530,12 @@ onMounted(() => {
resizeObserver.observe(containerDom)
})
onBeforeUnmount(() => {
myChart?.destroy()
resizeObserver?.disconnect()
try {
myChart?.destroy()
resizeObserver?.disconnect()
} catch (e) {
console.log(e)
}
})
</script>

View File

@ -561,10 +561,14 @@ onMounted(() => {
resizeObserver.observe(document.getElementById(containerId))
})
onBeforeUnmount(() => {
myChart?.facet.timer?.stop()
myChart?.destroy()
myChart = null
resizeObserver?.disconnect()
try {
myChart?.facet.timer?.stop()
myChart?.destroy()
myChart = null
resizeObserver?.disconnect()
} catch (e) {
console.log(e)
}
})
const autoStyle = computed(() => {

View File

@ -3,6 +3,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { computed, ref } from 'vue'
import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
import { storeToRefs } from 'pinia'
import { ElScrollbar } from 'element-plus-secondary'
const dvMainStore = dvMainStoreWithOut()
const { fullscreenFlag } = storeToRefs(dvMainStore)
@ -57,13 +58,24 @@ const contentInnerClass = computed(() => {
}
})
const outerStyle = computed(() => {
return {
flexDirection: props.canvasStylePreview.screenAdaptor === 'heightFirst' ? 'row' : 'column'
}
})
defineExpose({
restore
})
</script>
<template>
<div id="de-preview-content" :class="{ 'de-screen-full': fullscreenFlag }" class="content-outer">
<div
id="de-preview-content"
:class="{ 'de-screen-full': fullscreenFlag }"
:style="outerStyle"
class="content-outer"
>
<div class="content-inner" :class="contentInnerClass">
<de-preview
ref="dePreviewRef"