feat: S2 Event

frontend/src/components/canvas/custom-component/UserView.vue

@@ -55,7 +55,7 @@
       class="table-class"
     />
     <label-normal v-if="labelShowFlag" :ref="element.propValue.id" :chart="chart" class="table-class" />
-    <div style="position: absolute;left: 20px;bottom:14px;">
+    <div style="position: absolute;left: 8px;bottom:8px;">
       <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
     </div>
   </div>

frontend/src/views/chart/chart/table/table-info.js

@@ -15,14 +15,56 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
 
   const columns = []
   const meta = []
-  fields.forEach(ele => {
-    columns.push(ele.dataeaseName)
 
-    meta.push({
-      field: ele.dataeaseName,
-      name: ele.name
+  // add drill list
+  if (chart.drill) {
+    let drillFields = []
+    try {
+      drillFields = JSON.parse(chart.drillFields)
+    } catch (err) {
+      drillFields = JSON.parse(JSON.stringify(chart.drillFields))
+    }
+
+    const drillField = drillFields[chart.drillFilters.length]
+
+    const drillFilters = JSON.parse(JSON.stringify(chart.drillFilters))
+    const drillExp = drillFilters[drillFilters.length - 1].datasetTableField
+
+    // 移除所有下钻字段
+    const removeField = []
+    for (let i = 0; i < chart.drillFilters.length; i++) {
+      const ele = chart.drillFilters[i].datasetTableField
+      removeField.push(ele.dataeaseName)
+    }
+
+    // build field
+    fields.forEach(ele => {
+      if (removeField.indexOf(ele.dataeaseName) < 0) {
+        // 用下钻字段替换当前字段
+        if (drillExp.dataeaseName === ele.dataeaseName) {
+          columns.push(drillField.dataeaseName)
+          meta.push({
+            field: drillField.dataeaseName,
+            name: drillField.name
+          })
+        } else {
+          columns.push(ele.dataeaseName)
+          meta.push({
+            field: ele.dataeaseName,
+            name: ele.name
+          })
+        }
+      }
+    })
+  } else {
+    fields.forEach(ele => {
+      columns.push(ele.dataeaseName)
+      meta.push({
+        field: ele.dataeaseName,
+        name: ele.name
+      })
     })
-  })
+  }
 
   // data config
   const s2DataConfig = {
@@ -71,14 +113,50 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
 
   const columns = []
   const meta = []
-  fields.forEach(ele => {
-    columns.push(ele.dataeaseName)
 
-    meta.push({
-      field: ele.dataeaseName,
-      name: ele.name
+  // add drill list
+  if (chart.drill) {
+    const drillFields = JSON.parse(chart.drillFields)
+    const drillField = drillFields[chart.drillFilters.length]
+
+    const drillFilters = JSON.parse(JSON.stringify(chart.drillFilters))
+    const drillExp = drillFilters[drillFilters.length - 1].datasetTableField
+
+    // 移除所有下钻字段
+    const removeField = []
+    for (let i = 0; i < chart.drillFilters.length; i++) {
+      const ele = chart.drillFilters[i].datasetTableField
+      removeField.push(ele.dataeaseName)
+    }
+
+    // build field
+    fields.forEach(ele => {
+      if (removeField.indexOf(ele.dataeaseName) < 0) {
+        // 用下钻字段替换当前字段
+        if (drillExp.dataeaseName === ele.dataeaseName) {
+          columns.push(drillField.dataeaseName)
+          meta.push({
+            field: drillField.dataeaseName,
+            name: drillField.name
+          })
+        } else {
+          columns.push(ele.dataeaseName)
+          meta.push({
+            field: ele.dataeaseName,
+            name: ele.name
+          })
+        }
+      }
+    })
+  } else {
+    fields.forEach(ele => {
+      columns.push(ele.dataeaseName)
+      meta.push({
+        field: ele.dataeaseName,
+        name: ele.name
+      })
     })
-  })
+  }
 
   // data config
   const s2DataConfig = {
@@ -103,6 +181,9 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
   }
   s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
 
+  // click
+  s2.on(S2Event.DATA_CELL_CLICK, action)
+
   // theme
   const customTheme = getCustomTheme(chart)
   s2.setThemeCfg({ theme: customTheme })

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

@@ -5,8 +5,8 @@
       <p style="padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;">{{ chart.title }}</p>
     </span>
     <div style="width: 100%;overflow: hidden;padding: 8px;" :style="{height:chartHeight,background:container_bg_class.background}">
-      <div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" />
-      <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-info" />
+      <div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'" />
+      <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-info-drill' : 'table-dom-info'" />
       <el-row v-show="chart.type === 'table-info'" class="table-page">
         <span class="total-style">
           {{ $t('chart.total') }}
@@ -207,18 +207,37 @@ export default {
     },
 
     antVAction(param) {
+      console.log(param, 'param')
       const cell = this.myChart.getCell(param.target)
       const meta = cell.getMeta()
-      console.log(meta)
+      console.log(meta, 'meta')
 
       let xAxis = []
       if (this.chart.xaxis) {
         xAxis = JSON.parse(this.chart.xaxis)
       }
+      let drillFields = []
+      if (this.chart.drillFields) {
+        try {
+          drillFields = JSON.parse(this.chart.drillFields)
+        } catch (err) {
+          drillFields = JSON.parse(JSON.stringify(this.chart.drillFields))
+        }
+      }
+
       let field = {}
-      if (meta.colIndex < xAxis.length) {
-        field = xAxis[meta.colIndex]
+      if (this.chart.drill) {
+        field = drillFields[this.chart.drillFilters.length]
+        // check click field is drill?
+        if (field.dataeaseName !== meta.valueField) {
+          return
+        }
+      } else {
+        if (meta.colIndex < xAxis.length) {
+          field = xAxis[meta.colIndex]
+        }
       }
+
       const dimensionList = []
       dimensionList.push({ id: field.id, value: meta.fieldValue })
       this.pointParam = {
@@ -226,13 +245,13 @@ export default {
           dimensionList: dimensionList
         }
       }
-      console.log(this.pointParam)
+      console.log(this.pointParam, 'pointParam')
 
       if (this.trackMenu.length < 2) { // 只有一个事件直接调用
         this.trackClick(this.trackMenu[0])
       } else { // 视图关联多个事件
-        this.trackBarStyle.left = 50 + 'px'
-        this.trackBarStyle.top = (50 + 10) + 'px'
+        this.trackBarStyle.left = param.x + 'px'
+        this.trackBarStyle.top = (param.y + 10) + 'px'
         this.$refs.viewTrack.trackButtonClick()
       }
     },
@@ -360,6 +379,12 @@ export default {
 .table-dom-normal{
   height:100%;
 }
+.table-dom-info-drill{
+  height:calc(100% - 36px - 12px);
+}
+.table-dom-normal-drill{
+  height:calc(100% - 12px);
+}
 .table-page{
   display: flex;
   align-items: center;

frontend/src/views/chart/view/ChartEdit.vue

@@ -483,7 +483,7 @@
                     </div>
                   </el-row>
                   <el-row
-                    v-if="view.type && !view.type.includes('table') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud'"
+                    v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud'"
                     class="padding-lr"
                     style="margin-top: 6px;"
                   >
@@ -798,7 +798,7 @@
               </div>
             </div>
           </div>
-          <div style="position: absolute;left: 20px;bottom:10px;">
+          <div style="position: absolute;left: 8px;bottom:8px;">
             <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
           </div>
         </el-row>
@@ -1325,7 +1325,7 @@ export default {
         view.customAttr.label.show = true
       }
       if (view.type === 'liquid' ||
-          view.type.includes('table') ||
+          (view.type.includes('table') && view.render === 'echarts') ||
           view.type.includes('text') ||
           view.type.includes('gauge')) {
         view.drillFields = []
@@ -1347,22 +1347,6 @@ export default {
       delete view.data
       return view
     },
-    save(getData, trigger, needRefreshGroup = false, switchType = false) {
-      const view = this.buildParam(getData, trigger, needRefreshGroup, switchType)
-      if (!view) return
-      post('/chart/view/save', view).then(response => {
-        if (getData) {
-          this.resetDrill()
-          this.getData(response.data.id)
-        } else {
-          this.getChart(response.data.id)
-        }
-        if (needRefreshGroup) {
-          this.refreshGroup(view)
-        }
-        this.closeChangeChart()
-      })
-    },
     calcData(getData, trigger, needRefreshGroup = false, switchType = false) {
       this.hasEdit = true
       const view = this.buildParam(getData, trigger, needRefreshGroup, switchType)
@@ -1501,14 +1485,7 @@ export default {
           this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
           this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
           this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
-
-          response.data.data = this.data
-          this.chart = response.data
-
-          this.chart.drill = this.drill
-          // this.httpRequest.status = true
         }).catch(err => {
-          // this.resetView()
           this.httpRequest.status = err.response.data.success
           this.httpRequest.msg = err.response.data.message
           return true