• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

WEB组态(电力、能源、工业)技术分享 – 功能框架与技术

互联网 diligentman 1周前 (01-14) 7次浏览

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

WEB组态(电力、能源、工业)技术分享 - 功能框架与技术

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

一、WEB组态基本功能

  1. 组件库:提供组态画图的图元。分为两个部分,一是基础元素:包含直线、矩形、圆、文字、图片、多边形等基础的图元,是任何组件的基础;二是自定义的组件:小编从事电力能源行业,所以定义了电力里面的组件,如刀闸、断路器、变压器、PCS等电气组件。针对不同的行业,可以组不同的组件。这些组件都是由这些基础元素构成的。组件和组件之间是有关联关系的,怎么关联的呢,这就需要一个特殊的图元,引脚。组件上的引脚,可以认为它是一个锚点,从锚点出发和另一个组件的锚点上建立一条连接线,来代表他们之间是有连接关系的。
  2. 场景:提供绘画的容器,可以理解是一块画布;在画布上创作想要的作品。我的作品肯定是电力接线图。场景还提供了事件的处理,比如图元的选择和移动等;都是在鼠标响应事件里处理的。
  3. 属性框:用来展示和修改图元的属性,包括图元的位置、尺寸、颜色等配置信息。
  4. 动画配置:这个功能在drawio、墨刀画图工具上是没有的,是电力、工业组态里面一个特有功能,为什么这么说,电力接线图中的组件是要与实际的设备相关联的,要实时显示出这个设备的状态,譬如在图形上画了一个断路器组件,且与实际的断路器设备做关联,当实际断路器设备断开时,图形界面与之相对的断路器组件也应该是开的状态,反之就是闭合的状态。这种状态的变化是动画配置的一种。还有监测遥测值变化的,文字(数值)变化的动画;显示/隐藏的动画,也可以根据值做位置移动、背景填充的动画。可以多个动画作用到一个组件或者图元上。
  5. 事件配置:事件的配置就相对容易理解多了,很多画图工具都有事件配置,也都基本相似。在电力接线图中常见的事件应用,譬如点击一个文本,进行画面的跳转。通过配置鼠标点击、双击、右键、按下、抬起等事件,来实现你想要的动作功能,这些功能一般都是应用程序内置的。如果内置功能的不满足需求,也可以配置一段脚本,用脚本来实现你的业务逻辑。
  6. 辅助功能:一个好用的WEB组态工具,一定提供了好多好用的辅助功能,来帮助你完成图形组态;常见的,图元选择框、图元的组与解组、左右对齐、间距、剪切、复制、粘贴、撤销、回滚等功能。
  7. 预览:当图形画面组态完成,配置好对应的事件与动画;这个时候就可以启动预览功能。来观察组态的画面与功能是否正确。相当于编辑态到运行态的切换;和编辑好HTML的页面,放到在http-server的服务下,在浏览器里看运行效果是一样的。不知道预览啥样,上图
    WEB组态(电力、能源、工业)技术分享 - 功能框架与技术
    这里图形的动画并不是关联了真实设备,而是小编写的一段仿真代码来驱动组件状态和文本值的变化。

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

  1. 为什么用SVG技术,而不是canvas

SVG的优势:

  • SVG是矢量图形,缩放不失真
  • 通用标准,各电力厂家都支持SVG格式的图形。
  • SVG格式的文件可以直接在浏览器里显示,天然支持。canvas则要额外做序列化工作;读取文件解析后,再画到canvas画布上。

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

  1. SVG的框架库有也有很多,为啥选SVG.js,下面就来做下比较,
    WEB组态(电力、能源、工业)技术分享 - 功能框架与技术

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

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

{{o.name}}


{{m.name}}


喜欢 (0)