import {environment} from '../../../environments/environment';
|
import {HttpClient} from '@angular/common/http';
|
import {Component, OnInit} from '@angular/core';
|
import {_HttpClient} from '@delon/theme';
|
import {zip} from 'rxjs/observable/zip';
|
import * as echarts from 'echarts';
|
import * as moment from 'moment';
|
|
@Component({
|
selector: 'app-forecasting-warning',
|
templateUrl: './forecasting-warning.component.html',
|
})
|
export class ForecastingWarningComponent implements OnInit {
|
|
constructor(
|
private _http: _HttpClient,
|
public http: HttpClient
|
) {
|
|
}
|
[x: string]: any;
|
|
public option = {
|
title: {
|
text: '',
|
left: 'center'
|
},
|
xAxis: {
|
type: 'category',
|
data: []
|
},
|
yAxis: {
|
type: 'value',
|
name: '单位：'
|
},
|
series: [{
|
data: [],
|
type: 'line',
|
smooth: true
|
}]
|
};
|
PM2_5 = []; PM10 = []; CO = []; NO2 = []; O3 = []; SO2 = [];
|
title = '空气质量因子';
|
|
ngOnInit() {
|
this.initWarning();
|
}
|
|
changeType(event) {
|
if (event === 'warning') {
|
this.initWarning();
|
} else {
|
this.initForecasting();
|
}
|
}
|
|
initForecasting() {
|
// this.http.get('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=forecast15days').subscribe((res: any) => {
|
// console.info(res);
|
// });
|
zip(
|
this.http.get('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=forecast15days'),
|
this.http.get('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=forecast24hours')
|
).subscribe(
|
([daysRes, hoursRes]) => {
|
console.info(daysRes);
|
console.info(hoursRes);
|
});
|
}
|
|
initWarning() {
|
this.PM2_5 = []; this.PM10 = []; this.CO = []; this.NO2 = []; this.O3 = []; this.SO2 = [];
|
this.option.xAxis.data = [];
|
this.http.get(environment.SERVER_BASH_URL + 'demo/list').subscribe((res: any) => {
|
res.forEach(data => {
|
const json = JSON.parse(data.aqi_json);
|
this.PM2_5.push(json.PM2_5);
|
this.PM10.push(json.PM10);
|
this.CO.push(json.CO);
|
this.NO2.push(json.NO2);
|
this.O3.push(json.O3);
|
this.SO2.push(json.SO2);
|
this.option.xAxis.data.push(moment(data.time).format('DD日HH时'));
|
});
|
const warning_PM25Chart = echarts.init(document.getElementById('warning_PM25'));
|
this.option.series[0].data = this.PM2_5;
|
this.option.yAxis.name = '单位：ug/m³';
|
this.option.title.text = this.title + '(PM2.5)';
|
warning_PM25Chart.setOption(this.option, false);
|
window.onresize = warning_PM25Chart.resize;
|
|
const warning_PM10Chart = echarts.init(document.getElementById('warning_PM10'));
|
this.option.series[0].data = this.PM10;
|
this.option.yAxis.name = '单位：ug/m³';
|
this.option.title.text = this.title + '(PM10)';
|
warning_PM10Chart.setOption(this.option, false);
|
window.onresize = warning_PM10Chart.resize;
|
|
const warning_COChart = echarts.init(document.getElementById('warning_CO'));
|
this.option.series[0].data = this.CO;
|
this.option.yAxis.name = '单位：mg/m³';
|
this.option.title.text = this.title + '(CO)';
|
warning_COChart.setOption(this.option, false);
|
window.onresize = warning_COChart.resize;
|
|
const warning_NO2Chart = echarts.init(document.getElementById('warning_NO2'));
|
this.option.series[0].data = this.NO2;
|
this.option.yAxis.name = '单位：ug/m³';
|
this.option.title.text = this.title + '(NO2)';
|
warning_NO2Chart.setOption(this.option, false);
|
window.onresize = warning_NO2Chart.resize;
|
|
const warning_O3Chart = echarts.init(document.getElementById('warning_O3'));
|
this.option.series[0].data = this.O3;
|
this.option.yAxis.name = '单位：ug/m³';
|
this.option.title.text = this.title + '(O3)';
|
warning_O3Chart.setOption(this.option, false);
|
window.onresize = warning_O3Chart.resize;
|
|
const warning_SO2Chart = echarts.init(document.getElementById('warning_SO2'));
|
this.option.series[0].data = this.SO2;
|
this.option.yAxis.name = '单位：ug/m³';
|
this.option.title.text = this.title + '(SO2)';
|
warning_SO2Chart.setOption(this.option, false);
|
window.onresize = warning_SO2Chart.resize;
|
});
|
}
|
}
|
