油田供电管理需要电力维修人员通过现场巡线检查开关、变台等设备信息是否与原始线路图相符并实时修改设备信息入库,同时对巡线过程中发生的故障按照安全标准化流程处理并记录、上传音频文件。根据现场的实际情况,需要开发移动端与PC端结合的多平台应用管理系统。基于以上需求,本文重点研究网页线路图的绘制及网页音频的录制回放,最终采用HTML5技术开发电力生产信息平台,实现“一次开发,随处运行”。本文开发一套Web应用程序,同时适用于PC端和移动设备的维护管理。在研究现有网页技术的基础上,提出了一种基于HTML5新技术的网页开发方法,弥补了传统网页开发依赖插件的不足。首先通过解析Auto CAD的DXF格式文件作为线路图绘制的数据来源。研究了Canvas的核心绘图技术,设计并实现了线路图交互事件,针对Canvas触发事件只能到达画布层这一问题,研究了内部元素事件响应设计的方法。同时,为提高绘制渲染的效率,提出了分层绘制架构。采用面向对象的思想对Canvas API二次封装,实现了线路图基本图元的绘制。其次研究网页音频的录制回放技术,利用Audio API结合Web RTC技术实现音频的录制和回放。同时,为满足网络实时传输的需要,深入研究网页音频压缩的原理及技术,实现了适合网络传输的音频录制回放方法。最后,通过对上述关键技术的研究,结合油田电力生产的实际需要,设计并完成了电力生产信息平台的开发应用,具有理论和实际意义。