Web组态可视化编辑器 快速绘制组态图

news2024/10/6 22:21:21

   演示地址:by组态[web组态插件]

随着工业智能制造的发展,工业企业对设备可视化、远程运维的需求日趋强烈,传统的单机版组态软件已经不能满足越来越复杂的控制需求,那么实现Web组态可视化界面成为了主要的技术路径。

行业痛点

对于软件服务商来说,将单机版软件转变为网页版软件已经到了势在必行的阶段。但是,转变是一个复杂的过程,尤其是软件里面的组态功能部分,对于公司或个人都会面临以下几方面的问题:

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

2、开发周期长,无法在短时间内完成繁琐工作。

3、功能复杂,必须花费很长时间的测试升级。

什么是组态软件

组态软件,又称组态监控系统软件,是指用于数据采集和过程控制的专用软件,是自动控制系统监控级的软件平台和开发环境。实际上,这些软件也是一种通用级的软件工具,可以通过灵活的配置快速建立工业自动控制系统的监控功能。组态软件广泛应用于机械、汽车、石油、化工、造纸、水处理、过程控制等领域。

什么是Web组态编辑器

Web组态编辑器是指通过浏览器操作组态工具、浏览组态画面,实现工程管理、组态编辑以及组态运行三大功能。通过实现图元组态、可视化图表组态、数据库组态的配置与关联,完成基于Web服务的实时数据监控与服务端的多用户访问等。

从用户操作与界面呈现的角度来说,BY组态编辑器采用标准HTML5技术,基于B/S架构进行开发,支持WEB端呈现,支持在浏览器端完成便捷的人机交互,简单的拖拽即可完成可视化页面的设计。

从软件架构来说,​​BY组态编辑器具备高度的开放性。随着应用场景的逐渐增多,系统必然需要进行功能扩展,因此,BY组态编辑器不仅支持多种数据接口,更是提供了二次开发接口,可以由用户自行完成二次开发。本质上,BY组态软件在功能上集成了大量通用模块和个性化模块,以实现不同行业用户的需求。当然,针对具体的用户,支持定制化模块的开发与配置。

Web组态编辑器特点

拖拽式场景编辑

拖拽式操作,轻松搭建组态场景

便捷的工具栏,可快速排版和修改样式

支持自定义动画,模拟真实动态效果

丰富的组件模板

内置工业组态、IT运维、电力、流程图等多种行业图形

丰富精美模板,帮助各行业用户快速上手

支持自定义图形库,满足用户个性化绘图需求

支持多种数据源

接入公网或本地数据源,可视化数据绑定,实现数图联动

轻量化的数据源管理,支持在线创建云数据接口

便捷的系统集成

采用HTML5技术,基于B/S架构,无需安装客户端

支持嵌入第三方系统或者集成平台

Web组态编辑器经典示例

   演示地址:by组态[web组态插件]

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

一、产品简介

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

 2573326c8875490bba22d5b38f5610e4.png

8d2a3991393e453fbbf9ec88f3c5b7ca.png

380d3befb44a46d2bda9b5a51b8cf25c.png

90ec3e456ed24f6590cdf761bcd9abeb.png

27ece3514cfa45d2a78ad482ab4566ed.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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1704716.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Akamai 最新版逆向分析 akamai逆向 dhl网址

原创文章,请勿转载! 本文内容仅限于安全研究,不公开具体源码。维护网络安全,人人有责。 URL(base64加密处理):aHR0cHM6Ly93d3cuZGhsLmNvbS9jbi16aC9ob21lL3RyYWNraW5nL3RyYWNraW5nLWVjb21tZXJ…

小米8SE刷root(面具)

首先准备好一根数据线,一部小米8SE手机,和一台电脑 接下来需要的软件我会给出链接和使用方法,以及分享我遇到的困难和解决方案 下面操作不会的,可以参考这个博主的教程,我也是跟着这个教程刷好的 第一步解锁BL 开启开…

OpenWrt 23.05 安装之后默认空间小 磁盘扩容 教程 软路由实测 系列六

1 安装fdisk opkg update opkg install fdisk #查看磁盘 rootOpenWrt:~# fdisk -l GPT PMBR size mismatch (246303 ! 250069679) will be corrected by write. The backup GPT table is not on the end of the device. Disk /dev/sda: 119.24 GiB, 128035676160 bytes, 25006…

在React中使用Sass实现Css样式管理-10

0. 什么是Sass Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器,是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间: Sass 引入合理的样式复用机制,可以节约很多时间来重复。支持变量和函…

【前端之ES6语法】

前端之ES6语法 1. ES6简介2. ES6新特性3.ES6不支持,使用babel3.1 参考文献 4.let和const命令5. 模版字符串6.函数之默认值、剩余参数7. 函数之扩展运算符、箭头函数8.箭头函数this指向和注意事项9.解构赋值10.对象扩展11.Symbol类型12.Set集合类型13.Map数据类型14.…

C++ | Leetcode C++题解之第116题填充每个节点的下一个右侧节点指针

题目: 题解: class Solution { public:Node* connect(Node* root) {if (root nullptr) {return root;}// 从根节点开始Node* leftmost root;while (leftmost->left ! nullptr) {// 遍历这一层节点组织成的链表,为下一层的节点更新 next…

第八大奇迹

目录 题目描述 输入描述 输出描述 输入输出样例 示例 输入 输出 运行限制 原题链接 代码思路 题目描述 在一条 R 河流域,繁衍着一个古老的名族 Z。他们世代沿河而居,也在河边发展出了璀璨的文明。 Z 族在 R 河沿岸修建了很多建筑&#xff0c…

Ps 滤镜:消失点

Ps菜单:滤镜/消失点 Filter/Vanishing Point 快捷键:Ctrl Alt V 两条平行的铁轨或两排树木连线相交于很远很远的某一点,这点在透视图中叫做“消失点”,也称为“灭点”。 消失点 Vanishing Point滤镜主要用于在图像中处理具有透视…

鸿蒙ArkTS声明式开发:跨平台支持列表【按键事件】

按键事件 按键事件指组件与键盘、遥控器等按键设备交互时触发的事件,适用于所有可获焦组件,例如Button。对于Text,Image等默认不可获焦的组件,可以设置focusable属性为true后使用按键事件。 说明: 开发前请熟悉鸿蒙开…

电磁仿真--CST综合建模练习1

1. 简介 本文展示一个CST自带的示例,在三维空间中使用带线计算传输线的S参数。基板顶部的带线通过小圆柱连接到底部的短带线,以便绕过可能存在的障碍。 结构生成 该结构完全通过参数输入进行建模,参考波长为10毫米,因此可以轻松…

HTML静态网页成品作业(HTML+CSS)——川西旅游介绍网页(2个页面)

🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有2个页面。 二、作品演示 三、代…

java_方法重写(覆盖)

介绍 现在我们来试一下 代码 父类 package b;public class father_ {//father class//4attributepublic void cry() {System.out.println("小动物叫唤");} } package b; 子类 public class graduate extends father_ {public void cry() {//子类方法//非私有的属性和…

ROS | 自动导航

保存&加载地图: image:地图文件 resolution:地图分辨率(珊格地图) origin:地图左下标 第三个参数是偏转角度 加载创建好的yaml文件: 年轻人第一次导航: 全局规划器: 代价地图设置参数&#…

大数据开发面试题【Mysql篇】

181、mysql数据库中的引擎 用于数据存储、处理和保护数据的核心服务,不同的数据库引擎有其各自的特点,常见的引擎:InnoDB,Mylsam、Memory、Mrg_Mylsam、Blackhole innodb:是一个事务性存储引擎,提供了对事…

Android 14 - 绘制体系 - VSync(1)

整体框架 VsyncConfiguration:一些基本参数的配置类,比如PhaseOffsets、WorkDuration等。 Scheduler:作为SF生成和派发VSync的整体调度器,主要面向SurfaceFlinger提供VSync相关接口。Scheduler包含对所有屏幕的VSync的控制。本身是…

AI智能体|扣子Coze文生图功能接入微信公众号

大家好,我是无界生长。 AI智能体|扣子Coze文生图功能接入微信公众号本文分享了如何将Coze平台的文生图功能接入微信公众号的详细操作流程,包括创建图像流、创建并配置Bot、设置提示词和开场白、调试、发布等步骤。如果看完还没学会的话&…

【设计模式】创建型-工厂方法模式

前言 工厂方法模式是一种经典的创建型设计模式,它提供了一种灵活的方式来创建对象实例。通过本文,我们将深入探讨工厂方法模式的概念、结构和应用。 一、什么是工厂方法模式 工厂方法模式是一种创建型设计模式,旨在解决对象的创建过程和客…

B站尚硅谷git学习记录

文章目录 一、Git概述1.何为版本控制2.为什么需要版本控制3.版本控制工具 二、Git常用命令1.设置用户签名1.1 基本语法1.2 案例实操 2.初始化本地库2.1 基本语法2.2 案例实操 3.查看本地库状态3.1基本语法3.2 案例实操(1)首次查看(工作区没有…

解决“nothing added to commit but untracked files present“

在执行git commit 命令时错误信息显示系统无法打开指定的设备或文件 ,说明项目的文件没有“add”,需要先执行git add 文件名,然后再执行git commit -m “xxx” 直接先git add 文件名添加到缓冲区,再git commit -m “xxx”提交 gi…

[docker] docker 安全知识 - 镜像,port registry

[docker] docker 安全知识 - 镜像,port & registry 这是第一篇,安全部分还有一篇笔记就记完了 说实话,看完了要学的这些东西,感觉大多数安全问题都可以通过验证登录的合法性去解决 镜像 镜像的问题还是比较多的&#xff0…