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动画用于待处理状态指示
190 lines
7.4 KiB
HTML
190 lines
7.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>设备详情</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">
|
|
<a href="devices.html" class="page-hd__back">
|
|
<i class="ri-arrow-left-s-line"></i>
|
|
</a>
|
|
<div class="page-hd__title" id="pageTitle">设备详情</div>
|
|
<span class="page-hd__empty"></span>
|
|
</header>
|
|
|
|
<div class="page-bd">
|
|
<!-- 基本信息卡片 weui-panel -->
|
|
<div class="weui-panel">
|
|
<div class="weui-panel__bd">
|
|
<div class="device-info">
|
|
<div class="device-info-left">
|
|
<div class="device-info-icon" id="deviceIcon">
|
|
<i class="ri-hammer-line" style="font-size: 48px;"></i>
|
|
</div>
|
|
<div class="device-info-text">
|
|
<div class="device-info-name" id="deviceName">加载中...</div>
|
|
<div class="device-info-model" id="deviceModel">-</div>
|
|
<div class="device-info-location" id="deviceLocation">
|
|
<i class="ri-map-pin-line"></i>
|
|
<span id="locationText">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="device-info-right">
|
|
<span class="weui-badge" id="statusBadge">-</span>
|
|
<div class="device-last-seen" id="lastSeen">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 告警Banner -->
|
|
<div class="alert-banner hidden" id="alertBanner">
|
|
<i class="alert-banner-icon" id="alertIcon"></i>
|
|
<span class="alert-banner-msg" id="alertMsg"></span>
|
|
</div>
|
|
|
|
<!-- 实时数据卡片 weui-panel -->
|
|
<div class="weui-panel">
|
|
<div class="weui-panel__hd">实时数据</div>
|
|
<div class="weui-panel__bd">
|
|
<div class="data-grid" id="dataGrid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 刷新栏 -->
|
|
<div class="refresh-bar">
|
|
<span class="refresh-time" id="refreshTime">更新时间: --:--</span>
|
|
<button class="btn btn-secondary btn-sm" id="refreshBtn">
|
|
<i class="ri-refresh-line"></i>
|
|
<span>刷新</span>
|
|
</button>
|
|
</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 active">
|
|
<i class="ri-archive-fill 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>
|
|
requireAuth();
|
|
|
|
// 塔吊数据项配置
|
|
const TOWER_CRANE_FIELDS = [
|
|
{ key: 'weight', label: '载重', unit: 't' },
|
|
{ key: 'windSpeed', label: '风速', unit: 'm/s' },
|
|
{ key: 'range', label: '幅度', unit: 'm' },
|
|
{ key: 'height', label: '起升高度', unit: 'm' },
|
|
{ key: 'angle', label: '回转角度', unit: '°' },
|
|
{ key: 'momentPercent', label: '力矩百分比', unit: '%' }
|
|
];
|
|
|
|
// 升降机数据项配置
|
|
const ELEVATOR_FIELDS = [
|
|
{ key: 'realtimeWeight', label: '载重', unit: 't' },
|
|
{ key: 'realtimeSpeed', label: '运行速度', unit: 'm/s' },
|
|
{ key: 'realtimeHeight', label: '当前楼层', unit: 'm' },
|
|
{ key: 'realtimeDipX', label: 'X轴倾角', unit: '°' },
|
|
{ key: 'realtimeDipY', label: 'Y轴倾角', unit: '°' },
|
|
{ key: 'outDoorStatus', label: '门状态', unit: '' }
|
|
];
|
|
|
|
const DOOR_STATUS_MAP = { '0': '关闭', '1': '打开' };
|
|
|
|
const id = getQueryParam('id');
|
|
if (!id) location.href = 'devices.html';
|
|
let deviceInfo = null;
|
|
|
|
function renderRealtime(data, type) {
|
|
const dataGrid = document.getElementById('dataGrid');
|
|
const alertBanner = document.getElementById('alertBanner');
|
|
const fields = type === 'tower_crane' ? TOWER_CRANE_FIELDS : ELEVATOR_FIELDS;
|
|
|
|
dataGrid.innerHTML = fields.map(f => {
|
|
let val = f.key === 'outDoorStatus' ? DOOR_STATUS_MAP[data[f.key]] || data[f.key] : data[f.key];
|
|
return `<div class="data-item"><div class="data-label">${f.label}</div><div class="data-value">${val}<span class="data-unit">${f.unit}</span></div></div>`;
|
|
}).join('');
|
|
|
|
if (data.alert && data.alertMsg) {
|
|
alertBanner.classList.remove('hidden');
|
|
alertBanner.className = 'alert-banner alert-' + data.alert;
|
|
const alertIcon = document.getElementById('alertIcon');
|
|
if (data.alert === 'danger') {
|
|
alertIcon.className = 'alert-banner-icon ri-error-warning-line';
|
|
} else {
|
|
alertIcon.className = 'alert-banner-icon ri-alert-line';
|
|
}
|
|
document.getElementById('alertMsg').textContent = data.alertMsg;
|
|
} else {
|
|
alertBanner.classList.add('hidden');
|
|
}
|
|
|
|
const now = new Date();
|
|
const hours = String(now.getHours()).padStart(2, '0');
|
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
document.getElementById('refreshTime').textContent = '更新时间: ' + hours + ':' + minutes;
|
|
}
|
|
|
|
async function loadRealtime() {
|
|
const [devRes, rtRes] = await Promise.all([apiGetDevices(), apiGetDeviceRealtime(id)]);
|
|
if (!deviceInfo) {
|
|
deviceInfo = devRes.data.items.find(d => d.id === id);
|
|
if (!deviceInfo) { location.href = 'devices.html'; return; }
|
|
|
|
document.getElementById('pageTitle').textContent = deviceInfo.name;
|
|
document.getElementById('deviceName').textContent = deviceInfo.name;
|
|
document.getElementById('deviceModel').textContent = deviceInfo.model;
|
|
document.getElementById('locationText').textContent = deviceInfo.location;
|
|
|
|
// Set device icon based on type
|
|
const iconEl = document.getElementById('deviceIcon');
|
|
if (deviceInfo.type === 'tower_crane') {
|
|
iconEl.innerHTML = '<i class="ri-hammer-line" style="font-size: 48px;"></i>';
|
|
} else {
|
|
iconEl.innerHTML = '<i class="ri-arrow-up-down-line" style="font-size: 48px;"></i>';
|
|
}
|
|
|
|
// Set status badge
|
|
const badge = document.getElementById('statusBadge');
|
|
badge.textContent = deviceInfo.status === 'online' ? '在线' : '离线';
|
|
badge.className = 'weui-badge ' + (deviceInfo.status === 'online' ? 'weui-badge_success' : 'weui-badge_gray');
|
|
|
|
document.getElementById('lastSeen').textContent = '最后在线: ' + formatTime(deviceInfo.lastSeen);
|
|
}
|
|
renderRealtime(rtRes.data, deviceInfo.type);
|
|
}
|
|
|
|
document.getElementById('refreshBtn').addEventListener('click', loadRealtime);
|
|
loadRealtime();
|
|
setInterval(loadRealtime, 30000);
|
|
</script>
|
|
</body>
|
|
</html>
|