import { Component, OnInit } from "@angular/core";
|
import { _HttpClient } from "@delon/theme";
|
import { zip } from 'rxjs/observable/zip';
|
|
@Component({
|
selector: "app-home-page",
|
templateUrl: "./home-page.component.html",
|
styleUrls: ["./home-page.component.less"]
|
})
|
export class HomePageComponent implements OnInit {
|
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<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]) => {
|
if( conRes.code == 0 && aqiRes.code == 0 ) {
|
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);
|
}
|
}
|
