From 2ce3afa020e96658975061a1442e0805596dcf38 Mon Sep 17 00:00:00 2001 From: wangshiming Date: Mon, 18 Apr 2022 19:59:21 +0800 Subject: [PATCH] fix bug --- .../mancustomtable.component.ts | 1 + .../customtable/owner/owner.component.ts | 2 +- .../financetable/financetable.component.ts | 2 +- .../operationtable.component.ts | 2 +- .../operationtable/pie/pie.component.ts | 54 +++++++++++-------- 5 files changed, 36 insertions(+), 25 deletions(-) diff --git a/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.ts b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.ts index c304ca58..e5056e66 100644 --- a/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.ts +++ b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.ts @@ -111,6 +111,7 @@ export class DatatableMancustomtableComponent implements OnInit { }; delete params._$expand; + delete params.sort; return { ...params }; } constructor(public service: DataService, private datePipe: DatePipe) {} diff --git a/src/app/routes/datatable/components/customtable/owner/owner.component.ts b/src/app/routes/datatable/components/customtable/owner/owner.component.ts index f3a81454..f9660833 100644 --- a/src/app/routes/datatable/components/customtable/owner/owner.component.ts +++ b/src/app/routes/datatable/components/customtable/owner/owner.component.ts @@ -156,7 +156,7 @@ export class DatatableOwnerComponent implements OnInit { } else if(this.mode === 'date') { this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00'] } else{ - this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00'] + this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + ' 00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00'] } this.st.reload({ ...this.reqParams }); } diff --git a/src/app/routes/datatable/components/financetable/financetable.component.ts b/src/app/routes/datatable/components/financetable/financetable.component.ts index ef318c6b..688dc89a 100644 --- a/src/app/routes/datatable/components/financetable/financetable.component.ts +++ b/src/app/routes/datatable/components/financetable/financetable.component.ts @@ -121,7 +121,7 @@ export class DatatableFinancetableComponent implements OnInit { } else if (this.mode === 'date') { this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00'] } else { - this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00'] + this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + ' 00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00'] } this.st.reload({ ...this.reqParams }); } diff --git a/src/app/routes/datatable/components/operationtable/operationtable.component.ts b/src/app/routes/datatable/components/operationtable/operationtable.component.ts index 891ee8e1..15a0571c 100644 --- a/src/app/routes/datatable/components/operationtable/operationtable.component.ts +++ b/src/app/routes/datatable/components/operationtable/operationtable.component.ts @@ -118,7 +118,7 @@ export class DatatableOperationtableComponent implements OnInit { } else if (this.mode === 'date') { this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00'] } else { - this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00'] + this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + ' 00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00'] } this.st.reload({ ...this.reqParams }); } diff --git a/src/app/routes/datatable/components/operationtable/pie/pie.component.ts b/src/app/routes/datatable/components/operationtable/pie/pie.component.ts index fa58fbd1..cc358bd7 100644 --- a/src/app/routes/datatable/components/operationtable/pie/pie.component.ts +++ b/src/app/routes/datatable/components/operationtable/pie/pie.component.ts @@ -13,9 +13,10 @@ export class OperationtablePieComponent implements OnInit { @ViewChild('pie', { static: false }) pie!: G2PieComponent; chartData: any = []; el: any; + chart: any; enterpriseInfoIdPie = '' interManlist: any = [] - + innerView: any =[]; constructor(private service: DataService, private ngZone: NgZone) { } @@ -27,7 +28,11 @@ export class OperationtablePieComponent implements OnInit { this.service.request(this.service.$api_operationalReportWaybillStatusDistribution, {id: this.enterpriseInfoIdPie}).subscribe(res => { if (res) { this.chartData = res - this.ngZone.runOutsideAngular(() => this.init(this.el)); + // this.ngZone.runOutsideAngular(() => this.init(this.el)); + setTimeout(() => { + this.chart?.data(this.chartData); + this.chart?.render(); + }, 1000) } }) } @@ -39,21 +44,26 @@ export class OperationtablePieComponent implements OnInit { } render(el: ElementRef): void { this.el = el.nativeElement + setTimeout(() => { + this.ngZone.runOutsideAngular(() => this.init(this.el)); + }, 500) } private init(el: HTMLElement): void { - const chart = new Chart({ + this.chart = new Chart({ container: el, autoFit: true, height: 400, }); // 新建一个 view 用来单独渲染Annotation - const innerView = chart.createView(); - chart.coordinate('theta', { + // const innerView = chart.createView(); + + this.innerView = this.chart.createView(); + this.chart.coordinate('theta', { radius: 0.6, innerRadius: 0.7, }); - chart.data(this.chartData); + // this.chart.data(this.chartData); // chart.scale('percent', { // formatter: val => { @@ -62,10 +72,10 @@ export class OperationtablePieComponent implements OnInit { // }, // }); - chart.tooltip(false); + this.chart.tooltip(false); // 声明需要进行自定义图例字段： 'item' - chart.legend('item', { + this.chart.legend('item', { position: 'right', // 配置图例显示位置 custom: true, // 关键字段，告诉 G2，要使用自定义的图例 items: this.chartData.map((obj: any, index: any) => { @@ -77,7 +87,7 @@ export class OperationtablePieComponent implements OnInit { symbol: 'square', // marker 的形状 style: { r: 5, // marker 图形半径 - fill: chart.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应 + fill: this.chart.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应 }, }, // marker 配置 }; @@ -90,7 +100,7 @@ export class OperationtablePieComponent implements OnInit { }, }); - const interval = chart + const interval = this.chart .interval() .adjust('stack') .position('percent') @@ -102,7 +112,7 @@ export class OperationtablePieComponent implements OnInit { }) .state({ active: { - style: element => { + style: (element: any) => { const shape = element.shape; return { lineWidth: 1, @@ -114,17 +124,17 @@ export class OperationtablePieComponent implements OnInit { }); // 移除图例点击过滤交互 - chart.removeInteraction('legend-filter'); - chart.interaction('element-active'); + this.chart.removeInteraction('legend-filter'); + this.chart.interaction('element-active'); - chart.render(true); + this.chart.render(true); // 默认选择 interval.elements[0].setState('selected', true); const ele = interval.elements[0].getData(); // 监听 element 上状态的变化来动态更新 Annotation 信息 - chart.on('element:statechange', (ev: any) => { + this.chart.on('element:statechange', (ev: any) => { const { state, stateStatus, element } = ev.gEvent.originalEvent; // 本示例只需要监听 active 的状态变化 @@ -142,10 +152,10 @@ export class OperationtablePieComponent implements OnInit { // 绘制 annotation let lastItem: any; - function updateAnnotation(data: any) { + const updateAnnotation = (data: any) => { if (data.item !== lastItem) { - innerView.annotation().clear(true); - innerView + this.innerView.annotation().clear(true); + this.innerView .annotation() .text({ position: ['50%', '50%'], @@ -168,7 +178,7 @@ export class OperationtablePieComponent implements OnInit { offsetX: -10, offsetY: 20, }) - innerView.render(true); + this.innerView.render(true); lastItem = data.item; @@ -176,9 +186,9 @@ export class OperationtablePieComponent implements OnInit { } // 清空 annotation - function clearAnnotation() { - innerView.annotation().clear(true); - innerView.render(true); + function clearAnnotation(this: any) { + this.innerView?.annotation()?.clear(true); + this.innerView.render(true); lastItem = null; }