<template>
|
<div class="dashboard">
|
<!-- 顶部统计卡片 -->
|
<div class="top-cards">
|
<div class="stat-card revenue">
|
<div class="card-icon">
|
<i class="el-icon-money"></i>
|
</div>
|
<div class="card-content">
|
<div class="card-title">营收金额</div>
|
<div class="card-value">¥1,234,567</div>
|
<div class="card-trend">
|
<span class="trend-label">较昨日</span>
|
<span class="trend-value up">+12.5%</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="stat-card supply">
|
<div class="card-icon">
|
<i class="el-icon-truck"></i>
|
</div>
|
<div class="card-content">
|
<div class="card-title">供应量</div>
|
<div class="card-value">8,965 吨</div>
|
<div class="card-trend">
|
<span class="trend-label">较昨日</span>
|
<span class="trend-value up">+8.2%</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 中间图表区域 -->
|
<div class="chart-section">
|
<div class="chart-container">
|
<div class="chart-title">营收分布</div>
|
<div ref="pieChart" class="chart-content pie-chart"></div>
|
</div>
|
|
<div class="chart-container">
|
<div class="chart-title">供应量趋势</div>
|
<div ref="areaChart" class="chart-content area-chart"></div>
|
</div>
|
</div>
|
|
<!-- 底部三栏布局 -->
|
<div class="bottom-section">
|
<!-- 库存统计 -->
|
<div class="bottom-card inventory">
|
<div class="card-header">
|
<h3>库存统计</h3>
|
</div>
|
<div class="inventory-items">
|
<div class="inventory-item">
|
<div class="item-name">原煤</div>
|
<div class="item-value">15,432 吨</div>
|
<div class="item-status normal">正常</div>
|
</div>
|
<div class="inventory-item">
|
<div class="item-name">精煤</div>
|
<div class="item-value">8,765 吨</div>
|
<div class="item-status normal">正常</div>
|
</div>
|
<div class="inventory-item">
|
<div class="item-name">焦煤</div>
|
<div class="item-value">3,241 吨</div>
|
<div class="item-status low">偏低</div>
|
</div>
|
<div class="inventory-item">
|
<div class="item-name">块煤</div>
|
<div class="item-value">6,789 吨</div>
|
<div class="item-status normal">正常</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 柱状图 -->
|
<div class="bottom-card chart">
|
<div class="card-header">
|
<h3>月度对比</h3>
|
</div>
|
<div ref="barChart" class="chart-content bar-chart"></div>
|
</div>
|
|
<!-- 销售数据表格 -->
|
<div class="bottom-card table">
|
<div class="card-header">
|
<h3>销售数据</h3>
|
</div>
|
<el-table
|
:data="salesData"
|
style="width: 100%"
|
:header-cell-style="tableHeaderStyle"
|
>
|
<el-table-column prop="product" label="产品" width="80"></el-table-column>
|
<el-table-column prop="quantity" label="数量" width="80"></el-table-column>
|
<el-table-column prop="amount" label="金额" width="90"></el-table-column>
|
<el-table-column prop="status" label="状态" width="70">
|
<template #default="scope">
|
<el-tag
|
:type="scope.row.status === '已完成' ? 'success' : 'warning'"
|
size="small"
|
>
|
{{ scope.row.status }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
|
export default {
|
name: 'Dashboard',
|
data() {
|
return {
|
salesData: [
|
{ product: '原煤', quantity: '1,234吨', amount: '¥456,789', status: '已完成' },
|
{ product: '精煤', quantity: '567吨', amount: '¥234,567', status: '已完成' },
|
{ product: '焦煤', quantity: '890吨', amount: '¥345,678', status: '进行中' },
|
{ product: '块煤', quantity: '432吨', amount: '¥123,456', status: '已完成' },
|
{ product: '煤泥', quantity: '678吨', amount: '¥234,567', status: '进行中' }
|
],
|
tableHeaderStyle: {
|
backgroundColor: '#f5f7fa',
|
color: '#606266',
|
fontSize: '12px'
|
}
|
}
|
},
|
mounted() {
|
this.$nextTick(() => {
|
this.initCharts()
|
})
|
},
|
methods: {
|
initCharts() {
|
this.initPieChart()
|
this.initAreaChart()
|
this.initBarChart()
|
},
|
|
initPieChart() {
|
const chart = echarts.init(this.$refs.pieChart)
|
const option = {
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
},
|
legend: {
|
orient: 'vertical',
|
left: 'right',
|
top: 'center',
|
textStyle: {
|
fontSize: 12
|
}
|
},
|
series: [
|
{
|
name: '营收分布',
|
type: 'pie',
|
radius: ['30%', '70%'],
|
center: ['40%', '50%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: '16',
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: [
|
{ value: 335, name: '原煤', itemStyle: { color: '#409EFF' } },
|
{ value: 310, name: '精煤', itemStyle: { color: '#67C23A' } },
|
{ value: 234, name: '焦煤', itemStyle: { color: '#E6A23C' } },
|
{ value: 135, name: '块煤', itemStyle: { color: '#F56C6C' } },
|
{ value: 155, name: '其他', itemStyle: { color: '#909399' } }
|
]
|
}
|
]
|
}
|
chart.setOption(option)
|
|
// 响应式
|
window.addEventListener('resize', () => {
|
chart.resize()
|
})
|
},
|
|
initAreaChart() {
|
const chart = echarts.init(this.$refs.areaChart)
|
const option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#6a7985'
|
}
|
}
|
},
|
legend: {
|
data: ['供应量'],
|
top: 10
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
|
axisLabel: {
|
fontSize: 12
|
}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
axisLabel: {
|
fontSize: 12
|
}
|
}
|
],
|
series: [
|
{
|
name: '供应量',
|
type: 'line',
|
stack: 'Total',
|
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.1)' }
|
])
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: [1200, 1320, 1010, 1340, 900, 1230, 1100],
|
lineStyle: {
|
color: '#409EFF'
|
},
|
itemStyle: {
|
color: '#409EFF'
|
}
|
}
|
]
|
}
|
chart.setOption(option)
|
|
// 响应式
|
window.addEventListener('resize', () => {
|
chart.resize()
|
})
|
},
|
|
initBarChart() {
|
const chart = echarts.init(this.$refs.barChart)
|
const option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: ['原煤', '精煤', '焦煤', '块煤', '煤泥'],
|
axisLabel: {
|
fontSize: 11
|
}
|
},
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
fontSize: 11
|
}
|
},
|
series: [
|
{
|
name: '销量',
|
type: 'bar',
|
data: [320, 302, 301, 334, 290],
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#409EFF' },
|
{ offset: 1, color: '#79bbff' }
|
])
|
},
|
barWidth: '60%'
|
}
|
]
|
}
|
chart.setOption(option)
|
|
// 响应式
|
window.addEventListener('resize', () => {
|
chart.resize()
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.dashboard {
|
padding: 20px;
|
background-color: #f5f7fa;
|
min-height: 100vh;
|
}
|
|
/* 顶部统计卡片 */
|
.top-cards {
|
display: flex;
|
gap: 20px;
|
margin-bottom: 20px;
|
}
|
|
.stat-card {
|
flex: 1;
|
background: white;
|
border-radius: 8px;
|
padding: 20px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
display: flex;
|
align-items: center;
|
gap: 15px;
|
}
|
|
.card-icon {
|
width: 60px;
|
height: 60px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24px;
|
color: white;
|
}
|
|
.revenue .card-icon {
|
background: linear-gradient(135deg, #409EFF, #79bbff);
|
}
|
|
.supply .card-icon {
|
background: linear-gradient(135deg, #67C23A, #95d475);
|
}
|
|
.card-content {
|
flex: 1;
|
}
|
|
.card-title {
|
font-size: 14px;
|
color: #909399;
|
margin-bottom: 8px;
|
}
|
|
.card-value {
|
font-size: 24px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 5px;
|
}
|
|
.card-trend {
|
font-size: 12px;
|
}
|
|
.trend-label {
|
color: #909399;
|
margin-right: 5px;
|
}
|
|
.trend-value.up {
|
color: #67C23A;
|
}
|
|
/* 中间图表区域 */
|
.chart-section {
|
display: flex;
|
gap: 20px;
|
margin-bottom: 20px;
|
}
|
.el-scrollbar__view{
|
width: 100%;
|
}
|
.chart-container {
|
flex: 1;
|
background: white;
|
border-radius: 8px;
|
padding: 20px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
}
|
|
.chart-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 15px;
|
padding-bottom: 10px;
|
border-bottom: 2px solid #f0f0f0;
|
}
|
|
.chart-content {
|
height: 280px;
|
}
|
|
/* 底部三栏布局 */
|
.bottom-section {
|
display: flex;
|
gap: 20px;
|
}
|
|
.bottom-card {
|
flex: 1;
|
background: white;
|
border-radius: 8px;
|
padding: 20px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
}
|
|
.card-header {
|
margin-bottom: 15px;
|
padding-bottom: 10px;
|
border-bottom: 2px solid #f0f0f0;
|
}
|
|
.card-header h3 {
|
margin: 0;
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
}
|
|
/* 库存统计样式 */
|
.inventory-items {
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.inventory-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 12px;
|
background: #f8f9fa;
|
border-radius: 6px;
|
border-left: 3px solid #409EFF;
|
}
|
|
.item-name {
|
font-weight: bold;
|
color: #303133;
|
}
|
|
.item-value {
|
color: #606266;
|
font-size: 14px;
|
}
|
|
.item-status {
|
padding: 2px 8px;
|
border-radius: 12px;
|
font-size: 12px;
|
font-weight: bold;
|
}
|
|
.item-status.normal {
|
background: #f0f9ff;
|
color: #67C23A;
|
}
|
|
.item-status.low {
|
background: #fef0e6;
|
color: #E6A23C;
|
}
|
|
/* 柱状图容器 */
|
.bar-chart {
|
height: 200px;
|
}
|
|
/* 表格样式调整 */
|
.bottom-card.table {
|
min-width: 320px;
|
}
|
|
.bottom-card.table .el-table {
|
font-size: 12px;
|
}
|
|
.bottom-card.table .el-table td,
|
.bottom-card.table .el-table th {
|
padding: 8px 0;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 1200px) {
|
.bottom-section {
|
flex-direction: column;
|
}
|
|
.chart-section {
|
flex-direction: column;
|
}
|
}
|
|
@media (max-width: 768px) {
|
.top-cards {
|
flex-direction: column;
|
}
|
|
.dashboard {
|
padding: 10px;
|
}
|
|
.stat-card {
|
padding: 15px;
|
}
|
|
.card-value {
|
font-size: 20px;
|
}
|
}
|
</style>
|
