预报预警

xufenglei

2018-07-13 1f5010e1328314b9f90a2f12dd2a7a1fb8924f5f

预报预警

 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>


 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;

    });

  }

}