<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能物流系统 - 数据分析看板</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
display: flex;
background-color: #f5f7fa;
color: #333;
}
.sidebar {
background-color: #2c3e50;
color: white;
width: 250px;
height: 100vh;
padding: 20px;
position: fixed;
left: 0;
top: 0;
}
.logo {
margin-bottom: 30px;
font-size: 20px;
font-weight: bold;
display: flex;
align-items: center;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar li {
padding: 10px;
margin-bottom: 5px;
cursor: pointer;
border-radius: 4px;
transition: all 0.3s ease;
display: flex;
align-items: center;
}
.sidebar li:hover {
background-color: #34495e;
}
.sidebar li.active {
background-color: #3498db;
}
.main-content {
flex: 1;
margin-left: 250px;
padding: 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #e0e6ed;
}
.header h1 {
color: #2c3e50;
font-size: 24px;
}
.time-display {
background-color: #3498db;
color: white;
padding: 8px 15px;
border-radius: 4px;
font-size: 14px;
}
.kpi-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.kpi-card {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease;
}
.kpi-card:hover {
transform: translateY(-5px);
}
.kpi-card i {
font-size: 28px;
margin-bottom: 15px;
color: #3498db;
}
.kpi-value {
font-size: 28px;
font-weight: bold;
margin: 10px 0;
color: #2c3e50;
}
.kpi-title {
color: #7f8c8d;
font-size: 14px;
}
.chart-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.chart-box {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
height: 400px;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.chart-title {
font-size: 18px;
font-weight: bold;
color: #2c3e50;
}
.chart {
width: 100%;
height: 340px;
}
.trend-container {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
.trend-chart {
width: 100%;
height: 400px;
}
.footer {
text-align: center;
padding: 20px;
color: #7f8c8d;
font-size: 14px;
border-top: 1px solid #e0e6ed;
}
</style>
</head>
<body>
<!-- 侧边栏 -->
<div class='sidebar'>
<div class='logo'>
<i class='fas fa-truck' style='margin-right: 10px;'></i>智能物流系统
</div>
<ul>
<li><i class='fas fa-home' style='margin-right: 10px;'></i>首页</li>
<li><i class='fas fa-map-marked-alt' style='margin-right: 10px;'></i>路径规划</li>
<li class='active'><i class='fas fa-chart-line' style='margin-right: 10px;'></i>数据分析</li>
<li><i class='fas fa-truck-moving' style='margin-right: 10px;'></i>车辆监控</li>
<li><i class='fas fa-exclamation-triangle' style='margin-right: 10px;'></i>异常处理</li>
<li><i class='fas fa-cog' style='margin-right: 10px;'></i>系统设置</li>
<li><i class='fas fa-user' style='margin-right: 10px;'></i>个人中心</li>
<li><i class='fas fa-sign-out-alt' style='margin-right: 10px;'></i>退出登录</li>
</ul>
</div>
<!-- 主内容区 -->
<div class="main-content">
<div class="header">
<h1>数据分析看板</h1>
<div class="time-display" id="current-time"></div>
</div>
<!-- KPI指标展示 -->
<div class="kpi-container">
<div class="kpi-card">
<i class="fas fa-truck-loading"></i>
<div class="kpi-value">98.7%</div>
<div class="kpi-title">订单完成率</div>
</div>
<div class="kpi-card">
<i class="fas fa-road"></i>
<div class="kpi-value">23.5km</div>
<div class="kpi-title">平均行驶距离</div>
</div>
<div class="kpi-card">
<i class="fas fa-clock"></i>
<div class="kpi-value">38min</div>
<div class="kpi-title">平均配送时间</div>
</div>
<div class="kpi-card">
<i class="fas fa-gas-pump"></i>
<div class="kpi-value">8.2L</div>
<div class="kpi-title">百公里油耗</div>
</div>
</div>
<!-- 效率对比分析 -->
<div class="chart-container">
<div class="chart-box">
<div class="chart-header">
<div class="chart-title">区域配送效率对比</div>
</div>
<div id="efficiency-chart" class="chart"></div>
</div>
<div class="chart-box">
<div class="chart-header">
<div class="chart-title">车辆类型效率分析</div>
</div>
<div id="vehicle-chart" class="chart"></div>
</div>
</div>
<!-- 历史趋势数据 -->
<div class="trend-container">
<div class="chart-header">
<div class="chart-title">月度配送效率趋势</div>
</div>
<div id="trend-chart" class="trend-chart"></div>
</div>
<div class="footer">
智能物流车多源数据分析路径优化系统 © 2023
</div>
</div>
<script>
// 设置时间（提前一个月）
function setCurrentTime() {
const now = new Date();
now.setMonth(now.getMonth() - 1);
const options = { year: 'numeric', month: 'long', day: 'numeric' };
document.getElementById('current-time').innerText = now.toLocaleDateString('zh-CN', options);
}
// 初始化图表
function initCharts() {
// 区域配送效率对比
const efficiencyChart = echarts.init(document.getElementById('efficiency-chart'));
efficiencyChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['当前效率', '行业平均']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['朝阳区', '海淀区', '西城区', '东城区', '丰台区', '通州区']
},
yAxis: {
type: 'value',
name: '效率指数'
},
series: [
{
name: '当前效率',
type: 'bar',
data: [82, 76, 91, 88, 79, 85],
itemStyle: {
color: '#3498db'
}
},
{
name: '行业平均',
type: 'bar',
data: [75, 70, 80, 78, 72, 77],
itemStyle: {
color: '#95a5a6'
}
}
]
});
// 车辆类型效率分析
const vehicleChart = echarts.init(document.getElementById('vehicle-chart'));
vehicleChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
right: 10,
top: 'center',
data: ['小型货车', '中型货车', '大型货车', '电动三轮', '冷藏车']
},
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: '18',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 35, name: '小型货车' },
{ value: 25, name: '中型货车' },
{ value: 20, name: '大型货车' },
{ value: 15, name: '电动三轮' },
{ value: 5, name: '冷藏车' }
],
color: ['#3498db', '#2ecc71', '#9b59b6', '#e74c3c', '#f1c40f']
}
]
});
// 月度配送效率趋势
const trendChart = echarts.init(document.getElementById('trend-chart'));
trendChart.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
data: ['订单完成率', '平均配送时间', '燃油效率']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '订单完成率',
type: 'line',
smooth: true,
data: [95.2, 96.1, 97.3, 97.8, 98.2, 98.5, 98.7],
lineStyle: {
width: 3
},
symbolSize: 8,
itemStyle: {
color: '#3498db'
}
},
{
name: '平均配送时间',
type: 'line',
smooth: true,
data: [52, 48, 45, 42, 40, 39, 38],
yAxisIndex: 0,
lineStyle: {
width: 3
},
symbolSize: 8,
itemStyle: {
color: '#e74c3c'
}
},
{
name: '燃油效率',
type: 'line',
smooth: true,
data: [9.5, 9.2, 8.9, 8.7, 8.5, 8.3, 8.2],
yAxisIndex: 0,
lineStyle: {
width: 3
},
symbolSize: 8,
itemStyle: {
color: '#2ecc71'
}
}
]
});
// 响应窗口大小变化
window.addEventListener('resize', function() {
efficiencyChart.resize();
vehicleChart.resize();
trendChart.resize();
});
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
setCurrentTime();
initCharts();
});
</script>
</body>
</html>