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

news/2024/9/20 1:17:16/ 标签: 前端, 编辑器, 物联网, 组态, web组态

   演示地址: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.ppmy.cn/news/1463621.html

相关文章

postman调用Grpc

环境: .net6.0 一、准备 安装nuget: Grpc.AspNetCore Google.Protobuf Grpc.Core.Api Grpc.Tools Grpc.AspNetCore.Server.Reflection Program.cs: public class Program{public static void Main(string[] args){var builder WebApplicat…

OpenCV Haar小波变换

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 图像Haar小波变换是一种基于小波分析的信号处理技术,特别适用于图像处理领域。以下是关于图像Haar小波变换过程: 分解:(1)假设原始图像为f(x,y),其中(x,y)表示图像上的像素坐标。 (2)对原始图像进行Haar小…

python web自动化(Pytest实战)

1.UnitTest框架与Pytest框架对⽐ 1) unittest框架介绍 Unittest则是Python语⾔的标准单元测试框架。 Unittest⽀持⾃动化测试,测试⽤例的初 始化、关闭和测试⽤例的聚合等功能,它有⼀个很重要的特性&#xff…

瑞吉外卖项目学习笔记(一)

项目展示: 一、软件开发整体介绍 1.1 软件开发流程 作为软件开发人员,我们的主要工作是在 编码阶段 1.2 角色分工 1.3 软件环境 二、瑞吉外面项目介绍 2.1 项目介绍 系统管理后台页面: 移动端页面: 2.2 产品原型展示 产品原型是…

Python库之PyQuery的高级用法深度解析

Python库之PyQuery的高级用法深度解析 引言 PyQuery是一个强大的Python库,它提供了类似于jQuery的语法来解析和操作HTML和XML文档。虽然PyQuery的基本用法已经相当直观,但本文将深入探讨一些高级用法,帮助开发者更高效地处理复杂的HTML文档…

若依 ruoyi-vue SpringBoot聊天敏感词过滤sensitive-word

组件地址 https://github.com/houbb/sensitive-word 网上博客版本不是最新&#xff0c;查看官方文档&#xff0c;基于0.16.1整理总结&#xff0c;快速上手 pom文件引入 <dependency><groupId>com.github.houbb</groupId><artifactId>sensitive-word…

图像处理之计算物体的方向(C++)

图像处理之计算物体的方向&#xff08;C&#xff09; 文章目录 图像处理之计算物体的方向&#xff08;C&#xff09;前言一、PCA获取物体主要方向1.原理2.代码实现 二、Hu矩获取物体主要方向1.原理2.代码实现 总结 前言 在图像处理中&#xff0c;物体的方向&#xff08;倾斜角…

Python每秒1000次压测

Molotov是一个用Python编写的轻量级HTTP负载测试工具,旨在帮助开发者进行简单的性能测试和压力测试。它通过模拟大量并发用户访问来测试Web服务的响应时间、吞吐量以及稳定性。Molotov特别强调易用性和可扩展性,允许用户自定义场景和断言来更好地适应不同应用的测试需求。 安…

Docker拉取镜像报错:x509: certificate has expired or is not yet v..

太久没有使用docker进行镜像拉取&#xff0c;今天使用docker-compose拉取mongo发现报错&#xff08;如下图&#xff09;&#xff1a; 报错信息翻译&#xff1a;证书已过期或尚未有效。 解决办法&#xff1a; 1.一般都是证书问题或者系统时间问题导致&#xff0c;可以先执行 da…

深度学习模型在OCR中的可解释性问题与提升探讨

摘要&#xff1a; 随着深度学习技术在光学字符识别&#xff08;OCR&#xff09;领域的广泛应用&#xff0c;人们对深度学习模型的可解释性问题日益关注。本文将探讨OCR中深度学习模型的可解释性概念及其作用&#xff0c;以及如何提高可解释性&#xff0c;使其在实际应用中更可…

使用numpy手写一个神经网络

本文主要包含以下内容&#xff1a; 推导神经网络的误差反向传播过程使用numpy编写简单的神经网络&#xff0c;并使用iris数据集和california_housing数据集分别进行分类和回归任务&#xff0c;最终将训练过程可视化。 1. BP算法的推导过程 1.1 导入 前向传播和反向传播的总体…

Scala的简单认识

Scala编程基础 小白的Scala学习笔记 2024/5/21 上午某一时刻 文章目录 Scala编程基础spark是用Scala开发出来的Scala的优点 打开idea 搜索scala&#xff0c;安装 如果不小心点了取消&#xff0c;或者没有上图的提示&#xff0c;就在依赖里面添加 spark是用Scala开发出来的 类比…

Python中文件操作和异常处理

文章目录 一、文件操作1.概念2.文件3.二进制 二、基本文件操作三、乱码产生四、with open() as f五、代码实现文件复制粘贴六、try ... except ...七、代码比较 一、文件操作 1.概念 帮助我们把爬虫抓下来的数据&#xff0c;进行保存。 2.文件 在计算机中&#xff0c;没有p…

【荐闻】空中目标检测综述

https://t.zsxq.com/tgUjbhttps://t.zsxq.com/tgUjb 这篇综述论文全面回顾了空中目标检测的最新进展&#xff0c;包括五个不平衡问题、相关方法、实际应用和性能评估。以下是对论文内容的详细描述&#xff1a; 1&#xff09;引言&#xff1a;介绍了空中目标检测的概念&#x…

Windows11下使用Qt5.14.2编译QtXlsx驱动详细步骤

原有&#xff1a;由于系统需要将QTableWidget表格中的数据导出、在Windows下最开始使用Excel.Application组件实现了导出功能&#xff0c;后面将代码转换到Ubuntu20.04下进行编译&#xff0c;发现项目.pro文件中的QT axcontainer和代码.h文件中的#include <QAxObject>跟…

探索Java的DNA-JVM字节码深度解析

引言 在Java的世界里&#xff0c;JVM&#xff08;Java虚拟机&#xff09;是我们程序运行的心脏。而字节码&#xff0c;作为JVM的血液&#xff0c;携带着程序的执行指令。今天&#xff0c;我们将深入探索Java字节码的奥秘&#xff0c;一窥JVM如何将人类可读的代码转化为机器可执…

Java Web 应用开发基础 - JSP内置对象

每个JSP 页面在第一次被访问时&#xff0c;Web 容器都会把请求交给 JSP 引擎&#xff08;即一个 Java 程序&#xff09;去处理。JSP 引擎先将 JSP 翻译成一个 _jspServlet (实质上也是一个 Servlet) &#xff0c;然后按照Servlet的调用方式进行调用。 JSP 第一次访问时会翻译成…

202303青少年软件编程(Python)等级考试试卷(四级)

第 1 题 【单选题】 运行下列程序, 输出的结果是? ( ) def wenhao(name = zhejiang):print(hello + name)wenhao()A :hello B :hellozhejiang C :helloname D :程序将提示运行错误 正确答案:B 试题解析: 定义函数时, 可以指定形参的默认值。 如果在调用函数时给函数…

声学特征在膝关节健康诊断中的应用分析

关键词&#xff1a;膝关节声发射、膝关节生物标志物、因果关系、机器学习 声学膝关节健康评估长期以来一直被看作是一种替代临床可用医学成像工具的替代方法&#xff0c;如声发射技术是通过检测膝关节在运动过程中产生的微小裂纹或损伤引起的声波信号&#xff0c;从而评估关节的…

构建镜像时候出现奇怪的现象时候

一、背景 构建镜像时候&#xff0c;昨天还好好的&#xff0c;今天出现奇怪的现象 二、查看现象 docker system df#cache 显示600G 三、步骤 这操作比较轻微&#xff0c;20以前的缓存清理掉 docker builder prune --filter until480h # 清除20填以前的构建缓