回顾发展史,WEB组态终于可以搭建业务系统了!

news2024/11/16 7:55:38

一、WEB组态融合了传统工业组态和现代数据大屏

组态软件在工业控制领域有着二三十年的历史,比较知名的国内有组态王、国外有MCGS/WinCC等,用来搭建上位机监控画面,通常配合PLC使用,通过配置的方式,不需要编码,电气工程师就能让现场监控画面图形界面化,起到上位机的作用:

近年来,互联网发展迅速,尤其是WEB html前端技术,成为了界面开发技术的主流,不断蚕食着.Net/C#、Qt C++、PyQt等桌面开发领域,并且与传统组态组件融合,产生了一个新的常见概念:WEB组态。

用到WEB技术的组态软件,除了直接可以在浏览器运行,界面时尚的扁平化风格远超传统工业组态,更好看、更炫酷,属于不同时代的产品,这类有图扑/ht.js、zkView、乐吾乐等等。

不过,随着物联网、工业互联网、产业数字化的发展,各种平台底座也相继涌出,比如物联网平台、工业互联网平台、数据集成平台、数据中台等。相应地,智慧化场景比如智慧楼宇、智慧水务、智慧消防等等各种非传统工业场景,对基于现场数据的可视化有了非常多的需求,促使了另一类基于WEB可视化拖拽编辑技术的产品不断涌现:大屏可视化工具。

与WEB组态的区别,在功能上仅仅是能否矢量拓扑绘图,一旦也具备管线、不规则图形绘图等功能,那么可视化大屏工具,与WEB组态就没有本质区别了,但是更多用在大屏报表、领导驾驶舱等场景,较少用在流程监控了。并且,这类通常与数字孪生3D结合(有的也叫3D组态),效果非常炫酷。

至此,IT和OT的结合,就已经相当完美了!从现场PLC的继电器开关,通过物联网平台,能实时反馈到远程监控中心数据大屏中3D模型中某个设备的阀门开关状态。

二、WEB组态拖拉拽做表单业务系统困难重重

随着可视化的不断深入,审美逐渐区域疲劳,需要有更多实用的业务管理功能应用,也能够追上WEB技术发展的浪潮。比如智慧消防系统、物联设备管理、门禁控制管理平台、能源管理平台等,涉及数据报表、能耗分析、工单管理、巡检计划、报警管理、维保管理等功业务功能。

乍一看,不论是传统组态还是现在的WEB组态,这类业务管理系统平台,与WEB组态化搭建的以可视化为主的风牛马不相及!这类侧重业务管理功能的应用,通常是将WEB组态做的可视化页面,嵌入到某个模块菜单中,作为一个展示项。

确实如此,不过,当试图用大屏组态工具,试图搭建一些侧重功能的报表或表单页面时,这个体会就出来了:能够拖拉拽实现管线、开关、风扇叶、曲线、仪表搭建数据展示页,那么拖入输入框、下拉框、表格、菜单、文本框,以及tab页签等组件,是不是也能搭建管理类的应用?

看似简单,也很自然联想到的需求,实现起来,发现相比于通过拖拉拽实现图形界面的数据可视化展示,要实现业务管理功能,问题要复杂的多!

首先要解决界面交互的问题,工业组态和数据大屏以展示为主,业务系统或者客户端上位机,则是界面交互为主,并且交互过程通常带有后端接口的动态调用,对返回数据的解析,以及经过判断后再进行下一步处理。

这些对于目前绝大部分WEB组态来说,实现起来天方夜谭,除非是写代码,或者低代码写业务逻辑。这就回到桌面开发所熟知的MFC/VC/VB、Qt Designer这种方式,UI界面通过拖拽编辑完成,交互等业务代码通过.net、c++、python等来编写的开发方式。

三、低代码之殇:试图前后端一步到位,却连前端都难以随意驾驭

这里不得不提到低代码,一个充满争议的词汇,曾深受资本追捧,也一度成为程序员口中的毒瘤。随便一搜索,就有非常多的结果。

首先,这些产品非常优秀,也有极高的技术含量,确实很解决很多业务系统的快速搭建。主要是应用场景,更多是对于CURD也就是围绕数据库增删改查类型的业务应用,能够通过低代码的配置和简单逻辑编写,就能实现项目需求,这已经是很大程度的进步 。

这里仅仅围绕WEB组态面临的场景,主要是跟工业、物联网,设备数据采集接入相关的,这类业务应用有着非常明显的特征,那就是前后端完全分离。

可以理解为,WEB组态只需要解决前端部分就好,后端设备数据,有数据库配置好的,有PLC通过数据采集提供上来的,也有通过物联网平台的北向接口提供后端的支撑,甚至有些已有自建的后端业务平台。

WEB组态面临的需求,只需代码也要,零代码也好,能实现管理系统前端页面的任意搭建即可。而放眼过去,低代码大而全,前后端一体难以实现纯前端的任意定制。即便是前端低代码比如百度的amis,也没法代码低到到让熟悉WEB组态的人能够驾驭。

四、页面嵌套继承技术,是WEB组态能搭建业务应用的关键

后台业务管理系统的前端,相对于WEB组态大屏可视化,复杂程度高出许多,具体体现在界面交互交互、数据业务逻辑、接口数据解析等,这些一般的WEB组态仅通过拖拉拽是难以胜任的,得通过代码去定制化开发。

这类前端页面大部分是通过vue等前端技术开发,用面向对象的方式,将页面功能模块拆解成一个个部件,增量化、渐进式开发。也只有这样,才能开发复杂的、高度定制化的前端应用。

如果将vue的一切都是组件,增量化、渐进式面向对象的开发,对应到WEB组态的可视化拖拽编辑上,问题就有了新的思路!

这里将“页面即组件”的思想,进一步把问题化解为:能否将一个Web组态页面,嵌套到另一个Web组态页面中,作为组件使用?

像html的iframe那样,能实现页面的任意嵌套,那么复杂业务前端在组态页面中拆解成小模块的可行性就来了!不过,如果只是用iframe嵌套,肯定不行,这只是外观布局层面融合到一起,并不能实现功能上的融合。

页面被嵌套后,上面的组件以及属性,能够被更上层页面的容器组件继承,并且在上层页面编辑时,属性面板中操作这些继承过来的属性,就像操作组件原有属性那样,那么问题就迎刃而解了!

五、一些已支持页面嵌套继承技术的WEB组态产品

1. UIOTOS

网址:www.uiotos.net

介绍:

  • 一款采用ht.js图形栈拥有独创技术的前端零代码工具,专注于解决前端界面开发定制难题,原型即应用

  • 具有页面嵌套属性继承节点连线等全新特性,学习门槛低,功能极为灵活。

  • 用户无需懂任何前端开发技术,简单了解使用规则,就能够按照业务需求,定制开发复杂的WEB应用。

  • 主要面向后端/算法工程师、硬件/电气工程师,以及产品经理、UI美术实施工程师等。

  • 适用于搭建基于物联网平台等的上层业务应用。实现前端开发不求人,项目交付快好省!

效果:

2. 暂未发现更多,欢迎补充

网址:

介绍:

效果:

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

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

相关文章

线性表的链式存储(双向循环链表)

文章目录 前言一、双向循环链表是什么?二、双向循环链表的意义三、双向循环链表的操作实现总结 前言 T_T此专栏用于记录数据结构及算法的(痛苦)学习历程,便于日后复习(这种事情不要啊)。所用教材为《数据结…

micro-app的css样式隔离

手写微前端micro-app-CSS隔离 子应用的CSS可能会对基座应用或者其他子应用产生的影响 首先现在我们把react页面放入到vue2的页面大家也能看到一些问题了,在react中的index.css中对body的一些css样式,已经影响了基座应用的css。 为了看的更明显&#x…

【Linux】git

大家好,我是苏貝,本篇博客带大家了解Linux的编译器-gcc/g,如果你觉得我写的还不错的话,可以给我一个赞👍吗,感谢❤️ 目录 1.安装git2.在gitee上创建仓库3.首次配置4.下载仓库到本地5.三板斧6.git log7.gi…

STL::string简单介绍

目录 1、什么是STL STL6大组件:仿函数、算法、容器、空间配置器、迭代器、配接器 推荐文档(必须学会看文档) 2、string常用接口 a、初始化 1、什么是STL 标准模板库 STL(Standard Template Library),主要是数据结构…

【C++程序员的自我修炼】初识模板

云收天彩色 木叶落秋声 目录 函数模板 函数模板的实现 函数模板的实例化 模板参数的匹配原则 参数模板推不出来的情况 类模板 类模板的定义格式 类模板的实例化 契子 ✨ 我们在学 C语言 的时候应该都写过交换两个数的函数 swap 吧 当时我们只是写了 int 类型,那…

sherpa + ncnn 离线语音识别

目录结构 前言音视频格式转为wavsherpa-ncnn编译LinuxWindowswindows编译中遇到的问题问题“nmake -? failed with: no such file or directory”编译失败原因 成功编译截图 可执行程序说明模型下载语言识别测试LinuxWindows 参考文献 前言 小编需要实现离线音视频语言部分识…

#STM32F407VET6(天空星)标准库和HAL驱动ILI9341

一、驱动方式:软件SPI,屏幕像素320*240 二、标准库含触摸,HAL库不含触摸 三、立创参考的文档 【立创天空星ST32F407VET6】模块移植手册 - 飞书云文档 (feishu.cn)https://lceda001.feishu.cn/wiki/MFNpw4STVi5ImikkcH1clWrlnqb 四、引脚分…

ElasticSearch中使用向量和关键词联合检索

注:案例测试数据及其索引构建详见:ElasticSearch中使用bge-large-zh-v1.5进行向量检索(一)-CSDN博客 中的第三部分。 假设任务场景为:用“新疆”向量检索相关的数据,同时需要匹配关键词“巴州”。 首先获取…

C#到底属于编译型语言还是解释型语言?

C#是一种编译型语言,也称为静态类型语言,这意味着C#代码在运行之前需要经过编译器的编译处理,并生成一个可执行的本地代码文件(通常是.exe或.dll文件)。相反,解释型语言将代码转换为低级代码后直接执行&…

【结构型模式】装饰器模式

​一、装饰器模式概述 装饰器模式(装饰者模式)定义:装饰器模式动态地将责任附加到对象上。若要拓展功能,装饰者提供了比继承更有弹性地替代方案。(对象结构型模型)通俗点来说:动态的给一个对象增…

12.事件参数

事件参数 事件参数可以获取event对象和通过事件传递数据 获取event对象 <template><button click"addCount">Add</button><p>Count is: {{ count }}</p> </template> <script> export default {data() {return {count:0…

13.Hexo Plugins插件及将网站上传到互联网

Plugins 有些想要实现的操作Hexo实现不了&#xff0c;这时就可以使用插件 插件一般都是可以下载的代码片段&#xff0c;可以附加到Hexo上 添加了一些功能或一些额外的东西 Plugins | Hexo 在官方页面&#xff0c;有471个插件&#xff0c;并附加了一些描述 点击一个插件时&…

【研发管理】产品经理知识体系-文化、团队与领导力

导读&#xff1a;文化、团队与领导力是产品经理知识体系中的重要组成部分。产品经理需要深入理解并应用这些要素&#xff0c;以推动产品的成功开发和运营。通过塑造积极的文化氛围、建立高效的团队和发挥领导力&#xff0c;产品经理能够为公司创造更大的价值。 目录 概述 1、…

(1)认识人工智能

第一章 认识人工智能 引言 本人目前大三&#xff0c;双非一本的人工智能专业&#xff0c;代码能力不算太差&#xff0c;做过项目&#xff0c;也打了比赛&#xff0c;获了奖&#xff0c;但是走技术路线总会有否定自己的感觉&#xff0c;可能是感觉自己的才能没有在搞技术方面实…

#QT获取ONENET云平台数据(草稿)

1.基本目标 &#xff08;1&#xff09;查询ONENT云平台的数据 &#xff08;2&#xff09;查询网络时间 &#xff08;3&#xff09;网络音乐拉取&#xff08;作为背景音乐&#xff09;&#xff0c;音量可调 2.制作UI界面 &#xff08;1&#xff09;串口图标的制作方法 &…

RIME-SVM,基于RIME寒冰优化算法优化SVM支持向量机回归预测 (多输入单输出)-附代码

支持向量机&#xff08;SVM&#xff09; 支持向量机&#xff08;SVM&#xff09;是一种广泛用于分类和回归的强大监督学习算法。在回归任务中&#xff0c;特别是在SVM被用作支持向量回归&#xff08;SVR&#xff09;时&#xff0c;目标是找到一个函数&#xff0c;这个函数在给…

PMP证书难考吗?

PMP证书难不难考要看你学的咋样的&#xff0c;我的PMP认证就是一个多月拿下的&#xff0c;同一个考次的同学在考试前的讲师直播过程中一直在说冲刺题难怎么怎么滴&#xff0c;最后还是通过率98%&#xff0c;绝大多数都通过了&#xff0c;并且还有47%的同学考了3A&#xff0c;这…

Vue2slot插槽(理解与应用)

1、插槽的概念 插槽&#xff08;Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时&#xff0c;把不确定的、希望由用户指定的部分定义为插槽。 举个例子&#xff1a;组件好比小霸王游戏机&#xff0c;插槽就是游戏机的插口&#xff0c;看用户插什么卡&#xff0c;就…

笔记 | 嵌入式系统概论

1 嵌入式系统简介 1.1 嵌入式系统的定义 根据美国电气与电子工程师学会&#xff08;IEEE&#xff1a;Institute of Electrical and Electronics Engineers )的定义&#xff0c;嵌入式系统是用于控制、监视或辅助操作机器和设备的装置(原文: devices used to control, monitor…

【Java基础】23.接口

文章目录 一、接口的概念1.接口介绍2.接口与类相似点3.接口与类的区别4.接口特性5.抽象类和接口的区别 二、接口的声明三、接口的实现四、接口的继承五、接口的多继承六、标记接口 一、接口的概念 1.接口介绍 接口&#xff08;英文&#xff1a;Interface&#xff09;&#xf…