奖金看板和公辅看板优化

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([
-          this.loadPoolData(),
-          this.loadConfigData()
-        ]);
-        // 更新奖金池名称选项
+        // 1. 加载奖金池数据
+        await this.loadPoolData();
+
+        // 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();
-        this.updateCharts();
+
+        // 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 = {
-        poolName: ""
-      };
+      this.chartFilterForm = { 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 }))
-        .sort((a, b) => b.value - a.value);
+        .map(([name, value]) => ({ name, value: Number(value).toFixed(2) }))
+        .sort((a, b) => Number(b.value) - Number(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);
+      // 先销毁旧图表
+      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;
     }
   }
 };