From 29789d20ab4d2ba26ac95f8d9b27a1c9819b3b41 Mon Sep 17 00:00:00 2001 From: Taric Xin Date: Fri, 22 Apr 2022 14:42:08 +0800 Subject: [PATCH] edit --- proxy.conf.js | 2 +- .../dataindex/dataindex.component.html | 21 +-- .../dataindex/dataindex.component.less | 9 ++ .../dataindex/dataindex.component.ts | 138 +++++++++++++----- .../index/partner-list.component.ts | 6 +- .../partner-audit-modal.component.ts | 7 +- .../partner-detail.component.ts | 8 +- .../personal-partner-detail.component.ts | 6 + 8 files changed, 145 insertions(+), 52 deletions(-) diff --git a/proxy.conf.js b/proxy.conf.js index eb92fbd4..00392e43 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 cdeed077..55bda674 100644 --- a/src/app/routes/datatable/components/dataindex/dataindex.component.html +++ b/src/app/routes/datatable/components/dataindex/dataindex.component.html @@ -25,7 +25,7 @@ - @@ -35,7 +35,7 @@ - @@ -43,13 +43,13 @@
-
- +
+
-
- +
+ @@ -57,16 +57,17 @@
-
- +
+
-
- +
+ + diff --git a/src/app/routes/datatable/components/dataindex/dataindex.component.less b/src/app/routes/datatable/components/dataindex/dataindex.component.less index e69de29b..36153e65 100644 --- a/src/app/routes/datatable/components/dataindex/dataindex.component.less +++ b/src/app/routes/datatable/components/dataindex/dataindex.component.less @@ -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; +} \ No newline at end of file diff --git a/src/app/routes/datatable/components/dataindex/dataindex.component.ts b/src/app/routes/datatable/components/dataindex/dataindex.component.ts index 168dc88f..ab6a8528 100644 --- a/src/app/routes/datatable/components/dataindex/dataindex.component.ts +++ b/src/app/routes/datatable/components/dataindex/dataindex.component.ts @@ -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 })); } diff --git a/src/app/routes/partner/partner-list/components/index/partner-list.component.ts b/src/app/routes/partner/partner-list/components/index/partner-list.component.ts index 93698e61..87ef9a27 100644 --- a/src/app/routes/partner/partner-list/components/index/partner-list.component.ts +++ b/src/app/routes/partner/partner-list/components/index/partner-list.component.ts @@ -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); + } }); } diff --git a/src/app/routes/partner/partner-list/components/partner-audit-modal/partner-audit-modal.component.ts b/src/app/routes/partner/partner-list/components/partner-audit-modal/partner-audit-modal.component.ts index f6fbcaac..1c2c4d4f 100644 --- a/src/app/routes/partner/partner-list/components/partner-audit-modal/partner-audit-modal.component.ts +++ b/src/app/routes/partner/partner-list/components/partner-audit-modal/partner-audit-modal.component.ts @@ -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); } }); } diff --git a/src/app/routes/partner/partner-list/components/partner-detail/partner-detail.component.ts b/src/app/routes/partner/partner-list/components/partner-detail/partner-detail.component.ts index 80a9aa45..0df4d752 100644 --- a/src/app/routes/partner/partner-list/components/partner-detail/partner-detail.component.ts +++ b/src/app/routes/partner/partner-list/components/partner-detail/partner-detail.component.ts @@ -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) } ] } diff --git a/src/app/routes/partner/partner-list/components/personal-partner-detail/personal-partner-detail.component.ts b/src/app/routes/partner/partner-list/components/personal-partner-detail/personal-partner-detail.component.ts index ab33519c..29052c55 100644 --- a/src/app/routes/partner/partner-list/components/personal-partner-detail/personal-partner-detail.component.ts +++ b/src/app/routes/partner/partner-list/components/personal-partner-detail/personal-partner-detail.component.ts @@ -130,6 +130,12 @@ export class PersonalPartnerDetailComponent implements OnInit { }, nzFooter: null }); + + modal.afterClose.subscribe(res => { + if (res) { + this.initData(); + } + }); } ratify() {