feat(h5): add devices list page

2026-04-14 12:28:37 +08:00
parent fbe78450eb
commit 818e385754
1 changed files with 95 additions and 0 deletions
--- a/h5/devices.html
+++ b/h5/devices.html
@@ -0,0 +1,95 @@
+<!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="index.html" class="top-bar-back">‹</a>
+      <h1 class="top-bar-title">设备列表</h1>
+    </header>
+
+    <!-- 子Tab -->
+    <div class="sub-tabs" id="subTabs">
+      <button class="sub-tab active" data-type="">全部</button>
+      <button class="sub-tab" data-type="tower_crane">塔吊</button>
+      <button class="sub-tab" data-type="elevator">升降机</button>
+    </div>
+
+    <!-- 设备卡片网格 -->
+    <div class="device-grid" id="deviceGrid"></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();
+
+    let currentType = '';
+
+    function renderDevices(devices) {
+      const grid = document.getElementById('deviceGrid');
+      if (devices.length === 0) {
+        grid.innerHTML = '<div class="empty-tip">暂无设备</div>';
+        return;
+      }
+      grid.innerHTML = devices.map(d => `
+        <a href="device.html?id=${d.id}" class="device-card">
+          <div class="device-card-header">
+            <span class="device-card-icon">${getDeviceIcon(d.type)}</span>
+            <span class="device-card-status ${getStatusClass(d.status)}"></span>
+          </div>
+          <div class="device-card-name">${d.name}</div>
+          <div class="device-card-model">${d.model}</div>
+          <div class="device-card-location">📍 ${d.location}</div>
+        </a>
+      `).join('');
+    }
+
+    async function loadDevices(type = '') {
+      currentType = type;
+      const res = await apiGetDevices({ type });
+      renderDevices(res.data.items);
+    }
+
+    // 子Tab点击事件
+    document.getElementById('subTabs').addEventListener('click', e => {
+      const tab = e.target.closest('.sub-tab');
+      if (!tab) return;
+      document.querySelectorAll('.sub-tab').forEach(t => t.classList.remove('active'));
+      tab.classList.add('active');
+      loadDevices(tab.dataset.type);
+    });
+
+    loadDevices();
+  </script>
+</body>
+</html>