From 0710e2cca2f7780ba6a91b9d72756561526fcf04 Mon Sep 17 00:00:00 2001 From: Taric Xin Date: Wed, 20 Apr 2022 15:46:26 +0800 Subject: [PATCH] merge 1.0.0 --- proxy.conf.js | 2 +- .../dataindex/dataindex.component.html | 51 +-- .../dataindex/dataindex.component.ts | 365 ++++++++++++------ .../routes/datatable/services/data.service.ts | 10 +- .../invoice-requested.component.ts | 35 +- 5 files changed, 309 insertions(+), 154 deletions(-) diff --git a/proxy.conf.js b/proxy.conf.js index 3639702c..5abf24b2 100644 --- a/proxy.conf.js +++ b/proxy.conf.js @@ -30,7 +30,7 @@ module.exports = { // }, '//api': { target: { - host: 'tms-api-test.eascs.com', + host: 'tms-api-dev.eascs.com', protocol: 'https:', port: 443 }, diff --git a/src/app/routes/datatable/components/dataindex/dataindex.component.html b/src/app/routes/datatable/components/dataindex/dataindex.component.html index 3f148bfd..f1f4a0b5 100644 --- a/src/app/routes/datatable/components/dataindex/dataindex.component.html +++ b/src/app/routes/datatable/components/dataindex/dataindex.component.html @@ -2,33 +2,41 @@
- - - + + +
- - - + + +
- + - +
- - - + + + @@ -37,32 +45,29 @@
- +
- + +
- - + +
- +
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('获取对账单失败'); - } - }); + }); + } } /**