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动画用于待处理状态指示
280 lines
8.0 KiB
HTML
280 lines
8.0 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>
|
|
/* 详情页专用 */
|
|
.detail-header {
|
|
padding: 16px;
|
|
background: var(--color-card);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.detail-type-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.detail-type-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.detail-type-badge.person_safety {
|
|
background: rgba(249, 115, 22, 0.12);
|
|
color: var(--color-danger);
|
|
}
|
|
.detail-type-badge.equipment_anomaly,
|
|
.detail-type-badge.environment_risk {
|
|
background: rgba(234, 179, 8, 0.12);
|
|
color: var(--color-warning);
|
|
}
|
|
.detail-type-badge.other {
|
|
background: rgba(156, 163, 175, 0.12);
|
|
color: var(--color-offline);
|
|
}
|
|
|
|
.detail-confidence {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--color-primary);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.detail-device-name {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.detail-device-model {
|
|
font-size: 13px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.detail-info-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1px;
|
|
background: var(--color-border);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.detail-info-item {
|
|
background: var(--color-card);
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.detail-info-label {
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.detail-info-value {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.detail-section {
|
|
background: var(--color-card);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.detail-section-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--color-primary);
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.detail-section-title svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.detail-section-text {
|
|
font-size: 14px;
|
|
color: var(--color-text);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.detail-measures {
|
|
background: rgba(249, 115, 22, 0.06);
|
|
border: 1px solid rgba(249, 115, 22, 0.2);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.detail-measures-text {
|
|
font-size: 14px;
|
|
color: var(--color-danger);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.detail-meta-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
padding: 12px 16px;
|
|
background: var(--color-bg);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.detail-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.detail-meta-item svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.skeleton-detail .skeleton-line {
|
|
height: 14px;
|
|
background: var(--color-border);
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
@keyframes skeleton-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<!-- 顶栏 -->
|
|
<header class="header">
|
|
<a href="ai-analyses.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:30px;">
|
|
<!-- 加载骨架 -->
|
|
<div id="skeletonView" class="skeleton-detail">
|
|
<div style="background:var(--color-card);border-radius:12px;padding:16px;margin-bottom:12px;">
|
|
<div class="skeleton-line" style="width:40%;margin-bottom:14px;"></div>
|
|
<div class="skeleton-line" style="width:60%;margin-bottom:6px;"></div>
|
|
<div class="skeleton-line short"></div>
|
|
</div>
|
|
<div style="background:var(--color-card);border-radius:12px;padding:16px;margin-bottom:12px;">
|
|
<div class="skeleton-line" style="width:80%;margin-bottom:6px;"></div>
|
|
<div class="skeleton-line medium"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 详情内容 -->
|
|
<div id="detailView" style="display:none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/mock.js"></script>
|
|
<script src="js/api.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script>
|
|
if (!requireAuth()) {}
|
|
|
|
var analysisId = getQueryParam('id');
|
|
|
|
async function loadDetail() {
|
|
if (!analysisId) {
|
|
document.getElementById('skeletonView').innerHTML =
|
|
'<div class="empty-state"><div class="empty-state-text">参数错误</div></div>';
|
|
return;
|
|
}
|
|
var res = await apiGetAIAnalysisDetail(analysisId);
|
|
var item = res.data;
|
|
if (!item) {
|
|
document.getElementById('skeletonView').innerHTML =
|
|
'<div class="empty-state"><div class="empty-state-text">记录不存在</div></div>';
|
|
return;
|
|
}
|
|
var typeInfo = getAnalysisTypeInfo(item.analysisType);
|
|
var confidencePct = Math.round(item.confidence * 100);
|
|
var device = getDeviceById(item.deviceId) || {};
|
|
var timeStr = formatTime(item.triggeredAt);
|
|
var dateStr = item.triggeredAt.split(' ')[0];
|
|
|
|
document.getElementById('skeletonView').style.display = 'none';
|
|
document.getElementById('detailView').style.display = 'block';
|
|
document.getElementById('detailView').innerHTML =
|
|
'<div class="detail-header">' +
|
|
'<div class="detail-type-row">' +
|
|
'<div class="detail-type-badge ' + item.analysisType + '">' +
|
|
'<i class="' + typeInfo.icon + '"></i>' +
|
|
'<span>' + typeInfo.label + '</span>' +
|
|
'</div>' +
|
|
'<div class="detail-confidence">置信度 ' + confidencePct + '%</div>' +
|
|
'</div>' +
|
|
'<div class="detail-device-name">' + item.deviceName + '</div>' +
|
|
'<div class="detail-device-model">' + (device.model || item.deviceType) + '</div>' +
|
|
'</div>' +
|
|
|
|
'<div class="detail-info-grid">' +
|
|
'<div class="detail-info-item">' +
|
|
'<div class="detail-info-label">设备位置</div>' +
|
|
'<div class="detail-info-value">' + (device.location || '—') + '</div>' +
|
|
'</div>' +
|
|
'<div class="detail-info-item">' +
|
|
'<div class="detail-info-label">触发时间</div>' +
|
|
'<div class="detail-info-value">' + dateStr + ' ' + timeStr + '</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
|
|
'<div class="detail-section">' +
|
|
'<div class="detail-section-title">' +
|
|
'<i class="ri-robot-line"></i>' +
|
|
'AI 分析描述' +
|
|
'</div>' +
|
|
'<div class="detail-section-text">' + item.description + '</div>' +
|
|
'</div>' +
|
|
|
|
'<div class="detail-section">' +
|
|
'<div class="detail-section-title" style="color:var(--color-danger);">' +
|
|
'<i class="ri-lightbulb-line"></i>' +
|
|
'建议措施' +
|
|
'</div>' +
|
|
'<div class="detail-measures">' +
|
|
'<div class="detail-measures-text">' + item.measures + '</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
loadDetail();
|
|
</script>
|
|
</body>
|
|
</html>
|