组态图 + ThingsBoard 拖拽式搭建可视化数据大屏

组态图 + ThingsBoard 搭建可视化数据大屏

项目名称：meta2d-thingsboard-designer
GitHub 地址：https://github.com/TheXiong/meta2d-thingsboard-designer

🌟 为什么需要“组态 + ThingsBoard”？

• ThingsBoard是一个开源的 IoT 平台，擅长设备接入、规则引擎和数据存储；
• 传统组态软件功能强大但开发复杂、学习成本高；
• meta2d-thingsboard-designer 组态设计器融合两者优势：
  • ✅ 拖拽式搭建
  • ✅ 无缝对接 ThingsBoard
  • ✅ 支持多源数据
    → 实现低代码构建专业级 IoT 数据大屏！

meta2d-thingsboard-designer 正是为此而生——
它不仅支持实时数据展示，更内置强大的数据联动与事件处理引擎，让大屏真正“活”起来！

设计器大屏演示

🎨 核心功能亮点

1. 可视化拖拽设计器

• 丰富组件库：
  • 基础：文本、数字、图片、图标
  • 输入：开关、滑块、下拉框
  • 图表：折线图、柱状图、仪表盘、地图
  • 高级：事件日志、动画路径、拓扑连线
• 工业级组态图形：
  • 支持电力、水务、制造、楼宇等场景模板
  • 可在地图上标注设备位置，用连线表示通信关系
  • 支持动态路径动画（如物流轨迹、数据流向）

2. 多数据源支持

数据源类型说明

✅ ThingsBoard

✅ HTTP

✅ MQQT

✅ WebScoket

3.Thingsboard数据对接截图

💡 示例：将thingsboard的遥测数据通过webscoket订阅到仪表盘中，遥测数据更新，图表数据实时更新

4. 数据联动 & 事件处理（核心引擎）

meta2d-thingsboard-designer 的核心优势在于将静态大屏升级为智能交互系统。通过内置的可视化事件引擎，无需编码即可实现：

🔗 数据驱动 UI 变化

• 组件样式、可见性、内容可绑定到任意数据字段
• 示例：
  • 当temperature > 30→ 仪表盘背景变红
  • 当status === "offline"→ 设备图标置灰 + 显示 ❌

🛎️ 智能告警与通知

• 支持多级阈值告警（警告/严重）
• 触发动作包括：
  • 弹出消息提示框
  • 播放提示音
  • 高亮闪烁组件
  • 自动记录到日志面板

🖱️ 用户交互触发控制

• 点击、悬停、双击等操作可绑定业务逻辑
• 典型场景：
  • 点击水泵图标 → 弹出“启停控制”对话框
  • 拖动滑块 → 实时调节设备参数（通过 RPC 下发）

📤 双向指令下发（ThingsBoard RPC）

• 通过数据的变更自动给设备下发命令
• 手动支持向设备发送同步/异步 RPC 命令
• 配置方式：

  {"method":"setValveState","params":{"open":true}}

5. 响应式 & 多端适配

• 自动适配 PC、平板、大屏、移动端
• 支持 4K 分辨率，满足指挥中心需求
• 提供多种 UI 主题：科技蓝、深空灰、极简白
• 支持自定义主题色、边框、阴影、渐变

📌技术标签：#数据可视化#大屏设计#ThingsBoard#Meta2D#Vue3#低代码#工业组态#IoT#前端开发