扬尘监控-实时监控和警告

xufenglei

2018-08-02 e97df5aa8edc8e2737d5cb0dab4314871cd3bf71

扬尘监控-实时监控和警告

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

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

    <h1>Page Name</h1>

    <h1>监测站点实时数据查询</h1>

</div>

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



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

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

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

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

                <div nz-form-label>

                    <label>监测站点</label>

                </div>

                <div class="flex-1">

                    <nz-select [(ngModel)]="monitorPoint" name="monitorPoint" [nzSize]="'large'" [nzPlaceHolder]="'请选择 监测站点'" [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>

</form>



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

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

        <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">

            <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">

                <div style="height: 40px;" class="h2 mt0">{{avgs.e1}}</div>

                <p class="text-nowrap mb0">PM2.5(ug/m³)</p>

            </div>

        </div>

    </div>

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

        <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">

            <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">

                <div style="height: 40px;" class="h2 mt0">{{avgs.e2}}</div>

                <p class="text-nowrap mb0">PM10(ug/m³)</p>

            </div>

        </div>

    </div>

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

        <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">

            <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">

                <div style="height: 40px;" class="h2 mt0">{{avgs.e3}}</div>

                <p class="text-nowrap mb0">PM0.3(pcs/0.1L)</p>

            </div>

        </div>

    </div>

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

        <div nz-row nzType="flex" nzAlign="middle" class="bg-pink rounded-md">

            <div nz-col nzSpan="24" class="p-md text-white" style="height: 90px;text-align: center;">

                <div style="height: 40px;" class="h2 mt0">{{avgs.e13}}</div>

                <p class="text-nowrap">噪音(db)</p>

            </div>

        </div>

    </div>

</div>



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

    <div nz-col [nzSpan]="12" 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> 
            <span>&nbsp;</span> 
            <span style="font-size:80%" *ngIf="avgs.e1 > levels[0]">已通过短信发送告警</span>

        </h2>

    </div>

</div>



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

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

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

        <h3>{{device.name}} 摄像头</h3>

    </div>

</div>


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

@@ -1,5 +1,7 @@
import { Component, OnInit } from '@angular/core';

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

import {environment} from '../../../../environments/environment';

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

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

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



@Component({

  selector: 'app-real-time',

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

export class RealTimeComponent implements OnInit {



    constructor(

        private http: _HttpClient

    ) { }

  public monitorPointOptions = [];

  public avgs = {};

  public levels = [35, 115, 200];

  public devices = [];

  constructor(

    private http: HttpClient

  ) {}



    ngOnInit() {

    }

  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.avgs = {};

    this.devices = [];

    zip(

      this.http.get(environment.SERVER_BASH_URL + 'demo/avg', {params: {monitorPointId: id}}),

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

    ).subscribe(

      ([avgs, devices]) => {

        if (!!avgs) {

          this.avgs = avgs;

        }

        if (!!devices['data']) {

          this.devices = devices['data'];

        }

      });

  }

}


 src/assets/img/0.jpg

 src/assets/img/1.jpg

 src/assets/img/2.jpg

 src/assets/img/3.jpg

 src/assets/img/4.jpg