奖金看板和公辅看板优化

2026-05-15 17:45:54 +08:00
parent 44f5e64016
commit 8ce4df0847
2 changed files with 76 additions and 32 deletions
--- a/klp-ui/src/views/ems/assisted/statistics.vue
+++ b/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-option label="全部" value="" />
+          <el-select v-model="filterForm.typeIds" placeholder="请选择公辅类型" clearable multiple>
            <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);
--- a/klp-ui/src/views/wms/bonus/statistics.vue
+++ b/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;
    }
  }
 };