Merge remote-tracking branch 'origin/develop' into develop

沈斌

2018-03-13 9c9b8250b973eea72f6970e1ceb46facca9f0a99

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

@@ -1,92 +1,585 @@
import { getService } from './../../../../testing/common.spec';
import { LineChartCriteria, TimePeriod } from './../../../business/entity/data';
import { PageBean } from '@business/entity/grid';
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, 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';
import { Component, OnInit } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { TimeUnits } from '@business/enum/types.enum';
import { TimeUnits, AreaRange, ResultCode } from '@business/enum/types.enum';
import * as moment from 'moment';

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',
  styleUrls: [ './query.component.less' ]
    selector: 'app-query',
    templateUrl: './query.component.html',
    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:[]};
    public sensorList: Sensor[];
    public timeUnits: { label: string, value: TimeUnits }[] = [];
    public lineChartCriteria: LineChartCriteria = { sensorKey: 'e1', timePeriod: { startTime: null, endTime: null }, dataConditions: [] };
    _areas: { label: any, value: any };
    _monitorPoint: MonitorPoint;
    _device: Device;
    _dataTimeUnits: { label: string, value: TimeUnits } = { label: '日', value: TimeUnits.DAY };
    _actualTime: number;
    actualTimes: number[];
    public _timePeriodUnitValue: TimeUnits = TimeUnits.DAY; // 横坐标时间单位
    dataTimeUnitsList: { label: string, value: TimeUnits }[] = [];
    public monitorPoints: MonitorPoint[];
    public devices: Device[];

    get lineChartSensorName():String{
        return !!this.sensorList?this.sensorList.find( sensor => sensor.sensorKey==this.lineChartCriteria.sensorKey).name:null;
    dataConditionTemp: DataCondition = { timeUnits: TimeUnits.DAY, actualTime: null };
    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){
    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;
        this.lineChartCriteria.timePeriod.timeUnits = 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.mode = 'day';
                this.timeType.timePickerOption = true;
                break;
            case TimeUnits.MINUTE:
                this.timeType.dateFormat = 'YYYY-MM-DD HH:mm';
                this.timeType.mode = 'day';
                this.timeType.timePickerOption = true;
                break;
        }
        const index = this.timeUnits.findIndex(item => {
            return item.value === value;
        });
        // 为了保持顺序 按以下操作
        this.dataTimeUnitsList = this.timeUnits;
        const length = this.timeUnits.length;
        const end = index < length - 1 ? index + 2 : length - 1;
        this._dataTimeUnits =  this.timeUnits.find( item => item.value === value);
        setTimeout(() => {
            this.dataTimeUnitsList = null;            
        }, 1);
        setTimeout(() => {
            this.dataTimeUnitsList = this.timeUnits.slice( index, end );            
        }, 1);
        
    }
    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;
    public timeType: { dateFormat?: string, mode?: 'month' | 'day', timePickerOption?: boolean }
        = { 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
        private sensorsService: SensorsService,
        private areacodeService: AreacodeService,
        private http: _HttpClient,
        private monitorPointService: MonitorPointService,
        private deviceService: DeviceService,
        private dateService: DateService,
        private msg: NzMessageService
    ) {
        this.initPage();
    }
    private initPage(){
        this.sensorsService.getPagingList(null,null).subscribe(
            (res: PageBean)  => {

    private initPage() {
        this.sensorsService.getPagingList(null, null).subscribe(
            (res: PageBean) => {
                this.sensorList = 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}
            { label: '年', value: TimeUnits.YEAR },
            { label: '月', value: TimeUnits.MONTH },
            { label: '日', value: TimeUnits.DAY },
            { label: '时', value: TimeUnits.HOUR },
            { label: '分', value: TimeUnits.MINUTE }
        );
        this.dataTimeUnitsList = this.timeUnits.slice(2, 4);
        this._dataTimeUnits = this.dataTimeUnitsList[0];
        const now = new Date();
        this.lineChartCriteria.timePeriod.timeUnits = TimeUnits.DAY;
        this.lineChartCriteria.timePeriod.startTime = now;
        this.lineChartCriteria.timePeriod.endTime = new Date(now.getTime());
        // 省市区 初始值
        this.http.get(environment.SERVER_BASH_URL + 'organization/get-my-org').subscribe(
            (res: ResultBean<Organization>) => {
                if (res.code === ResultCode.SUCCESS) {
                    const org = res.data;
                    if (!!org.areaNames) {
                        const areaNames = org.areaNames;
                        this._areas = { label: null, value: null };
                        this._areas.label = Object.values(areaNames).filter(
                            val => !!val
                        ).join('/');
                        if (areaNames.areaName != null) {
                            this._areas.value = org.areaCode;
                            this.dataConditionTemp.areaRange = AreaRange.AREA;
                            this.dataConditionTemp.areaRangeId = org.areaCode;
                        } else if (areaNames.cityName != null) {
                            this._areas.value = org.cityCode;
                            this.dataConditionTemp.areaRange = AreaRange.CITY;
                            this.dataConditionTemp.areaRangeId = org.cityCode;
                        } else {
                            this._areas.value = org.provinceCode;
                            this.dataConditionTemp.areaRange = AreaRange.PROVINCE;
                            this.dataConditionTemp.areaRangeId = org.provinceCode;
                        }
                    } else {
                        this._areas = { label: '江苏省/苏州市/昆山市', value: 320583 };
                        this.dataConditionTemp.areaRange = AreaRange.AREA;
                        this.dataConditionTemp.areaRangeId = 320583;
                    }
                }
            }
        );
        // 监控点初始化
        this.monitorPointsChange(null);
    }
    devicesChange(mpId) {
        if (!!mpId) {
            const example = new ExampleService();
            example.or().andEqualTo({ name: 'monitorPointId', value: mpId });
            this.deviceService.getPageByExample(null, example).subscribe(
                (res: PageBean) => {
                    if (!!res && !!res.data) {
                        this.devices = res.data;
                    }
                }
            );
        } else {
            this.devices = null;
        }
    }
    monitorPointsChange(text) {
        const pageBean: PageBean = { pageIndex: 0, pageSize: 20 };
        const example = new ExampleService();
        let areaName = '';
        switch (this.dataConditionTemp.areaRange) {
            case AreaRange.PROVINCE:
                areaName = 'provinceCode'; break;
            case AreaRange.CITY:
                areaName = 'cityCode'; break;
            case AreaRange.AREA:
                areaName = 'areaCode'; break;
        }
        if (!!text) {
            example.or().andLike({ name: 'name', value: '%' + text + '%' })
                .andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId });
        } else {
            example.or()
                .andEqualTo({ name: areaName, value: this.dataConditionTemp.areaRangeId });
        }
        this.monitorPointService.getPageByExample(pageBean, example).subscribe(
            (res: PageBean) => {
                if (!!res && !!res.data) {
                    this.monitorPoints = res.data;
                }
            }
        );
    }
    ngOnInit() {
        this.initPage();
    }
    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) => {
    get _startShowTime() {
        return this.timeType.timePickerOption ?
            {
                nzHideDisabledOptions: true,
                nzDisabledHours: () => {
                    const endTime = this.lineChartCriteria.timePeriod.endTime;
                    const hours = this.newArray(50);
                    return this._isSameDay && !!endTime ? hours.slice(endTime.getHours() + 1, 24) : [];
                },
                nzDisabledMinutes: (h) => {
                    if (this._timePeriodUnitValue === TimeUnits.MINUTE) {
                        const endTime = this.lineChartCriteria.timePeriod.endTime;
                        if (this._isSameDay && h === endTime.getHours()) {
                            const minutes = this.newArray(122);
                            return minutes.slice(endTime.getMinutes() + 1, 60);
                        } else {
                            return [];
                        }
                    } else {
                        return this.newArray(60).slice(1);
                    }

                },
                nzDisabledSeconds: () => {
                    return this.newArray(60).slice(1);
                }
            } : false;
    }
    get _endShowTime() {
        return this.timeType.timePickerOption ?
            {
                nzHideDisabledOptions: true,
                nzDisabledHours: () => {
                    const startTime = this.lineChartCriteria.timePeriod.startTime;
                    return this._isSameDay && !!startTime ? this.newArray(startTime.getHours()) : [];
                },
                nzDisabledMinutes: (h) => {
                    if (this._timePeriodUnitValue === TimeUnits.MINUTE) {
                        const startTime = this.lineChartCriteria.timePeriod.startTime;
                        if (this._isSameDay && h === startTime.getHours()) {
                            return this.newArray(startTime.getMinutes());
                        } else {
                            return [];
                        }

                    } else {
                        return this.newArray(60).slice(1);
                    }
                },
                nzDisabledSeconds: () => {
                    return this.newArray(60).slice(1);
                }
            } : false;
    }
    newArray = (len) => {
        const result = [];
        for (let i = 0; i < len; i++) {
            result.push(i);
        }
        return result;
    }
    newArray2 = (start, len) => {
        const result = [];
        for (let i = start; i <= len; i++) {
            result.push(i);
        }
        return result;
    }
    _disabledStartDate = (startValue: Date) => {
        if (!startValue || !this.lineChartCriteria.timePeriod.endTime) {
          return false;
            return false;
        }
        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) => {
        let format = this.timeType.dateFormat;
        // 单位为时，开始日期中 日默认时间设置为 00.00.00
        if (format.indexOf('H', 11)) {
            format = format.replace(/HH.*/, '');
        }
        const _startValue = moment(moment(startValue).format(format), format);
        return _startValue.valueOf() > this.lineChartCriteria.timePeriod.endTime.getTime();
    }
    _disabledEndDate = (endValue: Date) => {
        if (!endValue || !this.lineChartCriteria.timePeriod.startTime) {
          return false;
            return false;
        }
        return endValue.getTime() < this.lineChartCriteria.timePeriod.startTime;
      };
        const _endValue: Date = new Date(endValue.getTime());
        _endValue.setHours(23);
        _endValue.setMinutes(59);
        _endValue.setSeconds(59);
        return _endValue.getTime() < this.lineChartCriteria.timePeriod.startTime.getTime();
    }
    _timeChange = (value, type?: 'start'|'end') => {
        const startTime = this.lineChartCriteria.timePeriod.startTime;
        const endTime = this.lineChartCriteria.timePeriod.endTime;     
        
        if (type === 'start') {           
            this.lineChartCriteria.timePeriod.startTime = value;
            !!endTime ? '' : this.lineChartCriteria.timePeriod.endTime = value;
        } else {
            this.lineChartCriteria.timePeriod.endTime = value;
            !!startTime ? '' : this.lineChartCriteria.timePeriod.startTime === value;
        }

    }
    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.lineChartCriteria.timePeriod.timeUnits ) {
            case TimeUnits.YEAR:
            mo.month(month).date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.MONTH:
            mo.date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.DAY:
            mo.hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.HOUR:
            mo.minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.MINUTE:
            mo.second(second).millisecond(millisecond); break;
        }
        return mo.toDate();
    }
    get startYear(): number {
        !!this.lineChartCriteria.timePeriod.startTime ?
            '' : this.lineChartCriteria.timePeriod.startTime = new Date();
        return this.lineChartCriteria.timePeriod.startTime.getFullYear();
    }
    set startYear(value) {
        !!this.lineChartCriteria.timePeriod.startTime ?
            '' : this.lineChartCriteria.timePeriod.startTime = new Date();
        if (this.startYear === this.endYear && value < this.startYear) {
            // 异步调用防止循环          
            setTimeout(() => {
                this.endYear += 1;
            }, 1);
        }
        this.lineChartCriteria.timePeriod.startTime.setFullYear(value);
    }
    get minStartYear(): number {
        const now = new Date();
        return now.getFullYear() - 50;
    }
    get maxStartYear(): number {
        return this.endYear;
    }
    get endYear(): number {
        !!this.lineChartCriteria.timePeriod.endTime ?
            '' : this.lineChartCriteria.timePeriod.endTime = new Date();
        return this.lineChartCriteria.timePeriod.endTime.getFullYear();
    }

    set endYear(value) {
        !!this.lineChartCriteria.timePeriod.endTime ?
            '' : this.lineChartCriteria.timePeriod.endTime = new Date();
        if (this.startYear === this.endYear && value > this.startYear) {
            // 异步调用防止循环        
            setTimeout(() => {
                this.startYear -= 1;
            }, 1);
        }
        this.lineChartCriteria.timePeriod.endTime.setFullYear(value);
    }
    get minEndYear(): number {
        return this.startYear;
    }
    get maxEndYear(): number {
        const now = new Date();
        return now.getFullYear() + 50;
    }
    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;
        }
    }
    setAreaCodes(codes: string[]) {
        if (!!codes && !!codes.length) {
            const n = codes.length;
            if (this.dataConditionTemp.areaRangeId !== Number(codes[n - 1])) {
                this.dataConditionTemp.areaRangeId = Number(codes[n - 1]);
                switch (n) {
                    case 1:
                        this.dataConditionTemp.areaRange = AreaRange.PROVINCE;
                        break;
                    case 2:
                        this.dataConditionTemp.areaRange = AreaRange.CITY;
                        break;
                    case 3:
                        this.dataConditionTemp.areaRange = AreaRange.AREA;
                        break;
                }
                this.monitorPointsChange(null);
                this._monitorPoint = null;
                this.devicesChange(null);
                this._device = null;
            }
            this._areas.value = codes;
        }
    }
    // 下拉框设置监控点事件
    setMonitorPoint(value: MonitorPoint) {
        if (!!value) {
            this.dataConditionTemp.areaRangeId = value.id;
            this.dataConditionTemp.areaRange = AreaRange.MONITORPOINT;
        } else {
            this.setAreaCodes(this._areas.value);
        }
        if (value !== this._monitorPoint) {
            this._device = null;
            this.devicesChange(!!value ? value.id : null);
        }
        this._monitorPoint = value;
    }
    // 设置设备的值
    setDevice(value: Device) {
        if (!!value) {
            this._device = value;
            this.dataConditionTemp.areaRangeId = value.id;
            this.dataConditionTemp.areaRange = AreaRange.DEVICE;
        } else {
            this.setMonitorPoint(this._monitorPoint);
        }
    }
    setDataTimeUnits(item) {
        this._dataTimeUnits = item;
        this.dataConditionTemp.timeUnits = item.value;
        if (!this.actualTimeDisabled) {
        this._actualTime = 1;   
        switch (item.value) {
           case TimeUnits.MONTH:          
           this.actualTimes = this.newArray2(1, 12); break;
           case TimeUnits.DAY:
           this.actualTimes = this.newArray2(1, 31); break;
           case TimeUnits.HOUR:
           this.actualTimes = this.newArray2(0, 23); break;
           case TimeUnits.MINUTE:
           this.actualTimes = this.newArray2(1, 59); break;
        }
        }
    }
    // 实际时间是否可用 actualTimeDisabled
    get actualTimeDisabled() {
      if (!!this.dataTimeUnitsList && this._dataTimeUnits === this.dataTimeUnitsList[0]) {
            this.setActualTime(null);
            // 实际时间下拉选项数组
            this.actualTimes = null;
         }
         return  !!this.dataTimeUnitsList && this._dataTimeUnits === this.dataTimeUnitsList[0];
    }

    setActualTime(val) {
         this.dataConditionTemp.actualTime = val;
         this._actualTime = val;
    }
    search(event) {        
       // 刷新时间格式
       const startTime = this.lineChartCriteria.timePeriod.startTime;
       const endTime = this.lineChartCriteria.timePeriod.endTime;
       this.lineChartCriteria.timePeriod.startTime = this.getPeriodDate(startTime);
       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: 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) {
        this.echartsIntance = ec;
      }
}