132 lines
4.7 KiB
HTML
132 lines
4.7 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="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<!-- 顶栏 -->
|
||
<header class="header">
|
||
<div class="header-title">
|
||
<span>郑州智慧工地</span>
|
||
</div>
|
||
<a href="profile.html" class="header-right">
|
||
<span>👤</span>
|
||
</a>
|
||
</header>
|
||
|
||
<div class="page-content">
|
||
<!-- 设备概况卡片 -->
|
||
<div class="card">
|
||
<div class="card-title">设备概况</div>
|
||
<div class="stat-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-label">塔吊统计</div>
|
||
<div class="stat-value" id="tcCount">--</div>
|
||
<div class="stat-sub">在线 <span id="tcOnline">--</span> 台</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">升降机统计</div>
|
||
<div class="stat-value" id="elCount">--</div>
|
||
<div class="stat-sub">在线 <span id="elOnline">--</span> 台</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 今日预警卡片 -->
|
||
<div class="card">
|
||
<div class="card-title">今日预警</div>
|
||
<div class="stat-grid">
|
||
<div class="stat-card" style="border-left: 3px solid #f97316;">
|
||
<div class="stat-label">危险</div>
|
||
<div class="stat-value" id="dangerCount" style="color: #f97316;">--</div>
|
||
</div>
|
||
<div class="stat-card" style="border-left: 3px solid #eab308;">
|
||
<div class="stat-label">警告</div>
|
||
<div class="stat-value" id="warningCount" style="color: #eab308;">--</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 最新预警卡片 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title" style="margin-bottom: 0; padding-bottom: 0; border-bottom: none;">最新预警</div>
|
||
<a href="alerts.html" class="card-link">查看全部 ›</a>
|
||
</div>
|
||
<div id="latestAlerts"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部Tab栏 -->
|
||
<nav class="tab-bar">
|
||
<a href="index.html" class="tab-item active">
|
||
<span>🏠</span>
|
||
<span>首页</span>
|
||
</a>
|
||
<a href="devices.html" class="tab-item">
|
||
<span>🏗️</span>
|
||
<span>设备</span>
|
||
</a>
|
||
<a href="report.html" class="tab-item">
|
||
<span>📷</span>
|
||
<span>随手拍</span>
|
||
</a>
|
||
<a href="logs.html" class="tab-item">
|
||
<span>📋</span>
|
||
<span>日志</span>
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<script src="js/mock.js"></script>
|
||
<script src="js/app.js"></script>
|
||
<script src="js/api.js"></script>
|
||
<script>
|
||
if (!requireAuth()) {}
|
||
|
||
async function loadDashboard() {
|
||
const [devRes, alertRes] = await Promise.all([apiGetDevices(), apiGetAlerts()]);
|
||
|
||
// 统计塔吊/升降机数量和在线数
|
||
const devices = devRes.data.items;
|
||
const tcDevices = devices.filter(d => d.type === 'tower_crane');
|
||
const elDevices = devices.filter(d => d.type === 'elevator');
|
||
document.getElementById('tcCount').textContent = tcDevices.length;
|
||
document.getElementById('tcOnline').textContent = tcDevices.filter(d => d.status === 'online').length;
|
||
document.getElementById('elCount').textContent = elDevices.length;
|
||
document.getElementById('elOnline').textContent = elDevices.filter(d => d.status === 'online').length;
|
||
|
||
// 统计危险/警告未读数
|
||
const alerts = alertRes.data.items;
|
||
const dangerCount = alerts.filter(a => a.level === 'danger' && a.status === 'unread').length;
|
||
const warningCount = alerts.filter(a => a.level === 'warning' && a.status === 'unread').length;
|
||
document.getElementById('dangerCount').textContent = dangerCount;
|
||
document.getElementById('warningCount').textContent = warningCount;
|
||
|
||
// 渲染最新3条预警到latestAlerts
|
||
const latestAlertsEl = document.getElementById('latestAlerts');
|
||
const latest3 = alerts.slice(0, 3);
|
||
latestAlertsEl.innerHTML = latest3.map(alert => {
|
||
const icon = getAlertIcon(alert.level);
|
||
const time = formatTime(alert.createdAt);
|
||
return `
|
||
<a href="alert.html?id=${alert.id}" class="alert-item">
|
||
<div class="alert-icon ${alert.level}">${icon}</div>
|
||
<div class="alert-content">
|
||
<div class="alert-title">${alert.message}</div>
|
||
<div class="alert-desc">${alert.deviceName} · ${time}</div>
|
||
</div>
|
||
</a>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
loadDashboard();
|
||
</script>
|
||
</body>
|
||
</html>
|