热门的前端Web组态软件总结（除FUXA以外）

最新推荐文章于 2025-03-26 08:19:10 发布

青青树木

最新推荐文章于 2025-03-26 08:19:10 发布

阅读量4.8k

点赞数 28

文章标签： javascript 开发语言前端 vue.js vue 动态规划

本文链接：https://blog.csdn.net/qq_42883190/article/details/136400540

版权

随着5G、物联网、大数据等技术的高速发展，各领域逐步向数字化、可视化的人工智能（AI）的方向不断迈进。全球进入工业 4.0 时代，标志着先进的信息技术于制造业紧密结合，将从单纯的生产要素向数据驱动、智能化、高度自动化的方向转型。
在这里介绍几种web组态，方便大家进行选择

1、Drawio

(1)简介

mxGraph是一款基于 web 的绘制流程图的 JavaScript 图表库，免费的开源工具，使用 SVG 和 HTML 进行渲染。mxGraph 库不使用第三方软件，它不需要插件，几乎可以集成到任何框架中。可视化组态的实现很多都是借助于它，但是目前已停止mxGraph开发，需要解决的问题很多，学习参考资料少。
Drawio是一款强大、免费的绘图工具（基本可以替代收费的visio等），使用起来非常方便。支持网页版使用（网页版可以自己部署一套）以及客户端使用（支持windows，MacOS以及Linux）。与mxGraph出自同一家公司，但比mxGraph更加完善。
Drawio是一个基于mxGraph的图表编辑器，可以在浏览器中运行并创建图表，所以只对比较完善的Drawio进行介绍。

(2)技术架构

开发语言：javascript、java

(3)编辑界面展示
在这里插入编辑界面展示图片描述

(4)部分案例展示

泳道展示图
在这里插入图片描述

(5)优势

开源项目
支持二次开发
强大的社区，可以找到一些二次开发的参考资料
自由导入导出文件
支持多种格式
Web版、Desktop版、VSCode插件版供选择

(6)缺点

历史实际上是非常久远，对于一些新的技术语言的支持性不是很好
有大量的原型链修改，代码的可读性和可维护性都不是很好，二次开发需要修改大量的原型链方法
现有的资源比较适用于图表和流程表的开发，并不适用于工业化组态开发，需要扩展和修改的地方比较多

(7)相关网址资料

GitHub地址： github.com/jgraph/draw…
DEMO演示： app.diagrams.net/
官网地址： www.drawio.com/

2、Topology

(1)简介

A diagram (topology, UML) framework uses canvas and typescript. 一个用canvas+typescript写的绘图【核心库，不依赖框架】（微服务架构图、拓扑图、流程图、类图等ULM图，动画、视频支持）。

(2)技术架构

开发语言：canvas+typescript

(3)与后台数据对接方式

支持 mqtt、websocket、或 http 自主请求等多种方式动态监听数据

(4)编辑界面展示

开源部分页面编辑
在这里插入图片描述

完整的案例编辑部分
在这里插入图片描述

(5)部分案例展示
在这里插入图片描述

在这里插入图片描述

(6)优点

本框架目前已经实现了拖拽、缩放、旋转、自定义属性等基础操作，开发者只用关心图表绘画实现即可。
流畅、高性能 - 使用 canvas 和多个场景离屏，操作过程流畅；完全不用担心 SVG 方式 dom 元素过多，性能高效。
自带部分动画效果，能满足基本的需求。使用TypeScript语言。chrome、firefox、ie11等浏览器是没有问题的。

(7)缺点

部分开源，开源部分只满足基本的绘图的要求，无法满足其它功能的要求

(9)相关网址资

演示Demo：乐吾乐Topology - 基于开源的免费可视化绘图工具
github： GitHub - le5le-com/topology: A diagram (topology, UML) framework uses canvas and typescript
官网：https://le5le.com/
文档地址：https://doc.le5le.com/

3、WebTopo

(1)简介

基于 vue+ts 实现的 svg 可视化 web 组态编辑器。可直接把 svg 文件和 vue 组件作为编辑器图形库使用，赋予其缩放和旋转等功能，并支持自定义拓展参数，实时控制组件状态等，主要用于物联网mqtt实时系统图。

(2)技术架构

开发语言：VUE+typescript

(3)与后台数据对接方式

每个组件独立使用http接口和定时器实现，适用于少量组件的应用（组件太多会导致过多连接和定时器）
其它方式的开发未开始

(4)编辑页面展示
在这里插入图片描述

(5)部分案例展示
在这里插入图片描述

(6)优势

技术架构简单，可以很容易的集成到vue项目中
可拓展性强

(7)缺点

没有开发完善，目前处于无人维护的状态
需要自己做大量的的工作完善开发

(8)相关资料网址
GitHub地址： https://github.com/phynos/WebTopo
DEMO演示： https://phynos.github.io/WebTopo/dist/spa/

4、Sovit2D
(1)简介

Sovit2D 是一款强大的基于Web的过程可视化组态软件，具有广泛的设计功能，纯 Web 技术，完全拖放所见即所得的开发环境，使用预定义的小部件轻松创建动态 SCADA 仪表板，无需Web编程知识即可轻松创建直观且吸引人的基于 Web 的 HMI、SCADA、仪表板、IIOT系统，以实现数据可视化和远程设备控制。

(2)技术架构

开发语言：canvas+typescript

(3)与后台数据对接方式
可以选择Rest、Mysql、Oracle、Redis、Excel等连接类型。每种方式，都有对应的添加界面。具体的配置方式，可以参考如下图 Mysql数据源配置、图Rest数据源配置、图 Oracle数据源配置、，图 Redis数据源等配置。

(4)编辑页面展示
在这里插入图片描述

(5)部分案例展示
在这里插入图片描述

(6)优势

消除客户对数据存储安全性的顾虑——在决定Sovit2D技术选型之初，考虑到客户对数据的安全与隐私有顾虑，同时客户需要积累自己的用户行为数据资产，对数据深度应用与功能二次开发，因此我们将私有化部署作为Sovit2D数据的产品核心设计理念。
支持灵活的自由式布局、组件化的设计使设计更加方便、丰富的组件库涵盖各行业模型组件，用户也可以自定义组件，以及对组件进行属性、数据、动画，事件等设置。用户只需通过简单的拖拉拽及配置几分钟上手就可以快速地制作出一张敏捷数据动态可视化模型页面。
提供多种数据源与外部系统通过界面配置进行无缝对接，致力于开发人员或用户0代码即可开发数据可视化展示平台。
通过设置实现Web场景中图形的动画效果如旋转、变色、闪烁、心跳、报警、高度变化、水管流动、沿轨道移动等各种动画，让你的页面展现更加的生动。同时这些动画可以通过与后台数据绑定，由数据触发动画的执行，比如可以根据数据的大小控制旋转的速度，根据状态数据的切换控制闪烁效果或者报警效果等，以此实现模拟实际运行效果的目的。
提供简洁的集成方式，模型制作发布后，模型访问地址通过iframe或JS简单的几行代码即可引入到第三方系统中。

(7)缺点

没有开源版本，需要付费
没有找到相关能把后台信息传到设备的方法

(8)相关资料网址

GitHub地址： https://www.sovitjs.com/index.html
官方文档： https://www.sovitjs.com/document-a1-2734927293901176834.html
DEMO演示： https://www.sovitjs.com/demo.html

5、BY组态

(1)简介

BY组态是一款纯前端的【web组态插件工具】，不能独立运行，必须嵌入到你方软件平台才能使用，你方平台需要提供后台接口来支撑BY组态插件的运行。
BY组态为你方软件平台添加组态工具提供了解决方案。BY组态工具能与你方软件平台完全融为一体，没有任何违和感。目前BY组态广泛应用于化工、石化、制药、冶金、建材、市政、环保、电力等几十个行业。 BY组态是一款性能稳定，功能易用，嵌入方便的一款网页端组态插件。只需实现简单的几个接口便能使您的软件平台拥有组态功能，在线监测，反控等功能。

(2)技术架构