From c59f2b6e9b18b3bc3a18525d0b75e218a8cd0bad Mon Sep 17 00:00:00 2001
From: jhd <1684074631@qq.com>
Date: Fri, 15 May 2026 15:39:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A5=96=E9=87=91=E7=9C=8B=E6=9D=BF=E5=92=8C?=
 =?UTF-8?q?=E5=85=AC=E8=BE=85=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 klp-ui/src/api/eqp/auxiliaryConsume.js       |  54 ++
 klp-ui/src/router/index.js                   |  12 +
 klp-ui/src/views/ems/assisted/statistics.vue | 882 +++++++++++++++++++
 klp-ui/src/views/wms/bonus/statistics.vue    | 667 ++++++++++++++
 4 files changed, 1615 insertions(+)
 create mode 100644 klp-ui/src/views/ems/assisted/statistics.vue
 create mode 100644 klp-ui/src/views/wms/bonus/statistics.vue

diff --git a/klp-ui/src/api/eqp/auxiliaryConsume.js b/klp-ui/src/api/eqp/auxiliaryConsume.js
index 14f76896..3925656f 100644
--- a/klp-ui/src/api/eqp/auxiliaryConsume.js
+++ b/klp-ui/src/api/eqp/auxiliaryConsume.js
@@ -42,3 +42,57 @@ export function delAuxiliaryConsume(consumeId) {
     method: 'delete'
   })
 }
+/**
+ * 获取消耗统计汇总
+ */
+export function getConsumeStatistics(query) {
+  return request({
+    url: '/eqp/auxiliaryConsume/statistics/list',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 获取消耗趋势数据
+ */
+export function getConsumeTrend(query) {
+  return request({
+    url: '/eqp/auxiliaryConsume/statistics/trend',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 按公辅类型统计
+ */
+export function getConsumeByType(query) {
+  return request({
+    url: '/eqp/auxiliaryConsume/statistics/groupByType',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 按产线统计
+ */
+export function getConsumeByLine(query) {
+  return request({
+    url: '/eqp/auxiliaryConsume/statistics/groupByLine',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 获取消耗明细
+ */
+export function getConsumeDetail(query) {
+  return request({
+    url: '/eqp/auxiliaryConsume/statistics/detail',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/klp-ui/src/router/index.js b/klp-ui/src/router/index.js
index de5f0aba..6643f3d8 100644
--- a/klp-ui/src/router/index.js
+++ b/klp-ui/src/router/index.js
@@ -152,6 +152,18 @@ export const dynamicRoutes = [
       }
     ]
   },
+  {
+    path: '/ems/assisted/statistics',
+    component: Layout,
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/ems/assisted/statistics.vue'),
+        name: 'AuxiliaryStatistics',
+        meta: { title: '公辅消耗统计', icon: 'chart' }
+      }
+    ]
+  },
   {
     path: '/system/role-auth',
     component: Layout,
diff --git a/klp-ui/src/views/ems/assisted/statistics.vue b/klp-ui/src/views/ems/assisted/statistics.vue
new file mode 100644
index 00000000..804c6c86
--- /dev/null
+++ b/klp-ui/src/views/ems/assisted/statistics.vue
@@ -0,0 +1,882 @@
+<template>
+  <div class="ems-statistics-container" v-loading="loading">
+    <!-- 顶部筛选区域 -->
+    <div class="filter-panel">
+      <el-form :inline="true" :model="filterForm" class="filter-form">
+        <el-form-item label="开始时间">
+          <el-date-picker
+            v-model="filterForm.startDate"
+            type="date"
+            placeholder="开始日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="结束时间">
+          <el-date-picker
+            v-model="filterForm.endDate"
+            type="date"
+            placeholder="结束日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+        </el-form-item>
+        <!-- 日期快捷选择按钮 -->
+        <el-form-item>
+          <div class="date-shortcut">
+            <el-button
+              type="text"
+              size="mini"
+              :class="{ 'date-shortcut-active': selectedDateRange === 'prevDay' }"
+              @click="setDateRange('prevDay')">前一天</el-button>
+            <el-button
+              type="text"
+              size="mini"
+              :class="{ 'date-shortcut-active': selectedDateRange === 'today' }"
+              @click="setDateRange('today')">今天</el-button>
+            <el-button
+              type="text"
+              size="mini"
+              :class="{ 'date-shortcut-active': selectedDateRange === 'nextDay' }"
+              @click="setDateRange('nextDay')">后一天</el-button>
+            <el-button
+              type="text"
+              size="mini"
+              :class="{ 'date-shortcut-active': selectedDateRange === 'last7Days' }"
+              @click="setDateRange('last7Days')">近7天</el-button>
+            <el-button
+              type="text"
+              size="mini"
+              :class="{ 'date-shortcut-active': selectedDateRange === 'last15Days' }"
+              @click="setDateRange('last15Days')">近15天</el-button>
+            <el-button
+              type="text"
+              size="mini"
+              :class="{ 'date-shortcut-active': selectedDateRange === 'last30Days' }"
+              @click="setDateRange('last30Days')">近30天</el-button>
+            <el-button
+              type="text"
+              size="mini"
+              :class="{ 'date-shortcut-active': selectedDateRange === 'thisWeek' }"
+              @click="setDateRange('thisWeek')">本周</el-button>
+            <el-button
+              type="text"
+              size="mini"
+              :class="{ 'date-shortcut-active': selectedDateRange === 'thisMonth' }"
+              @click="setDateRange('thisMonth')">本月</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item label="产线">
+          <el-select v-model="filterForm.lineName" placeholder="请选择产线" clearable>
+            <el-option label="全部" value="" />
+            <el-option v-for="item in dict.type.sys_lines" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="公辅类型">
+          <el-select v-model="filterForm.typeId" placeholder="请选择公辅类型" clearable>
+            <el-option label="全部" value="" />
+            <el-option v-for="item in auxiliaryTypes" :key="item.typeId" :label="item.typeName" :value="item.typeId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 统计指标卡 -->
+    <div class="stat-cards">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <div class="stat-card stat-0">
+            <div class="stat-icon"><i class="el-icon-data-line"></i></div>
+            <div class="stat-content">
+              <p class="stat-value">{{ summaryData.totalConsume || 0 }}</p>
+              <p class="stat-label">总消耗量</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="stat-card stat-1">
+            <div class="stat-icon"><i class="el-icon-data-analysis"></i></div>
+            <div class="stat-content">
+              <p class="stat-value">{{ summaryData.avgDailyConsume || 0 }}</p>
+              <p class="stat-label">日均消耗</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="stat-card stat-2">
+            <div class="stat-icon"><i class="el-icon-trending-up"></i></div>
+            <div class="stat-content">
+              <p class="stat-value">{{ summaryData.growthRate >= 0 ? '+' : '' }}{{ summaryData.growthRate || 0 }}%</p>
+              <p class="stat-label">环比增长</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="stat-card stat-3">
+            <div class="stat-icon"><i class="el-icon-warning"></i></div>
+            <div class="stat-content">
+              <p class="stat-value">{{ summaryData.alertCount || 0 }}</p>
+              <p class="stat-label">异常告警</p>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <!-- 图表区域 -->
+    <div class="charts-section">
+      <!-- 消耗趋势与类型占比 -->
+      <el-row :gutter="20">
+        <el-col :span="16">
+          <div class="chart-card">
+            <div class="chart-header">
+              <span class="chart-title">消耗趋势</span>
+            </div>
+            <div ref="trendChartRef" class="chart-container"></div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="chart-card">
+            <div class="chart-header">
+              <span class="chart-title">公辅类型占比</span>
+            </div>
+            <div ref="pieChartRef" class="chart-container"></div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 产线消耗排行 -->
+      <el-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="24">
+          <div class="chart-card">
+            <div class="chart-header">
+              <span class="chart-title">产线消耗排行</span>
+            </div>
+            <div ref="barChartRef" class="chart-container"></div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 公辅产线二维表 -->
+      <el-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="24">
+          <div class="chart-card">
+            <div class="chart-header" style="flex-wrap: wrap; gap: 12px;">
+              <span class="chart-title">产线公辅类型二维表</span>
+              <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+                <el-select v-model="selectedLinesForTable" multiple placeholder="请选择产线" @change="handleTableFilterChange"
+                  style="width: 200px;">
+                  <el-option v-for="line in dict.type.sys_lines" :key="line.value" :label="line.label" :value="line.value">
+                  </el-option>
+                </el-select>
+                <el-select v-model="selectedTypesForTable" multiple placeholder="请选择公辅类型" @change="handleTableFilterChange"
+                  style="width: 200px;">
+                  <el-option v-for="type in auxiliaryTypes" :key="type.typeId" :label="type.typeName" :value="type.typeId">
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="table-container">
+              <el-table :data="twoDTableData" border style="width: 100%" :summary-method="getSummaries" show-summary>
+                <el-table-column prop="lineName" label="产线" />
+                <el-table-column v-for="type in displayTypes" :key="type.typeId"
+                  :prop="'type_' + type.typeId" :label="type.typeName">
+                  <template slot-scope="scope">
+                    {{ scope.row['type_' + type.typeId] ? Number(scope.row['type_' + type.typeId]).toFixed(2) : 0 }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="total" label="合计" />
+              </el-table>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 消耗明细表格 -->
+      <el-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="24">
+          <div class="chart-card">
+            <div class="chart-header">
+              <span class="chart-title">消耗明细</span>
+            </div>
+            <div class="table-container">
+              <el-table :data="detailList" border style="width: 100%">
+                <el-table-column prop="recordDate" label="日期" />
+                <el-table-column prop="lineName" label="产线" />
+                <el-table-column prop="typeName" label="公辅类型" />
+                <el-table-column prop="consume" label="消耗量" />
+                <el-table-column prop="remark" label="备注" />
+              </el-table>
+              <pagination v-show="total > 0" :total="total" :page.sync="pageParams.pageNum" :limit.sync="pageParams.pageSize" @pagination="getDetailList" />
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { listAuxiliaryType } from "@/api/eqp/auxiliaryType";
+import { listAuxiliaryConsume } from "@/api/eqp/auxiliaryConsume";
+import dayjs from "dayjs";
+
+export default {
+  name: "AuxiliaryStatistics",
+  dicts: ['sys_lines'],
+  data() {
+    return {
+      // 筛选表单
+      filterForm: {
+        startDate: "",
+        endDate: "",
+        lineName: "",
+        typeId: ""
+      },
+      // 分页参数
+      pageParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      // 公辅类型列表
+      auxiliaryTypes: [],
+      // 原始数据（用于计算）
+      rawData: [],
+      // 汇总数据
+      summaryData: {},
+      // 明细数据
+      detailList: [],
+      total: 0,
+      // 图表数据
+      trendData: [],
+      typeData: [],
+      lineData: [],
+      // 二维表数据
+      twoDTableData: [],
+      // 二维表筛选条件
+      selectedLinesForTable: [],
+      selectedTypesForTable: [],
+      // 显示的公辅类型
+      displayTypes: [],
+      // 图表实例
+      trendChart: null,
+      pieChart: null,
+      barChart: null,
+      // 加载状态
+      loading: false,
+      // 当前选中的日期范围类型
+      selectedDateRange: 'thisMonth'
+    };
+  },
+  created() {
+    this.initDefaultDate();
+    this.loadAuxiliaryTypes();
+    this.handleQuery();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initCharts();
+    });
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    this.disposeCharts();
+  },
+  methods: {
+    // 初始化默认日期（本月）
+    initDefaultDate() {
+      const now = dayjs();
+      this.filterForm.startDate = now.startOf('month').format('YYYY-MM-DD');
+      this.filterForm.endDate = now.format('YYYY-MM-DD');
+    },
+    // 日期快捷选择
+    setDateRange(type) {
+      const now = dayjs();
+      let startDate, endDate;
+
+      switch (type) {
+        case 'prevDay': // 前一天
+          startDate = now.subtract(1, 'day').format('YYYY-MM-DD');
+          endDate = now.subtract(1, 'day').format('YYYY-MM-DD');
+          break;
+        case 'today': // 今天
+          startDate = now.format('YYYY-MM-DD');
+          endDate = now.format('YYYY-MM-DD');
+          break;
+        case 'nextDay': // 后一天
+          startDate = now.add(1, 'day').format('YYYY-MM-DD');
+          endDate = now.add(1, 'day').format('YYYY-MM-DD');
+          break;
+        case 'last7Days': // 近7天
+          startDate = now.subtract(6, 'day').format('YYYY-MM-DD');
+          endDate = now.format('YYYY-MM-DD');
+          break;
+        case 'last15Days': // 近15天
+          startDate = now.subtract(14, 'day').format('YYYY-MM-DD');
+          endDate = now.format('YYYY-MM-DD');
+          break;
+        case 'last30Days': // 近30天
+          startDate = now.subtract(29, 'day').format('YYYY-MM-DD');
+          endDate = now.format('YYYY-MM-DD');
+          break;
+        case 'thisWeek': // 本周
+          startDate = now.startOf('week').format('YYYY-MM-DD');
+          endDate = now.endOf('week').format('YYYY-MM-DD');
+          break;
+        case 'thisMonth': // 本月
+          startDate = now.startOf('month').format('YYYY-MM-DD');
+          endDate = now.endOf('month').format('YYYY-MM-DD');
+          break;
+        default:
+          return;
+      }
+
+      // 更新选中状态
+      this.selectedDateRange = type;
+      this.filterForm.startDate = startDate;
+      this.filterForm.endDate = endDate;
+      this.handleQuery();
+    },
+    // 加载公辅类型
+    async loadAuxiliaryTypes() {
+      const res = await listAuxiliaryType({ pageSize: 999 });
+      this.auxiliaryTypes = res.rows || [];
+    },
+    // 查询数据（使用list接口，前端计算）
+    async handleQuery() {
+      this.loading = true;
+      try {
+        await this.loadRawData();
+        await this.calculateSummary(); // 改为异步调用
+        this.calculateTrend();
+        this.calculateTypeData();
+        this.calculateLineData();
+        this.updateDisplayTypes();
+        this.calculateTwoDTableData();
+        this.updateCharts();
+      } finally {
+        this.loading = false;
+      }
+    },
+    // 重置筛选
+      handleReset() {
+        this.initDefaultDate();
+        this.filterForm.lineName = "";
+        this.filterForm.typeId = "";
+        this.handleQuery();
+      },
+      // 二维表筛选变化
+      handleTableFilterChange() {
+        this.updateDisplayTypes();
+        this.calculateTwoDTableData();
+      },
+    // 获取查询参数
+    getQueryParams(needPage = false) {
+      const params = {};
+      if (this.filterForm.startDate) {
+        params.recordStartDate = this.filterForm.startDate + ' 00:00:00';
+      }
+      if (this.filterForm.endDate) {
+        params.recordEndDate = this.filterForm.endDate + ' 23:59:59';
+      }
+      if (this.filterForm.lineName) {
+        params.lineName = this.filterForm.lineName;
+      }
+      if (this.filterForm.typeId) {
+        params.typeId = this.filterForm.typeId;
+      }
+      if (needPage) {
+        params.pageNum = this.pageParams.pageNum;
+        params.pageSize = this.pageParams.pageSize;
+      }
+      return params;
+    },
+    // 加载原始数据（不分页，获取全部）
+    async loadRawData() {
+      const params = this.getQueryParams();
+      params.pageSize = 9999; // 获取全部数据
+      const res = await listAuxiliaryConsume(params);
+      this.rawData = res.rows || [];
+
+      // 同时更新分页数据
+      const pageParams = this.getQueryParams(true);
+      const pageRes = await listAuxiliaryConsume(pageParams);
+      this.detailList = pageRes.rows || [];
+      this.total = pageRes.total || 0;
+    },
+    // 前端计算汇总数据（异步）
+    async calculateSummary() {
+      const data = this.rawData;
+
+      // 总消耗量
+      const totalConsume = data.reduce((sum, item) => sum + Number(item.consume || 0), 0);
+
+      // 日均消耗
+      const startDate = dayjs(this.filterForm.startDate);
+      const endDate = dayjs(this.filterForm.endDate);
+      const days = endDate.diff(startDate, 'day') + 1;
+      const avgDailyConsume = days > 0 ? totalConsume / days : 0;
+
+      // 环比增长（真实计算：与上月同期对比）
+      const growthRate = await this.calculateGrowthRate();
+
+      // 异常告警数（简化：消耗量超过100视为异常）
+      const alertCount = data.filter(item => Number(item.consume || 0) > 100).length;
+
+      this.summaryData = {
+        totalConsume: totalConsume.toFixed(2),
+        avgDailyConsume: avgDailyConsume.toFixed(2),
+        growthRate: growthRate.toFixed(1),
+        alertCount: alertCount
+      };
+    },
+    // 计算环比增长率（真实计算）
+    async calculateGrowthRate() {
+      // 获取本期总消耗
+      const currentConsume = this.rawData.reduce((sum, item) => {
+        return sum + Number(item.consume || 0);
+      }, 0);
+
+      // 计算上期时间范围（上个月同期）
+      const startDate = dayjs(this.filterForm.startDate);
+      const endDate = dayjs(this.filterForm.endDate);
+      const prevStartDate = startDate.subtract(1, 'month');
+      const prevEndDate = endDate.subtract(1, 'month');
+
+      // 构建上期查询参数
+      const prevParams = {
+        recordStartDate: prevStartDate.format('YYYY-MM-DD') + ' 00:00:00',
+        recordEndDate: prevEndDate.format('YYYY-MM-DD') + ' 23:59:59',
+        pageSize: 9999
+      };
+
+      if (this.filterForm.lineName) {
+        prevParams.lineName = this.filterForm.lineName;
+      }
+      if (this.filterForm.typeId) {
+        prevParams.typeId = this.filterForm.typeId;
+      }
+
+      try {
+        // 请求上期数据
+        const prevRes = await listAuxiliaryConsume(prevParams);
+        const prevData = prevRes.rows || [];
+
+        // 计算上期总消耗
+        const prevConsume = prevData.reduce((sum, item) => {
+          return sum + Number(item.consume || 0);
+        }, 0);
+
+        // 计算环比增长率
+        if (prevConsume === 0) {
+          return 0; // 避免除以0
+        }
+
+        return ((currentConsume - prevConsume) / prevConsume * 100);
+      } catch (error) {
+        console.error('获取上期数据失败:', error);
+        return 0;
+      }
+    },
+    // 按日期计算趋势数据
+    calculateTrend() {
+      const data = this.rawData;
+      const dateMap = new Map();
+
+      // 按日期汇总
+      data.forEach(item => {
+        const dateStr = dayjs(item.recordDate).format('YYYY-MM-DD');
+        const current = dateMap.get(dateStr) || 0;
+        dateMap.set(dateStr, current + Number(item.consume || 0));
+      });
+
+      // 生成完整日期范围
+      const startDate = dayjs(this.filterForm.startDate);
+      const endDate = dayjs(this.filterForm.endDate);
+      const trendData = [];
+
+      let current = startDate;
+      while (current.isBefore(endDate) || current.isSame(endDate)) {
+        const dateStr = current.format('YYYY-MM-DD');
+        trendData.push({
+          date: dateStr,
+          consume: dateMap.get(dateStr) || 0
+        });
+        current = current.add(1, 'day');
+      }
+
+      this.trendData = trendData;
+    },
+    // 按公辅类型汇总
+    calculateTypeData() {
+      const data = this.rawData;
+      const typeMap = new Map();
+
+      // 按typeId汇总
+      data.forEach(item => {
+        const typeId = item.typeId;
+        const typeName = this.getTypeName(typeId);
+        const current = typeMap.get(typeId) || { typeId, typeName, consume: 0 };
+        current.consume += Number(item.consume || 0);
+        typeMap.set(typeId, current);
+      });
+
+      this.typeData = Array.from(typeMap.values());
+    },
+    // 按产线汇总
+    calculateLineData() {
+      const data = this.rawData;
+      const lineMap = new Map();
+
+      // 按lineName汇总
+      data.forEach(item => {
+        const lineName = item.lineName || '未知';
+        const current = lineMap.get(lineName) || 0;
+        lineMap.set(lineName, current + Number(item.consume || 0));
+      });
+
+      // 转换为数组并排序
+      this.lineData = Array.from(lineMap.entries())
+        .map(([lineName, consume]) => ({ lineName, consume }))
+        .sort((a, b) => b.consume - a.consume);
+    },
+    // 根据typeId获取类型名称
+    getTypeName(typeId) {
+      const type = this.auxiliaryTypes.find(t => t.typeId === typeId);
+      return type ? type.typeName : '未知类型';
+    },
+    // 计算二维表数据
+    calculateTwoDTableData() {
+      const data = this.rawData;
+      const lineTypeMap = new Map();
+
+      // 获取筛选后的产线列表
+      const filteredLines = this.selectedLinesForTable.length > 0
+        ? new Set(this.selectedLinesForTable)
+        : null;
+
+      // 获取筛选后的公辅类型列表
+      const filteredTypes = this.selectedTypesForTable.length > 0
+        ? new Set(this.selectedTypesForTable)
+        : null;
+
+      // 按产线和公辅类型汇总
+      data.forEach(item => {
+        const lineName = item.lineName || '未知';
+        const typeId = item.typeId;
+
+        // 产线筛选
+        if (filteredLines && !filteredLines.has(lineName)) {
+          return;
+        }
+
+        // 公辅类型筛选
+        if (filteredTypes && !filteredTypes.has(typeId)) {
+          return;
+        }
+
+        if (!lineTypeMap.has(lineName)) {
+          lineTypeMap.set(lineName, { lineName });
+        }
+        const lineData = lineTypeMap.get(lineName);
+        const key = 'type_' + typeId;
+        if (!lineData[key]) {
+          lineData[key] = 0;
+        }
+        lineData[key] += Number(item.consume || 0);
+      });
+
+      // 计算每行的合计（只计算显示的类型）
+      this.twoDTableData = Array.from(lineTypeMap.entries()).map(([lineName, data]) => {
+        const row = { lineName, ...data };
+        let total = 0;
+        this.displayTypes.forEach(type => {
+          const val = data['type_' + type.typeId] || 0;
+          total += val;
+        });
+        row.total = Number(total.toFixed(2));
+        return row;
+      });
+    },
+    // 更新显示的公辅类型
+    updateDisplayTypes() {
+      if (this.selectedTypesForTable.length > 0) {
+        this.displayTypes = this.auxiliaryTypes.filter(t => this.selectedTypesForTable.includes(t.typeId));
+      } else {
+        this.displayTypes = [...this.auxiliaryTypes];
+      }
+    },
+    // 二维表汇总方法
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计';
+          return;
+        }
+        if (column.property === 'total') {
+          const values = data.map(item => Number(item[column.property]) || 0);
+          sums[index] = values.reduce((prev, curr) => prev + curr, 0).toFixed(2);
+        } else if (column.property && column.property.startsWith('type_')) {
+          const values = data.map(item => Number(item[column.property]) || 0);
+          sums[index] = values.reduce((prev, curr) => prev + curr, 0).toFixed(2);
+        } else {
+          sums[index] = '';
+        }
+      });
+      return sums;
+    },
+    // 初始化图表
+    initCharts() {
+      this.trendChart = echarts.init(this.$refs.trendChartRef);
+      this.pieChart = echarts.init(this.$refs.pieChartRef);
+      this.barChart = echarts.init(this.$refs.barChartRef);
+    },
+    // 更新图表
+    updateCharts() {
+      this.updateTrendChart();
+      this.updatePieChart();
+      this.updateBarChart();
+    },
+    // 更新趋势图
+    updateTrendChart() {
+      if (!this.trendChart) return;
+
+      const dates = this.trendData.map(item => item.date);
+      const values = this.trendData.map(item => Number(item.consume));
+
+      const option = {
+        tooltip: { trigger: 'axis' },
+        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+        xAxis: { type: 'category', data: dates, axisLabel: { rotate: 30 } },
+        yAxis: { type: 'value' },
+        series: [{
+          name: '消耗量',
+          type: 'line',
+          smooth: true,
+          data: values,
+          areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' }, { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }]) }
+        }]
+      };
+
+      this.trendChart.setOption(option, true);
+    },
+    // 更新饼图
+    updatePieChart() {
+      if (!this.pieChart) return;
+
+      const option = {
+        tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+        legend: { orient: 'vertical', right: '5%', top: 'center' },
+        series: [{
+          type: 'pie',
+          radius: ['40%', '70%'],
+          center: ['40%', '50%'],
+          avoidLabelOverlap: false,
+          itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
+          label: { show: false },
+          emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
+          labelLine: { show: false },
+          data: this.typeData.map(item => ({
+            name: item.typeName,
+            value: Number(item.consume)
+          }))
+        }]
+      };
+
+      this.pieChart.setOption(option, true);
+    },
+    // 更新柱状图
+    updateBarChart() {
+      if (!this.barChart) return;
+
+      const lines = this.lineData.map(item => item.lineName);
+      const values = this.lineData.map(item => Number(item.consume));
+
+      const option = {
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+        xAxis: { type: 'category', data: lines },
+        yAxis: { type: 'value' },
+        series: [{
+          name: '消耗量',
+          type: 'bar',
+          data: values,
+          itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, { offset: 1, color: '#188df0' }]) }
+        }]
+      };
+
+      this.barChart.setOption(option, true);
+    },
+    // 窗口resize处理
+    handleResize() {
+      this.trendChart?.resize();
+      this.pieChart?.resize();
+      this.barChart?.resize();
+    },
+    // 销毁图表
+    disposeCharts() {
+      this.trendChart?.dispose();
+      this.pieChart?.dispose();
+      this.barChart?.dispose();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ems-statistics-container {
+  padding: 20px;
+  background: #f6f7fb;
+  min-height: calc(100vh - 100px);
+
+  .filter-panel {
+    background: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+    .filter-form {
+      margin: 0;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      gap: 16px;
+    }
+  }
+
+  .date-shortcut {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .date-shortcut-active {
+    background-color: #409eff !important;
+    color: #fff !important;
+    border-radius: 4px;
+    padding: 4px 12px;
+  }
+
+  .stat-cards {
+    margin-bottom: 20px;
+
+    .stat-card {
+      background: #ffffff;
+      border-radius: 8px;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+      }
+
+      &.stat-0 {
+        border-left: 4px solid #409EFF;
+      }
+
+      &.stat-1 {
+        border-left: 4px solid #67C23A;
+      }
+
+      &.stat-2 {
+        border-left: 4px solid #E6A23C;
+      }
+
+      &.stat-3 {
+        border-left: 4px solid #F56C6C;
+      }
+
+      .stat-icon {
+        width: 60px;
+        height: 60px;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16px;
+        font-size: 28px;
+
+        .stat-0 & {
+          background: linear-gradient(135deg, #409EFF, #00CED1);
+          color: #ffffff;
+        }
+
+        .stat-1 & {
+          background: linear-gradient(135deg, #67C23A, #95E67D);
+          color: #ffffff;
+        }
+
+        .stat-2 & {
+          background: linear-gradient(135deg, #E6A23C, #F7D94C);
+          color: #ffffff;
+        }
+
+        .stat-3 & {
+          background: linear-gradient(135deg, #F56C6C, #FC9494);
+          color: #ffffff;
+        }
+      }
+
+      .stat-content {
+        flex: 1;
+
+        .stat-value {
+          font-size: 28px;
+          font-weight: bold;
+          color: #303133;
+          margin-bottom: 4px;
+        }
+
+        .stat-label {
+          font-size: 14px;
+          color: #909399;
+        }
+      }
+    }
+  }
+
+  .charts-section {
+    .chart-card {
+      background: #ffffff;
+      border-radius: 8px;
+      padding: 20px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+      .chart-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .chart-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+        }
+      }
+
+      .chart-container {
+        width: 100%;
+        height: 350px;
+      }
+
+      .table-container {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/klp-ui/src/views/wms/bonus/statistics.vue b/klp-ui/src/views/wms/bonus/statistics.vue
new file mode 100644
index 00000000..e39293e1
--- /dev/null
+++ b/klp-ui/src/views/wms/bonus/statistics.vue
@@ -0,0 +1,667 @@
+<template>
+  <div class="bonus-statistics-container" v-loading="loading">
+    <!-- 顶部筛选区域 -->
+    <div class="filter-panel">
+      <el-form :inline="true" :model="filterForm" class="filter-form">
+        <el-form-item label="时间范围">
+          <el-date-picker
+            v-model="filterForm.dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="产线">
+          <el-select v-model="filterForm.productionLine" placeholder="请选择产线" clearable>
+            <el-option label="全部" value="" />
+            <el-option v-for="item in productionLineList" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 统计指标卡 -->
+    <div class="stat-cards">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <div class="stat-card stat-0">
+            <div class="stat-icon"><i class="el-icon-folder-opened"></i></div>
+            <div class="stat-content">
+              <p class="stat-value">{{ summaryData.poolCount || 0 }}</p>
+              <p class="stat-label">奖金池总数</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="stat-card stat-1">
+            <div class="stat-icon"><i class="el-icon-money"></i></div>
+            <div class="stat-content">
+              <p class="stat-value">¥ {{ summaryData.totalAmount || '0.00' }}</p>
+              <p class="stat-label">总金额(元)</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="stat-card stat-2">
+            <div class="stat-icon"><i class="el-icon-user"></i></div>
+            <div class="stat-content">
+              <p class="stat-value">{{ summaryData.employeeCount || 0 }}</p>
+              <p class="stat-label">参与人数</p>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <!-- 图表区域 -->
+    <div class="charts-section">
+      <!-- 图表筛选区 -->
+      <div class="chart-filter-panel">
+        <el-form :inline="true" :model="chartFilterForm" class="chart-filter-form">
+          <el-form-item label="奖金池名称">
+            <el-select v-model="chartFilterForm.poolName" placeholder="请选择奖金池" clearable>
+              <el-option label="全部" value="" />
+              <el-option v-for="item in poolNameOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="handleChartQuery">查询</el-button>
+            <el-button icon="el-icon-refresh" @click="handleChartReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 趋势图和饼图 -->
+      <el-row :gutter="20">
+        <el-col :span="16">
+          <div class="chart-card">
+            <div class="chart-header">
+              <span class="chart-title">奖金池金额趋势</span>
+            </div>
+            <div ref="trendChartRef" class="chart-container"></div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="chart-card">
+            <div class="chart-header">
+              <span class="chart-title">产线奖金分布</span>
+            </div>
+            <div ref="pieChartRef" class="chart-container"></div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 人员奖金排行和岗位占比 -->
+      <el-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="16">
+          <div class="chart-card">
+            <div class="chart-header">
+              <span class="chart-title">人员奖金排行</span>
+            </div>
+            <div ref="employeeBarChartRef" class="chart-container"></div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="chart-card">
+            <div class="chart-header">
+              <span class="chart-title">岗位奖金占比</span>
+            </div>
+            <div ref="postPieChartRef" class="chart-container"></div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 奖金池列表 -->
+      <el-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="24">
+          <div class="chart-card">
+            <div class="chart-header">
+              <span class="chart-title">奖金池列表</span>
+            </div>
+            <div class="table-container">
+              <el-table :data="bonusPoolList" border style="width: 100%">
+                <el-table-column prop="poolName" label="名称" />
+                <el-table-column prop="productionLine" label="产线" />
+                <el-table-column prop="bonusStartTime" label="开始时间">
+                  <template slot-scope="scope">
+                    {{ parseTime(scope.row.bonusStartTime, '{y}-{m}-{d}') }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="bonusEndTime" label="结束时间">
+                  <template slot-scope="scope">
+                    {{ parseTime(scope.row.bonusEndTime, '{y}-{m}-{d}') }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="totalBonus" label="金额(元)">
+                  <template slot-scope="scope">
+                    {{ Number(scope.row.totalBonus).toFixed(2) }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="createBy" label="创建人" />
+                <el-table-column prop="createTime" label="创建时间">
+                  <template slot-scope="scope">
+                    {{ parseTime(scope.row.createTime) }}
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination v-show="total > 0" :total="total" :page.sync="pageParams.pageNum" :limit.sync="pageParams.pageSize" @pagination="handleQuery" />
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listBonusPool } from "@/api/wms/bonusPool";
+import { listBonusConfig } from "@/api/wms/bonusConfig";
+import * as echarts from "echarts";
+import dayjs from "dayjs";
+
+export default {
+  name: "BonusStatistics",
+  data() {
+    return {
+      loading: false,
+      filterForm: {
+        dateRange: [],
+        productionLine: ""
+      },
+      chartFilterForm: {
+        poolName: ""
+      },
+      pageParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      bonusPoolList: [],
+      bonusConfigList: [],
+      displayPoolList: [],
+      displayConfigList: [],
+      poolNameOptions: [],
+      total: 0,
+      summaryData: {},
+      trendChart: null,
+      pieChart: null,
+      employeeBarChart: null,
+      postPieChart: null,
+      productionLineList: [
+        { label: '酸轧线', value: '酸轧线' },
+        { label: '镀锌线', value: '镀锌线' },
+        { label: '拉矫线', value: '拉矫线' },
+        { label: '双机架', value: '双机架' },
+        { label: '镀铬线', value: '镀铬线' },
+        { label: '脱脂线', value: '脱脂线' }
+      ]
+    };
+  },
+  created() {
+    this.initDefaultDate();
+    this.handleQuery();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initCharts();
+    });
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    this.disposeCharts();
+  },
+  methods: {
+    initDefaultDate() {
+      const now = dayjs();
+      this.filterForm.dateRange = [
+        now.startOf('month').format('YYYY-MM-DD'),
+        now.format('YYYY-MM-DD')
+      ];
+    },
+    async handleQuery() {
+      this.loading = true;
+      try {
+        await Promise.all([
+          this.loadPoolData(),
+          this.loadConfigData()
+        ]);
+        // 更新奖金池名称选项
+        this.poolNameOptions = this.bonusPoolList.map(item => ({
+          label: item.poolName,
+          value: item.poolName
+        }));
+        this.calculateSummary();
+        // 初始化图表筛选数据
+        this.displayPoolList = [...this.bonusPoolList];
+        this.displayConfigList = [...this.bonusConfigList];
+        this.calculateChartData();
+        this.updateCharts();
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleChartQuery() {
+      let filteredPools = [...this.bonusPoolList];
+      let filteredConfigs = [...this.bonusConfigList];
+
+      if (this.chartFilterForm.poolName) {
+        const targetPool = this.bonusPoolList.find(p => p.poolName === this.chartFilterForm.poolName);
+        if (targetPool) {
+          filteredPools = [targetPool];
+          filteredConfigs = this.bonusConfigList.filter(c => c.poolId === targetPool.poolId);
+        } else {
+          filteredPools = [];
+          filteredConfigs = [];
+        }
+      }
+
+      this.displayPoolList = filteredPools;
+      this.displayConfigList = filteredConfigs;
+      this.calculateChartData();
+      this.updateCharts();
+    },
+    handleChartReset() {
+      this.chartFilterForm = {
+        poolName: ""
+      };
+      this.displayPoolList = [...this.bonusPoolList];
+      this.displayConfigList = [...this.bonusConfigList];
+      this.calculateChartData();
+      this.updateCharts();
+    },
+    handleReset() {
+      this.initDefaultDate();
+      this.filterForm.productionLine = "";
+      this.handleQuery();
+    },
+    async loadPoolData() {
+      const params = {
+        pageNum: 1,
+        pageSize: 10000
+      };
+      if (this.filterForm.dateRange && this.filterForm.dateRange.length === 2) {
+        params.startTime = this.filterForm.dateRange[0] + ' 00:00:00';
+        params.endTime = this.filterForm.dateRange[1] + ' 23:59:59';
+      }
+      if (this.filterForm.productionLine) {
+        params.productionLine = this.filterForm.productionLine;
+      }
+      const res = await listBonusPool(params);
+      this.bonusPoolList = res.rows || [];
+      this.total = res.total || 0;
+    },
+    async loadConfigData() {
+      const poolIds = this.bonusPoolList.map(item => item.poolId).filter(id => id);
+      if (poolIds.length === 0) {
+        this.bonusConfigList = [];
+        return;
+      }
+
+      // 创建奖金池映射
+      const poolMap = new Map();
+      this.bonusPoolList.forEach(pool => {
+        poolMap.set(pool.poolId, pool);
+      });
+
+      // 批量获取配置数据并计算奖金金额
+      const configPromises = poolIds.map(poolId => listBonusConfig({ poolId }));
+      const results = await Promise.all(configPromises);
+
+      // 处理配置数据，计算奖金金额
+      this.bonusConfigList = results.flatMap(res => {
+        const configs = res.rows || [];
+
+        // 按奖金池分组计算
+        const poolIdMap = new Map();
+        configs.forEach(c => {
+          const existing = poolIdMap.get(c.poolId) || [];
+          existing.push(c);
+          poolIdMap.set(c.poolId, existing);
+        });
+
+        return configs.map(config => {
+          const pool = poolMap.get(config.poolId);
+          if (!pool) return config;
+
+          // 获取当前奖金池的所有配置
+          const poolConfigs = poolIdMap.get(config.poolId) || [];
+
+          // 计算个人总系数
+          const dutyCoeff = Number(config.dutyCoeff || 0);
+          const baseCoeff = Number(config.baseCoeff || 0);
+          const adjustCoeff = Number(config.adjustCoeff || 0);
+          const personalTotalCoeff = dutyCoeff + baseCoeff + adjustCoeff;
+
+          // 计算奖金池总系数
+          const totalCoeff = poolConfigs.reduce((sum, c) => {
+            const dc = Number(c.dutyCoeff || 0);
+            const bc = Number(c.baseCoeff || 0);
+            const ac = Number(c.adjustCoeff || 0);
+            return sum + dc + bc + ac;
+          }, 0);
+
+          // 计算个人奖金金额
+          let bonusAmount = 0;
+          if (totalCoeff > 0 && pool.totalBonus) {
+            bonusAmount = ((personalTotalCoeff / totalCoeff) * Number(pool.totalBonus)).toFixed(2);
+          }
+
+          return {
+            ...config,
+            personalTotalCoeff: personalTotalCoeff.toFixed(2),
+            bonusAmount: bonusAmount
+          };
+        });
+      });
+    },
+    calculateSummary() {
+      const poolData = this.bonusPoolList;
+      const configData = this.bonusConfigList;
+
+      const poolCount = poolData.length;
+      const totalAmount = poolData.reduce((sum, item) => sum + Number(item.totalBonus || 0), 0);
+      const employees = new Set(configData.map(item => item.empId));
+      const employeeCount = employees.size;
+
+      this.summaryData = {
+        poolCount,
+        totalAmount: totalAmount.toFixed(2),
+        employeeCount
+      };
+    },
+    calculateChartData() {
+      const poolData = this.displayPoolList.length > 0 ? this.displayPoolList : this.bonusPoolList;
+      const configData = this.displayConfigList.length > 0 ? this.displayConfigList : this.bonusConfigList;
+
+      // 趋势图
+      const dateMap = new Map();
+      poolData.forEach(item => {
+        const date = dayjs(item.createTime).format('YYYY-MM-DD');
+        const current = dateMap.get(date) || 0;
+        dateMap.set(date, current + Number(item.totalBonus || 0));
+      });
+      this.trendData = Array.from(dateMap.entries())
+        .sort((a, b) => a[0].localeCompare(b[0]))
+        .map(([date, amount]) => ({ date, amount }));
+
+      // 产线饼图
+      const lineMap = new Map();
+      poolData.forEach(item => {
+        const line = item.productionLine || '未知';
+        const current = lineMap.get(line) || 0;
+        lineMap.set(line, current + Number(item.totalBonus || 0));
+      });
+      this.lineData = Array.from(lineMap.entries())
+        .map(([name, value]) => ({ name, value }))
+        .sort((a, b) => b.value - a.value);
+
+      // 人员奖金排行（根据筛选结果动态变化）
+      const employeeMap = new Map();
+      configData.forEach(item => {
+        const empName = item.empName || '未知';
+        const bonusAmount = Number(item.bonusAmount || 0);
+        const current = employeeMap.get(empName) || 0;
+        employeeMap.set(empName, current + bonusAmount);
+      });
+      this.employeeData = Array.from(employeeMap.entries())
+        .map(([name, value]) => ({ name, value: Number(value).toFixed(2) }))
+        .sort((a, b) => Number(b.value) - Number(a.value))
+        .slice(0, 10);
+
+      // 岗位饼图
+      const postMap = new Map();
+      configData.forEach(item => {
+        const postName = item.postName || '未知';
+        const current = postMap.get(postName) || 0;
+        postMap.set(postName, current + Number(item.bonusAmount || 0));
+      });
+      this.postData = Array.from(postMap.entries())
+        .map(([name, value]) => ({ name, value }))
+        .sort((a, b) => b.value - a.value);
+    },
+    initCharts() {
+      this.trendChart = echarts.init(this.$refs.trendChartRef);
+      this.pieChart = echarts.init(this.$refs.pieChartRef);
+      this.employeeBarChart = echarts.init(this.$refs.employeeBarChartRef);
+      this.postPieChart = echarts.init(this.$refs.postPieChartRef);
+    },
+    updateCharts() {
+      this.updateTrendChart();
+      this.updatePieChart();
+      this.updateEmployeeBarChart();
+      this.updatePostPieChart();
+    },
+    updateTrendChart() {
+      if (!this.trendChart) return;
+      const dates = this.trendData.map(item => item.date);
+      const amounts = this.trendData.map(item => item.amount);
+      const option = {
+        tooltip: { trigger: 'axis' },
+        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+        xAxis: { type: 'category', data: dates, axisLabel: { rotate: 30 } },
+        yAxis: { type: 'value', name: '金额(元)' },
+        series: [{
+          name: '金额',
+          type: 'line',
+          smooth: true,
+          data: amounts,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
+              { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
+            ])
+          }
+        }]
+      };
+      this.trendChart.setOption(option, true);
+    },
+    updatePieChart() {
+      if (!this.pieChart) return;
+      const option = {
+        tooltip: { trigger: 'item', formatter: '{b}: ¥{c} ({d}%)' },
+        legend: { orient: 'vertical', right: '5%', top: 'center' },
+        series: [{
+          type: 'pie',
+          radius: ['40%', '70%'],
+          center: ['40%', '50%'],
+          avoidLabelOverlap: false,
+          itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
+          label: { show: false },
+          emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
+          labelLine: { show: false },
+          data: this.lineData.map(item => ({ name: item.name, value: item.value }))
+        }]
+      };
+      this.pieChart.setOption(option, true);
+    },
+    updateEmployeeBarChart() {
+      if (!this.employeeBarChart) return;
+      const employees = this.employeeData.map(item => item.name);
+      const values = this.employeeData.map(item => item.value);
+      const option = {
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+        xAxis: { type: 'value', name: '金额(元)' },
+        yAxis: { type: 'category', data: employees.reverse() },
+        series: [{
+          name: '奖金金额',
+          type: 'bar',
+          data: values.reverse(),
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: '#83bff6' },
+              { offset: 0.5, color: '#188df0' },
+              { offset: 1, color: '#188df0' }
+            ])
+          },
+          label: { show: true, position: 'right', formatter: '¥{c}' }
+        }]
+      };
+      this.employeeBarChart.setOption(option, true);
+    },
+    updatePostPieChart() {
+      if (!this.postPieChart) return;
+      const option = {
+        tooltip: { trigger: 'item', formatter: '{b}: ¥{c} ({d}%)' },
+        legend: { orient: 'vertical', right: '5%', top: 'center' },
+        series: [{
+          type: 'pie',
+          radius: ['40%', '70%'],
+          center: ['40%', '50%'],
+          avoidLabelOverlap: false,
+          itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
+          label: { show: false },
+          emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
+          labelLine: { show: false },
+          data: this.postData.map(item => ({ name: item.name, value: item.value }))
+        }]
+      };
+      this.postPieChart.setOption(option, true);
+    },
+    handleResize() {
+      this.trendChart?.resize();
+      this.pieChart?.resize();
+      this.employeeBarChart?.resize();
+      this.postPieChart?.resize();
+    },
+    disposeCharts() {
+      this.trendChart?.dispose();
+      this.pieChart?.dispose();
+      this.employeeBarChart?.dispose();
+      this.postPieChart?.dispose();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.bonus-statistics-container {
+  padding: 20px;
+  background: #f6f7fb;
+  min-height: calc(100vh - 100px);
+
+  .filter-panel {
+    background: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+    .filter-form {
+      margin: 0;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      gap: 16px;
+    }
+  }
+
+  .stat-cards {
+    margin-bottom: 20px;
+
+    .stat-card {
+      background: #ffffff;
+      border-radius: 8px;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+      }
+
+      &.stat-0 { border-left: 4px solid #409EFF; }
+      &.stat-1 { border-left: 4px solid #67C23A; }
+      &.stat-2 { border-left: 4px solid #909399; }
+
+      .stat-icon {
+        width: 60px;
+        height: 60px;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 16px;
+        font-size: 28px;
+
+        .stat-0 & { background: linear-gradient(135deg, #409EFF, #00CED1); color: #ffffff; }
+        .stat-1 & { background: linear-gradient(135deg, #67C23A, #95E67D); color: #ffffff; }
+        .stat-2 & { background: linear-gradient(135deg, #909399, #C0C4CC); color: #ffffff; }
+      }
+
+      .stat-content {
+        flex: 1;
+
+        .stat-value {
+          font-size: 28px;
+          font-weight: bold;
+          color: #303133;
+          margin-bottom: 4px;
+        }
+
+        .stat-label {
+          font-size: 14px;
+          color: #909399;
+        }
+      }
+    }
+  }
+
+  .charts-section {
+    .chart-filter-panel {
+      background: #ffffff;
+      padding: 16px 20px;
+      border-radius: 8px;
+      margin-bottom: 20px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+      .chart-filter-form {
+        margin: 0;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 16px;
+      }
+    }
+
+    .chart-card {
+      background: #ffffff;
+      border-radius: 8px;
+      padding: 20px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+      .chart-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .chart-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+        }
+      }
+
+      .chart-container {
+        width: 100%;
+        height: 350px;
+      }
+
+      .table-container {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>