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动画用于待处理状态指示
285 lines
8.4 KiB
HTML
285 lines
8.4 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>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>
|