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.less | 13 ++++++
src/app/routes/analysis/query/query.component.ts | 37 +++++++++++-------
src/app/routes/analysis/query/query.component.html | 29 +++++++++++++-
3 files changed, 62 insertions(+), 17 deletions(-)
diff --git a/src/app/routes/analysis/query/query.component.html b/src/app/routes/analysis/query/query.component.html
index 9e8b95f..2d511a8 100644
--- a/src/app/routes/analysis/query/query.component.html
+++ b/src/app/routes/analysis/query/query.component.html
@@ -142,7 +142,7 @@
<ng-template #nzFixedHeader>
<thead nz-thead>
<tr>
- <th nz-th [nzWidth]="'160px'" [ngStyle]="{'position': 'relative','text-align': 'center', 'left':sensorNameScrollLeft}">
+ <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}">
@@ -153,8 +153,10 @@
</ng-template>
<tbody nz-tbody>
<tr nz-tbody-tr style="cursor:pointer;" *ngFor="let row of nzTable.data,index as i"
- (click) = "switchSensor(i)">
- <td nz-td class='sensor-name' [ngStyle]="{'background-color': '#FFF','position': 'relative','text-align': 'center', 'left':sensorNameScrollLeft}">
+ (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}">
@@ -167,6 +169,27 @@
</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>
diff --git a/src/app/routes/analysis/query/query.component.less b/src/app/routes/analysis/query/query.component.less
index 8f3c723..44ef315 100644
--- a/src/app/routes/analysis/query/query.component.less
+++ b/src/app/routes/analysis/query/query.component.less
@@ -1,3 +1,16 @@
.line-chart {
height: 100%;
}
+.table-tr-focus-bgcolor {
+ background-color: #ecf6fd;
+}
+.table-tr-bgcolor-focus {
+ background-color: #ecf6fd;
+}
+.table-tr-bgcolor-blur {
+ background-color: #fff;
+}
+.table-scroll-box-shadow {
+ -moz-box-shadow: 4px 0 2px rgba(0, 0, 0, 0.1); /* ������ Firefox */
+ box-shadow: 4px 0 2px rgba(0, 0, 0, 0.1);
+}
diff --git a/src/app/routes/analysis/query/query.component.ts b/src/app/routes/analysis/query/query.component.ts
index 403f705..ec9e65e 100644
--- a/src/app/routes/analysis/query/query.component.ts
+++ b/src/app/routes/analysis/query/query.component.ts
@@ -33,12 +33,12 @@
e16: 6
};
public tableWidth = 2800;
- private tableWidthOption = {
- 'MONTH': 1400,
- 'DAY': 2800,
- 'HOUR': 2100,
- 'MINUTE': 5000
- };
+ // private tableWidthOption = {
+ // 'MONTH': 1400,
+ // 'DAY': 2800,
+ // 'HOUR': 2100,
+ // 'MINUTE': 5000
+ // };
public expandForm: boolean; // ��������� ������������
// public sensors: any[] = [];
public sensorOptions: any[] = [];
@@ -64,7 +64,7 @@
public grid: Grid<{sensor: Sensor, data: string [], weight?: number}> = new Grid();
// public grid.data: {sensor: Sensor, data: string [], weight?: number} [] = [];
// ������������������������������������������
- public sensorNameScrollLeft = '0px';
+ public sensorNameScrollLeft = 0;
@ViewChild(NzTreeComponent) private tree: NzTreeComponent;
private _timeType: {showTime: boolean|{[key: string]: Function|boolean}, mode: 'month' | 'day', dateFormat: string } = {showTime: false, mode: 'day', dateFormat: 'YYYY���MM���DD���'};
// ���key-value������,������������������
@@ -381,14 +381,12 @@
return ;
}
this.grid.loading = true;
- this.sensorNameScrollLeft = '0px';
+ this.sensorNameScrollLeft = 0;
this.grid.data = [];
const start: Date = this.getPeriodDate(this.actualTime , 'start');
const end: Date = this.getPeriodDate(this.actualTime , 'end');
this.dataCondition['actualTime'] = null;
this.dataCondition['timeUnits'] = this.timeUnit.value;
- // ���������������������������������
- this.tableWidth = this.tableWidthOption[this.timeUnit.value];
// ���������������
const mptValue: number = !!this._monitorPoint ? this._monitorPoint.id : null;
const devValue: number = !!this._device ? this._device.id : null;
@@ -445,8 +443,12 @@
return {text: item};
}
); break;
- }
+ }
+ // ���������������������������������
+ this.tableWidth = this.grid.columns.length * 80 + 160;
this.reloadChart();
+ // ������������
+ this.grid.data = [];
this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', lineChartCriteria).subscribe(
(res: ResultBean<{[key: string]: Array<Array<PairData>>}>) => {
if (res.code === 1) {
@@ -469,7 +471,8 @@
// pair.value ���null,������������
weight = !!pair.value ? weight : weight + 1;
}
- return !!pair.value ? String(Math.round(pair.value)) : '-';
+ // ���������������������2���
+ return !!pair.value ? String(Math.round(pair.value * 100) / 100) : '-';
}
);
this.grid.data.push({sensor: sensor, data: sensorData, weight: weight});
@@ -484,7 +487,7 @@
);
$('.ant-table-body').scroll(
() => {
- this.sensorNameScrollLeft = $('.ant-table-body').scrollLeft() + 'px';
+ this.sensorNameScrollLeft = $('.ant-table-body').scrollLeft();
}
);
}
@@ -622,7 +625,13 @@
}
return mo.toDate();
}
-
+ public sensorTableFocusIndex = -1;
+ public sensorTableFocus(index) {
+ this.sensorTableFocusIndex = index;
+ }
+ public sensorTableBlur(index) {
+ this.sensorTableFocusIndex = -1;
+ }
}
--
Gitblit v1.8.0