ThingsBoard UI界面修改

1、修改浏览器title,修改文件thingsboard/ui-ngx/src/index.html

<title>IOT</title>

2、修改appTitle,修改thingsboard/ui-ngx/src/environments/environment.ts 和 thingsboard/ui-ngx/src/environments/environment.prod.ts

appTitle: 'IOT', //标题
defaultLang: 'zh_CN' //默认语言

3、修改浏览器小图标

替换thingsboard/ui-ngx/src/thingsboard.ico

4、修改程序主色调

修改文件thingsboard/ui-ngx/src/theme.scss

$tb-primary-color: #18315f;
$tb-secondary-color: #527dad;
$tb-hue3-color: #a7c1de;

5、修改部件库右下角Powered by

修改文件thingsboard/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

<!--<span>Powered by <a href="https://thingsboard.io" target="_blank">Thingsboard v.{{ thingsboardVersion }}</a></span>-->

6、修改登录页面LOGO及跳转地址

修改文件thingsboard/ui-ngx/src/app/shared/components/logo.component.ts

//logo = 'assets/logo_title_white.svg';//原LOGO
logo = 'assets/logo_title_white.png';//自定义LOGO
gotoThingsboard(): void {
    window.open('http://geekapp.cn', '_blank');
}

7、修改其他页面LOGO

修改文件thingsboard/ui-ngx/src/app/modules/home/home.component.ts

//logo = 'assets/logo_title_white.svg';
logo = 'assets/logo_title_white.png';

修改文件thingsboard/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

//private defaultDashboardLogo = 'assets/logo_title_white.svg';
  private defaultDashboardLogo = 'assets/logo_title_white.png';

8、屏蔽帮助按钮

修改文件thingsboard/ui-ngx/src/app/shared/components/help.component.html屏蔽按钮或修改文件help.component.ts并自定义帮助按钮链接地址

if (helpUrl) {
      //window.open(helpUrl, '_blank');
    }

重新构建

//源码编译构建
mvn clean install -DskipTests
//安装
sudo rpm -Uvh thingsboard.rpm
//强制升级安装
sudo rpm -ivh --replacefiles --force --nodeps thingsboard.rpm
//启动
sudo service thingsboard start
//重启
sudo service thingsboard restart

原创博客,转载请标明出处:https://www.geekapp.cn/archives/713.html
上一篇
下一篇