|  |  |  | 
|---|
|  |  |  | <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 [nzSpan]="5" 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 [nzSpan]="5" 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 [nzSpan]="5" 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 [nzSpan]="5" 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 [nzSpan]="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> | 
|---|