广西水利水电ＧＵＡＮＧＸＩ ＷＡＴＥＲ ＲＥＳＯＵＲＣＥＳ＆ＨＹＤＲＯＰＯＷＥＲ ＥＮＧＩＮＥＥＲＩＮＧ ２０１６（５） ・水文水资源专栏・ 水文遥测站维护“指南者” ——基于ＨＴＭＬ５的Ｗｅｂ Ａｐｐ设计与实现 陈忠彬 （玉林市水文局水情科，广西玉林５３７０００） 【摘要】为解决水文遥测站维护问题，“指南者”采用基于ＨＴＭＬ５的Ｗｅｂ ＡＰＰ设计方式，能很好地被不同系统的计 算机和移动设备访问使用。该软件可以获取站点故障信息，导航路线到位置，集成了定位、指南针、水平仪等实用 工具，可查询最新水文数据等，为维护人员提供了有效实用的帮助。 ［关键词］水文遥测站；维护；ＨＴＭＬ５；Ｗｅｂ ＡＰＰ ［中图分类号】ＴＰ３１１．５２；Ｐ３３６ ［文献标识码］Ｂ 【文章编号】１００３—１５１０（２０１６）０５—００７—０３ １概述 随着水文基础设施建设不断加强，水文遥测站 也越来越多。站点地域分布广，位置多在偏远乡镇 能等。ＨＴＭＬ５可以将Ｗｅｂ代码全部加密，本地应用 解密后再运行，大大地提供了代码的安全性。相对 于通常平台的审核需要７个工作日，ＨＴＭＬ５只需修 改即可实时更新。 ＨＴＭＬ５为网页应用开发者们提供了更多功能 上的优化选择，带来了更多体验功能的优势。ＨＴ— ＭＬ５提供了前所未有的数据与应用接人开放接 口。使外部应用可以直接与浏览器内部的数据直 接相连，例如视频影音应用可直接与麦克风及摄像 头相联。 ２．２ ＷｅｂＡｐｐ 农村。维护人员不仅需要人工分析故障站点、找所 在位置，加上脱离了中心机房环境，查询相关数据 不方便。一款跨平台、易使用、开发难度小、“众口 易调”能适用于不同移动智能终端的Ａｐｐ显得尤为 重要。基于ＨＴＭＬ５的Ｗｅｂ Ａｐｐ——水文遥测站维 护“指南者”就符合上述需求，让维护人员在不同的 移动终端都可以访问使用，方便有效辅助工作。 Ｗｅｂ Ａｐｐ就是运行于网络和标准浏览器上，基 ２使用主要技术和开发工具 ２．１ ＨＴＭＬ５ 于网页技术开发实现特定功能的应用。跨平台，移 动应用开发者不再需要考虑复杂的底层适配和跨 平台开发语言的问题。传统移动终端上的Ｎａｔｉｖｅ Ａｐｐ，研发工作必须针对不同的操作系统进行，成本 ＨＴＭＬ５是超文本标记语言（ＨＴＭＬ）的第５次重 大修改，标准标准规范于２０１４年１Ｏ月制定完成，市 面上几乎所有主流的计算机和移动设备浏览器都 支持。 ＨＴＭＬ５提高了用户体验，加强了视觉感受，让 应用程序应用到网页，跨平台并对网页的功能进行 扩展，用户不需要下载客户端或插件就能够观看视 频、玩游戏，进行数据交互操作。用户可以离线使 用，更新下载量及少，可以全部更新，也可以选择替 相对较高，对于用户还存在着管理成本、存储成本 以及性能消耗成本。使用ＨＴＭＬ来开发的Ｗｅｂ Ａｐｐ 在投人上会大大的低于传统的Ｎａｔｉｖｅ Ａｐｐ。基于当 下开始普及流行的ＨＴＭＬ５，Ｗｅｂ Ａｐｐ可以实现很多 原本Ｎａｔｉｖｅ Ａｐｐ才可以实现的功能，比如ＬＢＳ的功 能、本地数据存储、音视频播放的功能，甚至还有调 用照相机和结合ＧＰＵ的硬件加速功能。Ｗｅｂ Ａｐｐ 则无需用户下载，并且和传统网站一样可以动态升 级。Ｗｅｂ Ａｐｐ有Ａｐｐ的特性，更有Ｗｅｂ的特性。 Ｗｅｂ Ａｐｐ可以像传统互联网网页那样互相链接，从 换部分文件。ＨＴＭＬ５可以通过浏览器作为中介充 分利用Ｎａｔｉｖｅ（原生应用），比如说可以使用ＧＰＳ、照 相机、电子罗盘、本地联系人等，也可以使用推送功 【收稿日期】２０１６一Ｏ１一Ｏ９ 【作者简介】陈忠彬（１９８４－），男，广西玉林人，广西玉林市水文水资源局工程师，学士，主要从事水文情报预报及水文分析工作。 ７ 陈忠彬：水文遥测站维护“指南者”——基于ＨＴＭＬ５的Ｗｅｂ Ａｐｐ设计与实现 一个网页跳转到另一个网页，从一个Ｗｅｂ Ａｐｐ直接 跳转到另外一个Ｗｅｂ Ａｐｐ。 ２．３基于ＨＴＭＬ５的Ｗｅｂ Ａｐｐ 基于ＨＴＭＬ５的Ｗｅｂ Ａｐｐ既具有ＨＴＭＬ５的特 性，又有Ａｐｐ的功能。能方便被计算机、笔记本电 脑、移动应用终端用浏览器访问。用框架软件封装 成Ｗｅｂ Ａｐｐ后，可在相应移动应用端安装使用。如 图ｌ所示。 计算机、移动端洳览器 构放在服务器上 建成ｗＥＢ网站 ＨＴＭＬ５￣Ｉ ｌｌ ｌ 黝 槊构封装成ＷＥＢ ＡＰＰ软件包 厂 塞卓移动设备安装使用Ｉ １苹幂移动设 Ｉ备安装使用 图１ 基于ＨＴＭＬ５的Ｗｅｂ Ａｐｐ工作原理和访问模式 ２．４运行环境和主要开发工具 运行环境：有浏览器的计算机和移动端，使用 支持ＨＴＭＬ５的浏览器（更佳效果使用浏览器的高版 本），在浏览器网址栏输入ｈｔｔｐ：／／ｗｗｗ．ｇｘｙｌｓｗ．ｃｏｎ： ８６／ｃｘ／ｉｎｄｅｘ．ｈｔｍｌ可直接访问。可下载应用软件安装 包到安卓设备端、苹果设备端等安装运行。 开发工具：Ａｄｏｂｅ Ｄｒｅａｍｗｅａｖｅｒ ＣＳ５（ＨＴＭＬ５网 页、ＣＳＳ、ＪＳ制作软件），ＤＣｌｏｕｄ ＨＢｕｉｌｄｅｒ（ｗｅｂ Ａｐｐ 框架软件，能打包生产安卓端、苹果端安装包）， Ａｄｏｂｅ Ｐｈｏｔｏｓｈｏｐ ＣＳ６（图片处理软件）等。 ３软件的设计与实现 ３．１功能划分 ３．１．１ 查找故障或存在故障水文遥测站 “故障站点”模块：可以查看最新ＧＰＲＳ信道通 信率，０％表示为故障，１００％表示通信正常，介于两 者之间为信号不稳定。 “低电压警示”模块：可以查看最新电压值，如 果一个站点低于蓄电池标准电压，在接下来一段时 间内间隔观查，如果该站点所在区域并非阴雨天， 而始终处于低电压工作，判断为充电器或蓄电池存 ８ 在故障。 “数据异常分析”模块：设计模型为查看站点来 报文信号，但是雨量数据为０的情况。显示站点连 续多少天雨量为０，如果超过一定天数，人工查看这 段时间内区域降雨、周边降雨情况。做出该站点雨 量数据是否存在异常。 ３．１．２导航到站点位置 “站点导航”模块：采用了高德地图的ＬＢＳ（（Ｌｏ． ｃａｔｉｏｎ Ｂａｓｅｄ Ｓｅｒｖｉｃｅ基于位置的服务）平台，定位站 点经纬度，则可在高德地图上显示位置，生产导航 路线。选择性添加站点相关信息如观察员姓名、联 系电话、站点所在环境照片、备注（有些站点需要带 梯子，或越野车等这样的提醒信息）。 ３．１－３导航到站点位置 负责安装、维护，主要有以下３个模块： “经纬定位”模块：获取定位位置的地址、经度、 纬度。需要手机开启位置定位模式。 “指南针”模块：电子指南针，指方向，定太阳能 板朝向。需要手机有电子罗盘功能。 “水平仪”模块：电子水平仪，把手机放在测试 平面上，可以测试水平和垂直度。需要手机有重力 感应功能。 ３．１．４查询最新数据 “最新数据”模块：查询站点最新雨量、水位、流 量、墒情信息。让维护人员维修好仪器后，模拟雨 量，看报文是否准确及时发送回中心机房，是否人 数据库。 ３．１．５其他 “关于我们”模块：可以发布一些通知、联系人、 联系方式等内容。 ３．２设计方式划分 ３．２．１访问云端数据库的ＨＴＭＬ５页面 “站点导航”模块对应的ｄｉｔｕ．ｈｔｍｌ是采用ＨＴＭＬ 调用高德ＬＢＳ平台，高德平台包含有云端数据库， 定义包含有站点名称，站点类型，经度，纬度，观测 员姓名，观测员联系电话，备注等字段。云端数据 库不用我们自己建设服务器和架构网站，只需要利 用大公司的开发ＡＰＩ平台，架构强大的服务功能和 免费强大的云服务器，快速、方便、安全访问数据， 并能做到实时更新。非保密、公开的数据和功能都 可以放到云端－－ 。从移动互联网技术与产业的发展 趋势来看，云计算的迅猛发展，尤其是“平台及服 务”（ＰａａＳ）的加速部署，开启了低成本、大规模、易 广西水利水电ＧＵＡＮＧＸＩ ＷＡＴＥＲ ＲＥＳＯＵＲＣＥＳ＆ＨＹＤＲＯＰＯＷＥＲ ＥＮＧＩＮＥＥＲＩＮＧ ２（１１６（５） 运行的云服务时代。云平台工作原理如图２。 ３．２．２访问服务器的ＨＴＭＬ５页面 单、高效。开发者可以利用这一模式开发出多种多 功能的应用。 水文遥测站维护“指南者”让维护人员从查找 “故障站点”模块对应的ｇｚｚｄ．ｈｔｍｌ、“低电压警 示”对应的ｄｄｙｊｓ．ｈｔｍｌ和最新数据查询对应的页面 故障、引路到站点位置，维护后查看数据入库情 是采用ＨＴＭＬ５调用服务器架构网站页面，再由此网 站页面去访问服务器数据库，这样可以利用自有服 务器里的数据。工作原理如图２。 ＨＴＭＬ５页面 厂 、 —况。跨平台的应用面向拿不同手机的维护人员也 准备充分，不安装直接用浏览器操作查询。安装包 支持市面上占有率最大的安卓和苹果平台，安装好 的软件可以调用手机硬件，实现定位、指南、水平度 测试等辅助工作。这都为维护人员提供参考和便 利。浏览器端和设备端经测试，都能流畅运行。运 行界面见图３。 ／ ／ Ｉｌ调军用公共Ｉ馨 ｌ ‘ 一， 数据库云靖 、、一 ｌ ｌ 设备浏览器、Ｌ一／ 苹果端设备—、 ＨＴＭＬ５页面 厂 、 、－一 ｌ调用服务器ｆ的访问操作Ｉ ｌ数据库页面ｌ‘ 图２ ＨＴＭＬ５访问数据库模式 服务器 数据库 ３．２．３调用手机功能的ＨＴＭＬ５页面 “经纬定位”模块对应的ｄｉｎｇｗｅｉ．ｈｔｍｌ、“指南针” 模块对应的ｚｎｚ．ｈｔｎｄ、“水平仪”模块对应的ｓｐｙ．ｈｔｍｌ 是调用手机功能的ＨＴＭＬ５页面。通过ＨＴＭＬ５代码 编写，用Ｗｅｂ Ａｐｐ框架软件ＤＣｌｏｕｄ Ｈｂｕｉｄｅｒ进行 封装。 ３．２．４显示静态内容的ＨＴＭＬ５页面 主页ｉｎｄｅｘ．ｈｔｍｌ和“关于我们”模块对应的 ａｂｏｕｔ．ｈｔｍｌ就是静态页面，不和数据库互动，也不和 手机互动，只是湿示页面的内容。采用的实现方式 是ＨＴＭＬ５＋ｃｓＳ３＋Ｊｓ代码，让静态文本和图片灵动 起来，更加友好 示给用户。 图３左侧为手机浏览器界面，右侧为安卓手机界面 参考文献 【ｌ Ｊ张成措，是静，仇剑书，等．基丁Ｈ１、ＭＬ５的移ｚ￣ＪＪＷｅｂ 州浅析ＩＪ１．信息通信技术，２０１３（４）：５７—６０． ４结语 基于ＨＴＭＬ５的Ｗｅｂ Ａｐｐ模式，让开发变得简 （责任编辑：周群） （英文摘要下转第３５页） ９ 堕 皇ＧＵＡＮＧＸＩ ＷＡＴＥＲ ＲＥＳＯＵＲＣＥＳ＆ＨＹＤＲＯＰＯＷＥＲ ＥＮＧＩＮＥＥＲＩＮＧ ２０１６（５） Ａｐｐｌｉｃａｔｉｏｎ ｏｆ ｇｅｏｌｏｇｉｃａｌ ｒａｄａｒ ｉｎ ｔｕｎｎｅｌ ｅｘａｍｉｎａｔｉｏｎ ｏｆ ｈｙｄｒａｕｌｉｃ ｐｒｏｊｅｃｔ ＺＨＡＮＧ Ｙｕ——ｘｉａｎｇ （Ｇｅｏｐｈｙｓｉｃａｌ Ｐｒｏｓｐｅｃｔｉｎｇ Ｔｅａｍ。ｆ Ｗａｔｅｒ Ｃｏｎｓｅｒｖａｎｃｙ ａｎｄ Ｈｙｄｒｏｐｏｗｅｒ Ｓｕｒｖｅｙ ａｎｄ Ｄｅｓｉｇｎ Ｉｎｓｔｉｔｕｔｅ。ｆ Ｘｉｎｊｉａｎｇ， Ｃｈａｎｇｊｉ ８３１ １００，Ｃｈｉｎａ） Ａｂｓｔｒａｃｔ：Ａ ｂｒｉｅｆ ｉｎｔｒｏｄｕｃｔｉｏｎ ｗａｓ ｍａｄｅ ｏｎ ｔｈｅ ｗｉｎｃｉｐｌｅ ａｎｄ ｍｅｔｈｏｄ ｏｆ ｅｘａｍｉｎｉｎｇ ｔｕｎｎｅｌ ｌｉｎｉｎｇ。ｆ ｈｙｄｒａｕｌｉｃ ｐｒｏｊ． ｅｃｔ ｗｉｔｈ ｇｅｏｌｏｇｉｃａｌ ｒａｄａｒ．Ｔａｋｉｎｇ ｔｈｅ ｐｏｗｅｒ ｄｉｖｅｒｓｉｏｎ ｔｕｎｎｅｌ ｏｆ ａ ｈｙｄｒｏｐｏｗｅｒ ｐｒｏｊｅｃｔ ａｓ ｅｘａｍｐｌｅ．ｔｈｅ ａｕｔｈｏｒ ｅｘ— ｐｌａｉｎｓ ｔｈｅ ｉｎｔｅｒｐｒｅｔｉｎｇ ｏｆ ｓｅｃｔｉｏｎａｌ ｇｒａｐｈｓ ｏｕｔ ｏｆ ｇｅｏｌｏｇｉｃａｌ ｒａｄａｒＴｈｅ ｒｅｓｕｌｔｓ ｏｆ ｐｒａｃｔｉｃｅ ｄｅｍｏｎｓｔｒａｔｅ ｔｈａｔ ｇｅｏｌｏｇｉｃａ１ ．ｒａｄａｒ ｈａｓ ｇｏｏｄ ｐｒｏｓｐｅｃｔｉｎｇ ｅｆｆｅｃｔｓ ｆｏｒ ｅｘａｍｉｎａｔｉｏｎ ｏｆ ｓｔｅｅｌ ｂａｒ ｄｉｓｔｒｉｂｕｔｉｏｎｃｏｎｃｒｅｔｅ ｔｈｉｃｋｎｅｓｓ ａｎｄ ｌｉｎｉｎｇ ｑｕａｌｉｔｙ． ，Ｋｅｙ ｗＯｒｄｓ：Ｇｅｏｌｏｇｉｃａｌ ｒａｄａｒ；ｔｕｎｎｅｌ ｌｉｎｉｎｇ；ｑｕａｌｉｔｙ ｅｘａｍｉｎａｔｉｏｎ （上接第９页） Ｍａｉｎｔｅｎａｎｃｅ ｇｕｉｄｅ ｏｆ ｈｙｄｒｏｌｏｇｉｃａｌ ｔｅｌｅｍｅｔｒｙ ｓｔａｔｉｏｎ ＿＿－Ｄｅｓｉｇｎ ａｎｄ ｉｍｐｌｅｍｅｎｔａｔｉｏｎ ｏｆ Ｗｅｂ ＡＰＰ ｂａｓｅｄ ｏｎ ＨＴＭＬ５ Ｃ ＨＥＮ Ｚｈｏｎｇ——ｂｉｎ （Ｈｙｄｒｏｌｏｇｙ ａｎｄ Ｗａｔｅｒ Ｒｅｓｏｕｒｃｅｓ Ｂｕｒｅａｕ ｏｆ Ｙｕｌｉｎ Ｃｉｔｙ，Ｙｕｌｉｎ ５３７０００，Ｃｈｉｎａ） Ａｂｓｔｒａｃｔ：Ｆｏｒ ｍａｉｎｔｅｎａｎｃｅ ｏｆ ｈｙｄｒｏｌｏｇｉｃａｌ ｔｅｌｅｍｅｔｒｙ ｓｔａｔｉｏｎ，ｔｈｅ ｇｕｉｄｅ ｉｓ ｄｅｓｉｇｎｅｄ ａｓ Ｗｅｂ ＡＰＰ ｂａｓｅｄ ｏｎ ＨＴＭＬ５， ｗｈｉｃｈ ｐｅｒｍｉｔｓ ｖｉｓｉｔ ａｎｄ ａｐｐｌｉｃａｔｉｏｎ ｏｆ ｃｏｍｐｕｔｅｒ ｏｒ ｍｏｂｉｌｅ ｄｅｖｉｃｅ ｉｎｓｔａｌｌｅｄ ｗｉｔｈ ｄｉｆｆｅｒｅｎｔ ｓｙｓｔｅｍｓＴｈｉｓ ｓｏｆｔｗａｒｅ ｉｓ ．ａｂｌｅ ｔｏ ｅｆｆｅｃｔｉｖｅｌｙ ｈｅｌｐ ｔｈｅ ｍａｉｎｔｅｎａｎｃｅ ｐｅｒｓｏｎｎｅｌ ｂｙ ｐｒｏｖｉｄｉｎｇ ｔｒｏｕｂｌｅ ｉｎｆｏｒｍａｔｉｏｎ ａｎｄ ｎａｖｉｇａｔｉｏｎ ｏｆ ｆａｉｌｕｒｅ ｈｙｄｒｏ． １ｏｇｉｃａｌ ｓｔａｔｉｏｎ，ｐｒａｃｔｉｃａｌ ｔｏｏｌｓ ｓｕｃｈ ａｓ ｐｏｓｉｔｉｏｎｉｎｇ，ｃｏｍｐａｓｓ ａｎｄ ｌｅｖｅｌ ｅｔｃａｓ ｗｅｌｌ ａｓ ｌａｔｅｓｔ ｈｙｄｒｏｌｏｇｉｃａｌ ｄａｔａ． ．，Ｋｅｙ ｗｏｒｄｓ：Ｈｙｄｒｏｌｏｇｉｃａｌ ｔｅｌｅｍｅｔｒｙ ｓｔａｔｉｏｎ；ｍａｉｎｔｅｎａｎｃｅ；ＨＴＭＬ５；Ｗｅｂ ＡＰＰ ３５