From feda1a3904098d7b11ce0dea324e7b8db6228828 Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Tue, 17 Jul 2018 13:18:56 +0800 Subject: [PATCH] 新增 企业管理 3页面 --- src/app/routes/home-page/home-page/home-page.component.ts | 169 +++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 159 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..0535670 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,178 @@ 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('/aqi/forecast24hours',{base: this.cardData.pm25,range: 10}).subscribe( + (res: any) => { + this.aqiEchartsIntance.setOption( + { + series: [{type: 'line', data: res}] + } + ) + } + ); + this.http.get('/aqi/forecast24hours',{base: this.cardData.temperature,range: 5}).subscribe( + (res: any) => { + this.meteEchartsIntance.setOption( + { + series: [{type: 'line', data: res}] + } + ) + } + ); } } - ) + ); + this.http.get('/chart').subscribe((res: any) => { + res.offlineData.forEach((item: any) => { + item.chart = Object.assign([], res.offlineChartData); + }); + this.data = res; + this.salesData = res.salesData; + this.loading = false; + this.changeSaleType(); + }); + } + + 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); + } + //---------mock------------------- + data: any = { + salesData: [], + offlineData: [] + }; + sort(sortName, sortValue) { + this.data.searchData = [ + ...(<any[]>this.data.searchData).sort((a, b) => { + if (a[ sortName ] > b[ sortName ]) { + return (sortValue === 'ascend') ? 1 : -1; + } else if (a[ sortName ] < b[ sortName ]) { + return (sortValue === 'ascend') ? -1 : 1; + } else { + return 0; + } + }) + ]; + } + loading = true; + salesType = 'all'; + salesPieData: any; + salesTotal = 0; + changeSaleType() { + this.salesPieData = this.salesType === 'all' ? this.data.salesTypeData : ( + this.salesType === 'online' ? this.data.salesTypeDataOnline : ( + this.salesType === 'online2' ? this.data.salesTypeDataOnline2 : this.data.salesTypeDataOffline + ) + ); + if (this.salesPieData) this.salesTotal = this.salesPieData.reduce((pre, now) => now.y + pre, 0); + } } -- Gitblit v1.8.0