New file |
| | |
| | | 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$); |
| | | } |
| | | } |