java web 组态_WEB组态（电力、能源、工业）技术分享 - 功能框架与技术

在开篇我简单介绍介绍了下为什么要实现WEB组态。那本篇将介绍WEB组态的基本功能，及实现它运用了哪些技术。在这个技术快餐时代，肯定是站在巨人的肩旁上，才能更快的实现目标；所以小编也用了互联网WEB前端的一些主流框架。能一目了然的概括功能和技术不。安排，

小编实现的WEB组态是分前端和后端的。前端是用来给用户组态画图和配置操作，后端会对用户组态的数据进行保存、读取、处理一些逻辑。当然也可以把前端和后端集成到一起，用Electron来实现桌面单应用程序。后端服务目前只做了文件的读取与保存工作，也可以加入组件的发布与定制等其他功能。之所你采用node.js与egg.js是因为简单、快捷，节省你的开发时间，非常适合个人开发的小项目。当然小编讲述的重心是WEB组态的前端部分。

一、WEB组态基本功能

组件库：提供组态画图的图元。分为两个部分，一是基础元素：包含直线、矩形、圆、文字、图片、多边形等基础的图元，是任何组件的基础；二是自定义的组件：小编从事电力能源行业，所以定义了电力里面的组件，如刀闸、断路器、变压器、PCS等电气组件。针对不同的行业，可以组不同的组件。这些组件都是由这些基础元素构成的。组件和组件之间是有关联关系的，怎么关联的呢，这就需要一个特殊的图元，引脚。组件上的引脚，可以认为它是一个锚点，从锚点出发和另一个组件的锚点上建立一条连接线，来代表他们之间是有连接关系的。

场景：提供绘画的容器，可以理解是一块画布；在画布上创作想要的作品。我的作品肯定是电力接线图。场景还提供了事件的处理，比如图元的选择和移动等；都是在鼠标响应事件里处理的。

属性框：用来展示和修改图元的属性，包括图元的位置、尺寸、颜色等配置信息。

动画配置：这个功能在drawio、墨刀画图工具上是没有的，是电力、工业组态里面一个特有功能，为什么这么说，电力接线图中的组件是要与实际的设备相关联的，要实时显示出这个设备的状态，譬如在图形上画了一个断路器组件，且与实际的断路器设备做关联，当实际断路器设备断开时，图形界面与之相对的断路器组件也应该是开的状态，反之就是闭合的状态。这种状态的变化是动画配置的一种。还有监测遥测值变化的，文字(数值)变化的动画；显示/隐藏的动画，也可以根据值做位置移动、背景填充的动画。可以多个动画作用到一个组件或者图元上。

事件配置：事件的配置就相对容易理解多了，很多画图工具都有事件配置，也都基本相似。在电力接线图中常见的事件应用，譬如点击一个文本，进行画面的跳转。通过配置鼠标点击、双击、右键、按下、抬起等事件，来实现你想要的动作功能，这些功能一般都是应用程序内置的。如果内置功能的不满足需求，也可以配置一段脚本，用脚本来实现你的业务逻辑。

辅助功能：一个好用的WEB组态工具，一定提供了好多好用的辅助功能，来帮助你完成图形组态；常见的，图元选择框、图元的组与解组、左右对齐、间距、剪切、复制、粘贴、撤销、回滚等功能。

预览：当图形画面组态完成，配置好对应的事件与动画；这个时候就可以启动预览功能。来观察组态的画面与功能是否正确。相当于编辑态到运行态的切换；和编辑好HTML的页面，放到在http-server的服务下，在浏览器里看运行效果是一样的。不知道预览啥样，上图

这里图形的动画并不是关联了真实设备，而是小编写的一段仿真代码来驱动组件状态和文本值的变化。

二、技术选型。 WEB组态前端技术支撑的框架主要有react、antd、events、SVG.js。其中react和antd是应用程序页面的搭建与布局；也可以用VUE和element框架了替换。真正组态的核心是SVG.js框架，负责提供场景、图元和鼠标动作处理。events是用来分发和接收自定义的事件处理。

为什么用SVG技术，而不是canvas

SVG的优势：

SVG是矢量图形，缩放不失真

通用标准，各电力厂家都支持SVG格式的图形。

SVG格式的文件可以直接在浏览器里显示，天然支持。canvas则要额外做序列化工作；读取文件解析后，再画到canvas画布上。

虽然SVG性能上要比canvas略差，但足以满足电力接线图的展示了。 如果不是很在乎以上SVG优势，也可以用canvas来实现；推荐用pixi.js库。

SVG的框架库有也有很多，为啥选SVG.js，下面就来做下比较，

我个人认为SVG.js的代码可读性要更好一点，就是对应的资料性对少些。官网也提供了使用文档，如果想对它有更深入的了解，那就读SVG.js的源码吧。

关于SVG.js的动画，在我之前的博客写过，感兴趣的可以去看下。不知不觉夜已深，今天就先到这里。如果哪里写的不对，还请各位看官指正。