「AntV」使用X6完成你的组态软件开发-五八三

关注技术方面可以直接跳转第二部分“实现”章节?

一、简介

1.组态背景：

组态软件是一种用于设计和配置工业自动化控制系统的软件。它通常用于工业控制、自动化和监控领域，用于创建人机界面（HMI）、监视和控制面板、数据采集、数据分析和报告等。组态软件可以帮助用户轻松地创建可视化的界面，以便实时监控和控制各种工业过程。

什么？太晦涩看不懂，简单列两张图大家就明白很多了：

上两图摘自西门子wincc和图扑软件

2.应用场景

首先了解几个概念，工业物联网(IIoT) 被定义为一组设备和应用，允许企业创建从核心到边缘的端到端连接环境。其还包括传统的物理基础设施，如集装箱和物流卡车，以收集数据，对事件做出反应，并在智能设备的帮助下做出更明智的决策。正如上图所示，通过组态软件为企业提供更快的实时数据，制造商或者企业可以更好地了解生产线的故障，尤其是有关制造机器的故障，帮助企业管理人员更好地了解机器状态和工艺流程。

列举一些组态软件常见的场景，包括且不限于：**工业（控制）、****变电站管理、****电厂电气、****配电室监控、****市政环保、**水力自动控制等

3.市面软件

最早进入国内市场的其实就是西方众多的自动化软件品牌，说几个大头，例如西门子 WinCC，可谓是业界的“微软”了，软硬件高度集成，功能全而稳定。再比如施耐德旗下的悉雅特 Citect和Wonderware InTouch，都属于是背靠大树好乘凉。近些年也涌入了类似Ignition这样支持跨平台的，浏览器运行的新新组态软件

当时西方的软件品牌基本算是垄断市场了，国内企业也是重拳出击，组态王在我了解中应该是国内第一款商品化的组态软件产品，填补了国内无组态软件的空白。后来也涌现出很多国产软件加入竞争，比如力控科技的“三维力控”、九思易的“易控”、瑞箭软件的“xarrow”等。

二、实现

1.功能剖析

我们可以先看一下AntV X6的官方解释：

X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。

那么组态软件需要有哪些功能呢，我们先从业务的角度简单列5个主要功能，因为业务专业性比较强，我尽量用通俗一点的描述：

向主屏幕中拖拽元件、文字、管线、按钮、工业设施等
对拖到主屏幕的各种元件器材进行尺寸、位置和样式的调整
通过管线连接各个元件器材，表示出逻辑或者数据的流向
元件器材绑定数据，并展示实时信息
主屏幕的预览功能

这些功能自己从0开始做不得起飞咯?。那么，在哪里才能买得到呢（不是），用什么才能最简洁高效的形式完成呢？

首先，这些功能肯定是一个重编辑性的功能，并且前端工作量占比非常大，对比市面上一些同品类开源库，这里有两篇文章已经详细的阐述过了，链接给大家发出来，一篇是对比AntV自己G6的文章：前端图可视化引擎antv的g6和x6区别是什么，如何选择，另一篇收录在官方的语雀中：AntV X6 助力翼支付营销策略编辑器落地，对照着文档，我们来分析一下上述功能在X6中的对应功能：

第一条：向主屏幕中拖拽元件、文字、管线、按钮、工业设施等，正好对应了X6中的Dnd功能，插件包为@antv/x6-plugin-dnd，可能会有同学奇怪，为什么不用Stencil呢，原因主要是需要定制化，使用Dnd的话，自定义程度很高，可以更方便自己去处理样式、元件图库等内容；
第二条：对拖到主屏幕的各种元件器材进行尺寸、位置和样式的调整，可以使用X6插件中图形变换进行处理，对应的包为@antv/x6-plugin-transform
第三条：通过管线连接各个元件器材，表示出逻辑或者数据的流向，这一块涉及到边和连接桩的概念，同样能支撑功能的实现，至于逻辑或者数据的流向完全可以通过自定义边的样式来实现，官方图表示例中有体现出动画效果
第四条：元件器材绑定数据，并展示实时信息，同样也不在话下，官方API文档对于Cell的介绍中提及了业务数据 data的概念：与节点/边关联的业务数据。例如，我们在实际使用时通常会将某些业务数据存在节点/边的 data 上。包含很完善的API方便我们处理节点绑定的数据
第五条：主屏幕的预览功能，首先，官方提供了graph.toJSON()和graph.fromJSON()来导出图中的节点和边，通过json的格式也便于我们向后台保存数据和渲染数据。其次，X6提供了独立的插件包支持导出的功能@antv/x6-plugin-export，将画布内容通过图片格式导出，但是最终我们没有采用这种方法实现，稍后章节会讲到为什么使用了其他方式完成预览功能。

2.设计思路

那必须是先整一个双飞翼布局啊，突击检查，还记得双飞翼(圣杯)布局不用flex怎么实现吗？！

回归正题，我们确定一下设计时的一些思路和步骤

界面布局和组件选择：根据设计目标，确定双飞翼布局，在组件方面，AntV X6 提供了基础的组件，比如矩形、圆形、多边形、折线、图片等，我们这里主要使用图片这一内置节点构成我们大部分的元件和设施。
数据绑定和交互设计：使用 AntV X6 的数据绑定功能，将数据模型与可视化组件进行关联，实现数据的动态展示和更新。同时，设计交互操作，如鼠标点击、拖拽、缩放等，以提供用户友好的交互体验。
自定义样式和主题：AntV X6 提供了丰富的样式和主题设置功能，可以根据需求进行自定义。可以调整组件的颜色、大小、字体等样式，样式主要分为三块：画布、组件、边。

简要的画一个看板：

组件区：放置各种元件
画布：处理画布容器，显示上文所说主屏幕中的各种元件
设置区：对画布、节点进行样式变换、数据绑定
功能区：自定义功能，比如撤销重做、放大缩小、全屏显示、保存预览等功能

3.实现方式

组件的拖拽依靠Dnd来实现，主要步骤是两块，一块是通过new Dnd({...})执行构造方法，指定target，第二块使用dnd.start(node, e)方法，向画布中拖拽组件，官网上面是react的例子，这里使用vue3简单的概括一下：

上图1进行初始化拖拽，并在图2的pinia中定义，其次，定义图3中对需要拖拽的元素添加@mousedown事件，对用图2中的dragNode方法，注意vue3事件中如果需要携带节点参数需要把$event带上哦。

三、其他

1.社区支持

目前官网支持的功能已经很多了，要想和系统相结合得更好需要多钻研一下官方文档，antv官方有一个基于 X6 图编辑引擎、面向 React 技术栈用户的图编辑应用级解决方案叫XFlow，有好些同学应该也需要vue实现的，找到一个社区实现的解决方案，叫x6-vue3-components，其次，官方提供了开发者工具，在笔者写这篇文章的时候才发现，应该是刚更新不久，旨在帮助开发者更方便的开发x6项目，提供了一个对页面元素进行审查的插件。笔者注意到有些组态软件的实现会基于draw.io来实现，在熟悉x6的过程中，可以尝试参考draw.io的功能自己去实现，应该可以更好的帮助大家深入了解x6。