diff options
Diffstat (limited to 'usecaseui-portal/src/app/home')
| -rw-r--r-- | usecaseui-portal/src/app/home/home.component.html | 16 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/home/home.component.ts | 201 |
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); - } - ) - } } |