<div class="content__title">
|
<h1>数据查询</h1>
|
</div>
|
<nz-card [nzBordered]="false">
|
<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 [ngStyle]="{'width': '100px'}" nz-form-label>
|
<label>污染因子</label>
|
</div>
|
<div nz-form-control class="flex-1">
|
<nz-popover [nzPlacement]="'bottomLeft'" [(nzVisible)]="sensorSelectVisible" [nzTrigger]="'click'">
|
<nz-input [nzType]="'input'" nz-popover [ngModel]="sensorNames" style="cursor:pointer;"
|
name="sensorNames" [nzReadonly]="true"
|
[nzPlaceHolder]="'请选择监控类型'">
|
<ng-template #suffix>
|
<i class="anticon anticon-down ng-star-inserted ant-cascader-picker-arrow" style="right: 1px;"></i>
|
</ng-template>
|
</nz-input>
|
<ng-template #nzTemplate>
|
<div style="position: relative; width: 240px; height: 240px;" (mouseover) = "onTreeMouseOver($event)" (mouseout) = "onTreeMouseOut($event)">
|
<div style="position: absolute; left: -16px; width: 272px; height: 256px; overflow-y :auto; top: -8px;">
|
<nz-tree [nzNodes]="sensorOptions" (nzActivate)="onTreeClickSelect($event)"
|
(nzDeactivate)="onTreeClickSelect($event)" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree>
|
</div>
|
</div>
|
</ng-template>
|
</nz-popover>
|
</div>
|
</div>
|
</div>
|
<div nz-col [nzSpan]="4" class="mb-md">
|
<div nz-form-item class="d-flex">
|
<div [ngStyle]="{'width': '128px'}" 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]="7" class="mb-md">
|
<div nz-form-item class="d-flex">
|
<div [ngStyle]="{'width': '128px'}" nz-form-label>
|
<label>监测站点</label>
|
</div>
|
<div nz-form-control class="flex-1">
|
<nz-select name="deviceDimension" style="width: 100%;" [(ngModel)]="deviceDimension" nzAllowClear [nzPlaceHolder]="'选择 '+ dimensionItem.label +'(输入名称搜索)'"
|
nzShowSearch (nzSearchChange)="dimensionsChange($event)" [nzNotFoundContent]="'无法找到'">
|
<nz-option *ngFor="let option of dimensionOptions" [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>
|
<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 nz-col [nzSpan]="2" class="mb-md">
|
<button nz-button [nzType]="'primary'" (click)="loadGrid()">
|
<i class="anticon anticon-search"></i>
|
<span>查询</span>
|
</button>
|
</div>
|
</div>
|
</form>
|
</nz-card>
|
<nz-card>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [ngStyle]="{'display':isChartCollapse ? 'none' : 'block' }" [nzMd]="24">
|
<div echarts style="margin-top: 12px;" [options]="chartOption" [loading]="chartLoading" class="line-chart" (chartInit)="onChartInit($event)"></div>
|
</div>
|
<div *ngIf="isChartCollapse" style="width:100%; text-align:center;">
|
<span style="font-size:18px; font-weight: bold;">{{ _chartTitleTemp }}</span>
|
</div>
|
<div *ngIf="!!echartsIntance&&!isChartCollapse" class="chart-switch-select">
|
<nz-dropdown>
|
<a class="ant-dropdown-link" nz-dropdown>
|
<p class="display-3 text-primary">切换项目
|
<i class="anticon anticon-down"></i>
|
</p>
|
</a>
|
<ul style="cursor:pointer; max-height: 260px; overflow:auto;" nz-menu>
|
<li [ngClass]="{'ant-dropdown-menu-item-selected':chartSelectedIndex==m}" *ngFor="let item of grid.data,index as m" (click)="switchSensor(m)"
|
nz-menu-item>
|
{{item.sensor.name}}
|
<i *ngIf="chartSelectedIndex==m" class="anticon anticon-check-circle-o"></i>
|
</li>
|
</ul>
|
</nz-dropdown>
|
</div>
|
<a *ngIf="!!echartsIntance" style="position: absolute; right: 0; top: -10px;" class="pl-sm" (click)="toggleChartCollapse()">
|
折叠
|
<i class="anticon" [class.anticon-down]="isChartCollapse" [class.anticon-up]="!isChartCollapse"></i>
|
</a>
|
</div>
|
</nz-card>
|
<!--<nz-card>-->
|
<!--<div nz-row [nzGutter]="16">-->
|
<!--<div nz-col [nzMd]="24">-->
|
<!--<div style="width:100%; text-align:center;">-->
|
<!--<span style="font-size:18px; font-weight: bold;">{{ _tableTitleTemp }}</span>-->
|
<!--</div>-->
|
<!--</div>-->
|
<!--</div>-->
|
<!--<div nz-row [nzGutter]="16">-->
|
<!--<div nz-col [nzMd]="24">-->
|
<!--<nz-table #nzTable [nzScroll]="{ x:tableWidth,y:350 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">-->
|
<!--<ng-template #nzFixedHeader>-->
|
<!--<thead nz-thead>-->
|
<!--<tr>-->
|
<!--<th nz-th [nzWidth]="'160px'" [ngStyle]="{'position': 'relative', 'text-align':'center', 'left':sensorNameScrollLeft+'px'}">-->
|
<!--<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 style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (click)="switchSensor(i)" (mouseover)="sensorTableFocus(i)"-->
|
<!--(mouseout)="sensorTableBlur(i)" [ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}">-->
|
<!--<td nz-td class='sensor-name' [ngStyle]="{'background-color': '#FFF'}">-->
|
<!--<span>-->
|
<!--<span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span> -->
|
<!--<i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></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.data[n]|tyepHandle:col:row }}" style="width:100%; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"-->
|
<!--*ngSwitchDefault> {{ row.data[n]|tyepHandle:col:row }} </span>-->
|
<!--<!– 要使用管道，无法自动生成 –>-->
|
<!--</span>-->
|
<!--</td>-->
|
<!--</tr>-->
|
<!--</tbody>-->
|
<!--</nz-table>-->
|
<!---->
|
<!--<div *ngIf="grid.data.length>0" [ngClass]="{'table-scroll':true,'table-scroll-box-shadow': sensorNameScrollLeft>2 }" style="position: absolute; top:0;">-->
|
<!--<nz-table #nzTable [nzDataSource]="grid.data" [nzIsPagination]="false">-->
|
<!--<thead nz-thead>-->
|
<!--<tr>-->
|
<!--<th nz-th [nzWidth]="'160px'" style="text-align:center; position:relative; display:block; z-index:9;">-->
|
<!--<span>监测项目</span>-->
|
<!--</th>-->
|
<!--</tr>-->
|
<!--</thead>-->
|
<!--<tbody nz-tbody [ngStyle]="{'top':sensorNameScrollTop+'px'}" style="position: relative; z-index:7; display:block;">-->
|
<!--<tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i" (mouseover)="sensorTableFocus(i)" (mouseout)="sensorTableBlur(i)"-->
|
<!--[ngClass]="{'table-tr-bgcolor-focus': i === sensorTableFocusIndex,'table-tr-bgcolor-blur': i !== sensorTableFocusIndex}"-->
|
<!--(click)="switchSensor(i)">-->
|
<!--<td nz-td class='sensor-name' [ngStyle]="{'width':'160px','text-align': 'center'}">-->
|
<!--<span>-->
|
<!--<span>{{ row.sensor.name+'('+row.sensor.unit+')' }}</span> -->
|
<!--<i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i>-->
|
<!--</span>-->
|
<!--</td>-->
|
<!--</tr>-->
|
<!--</tbody>-->
|
<!--</nz-table>-->
|
<!--</div>-->
|
<!--</div>-->
|
<!--</div>-->
|
<!--</nz-card>-->
|
