预报预警

xufenglei

2018-07-16 52736a42916bdba2eb208b70703089310923c8de

 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;

    });