854 lines
21 KiB
Vue
854 lines
21 KiB
Vue
<template>
|
||
<div class="finance-analysis-page">
|
||
<el-row :gutter="20" class="content-container">
|
||
<!-- 1. 时间选择区 - 使用封装的组件 -->
|
||
<el-col :span="24" class="time-filter">
|
||
<TimeFilter @query="fetchData" @reset="handleFilterReset" @dateChange="handleDateChange" />
|
||
</el-col>
|
||
|
||
<!-- 2. 指标卡区域 -->
|
||
<el-col :span="24" class="indicator-cards">
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<el-card class="indicator-card total-income">
|
||
<div class="card-header">
|
||
<span>总收入</span>
|
||
<i class="el-icon-arrow-up"></i>
|
||
</div>
|
||
<div class="card-value">{{ totalIncome | formatCurrency }}</div>
|
||
<!-- <div class="card-desc">较上期 <span class="rise">+5.2%</span></div> -->
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card class="indicator-card total-expense">
|
||
<div class="card-header">
|
||
<span>总支出</span>
|
||
<i class="el-icon-arrow-down"></i>
|
||
</div>
|
||
<div class="card-value">{{ totalExpense | formatCurrency }}</div>
|
||
<!-- <div class="card-desc">较上期 <span class="drop">-2.8%</span></div> -->
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card class="indicator-card net-cashflow">
|
||
<div class="card-header">
|
||
<span>净收益</span>
|
||
<i class="Refresh"></i>
|
||
</div>
|
||
<div class="card-value">{{ netCashflow | formatCurrency }}</div>
|
||
<!-- <div class="card-desc">较上期 <span class="rise">+8.0%</span></div> -->
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card class="indicator-card outstanding-receivable">
|
||
<div class="card-header">
|
||
<span>未结清应收</span>
|
||
<i class="el-icon-info"></i>
|
||
</div>
|
||
<div class="card-value">{{ outstandingReceivable | formatCurrency }}</div>
|
||
<div class="card-desc">共 {{ receivableCount }} 笔未结清</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
|
||
<!-- 3. echarts图表区域 -->
|
||
<el-col :span="24" class="charts-container">
|
||
<!-- 收入支出趋势图 -->
|
||
<el-row :gutter="20" class="chart-row">
|
||
<el-col :span="12">
|
||
<el-card class="chart-card">
|
||
<div slot="header" class="chart-header">
|
||
<span>收入支出趋势</span>
|
||
</div>
|
||
<div class="chart-content">
|
||
<div ref="trendChart" class="chart-wrapper"></div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card class="chart-card">
|
||
<div slot="header" class="chart-header">
|
||
<span>按供应商区分的支出</span>
|
||
</div>
|
||
<div class="chart-content">
|
||
<div ref="supplierChart" class="chart-wrapper"></div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 按订单和客户/供应商分析 -->
|
||
<el-row :gutter="20" class="chart-row">
|
||
<el-col :span="12">
|
||
<el-card class="chart-card">
|
||
<div slot="header" class="chart-header">
|
||
<span>按订单区分的收支</span>
|
||
</div>
|
||
<div class="chart-content">
|
||
<div ref="orderChart" class="chart-wrapper"></div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card class="chart-card">
|
||
<div slot="header" class="chart-header">
|
||
<span>按客户区分的收入</span>
|
||
</div>
|
||
<div class="chart-content">
|
||
<div ref="customerChart" class="chart-wrapper"></div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
|
||
<!-- 4. 回款（应收未收）任务信息表格 -->
|
||
<el-col :span="24" class="table-container">
|
||
<el-card>
|
||
<div slot="header" class="table-header">
|
||
<span>回款（应收未收）任务信息</span>
|
||
</div>
|
||
<el-table :data="receivableTasks" border style="width: 100%" v-loading="tableLoading">
|
||
<el-table-column prop="receivableId" label="应收ID" width="180" align="center"></el-table-column>
|
||
<el-table-column prop="customerName" label="客户名称" width="150" align="center"></el-table-column>
|
||
<el-table-column prop="orderId" label="订单ID" width="180" align="center"></el-table-column>
|
||
<el-table-column prop="dueDate" label="到期日期" width="150" align="center"></el-table-column>
|
||
<el-table-column prop="amount" label="总金额" width="120" align="center"
|
||
:formatter="formatCurrency"></el-table-column>
|
||
<el-table-column prop="paidAmount" label="已付金额" width="120" align="center"
|
||
:formatter="formatCurrency"></el-table-column>
|
||
<el-table-column prop="balanceAmount" label="未付金额" width="120" align="center"
|
||
:formatter="formatCurrency"></el-table-column>
|
||
<el-table-column prop="status" label="状态" width="100" align="center"></el-table-column>
|
||
<el-table-column prop="remark" label="备注" align="center"></el-table-column>
|
||
</el-table>
|
||
|
||
<div class="pagination-container">
|
||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||
:current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="receivableTotal"></el-pagination>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import * as echarts from 'echarts';
|
||
import { listReceivable } from '@/api/finance/receivable';
|
||
import { listPayable } from '@/api/finance/payable';
|
||
import TimeFilter from './components/TimeFilter.vue'; // 引入封装的时间筛选组件
|
||
|
||
// 分页相关
|
||
const currentPage = ref(1);
|
||
const pageSize = ref(10);
|
||
|
||
// 数据相关
|
||
const receivableData = ref([]); // 应收数据
|
||
const payableData = ref([]); // 应付数据
|
||
const receivableTasks = ref([]); // 回款任务数据
|
||
const receivableTotal = ref(0); // 回款任务总数
|
||
const tableLoading = ref(false);
|
||
const currentTimeParams = ref({}); // 当前时间参数
|
||
|
||
// 指标数据
|
||
const totalIncome = ref(0);
|
||
const totalExpense = ref(0);
|
||
const netCashflow = ref(0);
|
||
const outstandingReceivable = ref(0);
|
||
const receivableCount = ref(0);
|
||
|
||
// 图表实例
|
||
const trendChart = ref(null);
|
||
const orderChart = ref(null);
|
||
const customerChart = ref(null);
|
||
const supplierChart = ref(null);
|
||
const trendChartInstance = ref(null);
|
||
const orderChartInstance = ref(null);
|
||
const customerChartInstance = ref(null);
|
||
const supplierChartInstance = ref(null);
|
||
|
||
// 初始化
|
||
onMounted(() => {
|
||
// 初始化图表
|
||
initCharts();
|
||
});
|
||
|
||
// 初始化图表
|
||
const initCharts = () => {
|
||
if (trendChart.value) {
|
||
trendChartInstance.value = echarts.init(trendChart.value);
|
||
}
|
||
if (orderChart.value) {
|
||
orderChartInstance.value = echarts.init(orderChart.value);
|
||
}
|
||
if (customerChart.value) {
|
||
customerChartInstance.value = echarts.init(customerChart.value);
|
||
}
|
||
if (supplierChart.value) {
|
||
supplierChartInstance.value = echarts.init(supplierChart.value);
|
||
}
|
||
|
||
// 监听窗口大小变化，调整图表
|
||
window.addEventListener('resize', () => {
|
||
trendChartInstance.value?.resize();
|
||
orderChartInstance.value?.resize();
|
||
customerChartInstance.value?.resize();
|
||
supplierChartInstance.value?.resize();
|
||
});
|
||
};
|
||
|
||
// 获取数据
|
||
const fetchData = async (timeParams) => {
|
||
tableLoading.value = true;
|
||
currentTimeParams.value = timeParams || currentTimeParams.value;
|
||
|
||
try {
|
||
// 获取应收数据
|
||
const receivableRes = await listReceivable({ pageSize: 9999, pageNum: 1 });
|
||
receivableData.value = receivableRes.rows || [];
|
||
receivableTasks.value = receivableData.value.filter(item => item.status === '未结清');
|
||
receivableTotal.value = receivableRes.total || 0;
|
||
|
||
// 获取应付数据
|
||
const payableRes = await listPayable({ pageSize: 9999, pageNum: 1 });
|
||
payableData.value = payableRes.rows || [];
|
||
|
||
// 处理数据并更新指标
|
||
processData();
|
||
|
||
// 更新图表
|
||
updateCharts();
|
||
} catch (error) {
|
||
console.error('获取数据失败:', error);
|
||
ElMessage.error('获取数据失败，请重试');
|
||
} finally {
|
||
tableLoading.value = false;
|
||
}
|
||
};
|
||
|
||
// 处理数据计算指标
|
||
const processData = () => {
|
||
// 计算总收入（应收金额总和）
|
||
totalIncome.value = receivableData.value.reduce((sum, item) => {
|
||
return sum + parseFloat(item.amount || 0);
|
||
}, 0);
|
||
|
||
// 计算总支出（应付金额总和）
|
||
totalExpense.value = payableData.value.reduce((sum, item) => {
|
||
return sum + parseFloat(item.amount || 0);
|
||
}, 0);
|
||
|
||
// 计算净现金流
|
||
netCashflow.value = totalIncome.value - totalExpense.value;
|
||
|
||
// 计算未结清应收总额和数量
|
||
const outstanding = receivableData.value.filter(item => item.status === '未结清');
|
||
outstandingReceivable.value = outstanding.reduce((sum, item) => {
|
||
return sum + parseFloat(item.balanceAmount || 0);
|
||
}, 0);
|
||
receivableCount.value = outstanding.length;
|
||
};
|
||
|
||
// 更新图表
|
||
const updateCharts = () => {
|
||
updateTrendChart();
|
||
updateOrderChart();
|
||
updateCustomerChart();
|
||
updateSupplierChart();
|
||
};
|
||
|
||
// 更新收入支出趋势图
|
||
const updateTrendChart = () => {
|
||
// 按时间粒度处理数据
|
||
const timeGroups = groupDataByTime();
|
||
|
||
// 准备图表数据
|
||
const xAxisData = Object.keys(timeGroups);
|
||
const incomeData = xAxisData.map(key => timeGroups[key].income);
|
||
const expenseData = xAxisData.map(key => timeGroups[key].expense);
|
||
|
||
// 设置图表配置
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
formatter: '{b}<br/>收入: {c0} 元<br/>支出: {c1} 元'
|
||
},
|
||
legend: {
|
||
data: ['收入', '支出'],
|
||
top: 0
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xAxisData,
|
||
axisLabel: {
|
||
rotate: 45,
|
||
interval: 0
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '金额 (元)',
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '收入',
|
||
type: 'bar',
|
||
data: incomeData,
|
||
itemStyle: {
|
||
color: '#4e79a7'
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
}
|
||
},
|
||
{
|
||
name: '支出',
|
||
type: 'bar',
|
||
data: expenseData,
|
||
itemStyle: {
|
||
color: '#e15759'
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
trendChartInstance.value.setOption(option);
|
||
};
|
||
|
||
// 更新按订单区分的收支图表
|
||
const updateOrderChart = () => {
|
||
// 按订单ID合并数据
|
||
const orderMap = {};
|
||
|
||
// 处理应收数据
|
||
receivableData.value.forEach(item => {
|
||
if (!orderMap[item.orderId]) {
|
||
orderMap[item.orderId] = {
|
||
income: 0,
|
||
expense: 0
|
||
};
|
||
}
|
||
orderMap[item.orderId].income += parseFloat(item.amount || 0);
|
||
});
|
||
|
||
// 处理应付数据
|
||
payableData.value.forEach(item => {
|
||
if (!orderMap[item.orderId]) {
|
||
orderMap[item.orderId] = {
|
||
income: 0,
|
||
expense: 0
|
||
};
|
||
}
|
||
orderMap[item.orderId].expense += parseFloat(item.amount || 0);
|
||
});
|
||
|
||
// 转换为图表数据
|
||
const orderList = Object.entries(orderMap)
|
||
.map(([orderId, data]) => ({
|
||
orderId,
|
||
income: data.income,
|
||
expense: data.expense,
|
||
net: data.income - data.expense
|
||
}))
|
||
.sort((a, b) => b.net - a.net)
|
||
.slice(0, 10); // 只展示前10个订单
|
||
|
||
const xAxisData = orderList.map(item => `订单 ${item.orderId.slice(-6)}`);
|
||
const incomeData = orderList.map(item => item.income);
|
||
const expenseData = orderList.map(item => item.expense);
|
||
|
||
// 设置图表配置
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['收入', '支出'],
|
||
top: 0
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xAxisData,
|
||
axisLabel: {
|
||
rotate: 45,
|
||
interval: 0
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '金额 (元)'
|
||
},
|
||
series: [
|
||
{
|
||
name: '收入',
|
||
type: 'bar',
|
||
stack: 'total',
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: incomeData,
|
||
itemStyle: {
|
||
color: '#4e79a7'
|
||
}
|
||
},
|
||
{
|
||
name: '支出',
|
||
type: 'bar',
|
||
stack: 'total',
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: expenseData.map(v => -v), // 支出用负值表示
|
||
itemStyle: {
|
||
color: '#e15759'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
orderChartInstance.value.setOption(option);
|
||
};
|
||
|
||
// 更新按客户区分的收入图表
|
||
const updateCustomerChart = () => {
|
||
// 按客户分组计算收入
|
||
const customerMap = {};
|
||
|
||
receivableData.value.forEach(item => {
|
||
if (!customerMap[item.customerId]) {
|
||
customerMap[item.customerId] = {
|
||
name: item.customerName,
|
||
amount: 0
|
||
};
|
||
}
|
||
customerMap[item.customerId].amount += parseFloat(item.amount || 0);
|
||
});
|
||
|
||
// 转换为图表数据并排序
|
||
const customerList = Object.values(customerMap)
|
||
.sort((a, b) => b.amount - a.amount)
|
||
.slice(0, 10); // 只展示前10个客户
|
||
|
||
// 设置图表配置
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 10,
|
||
top: 'center'
|
||
},
|
||
series: [
|
||
{
|
||
name: '客户收入',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 16,
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: customerList.map(item => ({
|
||
name: item.name,
|
||
value: item.amount
|
||
}))
|
||
}
|
||
]
|
||
};
|
||
|
||
customerChartInstance.value.setOption(option);
|
||
};
|
||
|
||
// 更新按供应商区分的支出图表
|
||
const updateSupplierChart = () => {
|
||
// 按供应商分组计算支出
|
||
const supplierMap = {};
|
||
|
||
payableData.value.forEach(item => {
|
||
if (!supplierMap[item.supplierId]) {
|
||
supplierMap[item.supplierId] = {
|
||
name: item.supplierName,
|
||
amount: 0
|
||
};
|
||
}
|
||
supplierMap[item.supplierId].amount += parseFloat(item.amount || 0);
|
||
});
|
||
|
||
// 转换为图表数据并排序
|
||
const supplierList = Object.values(supplierMap)
|
||
.sort((a, b) => b.amount - a.amount)
|
||
.slice(0, 10); // 只展示前10个供应商
|
||
|
||
// 设置图表配置
|
||
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: supplierList.map(item => item.name),
|
||
axisLabel: {
|
||
interval: 0
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '支出金额',
|
||
type: 'bar',
|
||
data: supplierList.map(item => item.amount),
|
||
itemStyle: {
|
||
color: '#e15759'
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
supplierChartInstance.value.setOption(option);
|
||
};
|
||
|
||
// 按时间粒度分组数据
|
||
const groupDataByTime = () => {
|
||
const timeGroups = {};
|
||
const granularity = currentTimeParams.value.timeGranularity || 'month';
|
||
|
||
// 处理应收数据
|
||
receivableData.value.forEach(item => {
|
||
const date = new Date(item.dueDate);
|
||
const timeKey = getTimeKey(date, granularity);
|
||
|
||
if (!timeGroups[timeKey]) {
|
||
timeGroups[timeKey] = {
|
||
income: 0,
|
||
expense: 0
|
||
};
|
||
}
|
||
|
||
timeGroups[timeKey].income += parseFloat(item.amount || 0);
|
||
});
|
||
|
||
// 处理应付数据
|
||
payableData.value.forEach(item => {
|
||
const date = new Date(item.dueDate);
|
||
const timeKey = getTimeKey(date, granularity);
|
||
|
||
if (!timeGroups[timeKey]) {
|
||
timeGroups[timeKey] = {
|
||
income: 0,
|
||
expense: 0
|
||
};
|
||
}
|
||
|
||
timeGroups[timeKey].expense += parseFloat(item.amount || 0);
|
||
});
|
||
|
||
// 排序时间分组
|
||
return Object.keys(timeGroups).sort().reduce((obj, key) => {
|
||
obj[key] = timeGroups[key];
|
||
return obj;
|
||
}, {});
|
||
};
|
||
|
||
// 根据时间粒度生成时间键
|
||
const getTimeKey = (date, granularity) => {
|
||
const year = date.getFullYear();
|
||
const month = date.getMonth() + 1;
|
||
|
||
if (granularity === 'year') {
|
||
return `${year}`;
|
||
} else if (granularity === 'month') {
|
||
return `${year}-${month.toString().padStart(2, '0')}`;
|
||
} else {
|
||
// 按周分组 (ISO周数)
|
||
const week = getWeekNumber(date);
|
||
return `${year}-W${week.toString().padStart(2, '0')}`;
|
||
}
|
||
};
|
||
|
||
// 获取ISO周数
|
||
const getWeekNumber = (date) => {
|
||
const temp = new Date(date.getTime());
|
||
temp.setHours(0, 0, 0, 0);
|
||
// 把周一作为一周的第一天
|
||
temp.setDate(temp.getDate() + 3 - (temp.getDay() + 6) % 7);
|
||
const firstDay = new Date(temp.getFullYear(), 0, 4);
|
||
return Math.round((temp - firstDay) / (7 * 24 * 60 * 60 * 1000)) + 1;
|
||
};
|
||
|
||
// 格式化金额
|
||
const formatCurrency = (row, column, value) => {
|
||
if (!value) return '0.00';
|
||
return parseFloat(value).toFixed(2);
|
||
};
|
||
|
||
// 事件处理函数
|
||
const handleDateChange = (timeParams) => {
|
||
currentTimeParams.value = timeParams;
|
||
};
|
||
|
||
const handleFilterReset = () => {
|
||
currentPage.value = 1;
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.finance-analysis-page {
|
||
padding: 20px;
|
||
background-color: #f5f7fa;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.page-header {
|
||
margin-bottom: 10px;
|
||
|
||
h1 {
|
||
font-size: 24px;
|
||
color: #1f2d3d;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
color: #8392a5;
|
||
}
|
||
}
|
||
|
||
.content-container {
|
||
.time-filter {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.indicator-cards {
|
||
margin-bottom: 10px;
|
||
|
||
.indicator-card {
|
||
height: 100%;
|
||
padding: 5px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 5px;
|
||
color: #8392a5;
|
||
font-size: 14px;
|
||
|
||
i {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.card-value {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
color: #1f2d3d;
|
||
}
|
||
|
||
.card-desc {
|
||
font-size: 12px;
|
||
color: #8392a5;
|
||
|
||
.rise {
|
||
color: #f56c6c;
|
||
}
|
||
|
||
.drop {
|
||
color: #409eff;
|
||
}
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -30px;
|
||
top: -30px;
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
opacity: 0.1;
|
||
}
|
||
}
|
||
|
||
.total-income {
|
||
&::after {
|
||
background-color: #4e79a7;
|
||
}
|
||
}
|
||
|
||
.total-expense {
|
||
&::after {
|
||
background-color: #e15759;
|
||
}
|
||
}
|
||
|
||
.net-cashflow {
|
||
&::after {
|
||
background-color: #59a14f;
|
||
}
|
||
}
|
||
|
||
.outstanding-receivable {
|
||
&::after {
|
||
background-color: #9c755f;
|
||
}
|
||
}
|
||
}
|
||
|
||
.charts-container {
|
||
margin-bottom: 10px;
|
||
|
||
.chart-row {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.chart-card {
|
||
height: 100%;
|
||
|
||
.chart-header {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #1f2d3d;
|
||
padding: 5px 10px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.chart-content {
|
||
padding: 10px;
|
||
}
|
||
|
||
.chart-wrapper {
|
||
width: 100%;
|
||
height: 400px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.table-container {
|
||
.table-header {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #1f2d3d;
|
||
padding: 5px 10px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.pagination-container {
|
||
margin-top: 15px;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 响应式调整
|
||
@media (max-width: 1200px) {
|
||
.charts-container {
|
||
.chart-wrapper {
|
||
height: 350px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 992px) {
|
||
.indicator-cards {
|
||
.el-col {
|
||
|
||
&:nth-child(1),
|
||
&:nth-child(2) {
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.charts-container {
|
||
.chart-row {
|
||
.el-col {
|
||
&:nth-child(1) {
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.chart-wrapper {
|
||
height: 300px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.indicator-cards {
|
||
.el-col {
|
||
&:nth-child(3) {
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.charts-container {
|
||
.chart-wrapper {
|
||
height: 250px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|