沈斌
2018-07-12 1dfc8bc300a6ae0822514ddf2e1399d4762fa1b1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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$);
    }
}