[web-app] update dashboard ui and pic

README.md

@@ -82,8 +82,8 @@ Detailed config refer to [Install HertzBeat via Package](https://hertzbeat.com/d
 
 ##### 3：Start via source code        
 
-1. Local source code debugging needs to start the back-end project manager and the front-end project web-app.  
-2. Backend：need `maven3+`, `java11`, `lombok`, start the manager service.  
+1. Local source code debugging needs to start the back-end project `manager` and the front-end project `web-app`.  
+2. Backend：need `maven3+`, `java11`, `lombok`, start the `manager` service.  
 3. Web：need `nodejs npm angular-cli` environment, Run `ng serve --open` in `web-app` directory after backend startup.  
 4. Access `localhost:4200` to start, default account: `admin/hertzbeat`  
 

README_CN.md

@@ -81,9 +81,9 @@
 更多配置详细步骤参考 [通过安装包安装HertzBeat](https://hertzbeat.com/docs/start/package-deploy)
 
 ##### 方式三：本地代码启动
-1. 此为前后端分离项目，本地代码调试需要分别启动后端工程manager和前端工程web-app
-2. 后端：需要`maven3+`, `java11`和`lombok`环境，修改YML配置信息并启动manager服务
-3. 前端：需要`nodejs npm angular-cli`环境，待本地后端启动后，在web-app目录下启动 `ng serve --open`
+1. 此为前后端分离项目，本地代码调试需要分别启动后端工程`manager`和前端工程`web-app`
+2. 后端：需要`maven3+`, `java11`和`lombok`环境，修改`YML`配置信息并启动`manager`服务
+3. 前端：需要`nodejs npm angular-cli`环境，待本地后端启动后，在`web-app`目录下启动 `ng serve --open`
 4. 浏览器访问 `localhost:4200` 即可开始，默认账号密码 `admin/hertzbeat`
 
 详细步骤参考 [参与贡献之本地代码启动](CONTRIBUTING.md)

web-app/src/app/routes/dashboard/dashboard.component.html

@@ -127,7 +127,7 @@
 
 <div nz-row nzGutter="16" style="margin-top: 25px">
   <div nz-col nzXs="24" nzSm="24" nzMd="12" class="mb-md">
-    <nz-card nzHoverable [nzTitle]="'dashboard.alerts.title' | i18n" [nzExtra]="extraTemplate">
+    <nz-card nzHoverable [nzTitle]="alertCardTitleTemplate" [nzExtra]="extraTemplate">
       <nz-timeline nzMode="left">
         <nz-timeline-item
           *ngFor="let alert of alerts; let i = index"
@@ -180,5 +180,9 @@
 </div>
 
 <ng-template #extraTemplate>
-  <a [routerLink]="['/alert/center']">{{ 'dashboard.alerts.enter' | i18n }}</a>
+  <a [routerLink]="['/alert/center']" style="font-weight: bold">{{ 'dashboard.alerts.enter' | i18n }}</a>
+</ng-template>
+
+<ng-template #alertCardTitleTemplate>
+  <span style="font-size: 14px; font-weight: bold">{{ 'dashboard.alerts.title' | i18n }}</span>
 </ng-template>

web-app/src/app/routes/dashboard/dashboard.component.ts

@@ -49,9 +49,27 @@ export class DashboardComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.appsCountTheme = {
       title: {
-        text: this.i18nSvc.fanyi('dashboard.monitors.title'),
-        subtext: this.i18nSvc.fanyi('dashboard.monitors.sub-title'),
-        left: 'center'
+        text: `{a|${this.i18nSvc.fanyi('dashboard.monitors.title')}}`,
+        subtext: `{b|${this.i18nSvc.fanyi('dashboard.monitors.sub-title')}}`,
+        left: 'center',
+        textStyle: {
+          rich: {
+            a: {
+              fontWeight: 'bolder',
+              align: 'center',
+              fontSize: 26
+            }
+          }
+        },
+        subtextStyle: {
+          rich: {
+            b: {
+              fontWeight: 'normal',
+              align: 'center',
+              fontSize: 14
+            }
+          }
+        }
       },
       tooltip: {
         trigger: 'item',
@@ -74,10 +92,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
           radius: [0, '30%'],
           label: {
             position: 'center',
-            fontSize: 15,
+            fontSize: 26,
+            fontWeight: 'bolder',
             color: '#ffffff',
             fontStyle: 'oblique',
-            formatter: '{a}:{c}'
+            formatter: '{c}'
           },
           labelLine: {
             show: false
@@ -92,7 +111,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
             length: 30
           },
           label: {
-            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
+            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}}   {per|{d}%}  ',
             backgroundColor: '#F6F8FC',
             borderColor: '#8C8D8E',
             borderWidth: 1,
@@ -128,8 +147,17 @@ export class DashboardComponent implements OnInit, OnDestroy {
     };
     this.alertsTheme = {
       title: {
-        subtext: this.i18nSvc.fanyi('dashboard.alerts.distribute'),
-        left: 'center'
+        subtext: `{b|${this.i18nSvc.fanyi('dashboard.alerts.distribute')}}`,
+        left: 'center',
+        subtextStyle: {
+          rich: {
+            b: {
+              fontWeight: 'bold',
+              align: 'center',
+              fontSize: 14
+            }
+          }
+        }
       },
       tooltip: {
         trigger: 'axis',
@@ -177,8 +205,17 @@ export class DashboardComponent implements OnInit, OnDestroy {
     };
     this.alertsDealTheme = {
       title: {
-        subtext: this.i18nSvc.fanyi('dashboard.alerts.deal'),
-        left: 'center'
+        subtext: `{b|${this.i18nSvc.fanyi('dashboard.alerts.deal')}}`,
+        left: 'center',
+        subtextStyle: {
+          rich: {
+            b: {
+              fontWeight: 'bold',
+              align: 'center',
+              fontSize: 14
+            }
+          }
+        }
       },
       tooltip: {
         formatter: '{b} : {c}%'