import { Component, OnInit, OnDestroy } from '@angular/core';
|
import { NzMessageService } from 'ng-zorro-antd';
|
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',
|
templateUrl: './calendar.component.html',
|
styleUrls: ['./calendar.component.less'],
|
providers: [DeviceService]
|
})
|
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 day = Number(moment().format('DD'));
|
for(let index = 1;index <= day; index++) {
|
this.calendarDayCells[('0'+index).slice(-2)] = {
|
status: 'processing',
|
statusName: '加载中',
|
data: {}
|
}
|
}
|
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 {
|
}
|
// 日历单元格 被点击
|
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);
|
}
|
}
|
