电力巡检Web原型：离线拍照、GPS定位与工单同步实战

简介：本资源是一套面向Web前端开发者与电力行业信息化项目需求分析人员的电力巡检系统原型设计与需求文档合集，聚焦于输电线路、变电站等关键设施的智能化巡检场景，解决系统功能定义不清、界面交互模糊、业务流程落地难等实际开发痛点。压缩包共1041个文件，含787张界面原型图（png）、82份Axure流程图（vsd）、47个可运行HTML页面、70个JS交互脚本及43个CSS样式文件，完整覆盖从需求梳理、模块划分到UI实现的全链路交付物；包体大小为14.41MB，轻量易解压，适合作为教学案例或项目启动参考。目前已有1588人学习下载，读者可直接获取高保真原型页面、结构化需求说明书、GIS集成与故障预警等核心模块的详细用例描述，以及基于Bootstrap+原生JS实现的响应式前端工程骨架，显著降低同类系统的需求沟通与原型验证成本。

1. 电力巡检系统原型：不是PPT画饼，是能扫码查缺陷、带GPS定位、离线填表的真实Web系统

某高校实验室接到一个真实需求：一线巡检员用手机拍下电塔锈蚀、绝缘子破损、杆塔倾斜的照片，系统要自动打上时间戳+经纬度+设备ID，生成结构化工单，同步推送给运维班组——但客户没给预算买商用平台，只给了3周时间搭出可演示、可试用的最小闭环。这个「电力巡检系统_原型+需求分析」包，就是当时交付的完整产物：它不是Figma里的高保真UI稿，而是基于纯HTML/CSS/JS跑在Chrome和微信内置浏览器里的真实Web应用，含完整需求文档（含27条功能点+11个非功能约束）、可本地运行的原型页面（含模拟GPS定位、离线缓存、图片压缩上传）、以及所有交互逻辑的源码注释。适合两类人：一是刚接手类似政企类现场作业系统的前端新人，想看“需求怎么落地成代码”；二是需要快速验证业务流程是否合理的项目经理，直接改改JSON就能跑通从拍照→填表→提交→查看的全链路。

2. 需求分析拆解：27条功能点如何映射到HTML文件结构与JS模块

2.1 需求文档核心框架：从“用户故事”到“验收条件”的硬约束

项目附带的requirements_v1.2.pdf（共18页）采用“角色-场景-动作-结果”四段式写法，而非泛泛而谈。例如第8条：“作为巡检员，在无网络信号的山区变电站内，拍摄3张设备照片后，仍能填写缺陷描述并保存至本地，待信号恢复后自动同步”。这条直接锁定了三个技术实现点：① 浏览器端IndexedDB离线存储策略；② 图片Base64编码后截断至500KB以内（避免localStorage溢出）；③ 同步队列需支持失败重试+手动触发。文档中所有功能点均标注了优先级（P0/P1/P2）和关联模块（如“P0-缺陷上报”对应report.html），这比单纯罗列“需要登录、需要拍照”有用得多——它告诉你哪些逻辑必须今天写完，哪些可以明天补。

2.2 原型目录结构即需求骨架：每个HTML文件都是一个独立业务域

整个原型仅用静态文件实现，目录结构极度克制，却精准反映业务分层：

/power-inspection-prototype/ ├── index.html # 巡检员主工作台（地图概览+今日任务列表） ├── report.html # P0核心：缺陷上报页（含相机调用、表单、GPS获取） ├── history.html # 历史工单列表（按时间/状态/设备ID筛选） ├── device-detail.html # 设备详情页（展示台账信息+历史缺陷图谱） ├── assets/ │ ├── js/ │ │ ├── main.js # 全局入口：路由分发+权限判断（模拟token） │ │ ├── camera.js # 封装getUserMedia，处理iOS/Android兼容性 │ │ ├── geo.js # GPS定位：先用高德API，降级为浏览器Geolocation │ │ └── sync.js # 离线同步引擎：IndexedDB操作+fetch重试逻辑 │ └── data/ │ └── mock.json # 模拟设备台账数据（含ID、类型、电压等级、坐标） └── README.md # 运行说明+各页面URL路径+测试账号（admin/123456）

注意：没有/api/目录，所有“后端”逻辑由mock.json和浏览器API替代。这种设计不是偷懒，而是把“网络不可靠”作为第一前提——电力现场常有信号盲区，原型必须证明离线能力可行。

2.3 关键需求的技术翻译：为什么用localStorage+IndexedDB双缓存？

需求文档第15条明确要求：“工单草稿需保留72小时，即使用户关闭浏览器再打开也能恢复”。纯localStorage会因容量限制（通常5MB）导致大图崩溃，而IndexedDB虽稳定但API复杂。最终方案是分层缓存：

// assets/js/sync.js class OfflineStorage { // 草稿元数据（小数据）存localStorage，保证秒级读取 saveDraftMeta(id, meta) { localStorage.setItem(`draft_meta_${id}`, JSON.stringify(meta)); } // 草稿正文+图片Base64存IndexedDB，规避容量瓶颈 async saveDraftContent(id, content) { const db = await this.openDB(); const tx = db.transaction('drafts', 'readwrite'); const store = tx.objectStore('drafts'); await store.put({ id, content, timestamp: Date.now() }); } }

提示：content字段实际是JSON对象，包含description（文本）、photos（数组，每项为{base64: "...", width: 1200, height: 800}）。这样既满足72小时留存，又避免单次存取超时。

3. 核心模块拆解：report.html从点击“拍照”到生成工单的完整链路

3.1 页面初始化：如何让老旧安卓机也正确触发摄像头？

report.html加载时，camera.js执行三步检测：

// assets/js/camera.js function initCamera() { // 步骤1：检测是否支持MediaDevices（Chrome 53+/Firefox 50+） if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { showFallbackMessage("您的浏览器不支持摄像头，请升级或换用Chrome"); return; } // 步骤2：iOS Safari特殊处理（需https且需用户手势触发） if (/iPhone|iPad|iPod/.test(navigator.userAgent)) { document.getElementById('take-photo-btn').addEventListener('click', () => { startCamera(); // iOS必须在click事件内调用 }); } else { startCamera(); // 其他浏览器可直接调用 } } async function startCamera() { try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" }, // 强制后置摄像头 audio: false }); const video = document.getElementById('video-preview'); video.srcObject = stream; } catch (err) { console.error("摄像头启动失败:", err); showFallbackMessage("无法访问摄像头，请检查权限设置"); } }

关键点：facingMode: "environment"确保调用后置摄像头（巡检需拍设备本体，非自拍）；iOS的“手势触发”限制是血泪经验——曾有项目因在onload里直接调用getUserMedia，导致iOS用户永远黑屏。

3.2 拍照与压缩：为什么不用canvas.toDataURL()？

点击“拍照”按钮后，camera.js执行：

function takePhoto() { const video = document.getElementById('video-preview'); const canvas = document.createElement('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; const ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // 关键：不直接toDataURL，而是用canvas.toBlob() + 压缩 canvas.toBlob(async (blob) => { const compressedBlob = await compressImage(blob, { maxSizeMB: 0.5, // 目标：≤500KB maxWidthOrHeight: 1200, // 保持宽高比缩放 useWebWorker: true // 启用Web Worker防主线程卡死 }); const base64 = await blobToBase64(compressedBlob); addPhotoToPreview(base64); // 插入预览区 }, 'image/jpeg', 0.8); // 初始质量0.8，压缩失败再降 }

注意：compressImage使用开源库browser-image-compression（已打包进assets/js/lib/）。实测发现，某款华为旧机型用toDataURL()生成的JPEG达1.2MB，而toBlob()配合压缩后稳定在480KB，且耗时降低60%——这是现场巡检员能否10秒内连拍3张的关键。

3.3 GPS定位与防抖：如何避免“同一地点报出10个不同坐标”？

geo.js实现定位逻辑：

// assets/js/geo.js async function getCurrentPosition() { return new Promise((resolve, reject) => { // 优先尝试高德Web API（需key，已内置测试key） if (window.AMap && AMap.Map) { const map = new AMap.Map('map-container', { zoom: 15 }); AMap.plugin('AMap.Geolocation', () => { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 启用GPS timeout: 10000, maximumAge: 60000, // 缓存1分钟内坐标 convert: true // 转为GCJ-02坐标系（国内合规） }); map.addControl(geolocation); geolocation.getCurrentPosition((status, result) => { if (status === 'complete') { resolve({ lat: result.position.getLat(), lng: result.position.getLng(), accuracy: result.accuracy // 米级精度 }); } else { reject(new Error(`高德定位失败: ${result.message}`)); } }); }); } else { // 降级：浏览器原生Geolocation API navigator.geolocation.getCurrentPosition( (pos) => { resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude, accuracy: pos.coords.accuracy }); }, (err) => reject(err), { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 } ); } }); }

提示：maximumAge: 60000是防抖核心——避免连续点击“获取位置”触发10次定位请求，返回10个微小偏差的坐标。实测某变电站内，未加此参数时坐标漂移达8米，加后稳定在±1.5米。

4. 避坑指南：电力现场真机测试踩过的5个坑及解决方案

4.1 现象：华为Mate 30在report.html点击“拍照”无反应

原因：该机型Android 10系统对<input type="file" accept="image/*">的capture属性支持不全，且getUserMedia需HTTPS环境，而本地file://协议被严格拦截。
解决：放弃<input>方案，强制走getUserMedia流式采集，并在startCamera()前增加协议检测：

if (location.protocol !== 'https:') { alert("请使用HTTPS服务访问（如live-server启动），file://协议不支持摄像头"); return; }

4.2 现象：iOS微信内置浏览器调用navigator.geolocation报错“NotAllowedError”

原因：微信iOS版对getCurrentPosition的调用有额外限制：必须在用户手势（如click）后立即调用，且不能有异步延迟。
解决：将定位逻辑绑定到按钮onclick，并移除所有setTimeout包装：

<!-- report.html --> <button onclick="getLocationNow()">获取当前位置</button> <script> function getLocationNow() { // 直接调用，不包裹在Promise或setTimeout里 navigator.geolocation.getCurrentPosition(...); } </script>

4.3 现象：离线状态下提交工单，重启浏览器后草稿消失

原因：mock.json中设备台账数据被硬编码在device-detail.html的<script>标签内，但report.html未加载该数据，导致离线时无法关联设备ID。
解决：将设备数据统一抽离为assets/data/devices.json，所有页面通过fetch('./assets/data/devices.json')加载（离线时Service Worker会拦截并返回缓存版本）。

4.4 现象：三星S21拍照后图片旋转90度（横图变竖图）

原因：Android摄像头原始数据含EXIF方向信息，canvas.drawImage()默认忽略，导致图像旋转。
解决：在takePhoto()中增加EXIF解析：

// 使用exif-js库读取orientation const exif = await EXIF.getData(blob); const orientation = EXIF.getTag(exif, "Orientation") || 1; // 根据orientation调整canvas绘制逻辑（1=正常，6=顺时针90°等）

4.5 现象：Chrome 115+版本localStorage写入大字符串时报“QuotaExceededError”

原因：Chrome新版本对localStorage单次写入大小限制更严（尤其含Base64图片时）。
解决：彻底弃用localStorage存图片，改为仅存元数据（ID、时间、设备号），图片全部走IndexedDB：

// 删除所有 localStorage.setItem(...base64...) 的调用 // 改为：await offlineStorage.saveDraftContent(draftId, { photos: [base64Str], ... });

5. 二次开发实战：3步接入真实后端API，保留离线能力不妥协

5.1 接口契约定义：如何让前端不依赖后端进度？

原型中所有“假接口”均按真实RESTful规范设计，路径与字段完全对齐未来后端。例如工单提交：

关键：photos字段值为Base64字符串（非文件二进制），降低后端接收复杂度；location结构固定，避免前端传{"latitude":...}和{"lat":...}混用。

5.2 同步引擎改造：从“模拟同步”到“真实队列”

sync.js中的SyncEngine类只需修改两处即可对接真实API：

// assets/js/sync.js class SyncEngine { // 原方法：模拟同步（仅清空本地草稿） // async syncAll() { ... } // 新方法：真实同步，带错误处理 async syncAll() { const drafts = await this.getPendingDrafts(); // 从IndexedDB读取未同步草稿 for (const draft of drafts) { try { const response = await fetch('/api/v1/defect-reports', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(draft.content) // content即report.html收集的JSON }); if (response.ok) { const result = await response.json(); await this.markAsSynced(draft.id, result.report_id); // 记录report_id } else { throw new Error(`HTTP ${response.status}`); } } catch (err) { console.warn(`同步失败，保留草稿 ${draft.id}:`, err); // 不删除草稿，下次syncAll继续尝试 } } } }

注意：markAsSynced()方法需在IndexedDB中标记该草稿为“已同步”，但保留原始数据72小时（满足需求文档第15条）。

5.3 权限与登录态：如何用JWT Token替换模拟token？

原型中main.js用localStorage.setItem('auth_token', 'mock-token')模拟登录。接入真实后端时：

1. 登录页：login.html提交账号密码至POST /api/v1/login，后端返回JWT；
2. Token存储：改用sessionStorage（关闭浏览器即失效，更安全）：

   // 登录成功后 sessionStorage.setItem('jwt_token', response.token);

3. 请求拦截：所有fetch调用前注入Header：

   const token = sessionStorage.getItem('jwt_token'); if (token) { headers.set('Authorization', `Bearer ${token}`); }

从那以后我每次接入新后端，都强制走一遍“原型→Mock API→真实API”的三阶段验证：先确保原型逻辑跑通，再用Mock Server（如MSW）模拟API响应，最后切真实地址。这招让我避开过两次后端字段变更未同步的翻车——希望帮到你。

本文还有配套的精品资源，点击获取