diff --git a/klp-ui/src/views/ems/assisted/statistics.vue b/klp-ui/src/views/ems/assisted/statistics.vue index 804c6c86..01334bfc 100644 --- a/klp-ui/src/views/ems/assisted/statistics.vue +++ b/klp-ui/src/views/ems/assisted/statistics.vue @@ -73,8 +73,7 @@ - - + @@ -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); diff --git a/klp-ui/src/views/wms/bonus/statistics.vue b/klp-ui/src/views/wms/bonus/statistics.vue index e39293e1..7b5e943e 100644 --- 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; } } };