当前位置: 首页 > 工具软件 > ngx-ui > 使用案例 >

ThingsBoard平台web-ui界面修改

濮阳翔
2023-12-01

一:导入部件库与修改logo

  1. 详细教程:https://www.iotschool.com/topics/712
  2. 导入部件库:
  3. 找到tingsboard源码application\src\main\data\json\system\widget_bundles
  4. 启动tingsboard程序项目
  5. 找到部件库菜单栏,点击文件json导入
  6. 修改logo图片:
  7. 制定自身需求logo,格式为.svg
  8. 导入进tingsboard源码ui-ngx\src\assets目录下
  9. 找到源码ui-ngx\src\app\shared\components\logo.component.ts文件
  10. 修改logo = require(替换成最新logo图片地址).default;
  11. 找到源码ui-ngx\src\app\modules\home\home.component.ts文件
  12. 修改logo = require(替换成最新logo图片地址).default;

二:修改浏览器titile和默认语言

  1. 找到源码ui-ngx\src\environments\environment.ts和environment.prod.ts文件
  2. 修改appTitle = “主题名称”
  3. 修改defaultLang = “默认语言”
  4. 找到源码ui-ngx\src\index.html文件
  5. 修改title主题名称

三:修改浏览器小图标

  1. 找到源码ui-ngx\src\thingsboard.ico文件图标
  2. 替换thingsboard.ico图标为自定义图标

四:修改程序主题颜色

  1. 找到源码ui-ngx\src\theme.scss文件
  2. 修改$tb-primary-color: 主题颜色
  3. 修改$tb-secondary-color: 主题颜色
  4. 修改$tb-hue3-color: 主题颜色

五:更改部件库右下角水印

  1. 找到源码:
    ui-ngx\src\app\modules\home\pages\dashboard\dashboard-page.component.html文件
  2. 搜索Powered by
  3. 注释本行

六:注释页面“帮助问号?”

  1. 找到文件:ui-ngx\src\app\shared\components\help.component.html
  2. 注释button源码
 类似资料: