Web SCADA 电力接线图工控组态编辑器

本文介绍了如何使用HTML5技术和SVG实现Web SCADA电力接线图工控组态编辑器。文章详细讲解了编辑器的组成部分,包括palette组件面板、graphView拓扑组件、treeView树组件、propertyPane属性面板和toolbar工具栏,并展示了如何通过HT框架进行布局和数据绑定。此外,文章提到了编辑器在电力、电信等行业中的应用和优势。
摘要由CSDN通过智能技术生成

前言

SVG并非仅仅是一种图像格式, 由于它是一种基于XML的语言,也就意味着它继承了XML的跨平台性和可扩展性,从而在图形可重用性上迈出了一大步。如SVG可以内嵌于其他的XML文档中,而SVG文档中也可以嵌入其他的XML内容,各个不同的SVG图形可以方便地组合, 构成新的SVG图形。这个 Demo 运用的技术基于 HTML5 的技术适应了只能电网调度、配电网运行监控与配电网运维管控,通过移动终端实现 Web SCADA 账上运维的时代需求。由于传统电力行业 CS 桌面监控系统一直到新一代 Web 和移动终端进化中,HT 是实施成本最低,开发和运行效率最高的前端图形技术解决方案。SVG 矢量图形大家都不会陌生了,尤其是在工控电信等领域,但是这篇文章并不是要制作一个新的绘制 SVG 图的编辑器,而是一个可绘制矢量图形并且对这个图形进行数据绑定的更高阶。

效果图

图片描述

http://www.hightopo.com/demo/2deditor/HT-2D-Editor.html

代码实现

整体框架

根据上图看得出来,整个界面被分为五个部分,分别为 palette 组件面板,toolbar 工具条,graphView 拓扑组件,propertyPane 属性面板以及 treeView 树组件,这五个部分中的组件需要先创建出来,然后才放到对应的位置上去:

palette = new ht.widget.Palette();//组件面板
toolbar = new ht.widget.Toolbar(toolbar_config);//工具条
g2d = new ht.graph.GraphView(dataModel);//拓扑组件  
treeView = new ht.widget.TreeView(dataModel);//树组件
propertyPane = new ht.widget.PropertyPane(dataModel);//属性面板
propertyView = propertyPane.getPropertyView();//属性组件
rulerFrame = new ht.widget.RulerFrame(g2d);//刻度尺

图片描述

这些布局,只需要结合 splitView 和 borderPane 进行布局即可轻松完成~其中 splitView 为 HT 中的 分割组件,参数1为放置在前面的 view 组件(可为左边的,或者上面的);参数2为放置在后面的 view 组件(可为右边的,或者下面的);参数3为可选值,默认为 h,表示左右分割,若设置为 v 则为上下分割;参数4即为分割的比例。borderPane 跟 splitView 的作用有些相似,但是在这个 Demo 中布局,结合这两种组件,代码看起来会更加清爽。

borderPane = new ht.widget.BorderPane();//边框面板
leftSplit = new ht.widget.SplitView(palette, borderPane, 'h', 260);//分割组件,h表示左右分割,v表示上下分割
rightSplit = new ht.widget.SplitView(propertyPane, treeView, 'v', 0.4);
mainSplit = new ht.widget.SplitView(leftSplit, rightSplit, 'h', -260);                                              

borderPane.setTopView(toolbar);//设置边框面板的顶部组件为 toolbar
borderPane.setTopHeight(30);
borderPane.setCenterView(rulerFrame);//设置边框面板的中间组件为 rulerframe
mainSplit.addToDOM();//将 mainSplit 的底层 div 添加进 body 体中

dataModel.deserialize(datamodel_config);//反序列化 datamodel_config 的内容,将json内容转为拓扑图场景内容
g2d.fitContent(true);

布局结束后,就要考虑每一个容器中应该放置哪些内容,我将这些内容分别封装到不同的函数中,通过调用这些函数来进行数据的显示。

Palette 组件面板

左侧的 Palette 组件面板需要向其内部添加 group 作为分组,然后再向组内添加节点。但是我们使用这个组件的最重要的一个原因是它能够拖拽节点,但是因为我们拖拽后需要在 graphView 拓扑组件中生成一个新的节点显示在拓扑图上,所以我将拖拽部分的逻辑写在了 graphView 拓扑组件的初始化函数中,这一小节就不做解释。

虽然说最重要的因素是拖拽,但是不可否认,这个组件在分类上也是非常直观:

图片描述

如上图,我在 Palette 中做了三个分组:电力、食品加工厂以及污水处理。并在这些分组下面填充了很多属于该组类型的节点。我将这些分组的信息存储在 palette_config.js 文件中,由于三组中的信息量太大,这里只将一小部分的信息展示出来,看看是如何通过 json 对象来对分组进行数据显示的:

palette_config = {
    scene: {
        name: '电力',
        items: [
            { name: 
HV-SCADA-WEB电力监控系统软件,为用户提供一个灵活部署,实时在线,24小时随时随地访问管理的可靠,灵活且高性能的电力监控方案,帮助用户实现在线监测,自动预警告警,提前做出预防式维护,减少断电时间,提高用电效率。该软件在保证实用性高实时性和可靠性的同时,通过功能模块化设计供用户选择,从而可以帮用户实现处理简单直至复杂的电力监控应用需求。 HV-SCADA-WEB版内嵌易用的网页显示组态工具和强大的功能友好的交互界面。前端显示和后台管理基于标准浏览器展示和管理。标准化的全鼠标点击操滚轮拖动操作,自导航操作无学习成本。关键的涉及安全的命令操作采用主流的安全短信验证码方式,确保应用多重安全。HV-SCADA-WEB前端和后台均采用基于最先进的谷歌流览器,系统架构充分考虑操作的安全性、可靠性和高效性以及数据的完整性。基于WEB云架构设计,业务扩展高度自主灵活:特别方便实现比如热/备冗余的I/O配置,主/备通讯,主/备服务器配置,安全防火墙等。根据帐号分配不同级别权限, 保证系统运行管理控制的安全可靠。 HV-SCADA-WEB完全功能模块化设计,可根据实际选择需要的功能模块,也可全选作为完整的解决方案,具备高稳定性,通用性,即用性,易用性和安全性。支持常用通讯协议如MODBUS-RTU,MODBUS-TCP,DL/T645-2007、CJ/T188等已集成到系统平台,并支持新设备协议开发接入系统。 运行可靠、性能稳定、功能可模块组合、部署云平台的电力监控系统,可帮助单位供配电运行管理部门随时随地在线掌握电力设备运行状态,计划性预防性安排维护更换,减少意外停电,保障可靠供电,提高供配电可靠性,降低意外损失,提高运行效率。 HV-SCADA-WEB版,广泛运用于工商业和智能建筑,包括: *厂矿供配电 *智能建筑 *商业广场 **政府机关 *医院学校 *石油化工 *冶金钢铁
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值