# H5 页面结构与交互设计 > 状态: 设计中 --- ## 1. 技术选型 | 项目 | 选型 | |------|------| | 页面渲染 | 原生 HTML5 + CSS3 + Vanilla JS | | UI 框架 | 无，响应式布局手工实现 | | 图表 | ECharts（CDN 引入） | | 字体图标 | 阿里巴巴矢量图标库（iconfont） | | 构建 | 无构建步骤，单 HTML 文件按模块拆分 | **设计原则**： - 移动端优先（适配 375px ~ 414px 宽度） - 低依赖，不依赖任何 JS 框架 - 离线可缓存核心资产（Service Worker） --- ## 2. 页面清单 | 页面 | 路由 | 说明 | |------|------|------| | 登录 | `/login.html` | 账号密码登录 | | 首页仪表盘 | `/index.html` | 设备统计、预警统计、快捷入口 | | 设备列表 | `/devices.html` | 塔吊/升降机分类列表 | | 设备详情 | `/device.html?id=xxx` | 实时数据 + 历史曲线 | | 预警列表 | `/alerts.html` | 预警推送列表 | | 预警详情 | `/alert.html?id=xxx` | 预警详情 + 处理操作 | | 隐患随手拍 | `/report.html` | 拍照 + 表单提交 | | 隐患列表 | `/reports.html` | 项目内隐患列表，状态/类别/严重程度筛选 | | 隐患详情 | `/report.html?id=xxx` | 隐患详情 + 认领/处理操作 | | 日志列表 | `/logs.html` | 列表 + 日期筛选 | | 写日志 | `/log.html` | 新建日志（含照片上传） | | 日志详情 | `/log.html?id=xxx` | 查看日志详情 | | AI 分析列表 | `/ai-analyses.html` | AI 分析结果列表，类型筛选 | | AI 分析详情 | `/ai-analysis.html?id=xxx` | 分析详情 + 建议措施 | | 个人中心 | `/profile.html` | 个人信息、设置 | --- ## 3. 页面结构 ### 3.1 首页仪表盘 `/index.html` ``` ┌──────────────────────────────────────┐ │ ☰ 郑州智慧工地 [👤 个人中心] │ ← 顶栏 ├──────────────────────────────────────┤ │ │ │ ┌────────────┐ ┌────────────┐ │ │ │ 塔吊 │ │ 升降机 │ │ ← 设备数量卡片 │ │ 12 台 │ │ 8 台 │ │ │ │ 12 在线 │ │ 8 在线 │ │ │ └────────────┘ └────────────┘ │ │ │ │ ┌──────────────────────────────┐ │ │ │ 今日预警 │ │ ← 预警统计卡片 │ │ 危险 2 警告 5 │ │ │ └──────────────────────────────┘ │ │ │ │ 最新预警 │ │ ┌──────────────────────────────┐ │ │ │ 🔴 1号塔吊 载重超限 │ │ ← 预警列表（最新5条） │ │ 10:25 │ │ │ ├──────────────────────────────┤ │ │ │ 🟡 3号升降机 风速过大 │ │ │ │ 10:20 │ │ │ └──────────────────────────────┘ │ │ │ │ [查看全部预警] │ │ │ └──────────────────────────────────────┘ ``` ### 3.2 设备列表 `/devices.html` ``` ┌──────────────────────────────────────┐ │ ☰ 设备列表 [筛选 ▼] │ ├──────────────────────────────────────┤ │ [全部] [塔吊] [升降机] │ ← Tab 切换 ├──────────────────────────────────────┤ │ │ │ ┌──────────────────────────────┐ │ │ │ 🏗️ 1号塔吊 🟢 在线 │ │ ← 设备卡片 │ │ QTZ500 | A区施工现场 │ │ │ │ 最后在线: 10:30 │ │ │ └──────────────────────────────┘ │ │ │ │ ┌──────────────────────────────┐ │ │ │ 🏗️ 2号塔吊 ⚫ 离线 │ │ │ │ QTZ500 | B区施工现场 │ │ │ │ 最后离线: 04-13 18:00 │ │ │ └──────────────────────────────┘ │ │ │ └──────────────────────────────────────┘ ``` ### 3.3 设备详情 `/device.html` ``` ┌──────────────────────────────────────┐ │ ← 返回 1号塔吊 │ ├──────────────────────────────────────┤ │ │ │ ┌──────────────────────────────┐ │ │ │ 实时数据面板 │ │ ← 关键指标卡片 │ │ 载重 幅度 起升高度 │ │ │ │ 45.2kN 30.5m 85.0m │ │ │ │ │ │ │ │ 风速 力矩 回转角度 │ │ │ │ 5.2m/s 320.5 120.5° │ │ │ │ │ │ │ │ ⚠️ 载重超限 │ │ ← 告警状态 │ └──────────────────────────────┘ │ │ │ │ 历史趋势（最近24小时） │ │ ┌──────────────────────────────┐ │ │ │ 📈 ECharts 折线图 │ │ ← ECharts 图表 │ │ 载重 / 幅度 / 风速 曲线 │ │ │ └──────────────────────────────┘ │ │ │ │ [ 刷新 ] │ │ │ └──────────────────────────────────────┘ ``` ### 3.4 预警列表 `/alerts.html` ``` ┌──────────────────────────────────────┐ │ 预警中心 [筛选 ▼] │ ├──────────────────────────────────────┤ │ [全部] [危险] [警告] [已处理] │ ← Tab 筛选 ├──────────────────────────────────────┤ │ │ │ ┌──────────────────────────────┐ │ │ │ 🔴 载重超限 │ │ ← 危险预警（红色） │ │ 1号塔吊 | 2026-04-14 10:25 │ │ │ │ 当前45.2kN，超过额定40kN │ │ │ └──────────────────────────────┘ │ │ │ │ ┌──────────────────────────────┐ │ │ │ 🟡 风速过大 │ │ ← 警告预警（黄色） │ │ 3号升降机 | 2026-04-14 10:20 │ │ │ │ 当前8.5m/s，超过阈值6m/s │ │ │ └──────────────────────────────┘ │ │ │ └──────────────────────────────────────┘ ``` ### 3.5 预警详情 `/alert.html` ``` ┌──────────────────────────────────────┐ │ ← 返回 预警详情 │ ├──────────────────────────────────────┤ │ │ │ 🔴 危险 │ │ │ │ 载重超限 │ │ │ │ 设备: 1号塔吊（QTZ500） │ │ 位置: A区施工现场 │ │ 时间: 2026-04-14 10:25:00 │ │ │ │ 当前载重: 45.2 kN │ │ 额定载重: 40.0 kN（阈值） │ │ 超限幅度: 13% │ │ │ │ ┌──────────────────────────────┐ │ │ │ 处理方式: │ │ │ │ │ │ │ │ [确认处理] [忽略] │ │ ← 操作按钮 │ │ │ │ │ │ 备注: ____________________ │ │ │ │ │ │ │ │ [提交] │ │ │ └──────────────────────────────┘ │ │ │ └──────────────────────────────────────┘ ``` ### 3.6 个人中心 `/profile.html` ``` ┌──────────────────────────────────────┐ │ ← 返回 个人中心 │ ├──────────────────────────────────────┤ │ │ │ ┌──────────┐ │ │ │ 👤 │ │ │ └──────────┘ │ │ 张三（安全员） │ │ 138****1234 │ │ │ │ ┌──────────────────────────────┐ │ │ │ 📊 预警接收设置 │ │ │ │ [ ] 危险预警推送 │ │ │ │ [ ] 警告预警推送 │ │ │ │ [x] 短信通知 │ │ │ └──────────────────────────────┘ │ │ │ │ ┌──────────────────────────────┐ │ │ │ 🔔 消息推送设置 │ │ │ └──────────────────────────────┘ │ │ │ │ ┌──────────────────────────────┐ │ │ │ 🔐 修改密码 │ │ │ └──────────────────────────────┘ │ │ │ │ [退出登录] │ │ │ └──────────────────────────────────────┘ ``` ### 3.7 隐患随手拍 `/report.html` ``` ┌──────────────────────────────────────┐ │ ← 返回 上报隐患 │ ├──────────────────────────────────────┤ │ │ │ ┌──────────────────────────────┐ │ │ │ │ │ │ │ 📷 点击拍照 │ │ ← 拍照区 │ │ （最多 4 张） │ │ │ └──────────────────────────────┘ │ │ │ │ 隐患类别 * │ │ ┌──────────────────────────────┐ │ │ │ 请选择类别 ▼ │ │ ← 下拉选择 │ └──────────────────────────────┘ │ │ 高处坠落 / 物体打击 / 机械伤害 ... │ │ │ │ 严重程度 * │ │ ○ 一般 ○ 较大 ○ 重大 │ ← 单选 │ │ │ 隐患描述 * │ │ ┌──────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ └──────────────────────────────┘ │ │ │ │ GPS 坐标: 34.7652, 113.6241 │ │ ← 自动获取（可关闭） │ │ │ [提交隐患] │ │ │ └──────────────────────────────────────┘ ``` **表单字段**：category / severity / description（必填）；photos / gps_lat / gps_lng（选填） ### 3.8 隐患列表 `/reports.html` ``` ┌──────────────────────────────────────┐ │ ☰ 隐患随手拍 [筛选 ▼] │ ├──────────────────────────────────────┤ │ [全部] [待处理] [处理中] [已处理] │ ← Tab 状态筛选 ├──────────────────────────────────────┤ │ │ │ ┌──────────────────────────────┐ │ │ │ 🔴 一般 高处坠落 │ │ ← 红色=待处理 │ │ A区2楼临边防护缺失 │ │ │ │ 安全员 · 2小时前 │ │ │ └──────────────────────────────┘ │ │ │ │ ┌──────────────────────────────┐ │ │ │ 🟡 较大 机械伤害 │ │ ← 黄色=处理中 │ │ B区钢筋加工区缺防护罩 │ │ │ │ 安全负责人 · 昨天 │ │ │ └──────────────────────────────┘ │ │ │ │ ┌──────────────────────────────┐ │ │ │ 🟢 一般 物体打击 │ │ ← 绿色=已处理 │ │ C区材料堆放过高 │ │ │ │ 安全员 · 04-13 │ │ │ └──────────────────────────────┘ │ │ │ │ [+ 上报隐患] │ ← 悬浮按钮 └──────────────────────────────────────┘ ``` ### 3.9 隐患详情 `/report.html?id=xxx` ``` ┌──────────────────────────────────────┐ │ ← 返回 隐患详情 │ ├──────────────────────────────────────┤ │ │ │ 🔴 一般 │ │ 高处坠落 │ │ │ │ A区2楼临边防护缺失 │ │ │ │ ┌────┐ ┌────┐ │ │ │ 📷 │ │ 📷 │ │ ← 照片 │ └────┘ └────┘ │ │ │ │ 位置: 34.7652, 113.6241 │ │ │ │ ── 流程 ────────────────────────── │ │ │ │ 上报 安全员 张三 04-14 14:30 │ │ ↓ │ │ 认领 安全负责人 李四 04-14 15:00 │ │ ↓ │ │ 处理 （待处理） │ │ │ │ ┌──────────────────────────────┐ │ │ │ 处理说明（选填） │ │ │ │ __________________________ │ │ │ │ │ │ │ │ [认领] [处理完成] │ │ ← 根据状态显示 │ └──────────────────────────────┘ │ │ │ └──────────────────────────────────────┘ ``` **状态说明**： - `pending`（待处理）：显示「认领」「处理完成」按钮 - `assigned`（处理中）：显示「处理完成」按钮，附处理说明输入框 - `resolved`（已处理）：显示处理结果，无操作按钮 ### 3.10 施工日志 `/log.html`（新建） ``` ┌──────────────────────────────────────┐ │ ← 返回 写日志 │ ├──────────────────────────────────────┤ │ │ │ 日期 * │ │ ┌──────────────────────────────┐ │ │ │ 2026-04-14 │ │ │ └──────────────────────────────┘ │ │ │ │ 施工部位 * │ │ ┌──────────────────────────────┐ │ │ │ A区主体结构 │ │ │ └──────────────────────────────┘ │ │ │ │ 作业内容 * │ │ ┌──────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ └──────────────────────────────┘ │ │ │ │ 人员出勤 * 28 人 │ │ │ │ 设备运行 │ │ ☑ 塔吊 ☑ 升降机 │ │ │ │ 现场照片 │ │ ┌────┐ ┌────┐ │ │ │ 📷 │ │ ➕ │ │ │ └────┘ └────┘ │ │ │ │ 安全问题（选填） │ │ ┌──────────────────────────────┐ │ │ │ │ │ │ └──────────────────────────────┘ │ │ │ │ 备注（选填） │ │ ┌──────────────────────────────┐ │ │ │ │ │ │ └──────────────────────────────┘ │ │ │ │ [提交日志] │ │ │ └──────────────────────────────────────┘ ``` **表单字段**：date / part / content / workers（必填）；equipment / photos / safety_note / note（选填） ### 3.11 日志列表 `/logs.html` ``` ┌──────────────────────────────────────┐ │ ☰ 施工日志 [+ 写日志] │ ├──────────────────────────────────────┤ │ 日期筛选 │ │ [04-01 ─── ○ ─── 04-14] │ ← 日期范围选择 ├──────────────────────────────────────┤ │ │ │ ┌──────────────────────────────┐ │ │ │ 04-14 A区主体结构 │ │ │ │ 3层混凝土浇筑，钢筋绑扎... │ │ │ │ 👷 28人 🏗️ 塔吊+升降机 │ │ │ │ 安全员 张三 · 17:00 │ │ │ └──────────────────────────────┘ │ │ │ │ ┌──────────────────────────────┐ │ │ │ 04-13 B区地下室 │ │ │ │ 土方开挖，护坡施工... │ │ │ │ 👷 15人 │ │ │ │ 安全负责人 李四 · 16:30 │ │ │ └──────────────────────────────┘ │ │ │ └──────────────────────────────────────┘ ``` ### 3.12 日志详情 `/log.html?id=xxx` ``` ┌──────────────────────────────────────┐ │ ← 返回 日志详情 │ ├──────────────────────────────────────┤ │ │ │ 04-14 A区主体结构 │ │ │ │ 👷 28人 🏗️ 塔吊+升降机 │ │ │ │ 作业内容 │ │ 3层混凝土浇筑，钢筋绑扎，模板安装 │ │ │ │ 现场照片 │ │ ┌────┐ ┌────┐ ┌────┐ │ │ │ 📷 │ │ 📷 │ │ 📷 │ │ │ └────┘ └────┘ └────┘ │ │ │ │ 安全问题 │ │ 临边作业已挂安全网 │ │ │ │ 备注 │ │ 下午2点停电1小时 │ │ │ │ ────────────────────────────────── │ │ 安全员 张三 04-14 17:00 │ │ │ └──────────────────────────────────────┘ ``` ### 3.13 AI 分析列表 `/ai-analyses.html` ``` ┌──────────────────────────────────────┐ │ ☰ AI 智能分析 [筛选 ▼] │ ├──────────────────────────────────────┤ │ [全部] [人员安全] [设备异常] [环境风险] │ ← Tab 类型筛选 ├──────────────────────────────────────┤ │ │ │ ┌──────────────────────────────┐ │ │ │ 🤖 人员安全 置信度 92% │ │ │ │ 1号塔吊 │ │ │ │ 检测到人员靠近吊装区域... │ │ │ │ 04-14 10:25 │ │ │ └──────────────────────────────┘ │ │ │ │ ┌──────────────────────────────┐ │ │ │ ⚙️ 设备异常 置信度 87% │ │ │ │ 2号升降机 │ │ │ │ 载重超限预警... │ │ │ │ 04-14 09:10 │ │ │ └──────────────────────────────┘ │ │ │ └──────────────────────────────────────┘ ``` ### 3.14 AI 分析详情 `/ai-analysis.html?id=xxx` ``` ┌──────────────────────────────────────┐ │ ← 返回 AI 分析详情 │ ├──────────────────────────────────────┤ │ │ │ 🤖 人员安全 置信度 92% │ │ │ │ 设备: 1号塔吊（QTZ500） │ │ 位置: A区施工现场 │ │ 时间: 04-14 10:25:00 │ │ │ │ ── AI 分析描述 ──────────────────── │ │ 检测到人员靠近吊装区域， │ │ 触发区域入侵告警 │ │ │ │ ── 建议措施 ────────────────────── │ │ 建议立即疏散人员，后续加强 │ │ 吊装区域围挡和警示标志 │ │ │ └──────────────────────────────────────┘ ``` --- ## 4. 页面交互 ### 4.1 API 请求 所有页面通过 `fetch` 调用后台 API，基础封装： ```javascript // api.js const API_BASE = '/v1'; async function api(endpoint, options = {}) { const token = localStorage.getItem('token'); const resp = await fetch(API_BASE + endpoint, { ...options, headers: { 'Content-Type': 'application/json', 'Authorization': token ? `Bearer ${token}` : '', ...options.headers, } }); if (resp.status === 401) { location.href = '/login.html'; return; } const json = await resp.json(); if (json.code !== 0) { alert(json.message); return; } return json.data; } ``` ### 4.2 数据加载流程 ``` 页面加载 │ ▼ 检查登录状态（localStorage.token） │ ├─ 无 token → 跳转 login.html │ └─ 有 token → API 请求 │ ├─ 成功 → 渲染页面 │ └─ 失败 → 显示错误提示 ``` ### 4.3 实时数据刷新 - **策略**: 首次加载后，每 **30 秒**自动刷新实时数据 - **实现**: `setInterval` 定时调用 `GET /devices/{id}/realtime` - **优化**: 仅在设备详情页刷新，其他页面用户主动下拉刷新 ### 4.4 离线缓存 使用 **Service Worker** 缓存静态资源： ```javascript // 缓存策略：Network First, Fallback to Cache // 缓存内容：HTML / CSS / JS / iconfont 字体 ``` --- ## 5. 响应式断点 | 断点 | 宽度 | 适配 | |------|------|------| | mobile-s | 320px ~ 374px | 小屏手机 | | mobile-l | 375px ~ 413px | 主流手机 | | tablet | 768px ~ 1023px | 平板 | | desktop | 1024px+ | 桌面端 | --- ## 6. 待确认 - [x] ~~预警推送机制~~ → 轮询（前端每 30s，SPEC.md 已确认） - [x] ~~登录 Session 管理方案~~ → JWT 有效期 7 天（SPEC.md 已确认） - [ ] 是否有扫码登录需求 - [ ] 报表导出（H5 直接拉 OSS 预签名 URL）