Merge branch 'master' of http://blit.7drlb.com:8888/r/screen_demo2

fengxiang

2018-08-03 e91e87b7b86e8d1d66caeab727a3cdc68fdc09ef

Merge branch 'master' of http://blit.7drlb.com:8888/r/screen_demo2

 src/app/routes/forecasting-warning/forecasting-warning.component.html

@@ -12,24 +12,24 @@
</nz-card>



<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>

    <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 nz-col nzXs="24" nzSm="12" nzMd="12"><div id="warning_PM25" style="height: 300px; width: 100%"></div></div>

    <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="warning_PM10" style="height: 300px; width: 100%"></div></div>

    <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="warning_CO" style="height: 300px; width: 100%"></div></div>

    <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="warning_NO2" style="height: 300px; width: 100%"></div></div>

    <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="warning_O3" style="height: 300px; width: 100%"></div></div>

    <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="warning_SO2" style="height: 300px; width: 100%"></div></div>

</div>



<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>

    <div nz-col [nzSpan]="12"><div id="forecasting_wind" style="height: 300px; width: 100%"></div></div>

    <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="forecasting_temp" style="height: 300px; width: 100%"></div></div>

    <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="forecasting_humidity" style="height: 300px; width: 100%"></div></div>

    <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="forecasting_pressure" style="height: 300px; width: 100%"></div></div>

    <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="forecasting_uvi" style="height: 300px; width: 100%"></div></div>

    <div nz-col nzXs="24" nzSm="12" nzMd="12"><div id="forecasting_wind" 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 nzXs="24" nzSm="12" nzMd="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>


 src/app/routes/pollution/management/management.component.html

@@ -25,7 +25,7 @@
                        <th nz-th><span>序号</span></th>
                        <th nz-th><span>站点名称</span></th>
                        <th nz-th class="text-right">
                            <span>因子数值</span>
                            <span>警报次数</span>
                            <nz-table-sort (nzValueChange)="sort('sum',$event)"></nz-table-sort>
                        </th>
                    </tr>

 src/app/routes/raise-dust/image-grabbing/image-grabbing.component.html

@@ -1,4 +1,44 @@
<div class="content__title">

    <h1>Page Name</h1>

    <h1>图像抓拍</h1>

</div>

<pro-header [title]="'Page Name'"></pro-header>



<nz-card [nzBordered]="false">

    <form nz-form [nzLayout]="'inline'">

        <div nz-row [nzGutter]="24" >

            <div nz-col nzXs="24" nzSm="12" nzMd="6"  class="mb-md">

                <div nz-form-item class="d-flex">

                    <div nz-form-label class="label-width-70">

                        <label>监测站点</label>

                    </div>

                    <div nz-form-control class="flex-1">

                        <nz-select [(ngModel)]="monitorPoint" name="monitorPoint" [nzPlaceHolder]="'请选择 监测站点'" [nzSize]="'large'"  
                            [nzNotFoundContent]="'无法找到'"  nzShowSearch (ngModelChange)="monitorPointChange($event)"> 
                            <nz-option *ngFor="let option of monitorPointOptions"  [nzLabel]="option['name']" [nzValue]="option.id"> </nz-option> 
                        </nz-select>

                    </div>

                </div>

            </div>

            <div nz-col nzXs="24" nzSm="12" nzMd="6"  class="mb-md">

                <div nz-form-item class="d-flex">

                    <div nz-form-label class="label-width-70">

                        <label>设备</label>

                    </div>

                    <div nz-form-control class="flex-1">

                        <nz-select [(ngModel)]="device" name="device" [nzSize]="'large'" [nzPlaceHolder]="'请选择  设备'" (ngModelChange)="deviceChange($event)">

                            <nz-option *ngFor="let option of deviceOptions" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>

                        </nz-select>

                    </div>

                </div>

            </div>

        </div>

    </form>

</nz-card>



<nz-card [nzBordered]="false">

    <div nz-row [nzGutter]="24" class="pt-lg">

        <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md" *ngFor="let time of times;let i = index">

            <h3>{{time}} 摄像</h3>

            <img src="./assets/img/{{i+ base}}.jpg" width="300" height="250" />

        </div>

    </div>

</nz-card>


 src/app/routes/raise-dust/image-grabbing/image-grabbing.component.ts

@@ -1,5 +1,7 @@
import {environment} from '../../../../environments/environment';

import {HttpClient} from '@angular/common/http';

import { Component, OnInit } from '@angular/core';

import { _HttpClient } from '@delon/theme';

import * as moment from 'moment';



@Component({

  selector: 'app-image-grabbing',

@@ -7,11 +9,29 @@
})

export class ImageGrabbingComponent implements OnInit {



  [x: string]: any;

  
    constructor(

        private http: _HttpClient

    private http: HttpClient

    ) { }



    ngOnInit() {

    this.http.get(environment.SERVER_BASH_URL + 'monitor-point/list/region', {params: {name: 'areaCode', value: '320583'}}).subscribe((res: any) => {

      this.monitorPointOptions = res.data;

    });

    }



  monitorPointChange(id) {

    this.device = null;

    this.times = null;

    this.http.get(environment.SERVER_BASH_URL + 'device/professionId', {params: {monitorPointId: id}}).subscribe((res: any) => {

      this.deviceOptions = res.data;

    });

  }



  deviceChange(id) {

    const format = 'DD日HH时';

    this.base = id % 10 % 5;

    this.times = [moment().subtract(2, 'h').format(format), moment().subtract(1, 'h').format(format), moment().format(format)];

  }

}


 src/app/routes/raise-dust/real-time/real-time.component.html

@@ -4,7 +4,7 @@


<form nz-form [nzLayout]="'inline'">

    <div nz-row [nzGutter]="24">

        <div nz-col [nzSpan]="6" class="mb-md">

        <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">

            <div nz-form-item class="d-flex">

                <div nz-form-label>

                    <label>监测站点</label>

@@ -55,7 +55,7 @@
</div>



<div nz-row [nzGutter]="24" class="pt-lg" *ngIf="!!avgs.e1">

    <div nz-col [nzSpan]="12" nzType="flex" nzAlign="middle">

    <div nz-col nzXs="24" nzSm="12" nzMd="6" nzType="flex" nzAlign="middle">

        <h2>

            <span style="color:#666666;">污染级别：</span> 

            <span style="color:#FF0000;">{{avgs.e1 > levels[0] ? (avgs.e1 &lt; levels[1] ? '轻度' : (avgs.e1 &lt; levels[2]? '中度':'严重' )) : '无'}}污染</span> 


 src/app/routes/raise-dust/statistical-query/statistical-query.component.html

@@ -1,4 +1,70 @@
<div class="content__title">

    <h1>Page Name</h1>

    <h1>数据查询</h1>

</div>

<pro-header [title]="'Page Name'"></pro-header>



<nz-card [nzBordered]="false">

    <form nz-form  (ngSubmit)="reportQuery()" [nzLayout]="'inline'">

        <div nz-row [nzGutter]="24" >

            <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">

                <div nz-form-item class="d-flex">

                    <div nz-form-label class="label-width-70">

                        <label>项目</label>

                    </div>

                    <div nz-form-control class="flex-1">

                        <nz-select [(ngModel)]="sensor" name="sensor" [nzSize]="'large'" [nzPlaceHolder]="'请选择  项目'">

                            <nz-option *ngFor="let option of sensorOptions" [nzLabel]="option.name" [nzValue]="option"></nz-option>

                        </nz-select>

                    </div>

                </div>

            </div>

            <div nz-col nzXs="24" nzSm="12" nzMd="6"  class="mb-md">

                <div nz-form-item class="d-flex">

                    <div nz-form-label class="label-width-70">

                        <label>监测站点</label>

                    </div>

                    <div nz-form-control class="flex-1">

                        <nz-select [(ngModel)]="monitorPoint" name="monitorPoint" [nzPlaceHolder]="'请选择 监测站点'" [nzSize]="'large'"  
                            [nzNotFoundContent]="'无法找到'"  nzShowSearch> 
                            <nz-option *ngFor="let option of monitorPointOptions"  [nzLabel]="option['name']" [nzValue]="option"> </nz-option> 
                        </nz-select>

                    </div>

                </div>

            </div>

            <div nz-col nzXs="24" nzSm="12" nzMd="6"  class="mb-md">

                <div nz-form-item class="d-flex">

                    <div nz-form-label class="label-width-70">

                        <label>类型</label>

                    </div>

                    <div nz-form-control class="flex-1">

                        <nz-select [(ngModel)]="timeType" name="timeType" [nzSize]="'large'">

                            <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option" ></nz-option>

                        </nz-select>

                    </div>

                </div>

            </div>

            <div nz-col nzXs="24" nzSm="12" nzMd="6"  class="mb-md">

                <div nz-form-item class="d-flex">

                    <div nz-form-label class="label-width-70">

                        <label>时间</label>

                    </div>

                    <div nz-form-control class="flex-1">

                        <nz-datepicker style="width: 100%;" [(ngModel)]="time" name="time" [nzFormat]="timeType.format" [nzDisabledDate]="_disabledDate" [nzAllowClear]="false"

                            [nzMode]="timeType.value=='hour'||timeType.value=='day'?'day':'month'" [nzShowTime]="timeType.value=='hour'?true:false" [nzSize]="'large'"></nz-datepicker>

                    </div>

                </div>

            </div>

        </div>



        <div nz-row [nzGutter]="24">

            <div nz-col nzXs="24" nzSm="12" nzMd="6"  class="mb-md">

                <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'">

                    查询

                </button>

            </div>

        </div>

    </form>

</nz-card>



<nz-card [nzBordered]="false">

    <div id="mydiv" style="height: 485.35px; width: 100%"></div>

</nz-card>


 src/app/routes/raise-dust/statistical-query/statistical-query.component.ts

@@ -1,17 +1,99 @@
import {environment} from '../../../../environments/environment';

import {DateService} from '../../../business/services/util/date.service';

import {NzMessageService} from 'ng-zorro-antd';

import { Component, OnInit } from '@angular/core';

import { _HttpClient } from '@delon/theme';

import {HttpClient} from '@angular/common/http';

import {zip} from 'rxjs/observable/zip';

import * as echarts from 'echarts';



@Component({

  selector: 'app-statistical-query',

  templateUrl: './statistical-query.component.html',

})

export class StatisticalQueryComponent implements OnInit {

  [x: string]: any;

  public query: any = {};

  public sensorOptions = [];

  public typeOptions = [

    {value: 'year', label: '年', format: 'YYYY'},

    {value: 'month', label: '月', format: 'YYYY-MM'},

    {value: 'day', label: '日', format: 'YYYY-MM-DD'},

    {value: 'hour', label: '时', format: 'YYYY-MM-DD HH'}

  ];



    constructor(

        private http: _HttpClient

    ) { }



    ngOnInit() {

    public http: HttpClient,

    public dateSrv: DateService,

    public msgSrv: NzMessageService

  ) {

    this.timeType = this.typeOptions[1];

    }



  private echartOption = {

    title: {

      text: '',

      left: 'center'

    },

    tooltip: {

      trigger: 'item',

      axisPointer: {

        type: 'cross'

      }

    },

    xAxis: {

      type: 'category',

      data: [],

      name: ''

    },

    yAxis: {

      type: 'value',

      name: ''



    },

    series: [

      {

        data: [],

        type: 'line',

        smooth: true,

        name: ''

      }

    ]

  };



  ngOnInit() {



    zip(

      this.http.get(environment.SERVER_BASH_URL + 'sensor/all'),

      this.http.get(environment.SERVER_BASH_URL + 'monitor-point/list/region', {params: {name: 'areaCode', value: '320583'}})

    ).subscribe(

      ([sensors, monitorPoints]) => {

        this.sensorOptions = sensors['data'];

        this.monitorPointOptions = monitorPoints['data'];

      });

  }



  _disabledDate(current: Date): boolean {

    return current && current.getTime() > Date.now();

  }



  reportQuery() {

    const query = this.query;

    query.type = this.timeType.value;

    const formatTime = this.dateSrv.date_format(this.time, this.timeType.format);

    const queryItems = [{formatTime: formatTime, monitorPointId: this.monitorPoint.id}];

    query.items = JSON.stringify(queryItems);

    query.sensors = JSON.stringify([this.sensor.sensorKey]);

    const myChart = echarts.init(document.getElementById('mydiv'));

    myChart.showLoading();

    this.http.get(environment.SERVER_BASH_URL + 'report/compare', {params: query}).subscribe((res: any) => {

      const option = this.echartOption;

      option.title.text = this.monitorPoint.name + '   ' + formatTime + '   ' + this.sensor.name + '   ' + this.timeType.label + '报表';

      option.yAxis.name = '单位：' + this.sensor.unit;

      option.xAxis.data = res.data.times;

      option.series[0].data = res.data.datas[0][this.sensor.sensorKey];

      myChart.setOption(option, true);

      window.onresize = myChart.resize;

      myChart.hideLoading();

    });

  }

}


 src/assets/img/5.jpg

 src/assets/img/6.jpg