grid 冻结列 上下滚动实现

fengxiang

2018-03-25 4e4cae085739fd5e72e047d368351bfd6ceaf4e3

 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 : [
                    {