数据报表

fengxiang

2018-03-13 234f914507b05a3b1a92435f5067df6ca4e5eee0

数据报表

 src/app/business/entity/data.ts

@@ -153,3 +153,8 @@
  areaRangeId?: number;
  timeUnits?: TimeUnits;
}

export interface PairData {
  category: string;
  value: number;
}

 src/app/business/services/util/date.service.ts

@@ -1,6 +1,8 @@
import {Injectable} from '@angular/core';

import * as moment from 'moment';
import { TimePeriod } from '@business/entity/data';
import { TimeUnits } from '@business/enum/types.enum';

@Injectable()
export class DateService {
@@ -12,4 +14,52 @@
  today(format: string) {
    return moment().format(format);
  }
  /**
   *  获取时间区间,粒度数值
   */   countTimeRange(timePeriod: TimePeriod): number {
     let timeUnit = 0;
    switch (timePeriod.timeUnits) {
      case TimeUnits.YEAR: 
      timeUnit = 1000 * 60 * 60 * 24 * 30 * 12; break;
      case TimeUnits.MONTH: 
      timeUnit = 1000 * 60 * 60 * 24 * 30; break;
      case TimeUnits.DAY: 
      timeUnit = 1000 * 60 * 60 * 24; break;
      case TimeUnits.HOUR: 
      timeUnit = 1000 * 60 * 60; break;
      case TimeUnits.MINUTE: 
      timeUnit = 1000 * 60; break;
    }
     return Math.floor((timePeriod.endTime.getTime() - timePeriod.startTime.getTime()) / timeUnit);
   }
   makeTimeList(timePeriod: TimePeriod): string [] {
    const start = moment(timePeriod.startTime);
    const end = moment(timePeriod.endTime);
    const timeList: string[] = [];
    let timeUnit: moment.DurationInputArg2 = 'day';
    let formatStyle = '';
    switch (timePeriod.timeUnits) {
      case TimeUnits.YEAR: 
      formatStyle = 'YYYY';
      timeUnit = 'year'; break;
      case TimeUnits.MONTH: 
      formatStyle = 'YYYY-MM';
      timeUnit = 'month'; break;
      case TimeUnits.DAY: 
      formatStyle = 'YYYY-MM-DD';
      timeUnit = 'day'; break;
      case TimeUnits.HOUR: 
      formatStyle = 'YYYY-MM-DD HH';
      timeUnit = 'hour'; break;
      case TimeUnits.MINUTE: 
      formatStyle = 'YYYY-MM-DD HH:mm';
      timeUnit = 'minute'; break;
    }
    do {
     const outTime = start.format(formatStyle);
     timeList.push(outTime);
     start.add(1, timeUnit);
    }while (start.valueOf() < end.valueOf());
    return timeList;
   }
}

 src/app/routes/analysis/analysis.module.ts

@@ -9,6 +9,8 @@
import { CommonModule } from '@angular/common';
import { DeviceService } from '@business/services/http/device.service';
import { NgxEchartsModule  } from 'ngx-echarts';
import { DateService } from '@business/services/util/date.service';
import { NzMessageService } from 'ng-zorro-antd';
const routes: Routes = [
  {
    path: '',
@@ -28,6 +30,6 @@
    RouterModule.forChild(routes)    
  ],
  declarations: [QueryComponent],
  providers: [SensorsService, AreacodeService, MonitorPointService, DeviceService]
  providers: [SensorsService, NzMessageService, AreacodeService, MonitorPointService, DeviceService, DateService]
})
export class AnalysisModule { }

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

@@ -153,4 +153,4 @@
        </div>      
</nz-card>
</form>
<div echarts [options]="chartOption" class="line-chart" (chartInit)="onChartInit($event)"></div>  
<div echarts [options]="chartOption" [loading]="chartLoading" class="line-chart" (chartInit)="onChartInit($event)"></div>  

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

@@ -10,7 +10,7 @@
        right: 0;
    }
}
.demo-chart {
.line-chart {
    height: 400px;
  }


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

@@ -1,7 +1,7 @@
import { ExampleService } from '@business/services/util/example.service';
import { MonitorPointService } from '@business/services/http/monitor-point.service';
import { AreacodeService } from '@business/services/http/areacode.service';
import { LineChartCriteria, TimePeriod, Organization, MonitorPoint, DataCondition, Device } from '@business/entity/data';
import { LineChartCriteria, TimePeriod, Organization, MonitorPoint, DataCondition, Device, PairData } from '@business/entity/data';
import { PageBean, ResultBean } from '@business/entity/grid';
import { Sensor } from '@business/entity/data';
import { SensorsService } from '@business/services/http/sensors.service';
@@ -12,6 +12,8 @@
import { CascaderOption } from 'ng-zorro-antd/src/cascader/nz-cascader.component';
import { environment } from '@env/environment';
import { DeviceService } from '@business/services/http/device.service';
import { DateService } from '@business/services/util/date.service';
import { NzMessageService } from 'ng-zorro-antd';
@Component({
    selector: 'app-query',
    templateUrl: './query.component.html',
@@ -89,6 +91,8 @@
        private http: _HttpClient,
        private monitorPointService: MonitorPointService,
        private deviceService: DeviceService,
        private dateService: DateService,
        private msg: NzMessageService
    ) {
    }

@@ -298,31 +302,32 @@

    }
    private getPeriodDate(value: Date , type?: 'start'|'end' ): Date {
        debugger;
        let month = 0 ;
        let day = 0;
        let day = 1;
        let hour = 0;
        let minute = 0;
        let second = 0; 
        let millisecond = 0;
        if ('end' === type) {
            month = 12;
            month = 11;
            day = 31;
            hour = 23;
            minute = 59;
            second = 59;
            millisecond = 999;
        }
        const mo = moment(value);
        switch ( this.lineChartCriteria.timePeriod.timeUnits ) {
            case TimeUnits.YEAR:
            mo.month(month).day(day).hour(hour).minute(minute).second(second); break;
            mo.month(month).date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.MONTH:
            mo.day(day).hour(hour).minute(minute).second(second); break;
            mo.date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.DAY:
            mo.hour(hour).minute(minute).second(second); break;
            mo.hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.HOUR:
            mo.minute(minute).second(second); break;
            mo.minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.MINUTE:
            mo.second(second); break;
            mo.second(second).millisecond(millisecond); break;
        }
        return mo.toDate();
    }
@@ -465,7 +470,8 @@
    // 实际时间是否可用 actualTimeDisabled
    get actualTimeDisabled() {
      if (!!this.dataTimeUnitsList && this._dataTimeUnits === this.dataTimeUnitsList[0]) {
            this._actualTime = null;
            this.setActualTime(null);
            // 实际时间下拉选项数组
            this.actualTimes = null;
         }
         return  !!this.dataTimeUnitsList && this._dataTimeUnits === this.dataTimeUnitsList[0];
@@ -483,10 +489,94 @@
       this.lineChartCriteria.timePeriod.endTime = this.getPeriodDate(endTime, 'end');
       this.lineChartCriteria.dataConditions.pop();
       this.lineChartCriteria.dataConditions.push(this.dataConditionTemp);
       this.reloadChart();
    }
      private reloadChart(): void {
        const countTimeRange = this.dateService.countTimeRange(this.lineChartCriteria.timePeriod);
        let timeList: string[];
        const maxTimeRange = 5000;
        if (countTimeRange < maxTimeRange ) {
            timeList = this.dateService.makeTimeList(this.lineChartCriteria.timePeriod);
        } else {
            this.msg.error('时间跨度不能超过' + maxTimeRange + '，当前时间跨度为' + countTimeRange);
            return ;
        }
    
         if (!!this.echartsIntance) {
             this.chartOption = null;
             this.echartsIntance.clear();
         }
         this.initOpton({data: timeList});
         this.chartLoading = true;
       this.http.post(environment.SERVER_BASH_URL + '/report/line-chart', this.lineChartCriteria).subscribe(
            res => console.log(res)
            (res: ResultBean<Array<Array<PairData>>>) => {
               if (res.code === 1) {
                  const series = [];
                  const dataList =  res.data;
                  if (!!dataList && !!dataList.length) {
                    dataList.forEach(
                         data => {
                            const outData =  data.map( item => {
                                return item.value;
                            });
                            series.push({type: 'line', data: outData});
                        }
                    );
                    this.echartsIntance.setOption({
                        series: series
                    });
                    this.chartLoading = false;
                  }
               }
            }
       );
    }
      private initOpton(opt: {data: string[]}) {
          
          this.chartOption = {
            title: {
                text: ''
            },
            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.data
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
            ]
        };
      }
      chartLoading: boolean;
      chartOption;
      echartsIntance;
      onChartInit(ec) {