import {environment} from '@env/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 isShow = true;
|
colors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
|
|
public option = {
|
title: {
|
text: '',
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'item',
|
axisPointer: {
|
type: 'cross'
|
}
|
},
|
xAxis: {
|
type: 'category',
|
data: []
|
},
|
yAxis: {
|
type: 'value',
|
name: ''
|
},
|
series: [
|
{
|
data: [],
|
type: 'line',
|
smooth: true,
|
name: '',
|
itemStyle: {
|
color: ''
|
},
|
areaStyle: {
|
normal: {}
|
}
|
}
|
]
|
};
|
windOption = {
|
title: {
|
text: '气象小时预报(风向)',
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross'
|
},
|
formatter: function(params) {
|
const directionName = {
|
W: '西',
|
WSW: '西南偏西',
|
SW: '西南',
|
SSW: '西南偏南',
|
S: '南',
|
SSE: '东南偏南',
|
SE: '东南',
|
ESE: '东南偏东',
|
E: '东',
|
ENE: '东北偏东',
|
NE: '东北',
|
NNE: '东北偏北',
|
N: '北',
|
NNW: '西北偏北',
|
NW: '西北',
|
WNW: '西北偏西',
|
};
|
return [
|
params[0].value[0],
|
'风速：' + params[0].value[1],
|
'风向：' + directionName[params[0].value[2]]
|
].join('<br>');
|
}
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: true
|
},
|
yAxis: {
|
name: '风速（m/s）'
|
},
|
series: [
|
{
|
type: 'custom',
|
renderItem: this.renderArrow,
|
data: [],
|
z: 10
|
}, {
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
itemStyle: {
|
color: '#6e7074'
|
},
|
lineStyle: {
|
normal: {
|
// type: 'dotted'
|
}
|
},
|
areaStyle: {
|
normal: {}
|
},
|
data: [],
|
z: 1
|
}
|
]
|
};
|
renderArrow(param, api) {
|
const directionMap = {};
|
const direction = ['W', 'WSW', 'SW', 'SSW', 'S', 'SSE', 'SE', 'ESE', 'E', 'ENE', 'NE', 'NNE', 'N', 'NNW', 'NW', 'WNW'];
|
|
direction.forEach((data, i) => {
|
directionMap[data] = Math.PI / 8 * i;
|
});
|
|
const dims = {
|
time: 0,
|
windSpeed: 1,
|
R: 2
|
};
|
const arrowSize = 18;
|
const point = api.coord([
|
api.value(dims.time),
|
api.value(dims.windSpeed)
|
]);
|
|
return {
|
type: 'path',
|
shape: {
|
pathData: 'M31 16l-15-15v9h-26v12h26v9z',
|
x: -arrowSize / 2,
|
y: -arrowSize / 2,
|
width: arrowSize,
|
height: arrowSize
|
},
|
rotation: directionMap[api.value(dims.R)],
|
position: point,
|
style: api.style({
|
stroke: '#555',
|
lineWidth: 1
|
})
|
};
|
}
|
|
|
public type = 'warning';
|
ngOnInit() {
|
this.initWarning();
|
}
|
|
changeType(event) {
|
if (event === 'warning') {
|
this.isShow = true;
|
this.initWarning();
|
} else {
|
this.isShow = false;
|
this.initForecasting();
|
}
|
}
|
|
initForecasting() {
|
delete this.option.series[1];
|
delete this.option['legend'];
|
this.option.xAxis.data = [];
|
const temp = [];
|
const humidity = [];
|
const pressure = [];
|
const uvi = [];
|
const title = '气象小时预报';
|
const windDirDatas = [];
|
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]) => {
|
const hourdatas = hoursRes['data'].hourly;
|
hourdatas.forEach((data, i) => {
|
if (i > 1 && i < 9) {
|
temp.push(data.temp);
|
humidity.push(data.humidity);
|
pressure.push(data.pressure);
|
uvi.push(data.uvi);
|
const formatTime = data.date.substring(data.date.length - 2) + '日' + data.hour + '时';
|
windDirDatas.push([formatTime, data.windSpeed, data.windDir]);
|
this.option.xAxis.data.push(formatTime);
|
}
|
});
|
const forecasting_tempChart = echarts.init(document.getElementById('forecasting_temp'));
|
this.option.title.text = title + '(温度)';
|
this.option.yAxis.name = '单位：℃';
|
this.option.series[0].data = temp;
|
this.option.series[0].itemStyle.color = this.colors[0];
|
forecasting_tempChart.setOption(this.option, false);
|
|
const forecasting_humidityChart = echarts.init(document.getElementById('forecasting_humidity'));
|
this.option.title.text = title + '(湿度)';
|
this.option.yAxis.name = '单位：%';
|
this.option.series[0].data = humidity;
|
this.option.series[0].itemStyle.color = this.colors[1];
|
forecasting_humidityChart.setOption(this.option, false);
|
|
const forecasting_pressureChart = echarts.init(document.getElementById('forecasting_pressure'));
|
this.option.title.text = title + '(气压)';
|
this.option.yAxis.name = '单位：hPa';
|
this.option.series[0].data = pressure;
|
this.option.series[0].itemStyle.color = this.colors[2];
|
forecasting_pressureChart.setOption(this.option, false);
|
|
const forecasting_uviChart = echarts.init(document.getElementById('forecasting_uvi'));
|
this.option.title.text = title + '(紫外线)';
|
this.option.yAxis.name = '单位：';
|
this.option.series[0].data = uvi;
|
this.option.series[0].itemStyle.color = this.colors[3];
|
forecasting_uviChart.setOption(this.option, false);
|
|
const forecasting_windChart = echarts.init(document.getElementById('forecasting_wind'));
|
this.windOption.series[0].data = windDirDatas;
|
this.windOption.series[1].data = windDirDatas;
|
forecasting_windChart.setOption(this.windOption, false);
|
|
const daydatas = daysRes['data'].forecast;
|
const temp_day = [];
|
const temp_night = [];
|
this.option.xAxis.data = [];
|
daydatas.forEach((data, i) => {
|
if (i > 1 && i < 9) {
|
temp_day.push(data.tempDay);
|
temp_night.push(data.tempNight);
|
this.option.xAxis.data.push(data.predictDate.substring(data.predictDate.length - 5));
|
}
|
});
|
const forecasting_temp_dayChart = echarts.init(document.getElementById('forecasting_temp_day'));
|
this.option.title.text = '气象日预报(温度)';
|
this.option.yAxis.name = '单位：℃';
|
this.option['legend'] = {
|
right: '10%',
|
top: '10%',
|
data: ['白天温度', '夜晚温度']
|
};
|
this.option.series[0].data = temp_day;
|
this.option.series[0].name = '白天温度';
|
this.option.series[0].itemStyle.color = this.colors[4];
|
this.option.series[1] = {
|
data: temp_night,
|
type: 'line',
|
smooth: true,
|
name: '夜晚温度',
|
areaStyle: {
|
normal: {}
|
},
|
itemStyle: {
|
color: this.colors[6]
|
}
|
};
|
forecasting_temp_dayChart.setOption(this.option, false);
|
|
window.addEventListener('resize', function() {
|
forecasting_tempChart.resize();
|
forecasting_humidityChart.resize();
|
forecasting_pressureChart.resize();
|
forecasting_uviChart.resize();
|
forecasting_windChart.resize();
|
forecasting_temp_dayChart.resize();
|
});
|
});
|
}
|
|
initWarning() {
|
delete this.option.series[1];
|
delete this.option['legend'];
|
this.isShow = true;
|
const PM2_5 = []; const PM10 = []; const CO = []; const NO2 = []; const O3 = []; const SO2 = [];
|
const title = '空气质量因子';
|
this.option.xAxis.data = [];
|
const params = {size: '7'};
|
this.http.get(environment.SERVER_BASH_URL + 'demo/list', {params: params}).subscribe((res: any) => {
|
res.forEach(data => {
|
const json = JSON.parse(data.aqi_json);
|
PM2_5.push(json.PM2_5);
|
PM10.push(json.PM10);
|
CO.push(json.CO);
|
NO2.push(json.NO2);
|
O3.push(json.O3);
|
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.title.text = title + '(PM2.5)';
|
this.option.yAxis.name = '单位：ug/m³';
|
this.option.series[0].data = PM2_5;
|
this.option.series[0].itemStyle.color = this.colors[0];
|
warning_PM25Chart.setOption(this.option, false);
|
|
const warning_PM10Chart = echarts.init(document.getElementById('warning_PM10'));
|
this.option.title.text = title + '(PM10)';
|
this.option.yAxis.name = '单位：ug/m³';
|
this.option.series[0].data = PM10;
|
this.option.series[0].itemStyle.color = this.colors[1];
|
warning_PM10Chart.setOption(this.option, false);
|
|
const warning_COChart = echarts.init(document.getElementById('warning_CO'));
|
this.option.title.text = title + '(CO)';
|
this.option.yAxis.name = '单位：mg/m³';
|
this.option.series[0].data = CO;
|
this.option.series[0].itemStyle.color = this.colors[2];
|
warning_COChart.setOption(this.option, false);
|
|
const warning_NO2Chart = echarts.init(document.getElementById('warning_NO2'));
|
this.option.title.text = title + '(NO2)';
|
this.option.yAxis.name = '单位：ug/m³';
|
this.option.series[0].data = NO2;
|
this.option.series[0].itemStyle.color = this.colors[3];
|
warning_NO2Chart.setOption(this.option, false);
|
|
const warning_O3Chart = echarts.init(document.getElementById('warning_O3'));
|
this.option.title.text = title + '(O3)';
|
this.option.yAxis.name = '单位：ug/m³';
|
this.option.series[0].data = O3;
|
this.option.series[0].itemStyle.color = this.colors[4];
|
warning_O3Chart.setOption(this.option, false);
|
|
const warning_SO2Chart = echarts.init(document.getElementById('warning_SO2'));
|
this.option.title.text = title + '(SO2)';
|
this.option.yAxis.name = '单位：ug/m³';
|
this.option.series[0].data = SO2;
|
this.option.series[0].itemStyle.color = this.colors[6];
|
warning_SO2Chart.setOption(this.option, false);
|
|
window.addEventListener('resize', function() {
|
warning_PM25Chart.resize();
|
warning_PM10Chart.resize();
|
warning_COChart.resize();
|
warning_NO2Chart.resize();
|
warning_O3Chart.resize();
|
warning_SO2Chart.resize();
|
});
|
});
|
}
|
}
|
