用 Meta2D 打造工业级数据大屏SceneV今天要为大家介绍一个基于Meta2D框架构建的开源前端可视化项目——SceneV它是一个功能强大、高度可定制的低代码/无代码数据大屏设计器特别适合与ThingsBoard物联网平台对接实现工业级数据可视化。 项目简介官网地址https://www.meta2dthingsboard.cnAPI 文档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 / VuexUI 框架Element Plus数据接口HTTP 、MQTT、Websocket、Thingsboard部署方式支持本地调试、Nginx 静态部署、集成到 Web 应用中⚠️ 注意目前项目仍处于活跃开发阶段部分功能正在开发中。 使用场景推荐智慧工厂监控中心展示各产线设备运行状态实时更新能耗、良品率、故障次数结合地图展示厂区分布城市物联网运营平台监控摄像头、环境传感器、智能井盖等设备利用地图热力图展示空气质量变化趋势能源管理系统显示电网负荷、光伏发电量、储能状态设置报警阈值异常时弹窗提醒教育科研项目演示学生可快速搭建实验数据可视化界面教师用于教学演示物联网应用如果你正在寻找一个轻量、高效、可定制的数据可视化解决方案尤其需要对接 ThingsBoard 平台那么meta2d-thingsboard-designer绝对值得一试项目地址https://github.com/TheXiong/meta2d-thingsboard-designer技术关键词#数据可视化 #大屏设计 #ThingsBoard #Meta2D #Vue3 #低代码 #工业组态 #IoT #前端开发