Merge branch 'QAStatistic'

src/api/questionStatistics/questionStatistics.js

@@ -7,4 +7,40 @@ export function getDailyAllUsersRanking(params = {}) {
     method: 'get',
     params
   })
+}
+
+// 抽问抽答完成趋势
+export function getCompletionTrend(params = {}) {
+  return request({
+    url: '/v1/cs/app/daily-exam/completion-trend',
+    method: 'get',
+    params
+  })
+}
+
+// 错题分析 - 总体问题分布
+export function getWrongAnalysisOverview(params = {}) {
+  return request({
+    url: '/v1/cs/app/daily-exam/wrong-analysis/overview',
+    method: 'get',
+    params
+  })
+}
+
+// 错题分析 - 问题分布对比（雷达图）
+export function getWrongAnalysisRadar(params = {}) {
+  return request({
+    url: '/v1/cs/app/daily-exam/wrong-analysis/radar',
+    method: 'get',
+    params
+  })
+}
+
+// 错题分析 - 大类详情
+export function getWrongAnalysisCategoryDetail(params = {}) {
+  return request({
+    url: '/v1/cs/app/daily-exam/wrong-analysis/category-detail',
+    method: 'get',
+    params
+  })
 }

src/pages/questionStatistics/components/CompletionTrend.vue

@@ -0,0 +1,380 @@
+<template>
+  <div class="completion-trend">
+    <!-- 时间筛选器 -->
+    <view class="time-filter-section">
+      <view class="filter-row">
+        <StaticsTab v-model="activeTimeRange" :tabs="timeRangeOptions" active-color="#2B7BFF"
+          @change="handleTimeRangeChange" />
+        <view v-if="activeTimeRange === 'custom'" class="custom-time-section">
+          <uni-datetime-picker v-model="dateRange" type="daterange" rangeSeparator="至" @change="handleDateRangeChange"
+            class="date-range-picker" :clear-icon="false"/>
+          <text class="days-count">共 {{ totalDays }} 天</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 图表标题 -->
+    <h3 class="chart-title">抽问抽答完成趋势图</h3>
+
+    <!-- 图表容器 -->
+    <div class="chart-container">
+      <div ref="trendChart" class="chart" style="width: 100%; height: 400rpx;"></div>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <text>加载中...</text>
+    </div>
+
+    <!-- 无数据提示 -->
+    <div v-if="!loading && chartData.length === 0" class="no-data">
+      <text>暂无趋势数据</text>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import StaticsTab from "@/pages/inspectionStatistics/components/StaticsTab.vue";
+import { getCompletionTrend } from '@/api/questionStatistics/questionStatistics';
+import { calculateTimeRange } from '@/utils/formatUtils.js';
+
+export default {
+  name: 'CompletionTrend',
+  components: {
+    StaticsTab
+  },
+  data() {
+    return {
+      loading: false,
+      activeTimeRange: 'month', // year, month, custom
+      customStartTime: '',
+      customEndTime: '',
+      dateRange: [],
+      totalDays: 0,
+      chartData: [],
+      xAxisData: [],
+      trendChart: null,
+      timeRangeOptions: [
+        { title: '本年', type: 'year' },
+        { title: '本月', type: 'month' },
+        { title: '自定义', type: 'custom' }
+      ]
+    };
+  },
+  mounted() {
+    this.setDefaultDates();
+    this.initChart();
+    this.loadData();
+  },
+  beforeDestroy() {
+    if (this.trendChart) {
+      this.trendChart.dispose();
+    }
+  },
+  methods: {
+    // 设置默认日期
+    setDefaultDates() {
+      const today = new Date();
+      // 本月第一天
+      const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+
+      // 使用本地时间格式化，避免UTC时间转换问题
+      this.customStartTime = this.formatLocalDate(firstDayOfMonth);
+      this.customEndTime = this.formatLocalDate(today);
+      // 初始化dateRange
+      this.dateRange = [this.customStartTime, this.customEndTime];
+      this.calculateDays();
+    },
+    
+    // 格式化本地日期为YYYY-MM-DD格式
+    formatLocalDate(date) {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    },
+    
+    initChart() {
+      const chartDom = this.$refs.trendChart;
+      if (chartDom) {
+        this.trendChart = echarts.init(chartDom);
+        this.setChartOption();
+      }
+    },
+    setChartOption() {
+      if (!this.trendChart) return;
+      console.log('setChartOption', this.chartData, this.xAxisData);
+      const option = {
+        // title: {
+        //   text: '抽问抽答完成趋势',
+        //   left: 'center',
+        //   textStyle: {
+        //     fontSize: 16,
+        //     fontWeight: 'normal'
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          formatter: function (params) {
+            let result = params[0].axisValue + '<br/>';
+            params.forEach(param => {
+              result += `${param.seriesName}: ${param.value}<br/>`;
+            });
+            return result;
+          }
+        },
+        legend: {
+          show: true,
+          // bottom: 10
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.xAxisData
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          // max: 100,
+          // axisLabel: {
+          //   formatter: '{value}'
+          // }
+        },
+        series: this.chartData
+      };
+
+      this.trendChart.setOption(option);
+    },
+    handleTimeRangeChange(range) {
+      console.log('时间范围选择:', range, this.dateRange);
+      
+      // 使用calculateTimeRange计算时间范围
+      const timeRangeResult = calculateTimeRange(range, this.dateRange);
+      this.customStartTime = timeRangeResult.startDate;
+      this.customEndTime = timeRangeResult.endDate;
+      this.dateRange = [this.customStartTime, this.customEndTime];
+      
+      this.activeTimeRange = range;
+      this.calculateDays();
+      this.loadData();
+    },
+    handleDateRangeChange(e) {
+      if (e && e.length === 2) {
+        this.dateRange = e;
+        this.customStartTime = e[0];
+        this.customEndTime = e[1];
+        this.calculateDays();
+        this.loadData();
+      }
+    },
+    
+    // 计算天数
+    calculateDays() {
+      if (this.customStartTime && this.customEndTime) {
+        const start = new Date(this.customStartTime);
+        const end = new Date(this.customEndTime);
+        const diffTime = Math.abs(end - start);
+        this.totalDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+      }
+    },
+    
+    async loadData() {
+      this.loading = true;
+
+      try {
+        // 构建请求参数
+        const params = {
+          timeType: this.activeTimeRange
+        };
+
+        // 如果是自定义时间范围，添加开始和结束日期
+        if (this.activeTimeRange === 'custom') {
+          if (!this.customStartTime || !this.customEndTime) {
+            uni.showToast({
+              title: '请选择完整的时间范围',
+              icon: 'none'
+            });
+            this.loading = false;
+            return;
+          }
+          params.startDate = this.customStartTime;
+          params.endDate = this.customEndTime;
+        }
+
+        // 调用API接口
+        const response = await getCompletionTrend(params);
+
+        // 检查权限控制
+        if (response.show === false) {
+          uni.showToast({
+            title: '当前角色无权限查看此数据',
+            icon: 'none'
+          });
+          this.chartData = [];
+          this.setChartOption();
+          return;
+        }
+
+        // 处理API返回的数据
+        const { processedData, xAxisData } = this.processApiData(response);
+        this.chartData = processedData;
+        this.xAxisData = xAxisData;
+        this.setChartOption();
+
+      } catch (error) {
+        console.error('加载数据失败:', error);
+        uni.showToast({
+          title: '加载数据失败',
+          icon: 'none'
+        });
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 处理API返回的数据格式
+    processApiData(apiData) {
+      console.log('processApiData', apiData);
+
+      // 根据API返回的数据结构进行处理
+      if (!apiData || !apiData.model) {
+        return { processedData: [], xAxisData: [] };
+      }
+
+      const { xAxis, series } = apiData.model;
+
+      // 处理x轴数据
+      const xAxisData = xAxis || [];
+
+      // 处理系列数据
+      const processedData = [];
+
+      if (series && series.length > 0) {
+        // 如果是站长角色，显示多条线；如果是科长角色，显示单条线
+        // 这里简化处理，只显示第一条线
+        for (let i = 0; i < series.length; i++) {
+          processedData.push({
+            name: series[i].name,
+            type: 'line',
+            data: series[i].data
+          });
+        }
+
+      }
+
+      return { processedData, xAxisData };
+    },
+
+
+  },
+  watch: {
+    chartData: {
+      handler() {
+        this.$nextTick(() => {
+          this.setChartOption();
+        });
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.completion-trend {
+  padding: 10rpx 0;
+
+  .time-filter-section {
+    margin-bottom: 20rpx;
+    padding: 0 20rpx;
+  }
+
+  .filter-row {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    .custom-time-section {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 24rpx;
+        margin-top: 2rpx;
+        width: 350rpx;
+
+        .date-range-picker {
+          ::v-deep .icon-calendar {
+            display: none !important;
+          }
+
+          ::v-deep .uni-date-range {
+            font-size: 16rpx !important;
+            background: transparent !important;
+            color: black !important;
+          }
+
+          ::v-deep .uni-date-x {
+            height: 25rpx !important;
+            line-height: 25rpx !important;
+
+            .range-separator {
+              font-size: 20rpx !important;
+              padding: 0 !important;
+            }
+
+            .uni-date__x-input {
+              height: 25rpx !important;
+              line-height: 25rpx !important;
+            }
+          }
+
+          ::v-deep .uni-date-x--border {
+            border: none !important;
+          }
+        }
+
+        .days-count {
+          position: absolute;
+          right: -86rpx;
+          top: -8rpx;
+          font-size: 25rpx;
+          color: black;
+          font-weight: 500;
+          white-space: nowrap;
+        }
+      }
+  }
+
+  .chart-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 24rpx;
+    text-align: center;
+  }
+
+  .chart-container {
+    background: #fff;
+    border-radius: 12rpx;
+    padding: 24rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
+  }
+
+  .loading-container,
+  .no-data {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200rpx;
+    font-size: 28rpx;
+    color: #999;
+  }
+}
+</style>

src/pages/questionStatistics/components/RealTimeStatus.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="real-time-status">
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <text>加载中...</text>
+    </div>
+
+    <!-- 统计表格区域 - 遍历分组后的数据 -->
+    <div v-else class="statistics-section">
+      <div v-for="(group, index) in groupedData" :key="index" class="statistic-table-wrapper">
+        <!-- 每个统计表格的标题 - 使用deptName -->
+        <h2 class="table-title">{{ group.title }}</h2>
+
+        <!-- statistic-table组件 -->
+        <statistic-table :columns="tableColumns" :data="group.data">
+          <template #column-progress="{ row, index }">
+            <view class="progress-container">
+              <u-line-progress :percentage="Math.round(row.progress * 100)" :showText="false"
+                :activeColor="getProgressColor(row.progress * 100)" height="20rpx"
+                width="200rpx"></u-line-progress>
+              <text class="progress-text">{{ Math.round(row.progress * 100) }}%</text>
+            </view>
+          </template>
+        </statistic-table>
+      </div>
+
+      <!-- 无数据提示 -->
+      <div v-if="groupedData.length === 0" class="no-data">
+        <text>暂无统计数据</text>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import StatisticTable from "@/components/statistic-table/statistic-table.vue";
+import { getDailyAllUsersRanking } from "@/api/questionStatistics/questionStatistics";
+
+export default {
+  name: 'RealTimeStatus',
+  components: {
+    StatisticTable
+  },
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // 固定的表格列配置
+      tableColumns: [
+        { props: 'userName', title: '姓名' },
+        { props: 'completedTasks', title: '答题进度' },
+        { props: 'avgScore', title: '平均分' },
+        { props: 'progress', title: '完成率', slot: true }
+      ],
+      // 分组后的数据
+      groupedData: [],
+      // 原始接口数据
+      apiData: []
+    };
+  },
+  mounted() {
+    this.getDailyAllUsersRanking();
+  },
+  methods: {
+    async getDailyAllUsersRanking() {
+      this.$emit('update:loading', true);
+      
+      try {
+        const res = await getDailyAllUsersRanking({
+          pageNum: 1,
+          pageSize: 100
+        });
+        
+        if (res.code === 200) {
+          this.apiData = res.data.rows || [];
+          this.groupDataByDept();
+        } else {
+          uni.showToast({
+            title: '获取数据失败',
+            icon: 'none'
+          });
+        }
+      } catch (error) {
+        console.error('获取数据失败:', error);
+        uni.showToast({
+          title: '获取数据失败',
+          icon: 'none'
+        });
+      } finally {
+        this.$emit('update:loading', false);
+      }
+    },
+    // 按照deptName分组数据
+    groupDataByDept() {
+      if (!this.apiData || this.apiData.length === 0) {
+        this.groupedData = [];
+        return;
+      }
+
+      // 使用Map来分组数据
+      const deptMap = new Map();
+
+      this.apiData.forEach(item => {
+        const deptName = item.deptName || '未知部门';
+
+        if (!deptMap.has(deptName)) {
+          deptMap.set(deptName, []);
+        }
+
+        // 格式化数据，确保包含所有需要的字段
+        const formattedItem = {
+          userName: item.userName || '未知用户',
+          completedTasks: item.completedTasks,
+          avgScore: item.avgScore || 0,
+          progress: item.completedTasks == 0 ? 0 : item.completedTasks / item.totalTasks
+        };
+
+        deptMap.get(deptName).push(formattedItem);
+      });
+
+      // 转换为数组格式
+      this.groupedData = Array.from(deptMap.entries()).map(([deptName, data]) => ({
+        title: deptName,
+        data: data
+      }));
+
+      console.log('分组后的数据:', this.groupedData);
+    },
+    // 根据完成比例返回对应的颜色
+    getProgressColor(percentage) {
+      if (percentage >= 100) {
+        return '#2B7BFF'; // 大于等于100%时使用蓝色
+      } else if (percentage > 0 && percentage < 100) {
+        return '#03AF43'; // 0-100%之间使用绿色
+      } else {
+        return '#E40808'; // 0%时使用红色
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.real-time-status {
+  margin-top: 20rpx;
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200rpx;
+    font-size: 28rpx;
+    color: #999;
+  }
+
+  .statistics-section {
+    .statistic-table-wrapper {
+      margin-bottom: 32rpx;
+      
+      .table-title {
+        font-size: 32rpx;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 24rpx;
+        padding-left: 16rpx;
+        border-left: 8rpx solid #2B7BFF;
+      }
+    }
+
+    .progress-container {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+
+      .progress-text {
+        font-size: 24rpx;
+        color: #666;
+        min-width: 60rpx;
+      }
+    }
+
+    .no-data {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 200rpx;
+      font-size: 28rpx;
+      color: #999;
+    }
+  }
+}
+</style>

src/pages/questionStatistics/index.vue

@@ -1,37 +1,30 @@
 <template>
-    <home-container>
+    <home-container :customStyle="{ background: 'none' }">
         <div class="question-statistics-container">
-
-
-
-            <!-- 加载状态 -->
-            <div v-if="loading" class="loading-container">
-                <text>加载中...</text>
+            <!-- 选项卡 -->
+            <div class="tab-container">
+                <h-tabs class="h-tab" v-model="activeTab" :tabs="tabs" :activeColor="'#2B7BFF'" value-key="value" label-key="label"
+                    @change="handleTabChange" />
             </div>
 
-            <!-- 统计表格区域 - 遍历分组后的数据 -->
-            <div v-else class="statistics-section">
-                <div v-for="(group, index) in groupedData" :key="index" class="statistic-table-wrapper">
-                    <!-- 每个统计表格的标题 - 使用deptName -->
-                    <h2 class="table-title">{{ group.title }}</h2>
-
-                    <!-- statistic-table组件 -->
-                    <statistic-table :columns="tableColumns" :data="group.data" >
-                        <template #column-progress="{ row, index }">
-                            <view class="progress-container">
-                                <u-line-progress :percentage="Math.round(row.progress * 100)" :showText="false"
-                                    :activeColor="getProgressColor(row.progress * 100)" height="20rpx"
-                                    width="200rpx"></u-line-progress>
-                                <text class="progress-text">{{ Math.round(row.progress * 100) }}%</text>
-                            </view>
-                        </template>
-                    </statistic-table>
-                </div>
-
-                <!-- 无数据提示 -->
-                <div v-if="groupedData.length === 0" class="no-data">
-                    <text>暂无统计数据</text>
-                </div>
+            <!-- 组件切换区域 -->
+            <div class="component-container">
+                <!-- 实时状态组件 -->
+                <real-time-status 
+                    v-if="activeTab === 'realtime'" 
+                    :loading="loading"
+                    @update:loading="loading = $event"
+                />
+                
+                <!-- 完成趋势组件 -->
+                <completion-trend 
+                    v-else-if="activeTab === 'trend'" 
+                />
+                
+                <!-- 错题分析组件 -->
+                <error-analysis 
+                    v-else-if="activeTab === 'analysis'" 
+                />
             </div>
         </div>
     </home-container>
@@ -39,97 +32,56 @@
 
 <script>
 import HomeContainer from "@/components/HomeContainer.vue";
-import StatisticTable from "@/components/statistic-table/statistic-table.vue";
-import { getDailyAllUsersRanking } from "@/api/questionStatistics/questionStatistics";
+import RealTimeStatus from "./components/RealTimeStatus.vue";
+import CompletionTrend from "./components/CompletionTrend.vue";
+import ErrorAnalysis from "./components/ErrorAnalysis.vue";
+import HTabs from "@/components/h-tabs/h-tabs.vue";
+import { mapState } from 'vuex'
 
 export default {
     name: 'QuestionStatistics',
     components: {
         HomeContainer,
-        StatisticTable
+        RealTimeStatus,
+        CompletionTrend,
+        ErrorAnalysis,
+        HTabs
     },
     data() {
         return {
             loading: false,
-            // 固定的表格列配置
-            tableColumns: [
-                { props: 'userName', title: '姓名' },
-                { props: 'completedTasks', title: '答题进度' },
-                { props: 'avgScore', title: '平均分' },
-                { props: 'progress', title: '完成率', slot: true }
-            ],
-            // 分组后的数据
-            groupedData: [],
-            // 原始接口数据
-            apiData: []
+            activeTab: 'realtime', // realtime, trend, analysis
+            allTabs: [
+                { label: '实时状态', value: 'realtime', style: { 'color': '#666666' }, activeStyle: { 'color': '#2B7BFF' } },
+                { label: '完成趋势', value: 'trend', style: { 'color': '#666666' }, activeStyle: { 'color': '#2B7BFF' } },
+                { label: '错题分析', value: 'analysis', style: { 'color': '#666666' }, activeStyle: { 'color': '#2B7BFF' } }
+            ]
         };
     },
-    mounted() {
-        this.getDailyAllUsersRanking();
-    },
-    methods: {
-        async getDailyAllUsersRanking() {
-            const res = await getDailyAllUsersRanking({
-                pageNum: 1,
-                pageSize: 100
-            });
-            console.log('getDailyAllUsersRanking', res);
-            if (res.code === 200) {
-                this.apiData = res.data.rows || [];
-
-                this.groupDataByDept();
-            } else {
-                uni.showToast({
-                    title: '获取数据失败',
-                    icon: 'none'
-                });
+    computed: {
+        ...mapState({
+            userRoles: state => state.user.roles
+        }),
+        // 根据用户角色过滤tabs
+        tabs() {
+            // 如果是班组长，过滤掉完成趋势tab
+            if (this.isBanZuZhang) {
+                return this.allTabs.filter(tab => tab.value !== 'trend');
             }
+            return this.allTabs;
         },
-        // 按照deptName分组数据
-        groupDataByDept() {
-            if (!this.apiData || this.apiData.length === 0) {
-                this.groupedData = [];
-                return;
-            }
-
-            // 使用Map来分组数据
-            const deptMap = new Map();
-
-            this.apiData.forEach(item => {
-                const deptName = item.deptName || '未知部门';
-
-                if (!deptMap.has(deptName)) {
-                    deptMap.set(deptName, []);
-                }
-
-                // 格式化数据，确保包含所有需要的字段
-                const formattedItem = {
-                    userName: item.userName || '未知用户',
-                    completedTasks: item.completedTasks,
-                    avgScore: item.avgScore || 0,
-                    progress: item.completedTasks == 0 ? 0 : item.completedTasks / item.totalTasks
-                };
-
-                deptMap.get(deptName).push(formattedItem);
-            });
-
-            // 转换为数组格式
-            this.groupedData = Array.from(deptMap.entries()).map(([deptName, data]) => ({
-                title: deptName,
-                data: data
-            }));
-
-            console.log('分组后的数据:', this.groupedData);
-        },
-        // 根据完成比例返回对应的颜色
-        getProgressColor(percentage) {
-            if (percentage >= 100) {
-                return '#2B7BFF'; // 大于等于100%时使用蓝色
-            } else if (percentage > 0 && percentage < 100) {
-                return '#03AF43'; // 0-100%之间使用绿色
-            } else {
-                return '#E40808'; // 0%时使用红色
-            }
+        // 判断是否为班组长
+        isBanZuZhang() {
+            let roles = this.userRoles;
+            console.log('用户角色：', roles);
+            return roles && (roles.includes('banzuzhang') || roles.includes('teamLeader'));
+        }
+    },
+    methods: {
+        // 选项卡切换事件
+        handleTabChange(index) {
+            this.activeTab = index;
+            console.log('切换到选项卡:', this.tabs.find(tab => tab.value === index)?.label);
         }
     }
 };
@@ -137,43 +89,75 @@ export default {
 
 <style lang="scss" scoped>
 .question-statistics-container {
-    padding: 32rpx;
+    position: relative;
+    padding-top: 80rpx;
 }
 
+.tab-container {
+    position: fixed;
+    top: 80rpx;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    padding: 15px 15px 0 15px;
+    background-color: white;
+    .h-tab{
+        padding-bottom: 10px !important;
+    }
+}
 
+.capsule-tab-container {
+    display: inline-flex;
+    
+    // border: 2rpx solid #2B7BFF;
+    border-radius: 32rpx;
+    padding: 2rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+    
+}
 
-.loading-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 200rpx;
-    font-size: 32rpx;
-    color: #666;
+.capsule-tab-item {
+    position: relative;
+    padding: 8rpx 24rpx;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    user-select: none;
+
+    // 非激活状态 - 蓝字白底蓝边框
+    &:not(.capsule-tab-active) {
+        background: #ffffff;
+        border: 1rpx solid #2B7BFF;
+
+        .capsule-tab-text {
+            color: #2B7BFF;
+            font-weight: normal;
+        }
+    }
+
+    // 激活状态 - 白字蓝底
+    &.capsule-tab-active {
+        background: #2B7BFF;
+        border: 1rpx solid #2B7BFF;
+        box-shadow: 0 2rpx 8rpx rgba(43, 123, 255, 0.3);
+
+        .capsule-tab-text {
+            color: #ffffff;
+            font-weight: bold;
+        }
+    }
 }
 
-.statistics-section {
-    display: flex;
-    flex-direction: column;
-    gap: 48rpx;
+.capsule-tab-text {
+    font-size: 24rpx;
+    line-height: 1;
+    transition: all 0.3s ease;
 }
 
-.statistic-table-wrapper {
-    background: #fff;
-    border-radius: 16rpx;
-    padding: 32rpx;
-    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-
-    .table-title {
-        font-size: 36rpx;
-        font-weight: 600;
-        color: #333;
-        margin-bottom: 24rpx;
-        padding-bottom: 16rpx;
-        border-bottom: 2rpx solid #f0f0f0;
-    }
+.component-container {
+    min-height: 400rpx;
 }
 
-.no-data {
+.loading-container {
     display: flex;
     justify-content: center;
     align-items: center;