<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" [nzDisabledDate]="_disabledStartDate" 
 | 
                nzShowTime="{{ !!timeType.timePickerOption?timeType.timePickerOption:false }}" [nzMode]="timeType.mode" [nzFormat]="timeType.dateFormat" 
 | 
                [nzPlaceHolder]="'Start date'"></nz-datepicker> 
 | 
            <span>-</span> 
 | 
            <nz-datepicker style="width: 42%;" [nzDisabledDate]="_disabledEndDate" [(ngModel)]="lineChartCriteria.timePeriod.endTime" 
 | 
                nzShowTime="{{ !!timeType.timePickerOption?timeType.timePickerOption:false }}" [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> 
 | 
<nz-card [nzBordered]="true" title="数据取样"> 
 | 
     <form> 
 | 
            <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 nzHasFeedback> 
 | 
                                            <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 nzHasFeedback> 
 | 
                                            <nz-select  
 | 
                                              name="_monitorPoint" 
 | 
                                              style="width: 100%;" (click)="monitorPointChange(null)"  
 | 
                                              [ngModel]="_monitorPoint" 
 | 
                                              nzAllowClear 
 | 
                                              (ngModelChange)="setMonitorPoint($event)"  
 | 
                                              [nzPlaceHolder]="'选择 监控点(输入名称搜索)'" 
 | 
                                                 nzShowSearch (nzSearchChange)="monitorPointChange($event)" [nzNotFoundContent]="'无法找到'" > 
 | 
                                              <nz-option *ngFor="let option of monitorPoints" [nzLabel]="option.name" [nzValue]="option.id"> 
 | 
                                              </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 nzHasFeedback> 
 | 
                                          11111111111111111 
 | 
                                    </div> 
 | 
                                     
 | 
                            </div>                             
 | 
                    </div> 
 | 
            </div> 
 | 
            <div style="margin-top: 20px;" 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 nzHasFeedback> 
 | 
                                        222222222 
 | 
                                    </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 nzHasFeedback> 
 | 
                                        2222222222 
 | 
                                    </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 nzHasFeedback> 
 | 
                                        2222222222 
 | 
                                    </div>                                     
 | 
                            </div>                             
 | 
                    </div> 
 | 
            </div> 
 | 
     </form> 
 | 
</nz-card> 
 |