Create construction log list page (h5/logs.html)

2026-04-14 12:35:01 +08:00
parent 2d2ee1bd8b
commit 36d8520c30
1 changed files with 79 additions and 0 deletions
--- a/h5/logs.html
+++ b/h5/logs.html
@@ -0,0 +1,79 @@
+<!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 id="logList"></div>
+    </div>
+
+    <!-- 悬浮写日志按钮 -->
+    <a href="log.html" class="fab-btn">✏️</a>
+
+    <!-- 底部Tab栏 -->
+    <nav class="tab-bar">
+      <a href="index.html" class="tab-item">
+        <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 active">
+        <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()) {}
+
+    function renderLogs(logs) {
+      const list = document.getElementById('logList');
+      if (logs.length === 0) {
+        list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📋</div><div class="empty-state-text">暂无日志</div></div>';
+        return;
+      }
+      const equipText = { tower_crane: '塔吊', elevator: '升降机' };
+      list.innerHTML = logs.map(log => `
+        <div class="log-item" onclick="location.href='log.html?id=${log.id}'">
+          <div class="log-date">📅 ${log.date}</div>
+          <div class="log-content">${log.content.substring(0, 50)}${log.content.length > 50 ? '...' : ''}</div>
+          <div class="log-meta">${log.part} · ${log.workers}人出勤${log.equipment.length ? ' · ' + log.equipment.map(e => equipText[e] || e).join(', ') : ''}</div>
+        </div>
+      `).join('');
+    }
+
+    async function loadLogs() {
+      const res = await apiGetLogs();
+      renderLogs(res.data.items);
+    }
+
+    loadLogs();
+  </script>
+</body>
+</html>