前端使用二开Thingsboard一、二、三事(五)-仪表板(三)

最新推荐文章于 2025-05-23 19:56:09 发布
最新推荐文章于 2025-05-23 19:56:09 发布
阅读量318 收藏 1
点赞数 3
分类专栏： thingsboard、物联网、IOT 文章标签： 前端 iot angular.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43163457/article/details/135864493
版权
本文介绍了如何在前端二开Thingsboard时，针对物联网设备数据创建自定义仪表板部件，并实现主题颜色控制。通过编辑部件的HTML和CSS，结合Angular语法实现暗模式检测。此外，详细讲解了添加点击动作以切换主题颜色，以及仪表板的高级设置步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

logo

前端使用二开Thingsboard一、二、三事(五)-仪表板(三)

thingsboard之仪表盘

这章开始讲仪表板中部件的实际应用，因为物联网中接入的设备可能千奇百怪，现有的部件可能并不能完美的展示出接入的设备数据，本人展示的部件仅供大家参考，如有更加好的方式，欢迎大家讨论。

四、主题颜色控制部件

在这里插入图片描述
在这里插入图片描述
通过上面两个图可以看到背景色统一都是暗色的，但是部件中的颜色是颜色是可以控制改变的，也就是改变当前部件的主题颜色

在这里插入图片描述
点击

了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端使用二开Thingsboard一、二、三事(五)-仪表板(六)
weixin_43163457的博客
03-04 407
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
前端使用二开Thingsboard一、二、三事(五)-仪表板(二)
weixin_43163457的博客
02-19 439
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
ThingsBoard平台web-ui界面修改
guxiaohai_的博客
09-27 5549
一：导入部件库与修改logo 详细教程：https://www.iotschool.com/topics/712 导入部件库： 找到tingsboard源码application\src\main\data\json\system\widget_bundles 启动tingsboard程序项目 找到部件库菜单栏，点击文件json导入 修改logo图片： 制定自身需求logo，格式为.svg 导入进tingsboard源码ui-ngx\src\assets目录下 找到源码ui-ngx\src\app\sha
thingsBoard仪表板黑暗主题切换
qq_42243383的博客
03-29 1152
thingsBoard切换黑暗主题，实时设备监测仪表板配置
ThingsBoard自定义仪表小部件示例
物联网三分钟
03-09 5592
系列文章首发语雀文档地址：https://www.yuque.com/kuwei-g0lft/tb 欢迎加入Thingsboard知识星球，一起交流。（前一百名免费） 进入链接https://t.zsxq.com/I2rne6y或公众号《物联网三分钟》 文章目录先看效果基本小部件API开始应用 先看效果 黑色指针会指向最新的遥测数据的温度值。温度实时变化指针左右摇摆。 先提一下仪表小部件开发需要了解的内容，以免js代码不明白。 基本小部件API 官网介绍https://thingsboard.io/.
ThingsBoard 入门
qqk808的博客
06-04 2262
每个客户用户都将看到自己的设备，并且无法看到属于其他客户的设备或任何其他数据。要查看我们在步骤 2 中发送的“温度”数据的最新值，我们应该配置数据源。图表小部件显示同一数据键（在我们的例子中为“温度”）的多个历史值。第一列显示设备的名称，第二列显示“温度”键（设备遥测）的值。举例来说，让我们添加一个设备，它将把以下数据传输到 ThingsBoard 平台：设备的名称和温度读数作为遥测。让我们创建一个仪表板并向其中添加三个小部件，以显示实体列表及其最新值，以及显示与指定实体相关的警报信号。
【开源学习】ThingsBoard -- 基本配置与使用
情绪瓜皮皮丶的学习之路
12-29 8805
学习整理了开源物联网IoT平台 Thingsboard 的基本配置与使用
前端使用二开Thingsboard一、二、三事（一）-thingsboard介绍
weixin_43163457的博客
02-18 708
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
前端使用二开Thingsboard一、二、三事(二)-设备
weixin_43163457的博客
02-18 232
登录Thingsboard后，进入的第一个页面便是首页，首页展示分为两部分，默认展示的是快捷入口模块点击模块便可进入相应的侧边栏页面，默认显示模块个数与侧边栏展示列一般相同，展示内容可在代码中进行删减，具体操作在上一章中已做介绍，此处不再累述，除了默认展示外，还可根据用户需求制作数据展示首页，如下图：怎么制作数据展示页面是个复杂的过程(二次开发主要集中在这里)，之后会单独讲，此处先说如何切换默认首页和数据展示首页。
前端使用二开Thingsboard一、二、三事(五)-仪表板(一)
weixin_43163457的博客
02-21 309
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
thingsBoard黑暗系中修改图标的颜色,修改翻页样式
qq_42243383的博客
03-15 327
根据网上找的这个图标没有切换过来匹配的颜色，是因为少了个样式，加上就可以。在编辑模式–设置—高级设置中加上如上代码。主题切换的方法，我在后面会加上。
物联网Thingsboard运用之仪表板使用
weixin_71146793的博客
04-29 1330
Thingsboard之仪表板使用
thingsBoard解决因添加背景图而切换黑暗模式失效的问题
qq_42243383的博客
03-14 186
因为部件添加背景图的地方不对，才切换失败，在下图的地方配置。下面的背景图删除不要在这里加。
ThingsBoard教程（三一）：ThingsBoard 仪表盘详解
知无涯
10-18 4308
仪表盘是一个物联网平台必备的一个功能，它可以将收集到的设备数据优雅美观地展示给用户，有些数据是时间序列图，有些是折线，扇形图。而评估一个物联网是否功能完善，一个重要指标就要看它的仪表盘管理能力如何。本篇文章我们就来谈谈tb中的仪表盘功能，包括其中的一些核心概念和功能的使用，此外如何与其他资源，如客户，资产，设备联动显示仪表盘。仪表盘的编辑区域，最核心的实体筛选器，如果你要为某个设备，或某一类设备做一个仪表盘时，就需要使用到它。大家可以多多地操作一下。
Thingsboard开源IOT平台（一）--基本介绍
热门推荐
AI所思所想
06-16 5万+
因工作缘故，需要搭建一套IOT平台。出于数据保护和前期验证的缘故，没有选用华为、阿里等成熟的IOT平台，而是基于开源的Thingsboard去搭建IOT平台。 Thingsboard简介 ThingsBoard是一个开源平台，用于收集和可视化物联网设备的数据。可以将来自任意数量设备的数据发送到云服务器，在云服务器中可以通过可自定义的仪表板查看或共享。 Thingsboard支持提供设备连接的...
ThingsBoard 仪表改造-图例设置增加自定义项
物联网三分钟
03-17 3257
系列文章首发语雀文档地址：https://www.yuque.com/kuwei-g0lft/tb 欢迎加入Thingsboard知识星球，一起交流。（前一百名免费） 进入链接https://t.zsxq.com/I2rne6y或公众号《物联网三分钟》 文章目录效果说明数据准备ui-ngx代码修改 有群友觉得thingsboard的图例设置不能满足需求，想要最大值减最小值。怎么自己实现呢？ 效果说明 原版未提供 显示最大值减最小值选项。「差值」和「显示最大减最小」想改成别的文字，在最后面的local.
thingsboard中用户、设备、仪表板三者的关系；创建温度曲线图
Panther
07-29 6272
tb中关于用户+设备+仪表板----如何在ui端显示
基于Browser Use + Playwright 实现AI Agent操作Web UI自动化
fantasy_4的博客
05-21 810
基于Browser Use + Playwright 实现AI Agent操作Web UI自动化
SpringMVC（结合源码浅析工作流程）
最新发布
weixin_45865163的博客
05-23 599
Spring MVC是基于前端控制器（）设计模式的 Web 框架，在 Web 应用中指一个统一的入口，用来接收所有客户端请求，并统一进行分发、处理。在SpringMVC中，前端控制器就是Controller。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_43163457

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值