From 52736a42916bdba2eb208b70703089310923c8de Mon Sep 17 00:00:00 2001
From: xufenglei <xufenglei>
Date: Mon, 16 Jul 2018 10:58:03 +0800
Subject: [PATCH] 预报预警
---
src/app/routes/forecasting-warning/forecasting-warning.component.html | 11 ++-
src/app/routes/forecasting-warning/forecasting-warning.component.ts | 148 ++++++++++++++++++++++++++++++++++++++-----------
2 files changed, 122 insertions(+), 37 deletions(-)
diff --git a/src/app/routes/forecasting-warning/forecasting-warning.component.html b/src/app/routes/forecasting-warning/forecasting-warning.component.html
index ef02380..8a0034a 100644
--- a/src/app/routes/forecasting-warning/forecasting-warning.component.html
+++ b/src/app/routes/forecasting-warning/forecasting-warning.component.html
@@ -11,7 +11,7 @@
</nz-card>
-<div nz-row >
+<div nz-row [ngStyle]="{'display':isShow ? 'block' : 'none'}">
<div nz-col [nzSpan]="12"><div id="warning_PM25" style="height: 300px; width: 100%"></div></div>
<div nz-col [nzSpan]="12"><div id="warning_PM10" style="height: 300px; width: 100%"></div></div>
<div nz-col [nzSpan]="12"><div id="warning_CO" style="height: 300px; width: 100%"></div></div>
@@ -20,10 +20,15 @@
<div nz-col [nzSpan]="12"><div id="warning_SO2" style="height: 300px; width: 100%"></div></div>
</div>
-<div nz-row [ngStyle]="{'display':'none' }">
- <!-- -->
+<div nz-row [ngStyle]="{'display':isShow ? 'none' : 'block'}">
+ <!-- 24������ -->
<div nz-col [nzSpan]="12"><div id="forecasting_temp" style="height: 300px; width: 100%"></div></div>
<div nz-col [nzSpan]="12"><div id="forecasting_humidity" style="height: 300px; width: 100%"></div></div>
<div nz-col [nzSpan]="12"><div id="forecasting_pressure" style="height: 300px; width: 100%"></div></div>
<div nz-col [nzSpan]="12"><div id="forecasting_uvi" style="height: 300px; width: 100%"></div></div>
+
+ <!-- 15��� -->
+ <div nz-col [nzSpan]="12"><div id="forecasting_temp_day" style="height: 300px; width: 100%"></div></div>
+ <!-- <div nz-col [nzSpan]="12"><div id="forecasting_uvi" style="height: 300px; width: 100%"></div></div> -->
+
</div>
diff --git a/src/app/routes/forecasting-warning/forecasting-warning.component.ts b/src/app/routes/forecasting-warning/forecasting-warning.component.ts
index 3aa9802..8f287e6 100644
--- a/src/app/routes/forecasting-warning/forecasting-warning.component.ts
+++ b/src/app/routes/forecasting-warning/forecasting-warning.component.ts
@@ -20,10 +20,18 @@
}
[x: string]: any;
+ public isShow = true;
+
public option = {
title: {
text: '',
left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ axisPointer: {
+ type: 'cross'
+ }
},
xAxis: {
type: 'category',
@@ -31,96 +39,168 @@
},
yAxis: {
type: 'value',
- name: '���������'
+ name: ''
},
- series: [{
- data: [],
- type: 'line',
- smooth: true
- }]
+ series: [
+ {
+ data: [],
+ type: 'line',
+ smooth: true,
+ name: ''
+ }
+ ]
};
- PM2_5 = []; PM10 = []; CO = []; NO2 = []; O3 = []; SO2 = [];
- title = '������������������';
-
ngOnInit() {
this.initWarning();
}
changeType(event) {
if (event === 'warning') {
+ this.isShow = true;
this.initWarning();
} else {
- this.initForecasting();
+ this.isShow = false;
this.initForecasting();
}
}
initForecasting() {
- // this.http.get('http://sapi.7drlb.com/api/mj?cityID=1102&apiKey=forecast15days').subscribe((res: any) => {
- // console.info(res);
- // });
+ this.option.legend = {};
+ this.option.xAxis.data = [];
+ const temp = [];
+ const humidity = [];
+ const pressure = [];
+ const uvi = [];
+ const title = '������������������';
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);
+ 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);
+ this.option.xAxis.data.push(data.date.substring(data.date.length - 2) + '���' + data.hour + '���');
+ }
+ });
+ const forecasting_tempChart = echarts.init(document.getElementById('forecasting_temp'));
+ this.option.series[0].data = temp;
+ this.option.yAxis.name = '������������';
+ this.option.title.text = title + '(������)';
+ forecasting_tempChart.setOption(this.option, false);
+ window.onresize = forecasting_tempChart.resize;
+
+ const forecasting_humidityChart = echarts.init(document.getElementById('forecasting_humidity'));
+ this.option.series[0].data = humidity;
+ this.option.yAxis.name = '���������%';
+ this.option.title.text = title + '(������)';
+ forecasting_humidityChart.setOption(this.option, false);
+ window.onresize = forecasting_humidityChart.resize;
+
+ const forecasting_pressureChart = echarts.init(document.getElementById('forecasting_pressure'));
+ this.option.series[0].data = pressure;
+ this.option.yAxis.name = '���������hPa';
+ this.option.title.text = title + '(������)';
+ forecasting_pressureChart.setOption(this.option, false);
+ window.onresize = forecasting_pressureChart.resize;
+
+ const forecasting_uviChart = echarts.init(document.getElementById('forecasting_uvi'));
+ this.option.series[0].data = uvi;
+ this.option.yAxis.name = '���������';
+ this.option.title.text = title + '(���������)';
+ forecasting_uviChart.setOption(this.option, false);
+ window.onresize = forecasting_uviChart.resize;
+
+ 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.series[1] = {
+ data: temp_night,
+ type: 'line',
+ smooth: true,
+ name: '������������'
+ };
+ this.option.series[0].data = temp_day;
+ this.option.series[0].name = '������������';
+ this.option.yAxis.name = '������������';
+ this.option.title.text = '���������������(������)';
+ this.option.legend = {
+ right: '10%',
+ data: ['������������', '������������']
+ },
+ forecasting_temp_dayChart.setOption(this.option, false);
+ window.onresize = forecasting_temp_dayChart.resize;
});
}
initWarning() {
- this.PM2_5 = []; this.PM10 = []; this.CO = []; this.NO2 = []; this.O3 = []; this.SO2 = [];
+ 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 = [];
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);
+ 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.series[0].data = this.PM2_5;
+ this.option.series[0].data = PM2_5;
this.option.yAxis.name = '���������ug/m��';
- this.option.title.text = this.title + '(PM2.5)';
+ this.option.title.text = 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.series[0].data = PM10;
this.option.yAxis.name = '���������ug/m��';
- this.option.title.text = this.title + '(PM10)';
+ this.option.title.text = 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.series[0].data = CO;
this.option.yAxis.name = '���������mg/m��';
- this.option.title.text = this.title + '(CO)';
+ this.option.title.text = 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.series[0].data = NO2;
this.option.yAxis.name = '���������ug/m��';
- this.option.title.text = this.title + '(NO2)';
+ this.option.title.text = 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.series[0].data = O3;
this.option.yAxis.name = '���������ug/m��';
- this.option.title.text = this.title + '(O3)';
+ this.option.title.text = 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.series[0].data = SO2;
this.option.yAxis.name = '���������ug/m��';
- this.option.title.text = this.title + '(SO2)';
+ this.option.title.text = title + '(SO2)';
warning_SO2Chart.setOption(this.option, false);
window.onresize = warning_SO2Chart.resize;
});
--
Gitblit v1.8.0