fix(图表): 修复使用tab组件展示多个地图时,导出仪表板为png时,地图不显示的问题 #17700

core/core-frontend/src/utils/canvasUtils.ts

@@ -1112,3 +1112,29 @@ export function syncViewTitle(element) {
     }
   }
 }
+
+// 地图类图表，需要预先准备图片
+const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map']
+
+/**
+ * 获取画布中所有地图类图表的元素ID
+ * @param canvasDataPreview
+ */
+export function getMapElementIds(canvasDataPreview) {
+  const mapElementIds = []
+  canvasDataPreview.forEach(item => {
+    if (mapChartTypes.includes(item.innerType)) {
+      mapElementIds.push(item.id)
+    }
+    if (item.component === 'DeTabs') {
+      item.propValue?.forEach(tabItem => {
+        tabItem.componentData?.forEach(tabComponent => {
+          if (mapChartTypes.includes(tabComponent.innerType)) {
+            mapElementIds.push(tabComponent.id)
+          }
+        })
+      })
+    }
+  })
+  return mapElementIds
+}

core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue

@@ -7,7 +7,12 @@ import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import PreviewHead from '@/views/data-visualization/PreviewHead.vue'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
 import ArrowSide from '@/views/common/DeResourceArrow.vue'
-import { initCanvasData, initCanvasDataPrepare, onInitReady } from '@/utils/canvasUtils'
+import {
+  getMapElementIds,
+  initCanvasData,
+  initCanvasDataPrepare,
+  onInitReady
+} from '@/utils/canvasUtils'
 import { useAppStoreWithOut } from '@/store/modules/app'
 import { useMoveLine } from '@/hooks/web/useMoveLine'
 import { Icon } from '@/components/icon-custom'
@@ -129,14 +134,10 @@ const loadCanvasData = (dvId, weight?) => {
     }
   )
 }
-// 地图类图表，需要预先准备图片
-const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map']
+
 const downloadH2 = type => {
   downloadStatus.value = true
-  const mapElementIds =
-    state.canvasDataPreview
-      ?.filter(ele => mapChartTypes.includes(ele.innerType))
-      .map(ele => ele.id) || []
+  const mapElementIds = getMapElementIds(state.canvasDataPreview)
   mapElementIds.forEach(id => useEmitt().emitter.emit('l7-prepare-picture', id))
   nextTick(() => {
     const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')
@@ -189,10 +190,7 @@ const checkTemplate = () => {
 
 const fileDownload = (downloadType, attachParams) => {
   downloadStatus.value = true
-  const mapElementIds =
-    state.canvasDataPreview
-      ?.filter(ele => mapChartTypes.includes(ele.innerType))
-      .map(ele => ele.id) || []
+  const mapElementIds = getMapElementIds(state.canvasDataPreview)
   mapElementIds.forEach(id => useEmitt().emitter.emit('l7-prepare-picture', id))
   nextTick(() => {
     const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')

core/core-frontend/src/views/data-visualization/PreviewShow.vue

@@ -8,7 +8,12 @@ import PreviewHead from '@/views/data-visualization/PreviewHead.vue'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
 import { storeToRefs } from 'pinia'
 import { useAppStoreWithOut } from '@/store/modules/app'
-import { initCanvasData, initCanvasDataPrepare, onInitReady } from '@/utils/canvasUtils'
+import {
+  getMapElementIds,
+  initCanvasData,
+  initCanvasDataPrepare,
+  onInitReady
+} from '@/utils/canvasUtils'
 import { useMoveLine } from '@/hooks/web/useMoveLine'
 import { Icon } from '@/components/icon-custom'
 import { download2AppTemplate, downloadCanvas2 } from '@/utils/imgUtils'
@@ -119,14 +124,9 @@ const loadCanvasData = (dvId, weight?, ext?) => {
     }
   )
 }
-// 地图类图表，需要预先准备图片
-const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map']
 const download = type => {
   downloadStatus.value = true
-  const mapElementIds =
-    state.canvasDataPreview
-      ?.filter(ele => mapChartTypes.includes(ele.innerType))
-      .map(ele => ele.id) || []
+  const mapElementIds = getMapElementIds(state.canvasDataPreview)
   mapElementIds.forEach(id => useEmitt().emitter.emit('l7-prepare-picture', id))
   setTimeout(() => {
     const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')
@@ -143,10 +143,7 @@ const download = type => {
 }
 const fileDownload = (downloadType, attachParams) => {
   downloadStatus.value = true
-  const mapElementIds =
-    state.canvasDataPreview
-      ?.filter(ele => mapChartTypes.includes(ele.innerType))
-      .map(ele => ele.id) || []
+  const mapElementIds = getMapElementIds(state.canvasDataPreview)
   mapElementIds.forEach(id => useEmitt().emitter.emit('l7-prepare-picture', id))
   nextTick(() => {
     const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')