fix(视图): 修复表格序号错误

修复表格序号未按照实际数据排序
https://www.tapd.cn/55578866/bugtrace/bugs/view/1155578866001019105

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

@@ -788,9 +788,7 @@ public class ChartViewService {
 
                         ChartExtFilterRequest drillFilter = new ChartExtFilterRequest();
                         drillFilter.setFieldId(dto.getId());
-                        drillFilter.setValue(new ArrayList<String>() {{
+                        drillFilter.setValue(Collections.singletonList(dto.getValue()));
-                            add(dto.getValue());
-                        }});
                         drillFilter.setOperator("in");
                         drillFilter.setDatasetTableField(datasetTableField);
                         extFilterList.add(drillFilter);

backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java

@@ -202,6 +202,10 @@ public class ChartDataBuild {
                     chartDimensionDTO.setValue(row[k]);
                     dimensionList.add(chartDimensionDTO);
                 }
+                ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                chartDimensionDTO.setId(extStack.get(0).getId());
+                chartDimensionDTO.setValue(row[xAxis.size()]);
+                dimensionList.add(chartDimensionDTO);
                 axisChartDataDTO.setDimensionList(dimensionList);
 
                 if (CollectionUtils.isNotEmpty(yAxis)) {
@@ -1054,6 +1058,10 @@ public class ChartDataBuild {
                     chartDimensionDTO.setValue(row[j]);
                     dimensionList.add(chartDimensionDTO);
                 }
+                ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
+                chartDimensionDTO.setId(extStack.get(0).getId());
+                chartDimensionDTO.setValue(row[xAxis.size()]);
+                dimensionList.add(chartDimensionDTO);
                 axisChartDataDTO.setDimensionList(dimensionList);
 
                 if (CollectionUtils.isNotEmpty(yAxis)) {

frontend/src/lang/en.js

@@ -1434,7 +1434,8 @@ export default {
     reserve_two: '2',
     proportion: 'Proportion',
     label_content: 'Label Content',
-    percent: 'Percent'
+    percent: 'Percent',
+    table_index_desc: 'Index Header Name'
   },
   dataset: {
     parse_filed: 'Parse Field',

frontend/src/lang/tw.js

@@ -1434,7 +1434,8 @@ export default {
     reserve_two: '两位',
     proportion: '佔比',
     label_content: '標籤展示',
-    percent: '占比'
+    percent: '占比',
+    table_index_desc: '表頭名稱'
   },
   dataset: {
     parse_filed: '解析字段',

frontend/src/lang/zh.js

@@ -1433,7 +1433,8 @@ export default {
     reserve_two: '两位',
     proportion: '占比',
     label_content: '标签展示',
-    percent: '占比'
+    percent: '占比',
+    table_index_desc: '表头名称'
   },
   dataset: {
     parse_filed: '解析字段',

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

@@ -230,6 +230,9 @@ export function getLabel(chart) {
                       }
                     }
                     res = contentItems.join(' ')
+                  } else if (equalsAny(chart.type, 'pie-rose', 'pie-donut-rose')) {
+                    const quotaValue = valueFormatter(param.value, formatterCfg)
+                    res = [param.field, quotaValue].join(' ')
                   } else {
                     res = valueFormatter(param.value, formatterCfg)
                   }

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

@@ -168,6 +168,7 @@ export function getCustomTheme(chart) {
       theme.rowCell.text.textAlign = i_a
       theme.rowCell.measureText.fontSize = parseInt(s.tableItemFontSize)
       theme.rowCell.measureText.textAlign = i_a
+      theme.rowCell.seriesNumberWidth = parseInt(s.tableColumnWidth)
 
       theme.colCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
       theme.colCell.bolderText.textAlign = h_a

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

@@ -1,10 +1,10 @@
-import { TableSheet, S2Event, PivotSheet } from '@antv/s2'
+import { TableSheet, S2Event, PivotSheet, DataCell } from '@antv/s2'
 import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table'
 import { DEFAULT_COLOR_CASE, DEFAULT_TOTAL } from '@/views/chart/chart/chart'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import Vue from 'vue'
-export function baseTableInfo(s2, container, chart, action, tableData) {
+export function baseTableInfo(s2, container, chart, action, tableData, pageInfo) {
   const containerDom = document.getElementById(container)
 
   // fields
@@ -132,9 +132,19 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
   if (s2Options.showSeriesNumber) {
     s2Options.colCell = (node) => {
       if (node.colIndex === 0) {
-        node.label = customAttr.size.indexLabel
+        if (!customAttr.size.indexLabel) {
+          node.label = ' '
+        } else {
+          node.label = customAttr.size.indexLabel
+        }
       }
     }
+    s2Options.dataCell = (viewMeta) => {
+      if (viewMeta.colIndex === 0) {
+        viewMeta.fieldValue = (pageInfo.pageSize * (pageInfo.page - 1)) + viewMeta.rowIndex + 1
+      }
+      return new DataCell(viewMeta, viewMeta?.spreadsheet)
+    }
   }
 
   // 开始渲染
@@ -270,7 +280,11 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
   if (s2Options.showSeriesNumber) {
     s2Options.colCell = (node) => {
       if (node.colIndex === 0) {
-        node.label = customAttr.size.indexLabel
+        if (!customAttr.size.indexLabel) {
+          node.label = ' '
+        } else {
+          node.label = customAttr.size.indexLabel
+        }
       }
     }
   }

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

@@ -291,7 +291,7 @@ export default {
         }
       }
       if (chart.type === 'table-info') {
-        this.myChart = baseTableInfo(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
+        this.myChart = baseTableInfo(this.myChart, this.chartId, chart, this.antVAction, this.tableData, this.currentPage)
       } else if (chart.type === 'table-normal') {
         this.myChart = baseTableNormal(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
       } else if (chart.type === 'table-pivot') {
@@ -522,7 +522,7 @@ export default {
           ele.filter = []
         }
       })
-      if (view.type === 'table-pivot' || view.type === 'bar-group') {
+      if (view.type === 'table-pivot' || view.type.includes('bar-group')) {
         view.xaxisExt.forEach(function(ele) {
           if (!ele.dateStyle || ele.dateStyle === '') {
             ele.dateStyle = 'y_M_d'

frontend/src/views/chart/components/shape-attr/SizeSelector.vue

@@ -387,6 +387,7 @@
         <el-form-item
           v-show="showProperty('tableIndexLabel') && sizeForm.showIndex"
           label-width="100px"
+          :label="$t('chart.table_index_desc')"
           class="form-item"
         >
           <el-input
@@ -1061,7 +1062,9 @@ export default {
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
 
           this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
-          this.sizeForm.indexLabel = this.sizeForm.indexLabel ? this.sizeForm.indexLabel : DEFAULT_SIZE.indexLabel
+          if (this.sizeForm.indexLabel === null || this.sizeForm.indexLabel === undefined) {
+            this.sizeForm.indexLabel = DEFAULT_SIZE.indexLabel
+          }
 
           this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
           this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder

frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue

@@ -376,6 +376,7 @@
         <el-form-item
           v-show="showProperty('tableIndexLabel') && sizeForm.showIndex"
           label-width="100px"
+          :label="$t('chart.table_index_desc')"
           class="form-item"
         >
           <el-input
@@ -1355,7 +1356,9 @@ export default {
           this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign
 
           this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
-          this.sizeForm.indexLabel = this.sizeForm.indexLabel ? this.sizeForm.indexLabel : DEFAULT_SIZE.indexLabel
+          if (this.sizeForm.indexLabel === null || this.sizeForm.indexLabel === undefined) {
+            this.sizeForm.indexLabel = DEFAULT_SIZE.indexLabel
+          }
 
           this.sizeForm.gaugeTickCount = this.sizeForm.gaugeTickCount ? this.sizeForm.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount
 

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

@@ -23,6 +23,7 @@
         :class="chart.id"
         :show-summary="showSummary"
         :summary-method="summaryMethod"
+        :index-config="{seqMethod}"
       >
         <ux-table-column
           type="index"
@@ -294,7 +295,11 @@ export default {
               break
             }
           }
-          this.indexLabel = customAttr.size.indexLabel
+          if (!customAttr.size.indexLabel) {
+            this.indexLabel = ' '
+          } else {
+            this.indexLabel = customAttr.size.indexLabel
+          }
         }
         this.table_item_class_stripe = JSON.parse(JSON.stringify(this.table_item_class))
         // 暂不支持斑马纹
@@ -380,7 +385,11 @@ export default {
       // 返回一个二维数组的表尾合计(不要平均值，就不要在数组中添加)
       return [means]
     },
-
+    seqMethod({ rowIndex, column }) {
+      if (column?.type === 'index') {
+        return (this.currentPage.pageSize * (this.currentPage.page - 1)) + rowIndex + 1
+      }
+    },
     chartResize() {
       // 指定图表的配置项和数据
       this.calcHeightDelay()

frontend/src/views/chart/group/Group.vue

@@ -1043,7 +1043,7 @@ export default {
           attr.label.position = 'outer'
         }
         if (type === 'pie-donut') {
-          attr.size.pieInnerRadius = Math.round(attr.size.pieOuterRadius * 0.7)
+          attr.size.pieInnerRadius = Math.round(attr.size.pieOuterRadius * 0.75)
         }
         if (type === 'pie-donut-rose') {
           attr.size.pieInnerRadius = Math.round(attr.size.pieOuterRadius * 0.5)

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

@@ -3092,7 +3092,7 @@ export default {
           customAttr.label.position = 'outer'
         }
         if (type === 'pie-donut') {
-          customAttr.size.pieInnerRadius = Math.round(customAttr.size.pieOuterRadius * 0.7)
+          customAttr.size.pieInnerRadius = Math.round(customAttr.size.pieOuterRadius * 0.75)
         }
         if (type === 'pie-donut-rose') {
           customAttr.size.pieInnerRadius = Math.round(customAttr.size.pieOuterRadius * 0.5)