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动画用于待处理状态指示
This commit is contained in:
284
h5/ai-analyses.html
Normal file
284
h5/ai-analyses.html
Normal file
@@ -0,0 +1,284 @@
|
||||
<!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>AI 智能分析 - 郑州智慧工地</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">
|
||||
<style>
|
||||
/* AI 分析列表页专用 */
|
||||
.ai-analysis-list { padding: 12px; }
|
||||
|
||||
.ai-analysis-card {
|
||||
background: var(--color-card);
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.ai-analysis-card:active { transform: scale(0.99); }
|
||||
|
||||
.ai-analysis-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ai-analysis-type-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ai-analysis-type-badge.person_safety {
|
||||
background: rgba(249, 115, 22, 0.12);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.ai-analysis-type-badge.equipment_anomaly {
|
||||
background: rgba(234, 179, 8, 0.12);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.ai-analysis-type-badge.environment_risk {
|
||||
background: rgba(234, 179, 8, 0.12);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.ai-analysis-type-badge.other {
|
||||
background: rgba(156, 163, 175, 0.12);
|
||||
color: var(--color-offline);
|
||||
}
|
||||
|
||||
.ai-analysis-type-badge svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.ai-analysis-confidence {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.ai-analysis-device {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.ai-analysis-desc {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ai-analysis-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.ai-analysis-footer-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ai-analysis-footer-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.ai-analysis-footer-item svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
/* Loading skeleton */
|
||||
.skeleton { animation: skeleton-pulse 1.5s ease-in-out infinite; }
|
||||
.skeleton-card {
|
||||
background: var(--color-card);
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.skeleton-line {
|
||||
height: 14px;
|
||||
background: var(--color-border);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.skeleton-line.short { width: 60%; }
|
||||
.skeleton-line.medium { width: 80%; }
|
||||
|
||||
@keyframes skeleton-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<!-- 顶栏 -->
|
||||
<header class="header">
|
||||
<a href="index.html" class="header-back" style="color:#fff;">
|
||||
<i class="ri-arrow-left-s-line" style="font-size:22px;"></i>
|
||||
</a>
|
||||
<div class="header-title">
|
||||
<i class="ri-robot-line" style="font-size:18px;"></i>
|
||||
<span>AI 智能分析</span>
|
||||
</div>
|
||||
<div style="width:32px;"></div>
|
||||
</header>
|
||||
|
||||
<div class="page-content" style="padding-bottom:80px;">
|
||||
<!-- Tab 筛选 -->
|
||||
<div class="sub-tabs" id="filterTabs" style="border-radius:8px;margin-bottom:12px;">
|
||||
<div class="sub-tab active" data-type="all">全部</div>
|
||||
<div class="sub-tab" data-type="person_safety">人员安全</div>
|
||||
<div class="sub-tab" data-type="equipment_anomaly">设备异常</div>
|
||||
<div class="sub-tab" data-type="environment_risk">环境风险</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表 -->
|
||||
<div id="aiAnalysisList" class="ai-analysis-list"></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="report.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()) {}
|
||||
|
||||
var currentFilter = 'all';
|
||||
|
||||
// 渲染骨架屏
|
||||
function renderSkeleton() {
|
||||
var html = '';
|
||||
for (var i = 0; i < 3; i++) {
|
||||
html += '<div class="skeleton-card">' +
|
||||
'<div class="skeleton-line" style="width:40%;margin-bottom:12px;"></div>' +
|
||||
'<div class="skeleton-line short" style="margin-bottom:6px;"></div>' +
|
||||
'<div class="skeleton-line medium"></div>' +
|
||||
'</div>';
|
||||
}
|
||||
document.getElementById('aiAnalysisList').innerHTML = html;
|
||||
}
|
||||
|
||||
// 渲染空状态
|
||||
function renderEmpty() {
|
||||
document.getElementById('aiAnalysisList').innerHTML =
|
||||
'<div class="empty-state">' +
|
||||
'<i class="ri-robot-line empty-state-icon"></i>' +
|
||||
'<div class="empty-state-text">暂无分析记录</div>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
// 渲染列表
|
||||
function renderList(items) {
|
||||
if (!items || items.length === 0) {
|
||||
renderEmpty();
|
||||
return;
|
||||
}
|
||||
var html = '';
|
||||
items.forEach(function(item) {
|
||||
var typeInfo = getAnalysisTypeInfo(item.analysisType);
|
||||
var confidencePct = Math.round(item.confidence * 100);
|
||||
var timeStr = formatTime(item.triggeredAt);
|
||||
var dateStr = item.triggeredAt.split(' ')[0];
|
||||
html +=
|
||||
'<a href="ai-analysis.html?id=' + item.id + '" class="ai-analysis-card">' +
|
||||
'<div class="ai-analysis-card-header">' +
|
||||
'<div class="ai-analysis-type-badge ' + item.analysisType + '">' +
|
||||
'<i class="' + typeInfo.icon + '"></i>' +
|
||||
'<span>' + typeInfo.label + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="ai-analysis-confidence">' + confidencePct + '%</div>' +
|
||||
'</div>' +
|
||||
'<div class="ai-analysis-device">' + item.deviceName + '</div>' +
|
||||
'<div class="ai-analysis-desc">' + item.description + '</div>' +
|
||||
'<div class="ai-analysis-footer">' +
|
||||
'<div class="ai-analysis-footer-left">' +
|
||||
'<div class="ai-analysis-footer-item">' +
|
||||
'<i class="ri-time-line"></i>' +
|
||||
'<span>' + timeStr + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="ai-analysis-footer-item">' +
|
||||
'<i class="ri-calendar-line"></i>' +
|
||||
'<span>' + dateStr + '</span>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<i class="ri-arrow-right-s-line" style="font-size:18px;color:var(--color-text-secondary);"></i>' +
|
||||
'</div>' +
|
||||
'</a>';
|
||||
});
|
||||
document.getElementById('aiAnalysisList').innerHTML = html;
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
async function loadData() {
|
||||
renderSkeleton();
|
||||
var res = await apiGetAIAnalyses({ type: currentFilter });
|
||||
renderList(res.data.items);
|
||||
}
|
||||
|
||||
// Tab 切换
|
||||
document.getElementById('filterTabs').addEventListener('click', function(e) {
|
||||
var tab = e.target.closest('.sub-tab');
|
||||
if (!tab) return;
|
||||
document.querySelectorAll('.sub-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
tab.classList.add('active');
|
||||
currentFilter = tab.dataset.type;
|
||||
loadData();
|
||||
});
|
||||
|
||||
initTabBar();
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user