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,14 +50,15 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
 
   drawChart(drawOptions: G2PlotDrawOptions<G2Liquid>): G2Liquid {
     const { chart, container } = drawOptions
-    if (chart?.data) {
+    if (!chart.data?.series) {
-      const initOptions: LiquidOptions = {
+      return
-        percent: 0
-      }
-      const options = this.setupOptions(chart, initOptions)
-      // 开始渲染
-      return new G2Liquid(container, options)
     }
+    const initOptions: LiquidOptions = {
+      percent: 0
+    }
+    const options = this.setupOptions(chart, initOptions)
+    // 开始渲染
+    return new G2Liquid(container, options)
   }
 
   protected configTheme(chart: Chart, options: LiquidOptions): LiquidOptions {

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

@@ -65,40 +65,41 @@ export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
 
   drawChart(drawOptions: G2PlotDrawOptions<G2Gauge>): G2Gauge {
     const { chart, container, scale } = drawOptions
-    if (chart?.data) {
+    if (!chart.data?.series) {
-      // options
+      return
-      const initOptions: GaugeOptions = {
+    }
-        percent: 0,
+    // options
-        appendPadding: getPadding(chart),
+    const initOptions: GaugeOptions = {
-        axis: {
+      percent: 0,
-          tickInterval: 0.2,
+      appendPadding: getPadding(chart),
-          label: {
+      axis: {
-            style: {
+        tickInterval: 0.2,
-              fontSize: getScaleValue(12, scale) // 刻度值字体大小
+        label: {
-            },
+          style: {
-            formatter: function (v) {
+            fontSize: getScaleValue(12, scale) // 刻度值字体大小
-              const r = parseFloat(v)
-              return v === '0' || !r ? v : r * 100 + '%'
-            }
           },
-          tickLine: {
+          formatter: function (v) {
-            length: getScaleValue(12, scale) * -1, // 刻度线长度
+            const r = parseFloat(v)
-            style: {
+            return v === '0' || !r ? v : r * 100 + '%'
-              lineWidth: getScaleValue(1, scale) // 刻度线宽度
+          }
-            }
+        },
-          },
+        tickLine: {
-          subTickLine: {
+          length: getScaleValue(12, scale) * -1, // 刻度线长度
-            count: 4, // 子刻度数
+          style: {
-            length: getScaleValue(6, scale) * -1, // 子刻度线长度
+            lineWidth: getScaleValue(1, scale) // 刻度线宽度
-            style: {
+          }
-              lineWidth: getScaleValue(1, scale) // 子刻度线宽度
+        },
-            }
+        subTickLine: {
+          count: 4, // 子刻度数
+          length: getScaleValue(6, scale) * -1, // 子刻度线长度
+          style: {
+            lineWidth: getScaleValue(1, scale) // 子刻度线宽度
           }
         }
       }
-      const options = this.setupOptions(chart, initOptions, scale)
-      return new G2Gauge(container, options)
     }
+    const options = this.setupOptions(chart, initOptions, scale)
+    return new G2Gauge(container, options)
   }
 
   protected configMisc(chart: Chart, options: GaugeOptions): GaugeOptions {

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))
   ) {
     // 防止多次渲染