Jesxion
3301d9557b
新增页面: - ai-analyses.html: AI分析列表（Tab筛选：全部/人员安全/设备异常/环境风险） - ai-analysis.html: AI分析详情（设备信息+AI分析描述+建议措施） - reports.html: 隐患随手拍列表（Tab筛选：全部/待处理/处理中/已处理，FAB悬浮新建按钮） - report-detail.html: 隐患详情（状态时间线+认领/处理完成操作） Mock层补全: - MOCK_AI_ANALYSES (4条AI分析记录，3种类型) - getAnalysisTypeInfo() / getAIAnalysisById() 辅助函数 - apiGetAIAnalyses() / apiGetAIAnalysisDetail() / apiGetReportDetail() UI规范统一（frontend-dev skill门控）: - 统一TabBar为tab-bar class，替换所有weui-tabbar - 随手拍入口统一为reports.html，report.html为新建表单 - 新页面全部实现skeleton骨架屏+空状态+loading状态 - severity/status使用RemixIcon，无emoji - pulse-dot动画用于待处理状态指示
117 lines
3.8 KiB
HTML
117 lines
3.8 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">
|
|
<!-- 顶栏 -->
|
|
<header class="page-hd">
|
|
<a href="index.html" class="page-hd-back">
|
|
<i class="ri-arrow-left-s-line"></i>
|
|
</a>
|
|
<h1 class="page-hd-title">设备列表</h1>
|
|
</header>
|
|
|
|
<!-- 页面内容 -->
|
|
<div class="page-content">
|
|
<!-- 子Tab -->
|
|
<div class="weui-tabs">
|
|
<div class="weui-tabs__nav">
|
|
<a href="javascript:;" class="weui-tabs__item active" data-type="">全部</a>
|
|
<a href="javascript:;" class="weui-tabs__item" data-type="tower_crane">塔吊</a>
|
|
<a href="javascript:;" class="weui-tabs__item" data-type="elevator">升降机</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 设备网格 -->
|
|
<div class="device-grid" id="deviceGrid"></div>
|
|
</div>
|
|
|
|
<!-- 底部Tab栏 -->
|
|
<nav class="tab-bar">
|
|
<a href="index.html" class="tab-item">
|
|
<i class="ri-home-line"></i>
|
|
<span>首页</span>
|
|
</a>
|
|
<a href="devices.html" class="tab-item active">
|
|
<i class="ri-archive-fill"></i>
|
|
<span>设备</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"></i>
|
|
<span>日志</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<script src="js/mock.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script src="js/api.js"></script>
|
|
<script>
|
|
requireAuth();
|
|
|
|
let currentType = '';
|
|
|
|
function getDeviceIconClass(type) {
|
|
return type === 'tower_crane' ? 'ri-hammer-line' : 'ri-arrow-up-down-line';
|
|
}
|
|
|
|
function renderDevices(devices) {
|
|
const grid = document.getElementById('deviceGrid');
|
|
if (devices.length === 0) {
|
|
grid.innerHTML = '<div class="empty-tip">暂无设备</div>';
|
|
return;
|
|
}
|
|
grid.innerHTML = devices.map(device => {
|
|
const iconClass = getDeviceIconClass(device.type);
|
|
const statusClass = device.status === 'online' ? 'online' : 'offline';
|
|
return `
|
|
<a href="device.html?id=${device.id}" class="device-card">
|
|
<div class="device-card-hd">
|
|
<i class="${iconClass}" style="font-size: 24px;"></i>
|
|
<span class="device-status-dot ${statusClass}"></span>
|
|
</div>
|
|
<div class="device-card-info">
|
|
<div class="device-card-name">${device.name}</div>
|
|
<div class="device-card-model">${device.model}</div>
|
|
<div class="device-card-location">
|
|
<i class="ri-map-pin-line"></i>
|
|
<span>${device.location}</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
async function loadDevices(type) {
|
|
const res = await apiGetDevices({ type: type || undefined });
|
|
renderDevices(res.data.items);
|
|
}
|
|
|
|
// Tab切换
|
|
document.querySelectorAll('.weui-tabs__item').forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
document.querySelectorAll('.weui-tabs__item').forEach(i => i.classList.remove('active'));
|
|
this.classList.add('active');
|
|
currentType = this.dataset.type;
|
|
loadDevices(currentType);
|
|
});
|
|
});
|
|
|
|
// 初始化
|
|
loadDevices(currentType);
|
|
</script>
|
|
</body>
|
|
</html>
|