[Mod 0000]接入统计页面增加合计行

src/views/dashboard/basicInfo/accessStatistics/index.vue

@@ -1,19 +1,89 @@
 <template>
   <div class="p-4">
-    <BasicTable @register="registerTable" :scroll="{ x: 'max-content' }"  />
+    <BasicTable 
+      @register="registerTable" 
+      :scroll="{ x: 'max-content' }" 
+    />
   </div>
 </template>
 <script setup lang="ts">
-  import { BasicTable, useTable } from '/@/components/Table';
-  import { accessStatisticsColumns } from './access.data';
-  import { getGoafAccessCount } from '../basicInfo.api';
-
-  const [registerTable] = useTable({
-    api: getGoafAccessCount,
-    columns: accessStatisticsColumns,
-    pagination: true,
-    showIndexColumn: true,
+import { BasicTable, useTable } from '/@/components/Table';
+import { accessStatisticsColumns } from './access.data';
+import { getGoafAccessCount } from '../basicInfo.api';
+import type { BasicColumn } from '/@/components/Table/src/types/table';
+
+// 封装接口调用，获取数据后手动添加「总计」行
+const fetchTableData = async (params: any) => {
+  // 1. 调用原始接口，获取数据
+  const originalRecords = await getGoafAccessCount(params);
+  if (originalRecords.length === 0) return originalRecords; // 无数据时直接返回
+
+  // 2. 定义需要求和的数值列字段
+  const numberFields = ['mineNum', 'yjNum', 'wxjrNum', 'jrNum', 'wjNum', 'zxNum', 'lxNum'];
+
+  // 3. 构建「总计」行对象
+  const totalRow = {
+    name: '总计',
+    isTotal: true, // 合计行标识
+  };
+
+  // 4. 遍历数值列，计算每列的总和
+  numberFields.forEach(field => {
+    totalRow[field] = originalRecords.reduce((sum: number, item: any) => {
+      const currentValue = Number(item[field]) || 0;
+      return sum + currentValue;
+    }, 0);
+  });
+
+  // 5. 把「总计」行拼接到原始数据的最前面
+  const newRecords = [totalRow, ...originalRecords];
+
+  // 6. 返回表格
+  return {
+    ...originalRecords,
+    records: newRecords,
+    total: newRecords.length,
+  };
+};
+
+// 手动添加自定义序号列
+const customIndexColumn: BasicColumn = {
+  title: '序号',
+  dataIndex: 'index',
+  width: 40,
+  align: 'center',
+  // 自定义序号渲染：判断是否为合计行，合计行返回空字符串（无序号）
+  customRender: ({ record, index }) => {
+    // 若是合计行（带有isTotal标识），返回空，不显示序号
+    if (record.isTotal) return '';
+    // 普通数据行：序号从1开始（排除合计行，序号连续）
+    return index; // 因合计行在第0位，普通数据从索引1开始，直接返回index即为正确序号
+  },
+};
+
+// 拼接最终列配置（序号列 + 原有业务列）
+const finalTableColumns = [customIndexColumn, ...accessStatisticsColumns];
+
+const [registerTable] = useTable({
+    title: '矿山信息表格',
+    api: fetchTableData, // 数据统计接口
+    columns:finalTableColumns,
+    pagination: false,
+    useSearchForm: false,
+    bordered: true,
+    showIndexColumn: false,
   });
 </script>
 <style scoped>
+  :deep(.ant-table-thead th:nth-child(1)) {
+    vertical-align: bottom;
+    padding-bottom: 0 !important;
+    border-bottom: none;
+  }
+  :deep(.ant-table-tbody .ant-table-row:nth-child(2)){
+    background-color: #c5daf7 !important;
+    td {
+      background-color: #c5daf7 !important;
+    }
+  }
 </style>