From 3aa2334e116c1e7921ed46958ff5fed1c70fad7e Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Tue, 6 Nov 2018 11:56:50 +0800 Subject: Dashboard finish Change-Id: Ib9a4b70260beb971b27e82288ef2546c43535569 Issue-ID: USECASEUI-164 Signed-off-by: guochuyicmri --- usecaseui-portal/src/app/home/home.component.ts | 201 ++++++++++++++---------- 1 file changed, 121 insertions(+), 80 deletions(-) (limited to 'usecaseui-portal/src/app/home/home.component.ts') 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); - } - ) - } } -- cgit 1.2.3-korg