日历完善，设备相关功能开发

fengxiang

2018-07-31 eef69fa1194f6ab215b08a8baaf402d0539362cc

 src/app/routes/statistics/calendar/calendar.component.ts

@@ -1,9 +1,11 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import { _HttpClient } from '@delon/theme';
import { _HttpClient, ModalHelper } from '@delon/theme';
import { HttpClient } from '@angular/common/http';
import * as moment from 'moment';
import { DeviceService } from '@business/services/http/device.service';
import { TimeUnits } from '@business/enum/types.enum';
import { AqiDetailComponent } from './aqi-detail/aqi-detail.component';

@Component({
    selector: 'statistics-calender',
@@ -14,43 +16,117 @@
export class CalendarComponent implements OnInit, OnDestroy {

    data: any = {};

    public calendarDayCells:{
       [key : string] : {
         'status': string,
         'statusName': string,
         'data': {}
       }
    } = {};
    constructor(
        private deviceService: DeviceService,
        private http: _HttpClient,
        public msg: NzMessageService,
        private modalHelper: ModalHelper,
        private http2: HttpClient) {
    }

    ngOnInit() {
        const searchData = [];
        for (let i = 0; i < 50; i += 1) {
            searchData.push({
                index: i + 1,
                point: `监测站点-${i}`,
                value: Math.floor(Math.random() * 100)
            });
        const day = Number(moment().format('DD'));
        for(let index = 1;index <= day; index++) {
            this.calendarDayCells[('0'+index).slice(-2)] = {
                status: 'processing',
                statusName: '加载中',
                data: {}
            }
        }

        this.data = {
            searchData: searchData
        };
        const startTime = this.getPeriodDate(new Date(),TimeUnits.DAY,'start');
        const endTime = this.getPeriodDate(new Date(),TimeUnits.HOUR,'end');
        this.http.get(
            'demo/get-dayaqis',{
                startTime: startTime,
                endTime: endTime
            }
        ).subscribe(
            (res: any[]) => {
                if(!!res && res.length >0) {
                    Object.keys(this.calendarDayCells).forEach(
                        (key) => {
                            const index = Number(key) -1;
                            if(res.length > index){
                             const data = res[index];
                                 if(!!data) {
                                    const aqiJson = JSON.parse(data.aqi_json);
                                    const cell = this.calendarDayCells[key];
                                    cell.data = aqiJson;
                                    cell.statusName = aqiJson.quality;
                                    switch(aqiJson.quality) {
                                        case '优' : cell.status = 'success';break;
                                        case '良' : cell.status = 'success';break;
                                        case '轻度污染' : cell.status = 'warning';break;
                                        case '中度污染' : cell.status = 'warning';break;
                                        case '重度污染' : cell.status = 'error';break;
                                        default: cell.status = 'success';break;
                                    }
                                 }
                            }
                        }
                    );
                }
            }
        );
    }

    private getPeriodDate(value: Date , timeUnit: TimeUnits,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 ( timeUnit ) {
            case TimeUnits.MONTH:
            mo.month(month).date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.DAY:
            mo.date(day).hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.HOUR:
            mo.hour(hour).minute(minute).second(second).millisecond(millisecond); break;
            case TimeUnits.MINUTE:
            mo.minute(minute).second(second).millisecond(millisecond); break;
            // case TimeUnits.MINUTE:
            // mo.second(second).millisecond(millisecond); break;
        }
        return mo.toDate();
    }
    ngOnDestroy(): void {
    }

    sort(sortName, sortValue) {
        this.data.searchData = [
            ...(<any[]>this.data.searchData).sort((a, b) => {
                if (a[sortName] > b[sortName]) {
                    return (sortValue === 'ascend') ? 1 : -1;
                } else if (a[sortName] < b[sortName]) {
                    return (sortValue === 'ascend') ? -1 : 1;
                } else {
                    return 0;
                }
            })
        ];
    // 日历单元格 被点击
    calendarClick(mo: moment.Moment) {
        // console.log(mo.format('DD'));
        const dayKey = mo.format('DD');
        const selectedMoment = mo;
        const dayData = this.calendarDayCells[dayKey];
        if( !!dayData ) {
            this.modalHelper.open( AqiDetailComponent, { dayData,selectedMoment }).subscribe(
                res => {}
            );
        }
    }
    public isExpire(mo: moment.Moment):boolean {
         return moment().valueOf() < mo.valueOf();
    }
    public isCellExist(mo: moment.Moment):boolean {
         return !!this.calendarDayCells[mo.format('DD')];
    }
    loadCalendar(event) {
        // console.log(event);
    }
}