import { Component, OnInit, OnDestroy } from '@angular/core'; 
 | 
import { NzMessageService } from 'ng-zorro-antd'; 
 | 
import { zip } from 'rxjs/observable/zip'; 
 | 
import { getTimeDistance, yuan, fixedZero } from '@delon/abc'; 
 | 
import { _HttpClient } from '@delon/theme'; 
 | 
  
 | 
@Component({ 
 | 
    selector: 'app-dashboard-monitor', 
 | 
    templateUrl: './monitor.component.html', 
 | 
    styleUrls: ['./monitor.component.less'] 
 | 
}) 
 | 
export class DashboardMonitorComponent implements OnInit, OnDestroy { 
 | 
    data: any = { }; 
 | 
    tags = []; 
 | 
    loading = true; 
 | 
    q: any = { 
 | 
        start: null, 
 | 
        end: null 
 | 
    }; 
 | 
  
 | 
    constructor(private http: _HttpClient, public msg: NzMessageService) {} 
 | 
  
 | 
    ngOnInit() { 
 | 
        // zip( 
 | 
        //     this.http.get('/chart'), 
 | 
        //     this.http.get('/chart/tags') 
 | 
        // ).subscribe(([ res, tags ]) => { 
 | 
        //     this.data = res; 
 | 
        //     tags['list'][Math.floor(Math.random() *  tags['list'].length) + 1].value = 1000; 
 | 
        //     this.tags =  tags['list']; 
 | 
        //     this.loading = false; 
 | 
        // }); 
 | 
  
 | 
        // // active chart 
 | 
        // this.genActiveData(); 
 | 
        // this.activeTime$ = setInterval(() => this.genActiveData(), 1000); 
 | 
    } 
 | 
  
 | 
    // region: active chart 
 | 
  
 | 
    activeTime$: any; 
 | 
  
 | 
    activeYAxis = { 
 | 
        tickCount: 3, 
 | 
        tickLine: false, 
 | 
        labels: false, 
 | 
        title: false, 
 | 
        line: false 
 | 
    }; 
 | 
  
 | 
    activeData: any[] = []; 
 | 
  
 | 
    activeStat = { 
 | 
        max: 0, 
 | 
        min: 0, 
 | 
        t1: '', 
 | 
        t2: '' 
 | 
    }; 
 | 
  
 | 
    genActiveData() { 
 | 
        const activeData = []; 
 | 
        for (let i = 0; i < 24; i += 1) { 
 | 
            activeData.push({ 
 | 
                x: `${fixedZero(i)}:00`, 
 | 
                y: (i * 50) + (Math.floor(Math.random() * 200)), 
 | 
            }); 
 | 
        } 
 | 
        this.activeData = activeData; 
 | 
        // stat 
 | 
        this.activeStat.max = [...activeData].sort()[activeData.length - 1].y + 200; 
 | 
        this.activeStat.min = [...activeData].sort()[Math.floor(activeData.length / 2)].y; 
 | 
        this.activeStat.t1 = activeData[Math.floor(activeData.length / 2)].x; 
 | 
        this.activeStat.t2 = activeData[activeData.length - 1].x; 
 | 
    } 
 | 
  
 | 
    // endregion 
 | 
  
 | 
    couponFormat(val: any) { 
 | 
        switch (parseInt(val, 10)) { 
 | 
            case 20: 
 | 
              return '差'; 
 | 
            case 40: 
 | 
              return '中'; 
 | 
            case 60: 
 | 
              return '良'; 
 | 
            case 80: 
 | 
              return '优'; 
 | 
            default: 
 | 
              return ''; 
 | 
        } 
 | 
    } 
 | 
  
 | 
    ngOnDestroy(): void { 
 | 
        if (this.activeTime$) clearInterval(this.activeTime$); 
 | 
    } 
 | 
} 
 |