奖金看板和公辅看板
This commit is contained in:
@@ -42,3 +42,57 @@ export function delAuxiliaryConsume(consumeId) {
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 获取消耗统计汇总
|
||||
*/
|
||||
export function getConsumeStatistics(query) {
|
||||
return request({
|
||||
url: '/eqp/auxiliaryConsume/statistics/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取消耗趋势数据
|
||||
*/
|
||||
export function getConsumeTrend(query) {
|
||||
return request({
|
||||
url: '/eqp/auxiliaryConsume/statistics/trend',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 按公辅类型统计
|
||||
*/
|
||||
export function getConsumeByType(query) {
|
||||
return request({
|
||||
url: '/eqp/auxiliaryConsume/statistics/groupByType',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 按产线统计
|
||||
*/
|
||||
export function getConsumeByLine(query) {
|
||||
return request({
|
||||
url: '/eqp/auxiliaryConsume/statistics/groupByLine',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取消耗明细
|
||||
*/
|
||||
export function getConsumeDetail(query) {
|
||||
return request({
|
||||
url: '/eqp/auxiliaryConsume/statistics/detail',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
@@ -152,6 +152,18 @@ export const dynamicRoutes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/ems/assisted/statistics',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: () => import('@/views/ems/assisted/statistics.vue'),
|
||||
name: 'AuxiliaryStatistics',
|
||||
meta: { title: '公辅消耗统计', icon: 'chart' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/system/role-auth',
|
||||
component: Layout,
|
||||
|
||||
882
klp-ui/src/views/ems/assisted/statistics.vue
Normal file
882
klp-ui/src/views/ems/assisted/statistics.vue
Normal file
@@ -0,0 +1,882 @@
|
||||
<template>
|
||||
<div class="ems-statistics-container" v-loading="loading">
|
||||
<!-- 顶部筛选区域 -->
|
||||
<div class="filter-panel">
|
||||
<el-form :inline="true" :model="filterForm" class="filter-form">
|
||||
<el-form-item label="开始时间">
|
||||
<el-date-picker
|
||||
v-model="filterForm.startDate"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker
|
||||
v-model="filterForm.endDate"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<!-- 日期快捷选择按钮 -->
|
||||
<el-form-item>
|
||||
<div class="date-shortcut">
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
:class="{ 'date-shortcut-active': selectedDateRange === 'prevDay' }"
|
||||
@click="setDateRange('prevDay')">前一天</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
:class="{ 'date-shortcut-active': selectedDateRange === 'today' }"
|
||||
@click="setDateRange('today')">今天</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
:class="{ 'date-shortcut-active': selectedDateRange === 'nextDay' }"
|
||||
@click="setDateRange('nextDay')">后一天</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
:class="{ 'date-shortcut-active': selectedDateRange === 'last7Days' }"
|
||||
@click="setDateRange('last7Days')">近7天</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
:class="{ 'date-shortcut-active': selectedDateRange === 'last15Days' }"
|
||||
@click="setDateRange('last15Days')">近15天</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
:class="{ 'date-shortcut-active': selectedDateRange === 'last30Days' }"
|
||||
@click="setDateRange('last30Days')">近30天</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
:class="{ 'date-shortcut-active': selectedDateRange === 'thisWeek' }"
|
||||
@click="setDateRange('thisWeek')">本周</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
:class="{ 'date-shortcut-active': selectedDateRange === 'thisMonth' }"
|
||||
@click="setDateRange('thisMonth')">本月</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="产线">
|
||||
<el-select v-model="filterForm.lineName" placeholder="请选择产线" clearable>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option v-for="item in dict.type.sys_lines" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="公辅类型">
|
||||
<el-select v-model="filterForm.typeId" placeholder="请选择公辅类型" clearable>
|
||||
<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>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 统计指标卡 -->
|
||||
<div class="stat-cards">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="stat-card stat-0">
|
||||
<div class="stat-icon"><i class="el-icon-data-line"></i></div>
|
||||
<div class="stat-content">
|
||||
<p class="stat-value">{{ summaryData.totalConsume || 0 }}</p>
|
||||
<p class="stat-label">总消耗量</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="stat-card stat-1">
|
||||
<div class="stat-icon"><i class="el-icon-data-analysis"></i></div>
|
||||
<div class="stat-content">
|
||||
<p class="stat-value">{{ summaryData.avgDailyConsume || 0 }}</p>
|
||||
<p class="stat-label">日均消耗</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="stat-card stat-2">
|
||||
<div class="stat-icon"><i class="el-icon-trending-up"></i></div>
|
||||
<div class="stat-content">
|
||||
<p class="stat-value">{{ summaryData.growthRate >= 0 ? '+' : '' }}{{ summaryData.growthRate || 0 }}%</p>
|
||||
<p class="stat-label">环比增长</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="stat-card stat-3">
|
||||
<div class="stat-icon"><i class="el-icon-warning"></i></div>
|
||||
<div class="stat-content">
|
||||
<p class="stat-value">{{ summaryData.alertCount || 0 }}</p>
|
||||
<p class="stat-label">异常告警</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<div class="charts-section">
|
||||
<!-- 消耗趋势与类型占比 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<div class="chart-card">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">消耗趋势</span>
|
||||
</div>
|
||||
<div ref="trendChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="chart-card">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">公辅类型占比</span>
|
||||
</div>
|
||||
<div ref="pieChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 产线消耗排行 -->
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="24">
|
||||
<div class="chart-card">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">产线消耗排行</span>
|
||||
</div>
|
||||
<div ref="barChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 公辅产线二维表 -->
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="24">
|
||||
<div class="chart-card">
|
||||
<div class="chart-header" style="flex-wrap: wrap; gap: 12px;">
|
||||
<span class="chart-title">产线公辅类型二维表</span>
|
||||
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
|
||||
<el-select v-model="selectedLinesForTable" multiple placeholder="请选择产线" @change="handleTableFilterChange"
|
||||
style="width: 200px;">
|
||||
<el-option v-for="line in dict.type.sys_lines" :key="line.value" :label="line.label" :value="line.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="selectedTypesForTable" multiple placeholder="请选择公辅类型" @change="handleTableFilterChange"
|
||||
style="width: 200px;">
|
||||
<el-option v-for="type in auxiliaryTypes" :key="type.typeId" :label="type.typeName" :value="type.typeId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<el-table :data="twoDTableData" border style="width: 100%" :summary-method="getSummaries" show-summary>
|
||||
<el-table-column prop="lineName" label="产线" />
|
||||
<el-table-column v-for="type in displayTypes" :key="type.typeId"
|
||||
:prop="'type_' + type.typeId" :label="type.typeName">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row['type_' + type.typeId] ? Number(scope.row['type_' + type.typeId]).toFixed(2) : 0 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="total" label="合计" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 消耗明细表格 -->
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="24">
|
||||
<div class="chart-card">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">消耗明细</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<el-table :data="detailList" border style="width: 100%">
|
||||
<el-table-column prop="recordDate" label="日期" />
|
||||
<el-table-column prop="lineName" label="产线" />
|
||||
<el-table-column prop="typeName" label="公辅类型" />
|
||||
<el-table-column prop="consume" label="消耗量" />
|
||||
<el-table-column prop="remark" label="备注" />
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="pageParams.pageNum" :limit.sync="pageParams.pageSize" @pagination="getDetailList" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { listAuxiliaryType } from "@/api/eqp/auxiliaryType";
|
||||
import { listAuxiliaryConsume } from "@/api/eqp/auxiliaryConsume";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export default {
|
||||
name: "AuxiliaryStatistics",
|
||||
dicts: ['sys_lines'],
|
||||
data() {
|
||||
return {
|
||||
// 筛选表单
|
||||
filterForm: {
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
lineName: "",
|
||||
typeId: ""
|
||||
},
|
||||
// 分页参数
|
||||
pageParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
// 公辅类型列表
|
||||
auxiliaryTypes: [],
|
||||
// 原始数据（用于计算）
|
||||
rawData: [],
|
||||
// 汇总数据
|
||||
summaryData: {},
|
||||
// 明细数据
|
||||
detailList: [],
|
||||
total: 0,
|
||||
// 图表数据
|
||||
trendData: [],
|
||||
typeData: [],
|
||||
lineData: [],
|
||||
// 二维表数据
|
||||
twoDTableData: [],
|
||||
// 二维表筛选条件
|
||||
selectedLinesForTable: [],
|
||||
selectedTypesForTable: [],
|
||||
// 显示的公辅类型
|
||||
displayTypes: [],
|
||||
// 图表实例
|
||||
trendChart: null,
|
||||
pieChart: null,
|
||||
barChart: null,
|
||||
// 加载状态
|
||||
loading: false,
|
||||
// 当前选中的日期范围类型
|
||||
selectedDateRange: 'thisMonth'
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDefaultDate();
|
||||
this.loadAuxiliaryTypes();
|
||||
this.handleQuery();
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initCharts();
|
||||
});
|
||||
window.addEventListener("resize", this.handleResize);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener("resize", this.handleResize);
|
||||
this.disposeCharts();
|
||||
},
|
||||
methods: {
|
||||
// 初始化默认日期（本月）
|
||||
initDefaultDate() {
|
||||
const now = dayjs();
|
||||
this.filterForm.startDate = now.startOf('month').format('YYYY-MM-DD');
|
||||
this.filterForm.endDate = now.format('YYYY-MM-DD');
|
||||
},
|
||||
// 日期快捷选择
|
||||
setDateRange(type) {
|
||||
const now = dayjs();
|
||||
let startDate, endDate;
|
||||
|
||||
switch (type) {
|
||||
case 'prevDay': // 前一天
|
||||
startDate = now.subtract(1, 'day').format('YYYY-MM-DD');
|
||||
endDate = now.subtract(1, 'day').format('YYYY-MM-DD');
|
||||
break;
|
||||
case 'today': // 今天
|
||||
startDate = now.format('YYYY-MM-DD');
|
||||
endDate = now.format('YYYY-MM-DD');
|
||||
break;
|
||||
case 'nextDay': // 后一天
|
||||
startDate = now.add(1, 'day').format('YYYY-MM-DD');
|
||||
endDate = now.add(1, 'day').format('YYYY-MM-DD');
|
||||
break;
|
||||
case 'last7Days': // 近7天
|
||||
startDate = now.subtract(6, 'day').format('YYYY-MM-DD');
|
||||
endDate = now.format('YYYY-MM-DD');
|
||||
break;
|
||||
case 'last15Days': // 近15天
|
||||
startDate = now.subtract(14, 'day').format('YYYY-MM-DD');
|
||||
endDate = now.format('YYYY-MM-DD');
|
||||
break;
|
||||
case 'last30Days': // 近30天
|
||||
startDate = now.subtract(29, 'day').format('YYYY-MM-DD');
|
||||
endDate = now.format('YYYY-MM-DD');
|
||||
break;
|
||||
case 'thisWeek': // 本周
|
||||
startDate = now.startOf('week').format('YYYY-MM-DD');
|
||||
endDate = now.endOf('week').format('YYYY-MM-DD');
|
||||
break;
|
||||
case 'thisMonth': // 本月
|
||||
startDate = now.startOf('month').format('YYYY-MM-DD');
|
||||
endDate = now.endOf('month').format('YYYY-MM-DD');
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新选中状态
|
||||
this.selectedDateRange = type;
|
||||
this.filterForm.startDate = startDate;
|
||||
this.filterForm.endDate = endDate;
|
||||
this.handleQuery();
|
||||
},
|
||||
// 加载公辅类型
|
||||
async loadAuxiliaryTypes() {
|
||||
const res = await listAuxiliaryType({ pageSize: 999 });
|
||||
this.auxiliaryTypes = res.rows || [];
|
||||
},
|
||||
// 查询数据（使用list接口，前端计算）
|
||||
async handleQuery() {
|
||||
this.loading = true;
|
||||
try {
|
||||
await this.loadRawData();
|
||||
await this.calculateSummary(); // 改为异步调用
|
||||
this.calculateTrend();
|
||||
this.calculateTypeData();
|
||||
this.calculateLineData();
|
||||
this.updateDisplayTypes();
|
||||
this.calculateTwoDTableData();
|
||||
this.updateCharts();
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
// 重置筛选
|
||||
handleReset() {
|
||||
this.initDefaultDate();
|
||||
this.filterForm.lineName = "";
|
||||
this.filterForm.typeId = "";
|
||||
this.handleQuery();
|
||||
},
|
||||
// 二维表筛选变化
|
||||
handleTableFilterChange() {
|
||||
this.updateDisplayTypes();
|
||||
this.calculateTwoDTableData();
|
||||
},
|
||||
// 获取查询参数
|
||||
getQueryParams(needPage = false) {
|
||||
const params = {};
|
||||
if (this.filterForm.startDate) {
|
||||
params.recordStartDate = this.filterForm.startDate + ' 00:00:00';
|
||||
}
|
||||
if (this.filterForm.endDate) {
|
||||
params.recordEndDate = this.filterForm.endDate + ' 23:59:59';
|
||||
}
|
||||
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;
|
||||
}
|
||||
return params;
|
||||
},
|
||||
// 加载原始数据（不分页，获取全部）
|
||||
async loadRawData() {
|
||||
const params = this.getQueryParams();
|
||||
params.pageSize = 9999; // 获取全部数据
|
||||
const res = await listAuxiliaryConsume(params);
|
||||
this.rawData = res.rows || [];
|
||||
|
||||
// 同时更新分页数据
|
||||
const pageParams = this.getQueryParams(true);
|
||||
const pageRes = await listAuxiliaryConsume(pageParams);
|
||||
this.detailList = pageRes.rows || [];
|
||||
this.total = pageRes.total || 0;
|
||||
},
|
||||
// 前端计算汇总数据（异步）
|
||||
async calculateSummary() {
|
||||
const data = this.rawData;
|
||||
|
||||
// 总消耗量
|
||||
const totalConsume = data.reduce((sum, item) => sum + Number(item.consume || 0), 0);
|
||||
|
||||
// 日均消耗
|
||||
const startDate = dayjs(this.filterForm.startDate);
|
||||
const endDate = dayjs(this.filterForm.endDate);
|
||||
const days = endDate.diff(startDate, 'day') + 1;
|
||||
const avgDailyConsume = days > 0 ? totalConsume / days : 0;
|
||||
|
||||
// 环比增长（真实计算：与上月同期对比）
|
||||
const growthRate = await this.calculateGrowthRate();
|
||||
|
||||
// 异常告警数（简化：消耗量超过100视为异常）
|
||||
const alertCount = data.filter(item => Number(item.consume || 0) > 100).length;
|
||||
|
||||
this.summaryData = {
|
||||
totalConsume: totalConsume.toFixed(2),
|
||||
avgDailyConsume: avgDailyConsume.toFixed(2),
|
||||
growthRate: growthRate.toFixed(1),
|
||||
alertCount: alertCount
|
||||
};
|
||||
},
|
||||
// 计算环比增长率（真实计算）
|
||||
async calculateGrowthRate() {
|
||||
// 获取本期总消耗
|
||||
const currentConsume = this.rawData.reduce((sum, item) => {
|
||||
return sum + Number(item.consume || 0);
|
||||
}, 0);
|
||||
|
||||
// 计算上期时间范围（上个月同期）
|
||||
const startDate = dayjs(this.filterForm.startDate);
|
||||
const endDate = dayjs(this.filterForm.endDate);
|
||||
const prevStartDate = startDate.subtract(1, 'month');
|
||||
const prevEndDate = endDate.subtract(1, 'month');
|
||||
|
||||
// 构建上期查询参数
|
||||
const prevParams = {
|
||||
recordStartDate: prevStartDate.format('YYYY-MM-DD') + ' 00:00:00',
|
||||
recordEndDate: prevEndDate.format('YYYY-MM-DD') + ' 23:59:59',
|
||||
pageSize: 9999
|
||||
};
|
||||
|
||||
if (this.filterForm.lineName) {
|
||||
prevParams.lineName = this.filterForm.lineName;
|
||||
}
|
||||
if (this.filterForm.typeId) {
|
||||
prevParams.typeId = this.filterForm.typeId;
|
||||
}
|
||||
|
||||
try {
|
||||
// 请求上期数据
|
||||
const prevRes = await listAuxiliaryConsume(prevParams);
|
||||
const prevData = prevRes.rows || [];
|
||||
|
||||
// 计算上期总消耗
|
||||
const prevConsume = prevData.reduce((sum, item) => {
|
||||
return sum + Number(item.consume || 0);
|
||||
}, 0);
|
||||
|
||||
// 计算环比增长率
|
||||
if (prevConsume === 0) {
|
||||
return 0; // 避免除以0
|
||||
}
|
||||
|
||||
return ((currentConsume - prevConsume) / prevConsume * 100);
|
||||
} catch (error) {
|
||||
console.error('获取上期数据失败:', error);
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
// 按日期计算趋势数据
|
||||
calculateTrend() {
|
||||
const data = this.rawData;
|
||||
const dateMap = new Map();
|
||||
|
||||
// 按日期汇总
|
||||
data.forEach(item => {
|
||||
const dateStr = dayjs(item.recordDate).format('YYYY-MM-DD');
|
||||
const current = dateMap.get(dateStr) || 0;
|
||||
dateMap.set(dateStr, current + Number(item.consume || 0));
|
||||
});
|
||||
|
||||
// 生成完整日期范围
|
||||
const startDate = dayjs(this.filterForm.startDate);
|
||||
const endDate = dayjs(this.filterForm.endDate);
|
||||
const trendData = [];
|
||||
|
||||
let current = startDate;
|
||||
while (current.isBefore(endDate) || current.isSame(endDate)) {
|
||||
const dateStr = current.format('YYYY-MM-DD');
|
||||
trendData.push({
|
||||
date: dateStr,
|
||||
consume: dateMap.get(dateStr) || 0
|
||||
});
|
||||
current = current.add(1, 'day');
|
||||
}
|
||||
|
||||
this.trendData = trendData;
|
||||
},
|
||||
// 按公辅类型汇总
|
||||
calculateTypeData() {
|
||||
const data = this.rawData;
|
||||
const typeMap = new Map();
|
||||
|
||||
// 按typeId汇总
|
||||
data.forEach(item => {
|
||||
const typeId = item.typeId;
|
||||
const typeName = this.getTypeName(typeId);
|
||||
const current = typeMap.get(typeId) || { typeId, typeName, consume: 0 };
|
||||
current.consume += Number(item.consume || 0);
|
||||
typeMap.set(typeId, current);
|
||||
});
|
||||
|
||||
this.typeData = Array.from(typeMap.values());
|
||||
},
|
||||
// 按产线汇总
|
||||
calculateLineData() {
|
||||
const data = this.rawData;
|
||||
const lineMap = new Map();
|
||||
|
||||
// 按lineName汇总
|
||||
data.forEach(item => {
|
||||
const lineName = item.lineName || '未知';
|
||||
const current = lineMap.get(lineName) || 0;
|
||||
lineMap.set(lineName, current + Number(item.consume || 0));
|
||||
});
|
||||
|
||||
// 转换为数组并排序
|
||||
this.lineData = Array.from(lineMap.entries())
|
||||
.map(([lineName, consume]) => ({ lineName, consume }))
|
||||
.sort((a, b) => b.consume - a.consume);
|
||||
},
|
||||
// 根据typeId获取类型名称
|
||||
getTypeName(typeId) {
|
||||
const type = this.auxiliaryTypes.find(t => t.typeId === typeId);
|
||||
return type ? type.typeName : '未知类型';
|
||||
},
|
||||
// 计算二维表数据
|
||||
calculateTwoDTableData() {
|
||||
const data = this.rawData;
|
||||
const lineTypeMap = new Map();
|
||||
|
||||
// 获取筛选后的产线列表
|
||||
const filteredLines = this.selectedLinesForTable.length > 0
|
||||
? new Set(this.selectedLinesForTable)
|
||||
: null;
|
||||
|
||||
// 获取筛选后的公辅类型列表
|
||||
const filteredTypes = this.selectedTypesForTable.length > 0
|
||||
? new Set(this.selectedTypesForTable)
|
||||
: null;
|
||||
|
||||
// 按产线和公辅类型汇总
|
||||
data.forEach(item => {
|
||||
const lineName = item.lineName || '未知';
|
||||
const typeId = item.typeId;
|
||||
|
||||
// 产线筛选
|
||||
if (filteredLines && !filteredLines.has(lineName)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 公辅类型筛选
|
||||
if (filteredTypes && !filteredTypes.has(typeId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!lineTypeMap.has(lineName)) {
|
||||
lineTypeMap.set(lineName, { lineName });
|
||||
}
|
||||
const lineData = lineTypeMap.get(lineName);
|
||||
const key = 'type_' + typeId;
|
||||
if (!lineData[key]) {
|
||||
lineData[key] = 0;
|
||||
}
|
||||
lineData[key] += Number(item.consume || 0);
|
||||
});
|
||||
|
||||
// 计算每行的合计（只计算显示的类型）
|
||||
this.twoDTableData = Array.from(lineTypeMap.entries()).map(([lineName, data]) => {
|
||||
const row = { lineName, ...data };
|
||||
let total = 0;
|
||||
this.displayTypes.forEach(type => {
|
||||
const val = data['type_' + type.typeId] || 0;
|
||||
total += val;
|
||||
});
|
||||
row.total = Number(total.toFixed(2));
|
||||
return row;
|
||||
});
|
||||
},
|
||||
// 更新显示的公辅类型
|
||||
updateDisplayTypes() {
|
||||
if (this.selectedTypesForTable.length > 0) {
|
||||
this.displayTypes = this.auxiliaryTypes.filter(t => this.selectedTypesForTable.includes(t.typeId));
|
||||
} else {
|
||||
this.displayTypes = [...this.auxiliaryTypes];
|
||||
}
|
||||
},
|
||||
// 二维表汇总方法
|
||||
getSummaries(param) {
|
||||
const { columns, data } = param;
|
||||
const sums = [];
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = '合计';
|
||||
return;
|
||||
}
|
||||
if (column.property === 'total') {
|
||||
const values = data.map(item => Number(item[column.property]) || 0);
|
||||
sums[index] = values.reduce((prev, curr) => prev + curr, 0).toFixed(2);
|
||||
} else if (column.property && column.property.startsWith('type_')) {
|
||||
const values = data.map(item => Number(item[column.property]) || 0);
|
||||
sums[index] = values.reduce((prev, curr) => prev + curr, 0).toFixed(2);
|
||||
} else {
|
||||
sums[index] = '';
|
||||
}
|
||||
});
|
||||
return sums;
|
||||
},
|
||||
// 初始化图表
|
||||
initCharts() {
|
||||
this.trendChart = echarts.init(this.$refs.trendChartRef);
|
||||
this.pieChart = echarts.init(this.$refs.pieChartRef);
|
||||
this.barChart = echarts.init(this.$refs.barChartRef);
|
||||
},
|
||||
// 更新图表
|
||||
updateCharts() {
|
||||
this.updateTrendChart();
|
||||
this.updatePieChart();
|
||||
this.updateBarChart();
|
||||
},
|
||||
// 更新趋势图
|
||||
updateTrendChart() {
|
||||
if (!this.trendChart) return;
|
||||
|
||||
const dates = this.trendData.map(item => item.date);
|
||||
const values = this.trendData.map(item => Number(item.consume));
|
||||
|
||||
const option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: { type: 'category', data: dates, axisLabel: { rotate: 30 } },
|
||||
yAxis: { type: 'value' },
|
||||
series: [{
|
||||
name: '消耗量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: values,
|
||||
areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' }, { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }]) }
|
||||
}]
|
||||
};
|
||||
|
||||
this.trendChart.setOption(option, true);
|
||||
},
|
||||
// 更新饼图
|
||||
updatePieChart() {
|
||||
if (!this.pieChart) return;
|
||||
|
||||
const option = {
|
||||
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
|
||||
legend: { orient: 'vertical', right: '5%', top: 'center' },
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['40%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
|
||||
label: { show: false },
|
||||
emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
|
||||
labelLine: { show: false },
|
||||
data: this.typeData.map(item => ({
|
||||
name: item.typeName,
|
||||
value: Number(item.consume)
|
||||
}))
|
||||
}]
|
||||
};
|
||||
|
||||
this.pieChart.setOption(option, true);
|
||||
},
|
||||
// 更新柱状图
|
||||
updateBarChart() {
|
||||
if (!this.barChart) return;
|
||||
|
||||
const lines = this.lineData.map(item => item.lineName);
|
||||
const values = this.lineData.map(item => Number(item.consume));
|
||||
|
||||
const option = {
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: { type: 'category', data: lines },
|
||||
yAxis: { type: 'value' },
|
||||
series: [{
|
||||
name: '消耗量',
|
||||
type: 'bar',
|
||||
data: values,
|
||||
itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, { offset: 1, color: '#188df0' }]) }
|
||||
}]
|
||||
};
|
||||
|
||||
this.barChart.setOption(option, true);
|
||||
},
|
||||
// 窗口resize处理
|
||||
handleResize() {
|
||||
this.trendChart?.resize();
|
||||
this.pieChart?.resize();
|
||||
this.barChart?.resize();
|
||||
},
|
||||
// 销毁图表
|
||||
disposeCharts() {
|
||||
this.trendChart?.dispose();
|
||||
this.pieChart?.dispose();
|
||||
this.barChart?.dispose();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ems-statistics-container {
|
||||
padding: 20px;
|
||||
background: #f6f7fb;
|
||||
min-height: calc(100vh - 100px);
|
||||
|
||||
.filter-panel {
|
||||
background: #ffffff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.filter-form {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.date-shortcut {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.date-shortcut-active {
|
||||
background-color: #409eff !important;
|
||||
color: #fff !important;
|
||||
border-radius: 4px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.stat-cards {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.stat-card {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&.stat-0 {
|
||||
border-left: 4px solid #409EFF;
|
||||
}
|
||||
|
||||
&.stat-1 {
|
||||
border-left: 4px solid #67C23A;
|
||||
}
|
||||
|
||||
&.stat-2 {
|
||||
border-left: 4px solid #E6A23C;
|
||||
}
|
||||
|
||||
&.stat-3 {
|
||||
border-left: 4px solid #F56C6C;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16px;
|
||||
font-size: 28px;
|
||||
|
||||
.stat-0 & {
|
||||
background: linear-gradient(135deg, #409EFF, #00CED1);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.stat-1 & {
|
||||
background: linear-gradient(135deg, #67C23A, #95E67D);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.stat-2 & {
|
||||
background: linear-gradient(135deg, #E6A23C, #F7D94C);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.stat-3 & {
|
||||
background: linear-gradient(135deg, #F56C6C, #FC9494);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.charts-section {
|
||||
.chart-card {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
667
klp-ui/src/views/wms/bonus/statistics.vue
Normal file
667
klp-ui/src/views/wms/bonus/statistics.vue
Normal file
@@ -0,0 +1,667 @@
|
||||
<template>
|
||||
<div class="bonus-statistics-container" v-loading="loading">
|
||||
<!-- 顶部筛选区域 -->
|
||||
<div class="filter-panel">
|
||||
<el-form :inline="true" :model="filterForm" class="filter-form">
|
||||
<el-form-item label="时间范围">
|
||||
<el-date-picker
|
||||
v-model="filterForm.dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="产线">
|
||||
<el-select v-model="filterForm.productionLine" placeholder="请选择产线" clearable>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option v-for="item in productionLineList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 统计指标卡 -->
|
||||
<div class="stat-cards">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="stat-card stat-0">
|
||||
<div class="stat-icon"><i class="el-icon-folder-opened"></i></div>
|
||||
<div class="stat-content">
|
||||
<p class="stat-value">{{ summaryData.poolCount || 0 }}</p>
|
||||
<p class="stat-label">奖金池总数</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="stat-card stat-1">
|
||||
<div class="stat-icon"><i class="el-icon-money"></i></div>
|
||||
<div class="stat-content">
|
||||
<p class="stat-value">¥ {{ summaryData.totalAmount || '0.00' }}</p>
|
||||
<p class="stat-label">总金额(元)</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="stat-card stat-2">
|
||||
<div class="stat-icon"><i class="el-icon-user"></i></div>
|
||||
<div class="stat-content">
|
||||
<p class="stat-value">{{ summaryData.employeeCount || 0 }}</p>
|
||||
<p class="stat-label">参与人数</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<div class="charts-section">
|
||||
<!-- 图表筛选区 -->
|
||||
<div class="chart-filter-panel">
|
||||
<el-form :inline="true" :model="chartFilterForm" class="chart-filter-form">
|
||||
<el-form-item label="奖金池名称">
|
||||
<el-select v-model="chartFilterForm.poolName" placeholder="请选择奖金池" clearable>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option v-for="item in poolNameOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleChartQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleChartReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 趋势图和饼图 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<div class="chart-card">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">奖金池金额趋势</span>
|
||||
</div>
|
||||
<div ref="trendChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="chart-card">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">产线奖金分布</span>
|
||||
</div>
|
||||
<div ref="pieChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 人员奖金排行和岗位占比 -->
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="16">
|
||||
<div class="chart-card">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">人员奖金排行</span>
|
||||
</div>
|
||||
<div ref="employeeBarChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="chart-card">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">岗位奖金占比</span>
|
||||
</div>
|
||||
<div ref="postPieChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 奖金池列表 -->
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="24">
|
||||
<div class="chart-card">
|
||||
<div class="chart-header">
|
||||
<span class="chart-title">奖金池列表</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<el-table :data="bonusPoolList" border style="width: 100%">
|
||||
<el-table-column prop="poolName" label="名称" />
|
||||
<el-table-column prop="productionLine" label="产线" />
|
||||
<el-table-column prop="bonusStartTime" label="开始时间">
|
||||
<template slot-scope="scope">
|
||||
{{ parseTime(scope.row.bonusStartTime, '{y}-{m}-{d}') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="bonusEndTime" label="结束时间">
|
||||
<template slot-scope="scope">
|
||||
{{ parseTime(scope.row.bonusEndTime, '{y}-{m}-{d}') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalBonus" label="金额(元)">
|
||||
<template slot-scope="scope">
|
||||
{{ Number(scope.row.totalBonus).toFixed(2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createBy" label="创建人" />
|
||||
<el-table-column prop="createTime" label="创建时间">
|
||||
<template slot-scope="scope">
|
||||
{{ parseTime(scope.row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="pageParams.pageNum" :limit.sync="pageParams.pageSize" @pagination="handleQuery" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listBonusPool } from "@/api/wms/bonusPool";
|
||||
import { listBonusConfig } from "@/api/wms/bonusConfig";
|
||||
import * as echarts from "echarts";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export default {
|
||||
name: "BonusStatistics",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
filterForm: {
|
||||
dateRange: [],
|
||||
productionLine: ""
|
||||
},
|
||||
chartFilterForm: {
|
||||
poolName: ""
|
||||
},
|
||||
pageParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
bonusPoolList: [],
|
||||
bonusConfigList: [],
|
||||
displayPoolList: [],
|
||||
displayConfigList: [],
|
||||
poolNameOptions: [],
|
||||
total: 0,
|
||||
summaryData: {},
|
||||
trendChart: null,
|
||||
pieChart: null,
|
||||
employeeBarChart: null,
|
||||
postPieChart: null,
|
||||
productionLineList: [
|
||||
{ label: '酸轧线', value: '酸轧线' },
|
||||
{ label: '镀锌线', value: '镀锌线' },
|
||||
{ label: '拉矫线', value: '拉矫线' },
|
||||
{ label: '双机架', value: '双机架' },
|
||||
{ label: '镀铬线', value: '镀铬线' },
|
||||
{ label: '脱脂线', value: '脱脂线' }
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDefaultDate();
|
||||
this.handleQuery();
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initCharts();
|
||||
});
|
||||
window.addEventListener("resize", this.handleResize);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener("resize", this.handleResize);
|
||||
this.disposeCharts();
|
||||
},
|
||||
methods: {
|
||||
initDefaultDate() {
|
||||
const now = dayjs();
|
||||
this.filterForm.dateRange = [
|
||||
now.startOf('month').format('YYYY-MM-DD'),
|
||||
now.format('YYYY-MM-DD')
|
||||
];
|
||||
},
|
||||
async handleQuery() {
|
||||
this.loading = true;
|
||||
try {
|
||||
await Promise.all([
|
||||
this.loadPoolData(),
|
||||
this.loadConfigData()
|
||||
]);
|
||||
// 更新奖金池名称选项
|
||||
this.poolNameOptions = this.bonusPoolList.map(item => ({
|
||||
label: item.poolName,
|
||||
value: item.poolName
|
||||
}));
|
||||
this.calculateSummary();
|
||||
// 初始化图表筛选数据
|
||||
this.displayPoolList = [...this.bonusPoolList];
|
||||
this.displayConfigList = [...this.bonusConfigList];
|
||||
this.calculateChartData();
|
||||
this.updateCharts();
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
handleChartQuery() {
|
||||
let filteredPools = [...this.bonusPoolList];
|
||||
let filteredConfigs = [...this.bonusConfigList];
|
||||
|
||||
if (this.chartFilterForm.poolName) {
|
||||
const targetPool = this.bonusPoolList.find(p => p.poolName === this.chartFilterForm.poolName);
|
||||
if (targetPool) {
|
||||
filteredPools = [targetPool];
|
||||
filteredConfigs = this.bonusConfigList.filter(c => c.poolId === targetPool.poolId);
|
||||
} else {
|
||||
filteredPools = [];
|
||||
filteredConfigs = [];
|
||||
}
|
||||
}
|
||||
|
||||
this.displayPoolList = filteredPools;
|
||||
this.displayConfigList = filteredConfigs;
|
||||
this.calculateChartData();
|
||||
this.updateCharts();
|
||||
},
|
||||
handleChartReset() {
|
||||
this.chartFilterForm = {
|
||||
poolName: ""
|
||||
};
|
||||
this.displayPoolList = [...this.bonusPoolList];
|
||||
this.displayConfigList = [...this.bonusConfigList];
|
||||
this.calculateChartData();
|
||||
this.updateCharts();
|
||||
},
|
||||
handleReset() {
|
||||
this.initDefaultDate();
|
||||
this.filterForm.productionLine = "";
|
||||
this.handleQuery();
|
||||
},
|
||||
async loadPoolData() {
|
||||
const params = {
|
||||
pageNum: 1,
|
||||
pageSize: 10000
|
||||
};
|
||||
if (this.filterForm.dateRange && this.filterForm.dateRange.length === 2) {
|
||||
params.startTime = this.filterForm.dateRange[0] + ' 00:00:00';
|
||||
params.endTime = this.filterForm.dateRange[1] + ' 23:59:59';
|
||||
}
|
||||
if (this.filterForm.productionLine) {
|
||||
params.productionLine = this.filterForm.productionLine;
|
||||
}
|
||||
const res = await listBonusPool(params);
|
||||
this.bonusPoolList = res.rows || [];
|
||||
this.total = res.total || 0;
|
||||
},
|
||||
async loadConfigData() {
|
||||
const poolIds = this.bonusPoolList.map(item => item.poolId).filter(id => id);
|
||||
if (poolIds.length === 0) {
|
||||
this.bonusConfigList = [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建奖金池映射
|
||||
const poolMap = new Map();
|
||||
this.bonusPoolList.forEach(pool => {
|
||||
poolMap.set(pool.poolId, pool);
|
||||
});
|
||||
|
||||
// 批量获取配置数据并计算奖金金额
|
||||
const configPromises = poolIds.map(poolId => listBonusConfig({ poolId }));
|
||||
const results = await Promise.all(configPromises);
|
||||
|
||||
// 处理配置数据，计算奖金金额
|
||||
this.bonusConfigList = results.flatMap(res => {
|
||||
const configs = res.rows || [];
|
||||
|
||||
// 按奖金池分组计算
|
||||
const poolIdMap = new Map();
|
||||
configs.forEach(c => {
|
||||
const existing = poolIdMap.get(c.poolId) || [];
|
||||
existing.push(c);
|
||||
poolIdMap.set(c.poolId, existing);
|
||||
});
|
||||
|
||||
return configs.map(config => {
|
||||
const pool = poolMap.get(config.poolId);
|
||||
if (!pool) return config;
|
||||
|
||||
// 获取当前奖金池的所有配置
|
||||
const poolConfigs = poolIdMap.get(config.poolId) || [];
|
||||
|
||||
// 计算个人总系数
|
||||
const dutyCoeff = Number(config.dutyCoeff || 0);
|
||||
const baseCoeff = Number(config.baseCoeff || 0);
|
||||
const adjustCoeff = Number(config.adjustCoeff || 0);
|
||||
const personalTotalCoeff = dutyCoeff + baseCoeff + adjustCoeff;
|
||||
|
||||
// 计算奖金池总系数
|
||||
const totalCoeff = poolConfigs.reduce((sum, c) => {
|
||||
const dc = Number(c.dutyCoeff || 0);
|
||||
const bc = Number(c.baseCoeff || 0);
|
||||
const ac = Number(c.adjustCoeff || 0);
|
||||
return sum + dc + bc + ac;
|
||||
}, 0);
|
||||
|
||||
// 计算个人奖金金额
|
||||
let bonusAmount = 0;
|
||||
if (totalCoeff > 0 && pool.totalBonus) {
|
||||
bonusAmount = ((personalTotalCoeff / totalCoeff) * Number(pool.totalBonus)).toFixed(2);
|
||||
}
|
||||
|
||||
return {
|
||||
...config,
|
||||
personalTotalCoeff: personalTotalCoeff.toFixed(2),
|
||||
bonusAmount: bonusAmount
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
calculateSummary() {
|
||||
const poolData = this.bonusPoolList;
|
||||
const configData = this.bonusConfigList;
|
||||
|
||||
const poolCount = poolData.length;
|
||||
const totalAmount = poolData.reduce((sum, item) => sum + Number(item.totalBonus || 0), 0);
|
||||
const employees = new Set(configData.map(item => item.empId));
|
||||
const employeeCount = employees.size;
|
||||
|
||||
this.summaryData = {
|
||||
poolCount,
|
||||
totalAmount: totalAmount.toFixed(2),
|
||||
employeeCount
|
||||
};
|
||||
},
|
||||
calculateChartData() {
|
||||
const poolData = this.displayPoolList.length > 0 ? this.displayPoolList : this.bonusPoolList;
|
||||
const configData = this.displayConfigList.length > 0 ? this.displayConfigList : this.bonusConfigList;
|
||||
|
||||
// 趋势图
|
||||
const dateMap = new Map();
|
||||
poolData.forEach(item => {
|
||||
const date = dayjs(item.createTime).format('YYYY-MM-DD');
|
||||
const current = dateMap.get(date) || 0;
|
||||
dateMap.set(date, current + Number(item.totalBonus || 0));
|
||||
});
|
||||
this.trendData = Array.from(dateMap.entries())
|
||||
.sort((a, b) => a[0].localeCompare(b[0]))
|
||||
.map(([date, amount]) => ({ date, amount }));
|
||||
|
||||
// 产线饼图
|
||||
const lineMap = new Map();
|
||||
poolData.forEach(item => {
|
||||
const line = item.productionLine || '未知';
|
||||
const current = lineMap.get(line) || 0;
|
||||
lineMap.set(line, current + Number(item.totalBonus || 0));
|
||||
});
|
||||
this.lineData = Array.from(lineMap.entries())
|
||||
.map(([name, value]) => ({ name, value }))
|
||||
.sort((a, b) => b.value - a.value);
|
||||
|
||||
// 人员奖金排行（根据筛选结果动态变化）
|
||||
const employeeMap = new Map();
|
||||
configData.forEach(item => {
|
||||
const empName = item.empName || '未知';
|
||||
const bonusAmount = Number(item.bonusAmount || 0);
|
||||
const current = employeeMap.get(empName) || 0;
|
||||
employeeMap.set(empName, current + bonusAmount);
|
||||
});
|
||||
this.employeeData = Array.from(employeeMap.entries())
|
||||
.map(([name, value]) => ({ name, value: Number(value).toFixed(2) }))
|
||||
.sort((a, b) => Number(b.value) - Number(a.value))
|
||||
.slice(0, 10);
|
||||
|
||||
// 岗位饼图
|
||||
const postMap = new Map();
|
||||
configData.forEach(item => {
|
||||
const postName = item.postName || '未知';
|
||||
const current = postMap.get(postName) || 0;
|
||||
postMap.set(postName, current + Number(item.bonusAmount || 0));
|
||||
});
|
||||
this.postData = Array.from(postMap.entries())
|
||||
.map(([name, value]) => ({ name, value }))
|
||||
.sort((a, b) => b.value - 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);
|
||||
},
|
||||
updateCharts() {
|
||||
this.updateTrendChart();
|
||||
this.updatePieChart();
|
||||
this.updateEmployeeBarChart();
|
||||
this.updatePostPieChart();
|
||||
},
|
||||
updateTrendChart() {
|
||||
if (!this.trendChart) return;
|
||||
const dates = this.trendData.map(item => item.date);
|
||||
const amounts = this.trendData.map(item => item.amount);
|
||||
const option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: { type: 'category', data: dates, axisLabel: { rotate: 30 } },
|
||||
yAxis: { type: 'value', name: '金额(元)' },
|
||||
series: [{
|
||||
name: '金额',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: amounts,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
|
||||
])
|
||||
}
|
||||
}]
|
||||
};
|
||||
this.trendChart.setOption(option, true);
|
||||
},
|
||||
updatePieChart() {
|
||||
if (!this.pieChart) return;
|
||||
const option = {
|
||||
tooltip: { trigger: 'item', formatter: '{b}: ¥{c} ({d}%)' },
|
||||
legend: { orient: 'vertical', right: '5%', top: 'center' },
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['40%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
|
||||
label: { show: false },
|
||||
emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
|
||||
labelLine: { show: false },
|
||||
data: this.lineData.map(item => ({ name: item.name, value: item.value }))
|
||||
}]
|
||||
};
|
||||
this.pieChart.setOption(option, true);
|
||||
},
|
||||
updateEmployeeBarChart() {
|
||||
if (!this.employeeBarChart) return;
|
||||
const employees = this.employeeData.map(item => item.name);
|
||||
const values = this.employeeData.map(item => item.value);
|
||||
const option = {
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: { type: 'value', name: '金额(元)' },
|
||||
yAxis: { type: 'category', data: employees.reverse() },
|
||||
series: [{
|
||||
name: '奖金金额',
|
||||
type: 'bar',
|
||||
data: values.reverse(),
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
},
|
||||
label: { show: true, position: 'right', formatter: '¥{c}' }
|
||||
}]
|
||||
};
|
||||
this.employeeBarChart.setOption(option, true);
|
||||
},
|
||||
updatePostPieChart() {
|
||||
if (!this.postPieChart) return;
|
||||
const option = {
|
||||
tooltip: { trigger: 'item', formatter: '{b}: ¥{c} ({d}%)' },
|
||||
legend: { orient: 'vertical', right: '5%', top: 'center' },
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['40%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
|
||||
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 }))
|
||||
}]
|
||||
};
|
||||
this.postPieChart.setOption(option, true);
|
||||
},
|
||||
handleResize() {
|
||||
this.trendChart?.resize();
|
||||
this.pieChart?.resize();
|
||||
this.employeeBarChart?.resize();
|
||||
this.postPieChart?.resize();
|
||||
},
|
||||
disposeCharts() {
|
||||
this.trendChart?.dispose();
|
||||
this.pieChart?.dispose();
|
||||
this.employeeBarChart?.dispose();
|
||||
this.postPieChart?.dispose();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bonus-statistics-container {
|
||||
padding: 20px;
|
||||
background: #f6f7fb;
|
||||
min-height: calc(100vh - 100px);
|
||||
|
||||
.filter-panel {
|
||||
background: #ffffff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.filter-form {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-cards {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.stat-card {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&.stat-0 { border-left: 4px solid #409EFF; }
|
||||
&.stat-1 { border-left: 4px solid #67C23A; }
|
||||
&.stat-2 { border-left: 4px solid #909399; }
|
||||
|
||||
.stat-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16px;
|
||||
font-size: 28px;
|
||||
|
||||
.stat-0 & { background: linear-gradient(135deg, #409EFF, #00CED1); color: #ffffff; }
|
||||
.stat-1 & { background: linear-gradient(135deg, #67C23A, #95E67D); color: #ffffff; }
|
||||
.stat-2 & { background: linear-gradient(135deg, #909399, #C0C4CC); color: #ffffff; }
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.charts-section {
|
||||
.chart-filter-panel {
|
||||
background: #ffffff;
|
||||
padding: 16px 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.chart-filter-form {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user