Vue3 + TS 打造的工业低代码组态平台，拖拽即出大屏

PLC技术网抖音群

前言

工业现场、指挥中心或智慧城市展厅里，那些动态流转的大屏背后，往往藏着复杂的开发流程——写代码、调样式、对接数据、反复测试。但现实是，很多业务人员懂需求却不懂编程，而开发资源又总是紧张。有没有一种方式，能让非程序员也能快速做出专业级的组态图或数据大屏？

本文推荐一个真正面向工业与物联网场景的低代码可视化平台。它不靠噱头，而是用"拖拽+配置"把专业能力交到用户手中。

项目介绍

项目是一个从零设计的低代码组态与数据可视化开发平台，核心目标就两个：工业组态  和  数据大屏。无论是工厂里的 SCADA 监控界面，还是城市运行中心的 IoT 数据看板，用户都可以通过直观的图形化编辑器完成搭建，无需写一行代码。平台既支持静态布局，也支持动态数据绑定，还能接入真实设备数据，做到"所见即所得，所配即所用"。

项目功能

1、提供丰富的内置组件库，包括基础图形、图表、视频、地图、设备图元等

2、支持拖拽式画布操作，自由组合元素，快速完成页面布局

3、多数据源接入：原生支持 ThingsBoard、HTTP、MQTT、WebSocket 等协议

4、实时数据驱动：元素属性可绑定设备字段，数据变化自动更新界面

5、条件交互控制：根据数据值动态显示/隐藏元素，或触发动画效果

6、模板复用机制：保存常用布局为模板，一键复用于新项目

7、跨端适配：自动响应不同屏幕尺寸，适配 PC、大屏、移动端 WebView

项目特点

简单但不简陋：提供零代码拖拽操作，同时支持深度扩展，满足专业需求。

工业场景原生适配：内置泵阀、电机、管道等工业图元，贴合 SCADA、MES、能源监控等典型应用。

高性能渲染：基于 Canvas 自研渲染引擎，可流畅展示万级数据点，避免卡顿。

开箱即用：预置大屏模板、背景、配色方案和布局组件，新手也能快速上手。

动态交互能力强：支持条件显示、路径动画、数据驱动样式变化等丰富交互效果。

跨端自适应：自动适配 PC、大屏、平板及移动端 WebView，确保多终端一致体验。

完全自研可控：从布局算法到组件系统全部从零开发，无第三方低代码平台依赖。

项目技术

前端框架：采用主流的 Vite + Vue3 + Element Plus。

底层技术：Canvas。

消息通信：支持 WebSocket、MQTT、HTTP、ThingsBoard。

浏览器支持：Chrome、Firefox、Edge 等现代浏览器。

API 设计：遵循 RESTful API 设计规范。

部署方式：支持离线部署，可在线/离线更新。

项目场景

物联网数字可视化：实时展示物联网设备数据，实现设备状态监控与数据可视化分析。

工业智能制造组态：构建智能工厂的可视化控制系统，实现生产流程的数字化管理。

触摸屏端UI：为工业触摸屏设备定制直观易用的操作界面。

工控可视化：工业控制系统的可视化监控，实现设备状态实时展示与远程控制。

智慧工厂：监控产线设备状态、能耗、良品率等。

城市物联网：监控摄像头、环境传感器，利用热力图展示空气质量等。

项目体验

体验地址：https://meta2dthingsboard.cn

项目效果

目前 SceneV 已在多个场景落地：某制造企业用它搭建产线监控大屏，实时显示设备状态与良品率；某园区用其集成环境传感器数据，通过热力图展示空气质量分布；还有客户将其部署在工业触摸屏上，作为本地 HMI 操作界面。

组态设计资源

基本控件

大屏设计资源

大屏背景

丰富的组件库

快速布局

视频组件

项目源码

项目源码

文档与示例（https://api.meta2dthingsboard.cn），涵盖组件使用、数据绑定、事件配置等。虽然核心引擎暂未完全开源，但平台支持通过标准 API 和扩展机制进行二次开发。对于有定制需求的企业，可基于其架构进行私有化部署，并利用开放的组件扩展接口集成自有业务逻辑。

Gitee：https://gitee.com/zy849082187/scene-v

总结

项目价值在于，它把工业可视化这一专业领域的能力，封装成了普通人也能操作的工具。它不追求"全自动"，而是提供"高可控的高效"。无论是快速原型验证，还是长期生产系统，都能找到合适的位置。

关键词

低代码、组态可视化、工业大屏、Vue3、Canvas、ThingsBoard、数据绑定、拖拽编辑、物联网、SCADA

作者：小码编匠

出处：gitee.com/smallcore/DotNetCore

声明：网络内容，仅供学习，尊重版权，侵权速删，歉意致谢！

END

往

期

精

彩

一个高性能、可扩展的自研分布式小文件存储系统

一个真正灵活的通用可视化设计器：从大屏到报表，一套架构全搞定

一个开箱即用的AI智能体开发平台

不用Flask、不搞Web，这个Python人脸识别项目直接跑出结果

开源图像标注神器：支持YOLO导出AI辅助迭代训练

基于Qt框架工业机器人离线编程软件实战

一款支持Modbus/MQTT/BACnet的插件化边缘网关

智能数据可视化平台：拖拽组件，实现敏捷分析

一款中后台方向的低代码可视化搭建平台

一款高度简洁的微信Markdown编辑器，让你不再为微信内容排版而发愁

工业级3D展示页面？Threejs这样用就够了

灵活、可靠、高效的分布式任务重试与调度平台

前端后端模型部署全包：这个开源项目让视觉AI真正落地

开源单点登录系统：支持OAuth2、OIDC、SAML的统一认证平台

一个高性能、零GC的Unity动画系统

工控Web系统怎么搭？这个DjangoVue3模板给你答案

基于GB281812016标准实现的开箱即用的网络视频平台

一个轻量、快速、免费，还支持RTL联动的国产开源波形调试工具

开源替代宏脉、领健：打造诊所专属的医疗SaaS系统

开源短剧创作平台FastMovieAI：AI自动生成视频，前后端分离开箱即用

摸鱼神器：Vue3可视化表单设计器，自动生成代码

备注【开源】

方便大家交流、资源共享和共同成长

纯技术交流群、需要的小伙伴请扫码

有收获？不妨分享让更多人受益

关注「程序员开源栈」，共同提升技术实力

点分享

点收藏

点在看

点点赞

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！