| src/app/routes/analysis/query/query.component.html | ●●●●● patch | view | raw | blame | history | |
| src/app/routes/analysis/query/query.component.less | ●●●●● patch | view | raw | blame | history | |
| src/app/routes/analysis/query/query.component.ts | ●●●●● patch | view | raw | blame | history |
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> 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); 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 : [ {
