From c69ddde7828d777f04c6468c269aaa0aa03d72c9 Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Thu, 02 Aug 2018 09:50:58 +0800
Subject: [PATCH] 文件修改
---
src/app/routes/forecasting-warning/forecasting-warning.component.ts | 377 +++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 360 insertions(+), 17 deletions(-)
diff --git a/src/app/routes/forecasting-warning/forecasting-warning.component.ts b/src/app/routes/forecasting-warning/forecasting-warning.component.ts
index 66640f0..2e44734 100644
--- a/src/app/routes/forecasting-warning/forecasting-warning.component.ts
+++ b/src/app/routes/forecasting-warning/forecasting-warning.component.ts
@@ -1,17 +1,360 @@
-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 '@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();
+ });
+ });
+ }
+}
--
Gitblit v1.8.0