157 lines
6.2 KiB
HTML
157 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>设备详情</title>
|
||
<link rel="stylesheet" href="css/variables.css">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<!-- 顶栏 -->
|
||
<header class="top-bar">
|
||
<a href="devices.html" class="top-bar-back">‹</a>
|
||
<h1 class="top-bar-title" id="pageTitle">设备详情</h1>
|
||
<span class="top-bar-empty"></span>
|
||
</header>
|
||
|
||
<!-- 页面内容 -->
|
||
<div class="page-content">
|
||
<!-- 基本信息卡片 -->
|
||
<div class="card" id="infoCard">
|
||
<div class="device-info">
|
||
<div class="device-info-left">
|
||
<span class="device-info-icon" id="deviceIcon">🏗️</span>
|
||
<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">-</div>
|
||
</div>
|
||
</div>
|
||
<div class="device-info-right">
|
||
<span class="device-status-badge" id="statusBadge">-</span>
|
||
<div class="device-last-seen" id="lastSeen">-</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 告警Banner -->
|
||
<div class="alert-banner hidden" id="alertBanner">
|
||
<span class="alert-banner-icon" id="alertIcon">⚠️</span>
|
||
<span class="alert-banner-msg" id="alertMsg"></span>
|
||
</div>
|
||
|
||
<!-- 实时数据卡片 -->
|
||
<div class="card">
|
||
<div class="card-title">实时数据</div>
|
||
<div class="data-grid" id="dataGrid"></div>
|
||
</div>
|
||
|
||
<!-- 刷新栏 -->
|
||
<div class="refresh-bar">
|
||
<span class="refresh-time" id="refreshTime">-</span>
|
||
<button class="btn btn-secondary btn-sm" id="refreshBtn">手动刷新</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部Tab栏 -->
|
||
<nav class="tab-bar">
|
||
<a href="index.html" class="tab-item">
|
||
<span class="tab-icon">🏠</span>
|
||
<span class="tab-label">首页</span>
|
||
</a>
|
||
<a href="devices.html" class="tab-item active">
|
||
<span class="tab-icon">📋</span>
|
||
<span class="tab-label">设备</span>
|
||
</a>
|
||
<a href="capture.html" class="tab-item">
|
||
<span class="tab-icon">📷</span>
|
||
<span class="tab-label">随手拍</span>
|
||
</a>
|
||
<a href="log.html" class="tab-item">
|
||
<span class="tab-icon">📝</span>
|
||
<span class="tab-label">日志</span>
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<script src="js/variables.js"></script>
|
||
<script src="js/api.js"></script>
|
||
<script src="js/mock.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: '层' },
|
||
{ key: 'realtimeDipX', label: 'X轴倾角', unit: '°' },
|
||
{ key: 'realtimeDipY', label: 'Y轴倾角', unit: '°' },
|
||
{ key: 'outDoorStatus', label: '门状态', unit: '' }
|
||
];
|
||
|
||
const DOOR_STATUS_MAP = { '0': '关闭', '1': '打开' };
|
||
|
||
const id = getQueryParam('id');
|
||
const deviceId = id; // alias for clarity
|
||
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;
|
||
alertBanner.querySelector('.alert-banner-icon').textContent = data.alert === 'danger' ? '🔴' : '🟡';
|
||
alertBanner.querySelector('.alert-banner-msg').textContent = data.alertMsg;
|
||
} else {
|
||
alertBanner.classList.add('hidden');
|
||
}
|
||
document.getElementById('refreshTime').textContent = '刷新时间: ' + formatTime(new Date().toLocaleString('zh-CN'));
|
||
}
|
||
|
||
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('deviceIcon').textContent = getDeviceIcon(deviceInfo.type);
|
||
document.getElementById('deviceName').textContent = deviceInfo.name;
|
||
document.getElementById('deviceModel').textContent = deviceInfo.model;
|
||
document.getElementById('deviceLocation').textContent = '📍 ' + deviceInfo.location;
|
||
document.getElementById('statusBadge').textContent = getStatusText(deviceInfo.status);
|
||
document.getElementById('statusBadge').className = 'device-status-badge ' + getStatusClass(deviceInfo.status);
|
||
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>
|