奖金看板和公辅看板
This commit is contained in:
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