From 1f5010e1328314b9f90a2f12dd2a7a1fb8924f5f Mon Sep 17 00:00:00 2001
From: xufenglei <xufenglei>
Date: Fri, 13 Jul 2018 14:43:18 +0800
Subject: [PATCH] 预报预警
---
src/app/routes/forecasting-warning/forecasting-warning.component.html | 42 +++++++---
src/app/routes/forecasting-warning/forecasting-warning.component.ts | 145 ++++++++++++++++++++++++++++++++----
2 files changed, 157 insertions(+), 30 deletions(-)
diff --git a/src/app/routes/forecasting-warning/forecasting-warning.component.html b/src/app/routes/forecasting-warning/forecasting-warning.component.html
index a448091..ef02380 100644
--- a/src/app/routes/forecasting-warning/forecasting-warning.component.html
+++ b/src/app/routes/forecasting-warning/forecasting-warning.component.html
@@ -1,13 +1,29 @@
-<div class="content__title">
- <h1>������������������������</h1>
-</div>
-<nz-card [nzBordered]="false">
-<div class="sales-type-radio">
- <nz-radio-group >
- <label nz-radio-button [nzValue]="'warning'"><span>������</span></label>
- <label nz-radio-button [nzValue]="'forecasting'"><span>������</span></label>
- </nz-radio-group>
-</div>
-
-</nz-card>
-<nz-card [nzBordered]="false"></nz-card>
+<div class="content__title">
+ <h1>������������������������</h1>
+</div>
+<nz-card [nzBordered]="false">
+ <div class="sales-type-radio">
+ <nz-radio-group [(ngModel)]="type" (ngModelChange)="changeType($event)">
+ <label nz-radio-button [nzValue]="'warning'"><span>������</span></label>
+ <label nz-radio-button [nzValue]="'forecasting'"><span>������</span></label>
+ </nz-radio-group>
+ </div>
+
+</nz-card>
+
+<div nz-row >
+ <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>
+ <div nz-col [nzSpan]="12"><div id="warning_NO2" style="height: 300px; width: 100%"></div></div>
+ <div nz-col [nzSpan]="12"><div id="warning_O3" style="height: 300px; width: 100%"></div></div>
+ <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-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>
+</div>
diff --git a/src/app/routes/forecasting-warning/forecasting-warning.component.ts b/src/app/routes/forecasting-warning/forecasting-warning.component.ts
index 66640f0..3aa9802 100644
--- a/src/app/routes/forecasting-warning/forecasting-warning.component.ts
+++ b/src/app/routes/forecasting-warning/forecasting-warning.component.ts
@@ -1,17 +1,128 @@
-import { Component, OnInit } from '@angular/core';
-import { _HttpClient } from '@delon/theme';
-
-@Component({
- selector: 'app-forecasting-warning',
- templateUrl: './forecasting-warning.component.html',
-})
-export class ForecastingWarningComponent implements OnInit {
-
- constructor(
- private http: _HttpClient
- ) { }
-
- ngOnInit() {
- }
-
-}
+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;
+ });
+ }
+}
--
Gitblit v1.8.0