随着工业4.0时代的到来,企业加快了产业技术结构的调整和基础设施的升级。组态监控软件在工业控制领域发展多年,为企业现场设备的监控、数据的采集提供了灵活易用的工具,随着计算机技术的发展,传统C/S架构的组态监控软件,难以满足企业现代移动端办公的需求,组态厂商也积极研发并推出B/S架构的组态软件,但是价格相对较高,技术尚未成熟,后期支持较困难,难以满足企业个性化的定制需求。本文在分析研究了国内外组态软件的基础上,设计开发了一套基于B/S架构可在线运行、无缝切换的组态编辑器和监视器。文章首先阐述设计该软件的目的和意义,然后进行需求分析,接着实现了组态编辑器和监视器的功能模块。在技术选型中,软件开发基于HTML5/CSS3/JavaScript前端技术,编辑器和监视器采用canvas图元绘制、fabric.js对象事件驱动技术。后端设计了历史数据库,服务器采用node.js技术。通过数据的JSON格式、WebSocket通信、localStorage存储分析了该软件前后端的数据流。最后搭建了一整套前端到后端的测试环境,验证了所开发的组态软件编辑器和监视器的基本功能。本文所做工作的创新点在于:(1)设计并实现了一套基于B/S架构的轻型组态软件,该软件的组态编辑与运行均基于浏览器,且在技术选择上避免平台相关性,保证了系统运行的跨平台能力。(2)前端采用纯JavaScript技术设计实现编辑器和监视器,采用全双工通信技术WebSocket实现数据交互,不依赖任何额外的插件(如Flash),无需客户端服务配置(如IIS),布署简单,通信可靠性、实时性好。(3)客户端采用MVC架构,模型层使用本地存储为客户端界面增加了测点数据的映射,使数据量可控,且解决了相同测点数据重复请求的问题,最终减轻服务端的服务响应负荷,减少通信中的冗余数据。