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 | 309 +++++++++++++++++++++++++++++----------------------
1 files changed, 174 insertions(+), 135 deletions(-)
diff --git a/src/app/routes/analysis/query/query.component.html b/src/app/routes/analysis/query/query.component.html
index ba25972..2d511a8 100644
--- a/src/app/routes/analysis/query/query.component.html
+++ b/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> </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> <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> <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