组态软件是一种用于设计和配置工业自动化控制系统的软件。它通常用于工业控制、自动化和监控领域，用于创建人机界面（HMI）、监视和控制面板、数据采集、数据分析和报告等。组态软件可以帮助用户轻松地创建可视化的界面，以便实时监控和控制各种工业过程。
什么？太晦涩看不懂，简单列两张图大家就明白很多了：
上两图摘自西门子wincc和图扑软件
首先了解几个概念，工业物联网(IIoT)被定义为一组设备和应用，允许企业创建从核心到边缘的端到端连接环境。其还包括传统的物理基础设施，如集装箱和物流卡车，以收集数据，对事件做出反应，并在智能设备的帮助下做出更明智的决策。正如上图所示，通过组态软件为企业提供更快的实时数据，制造商或者企业可以更好地了解生产线的故障，尤其是有关制造机器的故障，帮助企业管理人员更好地了解机器状态和工艺流程。
列举一些组态软件常见的场景，包括且不限于：**工业（控制）、****变电站管理、****电厂电气、****配电室监控、****市政环保、**水力自动控制等
最早进入国内市场的其实就是西方众多的自动化软件品牌，说几个大头，例如西门子WinCC，可谓是业界的“微软”了，软硬件高度集成，功能全而稳定。再比如施耐德旗下的悉雅特Citect和WonderwareInTouch，都属于是背靠大树好乘凉。近些年也涌入了类似Ignition这样支持跨平台的，浏览器运行的新新组态软件
当时西方的软件品牌基本算是垄断市场了，国内企业也是重拳出击，组态王在我了解中应该是国内第一款商品化的组态软件产品，填补了国内无组态软件的空白。后来也涌现出很多国产软件加入竞争，比如力控科技的“三维力控”、九思易的“易控”、瑞箭软件的“xarrow”等。
X6是基于HTML和SVG的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建DAG图、ER图、流程图、血缘图等应用。
那么组态软件需要有哪些功能呢，我们先从业务的角度简单列5个主要功能，因为业务专业性比较强，我尽量用通俗一点的描述：
这些功能自己从0开始做不得起飞咯。那么，在哪里才能买得到呢（不是），用什么才能最简洁高效的形式完成呢？
那必须是先整一个双飞翼布局啊，突击检查，还记得双飞翼(圣杯)布局不用flex怎么实现吗？！
回归正题，我们确定一下设计时的一些思路和步骤
简要的画一个看板：
组件的拖拽依靠Dnd来实现，主要步骤是两块，一块是通过newDnd({...})执行构造方法，指定target，第二块使用dnd.start(node,e)方法，向画布中拖拽组件，官网上面是react的例子，这里使用vue3简单的概括一下：
上图1进行初始化拖拽，并在图2的pinia中定义，其次，定义图3中对需要拖拽的元素添加@mousedown事件，对用图2中的dragNode方法，注意vue3事件中如果需要携带节点参数需要把$event带上哦。
本篇其实业务层面更加多一些，代码层面很少，一方面是涉及公司隐私，脱敏展示有些麻烦，另一方面市面上还是少有关于web端组件实现的讲解，可参考的资料着实是少，希望能有更多的人能够参与进组态软件生态的的建设，推进国内工业物联网(IIoT)的发展。