feat(图表): 明细表合并单元格支持显示图片 #14767 (#15360)

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts

@@ -1,5 +1,6 @@
 import {
   type LayoutResult,
+  MergedCell,
   S2DataConfig,
   S2Event,
   S2Options,
@@ -26,33 +27,15 @@ import {
   summaryRowStyle,
   configEmptyDataStyle,
   getLeafNodes,
-  getColumns
+  getColumns,
+  drawImage
 } from '@/views/chart/components/js/panel/common/common_table'
 
 const { t } = useI18n()
+
 class ImageCell extends CustomDataCell {
   protected drawTextShape(): void {
-    const img = new Image()
-    const { x, y, width, height, fieldValue } = this.meta
-    img.src = fieldValue as string
-    img.setAttribute('crossOrigin', 'anonymous')
-    img.onload = () => {
-      !this.cfg.children && (this.cfg.children = [])
-      const { width: imgWidth, height: imgHeight } = img
-      const ratio = Math.max(imgWidth / width, imgHeight / height)
-      // 不铺满，部分留白
-      const imgShowWidth = (imgWidth / ratio) * 0.8
-      const imgShowHeight = (imgHeight / ratio) * 0.8
-      this.textShape = this.addShape('image', {
-        attrs: {
-          x: x + (imgShowWidth < width ? (width - imgShowWidth) / 2 : 0),
-          y: y + (imgShowHeight < height ? (height - imgShowHeight) / 2 : 0),
-          width: imgShowWidth,
-          height: imgShowHeight,
-          img
-        }
-      })
-    }
+    drawImage.apply(this)
   }
 }
 /**

core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts

@@ -1567,6 +1567,7 @@ export function configMergeCells(chart: Chart, options: S2Options, dataConfig: S
       if (showIndex && meta.colIndex === 0) {
         meta.fieldValue = getRowIndex(mergedCellsInfo, meta)
       }
+      meta.deFieldType = fieldsMap[meta.valueField]?.deType
       return new CustomMergedCell(sheet, cells, meta)
     }
   }
@@ -1594,6 +1595,7 @@ export function getRowIndex(mergedCellsInfo: MergedCellInfo[][], meta: ViewMeta)
   }, 0)
   return curRangeStartIndex - lostCells + 1
 }
+
 class CustomMergedCell extends MergedCell {
   protected drawBackgroundShape() {
     const allPoints = getPolygonPoints(this.cells)
@@ -1608,6 +1610,13 @@ class CustomMergedCell extends MergedCell {
       lineHeight: cellTheme.horizontalBorderWidth
     })
   }
+  drawTextShape(): void {
+    if (this.meta.deFieldType === 7) {
+      drawImage.apply(this)
+    } else {
+      super.drawTextShape()
+    }
+  }
 }
 
 export class CustomDataCell extends TableDataCell {
@@ -2015,3 +2024,27 @@ export const getColumns = (fields, cols: Array<ColumnNode>) => {
   }
   return result
 }
+
+export function drawImage() {
+  const img = new Image()
+  const { x, y, width, height, fieldValue } = this.meta
+  img.src = fieldValue as string
+  img.setAttribute('crossOrigin', 'anonymous')
+  img.onload = () => {
+    !this.cfg.children && (this.cfg.children = [])
+    const { width: imgWidth, height: imgHeight } = img
+    const ratio = Math.max(imgWidth / width, imgHeight / height)
+    // 不铺满，部分留白
+    const imgShowWidth = (imgWidth / ratio) * 0.8
+    const imgShowHeight = (imgHeight / ratio) * 0.8
+    this.textShape = this.addShape('image', {
+      attrs: {
+        x: x + (imgShowWidth < width ? (width - imgShowWidth) / 2 : 0),
+        y: y + (imgShowHeight < height ? (height - imgShowHeight) / 2 : 0),
+        width: imgShowWidth,
+        height: imgShowHeight,
+        img
+      }
+    })
+  }
+}