237 lines
7.3 KiB
TypeScript
237 lines
7.3 KiB
TypeScript
import { Component, OnInit, ViewChild } from '@angular/core';
|
||
import { STColumn, STComponent } from '@delon/abc/st';
|
||
import { SFComponent } from '@delon/form';
|
||
import { DatePipe, _HttpClient } from '@delon/theme';
|
||
import { differenceInCalendarDays } from 'date-fns';
|
||
import { DataService } from '../../../services/data.service';
|
||
import { DatatableCustomindexCurveComponent } from './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('sf', { static: false }) sf!: SFComponent;
|
||
@ViewChild('curve') private readonly curve!: DatatableCustomindexCurveComponent;
|
||
type = 1;
|
||
mode = 'year';
|
||
date: any = null;
|
||
defineDate = [];
|
||
timeStart: any = '2022-01-01';
|
||
timeEnd: any = '2022-12-31';
|
||
dateFormat = 'yyyy';
|
||
today = new Date();
|
||
dateNext: any = null;
|
||
modeNext = 'year';
|
||
timeNext: any = ['2022-01-01 00:00:00'];
|
||
chartData: any = [];
|
||
flag = false;
|
||
|
||
columns: STColumn[] = [
|
||
{ title: '用户类型', render: 'type', className: 'text-center' },
|
||
{ title: '用户总数', index: 'total', className: 'text-center' },
|
||
{ title: '已认证数量', index: 'auditPassTotal', className: 'text-center' },
|
||
{ title: '活跃用户数', index: 'activeTotal', className: 'text-center' },
|
||
{ title: '未激活用户数', index: 'notActivationTotal', className: 'text-center' },
|
||
{ title: '沉默用户数', index: 'silentTotal', className: 'text-center' },
|
||
{ title: '流失用户数', index: 'drainTotal', className: 'text-center' },
|
||
{ title: '流失率', index: 'drainRate', className: 'text-center',format: (item: any) => {return ((item?.drainRate)*100).toFixed(2) + '%' }}
|
||
];
|
||
hzData: any;
|
||
hhrData: any = {
|
||
total: 0
|
||
};
|
||
sjData: any;
|
||
clData: any;
|
||
reportData: any = [];
|
||
|
||
constructor(public service: DataService, private datePipe: DatePipe) {}
|
||
ngOnInit(): void {
|
||
this.initCurveData();
|
||
}
|
||
initCurveData() {
|
||
this.cardData();
|
||
this.listData();
|
||
this.addData('year', '2022-01-01');
|
||
}
|
||
listData(type?: string, stime?: any, etime?: any) {
|
||
this.reportData = [];
|
||
this.service
|
||
.request(this.service.$api_statistics_totalDetail, {
|
||
dateStart: stime || this.timeStart,
|
||
dateEnd: etime || this.timeEnd,
|
||
type: 1 //用户角色类型 1：货主 2：合伙人 3：司机 4：车辆
|
||
})
|
||
.subscribe(res => {
|
||
if (res) {
|
||
this.reportData.push(res);
|
||
this.st.reload();
|
||
}
|
||
});
|
||
this.service
|
||
.request(this.service.$api_statistics_totalDetail, {
|
||
dateStart: stime || this.timeStart,
|
||
dateEnd: etime || this.timeEnd,
|
||
type: 2
|
||
})
|
||
.subscribe(res => {
|
||
if (res) {
|
||
this.reportData.push(res);
|
||
this.st.reload();
|
||
}
|
||
});
|
||
this.service
|
||
.request(this.service.$api_statistics_totalDetail, {
|
||
dateStart: stime || this.timeStart,
|
||
dateEnd: etime || this.timeEnd,
|
||
type: 3
|
||
})
|
||
.subscribe(res => {
|
||
if (res) {
|
||
this.reportData.push(res);
|
||
this.st.reload();
|
||
}
|
||
});
|
||
this.service
|
||
.request(this.service.$api_statistics_totalDetail, {
|
||
dateStart: stime || this.timeStart,
|
||
dateEnd: etime || this.timeEnd,
|
||
type: 4
|
||
})
|
||
.subscribe(res => {
|
||
if (res) {
|
||
this.reportData.push(res);
|
||
this.st.reload();
|
||
}
|
||
});
|
||
}
|
||
cardData() {
|
||
this.service.request(this.service.$api_statistics_total, { type: 1 }).subscribe(res => {
|
||
if (res) {
|
||
this.hzData = res;
|
||
}
|
||
});
|
||
this.service.request(this.service.$api_statistics_total, { type: 2 }).subscribe(res => {
|
||
if (res) {
|
||
|
||
this.hhrData = res;
|
||
console.log(this.hhrData);
|
||
|
||
}
|
||
});
|
||
this.service.request(this.service.$api_statistics_total, { type: 3 }).subscribe(res => {
|
||
if (res) {
|
||
this.sjData = res;
|
||
}
|
||
});
|
||
this.service.request(this.service.$api_statistics_total, { type: 4 }).subscribe(res => {
|
||
if (res) {
|
||
this.clData = res;
|
||
}
|
||
});
|
||
}
|
||
addData(type?: string, time?: any) {
|
||
this.chartData = []
|
||
this.service
|
||
.request(this.service.$api_statistics_totalAdd, {
|
||
date: time,
|
||
dateType: type === 'month' ? 2 : 1, //日期类型 1：年 2：月
|
||
type: 1
|
||
})
|
||
.subscribe(res => {
|
||
if (res) {
|
||
this.chartData.push(...res);
|
||
console.log(this.curve);
|
||
this.curve.reRender();
|
||
}
|
||
});
|
||
this.service
|
||
.request(this.service.$api_statistics_totalAdd, {
|
||
date: time,
|
||
dateType: type === 'month' ? 2 : 1, //日期类型 1：年 2：月
|
||
type: 2
|
||
})
|
||
.subscribe(res => {
|
||
if (res) {
|
||
this.chartData.push(...res);
|
||
this.curve.reRender();
|
||
}
|
||
});
|
||
this.service
|
||
.request(this.service.$api_statistics_totalAdd, {
|
||
date: time,
|
||
dateType: type === 'month' ? 2 : 1, //日期类型 1：年 2：月
|
||
type: 3
|
||
})
|
||
.subscribe(res => {
|
||
if (res) {
|
||
this.chartData.push(...res);
|
||
this.curve.reRender();
|
||
}
|
||
});
|
||
this.service
|
||
.request(this.service.$api_statistics_totalAdd, {
|
||
date: time,
|
||
dateType: type === 'month' ? 2 : 1, //日期类型 1：年 2：月
|
||
type: 4
|
||
})
|
||
.subscribe(res => {
|
||
if (res) {
|
||
this.chartData.push(...res);
|
||
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.timeStart = this.datePipe.transform(this.date, 'yyyy') + '-01-01';
|
||
this.timeEnd = this.datePipe.transform(this.date, 'yyyy') + '-12-31';
|
||
|
||
} else if (this.mode === 'month') {
|
||
this.timeStart = this.datePipe.transform(this.date, 'yyyy-MM') + '-01' ;
|
||
this.timeEnd = this.datePipe.transform(this.date, 'yyyy-MM') + '-31';
|
||
} else if (this.mode === 'date') {
|
||
this.timeStart=this.datePipe.transform(this.date, 'yyyy-MM-dd');
|
||
this.timeEnd = this.datePipe.transform(this.date, 'yyyy-MM-dd') ;
|
||
} else {
|
||
this.timeStart = this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') ;
|
||
this.timeEnd = this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd');
|
||
}
|
||
this.listData(this.mode, this.timeStart, this.timeEnd);
|
||
}
|
||
disabledDate = (current: Date): boolean =>
|
||
// Can not select days before today and today
|
||
differenceInCalendarDays(current, this.today) > 0;
|
||
|
||
changeDataNext2() {
|
||
if (this.modeNext === 'year') {
|
||
this.dateFormat = 'yyyy';
|
||
} else if (this.modeNext === 'month') {
|
||
this.dateFormat = 'yyyy-MM';
|
||
}
|
||
}
|
||
onChangeNext(result: any) {
|
||
if (result === null) {
|
||
return;
|
||
}
|
||
if (this.modeNext === 'year') {
|
||
this.timeNext = this.datePipe.transform(this.dateNext, 'yyyy') + '-01-01';
|
||
} else if (this.modeNext === 'month') {
|
||
this.timeNext = this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01';
|
||
}
|
||
this.addData(this.modeNext, this.timeNext);
|
||
}
|
||
}
|