沈斌
2018-03-13 9c9b8250b973eea72f6970e1ceb46facca9f0a99
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 month = 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.http.post(environment.SERVER_BASH_URL + '/report/line-chart', this.lineChartCriteria).subscribe(
            res => console.log(res)
       );
       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: 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) {