奖金看板和公辅看板优化

klp-ui/src/views/ems/assisted/statistics.vue

@@ -73,8 +73,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="公辅类型">
-          <el-select v-model="filterForm.typeId" placeholder="请选择公辅类型" clearable>
+          <el-select v-model="filterForm.typeIds" placeholder="请选择公辅类型" clearable multiple>
-            <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>
@@ -236,7 +235,7 @@ export default {
         startDate: "",
         endDate: "",
         lineName: "",
-        typeId: ""
+        typeIds: []
       },
       // 分页参数
       pageParams: {
@@ -388,9 +387,7 @@ export default {
       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;
@@ -402,7 +399,15 @@ export default {
       const params = this.getQueryParams();
       params.pageSize = 9999; // 获取全部数据
       const res = await listAuxiliaryConsume(params);
-      this.rawData = res.rows || [];
+
+      // 前端过滤公辅类型（支持多选）
+      let filteredData = res.rows || [];
+      if (this.filterForm.typeIds && this.filterForm.typeIds.length > 0) {
+        const selectedTypeIds = new Set(this.filterForm.typeIds);
+        filteredData = filteredData.filter(item => selectedTypeIds.has(item.typeId));
+      }
+
+      this.rawData = filteredData;
 
       // 同时更新分页数据
       const pageParams = this.getQueryParams(true);

klp-ui/src/views/wms/bonus/statistics.vue

@@ -200,18 +200,27 @@ export default {
         { label: '双机架', value: '双机架' },
         { label: '镀铬线', value: '镀铬线' },
         { label: '脱脂线', value: '脱脂线' }
-      ]
+      ],
+      trendData: [],
+      lineData: [],
+      employeeData: [],
+      postData: []
     };
   },
   created() {
+    // 页面进入时自动触发查询
     this.initDefaultDate();
     this.handleQuery();
   },
   mounted() {
-    this.$nextTick(() => {
-      this.initCharts();
-    });
     window.addEventListener("resize", this.handleResize);
+    // 确保DOM渲染完成后初始化图表
+    this.$nextTick(() => {
+      if (this.bonusPoolList.length > 0) {
+        this.initCharts();
+        this.updateCharts();
+      }
+    });
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.handleResize);
@@ -228,21 +237,36 @@ export default {
     async handleQuery() {
       this.loading = true;
       try {
-        await Promise.all([
+        // 1. 加载奖金池数据
-          this.loadPoolData(),
+        await this.loadPoolData();
-          this.loadConfigData()
+
-        ]);
+        // 2. 加载配置数据
-        // 更新奖金池名称选项
+        await this.loadConfigData();
+
+        // 3. 更新奖金池名称选项
         this.poolNameOptions = this.bonusPoolList.map(item => ({
           label: item.poolName,
           value: item.poolName
         }));
+
+        // 4. 计算统计摘要
         this.calculateSummary();
-        // 初始化图表筛选数据
+
+        // 5. 初始化显示数据
         this.displayPoolList = [...this.bonusPoolList];
         this.displayConfigList = [...this.bonusConfigList];
+
+        // 6. 计算图表数据
         this.calculateChartData();
+
+        // 7. 初始化并更新图表
+        this.$nextTick(() => {
+          this.initCharts();
           this.updateCharts();
+        });
+
+      } catch (error) {
+        console.error('数据加载失败:', error);
       } finally {
         this.loading = false;
       }
@@ -268,9 +292,7 @@ export default {
       this.updateCharts();
     },
     handleChartReset() {
-      this.chartFilterForm = {
+      this.chartFilterForm = { poolName: "" };
-        poolName: ""
-      };
       this.displayPoolList = [...this.bonusPoolList];
       this.displayConfigList = [...this.bonusConfigList];
       this.calculateChartData();
@@ -402,7 +424,7 @@ export default {
         .map(([name, value]) => ({ name, value }))
         .sort((a, b) => b.value - a.value);
 
-      // 人员奖金排行（根据筛选结果动态变化）
+      // 人员奖金排行（按筛选结果计算）
       const employeeMap = new Map();
       configData.forEach(item => {
         const empName = item.empName || '未知';
@@ -415,22 +437,35 @@ export default {
         .sort((a, b) => Number(b.value) - Number(a.value))
         .slice(0, 10);
 
-      // 岗位饼图
+      // 岗位奖金占比（按筛选结果计算）
       const postMap = new Map();
       configData.forEach(item => {
         const postName = item.postName || '未知';
+        const bonusAmount = Number(item.bonusAmount || 0);
         const current = postMap.get(postName) || 0;
-        postMap.set(postName, current + Number(item.bonusAmount || 0));
+        postMap.set(postName, current + bonusAmount);
       });
       this.postData = Array.from(postMap.entries())
-        .map(([name, value]) => ({ name, value }))
+        .map(([name, value]) => ({ name, value: Number(value).toFixed(2) }))
-        .sort((a, b) => b.value - a.value);
+        .sort((a, b) => Number(b.value) - Number(a.value));
     },
     initCharts() {
+      // 先销毁旧图表
+      this.disposeCharts();
+
+      // 初始化图表
+      if (this.$refs.trendChartRef) {
         this.trendChart = echarts.init(this.$refs.trendChartRef);
+      }
+      if (this.$refs.pieChartRef) {
         this.pieChart = echarts.init(this.$refs.pieChartRef);
+      }
+      if (this.$refs.employeeBarChartRef) {
         this.employeeBarChart = echarts.init(this.$refs.employeeBarChartRef);
+      }
+      if (this.$refs.postPieChartRef) {
         this.postPieChart = echarts.init(this.$refs.postPieChartRef);
+      }
     },
     updateCharts() {
       this.updateTrendChart();
@@ -484,7 +519,7 @@ export default {
     updateEmployeeBarChart() {
       if (!this.employeeBarChart) return;
       const employees = this.employeeData.map(item => item.name);
-      const values = this.employeeData.map(item => item.value);
+      const values = this.employeeData.map(item => Number(item.value));
       const option = {
         tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
         grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
@@ -520,7 +555,7 @@ export default {
           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 }))
+          data: this.postData.map(item => ({ name: item.name, value: Number(item.value) }))
         }]
       };
       this.postPieChart.setOption(option, true);
@@ -536,6 +571,10 @@ export default {
       this.pieChart?.dispose();
       this.employeeBarChart?.dispose();
       this.postPieChart?.dispose();
+      this.trendChart = null;
+      this.pieChart = null;
+      this.employeeBarChart = null;
+      this.postPieChart = null;
     }
   }
 };