Merge pull request #769 from dataease/pr@dev@feat_chart_table_info

feat(视图): 增加明细表

backend/src/main/java/io/dataease/provider/QueryProvider.java

@@ -38,6 +38,10 @@ public abstract class QueryProvider {
 
     public abstract String getSQLAsTmp(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList);
 
+    public abstract String getSQLTableInfo(String table, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds);
+
+    public abstract String getSQLAsTmpTableInfo(String sql, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds);
+
     public abstract String getSQLStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack, Datasource ds);
 
     public abstract String getSQLAsTmpStack(String table, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, List<ChartViewFieldDTO> extStack);

backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java

@@ -281,6 +281,16 @@ public class DorisQueryProvider extends QueryProvider {
         return st.render();
     }
 
+    @Override
+    public String getSQLTableInfo(String table, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
+    @Override
+    public String getSQLAsTmpTableInfo(String sql, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
     @Override
     public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {
         return getSQL("(" + sql + ")", xAxis, yAxis, customFilter, extFilterRequestList, null);

backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java

@@ -270,6 +270,83 @@ public class MysqlQueryProvider extends QueryProvider {
         return st.render();
     }
 
+    @Override
+    public String getSQLTableInfo(String table, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        SQLObj tableObj = SQLObj.builder()
+                .tableName((table.startsWith("(") && table.endsWith(")")) ? table : String.format(MySQLConstants.KEYWORD_TABLE, table))
+                .tableAlias(String.format(TABLE_ALIAS_PREFIX, 0))
+                .build();
+        List<SQLObj> xFields = new ArrayList<>();
+        List<SQLObj> xWheres = new ArrayList<>();
+        List<SQLObj> xOrders = new ArrayList<>();
+        if (CollectionUtils.isNotEmpty(xAxis)) {
+            for (int i = 0; i < xAxis.size(); i++) {
+                ChartViewFieldDTO x = xAxis.get(i);
+                String originField;
+                if (ObjectUtils.isNotEmpty(x.getExtField()) && x.getExtField() == 2) {
+                    // 解析origin name中有关联的字段生成sql表达式
+                    originField = calcFieldRegex(x.getOriginName(), tableObj);
+                } else if (ObjectUtils.isNotEmpty(x.getExtField()) && x.getExtField() == 1) {
+                    originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getOriginName());
+                } else {
+                    originField = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), x.getOriginName());
+                }
+                String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_X_PREFIX, i);
+                // 处理横轴字段
+                xFields.add(getXFields(x, originField, fieldAlias));
+                // 处理横轴过滤
+//                xWheres.addAll(getXWheres(x, originField, fieldAlias));
+                // 处理横轴排序
+                if (StringUtils.isNotEmpty(x.getSort()) && !StringUtils.equalsIgnoreCase(x.getSort(), "none")) {
+                    xOrders.add(SQLObj.builder()
+                            .orderField(originField)
+                            .orderAlias(fieldAlias)
+                            .orderDirection(x.getSort())
+                            .build());
+                }
+            }
+        }
+        // 处理视图中字段过滤
+        List<SQLObj> customWheres = transCustomFilterList(tableObj, customFilter);
+        // 处理仪表板字段过滤
+        List<SQLObj> extWheres = transExtFilterList(tableObj, extFilterRequestList);
+        // 构建sql所有参数
+        List<SQLObj> fields = new ArrayList<>();
+        fields.addAll(xFields);
+        List<SQLObj> wheres = new ArrayList<>();
+        wheres.addAll(xWheres);
+        if (customWheres != null) wheres.addAll(customWheres);
+        if (extWheres != null) wheres.addAll(extWheres);
+        List<SQLObj> groups = new ArrayList<>();
+        groups.addAll(xFields);
+        // 外层再次套sql
+        List<SQLObj> orders = new ArrayList<>();
+        orders.addAll(xOrders);
+
+        STGroup stg = new STGroupFile(SQLConstants.SQL_TEMPLATE);
+        ST st_sql = stg.getInstanceOf("previewSql");
+        st_sql.add("isGroup", false);
+        if (CollectionUtils.isNotEmpty(xFields)) st_sql.add("groups", xFields);
+        if (CollectionUtils.isNotEmpty(wheres)) st_sql.add("filters", wheres);
+        if (ObjectUtils.isNotEmpty(tableObj)) st_sql.add("table", tableObj);
+        String sql = st_sql.render();
+
+        ST st = stg.getInstanceOf("previewSql");
+        st.add("isGroup", false);
+        SQLObj tableSQL = SQLObj.builder()
+                .tableName(String.format(MySQLConstants.BRACKETS, sql))
+                .tableAlias(String.format(TABLE_ALIAS_PREFIX, 1))
+                .build();
+        if (CollectionUtils.isNotEmpty(orders)) st.add("orders", orders);
+        if (ObjectUtils.isNotEmpty(tableSQL)) st.add("table", tableSQL);
+        return st.render();
+    }
+
+    @Override
+    public String getSQLAsTmpTableInfo(String sql, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return getSQLTableInfo("(" + sqlFix(sql) + ")", xAxis, customFilter, extFilterRequestList, null);
+    }
+
 
     @Override
     public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {

backend/src/main/java/io/dataease/provider/oracle/OracleQueryProvider.java

@@ -304,6 +304,16 @@ public class OracleQueryProvider extends QueryProvider {
         return st.render();
     }
 
+    @Override
+    public String getSQLTableInfo(String table, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
+    @Override
+    public String getSQLAsTmpTableInfo(String sql, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
     @Override
     public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {
         return getSQL("(" + sqlFix(sql) + ")", xAxis, yAxis, customFilter, extFilterRequestList, null);

backend/src/main/java/io/dataease/provider/pg/PgQueryProvider.java

@@ -293,6 +293,16 @@ public class PgQueryProvider extends QueryProvider {
         return st.render();
     }
 
+    @Override
+    public String getSQLTableInfo(String table, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
+    @Override
+    public String getSQLAsTmpTableInfo(String sql, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
 
     @Override
     public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {

backend/src/main/java/io/dataease/provider/sqlserver/SqlserverQueryProvider.java

@@ -259,6 +259,16 @@ public class SqlserverQueryProvider extends QueryProvider {
         return st.render();
     }
 
+    @Override
+    public String getSQLTableInfo(String table, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
+    @Override
+    public String getSQLAsTmpTableInfo(String sql, List<ChartViewFieldDTO> xAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList, Datasource ds) {
+        return null;
+    }
+
 
     @Override
     public String getSQLAsTmp(String sql, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, List<ChartCustomFilterDTO> customFilter, List<ChartExtFilterRequest> extFilterRequestList) {

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -210,6 +210,13 @@ public class ChartViewService {
                 BeanUtils.copyBean(dto, view);
                 return dto;
             }
+        } else if (StringUtils.equalsIgnoreCase("table-info", view.getType())) {
+            yAxis = new ArrayList<>();
+            if (CollectionUtils.isEmpty(xAxis)) {
+                ChartViewDTO dto = new ChartViewDTO();
+                BeanUtils.copyBean(dto, view);
+                return dto;
+            }
         } else {
             if (CollectionUtils.isEmpty(xAxis) && CollectionUtils.isEmpty(yAxis)) {
                 ChartViewDTO dto = new ChartViewDTO();
@@ -321,6 +328,8 @@ public class ChartViewService {
                     datasourceRequest.setQuery(qp.getSQLStack(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList, extStack, ds));
                 } else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
                     datasourceRequest.setQuery(qp.getSQLScatter(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList, extBubble, ds));
+                } else if (StringUtils.equalsIgnoreCase("table-info", view.getType())) {
+                    datasourceRequest.setQuery(qp.getSQLTableInfo(dataTableInfoDTO.getTable(), xAxis, customFilter, extFilterList, ds));
                 } else {
                     datasourceRequest.setQuery(qp.getSQL(dataTableInfoDTO.getTable(), xAxis, yAxis, customFilter, extFilterList, ds));
                 }
@@ -331,6 +340,8 @@ public class ChartViewService {
                     datasourceRequest.setQuery(qp.getSQLAsTmpStack(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList, extStack));
                 } else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
                     datasourceRequest.setQuery(qp.getSQLAsTmpScatter(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList, extBubble));
+                } else if (StringUtils.equalsIgnoreCase("table-info", view.getType())) {
+                    datasourceRequest.setQuery(qp.getSQLAsTmpTableInfo(dataTableInfoDTO.getSql(), xAxis, customFilter, extFilterList, ds));
                 } else {
                     datasourceRequest.setQuery(qp.getSQLAsTmp(dataTableInfoDTO.getSql(), xAxis, yAxis, customFilter, extFilterList));
                 }
@@ -344,6 +355,8 @@ public class ChartViewService {
                     datasourceRequest.setQuery(qp.getSQLAsTmpStack(sql, xAxis, yAxis, customFilter, extFilterList, extStack));
                 } else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
                     datasourceRequest.setQuery(qp.getSQLAsTmpScatter(sql, xAxis, yAxis, customFilter, extFilterList, extBubble));
+                } else if (StringUtils.equalsIgnoreCase("table-info", view.getType())) {
+                    datasourceRequest.setQuery(qp.getSQLAsTmpTableInfo(sql, xAxis, customFilter, extFilterList, ds));
                 } else {
                     datasourceRequest.setQuery(qp.getSQLAsTmp(sql, xAxis, yAxis, customFilter, extFilterList));
                 }
@@ -374,6 +387,8 @@ public class ChartViewService {
                 datasourceRequest.setQuery(qp.getSQLStack(tableName, xAxis, yAxis, customFilter, extFilterList, extStack, ds));
             } else if (StringUtils.containsIgnoreCase(view.getType(), "scatter")) {
                 datasourceRequest.setQuery(qp.getSQLScatter(tableName, xAxis, yAxis, customFilter, extFilterList, extBubble, ds));
+            } else if (StringUtils.equalsIgnoreCase("table-info", view.getType())) {
+                datasourceRequest.setQuery(qp.getSQLTableInfo(tableName, xAxis, customFilter, extFilterList, ds));
             } else {
                 datasourceRequest.setQuery(qp.getSQL(tableName, xAxis, yAxis, customFilter, extFilterList, ds));
             }

frontend/src/icons/svg/table-info.svg

@@ -0,0 +1 @@
+<svg t="1630896296862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2121" width="200" height="200"><path d="M85.333333 170.666667h853.333334v170.666666H85.333333z" p-id="2122"></path><path d="M85.333333 384h256v128H85.333333zM384 384h256v128H384zM682.666667 384h256v128H682.666667zM85.333333 725.333333h256v128H85.333333zM384 725.333333h256v128H384zM682.666667 725.333333h256v128H682.666667z" opacity=".6" p-id="2123"></path><path d="M85.333333 554.666667h256v128H85.333333zM384 554.666667h256v128H384zM682.666667 554.666667h256v128H682.666667z" p-id="2124"></path></svg>

frontend/src/icons/svg/table-normal.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1619335647805" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="859" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M975.920762 0H72.46019C45.884952 0 24.380952 24.576 24.380952 54.979048v889.660952C24.380952 975.043048 45.884952 999.619048 72.46019 999.619048h903.460572C1002.496 999.619048 1024 975.043048 1024 944.64V54.979048C1024 24.576 1002.496 0 975.920762 0zM338.066286 925.988571H89.965714v-194.243047h248.100572v194.218666z m0-258.925714H89.965714v-194.243047h248.100572v194.218666z m0-258.925714H89.965714V213.991619h248.100572v194.096762z m310.174476 517.851428H400.14019v-194.243047h248.100572v194.218666z m0-258.925714H400.14019v-194.243047h248.100572v194.218666z m0-258.925714H400.14019V213.991619h248.100572v194.096762zM958.415238 925.988571H710.314667v-194.243047H958.415238v194.218666z m0-258.925714H710.314667v-194.243047H958.415238v194.218666z m0-258.925714H710.314667V213.991619H958.415238v194.096762z" p-id="860"></path></svg>
+<svg t="1630896178915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1969" width="200" height="200"><path d="M85.333333 170.666667h853.333334v170.666666H85.333333zM85.333333 384h170.666667v469.333333H85.333333z" p-id="1970"></path><path d="M298.666667 384h640v128H298.666667z" opacity=".6" p-id="1971"></path><path d="M298.666667 554.666667h298.666666v128H298.666667zM640 554.666667h298.666667v128H640z" p-id="1972"></path><path d="M298.666667 725.333333h298.666666v128H298.666667zM640 725.333333h298.666667v128H640z" opacity=".6" p-id="1973"></path></svg>

frontend/src/lang/en.js

@@ -746,7 +746,8 @@ export default {
     filter_condition: 'Filter Condition',
     filter_field_can_null: 'Filter field must choose',
     preview_100_data: 'Preview 100 rows',
-    chart_table_normal: 'Detail Table',
+    chart_table_normal: 'Summary Table',
+    chart_table_info: 'Detail Table',
     chart_card: 'KPI Card',
     chart_bar: 'Base Bar',
     chart_bar_stack: 'Stack Bar',
@@ -854,7 +855,8 @@ export default {
     axis_value_min: 'Min',
     axis_value_max: 'Max',
     axis_value_split: 'Split',
-    axis_auto: 'Auto'
+    axis_auto: 'Auto',
+    table_info_switch: 'Switch detail table will clear dimensions'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -745,7 +745,8 @@ export default {
     filter_condition: '過濾條件',
     filter_field_can_null: '過濾字段必填',
     preview_100_data: '預覽前100條記錄',
-    chart_table_normal: '明細表',
+    chart_table_normal: '匯總表',
+    chart_table_info: '明細表',
     chart_card: '指標卡',
     chart_bar: '基礎柱狀圖',
     chart_bar_stack: '堆疊柱狀圖',
@@ -853,7 +854,8 @@ export default {
     axis_value_min: '最小值',
     axis_value_max: '最大值',
     axis_value_split: '間隔',
-    axis_auto: '自動'
+    axis_auto: '自動',
+    table_info_switch: '明細表切換將清空維度'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',

frontend/src/lang/zh.js

@@ -745,7 +745,8 @@ export default {
     filter_condition: '过滤条件',
     filter_field_can_null: '过滤字段必填',
     preview_100_data: '预览前100条记录',
-    chart_table_normal: '明细表',
+    chart_table_normal: '汇总表',
+    chart_table_info: '明细表',
     chart_card: '指标卡',
     chart_bar: '基础柱状图',
     chart_bar_stack: '堆叠柱状图',
@@ -853,7 +854,8 @@ export default {
     axis_value_min: '最小值',
     axis_value_max: '最大值',
     axis_value_split: '间隔',
-    axis_auto: '自动'
+    axis_auto: '自动',
+    table_info_switch: '明细表切换将清空维度'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/views/chart/components/drag-item/QuotaItem.vue

@@ -13,7 +13,7 @@
         <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
       </span>
       <span class="item-span-style" :title="item.name">{{ item.name }}</span>
-      <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
+      <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
     </el-tag>
     <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
@@ -30,7 +30,7 @@
             <svg-icon v-if="item.sort === 'desc'" icon-class="sort-desc" class-name="field-icon-sort" />
           </span>
           <span class="item-span-style" :title="item.name">{{ item.name }}</span>
-          <span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
+          <span v-if="chart.type !== 'table-info' && item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span>
           <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
@@ -50,7 +50,7 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item divided>
+          <el-dropdown-item v-show="chart.type !== 'table-info'" divided>
             <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="summary">
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>
@@ -87,7 +87,7 @@
           <!--              </el-dropdown-menu>-->
           <!--            </el-dropdown>-->
           <!--          </el-dropdown-item>-->
-          <el-dropdown-item divided>
+          <el-dropdown-item :divided="chart.type !== 'table-info'">
             <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="sort">
               <span class="el-dropdown-link inner-dropdown-menu">
                 <span>

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

@@ -28,6 +28,17 @@
         <!--        </template>-->
       </ux-table-column>
     </ux-grid>
+
+    <!--    <el-pagination-->
+    <!--      v-show="chart.type === 'table-info'"-->
+    <!--      :current-page="currentPage.page"-->
+    <!--      :page-sizes="[100]"-->
+    <!--      :page-size="currentPage.pageSize"-->
+    <!--      :pager-count="5"-->
+    <!--      layout="sizes, prev, pager, next"-->
+    <!--      :total="currentPage.show"-->
+    <!--      @current-change="pageChange"-->
+    <!--    />-->
   </div>
 </template>
 
@@ -92,6 +103,11 @@ export default {
       },
       title_show: true,
       borderRadius: '0px'
+      // currentPage: {
+      //   page: 1,
+      //   pageSize: 10,
+      //   show: 0
+      // }
     }
   },
   computed: {
@@ -137,9 +153,13 @@ export default {
       if (this.chart.data) {
         this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
         datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
+        // if (this.chart.data.page) {
+        //   this.currentPage = JSON.parse(JSON.stringify(this.chart.data.page))
+        // }
       } else {
         this.fields = []
         datas = []
+        // this.resetPage()
       }
       this.$refs.plxTable.reloadData(datas)
       this.$nextTick(() => {
@@ -279,7 +299,19 @@ export default {
 
     resetHeight() {
       this.height = 100
+    },
+
+    pageChange() {
+
     }
+
+    // resetPage() {
+    //   this.currentPage = {
+    //     page: 1,
+    //     pageSize: 10,
+    //     show: 0
+    //   }
+    // }
   }
 }
 </script>

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

@@ -117,7 +117,7 @@
                       v-model="view.type"
                       style="width: 100%"
                       :disabled="!hasDataPermission('manage',param.privileges)"
-                      @change="save(true,'chart',true)"
+                      @change="save(true,'chart',true,true)"
                     >
                       <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
                         <el-radio value="table-normal" label="table-normal">
@@ -125,6 +125,11 @@
                             <svg-icon icon-class="table-normal" class="chart-icon" />
                           </span>
                         </el-radio>
+                        <el-radio value="table-info" label="table-info">
+                          <span :title="$t('chart.chart_table_info')">
+                            <svg-icon icon-class="table-info" class="chart-icon" />
+                          </span>
+                        </el-radio>
                         <el-radio value="text" label="text">
                           <span :title="$t('chart.chart_card')">
                             <svg-icon icon-class="text" class="chart-icon" />
@@ -140,13 +145,13 @@
                             <svg-icon icon-class="bar-stack" class="chart-icon" />
                           </span>
                         </el-radio>
+                      </div>
+                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
                         <el-radio value="bar-horizontal" label="bar-horizontal">
                           <span :title="$t('chart.chart_bar_horizontal')">
                             <svg-icon icon-class="bar-horizontal" class="chart-icon" />
                           </span>
                         </el-radio>
-                      </div>
-                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
                         <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal">
                           <span :title="$t('chart.chart_bar_stack_horizontal')">
                             <svg-icon icon-class="bar-stack-horizontal" class="chart-icon" />
@@ -167,13 +172,13 @@
                             <svg-icon icon-class="scatter" class="chart-icon" />
                           </span>
                         </el-radio>
+                      </div>
+                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
                         <el-radio value="chart-mix" label="chart-mix">
                           <span :title="$t('chart.chart_mix')">
                             <svg-icon icon-class="chart-mix" class="chart-icon" />
                           </span>
                         </el-radio>
-                      </div>
-                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
                         <el-radio value="map" label="map">
                           <span :title="$t('chart.chart_map')">
                             <svg-icon icon-class="map" class="chart-icon" />
@@ -194,13 +199,13 @@
                             <svg-icon icon-class="pie" class="chart-icon" />
                           </span>
                         </el-radio>
+                      </div>
+                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
                         <el-radio value="pie-rose" label="pie-rose">
                           <span :title="$t('chart.chart_pie_rose')">
                             <svg-icon icon-class="pie-rose" class="chart-icon" />
                           </span>
                         </el-radio>
-                      </div>
-                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
                         <el-radio value="funnel" label="funnel">
                           <span :title="$t('chart.chart_funnel')">
                             <svg-icon icon-class="funnel" class="chart-icon" />
@@ -213,7 +218,6 @@
                         </el-radio>
                         <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
                         <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-                        <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
                       </div>
                     </el-radio-group>
                   </div>
@@ -280,7 +284,7 @@
                       <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
                     </div>
                   </el-row>
-                  <el-row class="padding-lr" style="margin-top: 6px;">
+                  <el-row v-if="view.type !=='table-info'" class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
                       <span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
                       <span v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix')">{{ $t('chart.drag_block_value_axis') }}</span>
@@ -446,12 +450,6 @@
                     <tooltip-selector :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
                   </el-collapse-item>
                 </el-collapse>
-                <!--              <el-row>-->
-                <!--                <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />-->
-                <!--                <size-selector v-show="chart.type !== 'map'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />-->
-                <!--                <label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />-->
-                <!--                <tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />-->
-                <!--              </el-row>-->
               </el-row>
               <el-row>
                 <span class="padding-lr">{{ $t('chart.module_style') }}</span>
@@ -475,14 +473,6 @@
                     <background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
                   </el-collapse-item>
                 </el-collapse>
-                <!--              <el-row>-->
-                <!--                <x-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />-->
-                <!--                <y-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />-->
-                <!--                <split-selector v-show="view.type && view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />-->
-                <!--                <title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
-                <!--                <legend-selector v-show="view.type && !view.type.includes('map') && !view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />-->
-                <!--                <background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />-->
-                <!--              </el-row>-->
               </el-row>
             </div>
           </el-row>
@@ -493,7 +483,7 @@
         <el-row style="width: 100%;height: 100%;" class="padding-lr">
           <div ref="imageWrapper" style="height: 100%">
             <chart-component v-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text')" ref="dynamicChart" :chart-id="chart.id" :chart="chart" class="chart-class" @onChartClick="chartClick" />
-            <table-normal v-if="httpRequest.status && chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
+            <table-normal v-if="httpRequest.status && chart.type && chart.type.includes('table')" :show-summary="chart.type === 'table-normal'" :chart="chart" class="table-class" />
             <label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :chart="chart" class="table-class" />
             <div v-if="!httpRequest.status" class="chart-error-class">
               <div style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;">
@@ -829,7 +819,15 @@ export default {
         this.resetDatasetField()
       }
     },
-    save(getData, trigger, needRefreshGroup = false) {
+    save(getData, trigger, needRefreshGroup = false, switchType = false) {
+      if (switchType && (this.view.type === 'table-info' || this.chart.type === 'table-info') && this.view.xaxis.length > 0) {
+        this.$message({
+          showClose: true,
+          message: this.$t('chart.table_info_switch'),
+          type: 'warning'
+        })
+        this.view.xaxis = []
+      }
       const view = JSON.parse(JSON.stringify(this.view))
       view.id = this.view.id
       view.sceneId = this.view.sceneId
@@ -1313,7 +1311,9 @@ export default {
       if (this.view.type === 'map' && this.view.xaxis.length > 1) {
         this.view.xaxis = [this.view.xaxis[0]]
       }
-      this.dragCheckType(this.view.xaxis, 'd')
+      if (this.view.type !== 'table-info') {
+        this.dragCheckType(this.view.xaxis, 'd')
+      }
       this.dragMoveDuplicate(this.view.xaxis, e)
       this.save(true)
     },
@@ -1697,7 +1697,6 @@ export default {
   }
   .table-class{
     height: calc(100% - 20px);
-    margin: 10px;
   }
 
   .dialog-css>>>.el-dialog__title {