Dashboard finish

Change-Id: Ib9a4b70260beb971b27e82288ef2546c43535569
Issue-ID: USECASEUI-164
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

2 files changed, 129 insertions, 88 deletions

diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
index b2fa5eb4..c93d3f76 100644
--- a/usecaseui-portal/src/app/home/home.component.html
+++ b/usecaseui-portal/src/app/home/home.component.html
@@ -29,14 +29,14 @@
       <div class="poerformance">
         <h4>{{"PERFORMANCE" | translate}}</h4>
         <div class="pfVnf">
-          <h3 class="pfVnfNum">126</h3>
+          <h3 class="pfVnfNum">{{performanceVnfNum}}</h3>
           <p>Performance VNF</p>
-          <img src="../../assets/images/VNF.png" alt="VNF">
+          <img src="./assets/images/VNF.png" alt="VNF">
         </div>
         <div class="pfVmPm">
-          <h3 class="pfVmPmNum">286</h3>
+          <h3 class="pfVmPmNum">{{performanceVmNum}}</h3>
           <p>Performance VM/PM</p>
-          <img src="../../assets/images/VM.png" alt="VM/PM">
+          <img src="./assets/images/VM.png" alt="VM/PM">
         </div>
       </div>
       <div class="alarm">
@@ -46,16 +46,16 @@
     </div>
 
     <div class="rb-content">
-      <h4>{{"VM Performance" | translate}}</h4>
+      <h4>{{"Alarm" | translate}}</h4>
       <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
-        <button nz-button nz-dropdown><span>{{vmPerformanceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+        <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
         <ul nz-menu>
-          <li nz-menu-item (click)="vmPerformanceNameSelect(item)" *ngFor="let item of vmPerformanceNames">
+          <li nz-menu-item (click)="sourceNameSelect(item)" *ngFor="let item of sourceNameList">
             <a>{{item}}</a>
           </li>
         </ul>
       </nz-dropdown>
-      <app-line [initData]="performanceChartInit" [chartData]="performanceChartData"></app-line>
+      <app-line [initData]="alarmLineChartInit" [chartData]="alarmLineChartData"></app-line>
     </div>
   </div>
 
diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts
index 39fab25d..5d91e357 100644
--- a/usecaseui-portal/src/app/home/home.component.ts
+++ b/usecaseui-portal/src/app/home/home.component.ts
@@ -14,38 +14,15 @@ export class HomeComponent implements OnInit {
   constructor(private myhttp: MyhttpService) { }
 
   ngOnInit() {
-    this.getHomeAllData();
+    this.getSourceNames();
+    this.getHomeServiceData();
+    this.getHomePerformanceData();
+    this.getHomeAlarmData();
+    this.getHomeAlarmChartData();
   }
   
-  // alarm饼图
-  alarmChartData:Object;
-  alarmChartInit:Object = {
-    height: 164,
-    option:{
-      legend: {
-        orient: 'vertical',
-        left: '0px',
-        bottom: '0px',
-        data: ['Active','Closed']
-      },
-      color:["#fb6e6e","#526b75"],
-      series:[{
-        name:"告警信息",
-        radius : '55%',
-        label:{
-          normal:{
-            show: false,
-          },
-          emphasis: {
-            show: true,
-            formatter:'{b}\n{c},{d}%',
-          }
-        }
-      }]
-    }
-  };
 
-  // services饼图
+  // services
   serviceNumber:number = 0;
   serviceChartData:Object;
   serviceChartInit:Object = {
@@ -84,40 +61,141 @@ export class HomeComponent implements OnInit {
       }]
     }
   };
+  // gethomeServiceData
+  getHomeServiceData(){
+    this.myhttp.getHomeServiceData()
+    .subscribe(
+      (data)=>{
+        // console.log(data);
+        this.serviceNumber = data.serviceTotalNum;
+        this.serviceChartData = {
+          series:[{data:data.customerServiceList}]
+        };
+        // console.log(this.serviceChartData);
+      },
+      (err)=>{
+        console.log(err);
+      }
+    )
+  }
+
+  // performance
+  performanceVnfNum = 0;
+  performanceVmNum = 0;
+  getHomePerformanceData(){
+    this.myhttp.getHomePerformanceData()
+      .subscribe((data)=>{
+        this.performanceVnfNum = data.length;
+      })
+  }
+
+  // alarm饼图
+  alarmChartData:Object;
+  alarmChartInit:Object = {
+    height: 164,
+    option:{
+      legend: {
+        orient: 'vertical',
+        left: '0px',
+        bottom: '0px',
+        data: ['Active','Closed']
+      },
+      color:["#fb6e6e","#526b75"],
+      series:[{
+        name:"告警信息",
+        radius : '55%',
+        label:{
+          normal:{
+            show: false,
+          },
+          emphasis: {
+            show: true,
+            formatter:'{b}\n{c},{d}%',
+          }
+        }
+      }]
+    }
+  };
+  getHomeAlarmData(){
+    this.myhttp.getHomeAlarmData()
+      .subscribe((data)=>{
+        this.alarmChartData ={
+          series:[{
+            data:[{name:"Active",value:data[0]},{name:"Closed",value:data[1]}]
+          }]
+        };
+      })
+  }
 
-  // Performance线图
-  performanceChartData:Object;
-  performanceChartInit:Object = {
+  // alarm线图
+  alarmLineChartData:Object;
+  alarmLineChartInit:Object = {
     height:320,
     option:{
       legend: {
         bottom: '0px',
-        data: ['CPU','Memory']
+        data: ['All','Active','Closed']
+      },
+      xAxis:{
+        data:["2018-09-10 ","2018-09-11","2018-09-12","2018-09-13","2018-09-14",
+        "2018-09-15","2018-09-16","2018-09-17","2018-09-18","2018-09-19",
+        "2018-09-20","2018-09-21","2018-09-22"]
       },
       series : [
         {
-            name: 'CPU',
+            name: 'All',
             type: 'line',
-            data:[20,23,14,12,34,25,22,42,52,35,34,13,13]
+            data:[30,45,34,35,43,56,36,53,42,45,44,35,32]
         },
         {
-            name: 'Memory',
+            name: 'Active',
             type: 'line',
             data:[10,23,24,22,14,15,32,12,12,32,14,23,23]
+        },
+        {
+          name: 'Closed',
+          type: 'line',
+          data:[20,23,14,12,34,25,22,42,52,35,34,13,13]
         }
       ]
     }
   };
-  getPerformanceChartData(){
-    let paramsObj = {
-      vmPerformanceName:this.vmPerformanceNameSelected
+  // sourceName筛选框
+  sourceNameList = ['performanceNameOne'];
+  sourceNameSelected = null;
+  getSourceNames(){
+    this.myhttp.getSourceNames()
+      .subscribe((data)=>{
+        this.sourceNameList = data;
+      })
+  }
+  sourceNameSelect(item){
+    if(this.sourceNameSelected != item){
+      // console.log(item);
+      this.sourceNameSelected = item;
+      this.getHomeAlarmChartData()
+    } 
+  }
+  getHomeAlarmChartData(){
+    let nowTime = this.myhttp.dateformater( Date.now());
+    let startTime = this.myhttp.dateformater( Date.now()-30*24*60*60*1000 );
+    let obj = {
+      sourceName:this.sourceNameSelected,
+      startTime: startTime,
+      endTime:nowTime,
+      format:"day"
     }
-    this.myhttp.getHomePerformanceChartData(paramsObj)
+    console.log(obj);
+    this.myhttp.getHomeAlarmChartData(obj)
       .subscribe((data)=>{
-        this.performanceChartData = {
+        this.alarmLineChartData = {
+          xAxis:{
+            data:data.dataList
+          },
           series:[
-            {data:data.CPU},
-            {data:data.Memory}
+            {data:data.allList},
+            {data:data.ActiveList},
+            {data:data.closedList}
           ]
         }
       },(err)=>{
@@ -125,42 +203,5 @@ export class HomeComponent implements OnInit {
       })
   }
 
-  // vm筛选框
-  vmPerformanceNames = ['performanceNameOne'];
-  vmPerformanceNameSelected = this.vmPerformanceNames[0];
-  vmPerformanceNameSelect(item){
-    if(this.vmPerformanceNameSelected != item){
-      console.log(item);
-      this.vmPerformanceNameSelected = item;
-      this.getPerformanceChartData()
-    } 
-  }
-
-  // 获取数据
-  getHomeAllData(){
-    this.myhttp.getAllHomeData()
-    .subscribe(
-      (data)=>{
-        console.log(data);
-        this.alarmChartData ={
-          series:[{
-            data:data.alarm.chartdata
-          }]
-        };
-        this.serviceNumber = data.services.number;
-        this.serviceChartData ={
-          series:[{
-            data:data.services.chartdata
-          }]
-        };
-        this.vmPerformanceNames = data.Vm_performance.names;
-        this.vmPerformanceNameSelected = this.vmPerformanceNames[0];
-        this.getPerformanceChartData();
-      },
-      (err)=>{
-        console.log(err);
-      }
-    )
-  }
 
 }