<div class="content__title">
|
<h1>数据查询</h1>
|
</div>
|
<nz-card [nzBordered]="false">
|
<form nz-form (ngSubmit)="loadGrid()" [nzLayout]="'inline'">
|
<div nz-row [nzGutter]="24">
|
<div nz-col [nzSpan]="8" class="mb-md">
|
<div nz-form-item class="d-flex">
|
<div nz-form-label>
|
<label>监测项目</label>
|
</div>
|
<div nz-form-control class="flex-1">
|
<nz-popover [nzTitle]="'请选择'" [(nzVisible)]="visible" [nzPlacement]="'bottomLeft'" [nzTrigger]="'hover'">
|
<nz-input [nzType]="'input'" nz-popover [ngModel]="sensorNames" name="sensorNames" [nzReadonly]="true" [nzPlaceHolder]="'请选择监控类型'">
|
<ng-template #suffix>
|
<i class="anticon anticon-plus ant-input-search-icon"></i>
|
</ng-template>
|
</nz-input>
|
<ng-template #nzTemplate>
|
<div [ngStyle]="{'width': '200px', 'height': '300px', 'overflow-y' :'auto'}">
|
<nz-tree [nzNodes]="sensorOptions" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree>
|
</div>
|
</ng-template>
|
</nz-popover>
|
</div>
|
</div>
|
</div>
|
<div nz-col [nzSpan]="8" class="mb-md">
|
<div nz-form-item class="d-flex">
|
<div nz-form-label>
|
<label>时间类型</label>
|
</div>
|
<div nz-form-control class="flex-1">
|
<nz-select name="timeUnit" [(ngModel)]="timeUnit" [nzPlaceHolder]="'选择 数据类型'"
|
(ngModelChange)="setTimeUnit($event)" [nzNotFoundContent]="'无法找到'">
|
<nz-option *ngFor="let option of timeUnitOptions" [nzLabel]="option.label" [nzValue]="option">
|
</nz-option>
|
</nz-select>
|
</div>
|
</div>
|
</div>
|
<div nz-col [nzSpan]="8" class="mb-md">
|
<div nz-form-item class="d-flex">
|
<div nz-form-label>
|
<label>选择日期</label>
|
</div>
|
<div *ngIf="timeUnit.value!='MONTH'; else elseBlock" nz-form-control class="flex-1">
|
<nz-datepicker [ngStyle]="{'width': '100%'}" name="actualTime" [(ngModel)]="actualTime"
|
[nzAllowClear]="false" [nzShowTime]="_timeType.showTime" [nzMode]="_timeType.mode"
|
[nzFormat]="_timeType.dateFormat" [nzPlaceHolder]="'具体日期'">
|
</nz-datepicker>
|
</div>
|
<ng-template #elseBlock>
|
<div nz-form-control class="flex-1">
|
<nz-select name="actualYear" [(ngModel)]="actualYear" [nzPlaceHolder]="'选择 数据类型'"
|
(ngModelChange)="setTimeUnit($event)" [nzNotFoundContent]="'无法找到'">
|
<nz-option *ngFor="let option of actualYearOptions" [nzLabel]="option" [nzValue]="option">
|
</nz-option>
|
</nz-select>
|
</div>
|
</ng-template>
|
</div>
|
</div>
|
</div>
|
<div *ngIf="!isCollapse" nz-row [nzGutter]="24">
|
<div nz-col [nzSpan]="8" class="mb-md">
|
<div nz-form-item class="d-flex">
|
<div [ngStyle]="{'width': '70px'}" nz-form-label>
|
<label>省市区</label>
|
</div>
|
<div nz-form-control class="flex-1">
|
<nz-cascader [class.class123]="true" (nzChange)="setAreaCodes($event)"
|
(nzLoad)="areaLazyLoad($event)" [nzPlaceHolder]="'选择 省/市/区'"
|
[nzAllowClear]="false" [nzChangeOnSelect]="true" [(ngModel)]="_areas" name="_areas">
|
</nz-cascader>
|
</div>
|
</div>
|
</div>
|
<div nz-col [nzSpan]="8" class="mb-md">
|
<div nz-form-item class="d-flex">
|
<div [ngStyle]="{'width': '70px'}" nz-form-label>
|
<label >监控点</label>
|
</div>
|
<div nz-form-control class="flex-1">
|
<nz-select name="monitorPoint" style="width: 100%;" [(ngModel)]="monitorPoint"
|
nzAllowClear [nzPlaceHolder]="'选择 监控点(输入名称搜索)'"
|
nzShowSearch (nzSearchChange)="monitorPointsChange($event)"
|
[nzNotFoundContent]="'无法找到'">
|
<nz-option *ngFor="let option of monitorPointOptions" [nzLabel]="option.name" [nzValue]="option">
|
</nz-option>
|
</nz-select>
|
</div>
|
</div>
|
</div>
|
<div nz-col [nzSpan]="8" class="mb-md">
|
<div nz-form-item class="d-flex">
|
<div [ngStyle]="{'width': '70px'}" nz-form-label>
|
<label>设 备</label>
|
</div>
|
<div nz-form-control class="flex-1">
|
<nz-select name="device" style="width: 100%;" [(ngModel)]="device" nzAllowClear [nzPlaceHolder]="'先选择 监控点(输入名称搜索)'"
|
nzShowSearch (nzSearchChange)="devicesChange($event)" [nzNotFoundContent]="'无法找到'">
|
<nz-option *ngFor="let option of deviceOptions" [nzLabel]="option.name" [nzValue]="option">
|
</nz-option>
|
</nz-select>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div nz-row>
|
<div nz-col [nzSpan]="24" class="text-right">
|
<button nz-button [nzType]="'primary'">
|
<i class="anticon anticon-search"></i>
|
<span>查询</span>
|
</button>
|
<a class="pl-sm" (click)="toggleCollapse()">
|
折叠
|
<i class="anticon" [class.anticon-down]="isCollapse" [class.anticon-up]="!isCollapse"></i>
|
</a>
|
</div>
|
</div>
|
</form>
|
</nz-card>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="24">
|
<nz-card>
|
<nz-table #nzTable [nzScroll]="{ x:5000,y:400 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">
|
<ng-template #nzFixedHeader>
|
<thead nz-thead>
|
<tr>
|
<th nz-th [nzWidth]="'80px'" >
|
<span>监测项目</span>
|
</th>
|
<th nz-th [nzWidth]="'80px'" *ngFor="let col of grid.columns" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
|
<span>{{ col.text }}</span>
|
</th>
|
</tr>
|
</thead>
|
</ng-template>
|
<tbody nz-tbody>
|
<tr nz-tbody-tr *ngFor="let row of nzTable.data,index as i">
|
<td nz-td>
|
<span>{{ gridSensorNames[i] }}</span>
|
</td>
|
<td nz-td *ngFor="let col of grid.columns,index as n" [ngStyle]="{'width':col.width,'text-align':col['align'] === undefined?'left':col.align}">
|
<span [ngSwitch]="col.type">
|
<!-- 要使用管道，无法自动生成 -->
|
<span title="{{ row[n]|tyepHandle:col:row }}" style="width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" *ngSwitchDefault> {{ row[n]|tyepHandle:col:row }} </span>
|
<!-- 要使用管道，无法自动生成 -->
|
</span>
|
</td>
|
</tr>
|
</tbody>
|
</nz-table>
|
</nz-card>
|
</div>
|
</div>
|
