样式调整

src/main/webapp/app/home/home.component.ts

@@ -199,8 +199,8 @@ export class HomeComponent implements OnInit, AfterViewInit {
         this.leftOneChart =
             {
                 title: {
-                    text: '' + this.leftOneTotal + ' 台\n设备',
-                    x: '36%',
+                    text: ' ' + this.leftOneTotal + ' 台\n设备',
+                    x: '40%',
                     y: '40%',
                     itemGap: 50,
                     textStyle: {
@@ -286,8 +286,8 @@ export class HomeComponent implements OnInit, AfterViewInit {
         this.leftTwoChart =
             {
                 title: {
-                    text: this.leftTwoTotal + '个\n监测点',
-                    x: '36%',
+                    text: "  " + this.leftTwoTotal + '个\n监测点',
+                    x: '40%',
                     y: '40%',
                     itemGap: 50,
                     textStyle: {

src/main/webapp/app/layouts/navbar/navbar.component.html

@@ -17,7 +17,7 @@
                 </ng-container>
             </nz-select>
             <nz-dropdown [nzTrigger]="'click'">
-                <a nz-dropdown>{{user.loginName}}<i class="anticon anticon-down"></i>
+                <a nz-dropdown style="color: #bfbfbf">{{user.loginName}}<i class="anticon anticon-down"></i>
                 </a>
                 <ul nz-menu>
                     <li (click)="showPasswordModal()" nz-menu-item>修改密码</li>

src/main/webapp/app/overAll/modal/server/server.component.html

@@ -23,7 +23,7 @@
             <div class="padding-10" style="height: 40%;position: relative">
                 <p class="host-item-title">分区</p>
                 <div class="time-group" style="top: 18px;">
-                    <nz-select style="width: 150px;" nzPlaceHolder="选择指标"
+                    <nz-select style="width: 150px;" nzPlaceHolder="选择磁盘"
                                                                (ngModelChange)="setDiskChart($event)" [(ngModel)]="diskType">
                     <ng-container *ngFor="let disk of hostObj.disk;let i = index;">
                         <nz-option [nzLabel]="disk.name" [nzValue]="i"></nz-option>
@@ -31,6 +31,11 @@
                 </nz-select>
                 </div>
                 <div class="host-item-content" style="height: 300px;">
+                    <ng-container *ngIf="noData">
+                        <div class="img-noData" style="min-height: 400px">
+                            <div class="noData" title="暂无数据"></div>
+                        </div>
+                    </ng-container>
                     <ng-container *ngIf="hostObj.disk.length > 0">
                         <nz-spin [nzSpinning]="isDiskLoading">
                             <div echarts [options]="chartDiskOption" style="height: 150px;width: 100%"></div>

src/main/webapp/app/overAll/modal/server/server.component.ts

@@ -16,6 +16,7 @@ export class ServerComponent implements OnInit {
     hostId;  //主机ID
     equipmentType;  //主机类型
     server;
+    noData = false;
 
     targetFlow = HostFlow;   //主机指标
     timeList = [
@@ -136,6 +137,9 @@ export class ServerComponent implements OnInit {
                 if (this.hostObj.disk.length > 0) {
                     this.diskType = 0;
                     this.setDiskChart(0);
+                    this.noData = false;
+                }else {
+                    this.noData = true;
                 }
             }
         );

src/main/webapp/app/overAll/modal/switch/switch.component.html

@@ -5,13 +5,13 @@
             <div class="host-item-content" style="height:100px">
                 <nz-row>
                     <nz-col nzSpan="12">
-                        <p style="text-align: center">cpu利用率</p>
+                        <p class="text-center margin-bottom-15">cpu利用率</p>
                         <div class="width-host">
                             <div class="space" [style.width]="this.hostObj.cpu + '%'"></div>
                         </div>
                     </nz-col>
                     <nz-col nzSpan="12">
-                        <p style="text-align: center;color: #b7d1f1;">内存使用率</p>
+                        <p class="text-center margin-bottom-15" style="color: #b7d1f1;">内存使用率</p>
                         <div class="width-host">
                             <div class="space" [style.width]="this.hostObj.used + '%'"></div>
                         </div>
@@ -89,7 +89,7 @@
             </div>
             <div class="host-item-content" style="height: 300px">
                 <nz-spin [nzSpinning]="isTrendLoading">
-                    <div echarts [options]="chartTrendOption" style="height: 360px;width: 100%"></div>
+                    <div echarts [options]="chartTrendOption" style="height: 300px;width: 100%"></div>
                 </nz-spin>
             </div>
         </div>
@@ -116,9 +116,16 @@
                 </nz-select>
             </div>
             <div class="host-item-content" style="height: 300px">
+                <ng-container *ngIf="noData">
+                    <div class="img-noData" style="min-height: 300px">
+                        <div class="noData" title="暂无数据"></div>
+                    </div>
+                </ng-container>
+                <ng-container *ngIf="noData">
                     <nz-spin [nzSpinning]="isNetworkLoading">
-                    <div echarts [options]="chartNetworkOption" style="height: 360px;width: 100%"></div>
+                        <div echarts [options]="chartNetworkOption" style="height: 300px;width: 100%"></div>
                     </nz-spin>
+                </ng-container>
             </div>
         </div>
     </nz-col>

src/main/webapp/app/overAll/modal/switch/switch.component.ts

@@ -37,11 +37,12 @@ export class SwitchComponent implements OnInit {
     chartTrendOption;
 
     netWorkdObj = {   //网卡图表参数
-        itemName: '',
+        itemName: null,
         unit: 'Mbps',
         startTime: '',
         endTime: '',
     };
+    noData = false;
 
     trendObj = {
         type: 'total_flow',
@@ -76,6 +77,9 @@ export class SwitchComponent implements OnInit {
                 if(this.interfaceList && this.interfaceList.length > 0){
                     this.netWorkdObj.itemName = this.interfaceList[0];
                     this.changeTimeFlow('0');
+                    this.noData = false;
+                }else{
+                    this.noData = true;
                 }
             }
         );

src/main/webapp/content/scss/darkBlue.scss

@@ -125,7 +125,8 @@ $fontColor: #b7d1f1;
     height: 400px;
 
     nz-col {
-      padding: 5px 10px;
+      padding:8px 10px;
+      word-break: break-all;
     }
 
     .table-title {
@@ -176,12 +177,14 @@ $fontColor: #b7d1f1;
     margin: 0 auto;
     background-color: #5489b2;
     height: 23px;
-    .space{
+
+    .space {
       height: 23px;
       background-color: #4ccf46;
       transition: all 500ms;
     }
   }
+
   .topology-context {
     background: rgba(0, 0, 0, 0.2);
   }

src/main/webapp/content/scss/style.scss

@@ -117,7 +117,8 @@ nz-header {
   height: 400px;
 
   nz-col {
-    padding: 5px 10px;
+    padding:8px 10px;
+    word-break: break-all;
   }
 
   .table-title {

src/main/webapp/content/scss/white.scss

@@ -51,7 +51,8 @@
     border: 1px solid #eee;
     border-radius: 5px;
     nz-col {
-      padding: 5px 10px;
+      padding:8px 10px;
+      word-break: break-all;
     }
 
     .table-title {