Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix bug

Browse Source
This commit is contained in:
wangshiming
2022-04-06 14:38:10 +08:00
parent 55bd97f7f6
commit c484687413
16 changed files with 213 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/routes/datatable/components/customtable/customindex/curve/curve.component.html Normal file
View File

@ -0,0 +1 @@
<g2-custom delay="100" (render)="render($event)"></g2-custom>

0
src/app/routes/datatable/components/customtable/customindex/curve/curve.component.less Normal file
View File

81
src/app/routes/datatable/components/customtable/customindex/curve/curve.component.ts Normal file
View File

@ -0,0 +1,81 @@
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { Chart } from '@antv/g2';
import { DataService } from 'src/app/routes/datatable/services/data.service';
@Component({
selector: 'app-datatable-customindex-curve',
templateUrl: './curve.component.html',
styleUrls: ['./curve.component.less']
})
export class DatatableCustomindexCurveComponent implements OnInit, OnChanges {
el: any;
@Input() chartData: any;
chart: any;
constructor(private service: DataService, private ngZone: NgZone) {
}
ngOnChanges(changes: SimpleChanges): void {
if (this.chartData) {
// setTimeout(()=>{
// this.chart.render(true)
// }, 1000)
}
}
ngOnInit(): void {
}
reRender() {
setTimeout(() => {
this.chart.data(this.chartData);
this.chart.render();
}, 1000)
}
render(el: ElementRef<HTMLDivElement>): void {
this.el = el.nativeElement
setTimeout(() => {
this.ngZone.runOutsideAngular(() => this.init(this.el));
},500)
}
private init(el: HTMLElement): void {
this.chart = new Chart({
container: el,
autoFit: true,
height: 500,
});
this.chart.data(this.chartData);
this.chart.scale({
time: {
range: [0, 1],
},
number: {
nice: true,
},
});
this.chart.tooltip({
showCrosshairs: true,
shared: true,
});
this.chart.axis('number', {
label: {
formatter: (val: any) => {
return val;
},
},
});
this.chart
.line()
.position('time*number')
.color('name')
this.chart.render();
}
}

20
src/app/routes/datatable/components/customtable/customindex/customindex.component.html
View File

@ -1,20 +1,30 @@
<!--
* @Description :
* @Version : 1.0
* @Author : Shiming
* @Date : 2022-04-06 13:20:56
* @LastEditors : Shiming
* @LastEditTime : 2022-04-06 13:55:19
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\customtable\\customindex\\customindex.component.html
* Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<!-- 页头 -->
<page-header-wrapper [title]="'客户报表'"></page-header-wrapper>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'货主'" [bordered]="true" [total]="'¥ 126,560.00'" footer="日访问量 12,423" contentHeight="46">
<g2-card [title]="'货主'" [bordered]="true" [total]="hzData?.total" [footer]="'已认证' + hzData?.auditPassTotal" contentHeight="46">
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'合伙人'" [bordered]="true" [total]="'¥ 126,560.00'" footer="日访问量 12,423" contentHeight="46">
<g2-card [title]="'合伙人'" [bordered]="true" [total]="hhrData?.total" [footer]="'已认证' + hhrData?.auditPassTotal" contentHeight="46">
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'司机'" [bordered]="true" [total]="'¥ 126,560.00'" footer="日访问量 12,423" contentHeight="46">
<g2-card [title]="'司机'" [bordered]="true" [total]="sjData?.total" [footer]="'已认证' + sjData?.auditPassTotal" contentHeight="46">
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'车辆'" [bordered]="true" [total]="'¥ 126,560.00'" footer="日访问量 12,423" contentHeight="46">
<g2-card [title]="'车辆'" [bordered]="true" [total]="clData?.total" [footer]="'已认证' + clData?.auditPassTotal" contentHeight="46">
</g2-card>
</div>
</div>
@ -55,5 +65,5 @@
</div>
</div>
</ng-template>
<app-operation-curve #curve [chartData]="chartData.lineChart"></app-operation-curve>
<app-datatable-customindex-curve #curve [chartData]="chartData.lineChart"></app-datatable-customindex-curve>
</nz-card>

142
src/app/routes/datatable/components/customtable/customindex/customindex.component.ts
View File

@ -3,32 +3,30 @@ 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';
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('curve') private readonly curve!: OperationCurveComponent;
@ViewChild('curve') private readonly curve!: DatatableCustomindexCurveComponent;
type = 1;
mode = 'year';
date: any = null;
defineDate = [];
time: any = ['2022-01-01 00:00:00']
time: any = ['2022-01-01 00:00:00'];
dateFormat = 'yyyy';
today = new Date();
dateNext: any = null;
modeNext = 'year';
timeNext: any = ['2022-01-01 00:00:00']
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' },
@ -39,18 +37,22 @@ export class DatatableCustomindexComponent implements OnInit {
{ title: '流失用户数', index: 'djd', className: 'text-center' },
{ title: '流失率', index: 'ysz', className: 'text-center' }
];
hzData: any;
hhrData: any;
sjData: any;
clData: any;
/**
* 查询参数
*/
get reqParams() {
if (this.mode === 'year') {
this.type = 1
this.type = 1;
} else if (this.mode === 'month') {
this.type = 2
this.type = 2;
} else if (this.mode === 'date') {
this.type = 3
this.type = 3;
} else {
this.type = 4
this.type = 4;
}
let params: any = {
time: this.time,
@ -61,50 +63,100 @@ export class DatatableCustomindexComponent implements OnInit {
return { ...params };
}
constructor(public service: DataService, private datePipe: DatePipe) { }
constructor(public service: DataService, private datePipe: DatePipe) {}
ngOnInit(): void {
this.initCurveData()
this.initCurveData();
}
initCurveData() {
let type = 1
let type = 1;
if (this.mode === 'year') {
type = 1
type = 1;
} else if (this.mode === 'month') {
type = 2
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()
// const params: any = {
// time: this.timeNext,
// type
// };
this.flag = true;
this.service
.request(this.service.$api_statistics_totalDetail, {
time: this.timeNext,
type: 1
})
.subscribe(res => {
if (res) {
this.chartData = res;
}
});
this.service.request(this.service.$api_statistics_totalDetail, {
time: this.timeNext,
type: 2
}).subscribe(res => {
if (res) {
this.chartData = res;
}
})
});
this.service.request(this.service.$api_statistics_totalDetail, {
time: this.timeNext,
type: 3
}).subscribe(res => {
if (res) {
this.chartData = res;
}
});
this.service.request(this.service.$api_statistics_totalDetail, {
time: this.timeNext,
type: 4
}).subscribe(res => {
if (res) {
this.chartData = res;
}
});
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;
}
});
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;
}
});
}
changeData() {
if (this.mode === 'year') {
this.dateFormat = 'yyyy'
this.dateFormat = 'yyyy';
} else if (this.mode === 'month') {
this.dateFormat = 'yyyy-MM'
this.dateFormat = 'yyyy-MM';
} else {
this.dateFormat = 'yyyy-MM-dd'
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']
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']
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']
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.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 });
}
@ -112,24 +164,22 @@ export class DatatableCustomindexComponent implements OnInit {
// 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'
if (this.mode === 'year') {
this.dateFormat = 'yyyy';
} else if (this.mode === 'month') {
this.dateFormat = 'yyyy-MM';
}
}
onChangeNext(result: any) {
if(result === null) {
return
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']
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()
this.initCurveData();
}
}