From b2365a9d108454462cf95cc88ec0d3b89546178f Mon Sep 17 00:00:00 2001
From: Jesxion <jesxion@gmail.com>
Date: Tue, 14 Apr 2026 12:35:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E9=9A=90=E6=82=A3?=
 =?UTF-8?q?=E9=9A=8F=E6=89=8B=E6=8B=8D=E9=A1=B5=E9=9D=A2=20report.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 h5/report.html | 206 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 206 insertions(+)
 create mode 100644 h5/report.html
diff --git a/h5/report.html b/h5/report.html
new file mode 100644
index 0000000..40ee187
--- /dev/null
+++ b/h5/report.html
@@ -0,0 +1,206 @@
+<!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="app">
+    <!-- 顶栏 -->
+    <header class="topbar">
+      <a href="javascript:history.back()" class="topbar-back">‹</a>
+      <h1 class="topbar-title">隐患随手拍</h1>
+      <a href="profile.html" class="topbar-user">👤</a>
+    </header>
+
+    <!-- GPS状态栏 -->
+    <div class="gps-bar" id="gpsBar">
+      <span class="gps-icon">📍</span>
+      <span class="gps-text" id="gpsText">正在获取位置...</span>
+    </div>
+
+    <div class="content">
+      <!-- 照片卡片 -->
+      <div class="card">
+        <div class="card-title">现场照片 *</div>
+        <div class="photo-grid" id="photoGrid">
+          <div class="photo-item photo-add" id="addPhotoBtn">+</div>
+        </div>
+        <input type="file" id="photoInput" accept="image/*" capture="environment" multiple style="display:none">
+      </div>
+
+      <!-- 表单卡片 -->
+      <div class="card">
+        <div class="form-item">
+          <label class="form-label">隐患描述 *</label>
+          <textarea id="descInput" class="form-textarea" placeholder="请详细描述隐患情况..." maxlength="200"></textarea>
+          <span class="form-hint"><span id="descCount">0</span>/200</span>
+        </div>
+        <div class="form-item">
+          <label class="form-label">隐患类别 *</label>
+          <select id="categoryInput" class="form-select">
+            <option value="">请选择隐患类别</option>
+            <option value="高空坠落">高空坠落</option>
+            <option value="物体打击">物体打击</option>
+            <option value="机械伤害">机械伤害</option>
+            <option value="触电">触电</option>
+            <option value="坍塌">坍塌</option>
+            <option value="火灾">火灾</option>
+            <option value="其他">其他</option>
+          </select>
+        </div>
+        <div class="form-item">
+          <label class="form-label">严重程度 *</label>
+          <div class="radio-group">
+            <label class="radio-label">
+              <input type="radio" name="severity" value="一般">
+              <span>一般</span>
+            </label>
+            <label class="radio-label">
+              <input type="radio" name="severity" value="较大">
+              <span>较大</span>
+            </label>
+            <label class="radio-label">
+              <input type="radio" name="severity" value="重大">
+              <span>重大</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- 提交按钮 -->
+      <button class="btn-primary" onclick="submitReport()">提交隐患</button>
+    </div>
+
+    <!-- 底部Tab栏 -->
+    <nav class="tab-bar">
+      <a href="index.html" class="tab-item">
+        <span class="tab-icon">🏠</span>
+        <span class="tab-text">首页</span>
+      </a>
+      <a href="devices.html" class="tab-item">
+        <span class="tab-icon">📱</span>
+        <span class="tab-text">设备</span>
+      </a>
+      <a href="report.html" class="tab-item active">
+        <span class="tab-icon">📷</span>
+        <span class="tab-text">随手拍</span>
+      </a>
+      <a href="log.html" class="tab-item">
+        <span class="tab-icon">📋</span>
+        <span class="tab-text">日志</span>
+      </a>
+    </nav>
+  </div>
+
+  <script src="js/mock.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/api.js"></script>
+  <script>
+    let photos = [];
+    let gpsData = null;
+
+    // GPS初始化
+    function initGPS() {
+      if (!navigator.geolocation) {
+        document.getElementById('gpsText').textContent = '定位不可用';
+        return;
+      }
+      navigator.geolocation.getCurrentPosition(
+        pos => {
+          gpsData = { lat: pos.coords.latitude, lng: pos.coords.longitude };
+          document.getElementById('gpsBar').classList.add('active');
+          document.getElementById('gpsText').textContent = `${gpsData.lat.toFixed(4)}, ${gpsData.lng.toFixed(4)}`;
+        },
+        () => {
+          document.getElementById('gpsText').textContent = '定位失败，请检查权限';
+        }
+      );
+    }
+
+    // 渲染照片
+    function renderPhotos() {
+      const grid = document.getElementById('photoGrid');
+      const addBtn = '<div class="photo-item photo-add" id="addPhotoBtn">+</div>';
+      grid.innerHTML = photos.map((p, i) => `
+        <div class="photo-item" style="position:relative">
+          <img src="${p.dataUrl}" alt="照片${i+1}">
+          <div class="photo-remove" onclick="removePhoto(${i})">×</div>
+        </div>
+      `).join('') + (photos.length < 9 ? addBtn : '');
+      document.getElementById('addPhotoBtn')?.addEventListener('click', () => document.getElementById('photoInput').click());
+    }
+
+    // 添加照片按钮事件
+    document.getElementById('addPhotoBtn').addEventListener('click', () => document.getElementById('photoInput').click());
+
+    // 照片选择事件
+    document.getElementById('photoInput').addEventListener('change', e => {
+      Array.from(e.target.files).forEach(file => {
+        const reader = new FileReader();
+        reader.onload = ev => {
+          photos.push({ file, dataUrl: ev.target.result });
+          renderPhotos();
+        };
+        reader.readAsDataURL(file);
+      });
+      e.target.value = '';
+    });
+
+    // 删除照片
+    function removePhoto(index) {
+      photos.splice(index, 1);
+      renderPhotos();
+    }
+
+    // 描述字数统计
+    document.getElementById('descInput').addEventListener('input', function() {
+      document.getElementById('descCount').textContent = this.value.length;
+    });
+
+    // 提交隐患
+    async function submitReport() {
+      const desc = document.getElementById('descInput').value.trim();
+      const category = document.getElementById('categoryInput').value;
+      const severity = document.querySelector('input[name="severity"]:checked')?.value;
+
+      if (photos.length === 0) {
+        showToast('请拍摄现场照片');
+        return;
+      }
+      if (!desc) {
+        showToast('请填写隐患描述');
+        return;
+      }
+      if (!category) {
+        showToast('请选择隐患类别');
+        return;
+      }
+      if (!severity) {
+        showToast('请选择严重程度');
+        return;
+      }
+
+      try {
+        const result = await apiSubmitReport({
+          photos: photos.map(p => p.dataUrl),
+          description: desc,
+          category: category,
+          severity: severity,
+          location: gpsData
+        });
+        showToast('提交成功');
+        location.reload();
+      } catch (e) {
+        showToast('提交失败，请重试');
+      }
+    }
+
+    // 初始化
+    requireAuth();
+    initGPS();
+  </script>
+</body>
+</html>
