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

前言

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: