jesxion/smart-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3301d9557bcd6519b2760a5b349dd26deea28235
smart-project/h5/index.html
Jesxion 3301d9557b feat(h5): 完善隐患随手拍模块 + 新增AI分析模块 
新增页面:
- 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动画用于待处理状态指示
2026-04-14 17:08:19 +08:00

151 lines
5.9 KiB
HTML
Raw Blame History

<!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">
<div class="page-hd__title">郑州智慧工地</div>
<a href="profile.html" class="page-hd__user">
<i class="ri-user-line"></i>
</a>
</header>
<div class="page-bd">
<!-- 设备概况卡片 weui-panel -->
<div class="weui-panel">
<div class="weui-panel__hd">设备概况</div>
<div class="weui-panel__bd">
<div class="stat-grid">
<div class="stat-card">
<div class="stat-icon">
<i class="ri-hammer-line"></i>
</div>
<div class="stat-value" id="tcCount">--</div>
<div class="stat-sub">在线 <span id="tcOnline">--</span> 台</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="ri-arrow-up-down-line"></i>
</div>
<div class="stat-value" id="elCount">--</div>
<div class="stat-sub">在线 <span id="elOnline">--</span> 台</div>
</div>
</div>
</div>
</div>
<!-- 今日预警卡片 weui-panel -->
<div class="weui-panel">
<div class="weui-panel__hd">今日预警</div>
<div class="weui-panel__bd">
<div class="stat-grid">
<div class="stat-card stat-card--orange">
<div class="stat-icon stat-icon--orange">
<i class="ri-error-warning-line"></i>
</div>
<div class="stat-value" id="dangerCount">--</div>
<div class="stat-sub">危险</div>
</div>
<div class="stat-card stat-card--yellow">
<div class="stat-icon stat-icon--yellow">
<i class="ri-alert-line"></i>
</div>
<div class="stat-value" id="warningCount">--</div>
<div class="stat-sub">警告</div>
</div>
</div>
</div>
</div>
<!-- 最新预警列表 weui-panel -->
<div class="weui-panel">
<div class="weui-panel__hd">
<span>最新预警</span>
<a href="alerts.html" class="panel-more">查看全部 <i class="ri-arrow-right-s-line"></i></a>
</div>
<div class="weui-panel__bd">
<div id="latestAlerts" class="alert-list"></div>
</div>
</div>
</div>
<!-- 底部TabBar -->
<div class="tab-bar">
<a href="index.html" class="tab-item active">
<i class="ri-home-fill 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>
if (!requireAuth()) {}
async function loadDashboard() {
const [devRes, alertRes] = await Promise.all([apiGetDevices(), apiGetAlerts()]);
// 统计塔吊/升降机数量和在线数
const devices = devRes.data.items;
const tcDevices = devices.filter(d => d.type === 'tower_crane');
const elDevices = devices.filter(d => d.type === 'elevator');
document.getElementById('tcCount').textContent = tcDevices.length;
document.getElementById('tcOnline').textContent = tcDevices.filter(d => d.status === 'online').length;
document.getElementById('elCount').textContent = elDevices.length;
document.getElementById('elOnline').textContent = elDevices.filter(d => d.status === 'online').length;
// 统计危险/警告未读数
const alerts = alertRes.data.items;
const dangerCount = alerts.filter(a => a.level === 'danger' && a.status === 'unread').length;
const warningCount = alerts.filter(a => a.level === 'warning' && a.status === 'unread').length;
document.getElementById('dangerCount').textContent = dangerCount;
document.getElementById('warningCount').textContent = warningCount;
// 渲染最新3条预警到latestAlerts
const latestAlertsEl = document.getElementById('latestAlerts');
const latest3 = alerts.slice(0, 3);
latestAlertsEl.innerHTML = latest3.map(alert => {
const levelClass = alert.level === 'danger' ? 'danger' : (alert.level === 'warning' ? 'warning' : 'handled');
const iconClass = alert.level === 'danger' ? 'ri-error-warning-line' : (alert.level === 'warning' ? 'ri-alert-line' : 'ri-checkbox-circle-line');
const time = formatTime(alert.createdAt);
return `
<a href="alert.html?id=${alert.id}" class="alert-item">
<div class="alert-icon-wrap ${levelClass}">
<i class="${iconClass}"></i>
</div>
<div class="alert-body">
<div class="alert-title">${alert.message.length > 30 ? alert.message.substring(0, 30) + '...' : alert.message}</div>
<div class="alert-meta">${alert.deviceName} · ${time}</div>
</div>
</a>
`;
}).join('');
}
loadDashboard();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink