奖金看板和公辅看板优化

This commit is contained in:
jhd
2026-05-15 17:45:54 +08:00
parent 44f5e64016
commit 8ce4df0847
2 changed files with 76 additions and 32 deletions

View File

@@ -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);

View File

@@ -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();
// 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.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;
}
}
};