<nz-card [nzBordered]="true">
|
<div nz-row>
|
<div nz-col [nzXs]="20" [nzSm]="8" class="header-info">
|
<p class="text-grey-dark">当前监控项目</p>
|
<nz-dropdown>
|
<a class="ant-dropdown-link" nz-dropdown>
|
<p class="display-2">{{ lineChartSensorName }}
|
<i class="anticon anticon-down"></i>
|
</p>
|
</a>
|
<ul style="height:280px; overflow:auto;" nz-menu>
|
<li style="width:200px; cursor:pointer;" *ngFor="let sensor of sensorList" (click)="lineChartCriteria.sensorKey=sensor.sensorKey"
|
nz-menu-item>
|
<p>
|
{{sensor.name}}
|
</p>
|
</li>
|
</ul>
|
</nz-dropdown>
|
<em></em>
|
</div>
|
<div nz-col [nzXs]="20" [nzSm]="8" class="header-info">
|
<p class="text-grey-dark">横坐标时间单位</p>
|
<nz-dropdown>
|
<a class="ant-dropdown-link" nz-dropdown>
|
<p class="display-2">{{ timePeriodUnitName }}
|
<i class="anticon anticon-down"></i>
|
</p>
|
</a>
|
<ul nz-menu>
|
<li style="width:60px; cursor:pointer;" *ngFor="let item of timeUnits" (click)="timePeriodUnitValue = item.value" nz-menu-item>
|
<p>
|
{{item.label}}
|
</p>
|
</li>
|
</ul>
|
</nz-dropdown>
|
<em></em>
|
</div>
|
<div *ngIf="_timePeriodUnitValue!='YEAR'; else elseBlock" nz-col [nzSm]="8" class="header-info">
|
<p class="text-grey-dark">横坐标时间区间</p>
|
<nz-datepicker style="width: 42%;" [ngModel]="lineChartCriteria.timePeriod.startTime"
|
(ngModelChange) ="_timeChange($event,'start')"
|
[nzDisabledDate]="_disabledStartDate"
|
[nzShowTime]="_startShowTime" [nzMode]="timeType.mode" [nzFormat]="timeType.dateFormat"
|
[nzPlaceHolder]="'Start date'"></nz-datepicker>
|
<span>-</span>
|
<nz-datepicker style="width: 42%;" [nzDisabledDate]="_disabledEndDate" [ngModel]="lineChartCriteria.timePeriod.endTime"
|
(ngModelChange) ="_timeChange($event,'end')"
|
[nzShowTime]="_endShowTime" [nzMode]="timeType.mode" [nzFormat]="timeType.dateFormat"
|
[nzPlaceHolder]="'End date'"></nz-datepicker>
|
</div>
|
<ng-template #elseBlock>
|
<div nz-col [nzSm]="8" class="header-info">
|
<p class="text-grey-dark">横坐标时间区间</p>
|
<nz-input-number style="width: 42%;" [(ngModel)]="startYear" [nzMin]="minStartYear" [nzMax]="maxStartYear" [nzStep]="1" [nzAllowClear]="false"></nz-input-number>
|
<span>-</span>
|
<nz-input-number style="width: 42%;" [(ngModel)]="endYear" [nzMin]="minEndYear" [nzMax]="maxEndYear" [nzStep]="1" [nzAllowClear]="false"></nz-input-number>
|
</div>
|
</ng-template>
|
</div>
|
</nz-card>
|
<form nz-form [nzLayout]="'vertical'">
|
<nz-card [nzBordered]="true" title="数据取样">
|
<div nz-row [nzGutter]="16">
|
<div nz-col nzMd="6" nzSm="12" nzXs="24">
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<label>省市区</label>
|
</div>
|
<div nz-form-control nz-col >
|
<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 [nzMd]="{span:6, offset:3}" nzSm="12" nzXs="24">
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<label>监控点</label>
|
</div>
|
<div nz-form-control nz-col>
|
<nz-select name="_monitorPoint" style="width: 100%;" [ngModel]="_monitorPoint" (ngModelChange)="setMonitorPoint($event)"
|
nzAllowClear [nzPlaceHolder]="'选择 监控点(输入名称搜索)'" nzShowSearch (nzSearchChange)="monitorPointsChange($event)"
|
[nzNotFoundContent]="'无法找到'">
|
<nz-option *ngFor="let option of monitorPoints" [nzLabel]="option.name" [nzValue]="option">
|
</nz-option>
|
</nz-select>
|
</div>
|
|
</div>
|
</div>
|
<div nz-col [nzMd]="{span:6, offset:3}" nzSm="12" nzXs="24">
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<label>设备 ( 先选择监控点 )</label>
|
</div>
|
<div nz-form-control nz-col>
|
<nz-select name="_device" style="width: 100%;" [ngModel]="_device" (ngModelChange)="setDevice($event)" nzAllowClear [nzPlaceHolder]="'选择 监控点(输入名称搜索)'"
|
nzShowSearch (nzSearchChange)="devicesChange($event)" [nzNotFoundContent]="'无法找到'">
|
<nz-option *ngFor="let option of devices" [nzLabel]="option.name" [nzValue]="option">
|
</nz-option>
|
</nz-select>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col nzMd="6" nzSm="12" nzXs="24">
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<label>时间单位</label>
|
</div>
|
<div nz-form-control nz-col >
|
<nz-select name="_dataTimeUnits" style="width: 100%;" [ngModel]="_dataTimeUnits" (ngModelChange)="setDataTimeUnits($event)" [nzPlaceHolder]="'选择 时间单位'">
|
<nz-option *ngFor="let option of dataTimeUnitsList" [nzLabel]="option.label" [nzValue]="option">
|
</nz-option>
|
</nz-select>
|
</div>
|
</div>
|
</div>
|
<div nz-col [nzMd]="{span:6, offset:3}" nzSm="12" nzXs="24">
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<label>具体时间</label>
|
</div>
|
<div nz-form-control nz-col >
|
<nz-select name="_actualTime" style="width: 100%;" [ngModel]="_actualTime" (ngModelChange)="setActualTime($event)" [nzPlaceHolder]="'默认取 当前单位平均值'"
|
[nzDisabled]="actualTimeDisabled">
|
<nz-option *ngFor="let option of actualTimes" [nzLabel]="option" [nzValue]="option">
|
</nz-option>
|
</nz-select>
|
</div>
|
</div>
|
</div>
|
<div nz-col [nzMd]="{span:6, offset:3}" nzSm="12" nzXs="24">
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col>
|
<span> </span>
|
</div>
|
<div nz-form-control nz-col >
|
<button nz-button [nzType]="'primary'"
|
(click) = "search($event)" [disabled]="false" class="mr-sm">
|
<i class="anticon anticon-search"></i>
|
<span>查询</span>
|
</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</nz-card>
|
</form>
|
<nz-card [nzBordered]="true">
|
<div echarts [options]="chartOption" [loading]="chartLoading" class="line-chart" (chartInit)="onChartInit($event)"></div>
|
</nz-card>
|
