From ba6f868ccc79328594f42d85ea34ca254e5d51d8 Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Sat, 24 Mar 2018 23:05:43 +0800 Subject: [PATCH] grid 冻结 功能 延迟bug修复 --- src/app/routes/analysis/query/query.component.html | 62 +++++++++++++++++++++++++------ 1 files changed, 50 insertions(+), 12 deletions(-) diff --git a/src/app/routes/analysis/query/query.component.html b/src/app/routes/analysis/query/query.component.html index 7f0441c..2d511a8 100644 --- a/src/app/routes/analysis/query/query.component.html +++ b/src/app/routes/analysis/query/query.component.html @@ -17,7 +17,7 @@ </ng-template> </nz-input> <ng-template #nzTemplate> - <div [ngStyle]="{'width': '200px', 'height': '300px', 'overflow-y' :'auto'}"> + <div [ngStyle]="{'width': '240px', 'height': '240px', 'overflow-y' :'auto'}"> <nz-tree [nzNodes]="sensorOptions" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree> </div> </ng-template> @@ -54,7 +54,7 @@ <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 *ngFor="let option of actualYearOptions" [nzLabel]="option + ' ���'" [nzValue]="option"> </nz-option> </nz-select> </div> @@ -62,16 +62,16 @@ </div> </div> </div> - <div *ngIf="!isCollapse" nz-row [nzGutter]="24"> + <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 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 [class.class123]="true" + (nzLoad)="areaLazyLoad($event)" [nzPlaceHolder]="'������ ���/���/���'" (nzSelectionChange) = "setAreasData($event)" + [nzAllowClear]="false" [nzChangeOnSelect]="true" [ngModel]="_areas" name="areasData"> </nz-cascader> </div> </div> @@ -121,14 +121,28 @@ </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> + <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:5000,y:400 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading"> + <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]="'80px'" > + <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}"> @@ -138,20 +152,44 @@ </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> + <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> <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[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 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> <i *ngIf="chartSelectedIndex==i" class="anticon anticon-line-chart"></i></span> + </td> + </tr> + </tbody> + </nz-table> + </div> </nz-card> </div> </div> -- Gitblit v1.8.0