Merge branch 'develop' of https://gitlab.eascs.com/tms-ui/tms-obc-web into develop
This commit is contained in:
wangshiming
@ -43,12 +43,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row [nzGutter]="16">
|
||||
<div nz-col class="gutter-row" [nzSpan]="12">
|
||||
<div nz-col class="gutter-row" [nzSpan]="9">
|
||||
<nz-card [nzTitle]="'订单类型比例'">
|
||||
<g2-custom #g2custom delay="100"></g2-custom>
|
||||
</nz-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="12">
|
||||
<div nz-col class="gutter-row" [nzSpan]="15">
|
||||
<nz-card [nzTitle]="'大区业绩完成情况'">
|
||||
<!-- <g2-timeline [data]="chartData" [titleMap]="{ y1: '订单金额（元）', y2: '' }" [height]="200" mask="MM月DD日"
|
||||
[slider]="false"></g2-timeline> -->
|
||||
@ -57,7 +57,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row [nzGutter]="16">
|
||||
<div nz-col class="gutter-row" [nzSpan]="12">
|
||||
<div nz-col class="gutter-row" [nzSpan]="9">
|
||||
<nz-card [nzTitle]="'运单直付比例'">
|
||||
<!-- <g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
|
||||
(clickItem)="handleClick($event)" [lineWidth]="10">
|
||||
@ -65,9 +65,10 @@
|
||||
<g2-custom #BillDirectProportion delay="100"></g2-custom>
|
||||
</nz-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="12">
|
||||
<div nz-col class="gutter-row" [nzSpan]="15">
|
||||
<nz-card [nzTitle]="'业绩完成情况'">
|
||||
<g2-bar [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar>
|
||||
<!-- <g2-bar [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar> -->
|
||||
<g2-custom #SaleProportion delay="100"></g2-custom>
|
||||
|
||||
</nz-card>
|
||||
</div>
|
||||
|
||||
@ -9,6 +9,8 @@ import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
|
||||
import { CurrencyPipe } from '@angular/common';
|
||||
import { LOGS } from '_mock';
|
||||
import { G2CustomComponent } from '@delon/chart/custom';
|
||||
import { G2BarData } from '@delon/chart/bar';
|
||||
import { GeometryLabelCfg } from '@antv/g2/lib/interface';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-dataindex',
|
||||
@ -20,6 +22,7 @@ export class DatatableDataindexComponent implements OnInit {
|
||||
@ViewChild('g2custom', { static: false }) g2custom!: G2CustomComponent;
|
||||
@ViewChild('RegionalPerforman', { static: false }) RegionalPerforman!: G2CustomComponent;
|
||||
@ViewChild('BillDirectProportion', { static: false }) BillDirectProportion!: G2CustomComponent;
|
||||
@ViewChild('SaleProportion', { static: false }) SaleProportion!: G2CustomComponent;
|
||||
salesData: any[] = [];
|
||||
|
||||
totalAdvanceDeposit: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
|
||||
@ -94,6 +97,7 @@ export class DatatableDataindexComponent implements OnInit {
|
||||
this.service.request(this.service.$api_get_bill_payment_amount).subscribe(res => {
|
||||
if (res) {
|
||||
this.salesData = this.formatBarData(res);
|
||||
this.initBiaxialChart(this.SaleProportion['el'].nativeElement as any, this.salesData);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -267,6 +271,11 @@ export class DatatableDataindexComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建大区业绩完成情况柱折双轴图
|
||||
* @param el
|
||||
* @param data
|
||||
*/
|
||||
private initRegionalPerformanceChart(el: HTMLElement, data: DataPerformanceTrendVO[]) {
|
||||
const chart = new Chart({
|
||||
container: el,
|
||||
@ -319,6 +328,66 @@ export class DatatableDataindexComponent implements OnInit {
|
||||
chart.render();
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建业绩完成情况柱折双轴图
|
||||
* @param el
|
||||
* @param data
|
||||
*/
|
||||
private initBiaxialChart(el: HTMLElement, data: any[]) {
|
||||
const chart = new Chart({
|
||||
container: el,
|
||||
autoFit: true,
|
||||
height: 400,
|
||||
|
||||
});
|
||||
chart.data(data);
|
||||
chart.scale({
|
||||
pre: { alias: '同期业绩完成率', min: 0, max: 1 },
|
||||
pre2: { min: 0, max: 1 },
|
||||
quantity: { min: 0, max: 1000000 },
|
||||
});
|
||||
chart.legend({
|
||||
custom: true,
|
||||
items: [
|
||||
{ value: 'quantity', name: '业绩量 (万)', marker: { symbol: 'hyphen', style: { stroke: '#3182bd', r: 15, lineWidth: 5 } } },
|
||||
{ value: 'pre2', name: '业绩完成率', marker: { symbol: 'hyphen', style: { stroke: '#fdae6b', r: 15, lineWidth: 5 } } },
|
||||
{ value: 'pre', name: '同期业绩完成率', marker: { symbol: 'hyphen', style: { stroke: '#ff4d4f', r: 15, lineWidth: 5 } } }
|
||||
]
|
||||
});
|
||||
chart.axis('pre', {
|
||||
grid: null,
|
||||
title: null,
|
||||
label: {
|
||||
formatter: val => {
|
||||
return +val * 100 + '%';
|
||||
}
|
||||
}
|
||||
});
|
||||
chart.axis('pre2', false);
|
||||
chart.tooltip({
|
||||
shared: true
|
||||
});
|
||||
chart.interval().position('time*quantity').label('quantity').color('#3182bd');
|
||||
chart
|
||||
.line()
|
||||
.position('time*pre')
|
||||
.label('pre', val => ({ content: (val * 100).toFixed(0) + '%' }))
|
||||
.color('#ff4d4f')
|
||||
.size(3);
|
||||
chart.point().position('time*pre').color('#ff4d4f').size(3).shape('circle');
|
||||
chart
|
||||
.line()
|
||||
.position('time*pre2')
|
||||
.label('pre2', val => ({ content: (val * 100).toFixed(0) + '%' }))
|
||||
.color('#fdae6b')
|
||||
.size(3);
|
||||
chart.point().position('time*pre2').color('#fdae6b').size(3).shape('circle');
|
||||
|
||||
chart.interaction('active-region');
|
||||
chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
|
||||
chart.render();
|
||||
}
|
||||
|
||||
private formatMiniAreaData(data: DataTotalVO) {
|
||||
return {
|
||||
totalAmount: `${this.currency.transform(data.totalAmount || 0)}万`,
|
||||
@ -329,6 +398,11 @@ export class DatatableDataindexComponent implements OnInit {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化饼图数据格式
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
private formatCoordinateData(data: DataBillTypeProportion[]): any[] {
|
||||
const total = data.map(item => item.quantity).reduce((pre, next) => pre + next);
|
||||
const rs: any[] = [];
|
||||
@ -344,9 +418,11 @@ export class DatatableDataindexComponent implements OnInit {
|
||||
|
||||
private formatBarData(data: DataPerformanceTrendVO[]): any[] {
|
||||
return data.map(item => ({
|
||||
x: item.time,
|
||||
y: item.quantity,
|
||||
color: '#f50'
|
||||
time: item.time,
|
||||
quantity: item.quantity,
|
||||
color: undefined,
|
||||
pre: Math.floor(Math.random() * 100) / 100,
|
||||
pre2: Math.floor(Math.random() * 100) / 100
|
||||
}));
|
||||
}
|
||||
|
||||
@ -356,7 +432,7 @@ export class DatatableDataindexComponent implements OnInit {
|
||||
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
|
||||
y: Math.floor(Math.random() * 1)
|
||||
});
|
||||
}
|
||||
return res;
|
||||
|
||||
@ -108,7 +108,7 @@
|
||||
<ng-template st-row="vatmoney" let-item let-index="index">
|
||||
{{ item.billLTypeLabel }}: {{ item.vatmoney |currency }}
|
||||
</ng-template>
|
||||
</st>vatmoney
|
||||
</st>
|
||||
</nz-tab>
|
||||
<nz-tab nzTitle="发票明细">
|
||||
<st #invoiceST [data]="service.$api_get_invoice_details" [columns]="invoiceColumns" size="small" bordered="true"
|
||||
|
||||
Reference in New Issue
Block a user