<!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;
min-height: 100vh;
}
.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;
padding: 10px 0;
border-bottom: 1px solid #34495e;
}
.logo i {
margin-right: 10px;
font-size: 24px;
}
.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: 15px;
border-bottom: 1px solid #e0e6ed;
}
.header h1 {
color: #2c3e50;
font-size: 28px;
display: flex;
align-items: center;
}
.header h1 i {
margin-right: 12px;
color: #e74c3c;
}
.time-display {
background-color: #fff;
padding: 8px 15px;
border-radius: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
font-weight: 500;
color: #7f8c8d;
}
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 30px;
}
.card {
background: white;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
padding: 20px;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.card-title {
font-size: 18px;
font-weight: 600;
color: #2c3e50;
}
.card-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.stat-value {
font-size: 28px;
font-weight: 700;
margin: 10px 0;
}
.stat-label {
color: #7f8c8d;
font-size: 14px;
}
.chart-container {
height: 250px;
width: 100%;
}
.exception-list {
background: white;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
overflow: hidden;
}
.list-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
}
.list-title {
font-size: 20px;
font-weight: 600;
color: #2c3e50;
}
.filter-controls {
display: flex;
gap: 15px;
}
.filter-btn {
padding: 8px 15px;
border-radius: 20px;
background: #ecf0f1;
border: none;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
}
.filter-btn.active {
background: #3498db;
color: white;
}
.exception-table {
width: 100%;
border-collapse: collapse;
}
.exception-table th {
text-align: left;
padding: 15px 20px;
background-color: #f8f9fa;
color: #7f8c8d;
font-weight: 600;
border-bottom: 1px solid #e9ecef;
}
.exception-table td {
padding: 15px 20px;
border-bottom: 1px solid #e9ecef;
}
.exception-type {
display: flex;
align-items: center;
}
.type-icon {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
font-size: 14px;
}
.priority-high {
background-color: #e74c3c;
color: white;
}
.priority-medium {
background-color: #f39c12;
color: white;
}
.priority-low {
background-color: #3498db;
color: white;
}
.status-badge {
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
}
.status-pending {
background-color: #fef9e7;
color: #f39c12;
}
.status-processing {
background-color: #eaf2f8;
color: #3498db;
}
.status-resolved {
background-color: #eafaf1;
color: #27ae60;
}
.action-buttons {
display: flex;
gap: 10px;
}
.btn {
padding: 8px 15px;
border-radius: 4px;
border: none;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-primary {
background-color: #3498db;
color: white;
}
.btn-secondary {
background-color: #ecf0f1;
color: #7f8c8d;
}
.btn:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.recommendation {
background-color: #f8f9fa;
padding: 15px;
border-left: 3px solid #3498db;
margin-top: 10px;
border-radius: 0 4px 4px 0;
}
.recommendation-title {
font-weight: 600;
margin-bottom: 8px;
color: #2c3e50;
}
.recommendation-content {
color: #7f8c8d;
line-height: 1.5;
}
</style>
</head>
<body>
<!-- 侧边栏 -->
<div class='sidebar'>
<div class='logo'>
<i class='fas fa-truck'></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><i class='fas fa-truck-moving'></i>车辆监控</li>
<li class='active'><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-exclamation-triangle"></i>异常事件处理</h1>
<div class="time-display" id="current-time">2023年5月15日 10:30:25</div>
</div>
<div class="dashboard">
<div class="card">
<div class="card-header">
<div class="card-title">待处理异常</div>
<div class="card-icon" style="background-color: #fef9e7; color: #f39c12;">
<i class="fas fa-clock"></i>
</div>
</div>
<div class="stat-value">18</div>
<div class="stat-label">较昨日 +2</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">处理中异常</div>
<div class="card-icon" style="background-color: #eaf2f8; color: #3498db;">
<i class="fas fa-sync-alt"></i>
</div>
</div>
<div class="stat-value">7</div>
<div class="stat-label">平均处理时间 35分钟</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">今日已解决</div>
<div class="card-icon" style="background-color: #eafaf1; color: #27ae60;">
<i class="fas fa-check-circle"></i>
</div>
</div>
<div class="stat-value">24</div>
<div class="stat-label">解决率 92%</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">异常类型分布</div>
<div class="card-icon" style="background-color: #f5eef8; color: #9b59b6;">
<i class="fas fa-chart-pie"></i>
</div>
</div>
<div class="chart-container" id="type-chart"></div>
</div>
</div>
<div class="exception-list">
<div class="list-header">
<div class="list-title">异常事件列表</div>
<div class="filter-controls">
<button class="filter-btn active">全部</button>
<button class="filter-btn">高优先级</button>
<button class="filter-btn">交通异常</button>
<button class="filter-btn">车辆故障</button>
</div>
</div>
<table class="exception-table">
<thead>
<tr>
<th style="width: 15%;">异常类型</th>
<th style="width: 15%;">发生时间</th>
<th style="width: 30%;">异常描述</th>
<th style="width: 15%;">状态</th>
<th style="width: 25%;">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="exception-type">
<div class="type-icon priority-high">
<i class="fas fa-traffic-light"></i>
</div>
<div>交通拥堵</div>
</div>
</td>
<td>10:15:23</td>
<td>
<div>车辆在XX路段遭遇严重拥堵，预计延误1小时</div>
<div class="recommendation">
<div class="recommendation-title">处理建议</div>
<div class="recommendation-content">建议重新规划路线，避开拥堵路段</div>
</div>
</td>
<td><span class="status-badge status-pending">未处理</span></td>
<td>
<div class="action-buttons">
<button class="btn btn-primary">立即处理</button>
<button class="btn btn-secondary">忽略</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="exception-type">
<div class="type-icon priority-medium">
<i class="fas fa-truck-loading"></i>
</div>
<div>装载异常</div>
</div>
</td>
<td>09:42:11</td>
<td>
<div>车辆装载重量超出限制5%，存在安全隐患</div>
<div class="recommendation">
<div class="recommendation-title">处理建议</div>
<div class="recommendation-content">建议检查货物分布，重新分配或卸下部分货物</div>
</div>
</td>
<td><span class="status-badge status-processing">处理中</span></td>
<td>
<div class="action-buttons">
<button class="btn btn-primary">查看进度</button>
<button class="btn btn-secondary">通知司机</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="exception-type">
<div class="type-icon priority-high">
<i class="fas fa-car-battery"></i>
</div>
<div>车辆故障</div>
</div>
</td>
<td>08:55:30</td>
<td>
<div>车辆发动机温度异常升高，存在故障风险</div>
<div class="recommendation">
<div class="recommendation-title">处理建议</div>
<div class="recommendation-content">建议立即停车检查，派遣维修人员前往</div>
</div>
</td>
<td><span class="status-badge status-pending">未处理</span></td>
<td>
<div class="action-buttons">
<button class="btn btn-primary">立即处理</button>
<button class="btn btn-secondary">忽略</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="exception-type">
<div class="type-icon priority-low">
<i class="fas fa-route"></i>
</div>
<div>路线偏离</div>
</div>
</td>
<td>08:20:45</td>
<td>
<div>车辆偏离预定路线超过3公里，可能绕行</div>
<div class="recommendation">
<div class="recommendation-title">处理建议</div>
<div class="recommendation-content">建议联系司机确认情况，更新路线规划</div>
</div>
</td>
<td><span class="status-badge status-resolved">已解决</span></td>
<td>
<div class="action-buttons">
<button class="btn btn-secondary">查看详情</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
// 更新时间显示（提前一个月）
function updateTime() {
const now = new Date();
now.setMonth(now.getMonth() - 1); // 提前一个月
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('current-time').textContent =
`${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
}
// 初始化时间
updateTime();
setInterval(updateTime, 1000);
// 初始化图表
document.addEventListener('DOMContentLoaded', function() {
const chartDom = document.getElementById('type-chart');
const myChart = echarts.init(chartDom);
const option = {
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: 12, name: '交通异常', itemStyle: { color: '#e74c3c' } },
{ value: 8, name: '车辆故障', itemStyle: { color: '#f39c12' } },
{ value: 6, name: '路线偏离', itemStyle: { color: '#3498db' } },
{ value: 5, name: '装载异常', itemStyle: { color: '#9b59b6' } },
{ value: 3, name: '其他', itemStyle: { color: '#95a5a6' } }
]
}
]
};
myChart.setOption(option);
// 响应式调整
window.addEventListener('resize', function() {
myChart.resize();
});
});
</script>
</body>
</html>