Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2022-04-22 14:42:08 +08:00
parent 1a0ba55ea0
commit 29789d20ab
8 changed files with 145 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/app/routes/datatable/components/dataindex/dataindex.component.html
View File

@ -25,7 +25,7 @@
<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]="totalFreight?.list || []"
<g2-mini-area line borderColor="#E60012" color="#F09896" height="45" [data]="totalFreight?.list || []"
(clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
@ -35,7 +35,7 @@
<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 || []"
<g2-mini-area line borderColor="#E60012" color="#F09896" height="45" [data]="totalSurcharge?.list || []"
(clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
@ -43,13 +43,13 @@
</div>
</div>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="9">
<nz-card [nzTitle]="'订单类型比例'">
<div nz-col class="gutter-row" [nzSpan]="7">
<nz-card><label class="chart_title">订单类型比例</label>
<g2-custom #g2custom delay="100"></g2-custom>
</nz-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="15">
<nz-card [nzTitle]="'大区业绩完成情况'">
<div nz-col class="gutter-row" [nzSpan]="17">
<nz-card><label class="chart_title">大区业绩完成情况</label>
<!-- <g2-timeline [data]="chartData" [titleMap]="{ y1: '订单金额（元）', y2: '' }" [height]="200" mask="MM月DD日"
[slider]="false"></g2-timeline> -->
<g2-custom #RegionalPerforman delay="100"></g2-custom>
@ -57,16 +57,17 @@
</div>
</div>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="9">
<nz-card [nzTitle]="'运单直付比例'">
<div nz-col class="gutter-row" [nzSpan]="7">
<nz-card> <label class="chart_title">运单直付比例</label>
<!-- <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]="15">
<nz-card [nzTitle]="'业绩完成情况'">
<div nz-col class="gutter-row" [nzSpan]="17">
<nz-card>
<label class="chart_title">业绩完成情况</label>
<!-- <g2-bar [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar> -->
<g2-custom #SaleProportion delay="100"></g2-custom>

9
src/app/routes/datatable/components/dataindex/dataindex.component.less
View File

@ -0,0 +1,9 @@
.chart_title {
font-size : 16px;
font-weight : 500;
color : #1D2129;
line-height : 24px;
background-clip : text;
-webkit-background-clip: text;
position : absolute;
}

138
src/app/routes/datatable/components/dataindex/dataindex.component.ts
View File

@ -82,8 +82,14 @@ export class DatatableDataindexComponent implements OnInit {
// 大区业绩完成情况
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.regionalPerformanceCompletion = res.map(item => ({ ...item, time: new Date(item.time)?.getTime() }));
// this.initRegionalPerformanceChart(this.RegionalPerforman['el'].nativeElement as any, this.regionalPerformanceCompletion);
this.regionalPerformanceCompletion = this.formatBarData(res);
this.initBiaxialChart(this.RegionalPerforman['el'].nativeElement as any, this.regionalPerformanceCompletion, {
y1Title: '业绩量(万)',
y2Title: '业绩完成率',
y3Title: '同期业绩完成率'
});
}
});
// 订单类型比例
@ -97,7 +103,11 @@ 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);
this.initBiaxialChart(this.SaleProportion['el'].nativeElement as any, this.salesData, {
y1Title: '业绩量(万)',
y2Title: '业绩完成率',
y3Title: '同期业绩完成率'
});
}
});
}
@ -121,8 +131,8 @@ export class DatatableDataindexComponent implements OnInit {
// 新建一个 view 用来单独渲染Annotation
const innerView = chart.createView();
chart.coordinate('theta', {
radius: 0.6,
innerRadius: 0.7
radius: 0.65,
innerRadius: 0.6
});
chart.data(data);
@ -138,17 +148,17 @@ export class DatatableDataindexComponent implements OnInit {
// 声明需要进行自定义图例字段： 'item'
chart.legend('item', {
position: 'right', // 配置图例显示位置
position: 'bottom', // 配置图例显示位置
custom: true, // 关键字段，告诉 G2，要使用自定义的图例
items: data.map((obj: any, index: any) => {
return {
name: obj.item, // 对应 itemName
value: obj.percent, // 对应 itemValue
marker: {
symbol: 'square', // marker 的形状
symbol: 'circle', // marker 的形状
style: {
r: 5, // marker 图形半径
fill: chart.getTheme().colors10[index] // marker 颜色，使用默认颜色，同图形对应
fill: index === 0 ? '#E60012' : '#F09896' // marker 颜色，使用默认颜色，同图形对应
}
} // marker 配置
};
@ -165,7 +175,7 @@ export class DatatableDataindexComponent implements OnInit {
.interval()
.adjust('stack')
.position('percent')
.color('item')
.color('item', ['#E60012', '#F09896'])
.style({
fillOpacity: 1,
stroke: 'white',
@ -182,6 +192,14 @@ export class DatatableDataindexComponent implements OnInit {
};
}
}
})
.label('percent', percent => {
return {
content: data => {
return ` ${percent * 100}%`;
},
style: { fontSize: 14 }
};
});
innerView
@ -201,7 +219,7 @@ export class DatatableDataindexComponent implements OnInit {
content: data[0].count,
style: {
fontSize: 28,
fill: '#8c8c8c',
fill: '##000',
textAlign: 'center'
},
offsetY: 20
@ -253,7 +271,7 @@ export class DatatableDataindexComponent implements OnInit {
content: data.count,
style: {
fontSize: 28,
fill: '#8c8c8c',
fill: '##000',
textAlign: 'center'
},
offsetY: 20
@ -271,6 +289,50 @@ export class DatatableDataindexComponent implements OnInit {
}
}
/**
* 构建面积图
* @param el
*/
private initAreaMap(el: HTMLElement, datas: any[]): void {
const chart = new Chart({
container: el,
autoFit: true,
height: 500
});
chart.data(datas);
chart.scale('Data', {
range: [0, 1],
tickCount: 10,
type: 'timeCat'
});
chart.scale('sales', {
nice: true
});
chart.axis('Data', false);
chart.axis('sales', false);
chart.tooltip({
showCrosshairs: true
});
// chart.annotation().dataMarker({
// position: ['2014-01', 1750],
// top: true,
// text: {
// content: '因政策调整导致销量下滑',
// style: {
// fontSize: 13
// }
// },
// line: {
// length: 30
// }
// });
chart.line().position('Data*sales');
chart.area().position('Data*sales');
chart.render();
}
/**
* 构建大区业绩完成情况柱折双轴图
* @param el
@ -308,6 +370,7 @@ export class DatatableDataindexComponent implements OnInit {
// 声明需要进行自定义图例字段： 'item'
chart.legend({
title: { text: '1111', spacing: 11 },
offsetY: 10,
position: 'bottom', // 配置图例显示位置
custom: true, // 关键字段，告诉 G2，要使用自定义的图例
@ -333,7 +396,11 @@ export class DatatableDataindexComponent implements OnInit {
* @param el
* @param data
*/
private initBiaxialChart(el: HTMLElement, data: any[]) {
private initBiaxialChart(
el: HTMLElement,
data: any[],
{ y1Title, y2Title, y3Title }: { y1Title: string; y2Title: string; y3Title: string }
) {
const chart = new Chart({
container: el,
autoFit: true,
@ -342,45 +409,47 @@ export class DatatableDataindexComponent implements OnInit {
chart.data(data);
// 设置坐标轴
chart.scale({
pre: { alias: '同期业绩完成率', min: 0, max: 1, formatter: val => val * 100 + '%' },
pre2: { alias: '业绩完成率', min: 0, max: 1, formatter: val => val * 100 + '%' },
quantity: { alias: '业绩量 (万)', min: 0, max: 1000000 }
y1: { alias: y1Title, min: 0, max: 1000000 },
y2: { alias: y2Title, min: 0, max: 1, formatter: val => (val * 100).toFixed(0) + '%' },
y3: { alias: y3Title, min: 0, max: 1, formatter: val => (val * 100).toFixed(0) + '%' }
});
// 设置
chart.legend({
custom: true,
position: 'top-right',
padding: [10, 0, 40, 0],
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 } } }
{ value: 'y1', name: y1Title, marker: { symbol: 'circle', style: { fill: '#E60012', r: 5, fontSize: 13 } } },
{ value: 'y3', name: y3Title, marker: { symbol: 'circle', style: { fill: '#6CBFFF', r: 5, fontSize: 13 } } },
{ value: 'y2', name: y2Title, marker: { symbol: 'circle', style: { fill: '#50D4AB', r: 5, fontSize: 13 } } }
]
});
chart.axis('pre', {
chart.axis('y2', {
grid: null,
title: null,
label: {
formatter: val => +val * 100 + '%'
formatter: val => val
}
});
chart.axis('pre2', false);
chart.axis('y3', false);
chart.tooltip({
shared: true
});
chart.interval().position('time*quantity').label('quantity').color('#3182bd');
chart.interval().position('x*y1').color('#E60012');
chart
.line()
.position('time*pre')
.label('pre', val => ({ content: (val * 100).toFixed(0) + '%' }))
.color('#ff4d4f')
.position('x*y2')
// .label('pre', val => ({ content: (val * 100).toFixed(0) + '%' }))
.color('#6CBFFF')
.size(3);
chart.point().position('time*pre').color('#ff4d4f').size(3).shape('circle');
chart.point().position('x*y2').color('#6CBFFF').size(3).shape('circle');
chart
.line()
.position('time*pre2')
.label('pre2', val => ({ content: (val * 100).toFixed(0) + '%' }))
.color('#fdae6b')
.position('x*y3')
// .label('pre2', val => ({ content: (val * 100).toFixed(0) + '%' }))
.color('#50D4AB')
.size(3);
chart.point().position('time*pre2').color('#fdae6b').size(3).shape('circle');
chart.point().position('x*y3').color('#50D4AB').size(3).shape('circle');
chart.interaction('active-region');
chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
@ -417,11 +486,10 @@ export class DatatableDataindexComponent implements OnInit {
private formatBarData(data: DataPerformanceTrendVO[]): any[] {
return data.map(item => ({
time: item.time,
quantity: item.quantity,
color: undefined,
pre: Math.floor(Math.random() * 100) / 100,
pre2: Math.floor(Math.random() * 100) / 100
x: item.time,
y1: item.quantity,
y2: Math.floor(Math.random() * 100) / 100,
y3: Math.floor(Math.random() * 100) / 100
}));
}

6
src/app/routes/partner/partner-list/components/index/partner-list.component.ts
View File

@ -25,7 +25,7 @@ export class PartnerListComponent {
@ViewChild('editTemplate', { static: true })
editTemplate: any;
templateId: any;
templateId: any;
templates: any[] = [];
@ViewChild('editCannel', { static: true })
@ -73,7 +73,9 @@ export class PartnerListComponent {
nzFooter: null
});
modal.afterClose.subscribe(res => {
modal.destroy();
if (res) {
this.st.load(1);
}
});
}

7
src/app/routes/partner/partner-list/components/partner-audit-modal/partner-audit-modal.component.ts
View File

@ -1,5 +1,6 @@
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { SFComponent, SFSchema, SFValue } from '@delon/form';
import { ModalHelper } from '@delon/theme';
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
import { PartnerListService } from '../../services/partner-list.service';
@ -15,7 +16,7 @@ export class PartnerAuditModalComponent implements OnInit {
info: any;
schema!: SFSchema;
sourcePage = '';
constructor(private nzModalService: NzModalService, public service: PartnerListService) {}
constructor(private nzModalService: NzModalService, public service: PartnerListService, private modal: NzModalRef) {}
ngOnInit(): void {
this.initSF(this.info);
@ -49,7 +50,7 @@ export class PartnerAuditModalComponent implements OnInit {
widget: 'radio',
hidden: this.info.isPass !== undefined
},
default: true
default: this.info.isPass !== undefined ? this.info.isPass : true
},
channelId: {
title: '渠道销售',
@ -121,7 +122,7 @@ export class PartnerAuditModalComponent implements OnInit {
.subscribe(res => {
if (res) {
this.service.msgSrv.success('审核成功！');
this.close();
this.modal.destroy(1);
}
});
}

8
src/app/routes/partner/partner-list/components/partner-detail/partner-detail.component.ts
View File

@ -142,6 +142,12 @@ export class PartnerDetailComponent implements OnInit, OnDestroy {
nzComponentParams: { info: { ...this.detailData, isPass }, sourcePage: '合伙人审核详情' },
nzFooter: null
});
modal.afterClose.subscribe(res => {
if (res) {
this.initData();
}
});
}
ratify() {
@ -370,7 +376,7 @@ export class PartnerDetailComponent implements OnInit, OnDestroy {
buttons: [
{
text: '详情',
click: (item) => this.service.showChangeDetail(item.id)
click: item => this.service.showChangeDetail(item.id)
}
]
}

6
src/app/routes/partner/partner-list/components/personal-partner-detail/personal-partner-detail.component.ts
View File

@ -130,6 +130,12 @@ export class PersonalPartnerDetailComponent implements OnInit {
},
nzFooter: null
});
modal.afterClose.subscribe(res => {
if (res) {
this.initData();
}
});
}
ratify() {