<!doctype html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<title>JH2028 设备中央监测大屏</title>
|
<link rel="stylesheet" href="./styles.css">
|
</head>
|
<body>
|
<main class="shell">
|
<header class="topbar">
|
<div>
|
<p class="eyebrow">JH2028 TCP Gateway</p>
|
<h1 id="dashboard-title">设备中央监测大屏</h1>
|
</div>
|
<div class="clock">
|
<span id="now-time">--:--:--</span>
|
<small id="refresh-time">等待数据</small>
|
</div>
|
</header>
|
|
<section class="summary" aria-label="设备总览">
|
<article class="summary-item online">
|
<span>在线设备</span>
|
<strong id="online-count">0</strong>
|
</article>
|
<article class="summary-item offline">
|
<span>离线设备</span>
|
<strong id="offline-count">0</strong>
|
</article>
|
<article class="summary-item active">
|
<span>数据正常</span>
|
<strong id="active-count">0</strong>
|
</article>
|
<article class="summary-item stale">
|
<span>等待/超时</span>
|
<strong id="stale-count">0</strong>
|
</article>
|
</section>
|
|
<section class="layout">
|
<section class="device-list" aria-label="设备列表">
|
<div class="section-head">
|
<h2>设备连接状态</h2>
|
<span id="device-total">0 台设备</span>
|
</div>
|
<div id="device-list" class="device-grid"></div>
|
</section>
|
|
<section class="detail" aria-label="设备数据详情">
|
<div class="section-head">
|
<h2 id="detail-title">设备数据状态</h2>
|
<span id="detail-state">未选择</span>
|
</div>
|
<div id="detail-body" class="detail-body empty">
|
<p>等待设备数据接入</p>
|
</div>
|
</section>
|
</section>
|
</main>
|
|
<script src="./app.js"></script>
|
</body>
|
</html>
|
