ThingsBoard教程(十):前端初级定制化

前言

各位读者好,截止目前,ThingsBoard系列文章已经做了七篇,分别是

本期文章我给大家带来的是如何对物联网平台ThingsBoard如何做一些的简单的定制化,也就是大部分同学是所有的tb的二开,二次开发。

目前我所在的一个tb群里有很多小白,每天都问一些二开的问题,如何修改网站图标,如何修改一些菜单显示,如何移除一下规则链中的节点。还有就是如何修改登录页。我觉得这个二开tb很有搞头,所以今天就来更新这篇文章。

先带大家来看一下本篇文章的目录

  • 搭建开发环境
  • 修改登录页
  • 修改菜单显示
  • 移除一些节点
  • 删除一些表单项
  • 修改网站图标

搭建开发环境

搭建一个前端的tb开发环境很简答,我在上上一篇的自定义UI里已经介绍过了。因为我们只是开发前端,所有将后端配置为生产环境,使用docker一键启动。

docker run -p 8080:9090 -p 1883:1883 thingsboard/tb

然后配置前端接口代理到后端的服务即可。需要注意的是, 每一个tb版本都有自己的开发要求,
比如tb:v2.4.3,它要求的就是node的版本要大于8,小于11,如果你的nodejs版本是目前最新的15.x,那就会报错。
tb的每一个版本都不一样,所以在开发的时候,可以先查询整个版本的readme文件.

修改登录页

修改登录页,将登录页修改为以下效果,

首先我们找到登录页的html模板

打开login.tpl.html文件, 在顶部加上一个类login-page

然后我们在login.scss中增加我们的自定义样式

.login-page {
  background-image: url("../../png/jstree/bg1.jpg");
  background-size: cover;

  md-card.md-tb-dark-theme {
    background-color: #30568080;
  }
}

z这里使用了一个背景图bg1.jpg,我们将其放到
src/png/jstree目录中

修改登录页的标题

将原有图片改为一个文字。看一下效果

是不是高大上很多了。

修改菜单显示

有人觉得tb有些臃肿了,想把一些菜单去掉,那么最简答的办法就是注释掉菜单

在哪里注释掉那
在一个叫做 menu.service.js

menu.service.js 中 有一个buildMenu函数,
这个函数用于判断当前用户的角色,并根据角色来返回对应的菜单权限。

需要注释那个角色下的那个菜单,直接在该函数里修改即可。
看一下菜单的配置

{
  name: 'home.home',
  type: 'link',
  state: 'home.links',
  icon: 'home'
}
  • name 菜单的名称, 对应的是国家化配置文件中的字段
  • type 菜单的类型,是链接,还是非链接
  • state 点击该菜单要跳转的链接
  • icon 表示菜单的图标 使用的 md-icon组件来显示的

这些配置参数 是在改文件中使用的

移除一些节点

移除一些节点这个需求其实也很简单,我们打开一个规则链


这个页面调用了一个接口

http://localhost:3000/api/components?componentTypes=FILTER,ENRICHMENT,TRANSFORMATION,ACTION,EXTERNAL

仔细看一下这个接口的返回值,刚好对应节点列表.
那么一个具体的思路就出现了。找到调用这个接口的地方,然后在处理接口返回值的地方,将数据进行一次筛选。定义一个需要隐藏的节点数组,使用数组的filter方法进行筛选。
全局搜索components? 只有一个地方有,那就是它了。

具体的js代码

 var notNode = ['aws sns', 'aws sqs', 'gcp pubsub', 'send email', 'gps geofencing filter', 'gps geofencing events']
 var components = response.data.filter(x => {
 return !notNode.includes(x.name)
 });

修改前



修改后

删除一些表单项

删除表单其实也很简单,主要是要找到对应的位置

比如说你要删除一些功能,操作

删除客户下的几个操作按钮

通过路径customers找到 customers.tpl.html

没有看到相关代码
打开customer.controller.js

注释customerActionsList中的配置数据即可。

拿我格子衫来 CSDN认证博客专家 拿我格子衫来 范马勇次郎 琦玉君
积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页