工业组态 × 数据大屏 × ThingsBoard：SceneV 数据大屏可视化
用 Meta2D 打造工业级数据大屏：SceneV
今天要为大家介绍一个基于Meta2D框架构建的开源前端可视化项目——SceneV，它是一个功能强大、高度可定制的低代码/无代码数据大屏设计器，特别适合与ThingsBoard物联网平台对接，实现工业级数据可视化。
🌐 项目简介
官网地址：https://www.meta2dthingsboard.cn
API 文档：http://api.meta2dthingsboard.cn/
gitee地址：https://gitee.com/zy849082187/scene-v
该项目基于 Meta2D 图形引擎打造，是一款专注于工业组态图 + 数据可视化大屏设计的前端编辑器。用户无需编写复杂代码，即可通过拖拽组件的方式快速搭建专业级大屏界面，并支持实时绑定 ThingsBoard 数据源，通过webscoket连接，实现动态数据展示。
设计器截图
🔧 核心功能亮点
1.可视化拖拽式设计器
左侧组件面板提供丰富的控件类型：
- 基础组件：文本、数字、进度条、图片、图标等
- 输入控件：输入框、下拉选择器、开关、滑块等
- 图表组件：折线图、柱状图、饼图、仪表盘、地图等
- 高级组件：事件日志表格、地图联动、动画效果等
支持自由布局、缩放、对齐、分层管理（图层），操作体验接近主流设计软件。
2.强大的画布配置能力
右侧“画布设置”面板允许你精细控制：
- 背景颜色与背景图上传
- 主题切换（如“暗黑”风格）
- 网格显示与自动对齐
- 尺寸自定义（默认 1920×1080）
- 组件锁定、禁止移动等保护机制
✅ 实现了从“静态海报”到“动态数据看板”的跃迁！
3.无缝对接 ThingsBoard IoT 平台
这是本项目最大的亮点之一！
- 支持通过 websocket， 接入 ThingsBoard 的设备数据
- 实现了 ThingsBoard 的仪表盘中 别名、数据过滤器、时间窗口订阅方式
- 可将图表、数值、仪表盘等组件绑定至特定设备的属性或遥测数据
- 支持遥测数据更新，大屏数据实时同步
- 支持多设备聚合分析，适用于园区、楼宇、工厂等场景
Thingsboard数据对接截图
screenshot_2025-12-10_10-57-48
💡 示例：将某台机器的温度传感器值绑定到“仪表盘”组件上，当温度超过阈值时，仪表盘变红并触发告警提示。
4.工业级组态图支持
- 多类型的工业组态图形，支持绝大多数工业场景，已在项目中使用
- 支持在地图上标注设备位置，用连线表示通信关系
- 可添加动态路径动画，模拟物流轨迹或数据流向
- 适配 SCADA、MES、能源监控等典型工业场景
组态效果图（来自meta2d官方模板截图）
🚀 如图中所示，组态图形完整的模拟工业生产场景，非常适合用于智慧城市、电力调度、水利、自动化仪器等系统。
5.组件丰富，样式炫酷
- 提供多种 UI 风格模板（科技蓝、深空灰、极简白等）
- 支持自定义主题色、边框、阴影、渐变
- 动画过渡平滑，加载流畅
- 支持导出为 HTML 或 JSON 配置文件，便于部署上线
🛠️ 技术架构概览
| 技术栈 | 说明 |
|---|---|
| 前端框架 | Vue 3 + TypeScript |
| 图形引擎 | Meta2D —— 一款轻量级、高性能的 2D 图形渲染库 |
| 状态管理 | Pinia / Vuex |
| UI 框架 | Element Plus |
| 数据接口 | HTTP 、MQTT、Websocket、Thingsboard |
| 部署方式 | 支持本地调试、Nginx 静态部署、集成到 Web 应用中 |
⚠️ 注意：目前项目仍处于活跃开发阶段，部分功能正在开发中。
🚀 使用场景推荐
智慧工厂监控中心
- 展示各产线设备运行状态
- 实时更新能耗、良品率、故障次数
- 结合地图展示厂区分布
城市物联网运营平台
- 监控摄像头、环境传感器、智能井盖等设备
- 利用地图热力图展示空气质量变化趋势
能源管理系统
- 显示电网负荷、光伏发电量、储能状态
- 设置报警阈值，异常时弹窗提醒
教育科研项目演示
- 学生可快速搭建实验数据可视化界面
- 教师用于教学演示物联网应用
如果你正在寻找一个轻量、高效、可定制的数据可视化解决方案，尤其需要对接 ThingsBoard 平台，那么meta2d-thingsboard-designer绝对值得一试！
📌项目地址：https://github.com/TheXiong/meta2d-thingsboard-designer
📌技术关键词：#数据可视化 #大屏设计 #ThingsBoard #Meta2D #Vue3 #低代码 #工业组态 #IoT #前端开发