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

666

Browse Source
This commit is contained in:
heqinghang
2022-04-01 16:42:15 +08:00
parent a543097734
commit 6863464467
10 changed files with 212 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/routes/datatable/components/compliance/index/curve/curve.component.html Normal file
View File

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

0
src/app/routes/datatable/components/compliance/index/curve/curve.component.less Normal file
View File

91
src/app/routes/datatable/components/compliance/index/curve/curve.component.ts Normal file
View File

@ -0,0 +1,91 @@
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
// import DataSet from '@antv/data-set';
const DataSet = require('@antv/data-set');
import { Chart } from '@antv/g2';
import { DataService } from 'src/app/routes/datatable/services/data.service';
@Component({
selector: 'app-compliance-curve',
templateUrl: './curve.component.html',
styleUrls: ['./curve.component.less']
})
export class ComplianceCurveComponent 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(() => {
console.log(this.chartData)
this.ngZone.runOutsideAngular(() => this.init(this.el));
}, 1000)
}
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: {
min: 0,
nice: true,
},
});
this.chart.tooltip({
showCrosshairs: true,
shared: true,
});
this.chart.axis('proportion', {
label: {
formatter: (val: any) => {
return val*100+ ' %';
},
},
});
this.chart
.line()
.position('situationDate*proportion')
.color('type')
.tooltip('proportion*type', function(name: any, value: any) {
return {
name: name*100+'%',
value: value
};
});
this.chart.render();
}
}

19
src/app/routes/datatable/components/compliance/index/index.component.html
View File

@ -24,37 +24,37 @@
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'订单合格率'" [bordered]="true" [total]="'95.00%'" [footer]="footer1" contentHeight="46">
<g2-card [title]="'订单合格率'" [bordered]="true" [total]="cardData1?.proportion" [footer]="footer1" contentHeight="46">
<ng-template #footer1>
<div class="card-f">
<span class="card-f-l">合格：12423</span> <span>不合格：12423</span>
<span class="card-f-l">合格：{{cardData1?.leftQuantity}}</span> <span>不合格：{{cardData1?.rightQuantity}}</span>
</div>
</ng-template>
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'货源单占比'" [bordered]="true" [total]="'94.00%'" [footer]="footer2" contentHeight="46">
<g2-card [title]="'货源单占比'" [bordered]="true" [total]="cardData2?.proportion" [footer]="footer2" contentHeight="46">
<ng-template #footer2>
<div class="card-f">
<span class="card-f-l">货源单：12423</span> <span>合同单：12423</span>
<span class="card-f-l">货源单：{{cardData2?.leftQuantity}}</span> <span>合同单：{{cardData2?.rightQuantity}}</span>
</div>
</ng-template>
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'运费直付占比'" [bordered]="true" [total]="'95.10%'" [footer]="footer3" contentHeight="46">
<g2-card [title]="'运费直付占比'" [bordered]="true" [total]="cardData3?.proportion" [footer]="footer3" contentHeight="46">
<ng-template #footer3>
<div class="card-f">
<span class="card-f-l">司机：12423</span> <span>车队长：12423</span>
<span class="card-f-l">司机：{{cardData3?.leftQuantity}}</span> <span>车队长：{{cardData3?.rightQuantity}}</span>
</div>
</ng-template>
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'付款及时率'" [bordered]="true" [total]="'90.00%'" [footer]="footer4" contentHeight="46">
<g2-card [title]="'付款及时率'" [bordered]="true" [total]="cardData4?.proportion" [footer]="footer4" contentHeight="46">
<ng-template #footer4>
<div class="card-f">
<span class="card-f-l">准时：12423</span> <span>逾期：12423</span>
<span class="card-f-l">准时：{{cardData4?.leftQuantity}}</span> <span>逾期：{{cardData4?.rightQuantity}}</span>
</div>
</ng-template>
</g2-card>
@ -62,5 +62,6 @@
</div>
<nz-card nzTitle="平台合规情况监控报表">
<g2-custom delay="100" (render)="render($event)"></g2-custom>
<app-compliance-curve #curve [chartData]="chartData"></app-compliance-curve>
<!-- <g2-custom delay="100" (render)="render($event)"></g2-custom> -->
</nz-card>

89
src/app/routes/datatable/components/compliance/index/index.component.ts
View File

@ -5,6 +5,9 @@ import { format } from 'date-fns';
import { SFComponent, SFDateWidgetSchema, SFRadioWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
import { G2TimelineData, G2TimelineMap } from '@delon/chart/timeline';
import { Chart } from '@antv/g2';
import { DataService } from '../../../services/data.service';
import { ComplianceCurveComponent } from './curve/curve.component';
@Component({
selector: 'app-datatable-compliance-index',
templateUrl: './index.component.html',
@ -12,51 +15,107 @@ import { Chart } from '@antv/g2';
providers: [DatePipe]
})
export class DatatableComplianceIndexComponent implements OnInit {
@ViewChild('curve') private readonly curve!: ComplianceCurveComponent;
@ViewChild('sf', { static: false })
sf!: SFComponent;
ui!: SFUISchema;
schema: SFSchema = {};
mode = 'year';
date: any = null;
dateFormat = 'yyyy-MM-dd';
time: any = ['2022-01-01 00:00:00']
constructor(private http: _HttpClient, private modal: ModalHelper, private ngZone: NgZone, private datePipe: DatePipe) {}
dateFormat = 'yyyy';
time: any = '2022'
chartData: any = {}
cardData1:any;
cardData2:any;
cardData3:any;
cardData4:any;
constructor(private http: _HttpClient, private modal: ModalHelper, private ngZone: NgZone,public service: DataService, private datePipe: DatePipe) {}
ngOnInit(): void {
this.initSF();
this.initdData();
}
initdData(){
const params ={
...this.sf?.value,
timeType:this.mode ==='month'?'M':'Y',
time:this.time
}
this.service.request(this.service.$api_getBillRateQualified, params).subscribe(res => {
if (res) {
this.cardData1 = res;
this.cardData1.proportion = this.cardData1.proportion*100 +'%'
}
});
this.service.request(this.service.$api_getBillRateProportion, params).subscribe(res => {
if (res) {
this.cardData2 = res;
this.cardData2.proportion = this.cardData2.proportion*100 +'%'
}
});
this.service.request(this.service.$api_getBillRateDirectPayment, params).subscribe(res => {
if (res) {
this.cardData3 = res;
this.cardData3.proportion = this.cardData3.proportion*100 +'%'
}
});
this.service.request(this.service.$api_getBillTimelyPayment, params).subscribe(res => {
if (res) {
this.cardData4 = res;
this.cardData4.proportion = this.cardData4.proportion*100 +'%'
}
});
this.service.request(this.service.$api_listMonitorSituation, params).subscribe(res => {
if (res) {
this.chartData = 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.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
this.time = this.datePipe.transform(this.date, 'yyyy')
} 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')
}
this.initdData();
}
initSF() {
this.schema = {
properties: {
name: {
enterpriseInfoId: {
type: 'string',
title: '',
ui: {
widget: 'select',
placeholder: '网络货运人'
placeholder: '网络货运人',
asyncData: () => this.service.getNetworkFreightForwarder({}),
change:()=>{
this.initdData();
},
allowClear: true
}
},
name2: {
enterpriseProjectId: {
type: 'string',
title: '',
ui: {
@ -64,11 +123,12 @@ export class DatatableComplianceIndexComponent implements OnInit {
placeholder: '部门'
}
},
name3: {
salesmanId: {
type: 'string',
title: '',
ui: {
placeholder: '业务员'
placeholder: '业务员',
enter: () => this.initdData(),
}
}
}
@ -81,6 +141,9 @@ export class DatatableComplianceIndexComponent implements OnInit {
}
render(el: ElementRef<HTMLDivElement>) {
this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
}

10
src/app/routes/datatable/components/financetable/curve/curve.component.ts
View File

@ -66,16 +66,22 @@ export class FinanceTableCurveComponent implements OnInit,OnChanges {
this.chart.axis('number', {
label: {
formatter: (val: any) => {
return val;
return val*100+ ' %';
},
},
});
this.chart
.line()
.position('time*number')
.color('name')
.tooltip('name*number', (name:any, value:any) => {
return {
name: name,
value: value*100 + '%'
};
});
this.chart.render();

6
src/app/routes/datatable/components/financetable/financetable.component.html
View File

@ -50,7 +50,7 @@
<nz-card nzTitle="运营报表" [nzExtra]="extraTemplate01">
<ng-template #extraTemplate01>
<div class="chooseBox">
<nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="changeCurve()">
<nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="initPillarData()">
<nz-option [nzValue]="item.value" [nzLabel]="item.label" *ngFor="let item of interManlist"></nz-option>
</nz-select>
<div class="timeBox">
@ -66,10 +66,10 @@
</ng-template>
<div nz-row [nzGutter]="64">
<div nz-col class="gutter-row" [nzSpan]="12">
<app-operation-curve #curve [chartData]="chartData.lineChart"></app-operation-curve>
<app-financetable-curve #curve [chartData]="chartData.lineChart"></app-financetable-curve>
</div>
<div nz-col class="gutter-row" [nzSpan]="12">
<app-operation-pillar #pillar [chartData]="chartData.histogram"></app-operation-pillar>
<app-financetable-pillar #pillar [chartData]="chartData.histogram"></app-financetable-pillar>
</div>
</div>
</nz-card>

9
src/app/routes/datatable/components/financetable/financetable.component.ts
View File

@ -6,6 +6,8 @@ import { DataService } from '../../services/data.service';
import { differenceInCalendarDays } from 'date-fns';
import { OperationCurveComponent } from '../operationtable/curve/curve.component';
import { OperationPillarComponent } from '../operationtable/pillar/pillar.component';
import { FinanceTableCurveComponent } from './curve/curve.component';
import { FinancetablePillarComponent } from './pillar/pillar.component';
@Component({
selector: 'app-datatable-financetable',
@ -14,8 +16,8 @@ import { OperationPillarComponent } from '../operationtable/pillar/pillar.compon
providers: [DatePipe]
})
export class DatatableFinancetableComponent implements OnInit {
@ViewChild('curve') private readonly curve!: OperationCurveComponent;
@ViewChild('pillar') private readonly pillar!: OperationPillarComponent;
@ViewChild('curve') private readonly curve!: FinanceTableCurveComponent;
@ViewChild('pillar') private readonly pillar!: FinancetablePillarComponent;
@ViewChild('st') private readonly st!: STComponent;
type = 1;
mode = 'year';
@ -85,7 +87,7 @@ export class DatatableFinancetableComponent implements OnInit {
enterpriseInfoId: this.enterpriseInfoId
};
this.flag = true
this.service.request(this.service.$api_operationalReportHistogram, params).subscribe(res => {
this.service.request(this.service.$api_financialReportHistogram, params).subscribe(res => {
if (res) {
this.chartData = res
if(this.flag) {
@ -148,6 +150,7 @@ export class DatatableFinancetableComponent implements OnInit {
} else if(this.mode === 'month') {
this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00']
}
this.initPillarData();
}
}