| 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
@@ -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> 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); } 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; } }
