From aefa2dc89b44f21453e9e3bf19c90d41b1c83e8e Mon Sep 17 00:00:00 2001 From: 沈斌 <bluelazysb@hotmail.com> Date: Fri, 13 Jul 2018 15:22:13 +0800 Subject: [PATCH] updates --- src/app/routes/home-page/home-page/home-page.component.ts | 134 +++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 124 insertions(+), 10 deletions(-) diff --git a/src/app/routes/home-page/home-page/home-page.component.ts b/src/app/routes/home-page/home-page/home-page.component.ts index 08b5c83..e6338ef 100644 --- a/src/app/routes/home-page/home-page/home-page.component.ts +++ b/src/app/routes/home-page/home-page/home-page.component.ts @@ -8,29 +8,143 @@ styleUrls: ["./home-page.component.less"] }) export class HomePageComponent implements OnInit { - public cardData: {'api'?:number,'temperature'?:number,'windDirection'?: string,'pm25'?: number} - = {}; + public cardData: {'api'?:number,'temperature'?:number,'windDirection'?: string,'pm25'?: number} = {}; + constructor( private http:_HttpClient, ) { + this.reloadAqiChart(); + this.reloadMeteChart() } - + salesData: any[] = [ ]; ngOnInit() { zip( - this.http.get('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=condition'), - this.http.get('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=aqi') + this.http.get<any>('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=condition'), + this.http.get<any>('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=aqi') ).subscribe( ([conRes,aqiRes]) => { - console.log(conRes); - console.log(aqiRes); if( conRes.code == 0 && aqiRes.code == 0 ) { - this.cardData.windDirection =conRes.data.condition.windDir; - this.cardData.temperature =conRes.data.condition.temp; + this.cardData.windDirection = conRes.data.condition.windDir; + this.cardData.temperature = conRes.data.condition.temp; this.cardData.api = aqiRes.data.aqi.value; this.cardData.pm25 = aqiRes.data.aqi.pm25; } } - ) + ); + this.http.get('/chart').subscribe((res: any) => { + // this.webSite = res.visitData.slice(0, 10); + this.salesData = res.salesData; + // this.offlineChartData = res.offlineChartData; + }); + this.http.get('/aqi/forecast24hours',{base: 25,range: 10}).subscribe( + (res: any) => { + this.aqiEchartsIntance.setOption( + { + series: [{type: 'line', data: res}] + } + ) + } + ); + this.http.get('/aqi/forecast24hours',{base: 30,range: 8}).subscribe( + (res: any) => { + this.meteEchartsIntance.setOption( + { + series: [{type: 'line', data: res}] + } + ) + } + ); + } + + public aqiChartOption = {}; + public aqiEchartsIntance; + public aqiChartLoading = false; + public onApiChartInit(e): void { + this.aqiEchartsIntance = e; + } + public meteChartOption = {}; + public meteEchartsIntance; + public meteChartLoading = false; + public onMeteChartInit(e): void { + this.meteEchartsIntance = e; + } + private reloadAqiChart(): void { + // const timeList = this.grid.columns.map(item => item.text); + if (!!this.aqiEchartsIntance) { + this.aqiChartOption = null; + this.aqiEchartsIntance.clear(); + } + // let series = null; + // if ( this.chartSelectedIndex < this.grid.data.length ) { + // series = [{type: 'line', data: this.grid.data[this.chartSelectedIndex]}]; + // } + + // this.initOpton(chartOption ,{ xAxis : [{data : []}]}); + // this.aqiChartOption = true; + this.initOpton(this.aqiChartOption ,{ xAxis : [{data : this.newArray(0, 24, null, '���')}]}); + } + private reloadMeteChart(): void { + if (!!this.aqiEchartsIntance) { + this.aqiChartOption = null; + this.aqiEchartsIntance.clear(); + } + this.initOpton(this.meteChartOption ,{ xAxis : [{data : this.newArray(0, 24, null, '���')}]}); + } + private newArray = (startOrLen: number, len?: number, prefix?: string, suffix?: string) => { + const result = []; + const s = !!len ? startOrLen : 0; + len = !!len ? len : startOrLen; + suffix = !!suffix ? suffix : ''; + prefix = !!prefix ? prefix : ''; + for (let i = s; result.length < len; i++) { + result.push(prefix + i + suffix); + } + return result; +} + private initOpton(chartOption,opt: {[key: string]: object}) { + const defaultOption = { + title: { + left: 'center' + }, + tooltip : { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + legend: { + data: [] + }, + toolbox: { + feature: { + saveAsImage: {} + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis : [ + { + type : 'category', + boundaryGap : false + } + ], + yAxis : [ + { + type : 'value' + } + ], + series : [ + ] + }; + Object.assign( defaultOption, opt); + Object.assign(chartOption, defaultOption); } } -- Gitblit v1.8.0