feat: S2

frontend/src/views/chart/chart/common/common_table.js

@@ -8,3 +8,30 @@ export function getCustomTheme(chart) {
   theme.background = background
   return theme
 }
+
+export function getSize(chart) {
+  const size = {}
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    // size
+    if (customAttr.size) {
+      const s = JSON.parse(JSON.stringify(customAttr.size))
+      size.colCfg = {
+        height: s.tableTitleHeight
+      }
+      size.cellCfg = {
+        height: s.tableItemHeight
+      }
+      if (!s.tableColumnMode || s.tableColumnMode === 'adapt') {
+        delete size.cellCfg.width
+        size.layoutWidthType = 'compact'
+      } else {
+        delete size.layoutWidthType
+        size.cellCfg.width = s.tableColumnWidth
+      }
+    }
+  }
+
+  return size
+}

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

 import { TableSheet } from '@antv/s2'
-import { getCustomTheme } from '@/views/chart/chart/common/common_table'
+import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table'
 
 export function baseTableInfo(s2, container, chart, action, tableData) {
   const containerDom = document.getElementById(container)
@@ -38,11 +38,60 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
     width: containerDom.offsetWidth,
     height: containerDom.offsetHeight,
     // showSeriesNumber: true
-    style: {
-      cellCfg: {
-        width: 500
-      }
+    style: getSize(chart)
+  }
+
+  // 开始渲染
+  if (s2) {
+    s2.destroy()
+  }
+  s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
+
+  // theme
+  const customTheme = getCustomTheme(chart)
+  s2.setThemeCfg({ theme: customTheme })
+
+  return s2
+}
+
+export function baseTableNormal(s2, container, chart, action, tableData) {
+  const containerDom = document.getElementById(container)
+
+  // data
+  const fields = chart.data.fields
+  if (!fields || fields.length === 0) {
+    if (s2) {
+      s2.destroy()
     }
+    return
+  }
+
+  const columns = []
+  const meta = []
+  fields.forEach(ele => {
+    columns.push(ele.dataeaseName)
+
+    meta.push({
+      field: ele.dataeaseName,
+      name: ele.name
+    })
+  })
+
+  // data config
+  const s2DataConfig = {
+    fields: {
+      columns: columns
+    },
+    meta: meta,
+    data: tableData
+  }
+
+  // options
+  const s2Options = {
+    width: containerDom.offsetWidth,
+    height: containerDom.offsetHeight,
+    // showSeriesNumber: true
+    style: getSize(chart)
   }
 
   // 开始渲染

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

@@ -5,7 +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-info'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom" />
+      <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" />
       <el-row v-show="chart.type === 'table-info'" class="table-page">
         <span class="total-style">
           {{ $t('chart.total') }}
@@ -33,7 +34,7 @@
 import { uuid } from 'vue-uuid'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { baseTableInfo } from '@/views/chart/chart/table/table-info'
+import { baseTableInfo, baseTableNormal } from '@/views/chart/chart/table/table-info'
 
 export default {
   name: 'ChartComponentS2',
@@ -186,6 +187,8 @@ export default {
       }
       if (chart.type === 'table-info') {
         this.myChart = baseTableInfo(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
+      } else if (chart.type === 'table-normal') {
+        this.myChart = baseTableNormal(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
       } else {
         if (this.myChart) {
           this.antVRenderStatus = false
@@ -336,9 +339,12 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.table-dom{
+.table-dom-info{
   height:calc(100% - 36px);
 }
+.table-dom-normal{
+  height:100%;
+}
 .table-page{
   display: flex;
   align-items: center;