Jesxion
cb0ef8c30c
- architecture.md: 全面重写，对齐 Node.js+MySQL 技术栈， 新增三个模块（隐患随手拍/施工日志/AI分析）到模块列表和架构图， 更新数据流、租户隔离模型、部署架构、安全设计 - h5.md: 补充 6 个新页面 wireframe（3.7~3.14）， 更新页面清单（15个页面），API endpoint 前缀 /api → /v1， 更新已知待确认项为已确认状态 - offline.md: 补充 hazards/construction_logs/ai_analyses 三个 IndexedDB store，更新刷新策略表， 补充 6 种离线操作类型（action 类型表） - SPEC.md: 状态升级为"设计完成"，版本升至 v0.2.1， 所有待确认项均已确认（部署地址/推送凭证/OSS路径/JWT/台账）
30 KiB
30 KiB
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，基础封装：
// 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 缓存静态资源：
// 缓存策略：Network First, Fallback to Cache
// 缓存内容：HTML / CSS / JS / iconfont 字体
5. 响应式断点
| 断点 | 宽度 | 适配 |
|---|---|---|
| mobile-s | 320px ~ 374px | 小屏手机 |
| mobile-l | 375px ~ 413px | 主流手机 |
| tablet | 768px ~ 1023px | 平板 |
| desktop | 1024px+ | 桌面端 |
6. 待确认
预警推送机制→ 轮询（前端每 30s，SPEC.md 已确认）登录 Session 管理方案→ JWT 有效期 7 天（SPEC.md 已确认）- 是否有扫码登录需求
- 报表导出（H5 直接拉 OSS 预签名 URL）