merge 1.0.0
This commit is contained in:
		| @ -2,33 +2,41 @@ | ||||
| <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]="footer" contentHeight="46"> | ||||
|       <ng-template #footer> | ||||
|         <g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)"> | ||||
|     <g2-card [title]="'客户预存款总额'" [bordered]="true" [total]="totalAdvanceDeposit?.totalAmount || '¥ 0.00万'" | ||||
|       [footer]="AdvanceDepositFooter" contentHeight="46"> | ||||
|       <ng-template #AdvanceDepositFooter> | ||||
|         <g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []" | ||||
|           (clickItem)="handleClick($event)"> | ||||
|         </g2-mini-area> | ||||
|       </ng-template> | ||||
|     </g2-card> | ||||
|   </div> | ||||
|   <div nz-col class="gutter-row" [nzSpan]="6"> | ||||
|     <g2-card [title]="'业绩量总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46"> | ||||
|       <ng-template #footer> | ||||
|         <g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)"> | ||||
|     <g2-card [title]="'业绩量总额'" [bordered]="true" [total]="totalPerformanceVolume?.totalAmount || '¥ 0.00万'" | ||||
|       [footer]="PerformanceVolumeFooter" contentHeight="46"> | ||||
|       <ng-template #PerformanceVolumeFooter> | ||||
|         <g2-mini-area line color="#cceafe" height="45" [data]="totalPerformanceVolume?.list || []" | ||||
|           (clickItem)="handleClick($event)"> | ||||
|         </g2-mini-area> | ||||
|       </ng-template> | ||||
|     </g2-card> | ||||
|   </div> | ||||
|   <div nz-col class="gutter-row" [nzSpan]="6"> | ||||
|     <g2-card [title]="'司机应付总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46"> | ||||
|     <g2-card [title]="'司机应付总额'" [bordered]="true" [total]="totalFreight?.totalAmount || '¥ 0.00万'" [footer]="footer" | ||||
|       contentHeight="46"> | ||||
|       <ng-template #footer> | ||||
|         <g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)"> | ||||
|         <g2-mini-area line color="#cceafe" height="45" [data]="totalFreight?.list || []" | ||||
|           (clickItem)="handleClick($event)"> | ||||
|         </g2-mini-area> | ||||
|       </ng-template> | ||||
|     </g2-card> | ||||
|   </div> | ||||
|   <div nz-col class="gutter-row" [nzSpan]="6"> | ||||
|     <g2-card [title]="'附加费总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46"> | ||||
|       <ng-template #footer> | ||||
|         <g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)"> | ||||
|     <g2-card [title]="'附加费总额'" [bordered]="true" [total]="totalSurcharge?.totalAmount || '¥ 0.00万'" | ||||
|       [footer]="SurchargeFooter" contentHeight="46"> | ||||
|       <ng-template #SurchargeFooter> | ||||
|         <g2-mini-area line color="#cceafe" height="45" [data]="totalSurcharge?.list || []" | ||||
|           (clickItem)="handleClick($event)"> | ||||
|         </g2-mini-area> | ||||
|       </ng-template> | ||||
|     </g2-card> | ||||
| @ -37,32 +45,29 @@ | ||||
| <div nz-row [nzGutter]="16"> | ||||
|   <div nz-col class="gutter-row" [nzSpan]="12"> | ||||
|     <nz-card [nzTitle]="'订单类型比例'"> | ||||
|       <g2-custom delay="100" (render)="render($event)"></g2-custom> | ||||
|       <g2-custom #g2custom delay="100"></g2-custom> | ||||
|     </nz-card> | ||||
|   </div> | ||||
|   <div nz-col class="gutter-row" [nzSpan]="12"> | ||||
|     <nz-card [nzTitle]="'大区业绩完成情况'"> | ||||
|       <g2-timeline | ||||
|     [data]="chartData" | ||||
|     [titleMap]="{ y1: '客流量', y2: '支付笔数' }" | ||||
|     [height]="200" | ||||
|     mask="MM月DD日" | ||||
|     [slider]="false" | ||||
|   ></g2-timeline> | ||||
|       <!-- <g2-timeline [data]="chartData" [titleMap]="{ y1: '订单金额(元)', y2: '' }" [height]="200" mask="MM月DD日" | ||||
|         [slider]="false"></g2-timeline> --> | ||||
|       <g2-custom #RegionalPerforman delay="100"></g2-custom> | ||||
|     </nz-card> | ||||
|   </div> | ||||
| </div> | ||||
| <div nz-row [nzGutter]="16"> | ||||
|   <div nz-col class="gutter-row" [nzSpan]="12"> | ||||
|     <nz-card [nzTitle]="'运单直付比例'"> | ||||
|       <g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294" | ||||
|       (clickItem)="handleClick($event)" [lineWidth]="10"> | ||||
|       </g2-pie> | ||||
|       <!-- <g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294" | ||||
|         (clickItem)="handleClick($event)" [lineWidth]="10"> | ||||
|       </g2-pie> --> | ||||
|       <g2-custom #BillDirectProportion delay="100"></g2-custom> | ||||
|     </nz-card> | ||||
|   </div> | ||||
|   <div nz-col class="gutter-row" [nzSpan]="12"> | ||||
|     <nz-card [nzTitle]="'业绩完成情况'"> | ||||
|       <g2-bar height="200" [title]="'销售额趋势'" [data]="salesData" (clickItem)="handleClick($event)"></g2-bar> | ||||
|       <g2-bar  [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar> | ||||
|  | ||||
|     </nz-card> | ||||
|   </div> | ||||
|  | ||||
| @ -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<HTMLDivElement>): 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' = '车队长' | ||||
| } | ||||
|  | ||||
| @ -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`; | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
		Reference in New Issue
	
	Block a user