Skip to content

ThingsBoard 定制化开发 ​

正文与配图来自原稿。涵盖 UI 换皮与 Transport 定制;导出工具代码较长,文中给用法与关键点。

一、前端界面定制 ​

替换对应静态资源(按截图路径改图片):

登录 Logo 1

登录 Logo 2

2、浏览器 Favicon ​

favicon 1

favicon 2

3、标题栏「ThingsBoard」文字 ​

标题

文字来自前端,改 ui-ngx/src/app/core/services/title.service.ts 中对 env.appTitle 的使用:

title.service

title.service 2

4、刷新仍出现 ThingsBoard ​

同步改 environment.ts 的 appTitle:

刷新标题

环境

appTitle

主页 Logo

主页 Logo 2

6、去掉仪表盘 Powered by ​

源码级隐藏(全局);单仪表盘 CSS 见 去掉 Powered by。

页脚

页脚改

7、Tables / Charts 导出 ​

在部件自定义动作中挂导出脚本(原稿 ZDExportUtil):下载依赖后调用:

js
ZDExportUtil.exportTbWidgetData(widgetContext, '设备历史数据导出_' + Date.now() + '.xls');

导出入口

配置

动作

配合实体别名可导出资产/设备表。

8、系统 / 租户 / 客户默认首页 ​

改 ui-ngx/src/assets/dashboard/ 下 JSON,将 widgets 置为 {} 等按需清空:

首页 json

首页 json 2

9、去掉 GitHub 标记 ​

改 ui-ngx/src/app/modules/home/home.component.html:

GitHub

GitHub 2

10、导出全部资产/设备 ​

别名查全量 + 实体表格 + 上述导出动作:

导出全量

二、后端接口定制 ​

1、接收 HEX / 文本透传 ​

同 自定义开发 / mqtt 文本遥测:

文本上报

2、自定义 RPC 参数 ​

customParamSend + paramType + data,改 createMqttPublishMsg:

RPC 1

RPC 2

RPC 3

三、小结 ​

换皮优先改 environment、静态资源与首页 JSON;协议定制改 MQTT Transport。升级 TB 版本时合并冲突成本较高,建议用补丁/分支管理。