136 lines
4.1 KiB
TypeScript
136 lines
4.1 KiB
TypeScript
import { Component, OnInit, ViewChild } from '@angular/core';
|
|
import { STColumn, STComponent } from '@delon/abc/st';
|
|
import { DatePipe, _HttpClient } from '@delon/theme';
|
|
import { differenceInCalendarDays } from 'date-fns';
|
|
import { DataService } from '../../../services/data.service';
|
|
import { OperationCurveComponent } from '../../operationtable/curve/curve.component';
|
|
|
|
@Component({
|
|
selector: 'app-datatable-customindex',
|
|
templateUrl: './customindex.component.html',
|
|
styleUrls: ['./customindex.component.less'],
|
|
providers: [DatePipe]
|
|
|
|
})
|
|
export class DatatableCustomindexComponent implements OnInit {
|
|
@ViewChild('st') private readonly st!: STComponent;
|
|
@ViewChild('curve') private readonly curve!: OperationCurveComponent;
|
|
type = 1;
|
|
mode = 'year';
|
|
date: any = null;
|
|
defineDate = [];
|
|
time: any = ['2022-01-01 00:00:00']
|
|
dateFormat = 'yyyy-MM-dd';
|
|
today = new Date();
|
|
dateNext: any = null;
|
|
modeNext = 'year';
|
|
timeNext: any = ['2022-01-01 00:00:00']
|
|
chartData: any;
|
|
flag = false;
|
|
|
|
|
|
columns: STColumn[] = [
|
|
{ title: '用户类型', index: 'networkTransporterName', className: 'text-center' },
|
|
{ title: '用户总数', index: 'zsl', className: 'text-center' },
|
|
{ title: '已认证数量', index: 'yingsje', className: 'text-center' },
|
|
{ title: '活跃用户数', index: 'cys', className: 'text-center' },
|
|
{ title: '未激活用户数', index: 'yingfyf', className: 'text-center' },
|
|
{ title: '沉默用户数', index: 'yl', className: 'text-center' },
|
|
{ title: '流失用户数', index: 'djd', className: 'text-center' },
|
|
{ title: '流失率', index: 'ysz', className: 'text-center' }
|
|
];
|
|
/**
|
|
* 查询参数
|
|
*/
|
|
get reqParams() {
|
|
if (this.mode === 'year') {
|
|
this.type = 1
|
|
} else if (this.mode === 'month') {
|
|
this.type = 2
|
|
} else if (this.mode === 'date') {
|
|
this.type = 3
|
|
} else {
|
|
this.type = 4
|
|
}
|
|
let params: any = {
|
|
time: this.time,
|
|
type: this.type
|
|
};
|
|
|
|
delete params._$expand;
|
|
return { ...params };
|
|
}
|
|
|
|
constructor(public service: DataService, private datePipe: DatePipe) { }
|
|
ngOnInit(): void {
|
|
this.initCurveData()
|
|
}
|
|
initCurveData() {
|
|
let type = 1
|
|
if (this.mode === 'year') {
|
|
type = 1
|
|
} else if (this.mode === 'month') {
|
|
type = 2
|
|
}
|
|
const params: any = {
|
|
time: this.timeNext,
|
|
type
|
|
};
|
|
this.flag = true
|
|
this.service.request(this.service.$api_operationalReportHistogram, params).subscribe(res => {
|
|
if (res) {
|
|
this.chartData = res
|
|
if (this.flag) {
|
|
this.curve.reRender()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
changeData() {
|
|
if (this.mode === 'year') {
|
|
this.dateFormat = 'yyyy'
|
|
} else if (this.mode === 'month') {
|
|
this.dateFormat = 'yyyy-MM'
|
|
} else {
|
|
this.dateFormat = 'yyyy-MM-dd'
|
|
}
|
|
}
|
|
onChange(result: any) {
|
|
if (this.mode === 'year') {
|
|
this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
|
|
} else if (this.mode === 'month') {
|
|
this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
|
|
} else if (this.mode === 'date') {
|
|
this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00']
|
|
} else {
|
|
this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00']
|
|
}
|
|
this.st.reload({ ...this.reqParams });
|
|
}
|
|
disabledDate = (current: Date): boolean =>
|
|
// Can not select days before today and today
|
|
differenceInCalendarDays(current, this.today) > 0;
|
|
|
|
|
|
changeDataNext() {
|
|
if(this.mode === 'year') {
|
|
this.dateFormat = 'yyyy'
|
|
} else if(this.mode === 'month') {
|
|
this.dateFormat = 'yyyy-MM'
|
|
}
|
|
}
|
|
onChangeNext(result: any) {
|
|
if(result === null) {
|
|
return
|
|
}
|
|
if(this.mode === 'year') {
|
|
this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy') + '-01-01 00:00:00']
|
|
} else if(this.mode === 'month') {
|
|
this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00']
|
|
}
|
|
this.initCurveData()
|
|
}
|
|
|
|
}
|