导读ThingsBoard 是业界领先的开源物联网平台但在面对复杂的工业工艺流程图、管网拓扑或数字孪生大屏时原生组件往往显得力不从心。是否需要重写 Angular 代码来开发自定义 Widget完全不需要本文基于官方文档深度解析手把手教你如何通过SceneV提供的专用部件包将专业的工业组态软件无缝嵌入 ThingsBoard。更令人兴奋的是该方案原生支持直接获取 ThingsBoard 的所有数据上下文包括设备属性 (Attributes)、实体信息 (Entity)、最新遥测数据 (Latest Telemetry)等无需任何中间件真正实现“拖拽即所得数据即连通”。 为什么选择 SceneV ThingsBoard在工业物联网项目中我们常面临这样的困境ThingsBoard 很强设备接入、规则引擎、权限管理无懈可击。可视化太弱原生图表难以表达复杂的管道流向、阀门联动、动态产线状态。开发成本高自定义开发一个支持缩放、拖拽、数据绑定的组态 Widget需要深厚的前端功底和大量时间。SceneV的出现完美解决了这一痛点。它作为一个第三方部件库 (Widget Bundle)集成到 ThingsBoard 中具备以下核心优势零代码集成导入 JSON 包即可使用无需修改 ThingsBoard 源码。全数据直通直接读取当前仪表盘上下文中的所有数据属性、遥测、实体详情自动映射到组态图元。低代码设计在独立的在线设计器中拖拽生成复杂画面导出 JSON 填入配置即可。多端自适应一次设计完美适配 PC 大屏、平板及手机移动端。 核心亮点全维度数据无缝对接这是 SceneV 集成方案最强大的地方。不同于普通图表只能绑定单一数据源SceneV 部件能够直接感知 ThingsBoard 的完整数据上下文。当你在 ThingsBoard 仪表盘中配置好数据源后SceneV 内部可以直接访问以下数据维度数据类型描述应用场景示例 最新遥测数据 (Latest Telemetry)设备实时上报的时间序列数据如温度、压力、转速。驱动仪表盘指针旋转、实时曲线绘制、温度颜色渐变。️ 服务器/客户端属性 (Attributes)设备的静态或半静态配置信息如设备型号、安装位置、额定功率。显示设备铭牌信息、根据型号加载不同图标、设定阈值参数。 实体信息 (Entity Details)设备本身的元数据如设备名称、标签 Tags、类型、ID。动态标题显示、根据设备类型自动切换组态模板、权限控制。 关联实体数据通过 ThingsBoard 关系链获取的上下游设备数据。展示整条产线的联动状态、泵站与水管的关联监控。 工作原理SceneV 部件会自动监听 ThingsBoard 下发的data对象。你在设计器中绑定的变量名Key只需与 ThingsBoard 数据源中的键名一致数据流便会自动注入驱动图元动态变化。️ 实战教程三步完成集成第一步获取并导入 SceneV 部件包首先你需要将 SceneV 的部件库“安装”到你的 ThingsBoard 环境中。下载部件包访问官方资源页下载专用的部件定义文件JSON格式。下载地址点击获取 SceneV 部件包注若链接需要提取码请前往 社区页面 获取。导入到 ThingsBoard登录 ThingsBoard 管理员账号。进入左侧菜单部件库 (Widgets Library)。点击右下角的导入 (Import)按钮向上箭头图标。选择下载的 JSON 文件并确认。导入成功后在部件列表中找到名为SceneV的新分类。第二步在仪表盘中添加组态部件将导入的部件添加到你的监控大盘中。编辑仪表盘打开目标仪表盘点击右上角编辑 (Edit)进入布局模式。点击添加新部件 (Add new widget)。选择 SceneV 部件在弹窗的包过滤器 (Bundle filter)中选择所有部件 (All widgets)或直接找到SceneV包。搜索scenev点击对应的卡片。将其添加到仪表盘的任意位置。第三步配置数据源与组态内容关键步骤这一步是将 ThingsBoard 的数据“喂”给组态画面的核心。配置数据源 (Datasources)在部件配置界面点击数据源 (Datasources)区域。添加设备选择你要监控的一个或多个设备。选择数据类型勾选最新遥测数据 (Latest Telemetry)选择如temperature,pressure,status等实时键值。勾选属性 (Attributes)选择如model,location等设备属性。此时这些数据已完全对 SceneV 可见。填入组态配置在设置 (Settings)或高级配置区域找到组态内容 (Widget Config)输入框。方式 A推荐在 SceneV 在线设计器 中画好图导出 JSON 字符串直接粘贴到这里。方式 B填入设计器的项目 ID如果支持云端加载。填写授权 Key在对应输入框填入从官网获取的合法 Key获取 Key去除水印并解锁全部功能。保存并预览点击添加/保存。退出编辑模式你将看到精美的工业组态画面且其中的数值、颜色、状态正随着 ThingsBoard 的设备数据实时跳动。 进阶技巧如何绑定数据在 SceneV 在线设计器中数据绑定逻辑非常简单只需遵循“键名一致”原则在 ThingsBoard 端数据源配置了键名temp(遥测),device_type(属性)。在 SceneV 设计器端选中一个文本组件在数据绑定面板中变量名填写temp。选中一个管道组件在颜色联动规则中判断变量temp 80 时变红。选中一个图标根据变量device_type的值切换不同的图片资源。无需编写任何 JavaScript 代码转换数据ThingsBoard 传来的原始数据直接被 SceneV 引擎消费。⚠️ 常见问题与优化1. 依赖资源加载失败现象部件白屏控制台报 CDN 错误。解决在部件配置的资源 (Resources)选项卡中将默认的 JS/CSS 链接替换为国内镜像源或下载到你自己的服务器静态目录并修改引用路径。确保canvasSvg.js等核心库能正常加载。2. 数据不更新检查确认 ThingsBoard 设备是否有实时数据上报。检查部件配置中的数据源是否已正确勾选了对应的 Key。确认 SceneV 设计器中的变量名与 ThingsBoard 的 Key完全一致区分大小写。3. 移动端适配建议在 SceneV 设计器中设计时务必使用百分比布局或锚点定位避免使用固定像素值以确保在 ThingsBoard 移动端 App 或 H5 页面中完美展示。 总结通过集成SceneVThingsBoard 瞬间拥有了企业级的工业组态能力✅全数据支持无缝读取遥测、属性、实体等所有上下文数据。✅极低门槛无需懂 Angular/React业务人员也能通过拖拽构建复杂监控画面。✅原生体验作为标准 Widget 存在完美融合在 ThingsBoard 的权限与架构体系中。✅高性能基于 Canvas/WebGL 渲染轻松支撑万级图元与高频数据刷新。不要再为复杂的可视化需求发愁立即导入 SceneV 部件包让你的 ThingsBoard 仪表盘焕发新生官网地址https://www.meta2dthingsboard.cnAPI 文档http://api.meta2dthingsboard.cn/gitee地址https://gitee.com/zy849082187/scene-v标签#ThingsBoard #工业组态 #SceneV #物联网 #数据可视化 #低代码 #数字孪生 #前端开发 #MQTT #智慧工厂 #开源项目
# 教你如何在 ThingsBoard 中集成工业组态软件
发布时间：2026/5/16 23:01:53
导读ThingsBoard 是业界领先的开源物联网平台但在面对复杂的工业工艺流程图、管网拓扑或数字孪生大屏时原生组件往往显得力不从心。是否需要重写 Angular 代码来开发自定义 Widget完全不需要本文基于官方文档深度解析手把手教你如何通过SceneV提供的专用部件包将专业的工业组态软件无缝嵌入 ThingsBoard。更令人兴奋的是该方案原生支持直接获取 ThingsBoard 的所有数据上下文包括设备属性 (Attributes)、实体信息 (Entity)、最新遥测数据 (Latest Telemetry)等无需任何中间件真正实现“拖拽即所得数据即连通”。 为什么选择 SceneV ThingsBoard在工业物联网项目中我们常面临这样的困境ThingsBoard 很强设备接入、规则引擎、权限管理无懈可击。可视化太弱原生图表难以表达复杂的管道流向、阀门联动、动态产线状态。开发成本高自定义开发一个支持缩放、拖拽、数据绑定的组态 Widget需要深厚的前端功底和大量时间。SceneV的出现完美解决了这一痛点。它作为一个第三方部件库 (Widget Bundle)集成到 ThingsBoard 中具备以下核心优势零代码集成导入 JSON 包即可使用无需修改 ThingsBoard 源码。全数据直通直接读取当前仪表盘上下文中的所有数据属性、遥测、实体详情自动映射到组态图元。低代码设计在独立的在线设计器中拖拽生成复杂画面导出 JSON 填入配置即可。多端自适应一次设计完美适配 PC 大屏、平板及手机移动端。 核心亮点全维度数据无缝对接这是 SceneV 集成方案最强大的地方。不同于普通图表只能绑定单一数据源SceneV 部件能够直接感知 ThingsBoard 的完整数据上下文。当你在 ThingsBoard 仪表盘中配置好数据源后SceneV 内部可以直接访问以下数据维度数据类型描述应用场景示例 最新遥测数据 (Latest Telemetry)设备实时上报的时间序列数据如温度、压力、转速。驱动仪表盘指针旋转、实时曲线绘制、温度颜色渐变。️ 服务器/客户端属性 (Attributes)设备的静态或半静态配置信息如设备型号、安装位置、额定功率。显示设备铭牌信息、根据型号加载不同图标、设定阈值参数。 实体信息 (Entity Details)设备本身的元数据如设备名称、标签 Tags、类型、ID。动态标题显示、根据设备类型自动切换组态模板、权限控制。 关联实体数据通过 ThingsBoard 关系链获取的上下游设备数据。展示整条产线的联动状态、泵站与水管的关联监控。 工作原理SceneV 部件会自动监听 ThingsBoard 下发的data对象。你在设计器中绑定的变量名Key只需与 ThingsBoard 数据源中的键名一致数据流便会自动注入驱动图元动态变化。️ 实战教程三步完成集成第一步获取并导入 SceneV 部件包首先你需要将 SceneV 的部件库“安装”到你的 ThingsBoard 环境中。下载部件包访问官方资源页下载专用的部件定义文件JSON格式。下载地址点击获取 SceneV 部件包注若链接需要提取码请前往 社区页面 获取。导入到 ThingsBoard登录 ThingsBoard 管理员账号。进入左侧菜单部件库 (Widgets Library)。点击右下角的导入 (Import)按钮向上箭头图标。选择下载的 JSON 文件并确认。导入成功后在部件列表中找到名为SceneV的新分类。第二步在仪表盘中添加组态部件将导入的部件添加到你的监控大盘中。编辑仪表盘打开目标仪表盘点击右上角编辑 (Edit)进入布局模式。点击添加新部件 (Add new widget)。选择 SceneV 部件在弹窗的包过滤器 (Bundle filter)中选择所有部件 (All widgets)或直接找到SceneV包。搜索scenev点击对应的卡片。将其添加到仪表盘的任意位置。第三步配置数据源与组态内容关键步骤这一步是将 ThingsBoard 的数据“喂”给组态画面的核心。配置数据源 (Datasources)在部件配置界面点击数据源 (Datasources)区域。添加设备选择你要监控的一个或多个设备。选择数据类型勾选最新遥测数据 (Latest Telemetry)选择如temperature,pressure,status等实时键值。勾选属性 (Attributes)选择如model,location等设备属性。此时这些数据已完全对 SceneV 可见。填入组态配置在设置 (Settings)或高级配置区域找到组态内容 (Widget Config)输入框。方式 A推荐在 SceneV 在线设计器 中画好图导出 JSON 字符串直接粘贴到这里。方式 B填入设计器的项目 ID如果支持云端加载。填写授权 Key在对应输入框填入从官网获取的合法 Key获取 Key去除水印并解锁全部功能。保存并预览点击添加/保存。退出编辑模式你将看到精美的工业组态画面且其中的数值、颜色、状态正随着 ThingsBoard 的设备数据实时跳动。 进阶技巧如何绑定数据在 SceneV 在线设计器中数据绑定逻辑非常简单只需遵循“键名一致”原则在 ThingsBoard 端数据源配置了键名temp(遥测),device_type(属性)。在 SceneV 设计器端选中一个文本组件在数据绑定面板中变量名填写temp。选中一个管道组件在颜色联动规则中判断变量temp 80 时变红。选中一个图标根据变量device_type的值切换不同的图片资源。无需编写任何 JavaScript 代码转换数据ThingsBoard 传来的原始数据直接被 SceneV 引擎消费。⚠️ 常见问题与优化1. 依赖资源加载失败现象部件白屏控制台报 CDN 错误。解决在部件配置的资源 (Resources)选项卡中将默认的 JS/CSS 链接替换为国内镜像源或下载到你自己的服务器静态目录并修改引用路径。确保canvasSvg.js等核心库能正常加载。2. 数据不更新检查确认 ThingsBoard 设备是否有实时数据上报。检查部件配置中的数据源是否已正确勾选了对应的 Key。确认 SceneV 设计器中的变量名与 ThingsBoard 的 Key完全一致区分大小写。3. 移动端适配建议在 SceneV 设计器中设计时务必使用百分比布局或锚点定位避免使用固定像素值以确保在 ThingsBoard 移动端 App 或 H5 页面中完美展示。 总结通过集成SceneVThingsBoard 瞬间拥有了企业级的工业组态能力✅全数据支持无缝读取遥测、属性、实体等所有上下文数据。✅极低门槛无需懂 Angular/React业务人员也能通过拖拽构建复杂监控画面。✅原生体验作为标准 Widget 存在完美融合在 ThingsBoard 的权限与架构体系中。✅高性能基于 Canvas/WebGL 渲染轻松支撑万级图元与高频数据刷新。不要再为复杂的可视化需求发愁立即导入 SceneV 部件包让你的 ThingsBoard 仪表盘焕发新生官网地址https://www.meta2dthingsboard.cnAPI 文档http://api.meta2dthingsboard.cn/gitee地址https://gitee.com/zy849082187/scene-v标签#ThingsBoard #工业组态 #SceneV #物联网 #数据可视化 #低代码 #数字孪生 #前端开发 #MQTT #智慧工厂 #开源项目
相关文章
一键切换模型体验：OpenClaw同时对接GLM-4.7-Flash与Qwen3-32B
一键切换模型体验：OpenClaw同时对接GLM-4.7-Flash与Qwen3-32B 1. 为什么需要多模型切换 去年冬天，当我第一次尝试用OpenClaw自动化处理周报时，遇到了一个尴尬的问题：简单的表格整理任务，Qwen3-32B模型总是过度消耗To…
nli-distilroberta-base一文详解：开源NLI大模型在语义理解场景的轻量级实践
nli-distilroberta-base一文详解：开源NLI大模型在语义理解场景的轻量级实践 1. 项目概述 自然语言推理(Natural Language Inference, NLI)是自然语言处理中的一项基础任务，它需要判断两个句子之间的关系。nli-distilroberta-base是基于DistilRoBERTa模…
OpenClaw赚钱实录：从“养龙虾“到可持续变现的实践指南——OpenClaw的赚钱底层逻辑与“记忆”革命
【限时99元】专栏原价299元，在专栏未完结的持续更新期间享受99元早鸟价，现在订阅同享后续专栏所有文章！ 【专栏介绍】《OpenClaw赚钱实录：从“养龙虾“到可持续变现的实践指南》专栏介绍 有任何疑问均可联系博主微信（微信号：NeumannAI），作者将亲自解答并持续优化文章内…
从零构建可定制对话系统：模块化架构与RAG实战指南
1. 项目概述：从零构建一个可定制的对话系统最近在折腾一个挺有意思的东西，我把它叫做“定制化聊天系统”。起因很简单，市面上现成的聊天机器人，无论是开源的还是商业的，总感觉差了那么点意思。要么是功能太臃肿&#x…
NestJS类型安全实践：使用nestia实现前后端API契约同步
1. 项目概述：当NestJS遇上TypeScript的极致类型安全如果你和我一样，长期在Node.js后端开发领域摸爬滚打，尤其是在构建企业级API服务时，一定对NestJS框架的优雅和强大深有体会。它提供了清晰的分层架构和强大的依赖注入，…
Claude Code 的“/goals”将执行任务的代理与决定任务完成的代理区分开来。
来源：https://venturebeat.com/orchestration/claude-codes-goals-separates-the-agent-that-works-from-the-one-that-decides-its-done代码迁移代理程序运行完毕，管道状态显示正常。但实际上有几段代码从未编译完成——而且花了数天时间才发现这个问题…
从0到1：手把手教你搭建VSCode（附避坑指南，拒绝报错），全程复制粘贴即可
🔥个人主页：北极的代码（欢迎来访） 🎬作者简介：java后端学习者 ❄️个人专栏：苍穹外卖日记，SSM框架深入，JavaWeb ✨命运的结局尽可永在，不屈的挑战却不可须臾或…
从引脚到协议：JTAG与SWD接口的硬件连接与信号解析
1. JTAG与SWD接口的硬件本质 第一次接触JTAG和SWD接口时，我盯着电路板上那排密密麻麻的引脚直发懵。这两种调试接口就像嵌入式系统的"后门"，让开发者能直接与芯片对话。JTAG全称Joint Test Action Group，早在上世纪80年代就作为芯片…
Apache SeaTunnel：统一数据集成平台的核心架构与生产实践
1. 项目概述：从数据孤岛到统一管道的进化如果你正在处理海量数据，并且厌倦了在不同数据源和目标之间编写和维护一堆零散的脚本，那么 Apache SeaTunnel 这个名字，你应该会越来越频繁地听到。它不是一个新概念，但却是解决…
【实用小程序】超轻量级文件上传下载中心 (File Download Server)
站内源码及jar包下载 一、项目概述 文件下载中心一个基于 Java 内置 HTTP 服务器（com.sun.net.httpserver）构建的轻量级文件管理服务。它零第三方依赖，单 JAR 包即可运行，适合在内网环境或临时场景中快速搭建文件共享站点。 你的团队需要临时共享一批日志文件或交付物，…
py每日spider案例之某website之xin东方选课搜索接口(难度一般 扣取代码即可)
加密位置: 逆向接口参数: 逆向接口: const g = globalThis; g.window = g; g.self = g; g.location = {<
终极轻量级Android文本编辑器Markor：多格式笔记应用完全指南
终极轻量级Android文本编辑器Markor：多格式笔记应用完全指南 【免费下载链接】markor Text editor - Notes & ToDo (for Android) - Markdown, todo.txt, plaintext, math, .. 项目地址: https://gitcode.com/gh_mirrors/ma/markor 在移动设备上寻找一款…
【实用小程序】超轻量级文件上传下载中心 (File Download Server)
站内源码及jar包下载 一、项目概述 文件下载中心一个基于 Java 内置 HTTP 服务器（com.sun.net.httpserver）构建的轻量级文件管理服务。它零第三方依赖，单 JAR 包即可运行，适合在内网环境或临时场景中快速搭建文件共享站点。 你的团队需要临时共享一批日志文件或交付物，…
py每日spider案例之某website之xin东方选课搜索接口(难度一般 扣取代码即可)
加密位置: 逆向接口参数: 逆向接口: const g = globalThis; g.window = g; g.self = g; g.location = {<
终极轻量级Android文本编辑器Markor：多格式笔记应用完全指南
终极轻量级Android文本编辑器Markor：多格式笔记应用完全指南 【免费下载链接】markor Text editor - Notes & ToDo (for Android) - Markdown, todo.txt, plaintext, math, .. 项目地址: https://gitcode.com/gh_mirrors/ma/markor 在移动设备上寻找一款…
MPC-BE：基于DirectShow架构的专业级开源媒体播放解决方案
MPC-BE：基于DirectShow架构的专业级开源媒体播放解决方案 【免费下载链接】MPC-BE MPC-BE – универсальный проигрыватель аудио и видеофайлов для операционной системы Windows. 项目地址:…
如何快速计算3D模型体积和重量：STL-Volume-Model-Calculator终极指南
如何快速计算3D模型体积和重量：STL-Volume-Model-Calculator终极指南 【免费下载链接】STL-Volume-Model-Calculator STL Volume Model Calculator Python 项目地址: https://gitcode.com/gh_mirrors/st/STL-Volume-Model-Calculator 你是否曾经为3D打印项目…
通过Taotoken CLI工具一键配置团队开发环境与模型密钥
通过Taotoken CLI工具一键配置团队开发环境与模型密钥 1. CLI工具安装与基本使用 Taotoken提供的CLI工具可通过npm全局安装或直接使用npx运行。对于需要频繁使用CLI的团队，推荐全局安装： npm install -g taotoken/taotoken对于临时使用或项目级配置&a…