WEB组态编辑器(BY组态)介绍

 体验地址:http://www.byzt.net:60/sm/

BY组态是一款非常优秀的纯前端的【web组态插件工具】,可无缝嵌入到vue项目,react项目等,由于是原生js开发,对于前端的集成没有框架的限制。同时由于BY组态只是一个插件,不能独立运行,必须嵌入到你方软件平台才能使用,所以你方软件平台需要提供后台接口来支撑BY组态插件的运行。BY组态为你方软件平台添加组态工具提供了非常友好解决方案。BY组态工具能与你方软件平台完全融为一体,没有任何违和感。目前BY组态广泛应用于化工、石化、制药、冶金、建材、市政、环保、电力等几十个行业。 BY组态是一款性能稳定,功能易用,嵌入方便的一款网页端组态插件。只需实现简单的几个接口便能使您的软件平台拥有组态功能,在线监测,反控等功能。

        可以广泛应用于化工、石化、制药、冶金、建材、市政、环保、电力等几十个行业。

一、产品简介

        BY组态是贵州九元四方科技完全自主研发的集实时数据展示、动态交互等一体的全功能可视化平台。帮助物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等场景快速实现数字孪生、大屏可视化、web组态、SCADA等解决方案。具有实时监控、多样、变化、动态交互、高效、可扩展、支持自动算法、跨平台等特点,最大程度减少研发和运维的成本,并致力于普通业务人员 0 代码开发实现数字孪生、大屏可视化、web组态、SCADA等解决方案。

 2573326c8875490bba22d5b38f5610e4.png

8d2a3991393e453fbbf9ec88f3c5b7ca.png

380d3befb44a46d2bda9b5a51b8cf25c.png

90ec3e456ed24f6590cdf761bcd9abeb.png

27ece3514cfa45d2a78ad482ab4566ed.png

7fbe0a1347bc4045b1f90e32a2cbe850.png

19d2e2d41e87430ebfdb23737c3b5b43.png

96e9db48c1ca4ad7ae6b4047ddaf33a9.png

3797d76b39904ca5b948db0a803915f0.png

d438114b03ea48458cf5d09203e3c62d.png

47cbd01794f94f6888a6a6b8b3c17bfe.png

二、行业痛点

        随着行业的发展、智能制造,智能控制、工业控制,对网页版软件的需求越来越复杂,要求原来越高。传统的单机版软件(如组态王,力控,等)正逐步被网页版软件取代。对于软件服务商来说,将单机版软件转变为网页版软件已经到了势在必行的地步。那么转变是一个复杂的过程,尤其是软件里面的组态功能部分,对于公司或个人都会面临以下几方面的问题。

    1、无相关组态开发经验,无技术积累。

    2、开发周期长,如果有项目落地,无法在短时间内完成这么繁琐的工作。

    3、稳定性,因为功能繁琐,必须过长时间的打磨才能有一个比较稳定的版本。

     这些问题导致了公司的项目停止不前,进度缓慢,甚至影响到了项目的整体架构或方案。我们自主研发的BY组态插件很好的解决了这些问题

三、插件优点

    1、百度搜索排名靠前(没有经过seo优化,纯粹自然发酵)。

    2、应用时间长,至今为止经过了7年的市场验证,版本较为稳定。

    3、BY组态插件可以嵌入到任何网页版软平台件中,无需繁重的开发工作。

    4、插件以源码方式提供,方便对插件本身进行个性化的二次开发。

    5、界面人性化设计,操作简便。

    6、内置海量(2000个左右)组件(图元),图元组件可以自由添加,画面搭建方便。

    7、自适应任何屏幕,包括手机,电脑,平板电脑。

    8、采用websocket 方式与后台交互,画面实时响应。

    9、提供websocket后台服务端java 代码。

    10、掉线自动从新链接,无需人为刷新。

    11、支持画面保存到模板功能,方便快速创建新的画面。

    12、只需实现少量接口即可完成整个web组态功能。

    13、人工实时线上服务,使用无忧。

    14、一次购买,终生升级。

四、接口汇总,只需实现少量接口就能让你的平台拥有组态功能

序号接口名称接口描述接口位置备注拥有版本实现顺序
1saveStageData保存场景画面byzt/config/InitConfig.js所有版本1
2editStageData编辑场景画面byzt/config/InitConfig.js所有版本2
3viewStageData监控端查看实时场景画面byzt/config/InitConfig.js所有版本3
4$.ajax上传自定义图片组件uploadImage.html    190行填写自己的后台接口,用于保存图片所有版本4
5getMyMoudleData获取我的组件(查询自定义上传的图片)byzt/config/InitConfig.js所有版本6
6deleteMyMoudleData删除我的组件(删除自定义上传的图片)byzt/config/InitConfig.js所有版本7
7getXm获取项目byzt/config/InitConfig.js画面组件点击绑定设备的时候的下拉列表,根据下拉列表配置的情况,选择实现某些接口所有版本5
8getSb获取设备
9getCj获取从机
10getCgq获取传感器
11saveStageModuleData保存画面模板byzt/config/InitConfig.jsvip版本8
12getMyMoudleStageJsonData获取我的画面模板byzt/config/InitConfig.jsvip版本9
13deleteMyMoudleStageData删除我的画面模板byzt/config/InitConfig.jsvip版本10
14table.render画面跳转时要跳转到的目标画面列表targetStage.html  101行填写自己的后台接口,用于查询列表vip版本11

五、插件展示

9d0ae856beed4829a668dcefe62613c7.png77a4ab8406d9440b8653971d39efcbf4.png

细节展示

7f71c8b1e6ba926907bea384e77d0688.png  5f518924dbef8e2060b748ade308fc4e.png  0f1b3c342b8fd78c8bb1bdf99e94a6f3.png  934c5200e845ea579d53846d78939067.png

 b28c1f1b6285b507b233d3ad46b54e2e.png

 631518e22caf11773da2b0358468f9f1.png

1555dbe045757b6e103c1ac46a972c22.png​                 b44260ba3e13f7dac940a9a2c75b730c.png

六、功能列表

3100f72bca274ce096bb5d11daa9e713.png

七、数据流向及嵌入原理

9b973bd356d74b6a8e0b7956cade1737.png

嵌入原理

ab66aa57fb9544cab4872d9ed95c582e.png

八、接入步骤

d4158cc7ddf941c7a0bd6197254182af.png

九、详细说明书

7c941a0c6e7e477181e4eab9f9a54b1a.png

十、常见问题
问题1
问:如何将BY组态插件嵌入到我们的系统,我们的系统是vue项目?
答:将我们的BY组态插件独立插件部署在tomcat或者其他容器,然后在vue里面使用iframe嵌入。
问题2
问:组态完成后,保存后是生成新的监控画面吗?
答:不是,保存后是将画面所有数据以JSON格式保存到数据库,监控页面是固定的页面,在调用监控页面的时候传入之前保存到数据库的画面的Id,监控页面会根据id把保存好的画面JSON查出来还原为画面。
问题3
问:画面绑定了10个数据点,但是我从后台传到前台的数据有100个数据点,监控画面会自动过滤吗?
答:是的,监控画面会自己过滤。

问题4

问:websocket是一个画面一个链接吗?每个画面支持多少个数据点?
答:是的一个画面一个websocket链接,每个画面支持无数个数据点。
问题5
问:绑定设备的时候我们没有从机怎么办?
答:绑定设备选择的下拉列表是可以配置的,如果没有从机去掉配置就可以了。
问题6
问:后台系统如何知道组态页面绑定了那些传感器。我如何有针对性的往监控页面传输数据点的数据。
答:组态点击保存的时候,会传入当前画面绑定的所有数据点的id,这些id可以保存在数据库,当后台收到数据点数据的时候,可以吧id拿出来和数据库中保存的id进行比对。id一致的就传入到监控页面。
问题7
问:你们提供数据库吗?
答:我们是纯前端,不提供数据库,数据库表需要你们自己建,我们会提供表结构给你们参考。
问题8
问:你们组态中的组件,元件,可以自己做吗?
答:可以的,我们完全开放源码,所有组件你们都可以自己添加。
问题9
问:监控画面传输数据使用的是什么方式?
答:为了画面能够实时响应数据,我们使用的是websocket传输数据。我们提供websocket服务端(JAVA)的代码,复制到你们的项目就可以使用。
问题10
问:我们是工厂,元件比较多,一个画面放不下怎么办?
答:可以拆分为多个画面,画面和画面之前有按钮可以切换(该功能vip版才有)。

问题11
问:后台通过websocket往监控端画面传输数据,数据格式是什么?
答: 传输数据的时候,数据格式是JSON。比如画面绑定了5个数据点,那么json可以包含5个数据(可以更多,画面会自己过滤无用的数据。也可以少于5个),json的键是绑定数据点的id。

### 工业组态图绘制工具和技术概述 工业组态图是一种用于监控和管理工业生产过程的图形界面,通常涉及复杂的 2D 和 3D 可视化。以下是几种常用的工业组态图绘制工具及其特点: #### 图扑软件 (HT for Web) 图扑软件是一款基于 HTML5 的工业级可视化开发框架,支持高性能的 2D 和 3D 组态图绘制[^1]。其核心设计理念围绕着 **Heavily Canvas Based for Ultimate Performance** 展开,这意味着它能够通过局部刷新、批量聚合以及图像缓存等方式显著提升性能。具体实现中,开发者可以使用 `ht.graph.GraphView` 来构建 2D 面板,而 `ht.graph3d.Graph3dView` 则负责处理更复杂的 3D 场景。 对于实际项目而言,例如高炉炼铁大屏可视化的案例中,显示配置文件 (`display.json`) 主要定义了二维图纸的内容,并采用矢量绘图技术呈现细节;而对于三维场景,则依赖于建模工具(如 3ds Max)生成的对象文件(OBJ 和 MTL),这些文件可以直接被 HT 解析并加载到应用中[^2]。 此外,图扑还提供了一个无代码编辑器,允许用户无需编程即可完成许多常见的组态任务,从而提高了生产线管理和维护效率。相比传统的 SCADA 系统(如 InTouch 或 WinCC),这种基于浏览器的方式更加灵活且易于扩展[^3]。 #### 其他常用工具 除了图扑之外,还有其他一些流行的工业组态图制作解决方案值得了解: - **EPLAN Electric P8**: 主要面向电气工程领域,擅长自动化系统的电路设计与文档编制。 - **InTouch by Wonderware**: 提供全面的过程控制功能,适用于多种行业环境下的 HMI 开发工作。 - **KepWare KEPServerEX**: 虽然本身并非专门针对UI的设计产品,但它作为OPC服务器提供了强大的数据连接能力,常与其他HMI工具搭配使用。 以上提到的各种技术和工具有各自的优势所在,选择时应考虑项目的特定需求和个人偏好等因素综合判断。 ```javascript // 示例:如何在 HT 中加载 OBJ 模型 var modelData = ht.DataModel(); var graph3dView = new ht.graph3d.Graph3dView(modelData); graph3dView.loadObj('path/to/model.obj', 'path/to/material.mtl'); document.body.appendChild(graph3dView.getView()); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值