perf(X-Pack): 定时报告超长仪表板截图

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), () => {

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 }"

de-xpack

@@ -1 +1 @@
-Subproject commit f882c1de65bb6ac13ec51a6038e15858e92314d0
+Subproject commit 4cee837705f96d698139a7199f938ea8b8ac5b5d