feat: Echarts 表格联动跳转

core/frontend/src/components/canvas/components/editor/SettingMenu.vue

@@ -220,13 +220,11 @@ export default {
     },
     linkJumpSetShow() {
       return this.curComponent.type === 'view' &&
-        !this.jumpExcludeViewType.includes(this.curComponent.propValue.innerType) &&
-        !(this.curComponent.propValue.innerType?.includes('table') && this.curComponent.propValue.render === 'echarts')
+        !this.jumpExcludeViewType.includes(this.curComponent.propValue.innerType)
     },
     linkageSettingShow() {
       return this.curComponent.type === 'view' &&
-        !this.linkageExcludeViewType.includes(this.curComponent.propValue.innerType) &&
-        !(this.curComponent.propValue.innerType?.includes('table') && this.curComponent.propValue.render === 'echarts')
+        !this.linkageExcludeViewType.includes(this.curComponent.propValue.innerType)
     },
     panelInfo() {
       return this.$store.state.panel.panelInfo

core/frontend/src/components/canvas/customComponent/UserView.vue

@@ -100,7 +100,10 @@
       :ref="element.propValue.id"
       :show-summary="chart.type === 'table-normal'"
       :chart="chart"
+      :track-menu="trackMenu"
       class="table-class"
+      @onChartClick="chartClick"
+      @onJumpClick="jumpClick"
       @onPageChange="pageClick"
     />
     <label-normal
@@ -749,7 +752,7 @@ export default {
     clearPanelLinkage(param) {
       if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) {
         try {
-          this.$refs[this.element.propValue.id]?.reDrawView()
+          this.$refs[this.element.propValue.id]?.reDrawView?.()
         } catch (e) {
           console.error('reDrawView-error：', this.element.propValue.id)
         }

core/frontend/src/views/chart/components/table/TableNormal.vue

@@ -2,8 +2,15 @@
   <div
     ref="tableContainer"
     :style="bg_class"
-    style="padding: 8px;width: 100%;height: 100%;overflow: hidden;"
+    style="padding: 8px;width: 100%;height: 100%;overflow: hidden;position: relative;"
   >
+    <view-track-bar
+      ref="viewTrack"
+      :track-menu="trackMenu"
+      :style="trackBarStyle"
+      class="track-bar"
+      @trackClick="trackClick"
+    />
     <el-row
       style="height: 100%;"
       :style="cssVars"
@@ -28,6 +35,7 @@
         :show-summary="showSummary"
         :summary-method="summaryMethod"
         :index-config="{seqMethod}"
+        @cell-click="cellClick"
       >
         <ux-table-column
           type="index"
@@ -95,13 +103,13 @@
 
 <script>
 import { hexColorToRGBA } from '../../chart/util'
-import eventBus from '@/components/canvas/utils/eventBus'
 import { DEFAULT_COLOR_CASE, DEFAULT_SCROLL, DEFAULT_SIZE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart'
 import { mapState } from 'vuex'
 import DePagination from '@/components/deCustomCm/pagination.js'
+import ViewTrackBar from '@/components/canvas/components/editor/ViewTrackBar.vue'
 export default {
   name: 'TableNormal',
-  components: { DePagination },
+  components: { ViewTrackBar, DePagination },
   props: {
     chart: {
       type: Object,
@@ -123,6 +131,18 @@ export default {
       type: Boolean,
       required: false,
       default: true
+    },
+    trackMenu: {
+      type: Array,
+      required: false,
+      default: function() {
+        return ['drill']
+      }
+    },
+    searchCount: {
+      type: Number,
+      required: false,
+      default: 0
     }
   },
   data() {
@@ -186,7 +206,13 @@ export default {
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap'
-      }
+      },
+      trackBarStyle: {
+        position: 'absolute',
+        left: '0px',
+        top: '0px'
+      },
+      pointParam: null
     }
   },
   computed: {
@@ -234,11 +260,8 @@ export default {
   },
   mounted() {
     this.init()
-    // 监听元素变动事件
-    eventBus.$on('resizing', this.chartResize)
   },
   beforeDestroy() {
-    eventBus.$off('resizing', this.chartResize)
     clearInterval(this.scrollTimer)
     window.removeEventListener('resize', this.calcHeightDelay)
   },
@@ -614,6 +637,83 @@ export default {
           })
         }, senior.scrollCfg.interval)
       }
+    },
+    cellClick(row, col, cell, ev) {
+      const nameIdMap = this.chart.data.fields.reduce((pre, next) => {
+        pre[next['dataeaseName']] = next['id']
+        return pre
+      }, {})
+      const dimensionList = []
+      for (const key in row) {
+        if (nameIdMap[key]) {
+          dimensionList.push({ id: nameIdMap[key], value: row[key] })
+        }
+      }
+      const parent = cell.offsetParent
+      // 元素离顶部距离减去滚动距离加上表头高度加上点击位置高度
+      const y = cell.offsetTop - parent.scrollTop + parent.offsetTop + ev.offsetY
+      const position = {
+        x: cell.offsetLeft + ev.offsetX,
+        y
+      }
+      this.antVActionPost(dimensionList, nameIdMap[col.property] || 'null', position)
+    },
+    antVActionPost(dimensionList, name, param) {
+      this.pointParam = {
+        data: {
+          dimensionList: dimensionList,
+          quotaList: [],
+          name: name,
+          sourceType: this.chart.type
+        }
+      }
+
+      if (this.trackMenu.length < 2) { // 只有一个事件直接调用
+        this.trackClick(this.trackMenu[0])
+      } else { // 视图关联多个事件
+        this.trackBarStyle.left = param.x + 'px'
+        this.trackBarStyle.top = (param.y + 10) + 'px'
+        this.$refs.viewTrack.trackButtonClick()
+      }
+    },
+    trackClick(trackAction) {
+      const param = this.pointParam
+      if (!param?.data?.dimensionList) {
+        // 地图提示没有关联字段 其他没有维度信息的 直接返回
+        if (this.chart.type === 'map') {
+          this.$warning(this.$t('panel.no_drill_field'))
+        }
+        return
+      }
+      const linkageParam = {
+        option: 'linkage',
+        name: this.pointParam.data.name,
+        viewId: this.chart.id,
+        dimensionList: this.pointParam.data.dimensionList,
+        quotaList: this.pointParam.data.quotaList
+      }
+      const jumpParam = {
+        option: 'jump',
+        name: this.pointParam.data.name,
+        viewId: this.chart.id,
+        dimensionList: this.pointParam.data.dimensionList,
+        quotaList: this.pointParam.data.quotaList,
+        sourceType: this.pointParam.data.sourceType
+      }
+      switch (trackAction) {
+        case 'drill':
+          this.currentPage.page = 1
+          this.$emit('onChartClick', this.pointParam)
+          break
+        case 'linkage':
+          this.$store.commit('addViewTrackFilter', linkageParam)
+          break
+        case 'jump':
+          this.$emit('onJumpClick', jumpParam)
+          break
+        default:
+          break
+      }
     }
   }
 }