grid 冻结列 上下滚动实现

fengxiang

2018-03-25 4e4cae085739fd5e72e047d368351bfd6ceaf4e3

 src/app/routes/analysis/query/query.component.ts

@@ -1,92 +1,645 @@
import { getService } from './../../../../testing/common.spec';
import { LineChartCriteria, TimePeriod } from './../../../business/entity/data';
import { PageBean } from '@business/entity/grid';
import { Sensor } from '@business/entity/data';
import { SensorsService } from '@business/services/http/sensors.service';
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { TimeUnits } from '@business/enum/types.enum';
import { Sensor, Device, DataCondition, MonitorPoint, Organization, LineChartCriteria, PairData } from '@business/entity/data';
import { TimeUnits, AreaRange, ResultCode } from '@business/enum/types.enum';
import { SensorsService } from '@business/services/http/sensors.service';
import { PageBean, ResultBean, Grid } from '@business/entity/grid';
import { NzTreeComponent } from 'ng-tree-antd';
import * as moment from 'moment';
import { ExampleService } from '@business/services/util/example.service';
import { DeviceService } from '@business/services/http/device.service';
import { environment } from '@env/environment';
import { CascaderOption } from 'ng-zorro-antd/src/cascader/nz-cascader.component';
import { AreacodeService } from '@business/services/http/areacode.service';
import { MonitorPointService } from '@business/services/http/monitor-point.service';
import { NzMessageService } from 'ng-zorro-antd';
import * as $ from 'jquery';
import { DateService } from '@business/services/util/date.service';
import { zip } from 'rxjs/observable/zip';

@Component({
  selector: 'app-query',
  templateUrl: './query.component.html',
  styleUrls: [ './query.component.less' ]
  styleUrls: ['./query.component.less']
})
export class QueryComponent implements OnInit {
    public sensorList:Sensor[];
    public timeUnits:{ label: string, value: TimeUnits, disabled: boolean }[] = [];
    // public timePeriod:TimePeriod = {startTime:null,endTime:null};
    public lineChartCriteria:LineChartCriteria = {sensorKey:'e1', timePeriod:{startTime:null,endTime:null},dataConditions:[]};
    // aqi六项排序
    private aqiSort = {
        e1: 1,
        e2: 2,
        e10: 3,
        e11: 4,
        e15: 5,
        e16: 6
    };
    public tableWidth = 2800;
    // private tableWidthOption = {
    //     'MONTH': 1400,
    //     'DAY': 2800,
    //     'HOUR': 2100,
    //     'MINUTE': 5000
    // };
    public expandForm: boolean; // 搜索区 展开控制
    // public sensors: any[] = [];
    public sensorOptions: any[] = [];    
    /**
     * 数据类型，下拉列表数据
     * 注意，年度类型，对应查询数据单位为月，以此类推
     * @memberof QueryComponent
     */
    public timeUnitOptions = [
        {label: '某年', value: TimeUnits.MONTH},
        {label: '某月', value: TimeUnits.DAY},
        {label: '某日', value: TimeUnits.HOUR},
        {label: '某时', value: TimeUnits.MINUTE},
    ];
    public timeUnit: {label: string, value: TimeUnits} = this.timeUnitOptions[2];
    // 默认时间为昨天，今天无数据
    public actualTime: Date = moment().subtract(1, 'days').toDate();
    public actualYearOptions: number [];
    public isCollapse = false;
    public isChartCollapse = false;
    // 显示使用
    public _areas: { label: string, value: string }[] = new Array();
    public  grid: Grid<{sensor: Sensor, data: string [], weight?: number}> = new Grid();
    // 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方式,暂存监测项目
     private _sensors: {[key: string]: string} = {};
     private _sensorNames: string;     
     get sensorNames(): string {
         return this._sensorNames;
     }
     public toggleCollapse() {
         this.isCollapse = !this.isCollapse;
     }
     public toggleChartCollapse() {
          // 打开的时候
         if (this.isChartCollapse && !!this.echartsIntance) {
            this.reloadChart();
            this.switchSensor(this.chartSelectedIndex);
            // this.chartLoading = false;
         }        
         this.isChartCollapse = !this.isChartCollapse;
     }
     public deviceOptions: Device[] = [];
     public dataCondition: DataCondition = {areaRangeId: 320583, areaRange: AreaRange.AREA };

    get lineChartSensorName():String{
        return !!this.sensorList?this.sensorList.find( sensor => sensor.sensorKey==this.lineChartCriteria.sensorKey).name:null;
    }
    private _timePeriodUnitValue:TimeUnits=TimeUnits.DAY;
    public set timePeriodUnitValue(value:TimeUnits){
        this._timePeriodUnitValue = value;
        switch(value){
            //YYYY-MM-DD HH:mm:ss
            case TimeUnits.MONTH: 
            this.timeType.dateFormat ="YYYY-MM";
            this.timeType.mode = "month";
            this.timeType.timePickerOption = null;
            break;
            case TimeUnits.DAY: 
            this.timeType.dateFormat ="YYYY-MM-DD";
            this.timeType.mode = "day";
            this.timeType.timePickerOption = null;
            break;
            case TimeUnits.HOUR: 
            this.timeType.dateFormat ="YYYY-MM-DD HH 时";
            this.timeType.timePickerOption = {nzFormat:"HH:mm"};
            break;
     public monitorPointOptions: MonitorPoint[] = [];
    
     get actualYear(): number {
         return this.actualTime.getFullYear();
     }
     set actualYear(year) { 
         this.actualTime.setFullYear(Number(year));
     }
     monitorPointsChange(text?: string) {
        const pageBean: PageBean = { pageIndex: 0, pageSize: 20 };
        const example = new ExampleService();
        let areaName = '';
        switch (this._areas.length) {
            case 1:
                areaName = 'provinceCode'; break;
            case 2:
                areaName = 'cityCode'; break;
            case 3:
                areaName = 'areaCode'; break;
        }
    }
    public timeType:{dateFormat?:string,mode?:'year'|'month'|'day',timePickerOption?:{}}
    = {dateFormat:"YYYY-MM-DD",mode:"day",timePickerOption:null};
    get timePeriodUnitName():String {
        return this.timeUnits.find( item => item.value == this._timePeriodUnitValue).label;
    }
    constructor(
        private sensorsService:SensorsService
    ) {
        this.initPage();
    }
    private initPage(){
        this.sensorsService.getPagingList(null,null).subscribe(
            (res: PageBean)  => {
                this.sensorList = res.data;
        if (!!text) {
            example.or().andLike({ name: 'name', value: '%' + text + '%' })
                .andEqualTo({ name: areaName, value:  Number(this._areas.slice(-1).pop().value) });
        } else {
            example.or()
                .andEqualTo({ name: areaName, value:  Number(this._areas.slice(-1).pop().value) });
        }
        this.monitorPointService.getPageByExample(pageBean, example).subscribe(
            (res: PageBean) => {
                if (!!res && !!res.data) {
                    this.monitorPointOptions = res.data;
                }
            }
        );
        this.timeUnits.push(
            {label:'年',value:TimeUnits.YEAR,disabled:false},
            {label:'月',value:TimeUnits.MONTH,disabled:false},
            {label:'日',value:TimeUnits.DAY,disabled:false},
            {label:'时',value:TimeUnits.HOUR,disabled:false},
            {label:'分',value:TimeUnits.MINUTE,disabled:false}
    }
     devicesChange(text?: string) {
        if (!!this.monitorPoint) {
            const example = new ExampleService();
            if (!!text) {
                example.or().andEqualTo({ name: 'monitorPointId', value: this.monitorPoint.id })
                .andLike({name: 'text', value: text});
            }else {
                example.or().andEqualTo({ name: 'monitorPointId', value: this.monitorPoint.id });
            }
            this.deviceService.getPageByExample(null, example).subscribe(
                (res: PageBean) => {
                    if (!!res && !!res.data) {
                        this.deviceOptions = res.data;
                    }
                }
            );
        } else {
            this.deviceOptions = [];
        }
    }
    /**
     * 报表属性
     */
    public chartLoading: boolean;
    public chartOption;
    public echartsIntance;
    public chartSelectedIndex = 0;
    public onChartInit(e): void {
        this.echartsIntance = e;
    }
    constructor(        
    private http: _HttpClient,
    private sensorsService: SensorsService,
    private deviceService: DeviceService,
    private areacodeService: AreacodeService,
    private monitorPointService: MonitorPointService,
    private msg: NzMessageService,
    private dateService: DateService,
    ) { }    
    ngOnInit() {
        this.initPage();
    }
    private initPage() {
        this.sensorsService.getPagingList(null, null).subscribe(
            (res: PageBean) => {
                this.sensorOptions.push({id: -1, name: '全部', isExpanded: true, children: res.data});
            }
        );
        this.actualYearOptions = this.newArray(this.actualYear - 9, 10).map(item => Number(item)).reverse();
                // 省市区 初始值
                this.http.get(environment.SERVER_BASH_URL + 'organization/get-my-org').subscribe(
                    (res: ResultBean<Organization>) => {
                        if (res.code === ResultCode.SUCCESS) {
                            const org = res.data;
                            const areas = new Array(3);
                            if (!!org.areaNames) {                              
                                const areaNames = org.areaNames;
                                Object.keys(areaNames).forEach(
                                    key => {
                                        const value = areaNames[key];
                                        if ( value != null) {
                                            switch (key) {
                                                case 'provinceName' :
                                                areas[0] = {label : value, value: org.provinceCode }; break;
                                                case 'cityName' :
                                                areas[1] = {label : value, value: org.cityCode }; break;
                                                case 'areaName' :
                                                areas[2] = {label : value, value: org.areaCode }; break;
                                            }
                                        }
                                    }
                                );                               
                            } else {
                                for (let i = 0; i < areas.length; i++) {
                                    switch (i) {
                                        case  0:
                                        areas[0] = {label : '江苏省', value: 320000 }; break;
                                        case  1:
                                        areas[1] = {label : '苏州市', value: 320500 }; break;
                                        case  2:
                                        areas[2] = {label : '昆山市', value: 320583 }; break;
                                    }
                                }
                            }
                            this.setAreasData(areas);
                        }
                    }
                );
    }
    public areaLazyLoad(event: { option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void }) {
        const index = event['index'];
        const option = event.option;
        switch (index) {
            case -1:
                this.areacodeService.getProvinces().subscribe(
                    (res: { label: string, value: string }[]) => {
                        event.resolve(res);
                    }
                ); break;
            case 0:
                this.areacodeService.getCities(option.value).subscribe(
                    (res: { label: string, value: string }[]) => {
                        event.resolve(res);
                    }
                ); break;
            case 1:
                this.areacodeService.getAreas(option.value).subscribe(
                    (res: { label: string, value: string }[]) => {
                        event.resolve(res);
                    }
                ); break;
        }
    }
    // 第一步，省市区 赋值变 并 改变监控点选项
    public  setAreasData(areas: {label: string, value: string}[] ) {
        let isChanged = false;
        isChanged = areas.some( (item , index: number) => {
            // this._areas[index] 为null 改变 监控点选项
            return this._areas.length < areas.length 
            || !this._areas[index] 
            || this._areas[index].value !== item.value;
        });
        if ( isChanged ) {
            this._areas = areas;
            this.monitorPoint = null;
            this.monitorPointsChange();
        }
    }

     // 第二步 设置 监控点, 值变 改变设备选项，值为null 置空设备选项和设备值
     public _monitorPoint: MonitorPoint;
     get monitorPoint(): MonitorPoint {
         return this._monitorPoint;
     }
     set monitorPoint(value) {        
        if (!!value) {
              // 值变 改变设备选项
             if (this._monitorPoint !== value) {
                this._monitorPoint = value; // 此处不能提前也不能放后，设备改变要调用
                this._device = null; // 设备值清空
                this.devicesChange();
             }
             // 值为null 置空设备选项和设备值
        } else {
             this._monitorPoint = null;
             this.device = null;
             this.deviceOptions = null;
        }
        
     }
    // 第三步 设置 监控点
    public _device: Device;
    set device(val: Device) {
        this._device = val;

    }
    get device(): Device {
        return this._device;
    }
   

    /**
     * 获取 传感器名称
     * 
     * @readonly
     * @type {string}
     * @memberof QueryComponent
     */  
    public onSensorSelect(event): void {
        const data = event.node.data;
        if (data.id === -1 && data.halfChecked === false) {
            if (!!data.checked) {
                this.sensorOptions[0].children.forEach(
                    sensor => {
                        this._sensors [sensor.id] = sensor.sensorKey;
                    }
                );
            } else {
                this._sensors = {};
            }
        }else {
             if (!!data.checked) {
                this._sensors [data.id] = data.sensorKey;
             }else {
                delete this._sensors[data.id];
             }
        }
        this._sensorNames = '';
        this.sensorOptions[0].children.forEach(
            sensor => {
               const hasSensor = Object.keys(this._sensors).some(
                     id => Number(id) === Number(sensor.id)
                );
                if (hasSensor) {
                    this._sensorNames += sensor.name + ',';
                }
            }
        );
    }
    ngOnInit() {
    }
    get _isSameDay() {
        console.log(this.lineChartCriteria.timePeriod.startTime && this.lineChartCriteria.timePeriod.endTime && moment(this.lineChartCriteria.timePeriod.startTime).isSame(this.lineChartCriteria.timePeriod.endTime, 'day'));
        return this.lineChartCriteria.timePeriod.startTime && this.lineChartCriteria.timePeriod.endTime && moment(this.lineChartCriteria.timePeriod.startTime).isSame(this.lineChartCriteria.timePeriod.endTime, 'day');
    }
    _disabledStartDate = (startValue) => {
        if (!startValue || !this.lineChartCriteria.timePeriod.endTime) {
          return false;
    public setTimeUnit(val: {label: string, value: TimeUnits} ) {       
        switch (val.value) {
            // YYYY-MM-DD HH:mm:ss
            case TimeUnits.MONTH:
            this._timeType.dateFormat = 'YYYY年';
                // this._timeType.dateFormat = 'YYYY-MM';
                // this._timeType.mode = 'month';                
                // this._timeType.endShowTime = null;
                break;
            case TimeUnits.DAY:
                this._timeType.dateFormat = 'YYYY年MM月';
                this._timeType.mode = 'month';
                this._timeType.showTime = false;
                break;
            case TimeUnits.HOUR:
                this._timeType.dateFormat = 'YYYY年MM月DD日';
                this._timeType.mode = 'day';
                this._timeType.showTime = false;
                break;
            case TimeUnits.MINUTE:
                this._timeType.dateFormat = 'YYYY年MM月DD日 HH时';
                this._timeType.mode = 'day';
                this._timeType.showTime = {
                    nzHideDisabledOptions: true,
                    nzDisabledHours: () => {
                        return [];
                    },
                    nzDisabledMinutes: (h) => {
                        return this.newArray(60).slice(1).map(
                            item => Number(item)
                        );
                    },
                    nzDisabledSeconds: () => {
                        return this.newArray(60).slice(1).map(
                            item => Number(item)
                        );
                    }
                };
                break;
        }
        console.log(startValue);
        console.log("getTime:"+startValue.getTime());
        let _startValue = moment(startValue,this.timeType.dateFormat);
        console.log("valueOf:"+_startValue.valueOf());
        return _startValue.valueOf() > this.lineChartCriteria.timePeriod.endTime;
      };
      _disabledEndDate = (endValue) => {
        if (!endValue || !this.lineChartCriteria.timePeriod.startTime) {
          return false;
    }
   private newArray = (startOrLen: number, len?: number, prefix?: string, suffix?: string) => {
        const result = [];
        const s = !!len ? startOrLen : 0;
        len = !!len ? len : startOrLen;
        suffix = !!suffix ? suffix : '';
        prefix = !!prefix ? prefix :  '';
        for (let i = s; result.length < len; i++) {
            result.push(prefix + i + suffix);
        }
        return endValue.getTime() < this.lineChartCriteria.timePeriod.startTime;
        return result;
    }
    public loadGrid(): void {        
        // 数据检查
        const sensors = Object.values(this._sensors);
        if ( sensors.length === 0 ) {
            this.msg.error(' 监测项目 不能为空');
            return ;
        }
       this.grid.loading = true;
       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;
       // 设置区域值
       const mptValue: number = !!this._monitorPoint ? this._monitorPoint.id : null;
       const devValue: number = !!this._device ? this._device.id : null;
       const areasData = [ devValue, mptValue, Number(this._areas.slice(-1).pop().value)];
       for (let index = 0 ; index < areasData.length ; index++) {
            const item = areasData[index];
            if ( item !== null ) {
                this.dataCondition.areaRangeId = item;
                switch (index) {
                    case 0: this.dataCondition.areaRange = AreaRange.DEVICE; break;
                    case 1: this.dataCondition.areaRange = AreaRange.MONITORPOINT; break;
                    case 2: 
                    switch (this._areas.length ) {
                      case 1: this.dataCondition.areaRange = AreaRange.PROVINCE; break;
                      case 2: this.dataCondition.areaRange = AreaRange.CITY; break;
                      case 3: this.dataCondition.areaRange = AreaRange.AREA; break;
                    }
                    break;
                }
                break;
            }
       }
       const dataConditions = [this.dataCondition];
       const lineChartCriteria: LineChartCriteria = {
        sensorKeys: sensors,
        timePeriod: {startTime: start , endTime: end, timeUnits: this.timeUnit.value },
        dataConditions: dataConditions
      };
      const timePeriod = lineChartCriteria.timePeriod;
      switch (timePeriod.timeUnits) {
          case TimeUnits.MONTH:
          this.grid.columns = this.newArray(1, 12, null, '月').map(
               item => {
                   return {text: item};
               }
          ); break;
          case TimeUnits.DAY:
          const mo = moment(lineChartCriteria.timePeriod.startTime);
          const days = mo.endOf('month').date();
          this.grid.columns = this.newArray(1, days, null, '日').map(
               item => {
                   return {text: item};
               }
          ); break;
          case TimeUnits.HOUR:
          this.grid.columns = this.newArray(0, 24, null, '时').map(
            item => {
                return {text: item};
            }
          ); break;
          case TimeUnits.MINUTE:
          this.grid.columns = this.newArray(0, 60, null, '分').map(
            item => {
                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) {
              const data =  res.data;
              if (!!data) {
                const sensorKeys = Object.keys(data);
                // aqi六项置前，其他是有数据项 向前。
                sensorKeys.forEach(
                    key => {
                       const sensor = (<Array<Sensor>>this.sensorOptions[0].children).
                       find(item => {
                           return item.sensorKey === key;
                       });
                       let weight = this.aqiSort[key];
                       weight = !!weight ? weight : 101;
                    //    this.gridSensors.push(sensor);
                       const sensorData = data[key][0].map(
                           pair => {
                                if (weight > 100) {
                                    // pair.value 为null,权重后移
                                    weight = !!pair.value ? weight : weight + 1;
                                }
                                // 四舍五入，保留2位
                                return !!pair.value ? String(Math.round(pair.value * 100) / 100) : '-';
                           }
                       );
                       this.grid.data.push({sensor: sensor, data: sensorData, weight: weight});
                    }
               );
              }
              this.grid.data.sort( (a, b) =>  a.weight - b.weight );
              this.grid.loading = false;
              this.switchSensor(0);
           }
        }
      );
        $('.ant-table-body').scroll(
            () => {
                this.sensorNameScrollLeft =  $('.ant-table-body').scrollLeft();
                this.sensorNameScrollTop =   -$('.ant-table-body').scrollTop();
            }
        );
    }
    private reloadChart(): void {
        const  timeList = this.grid.columns.map(item => item.text);  
         if (!!this.echartsIntance) {
             this.chartOption = null;
             this.echartsIntance.clear();
         }
        //  let series = null;
        //  if ( this.chartSelectedIndex < this.grid.data.length ) {
        //     series = [{type: 'line', data: this.grid.data[this.chartSelectedIndex]}];
        //  }
         
         this.initOpton({ xAxis : [{data : timeList}]});
         this.chartLoading = true;
      }
      private initOpton(opt: {[key: string]: object}) {
         const defaultOption = {
            title: {
                left: 'center'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: []
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
            ]
        };
        $.extend(true, defaultOption, opt);
        this.chartOption = defaultOption;
      }
    public get sensorUnit() {
        return this.grid.data[this.chartSelectedIndex].sensor.unit;
    }
    // 报表标题暂存 防止联动
    public _chartTitleTemp = '';
    public reloadChartTitle(): void {
        const names = ['辖区', '地区', '时间', '项目'];
        switch ( this.dataCondition.areaRange ) {
            case AreaRange.MONITORPOINT :
            names[0] = '监控点';
            names[1] = this._monitorPoint.name; break;          
            case AreaRange.DEVICE :
              names[0] = '设备';
            names[1] = this._device.name; break;
            default :
            names[0] = '';
            names[1] = this._areas.map( item => item.label).join('/'); 
            break;
        }
        names[2] = moment(this.actualTime).format(this._timeType.dateFormat);
        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._chartTitleTemp
                },
                yAxis : [
                    {
                        name : '单位：' + this.sensorUnit
                    }
                ],
                series: series
            });
           this.chartLoading = false; 
        }, 600); 
    }
    private getPeriodDate(value: Date , type?: 'start'|'end' ): Date {
        let month = 0;
        let day = 1;
        let hour = 0;
        let minute = 0;
        let second = 0; 
        let millisecond = 0;
        if ('end' === type) {
            month = 11;
            day = 31;
            hour = 23;
            minute = 59;
            second = 59;
            millisecond = 999;
        }
        const mo = moment(value);
        switch ( this.timeUnit.value ) {
            case TimeUnits.MONTH:
            mo.month(month).date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.DAY:
            mo.date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.HOUR:
            mo.hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.MINUTE:
            mo.minute(minute).second(second).millisecond(millisecond); break;
            // case TimeUnits.MINUTE:
            // mo.second(second).millisecond(millisecond); break;
        }
        return mo.toDate();
    }
    public sensorTableFocusIndex = -1;
    public sensorTableFocus(index) {
        this.sensorTableFocusIndex = index;
    }
    public sensorTableBlur(index) {
        this.sensorTableFocusIndex = -1;
    }
}