fengxiang
2018-03-12 43afaa6ad53ca4368fbc6426500f3f71f6f8b765
src/app/routes/analysis/query/query.component.ts
@@ -1,8 +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 { DataCondition } from './../../../business/entity/data';
import { LineChartCriteria, TimePeriod, Organization, MonitorPoint } from '@business/entity/data';
import { LineChartCriteria, TimePeriod, Organization, MonitorPoint, DataCondition, Device } 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,7 +11,7 @@
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';
@Component({
  selector: 'app-query',
  templateUrl: './query.component.html',
@@ -20,17 +19,26 @@
})
export class QueryComponent implements OnInit {
    public sensorList: Sensor[];
    public timeUnits: { label: string, value: TimeUnits, disabled: boolean }[] = [];
    public timeUnits: { label: string, value: TimeUnits }[] = [];
    public lineChartCriteria: LineChartCriteria = {sensorKey: 'e1', timePeriod: {startTime: null, endTime: null}, dataConditions: []};
    _areas: {label: any, value: any};
    _monitorPoint;
    _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[];
    dataConditionTemp: DataCondition = { timeUnits: TimeUnits.DAY, actualTime: null };
    get lineChartSensorName(): String {
        return !!this.sensorList ? this.sensorList.find( sensor => sensor.sensorKey === this.lineChartCriteria.sensorKey).name : null;
    }
    public _timePeriodUnitValue: TimeUnits = TimeUnits.DAY;
    public set timePeriodUnitValue(value: TimeUnits) {
        this._timePeriodUnitValue = value;
        this.lineChartCriteria.timePeriod.timeUnits = value;
        switch (value) {
            // YYYY-MM-DD HH:mm:ss
            case TimeUnits.MONTH: 
@@ -54,6 +62,21 @@
            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?: 'month'|'day', timePickerOption?: boolean}
    = {dateFormat: 'YYYY-MM-DD', mode: 'day', timePickerOption: null};
@@ -65,6 +88,7 @@
        private areacodeService: AreacodeService,
        private http: _HttpClient,
        private monitorPointService: MonitorPointService,
        private deviceService: DeviceService,
    ) {        
    }
@@ -75,13 +99,16 @@
            }
        );
        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());
        // 省市区 初始值
@@ -116,8 +143,25 @@
              }
           }
        );
        // 监控点初始化
        this.monitorPointsChange(null);
    }
    monitorPointChange(text) {
    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 = '';
@@ -152,7 +196,8 @@
    }
    get _startShowTime() {
        return this.timeType.timePickerOption ?
           {nzHideDisabledOptions: true,
            {
                nzHideDisabledOptions: true,
            nzDisabledHours: () => {
                const endTime = this.lineChartCriteria.timePeriod.endTime;
                const hours = this.newArray(50);
@@ -179,7 +224,8 @@
    }
    get _endShowTime() {
        return this.timeType.timePickerOption ?
           {nzHideDisabledOptions: true,
            {
                nzHideDisabledOptions: true,
            nzDisabledHours: () => {
                const startTime = this.lineChartCriteria.timePeriod.startTime;
                return this._isSameDay && !!startTime ? this.newArray(startTime.getHours()) : [];
@@ -209,6 +255,13 @@
        }
        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;
@@ -231,14 +284,47 @@
        _endValue.setSeconds(59);
        return _endValue.getTime() < this.lineChartCriteria.timePeriod.startTime.getTime();
      }
      _timeChange = (type: string) => {
    _timeChange = (value, type?: 'start'|'end') => {
        const startTime = this.lineChartCriteria.timePeriod.startTime;
        const endTime = this.lineChartCriteria.timePeriod.endTime;
        if (type === 'start') {            
            !!endTime ? '' : this.lineChartCriteria.timePeriod.endTime = startTime;
            this.lineChartCriteria.timePeriod.startTime = value;
            !!endTime ? '' : this.lineChartCriteria.timePeriod.endTime = value;
        } else {
            !!startTime ? '' : this.lineChartCriteria.timePeriod.startTime === endTime;
            this.lineChartCriteria.timePeriod.endTime = value;
            !!startTime ? '' : this.lineChartCriteria.timePeriod.startTime === value;
        }
    }
    private getPeriodDate(value: Date , type?: 'start'|'end' ): Date {
        debugger;
        let month = 0 ;
        let day = 0;
        let hour = 0;
        let minute = 0;
        let second = 0;
        if ('end' === type) {
            month = 12;
            day = 31;
            hour = 23;
            minute = 59;
            second = 59;
        }
        const mo = moment(value);
        switch ( this.lineChartCriteria.timePeriod.timeUnits ) {
            case TimeUnits.YEAR:
            mo.month(month).day(day).hour(hour).minute(minute).second(second); break;
            case TimeUnits.MONTH:
            mo.day(day).hour(hour).minute(minute).second(second); break;
            case TimeUnits.DAY:
            mo.hour(hour).minute(minute).second(second); break;
            case TimeUnits.HOUR:
            mo.minute(minute).second(second); break;
            case TimeUnits.MINUTE:
            mo.second(second); break;
        }
        return mo.toDate();
      }
      get startYear(): number {
          !!this.lineChartCriteria.timePeriod.startTime ?
@@ -287,7 +373,6 @@
        const now = new Date();
        return now.getFullYear() + 50;
      }
      dataConditionTemp: DataCondition = {};
      areaLazyLoad(event: { option: CascaderOption, index: number, resolve: (children: CascaderOption[]) => void, reject: () => void }) {
        const index = event['index'];
        const option = event.option;  
@@ -315,26 +400,96 @@
      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.areaRangeId = Number(codes[0]);
                this.dataConditionTemp.areaRange = AreaRange.PROVINCE;
                break;
                case 2:
                this.dataConditionTemp.areaRangeId = Number(codes[1]);
                this.dataConditionTemp.areaRange = AreaRange.CITY;
                break;
                case 3:
                this.dataConditionTemp.areaRangeId = Number(codes[2]);
                this.dataConditionTemp.areaRange = AreaRange.AREA;
                break;
             }
             this._monitorPoint = 1;
                this.monitorPointsChange(null);
                this._monitorPoint = null;
                this.devicesChange(null);
                this._device = null;
            }
            this._areas.value = codes;
         }
      }
      setMonitorPoint(value) {
          console.log(value);
          this.dataConditionTemp.areaRangeId = value;
    // 下拉框设置监控点事件
    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._actualTime = 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.http.post(environment.SERVER_BASH_URL + '/report/line-chart', this.lineChartCriteria).subscribe(
            res => console.log(res)
       );
    }
      chartOption;
      echartsIntance;
      onChartInit(ec) {
        this.echartsIntance = ec;
      }
}