-
-
+
+
-
+
diff --git a/src/app/routes/datatable/components/dataindex/dataindex.component.ts b/src/app/routes/datatable/components/dataindex/dataindex.component.ts
index 0881c73c..62bd3816 100644
--- a/src/app/routes/datatable/components/dataindex/dataindex.component.ts
+++ b/src/app/routes/datatable/components/dataindex/dataindex.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { ModalHelper, _HttpClient } from '@delon/theme';
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie';
@@ -6,119 +6,119 @@ import { format } from 'date-fns';
import { DataService } from '../../services/data.service';
import { Chart, registerShape, Util } from '@antv/g2';
import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
+import { CurrencyPipe } from '@angular/common';
+import { LOGS } from '_mock';
+import { G2CustomComponent } from '@delon/chart/custom';
@Component({
selector: 'app-datatable-dataindex',
templateUrl: './dataindex.component.html',
- styleUrls: ['./dataindex.component.less']
+ styleUrls: ['./dataindex.component.less'],
+ providers: [CurrencyPipe]
})
export class DatatableDataindexComponent implements OnInit {
- @ViewChild('pie', { static: false }) pie!: G2PieComponent;
- chartData: G2TimelineData[] = [];
- visitData = this.genData();
- salesData = this.genData();
- salesPieData: G2PieData[] = [];
- total = '';
+ @ViewChild('g2custom', { static: false }) g2custom!: G2CustomComponent;
+ @ViewChild('RegionalPerforman', { static: false }) RegionalPerforman!: G2CustomComponent;
+ @ViewChild('BillDirectProportion', { static: false }) BillDirectProportion!: G2CustomComponent;
+ salesData: any[] = [];
- constructor(private service: DataService, private ngZone: NgZone) {
+ totalAdvanceDeposit: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
+ totalPerformanceVolume: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
+ totalFreight: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
+ totalSurcharge: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
- }
+ billTypeDatas: any = [
+ { item: '货源单', count: 0, percent: 0 },
+ { item: '合同单', count: 0, percent: 0 }
+ ];
+
+ regionalPerformanceCompletion: DataPerformanceTrendVO[] = [];
+
+ constructor(private service: DataService, private currency: CurrencyPipe) {}
ngOnInit(): void {
- this.refreshPie();
- this.initLineData()
- }
- initLineData(){
- for (let i = 0; i < 20; i += 1) {
- this.chartData.push({
- time: new Date().getTime() + 1000 * 60 * 60 * 24 * i,
- y1: Math.floor(Math.random() * 100) + 1000,
- y2: Math.floor(Math.random() * 100) + 10,
- });
- }
- }
- private genData(): G2MiniAreaData[] {
- const beginDay = new Date().getTime();
- const res: G2MiniAreaData[] = [];
- for (let i = 0; i < 20; i += 1) {
- res.push({
- x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
- y: Math.floor(Math.random() * 100) + 10,
- });
- }
- return res;
+ this.initMiniAreaData();
+ this.initOthersData();
}
- refresh(): void {
- this.visitData = this.genData();
+ private initMiniAreaData() {
+ // 客户预存款总额
+ this.service.request(this.service.$api_total_advance_deposit).subscribe((res: DataTotalVO) => {
+ if (res) {
+ this.totalAdvanceDeposit = this.formatMiniAreaData(res);
+ }
+ });
+ // 业绩量总额
+ this.service.request(this.service.$api_total_performance_volume).subscribe((res: DataTotalVO) => {
+ if (res) {
+ this.totalPerformanceVolume = this.formatMiniAreaData(res);
+ }
+ });
+ // 司机应付总额
+ this.service.request(this.service.$api_total_freight).subscribe((res: DataTotalVO) => {
+ if (res) {
+ this.totalFreight = this.formatMiniAreaData(res);
+ }
+ });
+ // 业绩量总额
+ this.service.request(this.service.$api_total_surcharge).subscribe((res: DataTotalVO) => {
+ if (res) {
+ this.totalSurcharge = this.formatMiniAreaData(res);
+ }
+ });
}
- refreshPie(): void {
- const rv = (min: number = 0, max: number = 5000) => Math.floor(Math.random() * (max - min + 1) + min);
- this.salesPieData = [
- {
- x: '家用电器',
- y: rv(),
- },
- {
- x: '食用酒水',
- y: rv(),
- },
- {
- x: '个护健康',
- y: rv(),
- },
- {
- x: '服饰箱包',
- y: rv(),
- },
- {
- x: '母婴产品',
- y: rv(),
- },
- ];
- if (Math.random() > 0.5) {
- this.salesPieData.push({
- x: '其他',
- y: rv(),
- });
- }
- this.total = `¥ ${this.salesPieData.reduce((pre, now) => now.y + pre, 0).toFixed(2)}`;
- if (this.pie) {
- // 等待组件渲染
- setTimeout(() => {
- console.log('a')
- this.pie.changeData()
- });
- }
+
+ private initOthersData() {
+ // 订单类型比例
+ this.service.request(this.service.$api_getBillTypeProportion).subscribe(res => {
+ if (res) {
+ this.billTypeDatas = this.formatCoordinateData(res);
+ this.initBillChart(this.g2custom['el'].nativeElement as any);
+ }
+ });
+ // 大区业绩完成情况
+ this.service.request(this.service.$api_getBillAmount).subscribe((res: DataPerformanceTrendVO[]) => {
+ if (res) {
+ this.regionalPerformanceCompletion = res.map(item => ({ ...item, time: new Date(item.time)?.getTime() }));
+ this.initRegionalPerformanceChart(this.RegionalPerforman['el'].nativeElement as any, this.regionalPerformanceCompletion);
+ }
+ });
+ // 订单类型比例
+ this.service.request(this.service.$api_getWayBillDirectProportion).subscribe(res => {
+ if (res) {
+ const billTypeDatas = this.formatCoordinateData(res.map((item: any) => ({ ...item, billType: item.wayBillType })));
+ this.initBillChart(this.BillDirectProportion['el'].nativeElement as any, billTypeDatas);
+ }
+ });
+ // 统计订单结算金额-趋势
+ this.service.request(this.service.$api_get_bill_payment_amount).subscribe(res => {
+ if (res) {
+ this.salesData = this.formatBarData(res);
+ }
+ });
}
handleClick(data: G2MiniAreaClickItem): void {
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
}
- format(val: number): string {
- return `¥ ${val.toFixed(2)}`;
- }
- render(el: ElementRef
): void {
- this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
- }
- private init(el: HTMLElement): void {
- const data = [
- { item: '货源单', count: 40, percent: 0.4 },
- { item: '合同单', count: 21, percent: 0.21 },
- { item: '事例三', count: 17, percent: 0.17 },
- { item: '事例四', count: 13, percent: 0.13 },
- { item: '事例五', count: 9, percent: 0.09 },
- ];
+
+ /**
+ * 构建订单类型秘鲁图
+ * @param el
+ */
+ private initBillChart(el: HTMLElement, datas?: any[]): void {
+ const data = datas || this.billTypeDatas;
+
const chart = new Chart({
container: el,
autoFit: true,
- height: 400,
+ height: 400
});
// 新建一个 view 用来单独渲染Annotation
const innerView = chart.createView();
chart.coordinate('theta', {
radius: 0.6,
- innerRadius: 0.7,
+ innerRadius: 0.7
});
chart.data(data);
@@ -127,34 +127,34 @@ export class DatatableDataindexComponent implements OnInit {
formatter: val => {
val = val * 100 + '%';
return val;
- },
+ }
});
chart.tooltip(false);
// 声明需要进行自定义图例字段： 'item'
chart.legend('item', {
- position: 'right', // 配置图例显示位置
- custom: true, // 关键字段，告诉 G2，要使用自定义的图例
- items: data.map((obj, index) => {
+ position: 'right', // 配置图例显示位置
+ custom: true, // 关键字段，告诉 G2，要使用自定义的图例
+ items: data.map((obj: any, index: any) => {
return {
- name: obj.item, // 对应 itemName
- value: obj.percent, // 对应 itemValue
+ name: obj.item, // 对应 itemName
+ value: obj.percent, // 对应 itemValue
marker: {
- symbol: 'square', // marker 的形状
+ symbol: 'square', // marker 的形状
style: {
- r: 5, // marker 图形半径
- fill: chart.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
- },
- }, // marker 配置
+ r: 5, // marker 图形半径
+ fill: chart.getTheme().colors10[index] // marker 颜色，使用默认颜色，同图形对应
+ }
+ } // marker 配置
};
}),
itemValue: {
style: {
- fill: '#999',
- }, // 配置 itemValue 样式
- formatter: (val: any) => `${val * 100}%` // 格式化 itemValue 内容
- },
+ fill: '#999'
+ }, // 配置 itemValue 样式
+ formatter: (val: any) => `${val * 100}%` // 格式化 itemValue 内容
+ }
});
chart
@@ -165,7 +165,7 @@ export class DatatableDataindexComponent implements OnInit {
.style({
fillOpacity: 1,
stroke: 'white',
- lineWidth: 8,
+ lineWidth: 8
})
.state({
active: {
@@ -174,12 +174,36 @@ export class DatatableDataindexComponent implements OnInit {
return {
lineWidth: 1,
stroke: 'white',
- strokeOpacity: shape.attr('fillOpacity'),
+ strokeOpacity: shape.attr('fillOpacity')
};
- },
- },
+ }
+ }
});
+ innerView
+ .annotation()
+ .text({
+ position: ['50%', '50%'],
+ content: data[0].item,
+ style: {
+ fontSize: 20,
+ fill: '#8c8c8c',
+ textAlign: 'center'
+ },
+ offsetY: -20
+ })
+ .text({
+ position: ['50%', '50%'],
+ content: data[0].count,
+ style: {
+ fontSize: 28,
+ fill: '#8c8c8c',
+ textAlign: 'center'
+ },
+ offsetY: 20
+ });
+ innerView.render(true);
+
// 移除图例点击过滤交互
chart.removeInteraction('legend-filter');
chart.interaction('element-active');
@@ -198,7 +222,7 @@ export class DatatableDataindexComponent implements OnInit {
updateAnnotation(data);
} else {
// 隐藏 Annotation
- clearAnnotation();
+ // clearAnnotation();
}
}
});
@@ -216,9 +240,9 @@ export class DatatableDataindexComponent implements OnInit {
style: {
fontSize: 20,
fill: '#8c8c8c',
- textAlign: 'center',
+ textAlign: 'center'
},
- offsetY: -20,
+ offsetY: -20
})
.text({
position: ['50%', '50%'],
@@ -226,11 +250,10 @@ export class DatatableDataindexComponent implements OnInit {
style: {
fontSize: 28,
fill: '#8c8c8c',
- textAlign: 'center',
+ textAlign: 'center'
},
- offsetX: -10,
- offsetY: 20,
- })
+ offsetY: 20
+ });
innerView.render(true);
lastItem = data.item;
}
@@ -242,8 +265,122 @@ export class DatatableDataindexComponent implements OnInit {
innerView.render(true);
lastItem = null;
}
+ }
+ private initRegionalPerformanceChart(el: HTMLElement, data: DataPerformanceTrendVO[]) {
+ const chart = new Chart({
+ container: el,
+ autoFit: true,
+ height: 400
+ });
+
+ chart.data(data);
+ chart.scale({
+ time: {
+ alias: '日期',
+ type: 'time'
+ },
+ quantity: {
+ alias: '金额',
+ min: 0,
+ sync: true, // 将 pv 字段数值同 time 字段数值进行同步
+ nice: true
+ }
+ });
+
+ chart.axis('quantity', {
+ title: {}
+ });
+
+ chart.tooltip({
+ showCrosshairs: true,
+ shared: true
+ });
+
+ // 声明需要进行自定义图例字段： 'item'
+ chart.legend({
+ offsetY: 10,
+ position: 'bottom', // 配置图例显示位置
+ custom: true, // 关键字段，告诉 G2，要使用自定义的图例
+ items: [
+ {
+ name: '订单金额 （元）', // 对应 itemName
+ value: '' // 对应 itemValue
+ }
+ ],
+ itemValue: {
+ style: {
+ fill: '#999'
+ } // 配置 itemValue 样式
+ }
+ });
+
+ chart.line().position('time*quantity').color('#4FAAEB');
+ chart.render();
+ }
+
+ private formatMiniAreaData(data: DataTotalVO) {
+ return {
+ totalAmount: `${this.currency.transform(data.totalAmount || 0)}万`,
+ list: data.list?.map(item => ({
+ x: item.time,
+ y: item.quantity
+ }))
+ };
+ }
+
+ private formatCoordinateData(data: DataBillTypeProportion[]): any[] {
+ const total = data.map(item => item.quantity).reduce((pre, next) => pre + next);
+ const rs: any[] = [];
+ data.forEach(item => {
+ rs.push({
+ item: (BILLTYPE as any)[item.billType],
+ count: item.quantity,
+ percent: Number((item.quantity / total).toFixed(2))
+ });
+ });
+ return rs;
+ }
+
+ private formatBarData(data: DataPerformanceTrendVO[]): any[] {
+ return data.map(item => ({
+ x: item.time,
+ y: item.quantity,
+ color: '#f50'
+ }));
+ }
+
+ private genData(): G2MiniAreaData[] {
+ const beginDay = new Date().getTime();
+ const res: G2MiniAreaData[] = [];
+ for (let i = 0; i < 20; i += 1) {
+ res.push({
+ x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
+ y: Math.floor(Math.random() * 100) + 10
+ });
+ }
+ return res;
}
}
+interface DataTotalVO {
+ totalAmount: number;
+ list: DataPerformanceTrendVO[];
+}
+interface DataPerformanceTrendVO {
+ quantity: number;
+ time: number;
+}
+
+interface DataBillTypeProportion {
+ billType: BILLTYPE;
+ quantity: number;
+}
+
+enum BILLTYPE {
+ 'HY' = '货源单',
+ 'HT' = '合同单',
+ 'ZF' = '直付',
+ 'CDZ' = '车队长'
+}
diff --git a/src/app/routes/datatable/services/data.service.ts b/src/app/routes/datatable/services/data.service.ts
index 609ed1b6..0b22f9bd 100644
--- a/src/app/routes/datatable/services/data.service.ts
+++ b/src/app/routes/datatable/services/data.service.ts
@@ -100,7 +100,15 @@ export class DataService extends BaseService {
// 数据报表-统计订单金额-趋势
$api_getBillAmount = `/api/sdc/reportData/getBillAmount`;
// // 数据报表-统计订单金额-趋势
- // $api_getBillAmount = `/api/sdc/reportData/getBillAmount`;
+ $api_get_bill_payment_amount = `/api/sdc/reportData/getBillPaymentAmount`;
+ // 客户预存款总额
+ $api_total_advance_deposit = `/api/sdc/reportData/getTotalAdvanceDeposit`;
+ // 业绩量总额
+ $api_total_performance_volume = `/api/sdc/reportData/getTotalPerformanceVolume`;
+ // 运费总额
+ $api_total_freight = `/api/sdc/reportData/getTotalFreight`;
+ // 附加费总额
+ $api_total_surcharge = `/api/sdc/reportData/getTotalSurcharge`;
diff --git a/src/app/routes/ticket-management/components/invoice-requested/invoice-requested.component.ts b/src/app/routes/ticket-management/components/invoice-requested/invoice-requested.component.ts
index f36ec08c..cc4b83dc 100644
--- a/src/app/routes/ticket-management/components/invoice-requested/invoice-requested.component.ts
+++ b/src/app/routes/ticket-management/components/invoice-requested/invoice-requested.component.ts
@@ -8,6 +8,8 @@ import { ShipperBaseService } from '@shared';
import { isTemplateRef } from 'ng-zorro-antd/core/util';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
+import { delay } from 'q';
+import { pipe } from 'rxjs';
import { TicketService } from '../../services/ticket.service';
import { PrintOrderModalComponent } from './print-order-modal/print-order-modal.component';
@@ -278,22 +280,25 @@ export class InvoiceRequestedComponent {
}
downloadPdf(item: any) {
- this.service.request(this.service.$api_downloadPdf, { vatappHId: item.id }).subscribe(res => {
- if (res?.reconciliationUrl) {
- this.service.reviewPDF(res.reconciliationUrl);
- } else {
- this.service
- .request(this.service.$api_download_Reconciliatio_pdf, { vatappHId: item.id, esignFlowId: res.esignFlowId })
- .subscribe(rs => {
- if (rs?.reconciliationUrl) {
- this.service.reviewPDF(rs.reconciliationUrl);
- } else {
- // this.service.msgSrv.warning('获取对账单失败');
- }
- });
+ if (item?.reconciliationUrl) {
+ this.service.reviewPDF(item.reconciliationUrl);
+ } else {
+ this.service.request(this.service.$api_downloadPdf, { vatappHId: item.id }).subscribe(res => {
+ if (res?.esignFlowId) {
+ delay(3000);
+ this.service
+ .request(this.service.$api_download_Reconciliatio_pdf, { vatappHId: item.id, esignFlowId: res.esignFlowId })
+ .subscribe(rs => {
+ if (rs?.reconciliationUrl) {
+ this.service.reviewPDF(rs.reconciliationUrl);
+ } else {
+ // this.service.msgSrv.warning('获取对账单失败');
+ }
+ });
+ }
// this.service.msgSrv.warning('获取对账单失败');
- }
- });
+ });
+ }
}
/**