web组态（BY组态）接入流程

技术文档

官网网站：www.hcy-soft.com

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

一、数据流向图及嵌入原理

image.png

数据流向

image.png

嵌入原理

二、编辑器调用业务流程图

image.png

三、集成前需要了解的

1、后台Websocket端往前台监控画面端传输数据规则

后台websocket向客户端监控画面推送数据时，格式为json格式，json中的键为 绑定设备时的设备编号。注意：json中的键不能以数字开头，否则无法解析为正确的json对象。

2、建立数据库表

用于支持组态的场景画面数据，及模板数据，上传图片数据的存储，这些表的字段我们只设计了组态插件必须的字段，其他字段你们自己扩展

场景画面表（byzt_stage）

image.png

自定义图片上传表（byzt_picture）

image.png

image.png

3、你们需要先做画面列表功能

我们提供的组态插件只有编辑器和实时监控画面，并没有画面的列表功能，该功能需要你们自己去做，主要是操作表stage_data的增删改查，界面参考如下，该界面示例以【若依前后端分离项目-前端项目】为例去做的列表页面。若依项目地址doc.ruoyi.vip/

image.png

image.png

点击确定后，调编辑器，详细请看 【五、vue项目集成】

4、数据点绑定时下拉列表配置

数据点绑定时的界面如下：

image.png

如上图，下拉框的层级关系个数是可以配置的，配置文件在byzt/config/init.json,配置如下，其中箭头所指向的方法名称是可以改变的，这些方法定义在：byzt/config/InitConfig.js,你们需要在这个js的方法体里面写ajax调用后台接口，获取下拉框数据。后台返回数据结构看【四、后台实现接口和前端调用接口】的序号为10到12的接口。

image.png

5、websocket服务端地址配置

配置文件在byzt/config/init.json,配置如下：

image.png

四、后台实现接口和前端调用接口 先将3张表byzt_stage,byzt_picture,byzt_template_stage分别做好javaben，类名本别为：Stage.java,Picture.java,TemplateStage.java,请按我们下面表格中的Controller名称定义接口，以方便前端调用

image.png

我们会提供后台接口实现的例子（接口实现例子的位置在ruoyi-admin/src/main/java/com/ruoyi/web/controller/ztgl），以及前端调用接口的例子（接口调用的位置在ruoyi-ui/public/static/byzt/config/InitConfig.js），尽管如此，但不同的框架返回的结果，结构能不一样，前端调用时可能需要进行微调。

image.png

五、VUE项目集成

集成的前提是你们已经做了【画面列表功能】，请看【三、集成前需要了解的】 第3点。

本集成示例以【若依前后端分离项目-前端项目】为例去集成。若依项目地址doc.ruoyi.vip/

你们的项目可能不是基于若依项目去做的，可能需要细微调整，如路由结构，传值处理等。

集成例子在：ruoyi-ui/src/views/ztgl/hmgl/index.vue

集成效果：

1.新增时嵌入编辑器

新增输入【画面名称】后，点击确认，调用后台接口保存画面名称，拿到画面ID（stageId），调出编辑器。

image.png

image.png

2.修改画面时嵌入编辑器

点击【编辑画面】带上stageId调出编辑器

3.查看实时监，控嵌入实时画面

点击实时监控，带上stageId调出实时监控页面

开始集成

1.将我们提供的文件夹【byzt】复制到 vue项目的public/static下面如图：

image.png

2.做两个vue组件，组件里面用iframe嵌入了我们的编辑器地址

hmbj.vue 编辑器组件

image.png

hmjk.vue 画面监控组件

image.png

3.给这两个vue组件添加路由

image.png

4.回到画面列表页面，新增时，嵌入编辑器

点击添加，输入【画面名称】点击【确认】,此时往后台传递的参数只有“画面名称”，其他的都是空

画面保存成功后，返回stageId，前端拿到stageId，调用编辑器组件，调用如下：

点击【编辑画面】时，嵌入编辑器组件

拿到stageId，调用【编辑器组件】，调用如下：

点击【实时监控】时，嵌入画面监控组件

拿到stageId，调用【画面监控组件】，调用如下：

前端集成总结

我们的集成例子是将编辑器和实时画面集成在vue项目框架内部的，这样必须将编辑器和实时画面做成独立的组件，然后通过调用路由来完成，中间涉及到路由传值。这样稍显麻烦。

如果直接用open()调用地址，就可以不用做组件，不用做路由，这样就方便很多，这样的话是在浏览器顶端新开一个标签。

调用如下：

点击【新增】成功后

点击【编辑画面】或【实时监控】时

效果如下：

webSocket服务端集成 本集成示例以【若依前后端分离项目-后端项目】为例去集成。若依项目地址doc.ruoyi.vip/，集成例子在：

我们提供的websocket服务端代码如下，只有3个文件，使用的是springboot自带的jar。

1、将我们提供的websocket文件夹复制到如下图所示的位置，你们可以根据实际情况，复制到你们方便的位置，复制原则是要放在启动文件同及包下面。

2、将如下maven坐标复制到你们项目合适的位置

org.springframework.boot spring-boot-starter-websocket

本项目位置如下：

3、websocket端口地址为springBoot项目设置的端口地址，如下图

4、前端调用websocket服务的地址为 ws://192.168.1.4:8080/websocket/message

数据转发操作

注意：画面需要接受的是json数据，一个画面可能绑定了多个传感器，json数据的键是传感器的id。该json串可以是所有传感器的数据，也可以是单个传感器的数据，不管画面绑定多少个传感器，只要json中含有绑定的传感器id的键。画面都能识别，多余的画面会自己过滤。

1设备数据转发到画面

硬件数据需要你们自己去取。一般硬件和服务端的交互使用Mqtt方式。

后台拿到设备数据后 在任意位置调用下面的方法，画面就可以收到数据。

WebSocketServer.sendMessages("01","硬件json数据","画面id");

由于我们是前端插件，后台仅仅是测试例子，并没有真正接入设备，所以在若依的项目中做了一个定时任务，往前端推送数据。

定时任务如下：

2画面数据转发到设备

进入WebSocketServer.java 的 onMessage方法，该方法可以拿到画面点击按钮后要发送的命令字符串，传感器的id，画面id，拿到这几个数据后，自己想办法将命令组合成设备需要的格式，传给相应的硬件。代码位置下图所示：

到此websocket接入完成

七、其他功能实现

1自定义开关图标

开关在基础基础组件的如下位置：

将开关拖动导画布上，可以对开关的样式进行切换，切换方式如下：

1选中画布上的开关；

2点击状态和命令 列表中的开关图标列；

3在弹出的开关列表中选择自己合适的开关；

操作如下图：

弹出开关列表

如果开关列表中没有自己喜欢的开关，那么就需要自己添加，添加的方法如下：

1打开switchIconList.html，在133行的位置，添加开关图标的路径；

2在相应的路径下面放入开关的图标。注意：一个开关需要3张图片(开的图片,关的图片，初始化状态的图片)。

如图：1.png表示在监控页面时数据还没有接受到的状态图片；

1_0.png表示关闭状态的图片；

1_1.png表示打开状态的图片；

2调整echart组件样式

Echart组件位于【基础组件】的【echart组件】如图：

样式的好看与否因人而异，如果不满意，可以在byzt\config\echart\echartOption.js进行调整，该文件是echart组件的配置项，可以参考百度echart的官网进行配置项的配置。

文件如图：

3添加场景分辨率选项

【分辨率选项】的位置如图所示：

如果预设的分辨率不够，可以在如下图的位置添加：

4添加字体，字号选项

字体字号一般用在文字，值组件上面，如图：

字体字号可以在byzt\config\init.json文件配置，如图：

5图元图库添加图片

图片位置如下图：

添加方法：

2打开文件module_config.json

2：复制其中一段配置，修改自己图片的路径

注意：如果是gif，那么moduleType:GIF

如果是png、jpg、svg ,那么moduleType:IMAGES

6设备绑定回显

当绑定设备后，如图；

再次点击选择后，下拉选择框为空，没有自动填上已经选择好的设备

按照下面的方法，可以完成回显。

1、打开如图文件的注释，进入方框的方法getPrentId(hardware_id)，hardware_id是当前选择的设备id。

2、在该方法内部 自己写 ajax 调用后台接口 ，根据当前的id 返回上级所有id，返回如下格式的json，该Json包含当前的id（最后一级）。

7鼠标点击弹框，在自己的页面中获取参数，所有带有参数列表的都是这个用法

在自己的弹框中如何获取a01,a02这两个字符串

弹框url中 自己定义一个变量来接收，如：xxx.xx.com?param=

当鼠标点击的时候，会自动吧a01,a02这两个字符串拼接上去，之间用@隔开 如

xxx.xx.com?param=a01@a02@，

自己的页面获取到 param后，用@来分割，分别获取到a01,a02.

8条件弹框，在自己的页面中获取参数(所有版本)

当满足条件的时候，画面会自动弹框

自己在“弹框url”定义一个参数来接收，当满足条件的时候，系统会自动吧当前满足条件的id拼接在url后面 如: xxx.xx.com?param=a03

八、常见问题

1自定义图片上传后无法显示，使用阿里云的图片服务器 到阿里云服务器进行设置

搞定阿里云oss图片请求跨域_vue 加载阿里oss资源时报跨域-CSDN博客

最终结果

2绑定设设备时下拉列表请求后台，后台返回json字符串，前台ajax不能正常返回。

Ajax会到error里面

解决 把下拉列表的值封装在List中进行返回。不要直接返回字符串

作者：by组态薄荷糖
链接：https://juejin.cn/spost/7340636105765552180
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

模型优化_XGBOOST学习曲线及改进，泛化误差

模型优化_XGBOOST学习曲线及改进，泛化误差

代码 from xgboost import XGBRegressor as XGBR from sklearn.ensemble import RandomForestRegressor as RFR from sklearn.linear_model import LinearRegression as LR from sklearn.datasets import load_boston from sklearn.model_selection import train_test_split,c…
阅读更多...
Linux： GDB 调试工具

Linux： GDB 调试工具

概念： Linux GDB（GNU Debugger）是一个功能强大的调试工具，用于调试C、C等编程语言的程序。它可以帮助开发人员定位和修复程序中的错误。 GDB 的使用 ： 激活和进入工作模式： gdb 需要调试的文件 进入 …
阅读更多...
【Java设计模式】三、

【Java设计模式】三、

文章目录 0、案例：咖啡屋1、简单工厂模式 静态工厂（不属于23种之列）2、工厂方法模式3、抽象工厂模式4、建造者模式5、原型设计模式 0、案例：咖啡屋 模拟咖啡店点餐。咖啡有多种，抽象类，子类为各种咖啡。咖…
阅读更多...
2.29作业

2.29作业

T课上实现通信代码总结&#xff1a; 程序代码&#xff1a; TCPSER.c #include<myhead.h> #define SER_IP "192.168.244.140" //服务器IP #define SER_PORT 9999 //服务器端口号 int main(int argc, const char *argv[]) {//1.创建用于监…
阅读更多...
为什么猫咪挑食不吃猫粮？适口性好、普口性价的主食冻干推荐

为什么猫咪挑食不吃猫粮？适口性好、普口性价的主食冻干推荐

现代养猫人士往往把自家的小猫看作是生活中的小宝贝&#xff0c;十分宠爱。最令人头疼的就是猫咪挑食不吃猫粮&#xff0c;为什么猫咪挑食不吃猫粮&#xff1f;猫咪挑食应该怎么办&#xff1f;今天为大家分享一个既不让咱宝贝猫咪受罪又可以改善猫咪挑食的方法。 一、为什么猫咪…
阅读更多...
深入理解nginx的https sni机制

深入理解nginx的https sni机制

目录 1. 概述2. 初识sni3. nginx的ssl证书配置指令3.1 ssl_certificate3.2 ssl_certificate_key3.3 ssl_password_file4. nginx源码分析4.1 给ssl上下文的初始化4.2 连接初始化4.3 处理sni回调4.2 动态证书的加载5. 总结阅读姊妹篇: 深入理解nginx的https alpn机制 1. 概述 SN…
阅读更多...
Vue+SpringBoot打造音乐偏好度推荐系统

Vue+SpringBoot打造音乐偏好度推荐系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.1.1 音乐档案模块2.1.2 我的喜好模块2.1.3 每日推荐模块2.1.4 通知公告模块 2.2 用例图设计2.3 实体类设计2.4 数据库设计 三、系统展示3.1 登录注册3.2 音乐档案模块3.3 音乐每日推荐模块3.4 通知公告模…
阅读更多...
外包干了6个月，技术退步明显。。。。。

外包干了6个月，技术退步明显。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;2019年我通过校招踏入了重庆一家软件公司&#xff0c;开始了我的职业生涯。那时的我&#xff0c;满怀热血和憧憬&#xff0c;期待着在这个行业中闯出一片天地。然而&#xff0c;随着时间的推移&#xff0c;我发现自己逐渐陷入…
阅读更多...
Dockerfile（1） - FROM 指令详解

Dockerfile（1） - FROM 指令详解

FROM 指明当前的镜像基于哪个镜像构建dockerfile 必须以 FROM 开头&#xff0c;除了 ARG 命令可以在 FROM 前面 FROM [--platform<platform>] <image> [AS <name>]FROM [--platform<platform>] <image>[:<tag>] [AS <name>]FROM […
阅读更多...
Java+SpringBoot+Vue+MySQL：员工健康管理技术新组合

Java+SpringBoot+Vue+MySQL：员工健康管理技术新组合

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…
阅读更多...
TCP的三次握手和四次挥手 | 查看网络状态

TCP的三次握手和四次挥手 | 查看网络状态

三次握手和四次挥手是在计算机网络中用于建立和终止TCP连接的协议。这两个过程是TCP协议的重要组成部分&#xff0c;确保数据的可靠传输。 三次握手指的是在客户端和服务器之间建立连接时的步骤。具体流程如下&#xff1a; 客户端向服务器发送一个连接请求报文段&#xff08;…
阅读更多...
Git教程-Git的基本使用

Git教程-Git的基本使用

Git是一个强大的分布式版本控制系统&#xff0c;它不仅用于跟踪代码的变化&#xff0c;还能够协调多个开发者之间的工作。在软件开发过程中&#xff0c;Git被广泛应用于协作开发、版本管理和代码追踪等方面。以下是一个详细的Git教程&#xff0c;我们将深入探讨Git的基本概念和…
阅读更多...
数据结构——lesson4带头双向循环链表实现

数据结构——lesson4带头双向循环链表实现

前言✨✨ &#x1f4a5;个人主页&#xff1a;大耳朵土土垚-CSDN博客 &#x1f4a5; 所属专栏&#xff1a;数据结构学习笔记​​​​​​ &#x1f4a5;双链表与单链表的区分&#xff1a;单链表介绍与实现 &#x1f4a5;对于malloc函数有疑问的:动态内存函数介绍 感谢大家的观看…
阅读更多...
tomcat安装步骤流程

tomcat安装步骤流程

安装tomcat是基于安装java的基础上的 JAVA 举例说明&#xff1a; 关闭防火墙 下载java [rootlocalhost ~]#yum install java -y rootlocalhost ~]#yum install epel-release.noarch -y [rootlocalhost ~]#yum provides */javac [rootlocalhost data]#yum install java-1.8.0-o…
阅读更多...
6.1 deeplabv3+的pth模型转换为rknn模型

6.1 deeplabv3+的pth模型转换为rknn模型

和yolov5的pth模型转换为rknn模型类似&#xff0c;deeplabv3的pth模型转为rknn模型的步骤是&#xff1a; pth------>onnx-------->rknn 1.pth转为onnx 代码如下&#xff1a; #!/usr/bin/env python3 # -*- coding: utf-8 -*- # by [jackhanyuan](https://github.com/…
阅读更多...
实现一个线程安全的单例模式

实现一个线程安全的单例模式

单例模式 单例模式能保证某个类在程序中只存在唯⼀⼀份实例,⽽不会创建出多个实例 某个类,在一个类,只应该创建出一个实例,使用单例模式,就可以对咱们的代码进行一个更严格的校验和检查 单例模式具体的实现⽅式有很多.最常⻅的是"饿汉"和"懒汉"两种单例…
阅读更多...
DevEco Studio下载与安装（Windows）

DevEco Studio下载与安装（Windows）

下载地址&#xff1a; HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 安装时直接点击 next 即可。 运⾏已安装的DevEco Studio&#xff0c;⾸次使⽤&#xff0c;请选择Do not import settings&#xff0c;单击OK。 1.安装Node.js 如果本地有下载&#xff0c;可以…
阅读更多...
前端JS 时间复杂度和空间复杂度

前端JS 时间复杂度和空间复杂度

时间复杂度 BigO 算法的时间复杂度通常用大 O 符号表述&#xff0c;定义为 T(n) O(f(n)) 实际就是计算当一个一个问题量级&#xff08;n&#xff09;增加的时候&#xff0c;时间T增加的一个趋势 T(n)&#xff1a;时间的复杂度&#xff0c;也就相当于所消耗的时长 O&#xff1…
阅读更多...
乐吾乐Web可视化RTSP播放

乐吾乐Web可视化RTSP播放

背景 乐吾乐致力于物联网和智能制造等场景的Web可视化平台和解决方案&#xff0c;其中摄像头播放必不可少。 当前国内摄像头都以RTSP协议为主&#xff0c;而HTML不能直接读取RTSP协议&#xff0c;因此需要一个转流服务。乐吾乐Web可视化播放RTSP也是如此&#xff1a; RTSP协…
阅读更多...
理解计算着色器中glsl语言的内置变量

理解计算着色器中glsl语言的内置变量

概要 本文通过示例的方式&#xff0c;着重解释以下几个内置变量&#xff1a; gl_WorkGroupSizegl_NumWorkGroupsgl_LocalInvocationIDgl_WorkGroupIDgl_GlobalInvocationID 基本概念 局部工作组与工作项 一个3x2x1的局部工作组示例如下&#xff0c;每个小篮格子表示一个工作项…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023