From 09d02da80ec5bd59836427007169fdd03738e393 Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Mon, 16 Jul 2018 11:36:41 +0800 Subject: [PATCH] Merge branch 'master' of http://blit.7drlb.com:8888/r/screen_demo2 --- src/app/routes/home-page/home-page/home-page.component.ts | 8 +- src/app/routes/forecasting-warning/forecasting-warning.component.html | 11 ++- src/app/routes/forecasting-warning/forecasting-warning.component.ts | 148 ++++++++++++++++++++++++++++++++++++++----------- src/app/routes/reports/query2/query2.component.html | 2 src/app/routes/statistics/monitorpoint/monitorpoint.component.html | 2 src/app/routes/pollution/management/management.component.html | 2 6 files changed, 129 insertions(+), 44 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; }); diff --git a/src/app/routes/home-page/home-page/home-page.component.ts b/src/app/routes/home-page/home-page/home-page.component.ts index 49e739f..2425846 100644 --- a/src/app/routes/home-page/home-page/home-page.component.ts +++ b/src/app/routes/home-page/home-page/home-page.component.ts @@ -61,7 +61,7 @@ }); } - + public aqiChartOption = {}; public aqiEchartsIntance; public aqiChartLoading = false; @@ -71,11 +71,11 @@ public meteChartOption = {}; public meteEchartsIntance; public meteChartLoading = false; - private onMeteChartInit(e): void { + public onMeteChartInit(e): void { this.meteEchartsIntance = e; } private reloadAqiChart(): void { - // const timeList = this.grid.columns.map(item => item.text); + // const timeList = this.grid.columns.map(item => item.text); if (!!this.aqiEchartsIntance) { this.aqiChartOption = null; this.aqiEchartsIntance.clear(); @@ -84,7 +84,7 @@ // if ( this.chartSelectedIndex < this.grid.data.length ) { // series = [{type: 'line', data: this.grid.data[this.chartSelectedIndex]}]; // } - + // this.initOpton(chartOption ,{ xAxis : [{data : []}]}); // this.aqiChartOption = true; this.initOpton(this.aqiChartOption ,{ xAxis : [{data : this.newArray(0, 24, null, '���')}]}); diff --git a/src/app/routes/pollution/management/management.component.html b/src/app/routes/pollution/management/management.component.html index 9f31405..c096e62 100644 --- a/src/app/routes/pollution/management/management.component.html +++ b/src/app/routes/pollution/management/management.component.html @@ -1,7 +1,7 @@ <div nz-row [nzGutter]="24"> <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24"> - <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="������������������" [nzBodyStyle]="{'padding.px': 24}" class="sales-card" style="min-height: 482px;"> + <nz-card [nzBordered]="false" nzTitle="������������������" [nzBodyStyle]="{'padding.px': 24}" class="sales-card" style="min-height: 482px;"> <ng-template #extra> <div class="sales-card-extra"> <div class="sales-type-radio"> diff --git a/src/app/routes/reports/query2/query2.component.html b/src/app/routes/reports/query2/query2.component.html index 150b578..be20c17 100644 --- a/src/app/routes/reports/query2/query2.component.html +++ b/src/app/routes/reports/query2/query2.component.html @@ -1,7 +1,7 @@ <div nz-row [nzGutter]="24" style="padding-top: 25px"> <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24"> - <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="������������������" [nzBodyStyle]="{'padding.px': 24}" class="sales-card" style="min-height: 482px;"> + <nz-card [nzBordered]="false" nzTitle="������������������" [nzBodyStyle]="{'padding.px': 24}" class="sales-card" style="min-height: 482px;"> <ng-template #extra> <div class="sales-card-extra"> <div class="sales-type-radio"> diff --git a/src/app/routes/statistics/monitorpoint/monitorpoint.component.html b/src/app/routes/statistics/monitorpoint/monitorpoint.component.html index 9f31405..c096e62 100644 --- a/src/app/routes/statistics/monitorpoint/monitorpoint.component.html +++ b/src/app/routes/statistics/monitorpoint/monitorpoint.component.html @@ -1,7 +1,7 @@ <div nz-row [nzGutter]="24"> <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24"> - <nz-card [nzLoading]="loading" [nzBordered]="false" nzTitle="������������������" [nzBodyStyle]="{'padding.px': 24}" class="sales-card" style="min-height: 482px;"> + <nz-card [nzBordered]="false" nzTitle="������������������" [nzBodyStyle]="{'padding.px': 24}" class="sales-card" style="min-height: 482px;"> <ng-template #extra> <div class="sales-card-extra"> <div class="sales-type-radio"> -- Gitblit v1.8.0