From 4e4cae085739fd5e72e047d368351bfd6ceaf4e3 Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Sun, 25 Mar 2018 12:20:40 +0800
Subject: [PATCH] grid 冻结列 上下滚动实现
---
src/app/routes/analysis/query/query.component.less | 8 +++++---
src/app/routes/analysis/query/query.component.ts | 18 +++++++++++++-----
src/app/routes/analysis/query/query.component.html | 12 ++++++------
3 files changed, 24 insertions(+), 14 deletions(-)
diff --git a/src/app/routes/analysis/query/query.component.html b/src/app/routes/analysis/query/query.component.html
index 2d511a8..89c2052 100644
--- a/src/app/routes/analysis/query/query.component.html
+++ b/src/app/routes/analysis/query/query.component.html
@@ -155,7 +155,7 @@
<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}">
+ [ngClass]="{'table-tr-bgcolor-focus': 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>
@@ -169,19 +169,19 @@
</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'}">
+ <div *ngIf="grid.data.length>0" [ngClass]="{'table-scroll':true,'table-scroll-box-shadow': sensorNameScrollLeft>2 }" [ngStyle]="{'position': 'absolute', 'top': '24px'}">
<nz-table #nzTable [nzDataSource]="grid.data" [nzIsPagination]="false">
- <thead nz-thead>
+ <thead nz-thead>
<tr>
- <th nz-th [nzWidth]="'160px'" [ngStyle]="{'text-align':'center'}">
+ <th nz-th [nzWidth]="'160px'" style="text-align:center; position:relative; display:block; z-index:9;">
<span>������������</span>
</th>
</tr>
</thead>
- <tbody nz-tbody>
+ <tbody nz-tbody [ngStyle]="{'top':sensorNameScrollTop+'px'}" style="position: relative; z-index:7; display:block;">
<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}"
+ [ngClass]="{'table-tr-bgcolor-focus': 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>
diff --git a/src/app/routes/analysis/query/query.component.less b/src/app/routes/analysis/query/query.component.less
index 44ef315..6a879b2 100644
--- a/src/app/routes/analysis/query/query.component.less
+++ b/src/app/routes/analysis/query/query.component.less
@@ -1,15 +1,17 @@
.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 {
+ z-index: 9;
+ height: 398px;
+ overflow: hidden;
+}
.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 ec9e65e..fca727c 100644
--- a/src/app/routes/analysis/query/query.component.ts
+++ b/src/app/routes/analysis/query/query.component.ts
@@ -65,6 +65,7 @@
// public grid.data: {sensor: Sensor, data: string [], weight?: number} [] = [];
// ������������������������������������������
public sensorNameScrollLeft = 0;
+ public sensorNameScrollTop = 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������,������������������
@@ -262,6 +263,7 @@
// ������ ������������������
if (this._monitorPoint !== value) {
this._monitorPoint = value; // ���������������������������������������������������������
+ this._device = null; // ���������������
this.devicesChange();
}
// ������null ������������������������������
@@ -447,6 +449,8 @@
// ���������������������������������
this.tableWidth = this.grid.columns.length * 80 + 160;
this.reloadChart();
+ // ������������������
+ this.reloadChartTitle();
// ������������
this.grid.data = [];
this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', lineChartCriteria).subscribe(
@@ -488,6 +492,7 @@
$('.ant-table-body').scroll(
() => {
this.sensorNameScrollLeft = $('.ant-table-body').scrollLeft();
+ this.sensorNameScrollTop = -$('.ant-table-body').scrollTop();
}
);
}
@@ -554,8 +559,8 @@
return this.grid.data[this.chartSelectedIndex].sensor.unit;
}
// ������������������ ������������
- public _chartTitleTemp: string;
- public get chartTitle(): string {
+ public _chartTitleTemp = '';
+ public reloadChartTitle(): void {
const names = ['������', '������', '������', '������'];
switch ( this.dataCondition.areaRange ) {
case AreaRange.MONITORPOINT :
@@ -573,17 +578,20 @@
if ( this.grid.data.length > this.chartSelectedIndex) {
names[3] = this.grid.data[this.chartSelectedIndex].sensor.name;
}
- return names.join(' ') + ' ������';
+ const title = names.join(' ') + ' ������';
+ if (title.trim() !== this._chartTitleTemp.trim()) {
+ this._chartTitleTemp = title;
+ }
}
public switchSensor(index: number): void {
this.chartSelectedIndex = index;
this.chartLoading = true;
- this._chartTitleTemp = this.chartTitle;
+ this.reloadChartTitle();
setTimeout(() => {
const series = [{type: 'line', data: this.grid.data[index].data}];
this.echartsIntance.setOption({
title: {
- text: this.chartTitle
+ text: this._chartTitleTemp
},
yAxis : [
{
--
Gitblit v1.8.0