99 lines
3.3 KiB
HTML
99 lines
3.3 KiB
HTML
<!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="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<!-- 顶栏 -->
|
||
<div class="top-bar">
|
||
<a href="index.html" class="top-bar-back">‹</a>
|
||
<div class="top-bar-title">预警中心</div>
|
||
<div class="top-bar-empty"></div>
|
||
</div>
|
||
|
||
<!-- 子Tab -->
|
||
<div class="sub-tabs" id="subTabs">
|
||
<div class="sub-tab active" data-filter="">全部</div>
|
||
<div class="sub-tab" data-filter="danger">危险</div>
|
||
<div class="sub-tab" data-filter="warning">警告</div>
|
||
<div class="sub-tab" data-filter="handled">已处理</div>
|
||
</div>
|
||
|
||
<!-- 预警列表 -->
|
||
<div class="content">
|
||
<div id="alertList" class="alert-list"></div>
|
||
</div>
|
||
|
||
<!-- 底部Tab栏 -->
|
||
<div class="tab-bar">
|
||
<a href="index.html" class="tab-item">
|
||
<div class="tab-icon">🏠</div>
|
||
<div class="tab-label">首页</div>
|
||
</a>
|
||
<a href="devices.html" class="tab-item">
|
||
<div class="tab-icon">📱</div>
|
||
<div class="tab-label">设备</div>
|
||
</a>
|
||
<a href="capture.html" class="tab-item">
|
||
<div class="tab-icon">📷</div>
|
||
<div class="tab-label">随手拍</div>
|
||
</a>
|
||
<a href="log.html" class="tab-item">
|
||
<div class="tab-icon">📋</div>
|
||
<div class="tab-label">日志</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/mock.js"></script>
|
||
<script src="js/api.js"></script>
|
||
<script src="js/app.js"></script>
|
||
<script>
|
||
requireAuth();
|
||
|
||
let currentFilter = '';
|
||
|
||
function renderAlerts(alerts) {
|
||
const list = document.getElementById('alertList');
|
||
if (alerts.length === 0) {
|
||
list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🔔</div><div class="empty-state-text">暂无预警</div></div>';
|
||
return;
|
||
}
|
||
list.innerHTML = alerts.map(a => `
|
||
<a href="alert.html?id=${a.id}" class="alert-item">
|
||
<div class="alert-icon ${a.level === 'danger' ? 'danger' : a.level === 'warning' ? 'warning' : 'handled'}">${getAlertIcon(a.level)}</div>
|
||
<div class="alert-content">
|
||
<div class="alert-title">${a.message.substring(0, 30)}${a.message.length > 30 ? '...' : ''}</div>
|
||
<div class="alert-meta">${a.deviceName} · ${getDeviceIcon(a.deviceType)} · ${formatTime(a.createdAt)}</div>
|
||
</div>
|
||
<div class="list-item-arrow">›</div>
|
||
</a>
|
||
`).join('');
|
||
}
|
||
|
||
async function loadAlerts(filter = '') {
|
||
const params = {};
|
||
if (filter === 'danger') params.level = 'danger';
|
||
else if (filter === 'warning') params.level = 'warning';
|
||
else if (filter === 'handled') params.status = 'handled';
|
||
const res = await apiGetAlerts(params);
|
||
renderAlerts(res.data.items);
|
||
}
|
||
|
||
document.getElementById('subTabs').addEventListener('click', e => {
|
||
const tab = e.target.closest('.sub-tab');
|
||
if (!tab) return;
|
||
document.querySelectorAll('.sub-tab').forEach(t => t.classList.remove('active'));
|
||
tab.classList.add('active');
|
||
loadAlerts(tab.dataset.filter);
|
||
});
|
||
|
||
loadAlerts();
|
||
</script>
|
||
</body>
|
||
</html>
|