From e97df5aa8edc8e2737d5cb0dab4314871cd3bf71 Mon Sep 17 00:00:00 2001
From: xufenglei <xufenglei>
Date: Thu, 02 Aug 2018 08:55:06 +0800
Subject: [PATCH] 扬尘监控-实时监控和警告
---
src/assets/img/3.jpg | 0
src/assets/img/2.jpg | 0
src/app/routes/raise-dust/real-time/real-time.component.ts | 39 ++++++++++++++++---
src/assets/img/0.jpg | 0
src/assets/img/1.jpg | 0
src/assets/img/4.jpg | 0
src/app/routes/raise-dust/real-time/real-time.component.html | 73 +++++++++++++++++++++++++++++++++++-
7 files changed, 103 insertions(+), 9 deletions(-)
diff --git a/src/app/routes/raise-dust/real-time/real-time.component.html b/src/app/routes/raise-dust/real-time/real-time.component.html
index e9d3bb7..617b254 100644
--- a/src/app/routes/raise-dust/real-time/real-time.component.html
+++ b/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 < levels[1] ? '������' : (avgs.e1 < levels[2]? '������':'������' )) : '���'}}������</span>
+ <span> </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>
diff --git a/src/app/routes/raise-dust/real-time/real-time.component.ts b/src/app/routes/raise-dust/real-time/real-time.component.ts
index bf43ace..6d48880 100644
--- a/src/app/routes/raise-dust/real-time/real-time.component.ts
+++ b/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'];
+ }
+ });
+ }
}
diff --git a/src/assets/img/0.jpg b/src/assets/img/0.jpg
new file mode 100644
index 0000000..9d449fb
--- /dev/null
+++ b/src/assets/img/0.jpg
Binary files differ
diff --git a/src/assets/img/1.jpg b/src/assets/img/1.jpg
new file mode 100644
index 0000000..b741b31
--- /dev/null
+++ b/src/assets/img/1.jpg
Binary files differ
diff --git a/src/assets/img/2.jpg b/src/assets/img/2.jpg
new file mode 100644
index 0000000..9705981
--- /dev/null
+++ b/src/assets/img/2.jpg
Binary files differ
diff --git a/src/assets/img/3.jpg b/src/assets/img/3.jpg
new file mode 100644
index 0000000..a03255b
--- /dev/null
+++ b/src/assets/img/3.jpg
Binary files differ
diff --git a/src/assets/img/4.jpg b/src/assets/img/4.jpg
new file mode 100644
index 0000000..9dd98ca
--- /dev/null
+++ b/src/assets/img/4.jpg
Binary files differ
--
Gitblit v1.8.0