数据查看功能

fengxiang

2018-03-20 564d6f817cd229571ad633af2105cb2d4f78c66e

数据查看功能

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

@@ -17,7 +17,7 @@
                                </ng-template>
                            </nz-input>
                            <ng-template #nzTemplate>
                                <div [ngStyle]="{'width': '200px', 'height': '300px', 'overflow-y' :'auto'}">
                                <div [ngStyle]="{'width': '200px', 'height': '240px', 'overflow-y' :'auto'}">
                                    <nz-tree [nzNodes]="sensorOptions" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree>
                                </div>
                            </ng-template>
@@ -122,13 +122,20 @@
    </form>
</nz-card>
<div nz-row [nzGutter]="16">
        <div nz-col [nzMd]="24">
            <nz-card>
            <div echarts [options]="chartOption" [loading]="chartLoading" class="line-chart" (chartInit)="onChartInit($event)"></div>
            </nz-card>
        </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <nz-table #nzTable [nzScroll]="{ x:5000,y:400 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">
            <nz-table #nzTable [nzScroll]="{ x:5100,y:360 }" [nzDataSource]="grid.data" [nzIsPagination]="false" [nzLoading]="grid.loading">
                <ng-template #nzFixedHeader>
                <thead nz-thead>
                    <tr>
                        <th nz-th [nzWidth]="'80px'" >
                        <th nz-th [nzWidth]="'120px'" [ngStyle]="{'position': 'relative','text-align': 'center', 'left':sensorNameScrollLeft}">
                            <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}">
@@ -138,9 +145,10 @@
                </thead>
               </ng-template>
                <tbody nz-tbody>
                    <tr nz-tbody-tr *ngFor="let row of nzTable.data,index as i">
                        <td  nz-td>
                            <span>{{ gridSensorNames[i] }}</span>
                    <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}">
                            <span><span>{{ gridSensorNames[i] }}</span>&nbsp;<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}">
                            <span [ngSwitch]="col.type">

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

New file
@@ -0,0 +1,3 @@
.line-chart {
    height: 100%;
}

 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,6 +132,7 @@
    private areacodeService: AreacodeService,
    private monitorPointService: MonitorPointService,
    private msg: NzMessageService,
    private dateService: DateService,
    ) { }    
    ngOnInit() {
        this.initPage();
@@ -361,6 +376,7 @@
            return ;
        }
       this.grid.loading = true;
       this.sensorNameScrollLeft = '0px';
       this.grid.data = [];
       this.gridSensorNames = [];
       const start: Date = this.getPeriodDate(this.actualTime , 'start');
@@ -402,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);
@@ -426,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;
@@ -460,6 +561,7 @@
        }
        return mo.toDate();
    }

}