grid 冻结列 上下滚动实现

fengxiang

2018-03-25 4e4cae085739fd5e72e047d368351bfd6ceaf4e3

 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,8 @@
    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;
    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方式,暂存监测项目
@@ -79,6 +80,7 @@
     public toggleChartCollapse() {
          // 打开的时候
         if (this.isChartCollapse && !!this.echartsIntance) {
            this.reloadChart();
            this.switchSensor(this.chartSelectedIndex);
            // this.chartLoading = false;
         }        
@@ -261,6 +263,7 @@
              // 值变 改变设备选项
             if (this._monitorPoint !== value) {
                this._monitorPoint = value; // 此处不能提前也不能放后，设备改变要调用
                this._device = null; // 设备值清空
                this.devicesChange();
             }
             // 值为null 置空设备选项和设备值
@@ -320,8 +323,7 @@
            }
        );
    }
    public setTimeUnit(val: {label: string, value: TimeUnits} ) {
        this.tableWidth = this.tableWidthOption[val.value];
    public setTimeUnit(val: {label: string, value: TimeUnits} ) {       
        switch (val.value) {
            // YYYY-MM-DD HH:mm:ss
            case TimeUnits.MONTH:
@@ -381,7 +383,7 @@
            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');
@@ -443,8 +445,14 @@
                return {text: item};
            }
          ); break;
      }      
      }   
        // 设置表格宽度，要在此处
        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(
        (res: ResultBean<{[key: string]: Array<Array<PairData>>}>) => {
           if (res.code === 1) {
@@ -467,7 +475,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});
@@ -482,7 +491,8 @@
      );
        $('.ant-table-body').scroll(
            () => {
                this.sensorNameScrollLeft =  $('.ant-table-body').scrollLeft() + 'px';
                this.sensorNameScrollLeft =  $('.ant-table-body').scrollLeft();
                this.sensorNameScrollTop =   -$('.ant-table-body').scrollTop();
            }
        );
    }
@@ -548,7 +558,9 @@
    public get sensorUnit() {
        return this.grid.data[this.chartSelectedIndex].sensor.unit;
    }
    public get chartTitle(): string {
    // 报表标题暂存 防止联动
    public _chartTitleTemp = '';
    public reloadChartTitle(): void {
        const names = ['辖区', '地区', '时间', '项目'];
        switch ( this.dataCondition.areaRange ) {
            case AreaRange.MONITORPOINT :
@@ -563,17 +575,23 @@
            break;
        }
        names[2] = moment(this.actualTime).format(this._timeType.dateFormat);
        names[3] = this.grid.data[this.chartSelectedIndex].sensor.name;
        return names.join('  ') + '  报表';
        if ( this.grid.data.length > this.chartSelectedIndex) {
            names[3] = this.grid.data[this.chartSelectedIndex].sensor.name;
        }        
        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.reloadChartTitle();      
        setTimeout(() => {
            const series = [{type: 'line', data: this.grid.data[index].data}];
            this.echartsIntance.setOption({
                title: {
                        text: this.chartTitle
                        text: this._chartTitleTemp
                },
                yAxis : [
                    {
@@ -615,7 +633,13 @@
        }
        return mo.toDate();
    }

    public sensorTableFocusIndex = -1;
    public sensorTableFocus(index) {
        this.sensorTableFocusIndex = index;
    }
    public sensorTableBlur(index) {
        this.sensorTableFocusIndex = -1;
    }
}