267 lines
7.8 KiB
TypeScript
267 lines
7.8 KiB
TypeScript
import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
|
|
import { DatePipe, ModalHelper, _HttpClient } from '@delon/theme';
|
|
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
|
|
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',
|
|
styleUrls: ['./index.component.less'],
|
|
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';
|
|
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;
|
|
console.log(this.cardData1);
|
|
|
|
this.cardData1.proportion = (this.cardData1?.proportion*100).toFixed(2) +'%'
|
|
}
|
|
});
|
|
this.service.request(this.service.$api_getBillRateProportion, params).subscribe(res => {
|
|
if (res) {
|
|
this.cardData2 = res;
|
|
this.cardData2.proportion = (this.cardData2?.proportion*100).toFixed(2) +'%'
|
|
}
|
|
});
|
|
this.service.request(this.service.$api_getBillRateDirectPayment, params).subscribe(res => {
|
|
if (res) {
|
|
this.cardData3 = res;
|
|
this.cardData3.proportion = (this.cardData3?.proportion*100).toFixed(2) +'%'
|
|
}
|
|
});
|
|
this.service.request(this.service.$api_getBillTimelyPayment, params).subscribe(res => {
|
|
if (res) {
|
|
this.cardData4 = res;
|
|
this.cardData4.proportion = (this.cardData4?.proportion*100).toFixed(2) +'%'
|
|
}
|
|
});
|
|
|
|
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'
|
|
}
|
|
|
|
}
|
|
|
|
onChange(result: any) {
|
|
if(result === null) {
|
|
return
|
|
}
|
|
if(this.mode === 'year') {
|
|
this.time = this.datePipe.transform(this.date, 'yyyy')
|
|
} else if(this.mode === 'month') {
|
|
this.time = this.datePipe.transform(this.date, 'yyyy-MM')
|
|
}
|
|
this.initdData();
|
|
}
|
|
|
|
initSF() {
|
|
this.schema = {
|
|
properties: {
|
|
enterpriseInfoId: {
|
|
type: 'string',
|
|
title: '',
|
|
ui: {
|
|
widget: 'select',
|
|
placeholder: '网络货运人',
|
|
asyncData: () => this.service.getNetworkFreightForwarder({}),
|
|
change:()=>{
|
|
this.initdData();
|
|
},
|
|
allowClear: true
|
|
}
|
|
},
|
|
enterpriseProjectId: {
|
|
type: 'string',
|
|
title: '',
|
|
ui: {
|
|
widget: 'select',
|
|
placeholder: '部门'
|
|
}
|
|
},
|
|
salesmanId: {
|
|
type: 'string',
|
|
title: '',
|
|
ui: {
|
|
placeholder: '业务员',
|
|
enter: () => this.initdData(),
|
|
}
|
|
}
|
|
}
|
|
};
|
|
this.ui = {
|
|
'*': {
|
|
grid: { span: 4 }
|
|
}
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render(el: ElementRef<HTMLDivElement>) {
|
|
this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
|
|
}
|
|
|
|
private init(el: HTMLElement): void {
|
|
const chart = new Chart({
|
|
container: el,
|
|
autoFit: true,
|
|
height: 400
|
|
});
|
|
// 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
|
|
const data = [
|
|
{ data: '1月', label: '订单合格率', value: 5 },
|
|
{ data: '2月', label: '订单合格率', value: 10 },
|
|
{ data: '3月', label: '订单合格率', value: 25 },
|
|
{ data: '4月', label: '订单合格率', value: 35 },
|
|
{ data: '5月', label: '订单合格率', value: 15 },
|
|
{ data: '6月', label: '订单合格率', value: 5 },
|
|
{ data: '7月', label: '订单合格率', value: 95 },
|
|
{ data: '8月', label: '订单合格率', value: 45 },
|
|
|
|
{ data: '1月', label: '付款及时率', value: 10 },
|
|
{ data: '2月', label: '付款及时率', value: 15 },
|
|
{ data: '3月', label: '付款及时率', value: 30 },
|
|
{ data: '4月', label: '付款及时率', value: 8 },
|
|
{ data: '5月', label: '付款及时率', value: 9 },
|
|
{ data: '6月', label: '付款及时率', value: 5 },
|
|
{ data: '7月', label: '付款及时率', value: 80 },
|
|
{ data: '8月', label: '付款及时率', value: 55 },
|
|
|
|
{ data: '1月', label: '货源占比率', value: 90 },
|
|
{ data: '2月', label: '货源占比率', value: 30 },
|
|
{ data: '3月', label: '货源占比率', value: 45 },
|
|
{ data: '4月', label: '货源占比率', value: 35 },
|
|
{ data: '5月', label: '货源占比率', value: 95 },
|
|
{ data: '6月', label: '货源占比率', value: 35 },
|
|
{ data: '7月', label: '货源占比率', value: 65 },
|
|
{ data: '8月', label: '货源占比率', value: 63 },
|
|
|
|
{ data: '1月', label: '运费直付占比', value: 30 },
|
|
{ data: '2月', label: '运费直付占比', value: 60 },
|
|
{ data: '3月', label: '运费直付占比', value: 25 },
|
|
{ data: '4月', label: '运费直付占比', value: 35 },
|
|
{ data: '5月', label: '运费直付占比', value: 15 },
|
|
{ data: '6月', label: '运费直付占比', value: 55 },
|
|
{ data: '7月', label: '运费直付占比', value: 50 },
|
|
{ data: '8月', label: '运费直付占比', value: 30 },
|
|
];
|
|
|
|
chart.data(data);
|
|
//刻度自定义
|
|
chart.scale({
|
|
data: {
|
|
range: [0, 1],
|
|
},
|
|
value: {
|
|
min: 0,
|
|
nice: true,
|
|
},
|
|
});
|
|
// 图表下方图形文字自定义
|
|
chart.legend({
|
|
items:[
|
|
{
|
|
name: '订单合格率',
|
|
value: 'node_load1',
|
|
marker: {
|
|
symbol: 'circle',
|
|
style: {fill: '#6193f7'}
|
|
},
|
|
},
|
|
{
|
|
name: '付款及时率',
|
|
value: 'node_load2',
|
|
marker: {symbol: 'circle',style: {fill: '#58d3a2'}},
|
|
},
|
|
{
|
|
name: '货源占比率',
|
|
value: 'node_load13',
|
|
marker: {symbol: 'circle',style: {fill: '#5b6d8f'}},
|
|
},
|
|
{
|
|
name: '运费直付占比',
|
|
value: 'node_load13',
|
|
marker: {symbol: 'circle',style: {fill: '#f0b915'}},
|
|
},
|
|
]
|
|
});
|
|
// 提示自定义
|
|
chart.tooltip({
|
|
showCrosshairs: true,
|
|
shared: true,
|
|
});
|
|
|
|
//数据格式化
|
|
chart.axis('value', {
|
|
label: {
|
|
formatter: (val) => {
|
|
return val + ' %';
|
|
},
|
|
},
|
|
});
|
|
// 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
|
|
chart.line().position('data*value').color('label').tooltip('label*value', (name:any, value:any) => {
|
|
return {
|
|
name: name,
|
|
value: value + '%'
|
|
};
|
|
});;
|
|
// 在x*y的坐标上按z值绘制圆点
|
|
chart.point().position('data*value').size(4).color('label').shape('circle');
|
|
chart.render();
|
|
}
|
|
}
|