refactor(图表): 明细表图片点击放大

core/core-frontend/src/components/visualization/ViewTrackBar.vue

@@ -35,7 +35,8 @@ const state = reactive({
     drill: t('visualization.drill'),
     linkage: t('visualization.linkage'),
     linkageAndDrill: t('visualization.linkage_and_drill'),
-    jump: t('visualization.jump')
+    jump: t('visualization.jump'),
+    enlarge: t('visualization.enlarge')
   }
 })
 

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

@@ -13,14 +13,19 @@ class ImageCell extends TableDataCell {
     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
+      const imgShowHeight = imgHeight / ratio
       this.textShape = this.addShape('image', {
         attrs: {
-          x,
-          y,
-          width,
-          height,
+          x: x + (imgShowWidth < width ? (width - imgShowWidth) / 2 : 0),
+          y: y + (imgShowHeight < height ? (height - imgShowHeight) / 2 : 0),
+          width: imgShowWidth,
+          height: imgShowHeight,
           img
         }
       })
@@ -118,12 +123,21 @@ export class TableInfo extends S2ChartView<TableSheet> {
     }
 
     const customAttr = parseJson(chart.customAttr)
+    const style = this.configStyle(chart)
+    // 自适应列宽模式下，URL 字段的宽度固定为 120
+    if (customAttr.basicStyle.tableColumnMode === 'adapt') {
+      const urlFields = fields.filter(field => axisMap[field.dataeaseName]?.deType === 7)
+      style.colCfg.widthByFieldValue = urlFields?.reduce((p, n) => {
+        p[n.chartShowName ?? n.name] = 120
+        return p
+      }, {})
+    }
     // options
     const s2Options: S2Options = {
       width: containerDom.offsetWidth,
       height: containerDom.offsetHeight,
       showSeriesNumber: customAttr.tableHeader.showIndex,
-      style: this.configStyle(chart),
+      style,
       conditions: this.configConditions(chart),
       tooltip: {
         getContainer: () => containerDom,

core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue

@@ -107,7 +107,9 @@ const state = reactive({
   totalItems: 0,
   showPage: false,
   pageStyle: 'simple',
-  currentPageSize: 0
+  currentPageSize: 0,
+  imgEnlarge: false,
+  imgSrc: ''
 })
 // 图表数据不用全响应式
 let chartData = shallowRef<Partial<Chart['data']>>({
@@ -408,6 +410,16 @@ const trackClick = trackAction => {
       if (mobileInPc.value && !inMobile.value) return
       emit('onJumpClick', jumpParam)
       break
+    case 'enlarge':
+      if (view.value.type === 'table-info') {
+        param.data.dimensionList?.forEach(d => {
+          if (d.id === state.curActionId) {
+            state.imgSrc = d.value
+            state.imgEnlarge = true
+          }
+        })
+      }
+      break
     default:
       break
   }
@@ -491,6 +503,14 @@ const trackMenuCalc = itemId => {
   ) {
     trackMenuInfo = ['linkageAndDrill']
   }
+  // 明细表 URL 字段图片放大
+  if (view.value.type === 'table-info') {
+    view.value.xAxis?.forEach(axis => {
+      if (axis.id === itemId) {
+        trackMenuInfo.push('enlarge')
+      }
+    })
+  }
   return trackMenuInfo
 }
 
@@ -651,6 +671,11 @@ const tablePageClass = computed(() => {
     </el-row>
     <chart-error v-if="isError" :err-msg="errMsg" />
   </div>
+  <el-dialog v-model="state.imgEnlarge" append-to-body>
+    <div class="enlarge-image">
+      <img :src="state.imgSrc" />
+    </div>
+  </el-dialog>
 </template>
 
 <style lang="less" scoped>
@@ -697,3 +722,13 @@ const tablePageClass = computed(() => {
   }
 }
 </style>
+<style lang="less">
+.enlarge-image {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  flex-direction: row;
+  justify-content: center;
+}
+</style>