From 3574d310c86daa18ffd42841f0bec14f1bef58a3 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Wed, 15 May 2024 17:51:43 +0800
Subject: [PATCH] =?UTF-8?q?perf(X-Pack):=20=E5=AE=9A=E6=97=B6=E6=8A=A5?=
 =?UTF-8?q?=E5=91=8A=E8=B6=85=E9=95=BF=E4=BB=AA=E8=A1=A8=E6=9D=BF=E6=88=AA?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/DePreview.vue   | 21 ++++++++++++++++---
 .../views/chart/components/views/index.vue    |  7 ++++++-
 de-xpack                                      |  2 +-
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index 070ac231fc..67dc784914 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -12,6 +12,7 @@ import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
 import { isMainCanvas } from '@/utils/canvasUtils'
 import { activeWatermark } from '@/components/watermark/watermark'
 import { personInfoApi } from '@/api/user'
+import router from '@/router'
 const dvMainStore = dvMainStoreWithOut()
 const { pcMatrixCount, curComponent, mobileInPc } = storeToRefs(dvMainStore)
 
@@ -89,7 +90,9 @@ const userInfo = ref(null)
 const dashboardActive = computed(() => {
   return dvInfo.value.type === 'dashboard'
 })
-
+const isReport = computed(() => {
+  return !!router.currentRoute.value.query?.report
+})
 const canvasStyle = computed(() => {
   let style = {}
   if (canvasStyleData.value && canvasStyleData.value.width && isMainCanvas(canvasId.value)) {
@@ -109,6 +112,12 @@ const canvasStyle = computed(() => {
 })
 
 const getDownloadStatusMainHeight = () => {
+  if (!previewCanvas.value?.childNodes) {
+    nextTick(() => {
+      canvasStyle.value.height = getDownloadStatusMainHeight()
+    })
+    return '100%'
+  }
   const children = previewCanvas.value.childNodes
   let maxHeight = 0
 
@@ -130,7 +139,7 @@ watch(
   }
 )
 
-const restore = () => {
+const resetLayout = () => {
   if (downloadStatus.value) {
     return
   }
@@ -156,6 +165,12 @@ const restore = () => {
     }
   })
 }
+const restore = () => {
+  if (isReport.value) {
+    return
+  }
+  resetLayout()
+}
 
 const getShapeItemShowStyle = item => {
   return getShapeItemStyle(item, {
@@ -223,7 +238,7 @@ const initWatermark = (waterDomId = 'preview-canvas-main') => {
 
 onMounted(() => {
   initRefreshTimer()
-  restore()
+  resetLayout()
   window.addEventListener('resize', restore)
   const erd = elementResizeDetectorMaker()
   erd.listenTo(document.getElementById(domId), () => {
diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index f2f93c3c8c..b23431d3c2 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -599,7 +599,12 @@ const iconSize = computed<string>(() => {
 </script>
 
 <template>
-  <div class="chart-area" v-loading="loadingFlag" element-loading-background="rgba(0,0,0,0)">
+  <div
+    class="chart-area report-load"
+    :class="{ 'report-load-finish': !loadingFlag }"
+    v-loading="loadingFlag"
+    element-loading-background="rgba(0,0,0,0)"
+  >
     <div
       class="title-container"
       :style="{ 'justify-content': titleAlign, 'margin-bottom': marginBottom }"
diff --git a/de-xpack b/de-xpack
index f882c1de65..4cee837705 160000
--- a/de-xpack
+++ b/de-xpack
@@ -1 +1 @@
-Subproject commit f882c1de65bb6ac13ec51a6038e15858e92314d0
+Subproject commit 4cee837705f96d698139a7199f938ea8b8ac5b5d