1.vue?组组态?̬Դ??
2.自制组态软件（85）UI控件库之Label控件
3.UIOTOS：像设计原型那样，搭建复杂的态源前端应用！
4.自制组态软件（82）UI控件库之vue3+pixijs
5.什么是组组态Web组态？Web组态编辑器哪个好用？
6.组态软件之万维组态介绍（web组态、html组态、态源vue2/vue3组态、组组态组态软件、态源读书源码组态编辑器）

vue?组组态?̬Դ??

       回顾Web组态的发展历史，其在工业控制领域的态源应用经历了几十年的演变，传统工业组态软件如组态王和国外的组组态MCGS/WinCC等，用于构建上位机监控画面，态源与PLC等设备配合，组组态通过配置方式实现界面图形化，态源简化了电气工程师的组组态工作。近年来，态源随着互联网的组组态快速发展，Web前端技术逐渐成为界面开发的主流，与传统组态组件融合，形成了Web组态的概念。Web组态软件，如图扑/ht.js、zkView、乐吾乐等，不仅可以在浏览器中运行，还提供了更时尚、更直观的扁平化界面体验。

       在物联网、工业互联网和产业数字化的推动下，各种平台底座如物联网平台、工业互联网平台、数据集成平台和数据中台等相继涌现，各种非传统工业场景如智慧楼宇、智慧水务、智慧消防等对基于现场数据的可视化提出了更高需求，促使了大屏可视化工具的诞生。与Web组态相比，这类工具在功能上更侧重于展示，一旦具备了如管线、不规则图形等矢量拓扑绘图功能，则与Web组态基本无异，但主要应用于大屏报表、领导驾驶舱等场景，较少用于流程监控。这类工具通常与数字孪生3D技术结合，效果更为震撼。

       Web组态与IT和OT的结合已经相当完美，可以实现实时反馈从现场PLC的卖程序源码模板继电器开关状态到远程监控中心数据大屏中3D模型中某个设备的阀门开关状态。然而，随着可视化技术的深入发展，用户开始寻求更多实用的业务管理功能应用，如智慧消防系统、物联设备管理、门禁控制管理平台、能源管理平台等。这些应用涉及数据报表、能耗分析、工单管理、巡检计划、报警管理、维保管理等功能，与Web组态的可视化主导风格大相径庭。

       乍看之下，Web组态与传统业务管理系统平台之间似乎风马牛不相及。然而，当尝试使用大屏组态工具搭建侧重功能的报表或表单页面时，用户发现实现业务管理功能的难度远超预期。相比于图形界面的数据可视化展示，实现业务管理功能需要解决界面交互、动态调用后端接口、解析返回数据以及处理逻辑等问题。目前，大多数Web组态工具难以实现这些需求，除非通过编写代码或低代码方式实现业务逻辑。

       在Web组态领域，低代码工具曾受到广泛追捧，但其应用范围更多局限于围绕数据库增删改查类型的业务应用，能够通过配置和简单逻辑编写快速实现项目需求。然而，Web组态面临的应用场景更倾向于与工业、物联网设备数据采集接入相关，这类业务应用的特点是前后端分离。Web组态主要负责前端界面构建，而后端设备数据则通过数据库配置、PLC数据采集或物联网平台接口提供。因此，Web组态需要实现管理系统前端页面的任意搭建，而低代码工具在前后端一体的实现上难以满足纯前端的任意定制需求。

       面对复杂业务前端页面的开发需求，Web组态工具需要通过代码实现高度定制化开发，通常采用Vue等前端技术，通过面向对象的方式将页面功能模块拆解为可复用的组件，实现增量化、人脉名片源码渐进式开发。然而，单纯通过代码实现这一过程对于熟悉Web组态的人来说并不容易。

       一种新的思路是将“页面即组件”的概念应用于Web组态中，探索将一个Web组态页面嵌套到另一个页面中作为组件使用的方法。通过类似HTML中iframe的嵌套技术，实现页面的任意嵌套，使复杂业务前端在Web组态页面中得以拆解为小模块。关键在于实现页面被嵌套后，上面的组件及属性能够被更上层页面容器继承，并在上层页面编辑时操作这些继承的属性，就像操作组件原有属性一样。这为Web组态搭建业务应用提供了可能。

自制组态软件（）UI控件库之Label控件

       结论已经得出：基于前面实现的按钮控件经验，制作Label控件变得相对简单。让我们深入了解一下这个过程。

       首先，我们创建了专门用于管理标签文本的baseLabel.vue组件，它继承了SolidText的功能，并通过container属性来定位文字显示的位置。这个设计使得控件的结构更为清晰。

       在MyCanvas.vue组件中，我们引入了Label控件，其显示位置和文本内容都由labelInfo对象控制。这个组件的灵活性和自定义性由此提升，便于我们根据需要调整和配置。

       接下来，我们通过useStore函数，进一步整合和管理Label控件的状态，确保其与应用状态的同步。具体来说，就是通过useLabel函数来管理和操作Label组件。

       最后，让我们实际看看Label控件在项目中的显示效果。您可以在GitHub上的zhzhz/canvasUI项目中查看和探索这一自制的UI控件库，包括Label控件的实现细节和实际应用。

       通过以上步骤，我们成功地构建了一个可自定义的Label控件，为整个UI设计提供了更多的可能性。

UIOTOS：像设计原型那样，搭建复杂的前端应用！

       UIOTOS：实现复杂前端应用的0代码编程工具

       UIOTOS是一款颠覆性前端应用开发工具，它独创的技术专利，不仅适用于前端应用开发，还能够搭建带有丰富交互和业务逻辑的源码时代在线课堂组态画面和数据大屏。

       该工具无需用户掌握编程语言，通过独特的连线和嵌套操作，结合拖拽编辑，能够实现定制化交互界面和复杂业务逻辑的开发，达到与vue、QT等代码开发媲美的效果。适用于工业组态、数据大屏、客户端工具、中后台管理等场景。

       工业组态功能提供拖拽、编辑功能，支持矢量绘图，包含仪表、曲线等实时展示和数据分析组件，能快速搭建炫酷的展示画面。通过连线、嵌套、属性暴露等0代码特有的操作，用户可以搭建出带有复杂功能的组态页面。

       对于WEB前端应用，UIOTOS不仅侧重于绘图和数据展示，还包含界面交互、业务逻辑、接口调用、数据解析等，实现复杂的前端应用功能。通过逐层嵌套和属性暴露机制，用户可以将复杂应用拆解为模块化可复用的单元。

       在实现方式上，UIOTOS前端基于canvas和国产图形引擎ht.js，支持2D和3D、图形和UI无缝融合。后端则采用了腾讯开源的ORM框架APIJSON和IOTOS物联中台，提供业务万能接口和与设备、硬件交互的客户端、物联网应用。

       在技术原理上，UIOTOS与面向对象编程类似，连线操作、容器嵌套相当于赋值调用、继承派生，各组件功能属性相当于类库的函数方法，内嵌组件图元的form绑定相当于基类成员切换为公有属性等。

       为什么UIOTOS会受到欢迎？前端技术更新快，学习通资源码开发和学习成本高；传统大屏组态难以实现复杂功能；低代码平台有用户门槛，定制扩展仍需代码。

       UIOTOS的独特之处在于，除了不需要编写代码，还能实现矢量绘图，对特定功能进行封装；与组态软件相比，还能实现复杂的业务逻辑，并0代码封装组件；与低代码平台相比，能够面向非开发人员，无需代码知识，提供“面向对象”的设计思想。

       不过，UIOTOS当前版本并不支持3D数字孪生的0代码搭建，以及移动端APP、小程序的专门支持，更倾向于复杂PC WEB端应用。

       对用户的技能要求分为普通用户和高级用户，普通用户通过连线、嵌套和属性配置搭建应用，而高级用户则能够使用代码块组件，兼容js代码逻辑，通过编写js代码进行处理，并将结果封装成基础组件，如gis地图、文本编辑等。

       UIOTOS提供在线试用和离线安装两种部署方式，用户可以访问ui.aiotos.net进行在线试用，或者通过联系服务支持获取离线安装包。

自制组态软件（）UI控件库之vue3+pixijs

       为了加速界面开发，我们将采用 Vue 结合 PixiJS 进行开发。首先，进行环境配置，通过封装 canvas 函数，使开发工作更加便捷。

       确保 PixiJS 已成功安装，接下来创建项目文件结构。在 canvasUI\packages\renderer\src\game\index.ts 文件中，新建 PixiJS 实例并绑定至浏览器 body 对象。

       在 canvasUI\packages\renderer\src\runtime-dom\index.ts 文件中，自定义渲染组件，使得 Vue 能够调用 PixiJS 在 canvas 中渲染，而非在 dom 中。

       在 canvasUI\packages\renderer\src\index.ts 文件中，加载一张以验证渲染效果。

       接着，编辑 canvasUI\packages\renderer\src\components\MyCanvas.vue，实现界面效果。最终结果如预期所示。

       完整的项目代码可在 GitHub 上找到：GitHub - zhzhz/canvasUI

什么是Web组态？Web组态编辑器哪个好用？

       在数字化时代的工业控制与自动化领域，Web组态正崭露头角，它是一种革新性的软件技术，让监控与管理变得更加直观且灵活。Web组态编辑器，就像一把精巧的数字画笔，借助浏览器的力量，简化了工程管理、配置和实时监控的过程。

       首先，让我们理解什么是Web组态。它是一种基于Web服务的组态方式，通过B/S架构，允许用户在浏览器中直接操作，无需安装额外软件。它实现了图形化、可视化操作，如2D/3D图形组态和实时数据监控，使得设备状态报告、故障检测、报警和控制等复杂任务变得触手可及。

       国内市场上，众多优秀Web组态软件涌现，如长沙数维图信息科技有限公司的Sovit2D，凭借HTML5技术，提供了强大的2D/3D图形和MQTT协议支持，支持与企业平台无缝集成，适用于工业、能源等多个领域，只需简单拖拽，就能快速构建高效SCADA系统。

       大连图扑物联的Iotopo同样出色，作为泛工业物联网解决方案，它支持多种工业通讯协议，数据可视化界面直观，为企业搭建专属监控平台提供了便利。北京昆仑通态的McgsWeb则针对特定硬件设备，如昆仑技创智能触摸屏，提供了易用且功能完善的网络版、通用版和嵌入版选项。

       BY组态作为一款前端web组态插件，无需框架限制，适用于Vue、React项目，其原生JS开发特性使得它成为化工、能源等行业开发中的得力助手。而ZK-VIEW则专为能源电力、工业物联网等领域设计，通过直观的组件拖拽和配置，轻松实现大屏可视化和后台管理。

       这些Web组态编辑器各具特色，无论是对于企业级的SCADA系统构建，还是对于简化设备监控和操作，它们都展现出了强大的功能和易用性。选择哪一款，取决于你的具体需求和应用场景，但无疑，Web组态正在为工业自动化带来前所未有的效率和便利性。

组态软件之万维组态介绍（web组态、html组态、vue2/vue3组态、组态软件、组态编辑器）

       一、什么是组态软件

       组态软件是一种创建、配置和管理监控及控制系统的软件工具。它通过配置而非编程实现工业应用开发，广泛应用于工业自动化领域，用于实时监控和控制工业过程。这种软件具备丰富的功能，包括用户界面创建、数据采集和通信配置、报警和事件处理、数据分析与报告生成等。它允许用户实时监控和控制设备与过程，对数据进行可视化分析，以优化决策和生产效率。组态软件支持多种通信协议和设备接口，便于与不同设备系统集成。

       二、什么是万维组态

       随着工业自动化的发展，组态软件的重要性日益凸显。然而，传统组态软件价格昂贵、集成复杂，技术门槛高，因此万维组态应运而生。万维组态是一款基于Web的强大可视化组态编辑器，使用标准HTML5技术和Vue2/Vue3语言，基于B/S架构开发，支持WEB端显示。它支持快速集成，操作简便，可在浏览器端完成人机交互，通过简单拖拽设计可视化页面。万维组态可快速构建和部署SCADA、HMI、仪表板或LoT系统，满足自动化工业工厂个性化控制仪表设计需求。它内置丰富的图元组件，二次开发敏捷，支持MQTT、WebSocket、Http三种链接方式。

       三、万维组态组件库

       万维组态拥有超过个组件，包括控制组件、系统组件、扩展图标、可视化大屏组件等。用户还可通过在线上传功能自定义组件。控制组件涵盖切换开关、状态、变量文本、流动条等；系统组件包括基本、通用、杂项、高级等；扩展图标涉及电器、管道、罐体等；可视化大屏组件包括边框、装饰直方图、折线图等。

       四、万维组态功能点

       万维组态提供多种功能，如我的收藏、图纸设置、图元层次、编辑快捷按钮、图元样式、图元文本、图元数据、图纸保存、图纸预览、虚拟变量配置、图纸页面管理、数据链接、自适应屏幕等。

       五、万维组态文档

       万维组态文档包括本地部署文档、线上部署文档、操作说明文档、接口说明文档、绑点示例文档、培训视频、接入源代码说明、扩展图元示例文档、大屏图元示例文档等。

       六、万维组态后端DEMO

       万维组态管理后端包含组态管理、模版管理、图元收藏、组态编辑器所需接口。

       七、示例

什么是web组态?web组态软件的功能特点是什么?

       组态软件是用于控制和监控设备的平台工具，能快速构建工业自动控制系统的监控功能。常见于工业、自动化和过程控制领域，提供实时监控、设备状态报告、故障检测、报警和设备控制等服务。

       Web组态编辑器，通过浏览器操作，实现工程管理、组态编辑和实时数据监控。支持图元、图表和数据库配置，完成基于Web服务的多用户访问。

       国产Web组态软件市场功能强大，以下列举几款：

       Sovit2D，由长沙数维图信息科技有限公司研发，使用HTML5技术，基于B/S架构。支持2D/3D图形组态，MQTT协议接入，提供行业标准元器件库和模板，便于快速构建SCADA、HMI、仪表板和IIOT系统。

       Iotopo，由大连图扑物联科技有限公司推出，用于泛工业物联网场景。前端采用HTML5开发，支持MQTT和工业通讯协议，支持数据门户定制，与企业平台无缝整合。

       McgsWeb，由昆仑技创发布，配套昆仑技创智能物联网触摸屏使用。基于Windows，适用于快速构造和生成监控系统，具备操作简便、可视性好、功能完善、可维护性强等优势。

       BY组态，作为vue、react项目中的前端插件工具，无需框架限制。专用于化工、石化、制药、冶金、建材、市政、环保、电力等行业。

       ZK-VIEW，专业服务于能源电力、工业物联网、智能制造、原型设计领域的大屏可视化、工艺流程监控和后台管理。通过拖拽组件配置，实现Web组态监控网站应用开发。