Merge pull request #9306 from dataease/pr@dev-v2@feat_table_pivot_tree_layout_mode

Pr@dev v2@feat table pivot tree layout mode

core/core-frontend/src/locales/zh-CN.ts

@@ -1110,7 +1110,10 @@ export default {
     quadrant: '象限',
     font_size: '字号',
     word_size_range: '字号区间',
-    word_spacing: '文字间隔'
+    word_spacing: '文字间隔',
+    table_layout_mode: '展示形式',
+    table_layout_grid: '平铺展示',
+    table_layout_tree: '树形展示'
   },
   dataset: {
     scope_edit: '仅编辑时生效',

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -96,6 +96,10 @@ declare interface ChartBasicStyle {
    * 表格分页大小
    */
   tablePageSize: number
+  /**
+   * 表格展示形式,平铺和树形
+   */
+  tableLayoutMode: 'grid' | 'tree'
   /**
    * 仪表盘样式
    */

core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue

@@ -198,6 +198,23 @@ onMounted(() => {
       </el-checkbox>
     </el-form-item>
 
+    <el-form-item
+      class="form-item"
+      v-if="showProperty('tableLayoutMode')"
+      :label="t('chart.table_layout_mode')"
+      :class="'form-item-' + themes"
+    >
+      <el-radio-group
+        size="small"
+        :effect="themes"
+        v-model="state.basicStyleForm.tableLayoutMode"
+        @change="changeBasicStyle('tableLayoutMode')"
+      >
+        <el-radio label="grid">{{ t('chart.table_layout_grid') }}</el-radio>
+        <el-radio label="tree">{{ t('chart.table_layout_tree') }}</el-radio>
+      </el-radio-group>
+    </el-form-item>
+
     <div class="alpha-setting" v-if="showProperty('alpha')">
       <label class="alpha-label" :class="{ dark: 'dark' === themes }">
         {{ t('chart.not_alpha') }}

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -1382,7 +1382,8 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
   innerRadius: 60,
   showZoom: true,
   zoomButtonColor: '#aaa',
-  zoomBackground: '#fff'
+  zoomBackground: '#fff',
+  tableLayoutMode: 'grid'
 }
 
 export const BASE_VIEW_CONFIG = {

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

@@ -50,7 +50,9 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
 
   drawChart(drawOptions: G2PlotDrawOptions<G2Liquid>): G2Liquid {
     const { chart, container } = drawOptions
-    if (chart?.data) {
+    if (!chart.data?.series) {
+      return
+    }
     const initOptions: LiquidOptions = {
       percent: 0
     }
@@ -58,7 +60,6 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
     // 开始渲染
     return new G2Liquid(container, options)
   }
-  }
 
   protected configTheme(chart: Chart, options: LiquidOptions): LiquidOptions {
     const customAttr = parseJson(chart.customAttr)

core/core-frontend/src/views/chart/components/js/panel/charts/others/gauge.ts

@@ -65,7 +65,9 @@ export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
 
   drawChart(drawOptions: G2PlotDrawOptions<G2Gauge>): G2Gauge {
     const { chart, container, scale } = drawOptions
-    if (chart?.data) {
+    if (!chart.data?.series) {
+      return
+    }
     // options
     const initOptions: GaugeOptions = {
       percent: 0,
@@ -99,7 +101,6 @@ export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
     const options = this.setupOptions(chart, initOptions, scale)
     return new G2Gauge(container, options)
   }
-  }
 
   protected configMisc(chart: Chart, options: GaugeOptions): GaugeOptions {
     const customAttr = parseJson(chart.customAttr)

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

@@ -37,7 +37,13 @@ export class TablePivot extends S2ChartView<PivotSheet> {
       'showRowTooltip'
     ],
     'table-total-selector': ['row', 'col'],
-    'basic-style-selector': ['tableColumnMode', 'tableBorderColor', 'tableScrollBarColor', 'alpha']
+    'basic-style-selector': [
+      'tableColumnMode',
+      'tableBorderColor',
+      'tableScrollBarColor',
+      'alpha',
+      'tableLayoutMode'
+    ]
   }
   axis: AxisType[] = ['xAxis', 'xAxisExt', 'yAxis', 'filter']
   axisConfig: AxisConfig = {
@@ -104,7 +110,7 @@ export class TablePivot extends S2ChartView<PivotSheet> {
 
     // total config
     const customAttr = parseJson(chart.customAttr)
-    const { tableTotal } = customAttr
+    const { tableTotal, basicStyle } = customAttr
     tableTotal.row.subTotalsDimensions = r
     tableTotal.col.subTotalsDimensions = c
 
@@ -182,7 +188,8 @@ export class TablePivot extends S2ChartView<PivotSheet> {
       height: containerDom.offsetHeight,
       style: this.configStyle(chart),
       totals: tableTotal,
-      conditions: this.configConditions(chart)
+      conditions: this.configConditions(chart),
+      hierarchyType: basicStyle.tableLayoutMode ?? 'grid'
     }
 
     // 开始渲染

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

@@ -189,6 +189,7 @@ const initScroll = () => {
   const senior = actualChart.senior
   if (
     senior?.scrollCfg?.open &&
+    chartData.value.tableRow?.length &&
     (view.value.type === 'table-normal' || (view.value.type === 'table-info' && !state.showPage))
   ) {
     // 防止多次渲染