<!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/6.4.0/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;
overflow-y: auto;
}
.logo {
margin-bottom: 30px;
font-size: 20px;
font-weight: bold;
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #34495e;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar li {
padding: 12px 15px;
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;
}
.sidebar li i {
margin-right: 10px;
width: 20px;
text-align: center;
}
.main-content {
flex: 1;
margin-left: 250px;
padding: 30px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 20px;
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;
}
.filters {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
margin-bottom: 30px;
}
.filter-row {
display: flex;
gap: 20px;
margin-bottom: 15px;
}
.filter-group {
flex: 1;
}
.filter-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #2c3e50;
}
.filter-group select,
.filter-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9fafc;
}
.btn-group {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 10px;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-primary {
background-color: #3498db;
color: white;
}
.btn-outline {
background-color: transparent;
border: 1px solid #3498db;
color: #3498db;
}
.btn:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.data-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
margin-bottom: 30px;
}
.card {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
overflow: hidden;
}
.card-header {
background-color: #2c3e50;
color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-title {
font-size: 18px;
font-weight: 600;
}
.card-status {
font-size: 14px;
padding: 3px 10px;
border-radius: 20px;
}
.status-active {
background-color: #2ecc71;
}
.status-warning {
background-color: #f39c12;
}
.card-body {
padding: 20px;
}
.stats {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: #3498db;
}
.stat-label {
font-size: 14px;
color: #7f8c8d;
}
.chart-container {
height: 200px;
margin-bottom: 20px;
}
.data-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
.data-table th {
background-color: #f8f9fa;
padding: 12px 15px;
text-align: left;
font-weight: 600;
color: #2c3e50;
border-bottom: 1px solid #e0e6ed;
}
.data-table td {
padding: 12px 15px;
border-bottom: 1px solid #e0e6ed;
}
.data-table tr:hover {
background-color: #f9fafc;
}
.export-btn {
display: block;
width: 100%;
text-align: center;
padding: 12px;
background-color: #f8f9fa;
color: #3498db;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.export-btn:hover {
background-color: #e3f2fd;
}
.footer {
text-align: center;
padding: 20px;
color: #7f8c8d;
font-size: 14px;
border-top: 1px solid #e0e6ed;
margin-top: 30px;
}
</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"></i>首页</li>
<li><i class="fas fa-map-marked-alt"></i>路径规划</li>
<li><i class="fas fa-chart-line"></i>数据分析</li>
<li class="active"><i class="fas fa-truck-moving"></i>车辆监控</li>
<li><i class="fas fa-exclamation-triangle"></i>异常处理</li>
<li><i class="fas fa-cog"></i>系统设置</li>
<li><i class="fas fa-user"></i>个人中心</li>
<li><i class="fas fa-sign-out-alt"></i>退出登录</li>
</ul>
</div>
<!-- 主内容区 -->
<div class="main-content">
<div class="header">
<h1><i class="fas fa-database"></i> 数据采集监控</h1>
<div class="time-display" id="current-time">
<i class="fas fa-clock"></i> 数据更新时间: 2023-05-15 14:30:25
</div>
</div>
<!-- 筛选区域 -->
<div class="filters">
<div class="filter-row">
<div class="filter-group">
<label>数据类型</label>
<select>
<option>全部数据</option>
<option>路况数据</option>
<option>订单数据</option>
<option>车辆状态</option>
</select>
</div>
<div class="filter-group">
<label>时间范围</label>
<input type="date" value="2023-04-15">
</div>
<div class="filter-group">
<label>至</label>
<input type="date" value="2023-05-15">
</div>
</div>
<div class="filter-row">
<div class="filter-group">
<label>数据状态</label>
<select>
<option>全部状态</option>
<option>正常</option>
<option>警告</option>
<option>异常</option>
</select>
</div>
<div class="filter-group">
<label>来源系统</label>
<select>
<option>全部来源</option>
<option>高德地图API</option>
<option>百度地图API</option>
<option>ERP系统</option>
<option>车辆OBD</option>
</select>
</div>
<div class="filter-group">
<label>关键词搜索</label>
<input type="text" placeholder="输入关键词...">
</div>
</div>
<div class="btn-group">
<button class="btn btn-outline">重置筛选</button>
<button class="btn btn-primary">应用筛选</button>
</div>
</div>
<!-- 数据卡片 -->
<div class="data-cards">
<!-- 路况数据卡片 -->
<div class="card">
<div class="card-header">
<div class="card-title">路况数据采集</div>
<div class="card-status status-active">运行中</div>
</div>
<div class="card-body">
<div class="stats">
<div class="stat-item">
<div class="stat-value">1,248</div>
<div class="stat-label">今日采集</div>
</div>
<div class="stat-item">
<div class="stat-value">37,520</div>
<div class="stat-label">本月采集</div>
</div>
<div class="stat-item">
<div class="stat-value">98.7%</div>
<div class="stat-label">成功率</div>
</div>
</div>
<div class="chart-container" id="road-chart"></div>
<table class="data-table">
<thead>
<tr>
<th>来源</th>
<th>最后更新时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>高德地图API</td>
<td>2023-05-15 14:28:45</td>
<td><span style="color:#2ecc71">正常</span></td>
</tr>
<tr>
<td>百度地图API</td>
<td>2023-05-15 14:25:30</td>
<td><span style="color:#2ecc71">正常</span></td>
</tr>
<tr>
<td>GPS轨迹分析</td>
<td>2023-05-15 14:30:10</td>
<td><span style="color:#f39c12">警告</span></td>
</tr>
</tbody>
</table>
<a href="#" class="export-btn"><i class="fas fa-download"></i> 导出路况数据</a>
</div>
</div>
<!-- 订单数据卡片 -->
<div class="card">
<div class="card-header">
<div class="card-title">订单数据采集</div>
<div class="card-status status-active">运行中</div>
</div>
<div class="card-body">
<div class="stats">
<div class="stat-item">
<div class="stat-value">326</div>
<div class="stat-label">今日订单</div>
</div>
<div class="stat-item">
<div class="stat-value">9,780</div>
<div class="stat-label">本月订单</div>
</div>
<div class="stat-item">
<div class="stat-value">12.4%</div>
<div class="stat-label">紧急订单</div>
</div>
</div>
<div class="chart-container" id="order-chart"></div>
<table class="data-table">
<thead>
<tr>
<th>订单类型</th>
<th>最后更新时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>标准订单</td>
<td>2023-05-15 14:20:15</td>
<td><span style="color:#2ecc71">正常</span></td>
</tr>
<tr>
<td>加急订单</td>
<td>2023-05-15 14:18:40</td>
<td><span style="color:#2ecc71">正常</span></td>
</tr>
<tr>
<td>特殊订单</td>
<td>2023-05-15 13:45:22</td>
<td><span style="color:#f39c12">警告</span></td>
</tr>
</tbody>
</table>
<a href="#" class="export-btn"><i class="fas fa-download"></i> 导出订单数据</a>
</div>
</div>
<!-- 车辆状态卡片 -->
<div class="card">
<div class="card-header">
<div class="card-title">车辆状态监控</div>
<div class="card-status status-active">运行中</div>
</div>
<div class="card-body">
<div class="stats">
<div class="stat-item">
<div class="stat-value">86</div>
<div class="stat-label">在线车辆</div>
</div>
<div class="stat-item">
<div class="stat-value">12</div>
<div class="stat-label">运输中</div>
</div>
<div class="stat-item">
<div class="stat-value">97.2%</div>
<div class="stat-label">正常率</div>
</div>
</div>
<div class="chart-container" id="vehicle-chart"></div>
<table class="data-table">
<thead>
<tr>
<th>监控类型</th>
<th>最后更新时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>位置追踪</td>
<td>2023-05-15 14:29:50</td>
<td><span style="color:#2ecc71">正常</span></td>
</tr>
<tr>
<td>载重监控</td>
<td>2023-05-15 14:25:15</td>
<td><span style="color:#2ecc71">正常</span></td>
</tr>
<tr>
<td>油耗监控</td>
<td>2023-05-15 14:22:30</td>
<td><span style="color:#f39c12">警告</span></td>
</tr>
</tbody>
</table>
<a href="#" class="export-btn"><i class="fas fa-download"></i> 导出车辆数据</a>
</div>
</div>
</div>
<div class="footer">
智能物流车多源数据分析路径优化系统 © 2023 数据更新时间: 2023-05-15 14:30:25
</div>
</div>
<script>
// 初始化图表
document.addEventListener('DOMContentLoaded', function() {
// 路况数据图表
const roadChart = echarts.init(document.getElementById('road-chart'));
roadChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
top: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['5/10', '5/11', '5/12', '5/13', '5/14', '5/15']
},
yAxis: {
type: 'value'
},
series: [{
name: '采集量',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1248],
lineStyle: {
color: '#3498db'
},
itemStyle: {
color: '#3498db'
}
}]
});
// 订单数据图表
const orderChart = echarts.init(document.getElementById('order-chart'));
orderChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
top: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['5/10', '5/11', '5/12', '5/13', '5/14', '5/15']
},
yAxis: {
type: 'value'
},
series: [{
name: '订单量',
type: 'bar',
data: [320, 302, 341, 374, 290, 326],
itemStyle: {
color: '#2ecc71'
}
}]
});
// 车辆状态图表
const vehicleChart = echarts.init(document.getElementById('vehicle-chart'));
vehicleChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
top: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['5/10', '5/11', '5/12', '5/13', '5/14', '5/15']
},
yAxis: {
type: 'value'
},
series: [{
name: '在线车辆',
type: 'line',
smooth: true,
data: [78, 83, 79, 85, 82, 86],
lineStyle: {
color: '#9b59b6'
},
itemStyle: {
color: '#9b59b6'
}
}]
});
// 窗口大小变化时重绘图表
window.addEventListener('resize', function() {
roadChart.resize();
orderChart.resize();
vehicleChart.resize();
});
});
</script>
</body>
</html>