Merge pull request #3369 from dataease/pr@dev@feat_table_add_index_column

feat(视图): 明细表和汇总表增加序列号

frontend/src/lang/en.js

@@ -1097,6 +1097,7 @@ export default {
     table_item_bg: 'Table Background',
     table_header_font_color: 'Header Font',
     table_item_font_color: 'Table Font',
+    table_show_index: 'Show Index',
     stripe: 'Zebra pattern',
     start_angle: 'Start Angle',
     end_angle: 'End Angle',

frontend/src/lang/tw.js

@@ -1097,6 +1097,7 @@ export default {
     table_item_bg: '表格背景',
     table_header_font_color: '表頭字體',
     table_item_font_color: '表格字體',
+    table_show_index: '顯示序號',
     stripe: '斑馬紋',
     start_angle: '起始角度',
     end_angle: '結束角度',

frontend/src/lang/zh.js

@@ -1096,6 +1096,7 @@ export default {
     table_item_bg: '表格背景',
     table_header_font_color: '表头字体',
     table_item_font_color: '表格字体',
+    table_show_index: '显示序号',
     stripe: '斑马纹',
     start_angle: '起始角度',
     end_angle: '结束角度',

frontend/src/views/chart/chart/chart.js

@@ -111,7 +111,9 @@ export const DEFAULT_SIZE = {
   liquidShape: 'circle',
   tablePageMode: 'page',
   symbolOpacity: 0.7,
-  symbolStrokeWidth: 2
+  symbolStrokeWidth: 2,
+  showIndex: false,
+  indexLabel: '序号'
 }
 export const DEFAULT_LABEL = {
   show: false,

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

@@ -20,7 +20,8 @@ export function getCustomTheme(chart) {
       cell: {
         backgroundColor: headerColor,
         horizontalBorderColor: borderColor,
-        verticalBorderColor: borderColor
+        verticalBorderColor: borderColor,
+        verticalBorderWidth: 0 //左上角顶点单元格左右边缘宽度要设置为 0，不然序号列的数字部分会比表头多几个像素，视觉上会突出去
       },
       text: {
         fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
@@ -47,7 +48,8 @@ export function getCustomTheme(chart) {
       text: {
         fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
         fontSize: DEFAULT_SIZE.tableTitleFontSize,
-        textAlign: headerAlign
+        textAlign: headerAlign,
+        textBaseline: 'middle' // 行头字体绘制基线设置为中心，不然序号列的内容会靠上
       },
       bolderText: {
         fill: DEFAULT_COLOR_CASE.tableHeaderFontColor,
@@ -125,9 +127,9 @@ export function getCustomTheme(chart) {
       theme.cornerCell.text.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
       theme.cornerCell.measureText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
 
-      theme.rowCell.cell.backgroundColor = h_c
+      theme.rowCell.cell.backgroundColor = i_c // 这个参数其实只对开启序号列的行头生效
-      theme.rowCell.cell.horizontalBorderColor = b_c
+      theme.rowCell.cell.horizontalBorderColor = i_c
-      theme.rowCell.cell.verticalBorderColor = b_c
+      theme.rowCell.cell.verticalBorderColor = i_c
       theme.rowCell.bolderText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
       theme.rowCell.text.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
       theme.rowCell.measureText.fill = c.tableHeaderFontColor ? c.tableHeaderFontColor : c.tableFontColor
@@ -159,12 +161,13 @@ export function getCustomTheme(chart) {
       theme.cornerCell.measureText.fontSize = parseInt(s.tableTitleFontSize)
       theme.cornerCell.measureText.textAlign = h_a
 
+      // 序号列的数字单元格内容样式使用指标的内容样式而不是表头的内容样式
       theme.rowCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
-      theme.rowCell.bolderText.textAlign = h_a
+      theme.rowCell.bolderText.textAlign = i_a
       theme.rowCell.text.fontSize = parseInt(s.tableTitleFontSize)
-      theme.rowCell.text.textAlign = h_a
+      theme.rowCell.text.textAlign = i_a
       theme.rowCell.measureText.fontSize = parseInt(s.tableTitleFontSize)
-      theme.rowCell.measureText.textAlign = h_a
+      theme.rowCell.measureText.textAlign = i_a
 
       theme.colCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
       theme.colCell.bolderText.textAlign = h_a

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

@@ -119,14 +119,23 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
     data: tableData
   }
 
+  const customAttr = JSON.parse(chart.customAttr)
   // options
   const s2Options = {
     width: containerDom.offsetWidth,
     height: containerDom.offsetHeight,
-    // showSeriesNumber: true
+    showSeriesNumber: customAttr.size.showIndex,
     style: getSize(chart),
     conditions: getConditions(chart)
   }
+  //开启序号之后，第一列就是序号列，修改 label 即可
+  if (s2Options.showSeriesNumber) {
+    s2Options.colCell= (node) => {
+      if (node.colIndex === 0) {
+        node.label = customAttr.size.indexLabel
+      }
+    }
+  }
 
   // 开始渲染
   if (s2) {
@@ -248,14 +257,23 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
     data: tableData
   }
 
+  const customAttr = JSON.parse(chart.customAttr)
   // options
   const s2Options = {
     width: containerDom.offsetWidth,
     height: containerDom.offsetHeight,
-    // showSeriesNumber: true
+    showSeriesNumber: customAttr.size.showIndex,
     style: getSize(chart),
     conditions: getConditions(chart)
   }
+  //开启序号之后，第一列就是序号列，修改 label 即可
+  if (s2Options.showSeriesNumber) {
+    s2Options.colCell= (node) => {
+      if (node.colIndex === 0) {
+        node.label = customAttr.size.indexLabel
+      }
+    }
+  }
 
   // 开始渲染
   if (s2) {

frontend/src/views/chart/chart/util.js

@@ -57,7 +57,9 @@ export const TYPE_CONFIGS = [
         'tableItemAlign',
         'tableTitleHeight',
         'tableItemHeight',
-        'tableColumnMode'
+        'tableColumnMode',
+        'tableShowIndex',
+        'tableIndexLabel'
       ],
       'title-selector-ant-v': [
         'show',
@@ -103,7 +105,9 @@ export const TYPE_CONFIGS = [
         'tableItemAlign',
         'tableTitleHeight',
         'tableItemHeight',
-        'tableColumnMode'
+        'tableColumnMode',
+        'tableShowIndex',
+        'tableIndexLabel'
       ],
       'title-selector-ant-v': [
         'show',
@@ -1669,7 +1673,9 @@ export const TYPE_CONFIGS = [
         'tableItemFontSize',
         'tableTitleHeight',
         'tableItemHeight',
-        'tableColumnWidth'
+        'tableColumnWidth',
+        'tableShowIndex',
+        'tableIndexLabel'
       ],
       'title-selector': [
         'show',
@@ -1708,7 +1714,9 @@ export const TYPE_CONFIGS = [
         'tableItemFontSize',
         'tableTitleHeight',
         'tableItemHeight',
-        'tableColumnWidth'
+        'tableColumnWidth',
+        'tableShowIndex',
+        'tableIndexLabel'
       ],
       'title-selector': [
         'show',

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

@@ -369,6 +369,33 @@
             @change="changeBarSizeCase('tableColumnWidth')"
           />
         </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableShowIndex')"
+          label-width="100px"
+          :label="$t('chart.table_show_index')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="sizeForm.showIndex"
+            input-size="mini"
+            @change="changeBarSizeCase('tableShowIndex')"
+          >
+            <el-radio :label="true">{{$t('panel.yes')}}</el-radio>
+            <el-radio :label="false">{{$t('panel.no')}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableIndexLabel') && sizeForm.showIndex"
+          label-width="100px"
+          class="form-item">
+          <el-input
+            v-model="sizeForm.indexLabel"
+            type="text"
+            @blur="changeBarSizeCase('tableIndexLabel')"
+          />
+        </el-form-item>
+
+
         <!--table-end-->
         <!--gauge-begin-->
         <el-form-item
@@ -1031,6 +1058,9 @@ export default {
           this.sizeForm.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
           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
+
           this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
           this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder
           this.sizeForm.quotaFontIsItalic = this.sizeForm.quotaFontIsItalic ? this.sizeForm.quotaFontIsItalic : DEFAULT_SIZE.quotaFontIsItalic

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

@@ -358,6 +358,31 @@
             @change="changeBarSizeCase('tableColumnWidth')"
           />
         </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableShowIndex')"
+          label-width="100px"
+          :label="$t('chart.table_show_index')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="sizeForm.showIndex"
+            input-size="mini"
+            @change="changeBarSizeCase('tableShowIndex')"
+          >
+            <el-radio :label="true">{{$t('panel.yes')}}</el-radio>
+            <el-radio :label="false">{{$t('panel.no')}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableIndexLabel') && sizeForm.showIndex"
+          label-width="100px"
+          class="form-item">
+          <el-input
+            v-model="sizeForm.indexLabel"
+            type="text"
+            @blur="changeBarSizeCase('tableIndexLabel')"
+          />
+        </el-form-item>
 
         <!--chart-mix-start-->
         <span v-show="showProperty('mix')">
@@ -1197,6 +1222,9 @@ export default {
           this.sizeForm.tableHeaderAlign = this.sizeForm.tableHeaderAlign ? this.sizeForm.tableHeaderAlign : DEFAULT_SIZE.tableHeaderAlign
           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
+
           this.sizeForm.gaugeTickCount = this.sizeForm.gaugeTickCount ? this.sizeForm.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount
 
           this.sizeForm.gaugeMinType = this.sizeForm.gaugeMinType ? this.sizeForm.gaugeMinType : DEFAULT_SIZE.gaugeMinType

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

@@ -24,6 +24,9 @@
         :show-summary="showSummary"
         :summary-method="summaryMethod"
       >
+        <ux-table-column
+          type="index"
+          :title='indexLabel'/>
         <ux-table-column
           v-for="field in fields"
           :key="field.name"
@@ -136,7 +139,9 @@ export default {
       showPage: false,
       columnWidth: DEFAULT_SIZE.tableColumnWidth,
       scrollTimer: null,
-      scrollTop: 0
+      scrollTop: 0,
+      showIndex: false,
+      indexLabel: '序号'
     }
   },
   computed: {
@@ -278,6 +283,17 @@ export default {
           this.table_item_class.fontSize = customAttr.size.tableItemFontSize + 'px'
           this.table_header_class.height = customAttr.size.tableTitleHeight + 'px'
           this.table_item_class.height = customAttr.size.tableItemHeight + 'px'
+
+          const visibleColumn = this.$refs.plxTable.getTableColumn().fullColumn
+          for (let i = 0,column=visibleColumn[i]; i < visibleColumn.length; i++) {
+            // 有变更才刷新
+            if (column.type === 'index' && column.visible !== customAttr.size.showIndex) {
+              column.visible = customAttr.size.showIndex
+              this.$refs.plxTable.refreshColumn()
+              break;
+            }
+          }
+          this.indexLabel = customAttr.size.indexLabel
         }
         this.table_item_class_stripe = JSON.parse(JSON.stringify(this.table_item_class))
         // 暂不支持斑马纹
@@ -328,13 +344,19 @@ export default {
     summaryMethod({ columns, data }) {
       const that = this
       const means = [] // 合计
+      const x = JSON.parse(that.chart.xaxis);
+      const customAttr = JSON.parse(that.chart.customAttr);
       columns.forEach((column, columnIndex) => {
-        const x = JSON.parse(that.chart.xaxis)
         if (columnIndex === 0 && x.length > 0) {
           means.push('合计')
         } else {
-          if (columnIndex >= x.length) {
+          // 显示序号就往后推一列
-            const values = data.map(item => Number(item[column.property]))
+          let requireSumIndex = x.length
+          if (customAttr.size.showIndex) {
+            requireSumIndex++
+          }
+          if (columnIndex >= requireSumIndex) {
+            const values = data.map(item => Number(item[column.property]));
             // 合计
             if (!values.every(value => isNaN(value))) {
               means[columnIndex] = values.reduce((prev, curr) => {
@@ -350,7 +372,7 @@ export default {
               means[columnIndex] = ''
             }
           } else {
-            means[columnIndex] = ''
+            means[columnIndex] = '';
           }
         }
       })

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

@@ -40,7 +40,7 @@
           <el-collapse-item
             v-show="showPropertiesCollapse(['size-selector'])"
             name="size"
-            :title="$t('chart.size')"
+            :title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
           >
             <size-selector
               :param="param"