431 lines
11 KiB
Vue
431 lines
11 KiB
Vue
<template>
|
|
<div class="erp-dashboard">
|
|
<!-- 第一行统计卡片 -->
|
|
<el-row :gutter="16" class="stat-row">
|
|
<el-col :span="4" :xs="12" v-for="(item, index) in firstRowStats" :key="'first-' + index">
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<span class="stat-label">{{ item.label }}</span>
|
|
<el-icon class="stat-icon"><Info-Filled /></el-icon>
|
|
</div>
|
|
<div class="stat-value">
|
|
<span class="currency">¥</span>
|
|
<span class="number">{{ formatMoney(item.value) }}</span>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第二行统计卡片 -->
|
|
<el-row :gutter="16" class="stat-row" style="margin-top: 16px;">
|
|
<el-col :span="4" :xs="12" v-for="(item, index) in secondRowStats" :key="'second-' + index">
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<span class="stat-label">{{ item.label }}</span>
|
|
<el-icon class="stat-icon"><Info-Filled /></el-icon>
|
|
</div>
|
|
<div class="stat-value">
|
|
<span class="currency">¥</span>
|
|
<span class="number">{{ formatMoney(item.value) }}</span>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 图表区域 -->
|
|
<el-row :gutter="16" class="chart-row" style="margin-top: 16px;">
|
|
<el-col :span="8" :xs="24">
|
|
<div class="chart-card">
|
|
<div class="chart-title">销售统计</div>
|
|
<div ref="salesChartRef" class="chart-container"></div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8" :xs="24">
|
|
<div class="chart-card">
|
|
<div class="chart-title">零售统计</div>
|
|
<div ref="retailChartRef" class="chart-container"></div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8" :xs="24">
|
|
<div class="chart-card">
|
|
<div class="chart-title">采购统计</div>
|
|
<div ref="purchaseChartRef" class="chart-container"></div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, shallowRef, nextTick } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import { InfoFilled } from '@element-plus/icons-vue';
|
|
|
|
// 统计卡片数据 - 第一行
|
|
const firstRowStats = ref([
|
|
{ label: '今日销售', value: 0 },
|
|
{ label: '今日零售', value: 0 },
|
|
{ label: '今日采购', value: 0 },
|
|
{ label: '本月累计销售', value: 0 },
|
|
{ label: '本月累计零售', value: 0 },
|
|
{ label: '本月累计采购', value: 0 },
|
|
]);
|
|
|
|
// 统计卡片数据 - 第二行
|
|
const secondRowStats = ref([
|
|
{ label: '昨日销售', value: 0 },
|
|
{ label: '昨日零售', value: 0 },
|
|
{ label: '昨日采购', value: 0 },
|
|
{ label: '今年累计销售', value: 0 },
|
|
{ label: '今年累计零售', value: 0 },
|
|
{ label: '今年累计采购', value: 0 },
|
|
]);
|
|
|
|
// 图表实例
|
|
const salesChartRef = ref<HTMLElement | null>(null);
|
|
const retailChartRef = ref<HTMLElement | null>(null);
|
|
const purchaseChartRef = ref<HTMLElement | null>(null);
|
|
const salesChartInstance = shallowRef<echarts.ECharts | null>(null);
|
|
const retailChartInstance = shallowRef<echarts.ECharts | null>(null);
|
|
const purchaseChartInstance = shallowRef<echarts.ECharts | null>(null);
|
|
|
|
// 格式化金额
|
|
const formatMoney = (value: number): string => {
|
|
return value.toLocaleString();
|
|
};
|
|
|
|
// 生成最近6个月的月份标签
|
|
const getMonthLabels = (): string[] => {
|
|
const labels: string[] = [];
|
|
const now = new Date();
|
|
for (let i = 5; i >= 0; i--) {
|
|
const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
|
|
const year = d.getFullYear();
|
|
const month = String(d.getMonth() + 1).padStart(2, '0');
|
|
labels.push(`${year}-${month}`);
|
|
}
|
|
return labels;
|
|
};
|
|
|
|
// 初始化图表通用配置
|
|
const initChart = (refEl: HTMLElement, title: string, color: string) => {
|
|
const chart = echarts.init(refEl);
|
|
const months = getMonthLabels();
|
|
const isDark = document.documentElement.classList.contains('dark');
|
|
const palette = isDark
|
|
? { axis: '#4c4d4f', label: '#a8abb2', split: '#2b2b2d' }
|
|
: { axis: '#E0E6ED', label: '#606266', split: '#F2F6FC' };
|
|
|
|
chart.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'cross' }
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: months,
|
|
axisLine: { lineStyle: { color: palette.axis } },
|
|
axisLabel: { color: palette.label, fontSize: 11 }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: { show: false },
|
|
axisTick: { show: false },
|
|
splitLine: { lineStyle: { color: palette.split } },
|
|
axisLabel: { color: palette.label, fontSize: 11 }
|
|
},
|
|
series: [
|
|
{
|
|
name: title,
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'circle',
|
|
symbolSize: 6,
|
|
lineStyle: { color: color, width: 2 },
|
|
itemStyle: { color: color },
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: color + '40' },
|
|
{ offset: 1, color: color + '10' }
|
|
])
|
|
},
|
|
data: [0, 0, 0, 0, 0, 0]
|
|
}
|
|
]
|
|
});
|
|
|
|
return chart;
|
|
};
|
|
|
|
// 初始化所有图表
|
|
const initCharts = () => {
|
|
if (salesChartRef.value) {
|
|
salesChartInstance.value = initChart(salesChartRef.value, '销售', '#409EFF');
|
|
}
|
|
if (retailChartRef.value) {
|
|
retailChartInstance.value = initChart(retailChartRef.value, '零售', '#67C23A');
|
|
}
|
|
if (purchaseChartRef.value) {
|
|
purchaseChartInstance.value = initChart(purchaseChartRef.value, '采购', '#E6A23C');
|
|
}
|
|
};
|
|
|
|
// 加载数据（模拟接口调用）
|
|
const loadData = async () => {
|
|
// TODO: 调用接口获取真实数据
|
|
// const res = await getErpDashboard();
|
|
|
|
// 模拟数据更新
|
|
firstRowStats.value = [
|
|
{ label: '今日销售', value: 12580 },
|
|
{ label: '今日零售', value: 8560 },
|
|
{ label: '今日采购', value: 23400 },
|
|
{ label: '本月累计销售', value: 358600 },
|
|
{ label: '本月累计零售', value: 245800 },
|
|
{ label: '本月累计采购', value: 568900 },
|
|
];
|
|
|
|
secondRowStats.value = [
|
|
{ label: '昨日销售', value: 15230 },
|
|
{ label: '昨日零售', value: 9870 },
|
|
{ label: '昨日采购', value: 18900 },
|
|
{ label: '今年累计销售', value: 2856000 },
|
|
{ label: '今年累计零售', value: 1985000 },
|
|
{ label: '今年累计采购', value: 4568000 },
|
|
];
|
|
|
|
// 更新图表数据
|
|
updateCharts();
|
|
};
|
|
|
|
// 更新图表数据
|
|
const updateCharts = () => {
|
|
const salesData = [28000, 32000, 35000, 38000, 42000, 358600];
|
|
const retailData = [18000, 21000, 22000, 25000, 28000, 245800];
|
|
const purchaseData = [45000, 48000, 52000, 55000, 58000, 568900];
|
|
|
|
if (salesChartInstance.value) {
|
|
salesChartInstance.value.setOption({ series: [{ data: salesData }] });
|
|
}
|
|
if (retailChartInstance.value) {
|
|
retailChartInstance.value.setOption({ series: [{ data: retailData }] });
|
|
}
|
|
if (purchaseChartInstance.value) {
|
|
purchaseChartInstance.value.setOption({ series: [{ data: purchaseData }] });
|
|
}
|
|
};
|
|
|
|
// 自适应窗口大小
|
|
const handleResize = () => {
|
|
salesChartInstance.value?.resize();
|
|
retailChartInstance.value?.resize();
|
|
purchaseChartInstance.value?.resize();
|
|
};
|
|
|
|
onMounted(async () => {
|
|
initCharts();
|
|
await nextTick();
|
|
await loadData();
|
|
window.addEventListener('resize', handleResize);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', handleResize);
|
|
salesChartInstance.value?.dispose();
|
|
retailChartInstance.value?.dispose();
|
|
purchaseChartInstance.value?.dispose();
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.erp-dashboard {
|
|
background-color: #f5f7fa;
|
|
// min-height: calc(100vh - 84px);
|
|
}
|
|
|
|
.stat-row {
|
|
.el-col {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.stat-card {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
padding: 16px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
|
|
|
.stat-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 14px;
|
|
color: #c0c4cc;
|
|
cursor: help;
|
|
}
|
|
}
|
|
|
|
.stat-value {
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
.currency {
|
|
font-size: 14px;
|
|
color: #303133;
|
|
font-weight: 500;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.number {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart-row {
|
|
.el-col {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.chart-card {
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
padding: 16px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
|
height: 320px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.chart-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #303133;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #ebeef5;
|
|
}
|
|
|
|
.chart-container {
|
|
flex: 1;
|
|
min-height: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// 手机端适配：统计卡片每行 2 个，图表卡片每行 1 个
|
|
@media (max-width: 768px) {
|
|
.erp-dashboard {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
// el-row gutter 通过负 margin + col padding 实现，手机端缩小间距并防止横向溢出
|
|
.stat-row {
|
|
margin-left: -4px !important;
|
|
margin-right: -4px !important;
|
|
|
|
:deep(.el-col) {
|
|
padding-left: 4px !important;
|
|
padding-right: 4px !important;
|
|
margin-bottom: 8px;
|
|
|
|
&:nth-last-child(-n + 2) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart-row {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
|
|
:deep(.el-col) {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
margin-bottom: 12px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 一行两个统计卡片，缩小内边距与字号防止挤压
|
|
.stat-card {
|
|
padding: 10px 12px;
|
|
|
|
.stat-header {
|
|
margin-bottom: 8px;
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.stat-value .number {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.chart-card {
|
|
height: 280px;
|
|
}
|
|
}
|
|
|
|
// ===== 暗色主题适配 =====
|
|
html.dark & {
|
|
.erp-dashboard {
|
|
background-color: var(--el-bg-color-page);
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--el-bg-color);
|
|
|
|
.stat-header {
|
|
.stat-label {
|
|
color: var(--el-text-color-regular);
|
|
}
|
|
|
|
.stat-icon {
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
}
|
|
|
|
.stat-value {
|
|
.currency,
|
|
.number {
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart-card {
|
|
background: var(--el-bg-color);
|
|
|
|
.chart-title {
|
|
color: var(--el-text-color-primary);
|
|
border-bottom-color: var(--el-border-color-lighter);
|
|
}
|
|
}
|
|
}
|
|
</style>
|