Jesxion
e70e5cc69d
- alert.html: requireAuth()后加return防止未登录时继续执行 - 新增log-detail.html: 独立详情页(骨架屏+设备标签+安全备注+照片) - logs.html: 列表项跳转log-detail.html?id=xxx - mock.js: MOCK_LOGS补全part/equipment/author/created_at/safety_note字段 - 补全equip-checkbox等CSS样式
129 lines
4.5 KiB
HTML
129 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>预警中心</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/weui@2.5.4/dist/style/weui.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.min.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<!-- 顶栏 page-hd -->
|
|
<header class="page-hd">
|
|
<a href="index.html" class="page-hd__back">
|
|
<i class="ri-arrow-left-s-line"></i>
|
|
</a>
|
|
<div class="page-hd__title">预警中心</div>
|
|
</header>
|
|
|
|
<!-- 子Tab weui-tabs -->
|
|
<div class="weui-tabs">
|
|
<div class="weui-tabs__nav">
|
|
<div class="weui-tabs__item" data-filter="">全部</div>
|
|
<div class="weui-tabs__item" data-filter="danger">危险</div>
|
|
<div class="weui-tabs__item" data-filter="warning">警告</div>
|
|
<div class="weui-tabs__item" data-filter="handled">已处理</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-bd">
|
|
<!-- 预警列表 weui-cells -->
|
|
<div id="alertList" class="weui-cells"></div>
|
|
</div>
|
|
|
|
<!-- 底部TabBar -->
|
|
<div class="tab-bar">
|
|
<a href="index.html" class="tab-item">
|
|
<i class="ri-home-line tab-item-icon"></i>
|
|
<span class="tab-item-text">首页</span>
|
|
</a>
|
|
<a href="devices.html" class="tab-item">
|
|
<i class="ri-archive-line tab-item-icon"></i>
|
|
<span class="tab-item-text">设备</span>
|
|
</a>
|
|
<a href="reports.html" class="tab-item">
|
|
<i class="ri-camera-line tab-item-icon"></i>
|
|
<span class="tab-item-text">随手拍</span>
|
|
</a>
|
|
<a href="logs.html" class="tab-item">
|
|
<i class="ri-file-list-3-line tab-item-icon"></i>
|
|
<span class="tab-item-text">日志</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/mock.js"></script>
|
|
<script src="js/api.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script>
|
|
|
|
let currentFilter = '';
|
|
|
|
function renderAlerts(alerts) {
|
|
const list = document.getElementById('alertList');
|
|
if (alerts.length === 0) {
|
|
list.innerHTML = `
|
|
<div class="weui-cell weui-cell_access empty-state">
|
|
<div class="empty-state-icon">
|
|
<i class="ri-file-warning-line"></i>
|
|
</div>
|
|
<div class="empty-state-text">暂无预警</div>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
list.innerHTML = alerts.map(a => {
|
|
const levelClass = a.level === 'danger' ? 'danger' : (a.level === 'warning' ? 'warning' : 'handled');
|
|
const iconClass = a.level === 'danger' ? 'ri-error-warning-line' : (a.level === 'warning' ? 'ri-alert-line' : 'ri-checkbox-circle-line');
|
|
const truncatedMsg = a.message.length > 30 ? a.message.substring(0, 30) + '...' : a.message;
|
|
const time = formatTime(a.createdAt);
|
|
return `
|
|
<a href="alert.html?id=${a.id}" class="weui-cell weui-cell_access alert-item">
|
|
<div class="alert-item__icon ${levelClass}">
|
|
<i class="${iconClass}"></i>
|
|
</div>
|
|
<div class="weui-cell__bd">
|
|
<div class="alert-item__message">${truncatedMsg}</div>
|
|
<div class="alert-item__meta">${a.deviceName} · ${time}</div>
|
|
</div>
|
|
<div class="weui-cell__ft">
|
|
<i class="ri-arrow-right-s-line"></i>
|
|
</div>
|
|
</a>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
async function loadAlerts(filter = '') {
|
|
currentFilter = 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);
|
|
}
|
|
|
|
// Tab switching
|
|
document.querySelector('.weui-tabs__nav').addEventListener('click', e => {
|
|
const tab = e.target.closest('.weui-tabs__item');
|
|
if (!tab) return;
|
|
document.querySelectorAll('.weui-tabs__item').forEach(t => t.classList.remove('weui-tabs__item--active'));
|
|
tab.classList.add('weui-tabs__item--active');
|
|
loadAlerts(tab.dataset.filter);
|
|
});
|
|
|
|
// Initialize first tab as active
|
|
document.querySelector('.weui-tabs__item').classList.add('weui-tabs__item--active');
|
|
|
|
loadAlerts();
|
|
</script>
|
|
</body>
|
|
</html>
|