grid 冻结 功能 延迟bug修复

fengxiang

2018-03-24 ba6f868ccc79328594f42d85ea34ca254e5d51d8

 src/app/routes/analysis/query/query.component.html

@@ -1,156 +1,195 @@
<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 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]="'请选择'" [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': '240px', 'height': '240px', 'overflow-y' :'auto'}">
                                    <nz-tree [nzNodes]="sensorOptions" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree>
                                </div>
                            </ng-template>
                        </nz-popover>
                    </div>
                </div>
            </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>
            <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  [ngStyle]="{'display':isCollapse ? 'none' : 'block' }" 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 nz-col >
                        <nz-cascader [class.class123]="true" (nzChange)="setAreaCodes($event)" (nzLoad)="areaLazyLoad($event)" [nzPlaceHolder]="'选择 省/市/区'"
                            [nzAllowClear]="false" [nzChangeOnSelect]="true" [(ngModel)]="_areas" name="_areas">
                    <div nz-form-control class="flex-1">
                        <nz-cascader [class.class123]="true"
                            (nzLoad)="areaLazyLoad($event)" [nzPlaceHolder]="'选择 省/市/区'" (nzSelectionChange) = "setAreasData($event)"
                            [nzAllowClear]="false" [nzChangeOnSelect]="true" [ngModel]="_areas" name="areasData">
                        </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 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 nz-col>
                        <nz-select name="_monitorPoint" style="width: 100%;" [ngModel]="_monitorPoint" (ngModelChange)="setMonitorPoint($event)"
                            nzAllowClear [nzPlaceHolder]="'选择 监控点(输入名称搜索)'" nzShowSearch (nzSearchChange)="monitorPointsChange($event)"
                    <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 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 *ngFor="let option of monitorPointOptions" [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>
            <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-col [nzMd]="{span:6, offset:3}" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col>
                            <span>&nbsp;</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 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>
        </div>      
    </form>
</nz-card>
</form>
<nz-card [nzBordered]="true">
<div echarts [options]="chartOption" [loading]="chartLoading" class="line-chart" (chartInit)="onChartInit($event)"></div>
<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>
        <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>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <nz-table #nzTable [nzScroll]="{ x:tableWidth,y:360 }" [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-focus-bgcolor': 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>&nbsp;<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-box-shadow': sensorNameScrollLeft>2 }"  [ngStyle]="{'position': 'absolute', 'z-index':'99','top': '24px'}">
                    <nz-table #nzTable  [nzDataSource]="grid.data" [nzIsPagination]="false">
                            <thead nz-thead>
                                    <tr>
                                        <th nz-th [nzWidth]="'160px'" [ngStyle]="{'text-align':'center'}">
                                            <span>监测项目</span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody nz-tbody>
                                    <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-focus-bgcolor': 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>&nbsp;<i *ngIf="chartSelectedIndex==i"  class="anticon anticon-line-chart"></i></span>
                                        </td>
                                    </tr>
                                </tbody>
                    </nz-table>
                </div>
        </nz-card>
    </div>
</div>