数据查看功能

fengxiang

2018-03-20 564d6f817cd229571ad633af2105cb2d4f78c66e

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

@@ -14,10 +14,12 @@
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';

@Component({
  selector: 'app-query',
  templateUrl: './query.component.html'
  templateUrl: './query.component.html',
  styleUrls: ['./query.component.less']
})
export class QueryComponent implements OnInit {
    public expandForm: boolean; // 搜索区 展开控制
@@ -42,6 +44,8 @@
    public _areas: { label: any, value: any[] };
    public  grid: Grid<any> = new Grid();
    public gridSensorNames: string[] = [];
    //  样式控制，设备名称列冻结偏移
    public sensorNameScrollLeft = '0px';
     @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方式,暂存监测项目
@@ -111,6 +115,16 @@
            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,
@@ -118,16 +132,10 @@
    private areacodeService: AreacodeService,
    private monitorPointService: MonitorPointService,
    private msg: NzMessageService,
    private dateService: DateService,
    ) { }    
    ngOnInit() {
        this.initPage();
        $('.ant-table-body').on(
            'click', 
            function() {
                alert();
                console.log( $('.ant-table-body').scrollLeft());
            }
        );
    }
    private initPage() {
        this.sensorsService.getPagingList(null, null).subscribe(
@@ -368,6 +376,7 @@
            return ;
        }
       this.grid.loading = true;
       this.sensorNameScrollLeft = '0px';
       this.grid.data = [];
       this.gridSensorNames = [];
       const start: Date = this.getPeriodDate(this.actualTime , 'start');
@@ -409,10 +418,11 @@
            }
          ); break;
      }      
      this.reloadChart();
      this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', lineChartCriteria).subscribe(
        (res: ResultBean<{[key: string]: Array<Array<PairData>>}>) => {
           if (res.code === 1) {
              const series = [];
              let series = [];
              const data =  res.data;
              if (!!data) {
                const sensorKeys = Object.keys(data);
@@ -433,9 +443,93 @@
               );
              }
              this.grid.loading = false;
              this.chartSelectedIndex = 0;
              this.reloadChart();
              setTimeout(() => {
                                // 设置报表数据           
              series = [{type: 'line', data: this.grid.data[0]}];
              this.echartsIntance.setOption({
                series: series
              });
             this.chartLoading = false;
              }, 10);
           }
        }
   );
      );
        $('.ant-table-body').scroll(
            () => {
                this.sensorNameScrollLeft =  $('.ant-table-body').scrollLeft() + 'px';
            }
        );
    }
    private reloadChart(): void {
        const  timeList = this.grid.columns.map(item => item.text);
        const  title = this.gridSensorNames[this.chartSelectedIndex];    
        //  if (!!this.echartsIntance) {
        //      this.chartOption = null;
        //      this.echartsIntance.clear();
        //  }
         this.initOpton({title: title, xData: timeList});
         this.chartLoading = true;
      }
      private initOpton(opt: {title: string, xData: string[]}) {
        this.chartOption = {
          title: {
              text: opt.title
          },
          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,
                  data : opt.xData
              }
          ],
          yAxis : [
              {
                  type : 'value'
              }
          ],
          series : [
          ]
      };
    }
    public switchSensor(index: number): void {
        this.chartSelectedIndex = index;
        this.chartLoading = true; 
        const  title = this.gridSensorNames[this.chartSelectedIndex]; 
        setTimeout(() => {
            const series = [{type: 'line', data: this.grid.data[index]}];
            this.echartsIntance.setOption({
                title: {
                        text: title
                },
              series: series
            });
           this.chartLoading = false; 
        }, 600);
    }
    private getPeriodDate(value: Date , type?: 'start'|'end' ): Date {
        let month = 0;
@@ -467,6 +561,7 @@
        }
        return mo.toDate();
    }

}