天津粤海天河城购物中心有限公司 · 工程部水表抄数签字确认系统
单文件静态网页应用（HTML + JS + CDN），无需后端、无需构建，可直接部署到 GitHub Pages。商户扫码输入铺位号即可核对当月水表读数并手写签字，工程部按「账期（月）+ 楼层」导出带电子签字的 PDF 签字确认表。
-
商户端（手机扫码）
- 输入铺位号 / 商铺名称 / 水表编号查询
- 展示该商铺全部水表的上月读数、本月读数、用水吨数、单价、金额
- 手写签字确认（支持清除重签），签字按账期保存
- 历史账期记录只读展示，供核对追溯
- 一键导出签字文件（JSON），通过微信/邮件发给工程部
-
工程部端（
?admin=1或点击「工程部入口」输入密码）- 按月（账期）管理：切换账期浏览各月数据，数据/商户签字/内部签字均按月独立存储
- CSV 导入抄表数据（支持 UTF-8/GBK 编码、可含「月份」列一次导入多个月）
- 导入商户签字文件（自动按签字所属账期归位）
- 工程部抄表员、工程部领导、客服代表三方内部签字（按月签署）
- 按「账期 + 楼层」导出横版 A4 PDF 签字确认表，含商户电子签字图像与内部三方签字栏
- 生成商户扫码二维码
- 将本目录文件推送到 GitHub 仓库
main分支（index.html必须位于仓库根目录）。 - 仓库
Settings → Pages→ Source 选择Deploy from a branch→ 分支main→ 保存。 - 访问
https://<用户名>.github.io/<仓库名>/即为商户端入口；?admin=1为工程部入口（默认密码123456，可在设置中修改）。
商户扫码后，页面会自动加载同目录下的
meter-data.json（由工程部在「数据管理」中导出）。请将meter-data.json与index.html一起部署。
- 工程部：进入工程部入口 → 设置当前账期 → 导入 CSV 抄表数据（可含「月份」列）→ 导出
meter-data.json并部署。 - 商户：扫码打开页面 → 输入铺位号 → 核对当月数据 → 手写签字 → 导出签字文件发给工程部。
- 工程部：导入商户签字文件 → 抄表员/领导/客服代表完成内部签字 → 按「账期 + 楼层」生成 PDF 签字确认表。
- 所有数据保存在各设备浏览器本地（localStorage），不上传服务器；多设备通过「签字文件」手动合并。
- 抄表与签字均以账期（月）为单位：各账期数据、商户签字、内部签字相互独立。
- CSV 表头：
序号, 月份, 商铺号, 商铺名称, 水表井编号, 水表规格(DN), 上月读数(m³), 上月用量(吨), 本月读数(m³), 客户签字, 用量(吨), 单价(元), 金额(元)。「序号」「客户签字」列自动忽略；楼层按铺位号自动识别（如L8-001 → 8F、B1-301 → B1），也可增加「楼层」列指定。 - 用量、金额未填写时自动计算：
用量 = 本月读数 − 上月读数，金额 = 用量 × 单价。
| 文件 | 说明 |
|---|---|
index.html |
系统主体（单文件，含全部页面/样式/逻辑） |
样例抄表数据.csv |
两个月（2026-08、2026-09）链式一致的样例数据，读数跨月衔接 |
样例抄表数据_2026-08.csv / 样例抄表数据_2026-09.csv |
单月样例数据 |
样例抄表数据_GBK测试.csv |
GBK 编码样例（测试编码兼容） |
示例_商户水表抄数签字确认表.pdf |
示例导出 PDF |
- PapaParse：CSV 解析
- Signature Pad：手写签字
- jsPDF：PDF 生成（画布渲染，支持中文）
- qrcodejs：二维码生成
以上库均通过 CDN 引入，页面需联网加载。