From e97df5aa8edc8e2737d5cb0dab4314871cd3bf71 Mon Sep 17 00:00:00 2001 From: xufenglei <xufenglei> Date: Thu, 02 Aug 2018 08:55:06 +0800 Subject: [PATCH] 扬尘监控-实时监控和警告 --- src/app/routes/raise-dust/real-time/real-time.component.html | 73 +++++++++++++++++++++++++++++++++++- 1 files changed, 71 insertions(+), 2 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> -- Gitblit v1.8.0