web组态

news2024/11/16 12:44:42

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

这是一款可以嵌入到任何项目组态插件，功能全面，可根据自己的项目需要进行二次开发，能大大的节省在组态上的开发时间，代码简单易懂。 

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

数据流向29adf329bfe74eae9941cf432468e6ac.jpeg

嵌入原理c4507e7b71a04b2282bebed914c041c8.jpeg

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

4865fb7e91bc40419c6ae010a4859035.jpeg

三、集成前需要了解的

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

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

2、建立数据库表

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

场景画面表（byzt_stage）

序号

字段

类型

描述

1

stageId

 varchar(32)

场景id（主键）

2

stageName

 varchar(100)

场景名称

3

stageDatajson

json或longtext

场景画面的json串（整个画面都保存在这里）

4

dataKeyArray

longtext

该场景绑定的所有设备（数据点）的编号，用“，”分开 如：  “a01,123,a02,a03,a04”用于区分哪些设备传过来的数据数据这个画面

5

stageBase64

longtext

画面缩略图（base64格式）

6

其他自行扩展

自定义图片上传表（byzt_picture）

序号

字段

类型

描述

1

id

 varchar(32)

图片id

2

picUrl

 varchar(200)

图片访问路径

3

其他自行扩展

场景模板表（byzt_template_stage）

序号

字段

类型

描述

1

templateId

 varchar(32)

场景模板id（主键）

2

templateName

 varchar(100)

场景模板名称

3

stageBase64

longtext

画面缩略图（base64格式）

5

stageDatajson

json或longtext

场景模板画面的json串（整个画面都保存在这里）

6

其他自行扩展

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

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

c8aac51dade34a6b82690f42bdd58d45.jpeg

16914417ccdc406fa6fdfca027b99401.jpeg

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

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

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

1d46daefdc624198bee0d698e5a025c6.png

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

d681448f661442c08d5690f3920d9d0c.png

5、websocket服务端地址配置

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

ca3c48a3842e4964bc05e3f9fd8a1322.png

四、后台实现接口和前端调用接口

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

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

80e8939a19f741cfbfdfbd89b237f292.jpeg

五、VUE项目集成

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

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

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

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

集成效果：

1.新增时嵌入编辑器

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

bc465a7e1d1e438f8d8a403ec9b6368e.png

865a2289a6bc4a36b2bf4b1517220eaa.png

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

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

cd8bebd9e8c34be9bce6b44aeea54a30.png

4cbbbd1a37f4427a927f2de3cf2e4de9.png

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

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

6b21c9a67cf04aabb6889a77831bf4e8.png

d9b41319ead34e43b757120f3e17aafc.png

开始集成

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

695d1ca4ef5a4267bdefe69497f81e8d.png

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

hmbj.vue 编辑器组件

f6f13079420f484f8230016aa30681b1.png

hmjk.vue 画面监控组件

ac0167d729344b0589b1927167158c28.png

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

d5698b5484ad4cc5a49e2437013122d5.png

4.回到画面列表页面，

新增时，嵌入编辑器

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

46065f5b9b044541ab4a1595c082a129.png

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

7a7d6d34fa6f4c0292fd5b81e9168aba.png

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

d462ea32eb51471ba8459e2a342124bb.png

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

0a133b30a6b84adab64c0d1ac1f8cd3c.png

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

59c25125ae8a4b2aaa9ba3abf9b159ea.png

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

前端集成总结

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

8dd5efed1cc04f49bfa830640f05db1f.png

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

调用如下：

点击【新增】成功后

99eb355ce48f4a98bf76268909137424.png

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

fba50487c3bb400987eed6ebc9fceb41.png

效果如下：

f84e9d78ed5f40bf8cd7e42c2302047d.png8eec87cc610d4b2483dbc392d34dca86.png

  • webSocket服务端集成

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

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

bfbd70d8088642238524868e7179fbc3.png

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

98f8551e54f44533ae57fd5d2903ff5b.png

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

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

本项目位置如下：

ec423ce3b4c647c49234a42a95e7bb15.png

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

6f2eb4c4679846d4a349dfccfa96e273.png

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

数据转发操作

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

1设备数据转发到画面

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

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

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

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

定时任务如下：

34bfe4215b984c59940b2adc1a265c18.png

2画面数据转发到设备

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

4ae4d3e27e854c7c8c367ffa36deb326.png

到此websocket接入完成

七、其他功能实现

1自定义开关图标

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

90472ea7bc754e6eb08d710e79dd8be1.png

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

1选中画布上的开关；

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

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

操作如下图：

4adeec368ca44fec894bdb035eb1aeff.png

弹出开关列表

976c5f1161bd4c63a9a581a69ac36098.png

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

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

0e3229c70e61438f925a398eda8a3cf7.png

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

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

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

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

34baf0a7ec374670a88420748e6430f9.png

2调整echart组件样式

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

d2322df2f0004829ae0a71bbd8570466.png

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

文件如图：

e5eca599f431404ea6df80dfc0da527b.png

3添加场景分辨率选项

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

5989a65a705b4fb9ae5c788e345540c0.png

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

f3da41b1eac5484e8fa7e6bc6df1bc95.png

4添加字体，字号选项

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

2d3c92d05604425bb877b97bc10243de.png

8d4f4cc28fe84ddeb53c1c4cf1488a6f.png

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

fefa26f52990415b83f0d2c593d5ba80.png

5图元图库添加图片

图片位置如下图：

1c576518c74c4cf8b4b370de45a2613c.png

添加方法：

2打开文件module_config.json

3902532ff9274d668904d2f29c417fb8.png

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

d908f0f9cf5c477c8ace2682abcc7a1b.png

注意：如果是gif，那么moduleType:GIF766a585170e94324979c2978c401990c.png

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

6设备绑定回显

当绑定设备后，如图；

f682878d05f34b1fbb6e6c7a3181cab6.png

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

44f095fda2ae44b7b7f6489aee8e12ca.png

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

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

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

ae47e0bdd4714e9383e4be266469fd30.png

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

7fb4a4f848cf4bfe95a45f8738201d5a.png

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

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

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

http://xxx.xx.com?param=a01@a02@，

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

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

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

6d270ccdaf044850898af50fbe0a0f3e.png359f773fe71e43d1b77fb177fb752838.png

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

八、经典案例

c0410bced3ba4365bd06b52f4b9e7d96.png

a9691cefb79c4faead696ce8921abd41.png

ee06fbbe74f146a7ac3ebeaadd2826a4.png

dcb6bd0cbc434148ac4131aa00e0708e.png

40a735b6789c46ffbfb244a4d79315dd.png

3be1cf9822c847fdbd869a3950d10969.png

349590db1fd2472c88e2e0947ff0c26a.png

efe5a51f17f64aeebb123cb18de93c25.png316d24debb2c40a39ba1a4dd8130e895.png

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

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

相关文章

[N1CTF 2018]eating_cms 不会编程的崽

[N1CTF 2018]eating_cms 不会编程的崽

题倒是不难&#xff0c;但是实在是恶心到了。 上来就是登录框&#xff0c;页面源代码也没什么特别的。寻思抓包看一下&#xff0c;数据包直接返回了sql查询语句。到以为是sql注入的题目&#xff0c;直到我看到了单引号被转义。。。挺抽象&#xff0c;似乎sql语句过滤很严格。又…
阅读更多...
读算法的陷阱：超级平台、算法垄断与场景欺骗笔记04_共谋（上）

读算法的陷阱：超级平台、算法垄断与场景欺骗笔记04_共谋（上）

1. 共谋 1.1. 共谋总比相互竞争要容易得多 1.1.1. 通过共同抬价或稳定价格&#xff0c;企业通常可以赚取更多利润 1.1.2. 依靠人为切割市场&#xff0c;卡特尔组织成员得以在各自的势力范畴内实现垄断 1.2. 一直以来&#xff0c;人类都是价格操纵行为背后的行动者 1.2.1. …
阅读更多...
解决方案｜珈和科技推出农业特色产业数字化服务平台

解决方案｜珈和科技推出农业特色产业数字化服务平台

今年中央一号文件提出&#xff0c;鼓励各地因地制宜大力发展特色产业&#xff0c;支持打造乡土特色品牌。 然而&#xff0c;农业特色产业的生产、加工和销售仍然面临诸多挑战。产品优质不能优价&#xff0c;优质不能优用的现象屡见不鲜&#xff0c;产业化程度低、生产附加值不…
阅读更多...
QtWebEngine模块常用功能

QtWebEngine模块常用功能

QtWebEngine模块常用功能 https://note.youdao.com/s/Im0k2ZKe 1. 拦截请求 2. 忽略证书错误 3. 下载文件 4. 内嵌谷歌开发者界面 5. 获取Html页面用户选择的文件和目录 6. 获取响应的cookie 所有代码的7z压缩后的Base64编码如下&#xff1a; &#xff08;注意复制出来是…
阅读更多...
pytorch的梯度图与autograd.grad和二阶求导

pytorch的梯度图与autograd.grad和二阶求导

前向与反向 这里我们从 一次计算 开始比如 zf(x,y) 讨论若我们把任意对于tensor的计算都看为函数&#xff08;如将 a*b&#xff08;数值&#xff09; 看为 mul(a,b)&#xff09;&#xff0c;那么都可以将其看为2个过程&#xff1a;forward-前向&#xff0c;backward-反向在pyto…
阅读更多...
基于单片机的水平角度仪系统设计

基于单片机的水平角度仪系统设计

目 录 摘 要 I Abstract II 引 言 1 1控制系统设计 3 1.1系统方案设计 3 1.2系统工作原理 4 2硬件设计 6 2.1单片机 6 2.1.1单片机最小系统 6 2.1.2 STC89C52单片机的性能 7 2.2角度采集电路 8 2.2.1 ADXL345传感器的工作原理 9 2.2.2 ADXL345传感器倾角测量的原理 9 2.2.3 AD…
阅读更多...
npm 操作报错记录1- uninstall 卸载失效

npm 操作报错记录1- uninstall 卸载失效

npm 操作报错记录1- uninstall 卸载失效 1、问题描述 安装了包 vue/cli-plugin-eslint4.5.0 vue/eslint-config-prettier9.0.0 但是没有使用 -d &#xff0c;所以想重新安装&#xff0c;就使用 uninstall 命令卸载&#xff0c;结果卸载了没反应&#xff0c;也没有报错&#xf…
阅读更多...
CubeMX使用教程（5）——定时器PWM输出

CubeMX使用教程（5）——定时器PWM输出

本篇我们将利用CubeMX产生频率固定、占空比可调的两路PWM信号输出 例如PA6引脚输出100Hz的PWM&#xff1b;PA7引脚输出500Hz的PWM&#xff0c;双路同时输出 我们还是利用上一章定时器中断的工程进行学习&#xff0c;这样比较方便 首先打开CubeMX对PA6、PA7进行GPIO配置 注&a…
阅读更多...
【Web】浅聊Java反序列化之C3P0——JNDI注入利用

【Web】浅聊Java反序列化之C3P0——JNDI注入利用

目录 简介 原理分析 EXP 前文&#xff1a;【Web】浅聊Java反序列化之C3P0——URLClassLoader利用 【Web】浅聊Java反序列化之C3P0——不出网Hex字节码加载利用 简介 出网的情况下&#xff0c;这个C3P0的Gadget可以和fastjson&#xff0c;Snake YAML , JYAML,Yamlbeans , …
阅读更多...
Axure Cloud如何给每个原型配置私有域名

Axure Cloud如何给每个原型配置私有域名

需求 在原型发布之后&#xff0c;自动给原型生成一个独立访问的域名&#xff0c;类似http://u591bi.axshare.bushrose.cn&#xff0c;应该如何配置呢&#xff1f; 准备事项 已备案域名 如何备案&#xff1f;阿里云备案流程 已安装部署Axure Cloud 如何安装部署&#xff0c;请…
阅读更多...
【MySQL 系列】MySQL 语句篇_DML 语句

【MySQL 系列】MySQL 语句篇_DML 语句

DML&#xff08;Data Manipulation Language&#xff09;&#xff0c;即数据操作语言&#xff0c;用于操作数据库对象中所包含的数据。常用关键字包括&#xff1a;插入&#xff08;INSERT&#xff09;、更新&#xff08;UPDATE&#xff09;、删除&#xff08;DELETE&#xff09…
阅读更多...
用 Axios 提升前端异步请求的效率

用 Axios 提升前端异步请求的效率

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
政安晨：【深度学习处理实践】（三）—— 处理时间序列的数据准备

政安晨：【深度学习处理实践】（三）—— 处理时间序列的数据准备

在深度学习中&#xff0c;对时间序列的处理主要涉及到以下几个方面&#xff1a; 序列建模&#xff1a;深度学习可以用于对时间序列进行建模。常用的模型包括循环神经网络&#xff08;Recurrent Neural Networks, RNN&#xff09;和长短期记忆网络&#xff08;Long Short-Term M…
阅读更多...
ubuntu下vscode+STM32CubeMX+openocd+stlinkv2搭建STM32开发调试下载环境

ubuntu下vscode+STM32CubeMX+openocd+stlinkv2搭建STM32开发调试下载环境

1、换源 清华源 # 默认注释了源码镜像以提高 apt update 速度&#xff0c;如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ jammy main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ jammy main restr…
阅读更多...
b站小土堆pytorch学习记录—— P27-P29 完整的模型训练套路

b站小土堆pytorch学习记录—— P27-P29 完整的模型训练套路

文章目录 一、定义模型&#xff08;放在model.py文件中&#xff09;二、训练三、测试四、完整的训练和测试代码 一、定义模型&#xff08;放在model.py文件中&#xff09; import torch from torch import nnclass Guodong(nn.Module):def __init__(self):super(Guodong,self)…
阅读更多...
解决：ModuleNotFoundError: No module named ‘paddle‘

解决：ModuleNotFoundError: No module named ‘paddle‘

错误显示&#xff1a; 原因&#xff1a; 环境中没有‘paddle’的python模块&#xff0c;但是您在尝试导入 解决方法&#xff1a; 1.普通方式安装&#xff1a; pip install paddlepaddle #安装命令 2.镜像源安装 pip install paddlepaddle -i https://pypi.tuna.tsinghua.e…
阅读更多...
黑马java-JavaSE进阶-java高级技术

黑马java-JavaSE进阶-java高级技术

1.单元测试 就是针对最小的功能单元方法&#xff0c;编写测试代码对其进行正确性测试 2.Junit单元测试框架 可以用来对方法进行测试&#xff0c;它是第三方公司开源出来的 优点&#xff1a; 可以灵活的编写测试代码&#xff0c;可以针对某个方法执行测试&#xff0c;也支持一键…
阅读更多...
Javaweb之Maven高级分模块设计与开发的详细解析

Javaweb之Maven高级分模块设计与开发的详细解析

1. 分模块设计与开发 1.1 介绍 所谓分模块设计&#xff0c;顾名思义指的就是我们在设计一个 Java 项目的时候&#xff0c;将一个 Java 项目拆分成多个模块进行开发。 1). 未分模块设计的问题 如果项目不分模块&#xff0c;也就意味着所有的业务代码是不是都写在这一个 Java 项…
阅读更多...
基于AI软件平台 HEGERLS智能托盘四向车机器人物流仓储解决方案持续升级

基于AI软件平台 HEGERLS智能托盘四向车机器人物流仓储解决方案持续升级

随着各大中小型企业对仓储需求的日趋复杂&#xff0c;柔性、离散的物流子系统也不断涌现&#xff0c;各种多类型的智能移动机器人、自动化仓储装备大量陆续的应用于物流行业中&#xff0c;但仅仅依靠传统的物流技术和单点的智能化设备&#xff0c;已经无法更有效的应对这些挑战…
阅读更多...
神经网络的矢量化，训练与激活函数

神经网络的矢量化，训练与激活函数

我们现在再回到我们的神经元部分&#xff0c;来看我们如何用python进行正向传递。 单层的正向传递&#xff1a; 我们回到我们的线性回归的函数。我们每个神经元通过上述的方法&#xff0c;就可以得到我们的激发值&#xff0c;从而可以继续进行下一层。 我们用这个方法就可以得…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023