跳转至

分享|五分钟熟悉 ThingsBoard 前端二次开发

ThingsBoard 的前端使用 Angular 开发,可以通过修改前端代码来满足特定的业务需求, 如果对 Angular 不太了解的话,建议去先预习一下。

经常有人问到,如何对 ThingsBoard 进行二次开发呢?

这篇文章将可能帮助那些还没有解决的伙伴一个思路和指引。

准备工作。

  • 安装 ThingsBoard 要开始 ThingsBoard 前端二次开发,首先需要安装 ThingsBoard。 以3.4.4版本为例
    git clone https://github.com/thingsboard/thingsboard.git
    
  • 编译前端代码 ThingsBoard UI 部分可以单独作为一个模块启动,并且对node版本有所要求,因此这里选择使用nvm来管理node
    cd thingsboard/ui-ngx
    nvm use 16.17
    yarn install
    yarn start
    

快速入门

效果预览。

截屏2023-11-23 16.27.51.png

修改 LOGO 有两种方式。

替换LOGO所在位置的图片assets/logo_title_white.svg, 另一种方式是修改home.component.tslogo = 'assets/logo_title_white.svg';

修改色系

修改色系也是非常简单的操作!

只需要找到对应scss文件ui-ngx/src/theme.scss,并修改这段代码$tb-primary-color: #4779bd;即可完成 ThingsBoard 页面色系的修改,同时还可在theme.scss中修改其他组件颜色。

修改文本

ThingsBoard 文本是根据语言自动进行识别的。

ui-ngx/src/assets/locale中可以找到对应的json文件。可以在原本的字段中进行修改或是参照相同的结构新增。

定制化开发

在进行一些菜单按钮的修改之前,首先要了解 ThingsBoard 前端代码的结构

  • 文件结构

    angular.json            //angular框架的工作目录配置文件
    src                     //所有源码所在地
    app                     //核心代码——页面布局及数据相关
    assets                  //静态资源——图片、国际化配置
    environments            //环境变量
    scss                    //提取出的公共样式
    theme.scss              //主题配置
    style.scss              //样式定义
    thingsboard.ico         //LOGO
    
  • 模块和组件 主要的页面布局相关代码位于ui-ngx/src/app/modules/home目录下。这个目录下的代码展示了 ThingsBoard 页面是如何由各种模块和组件组装而成的。这种清晰的模块化结构使得定制化工作更为直观和可控。 截屏2023-11-24 10.07.47.png

  • 主题和样式 除了模块和组件,主题和样式也是前端开发中需要注意的关键点。ThingsBoard 的主题和样式主要由两个文件管理,分别是theme.scssstyle.scss。ThingsBoard 中UI框架使用的是Material-UI,并已经在style.scss中定义好了组件的样式。这意味着,在使用时,开发者只需要进行极小的细节调整,有时甚至无需修改,就能达到定制化的效果。 截屏2023-11-24 10.06.24.png

自定义菜单

以新增一个报表功能为例。

截屏2023-11-24 09.27.48.png

menu.service.ts中找到buildXXXHomebuildXXXMenubuildXXXHome对应的是首页的大图标菜单,buildXXXMenu对应的是侧边栏菜单。XXX分别代表Sysadmin、Tenant、Customer三个不同的页面,选择在你想要修改的页面对应的函数下,添加以下结构代码

{
    id: guid(),
    name: 'report.reports',
    type: 'link',
    path: '/reports',
    icon: 'picture_as_pdf'
}
在新增组件report-routing.module.ts中添加以下路由
const routes: Routes = [
{
    path: 'reports',
    data: {
    breadcrumb: {
        label: 'report.reports',
        icon: 'picture_as_pdf'
    }
    },
    children: [
    {
        path: '',
        component: EntitiesTableComponent,
        data: {
        auth: [Authority.TENANT_ADMIN, Authority.CUSTOMER_USER],
        title: 'report.reports',
        reportsType: 'tenant'
        },
        resolve: {
        entitiesTableConfig: ReportsTableConfigResolver
        }
    },
    ]
}
];

添加功能按钮

修改数据详情页的按钮。

截屏2023-11-24 10.27.20.png 找到device.component.html,很容易可以发现,每一个button对应详情页的一个按钮,想要修改或着添加新的按钮,只需依照原有结构进行修改即可。

<button mat-raised-button color="primary"
    [disabled]="(isLoading$ | async)"
    (click)="onEntityAction($event, 'makePublic')"
    [fxShow]="!isEdit && deviceScope === 'tenant' && !isAssignedToCustomer(entity) && !entity?.customerIsPublic">
    {{'device.make-public' | translate }}
</button>

修改每条数据后的按钮。

截屏2023-11-24 09.29.28.png 找到devices-table-config.resolver.ts,参考configureCellActions函数下代码,添加自定义按钮。

{
    name: this.translate.instant('device.make-pdf'),
    icon: 'picture_as_pdf',
    isEnabled: () => true,
    onAction: ($event, entity) => this.openReportDialog($event, 'DeviceDetail', entity)
},

或者你也可以在导航栏添加按钮或子菜单。

如下图,只需在entities-table.compoent.html文件中,依葫芦画瓢的进行些许修改即可。 截屏2023-11-24 09.30.50.png

常见问题 FAQ

前端进行二次开发有什么优势呢?

  • 定制化需求满足: 在某些情况下,ThingsBoard 默认功能可能无法满足某些特殊功能的需求,通过前端二次开发,可以集成自定义的业务流程,将 ThingsBoard 与其他系统或服务更紧密地结合,提高系统的整体效能。
  • 灵活性强:前端二次开发可以根据业务需求进行灵活的修改,可以添加新的页面、修改现有页面的布局和内容、修改现有页面的样式、添加新的功能、修改现有功能的逻辑等。
  • 开发效率高:前端二次开发可以利用现有的基础设施,可以快速地开发出满足业务需求的应用。
  • 成本低:前端二次开发不需要重新开发整个应用,可以节省开发成本。

额外的建议

以下是一些额外的建议:

通过以下建议,可以更快熟悉 ThingsBoard 前端二次开发的基本步骤。 * 在修改 ThingsBoard 前端代码之前,建议先阅读 ThingsBoard 的前端文档。 * 在修改 ThingsBoard 前端代码时,注意不要破坏 ThingsBoard 原有的结构。

关于亿琪软件

亿琪软件

上海亿琪软件有限公司,全球开放边缘计算和物联网领域的领导者,全球领先的工业物联网软件开发商和解决方案提供商,助力企业和组织实现数字化转型。公司专注于 5G 通信、AI 人工智能、边缘计算和大数据网络安全多项技术领域,致力于物联网领域前沿技术的创新,为用户提供全方位、智能化和安全的物联网解决方案。

  • 2023 年,公司发布“ YiFUSION |工业边缘智能融合网关 ”产品,为工业客户提供一整套的边缘计算+AI 能力:高性能数据采集、多类型数据融合、AI 算法集成、云端业务对接。在边缘网关的基础上,集成了 IoT 平台的边缘协同能力、本地 Web SCADA 和 HMI 功能、本地数据存储、边缘 AI 视频分析、行业应用集成等。

  • 2022 年,公司推出 “ YiCLOUD |亿琪云 ”一站式物联网应用解决方案。公司的业务涵盖了智慧城市、智慧农业、智能工厂和智慧园区等多个领域,公司软硬件产品和解决方案获得华为技术认证,得到中国移动 OCP 认证,公司还是边缘计算产业联盟 ECC 成员。

关注我们

公司公众号 中文社区公众号
yiqisoft edgexfoundry

联系我们--商业服务

  • 网站:http://yiqisoft.cn
  • 邮件:support@yiqisoft.cn
  • 电话:021-68863086
  • 手机:186-1666-9123