随着移动互联网的发展,依托HTML5技术开发的移动Web应用,如百度移动版、京东手机网页版等已经悄然走进我们的生活。但是,政府单位和企业级的系统对于HTML5新技术的应用少之又少。主要原因在于如何在传统系统架构中融入HTML5技术,从而能够提高原架构的性能和跨平台能力。这一点是需要在实际项目中不断探索实践的。本文阐述了基于IBM IOW (Intelligent Operations for Water)框架的水系管网监测分析系统中,本文所涉及模块在实际项目中的设计与实现。内容涵盖了从需求到设计、从设计到实现的过程以及其中所涉及到的关键技术、技术难点、技术综述以及模块优化方案,并着重体现了IOW这一传统框架结合基于HTML5技术所实现的D3.js库这一数据可视化技术方案的可行性、实际应用效果以及技术探索过程。其中,所论述的技术难点包括管道分析模块的设计与实现、大数据分析性能优化和基于D3.js库的可视化框架开发。此外,本文还对开发过程中所应用的其他行业新技术,包括HTML5Local Storage、HTML5Web Worker、Require.js和Bootstrap所形成的技术方案进行了详细的分析。该系统以B/S架构为主,分为基础设施层、数据层和应用层三部分,而应用层又分为数字管网、水系数据监测、水系数据统计、巡查养护和预警管理等不同模块。而本文主要涉及四个模块的开发工作,包括管道物联网模块、管道分析模块、实时监测模块和数据展示模块。其中,管道物联网模块是获取河道管网设备信息,并显示到物联网平台上,提供搜索、筛选、查询等功能。管道分析模块能够提供所需的八种水资源管网分析功能,辅助用户对于管网地图的分析和理解。实时监测模块负责水质监测数据的实时查询、监控和报警功能。而在数据展示模块开发过程中,以D3.js库和dc.js库为基础,重新开发了一套数据可视化框架,实现了KPI (Key Performance Indicator)的跨平台展示。综上所述,本论文以实际项目为基础,体现了IOW框架结合D3.js库等一系列HTML5新技术而形成的设计方案的可行性、高性能和前瞻性,提高了原有IOW框架中实时数据监测的性能,改进了数据可视化技术方案。从项目启动至今,该系统已经通过测试组的一系列测试以及政府单位的验收,正式部署实施,将为杭州市拱墅区的城市水资源管理提供有力的支持,并对IOW框架与其他新技术的兼容做出了有益的探索。