From 0fc8b927a18d1f63a78675473096c847a4bcbbb4 Mon Sep 17 00:00:00 2001 From: Lingzi Date: Thu, 31 Mar 2022 19:21:24 +0800 Subject: [PATCH] fix bug --- .../busiindex/busiindex.component.html | 7 +- .../busiindex/busiindex.component.ts | 52 ++---- .../busiindex/curve/curve.component.html | 2 +- .../busiindex/curve/curve.component.ts | 49 +++--- .../busiindex/curve2/curve.component.ts | 92 ----------- .../busiindex/pillar/pillar.component.html | 2 +- .../busiindex/pillar/pillar.component.ts | 40 ++--- .../mantable/mantable.component.html | 1 - .../customindex/customindex.component.html | 1 - .../customindex/customindex.component.ts | 1 + .../customtable/driver/driver.component.ts | 3 +- .../customtable/owner/owner.component.html | 2 +- .../customtable/owner/owner.component.ts | 70 +++++--- .../curve/curve.component.spec.ts | 24 --- .../operationtable/curve/curve.component.ts | 154 ++++++------------ .../operationtable.component.html | 27 ++- .../operationtable.component.ts | 34 +++- .../operationtable/pie/pie.component.html | 7 +- .../operationtable/pie/pie.component.less | 2 +- .../operationtable/pie/pie.component.ts | 11 +- .../pillar/pillar.component.html} | 0 .../pillar/pillar.component.less} | 0 .../operationtable/pillar/pillar.component.ts | 75 +++++++++ src/app/routes/datatable/datatable.module.ts | 11 +- .../routes/datatable/services/data.service.ts | 9 +- 25 files changed, 319 insertions(+), 357 deletions(-) delete mode 100644 src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.ts delete mode 100644 src/app/routes/datatable/components/operationtable/curve/curve.component.spec.ts rename src/app/routes/datatable/components/{busitable/busiindex/curve2/curve.component.html => operationtable/pillar/pillar.component.html} (100%) rename src/app/routes/datatable/components/{busitable/busiindex/curve2/curve.component.less => operationtable/pillar/pillar.component.less} (100%) create mode 100644 src/app/routes/datatable/components/operationtable/pillar/pillar.component.ts diff --git a/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html index 2ed7ccb3..234c748e 100644 --- a/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html +++ b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html @@ -32,7 +32,7 @@
- +
@@ -43,9 +43,9 @@
环比(%)
- + - +
@@ -53,7 +53,6 @@
- \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts index af0711a4..2a15b70e 100644 --- a/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts +++ b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts @@ -4,7 +4,8 @@ import { DatePipe, _HttpClient } from '@delon/theme'; import { differenceInCalendarDays } from 'date-fns'; import { DataService } from '../../../services/data.service'; import { Chart } from '@antv/g2'; -import { BusitableCurveComponent } from './curve2/curve.component'; +import { BusitablePillarComponent } from './pillar/pillar.component'; +import { BusitableCurveComponent } from './curve/curve.component'; @Component({ selector: 'app-datatable-busiindex', @@ -16,6 +17,7 @@ import { BusitableCurveComponent } from './curve2/curve.component'; export class DatatableBusiindexComponent implements OnInit { @ViewChild('st') private readonly st!: STComponent; @ViewChild('curve') private readonly curve!: BusitableCurveComponent; + @ViewChild('pillar') private readonly pillar!: BusitablePillarComponent; type = 1; mode = 'year'; date: any = null; @@ -26,9 +28,8 @@ export class DatatableBusiindexComponent implements OnInit { timeNext: any = ['2022-01-01 00:00:00'] dateFormat = 'yyyy-MM-dd'; today = new Date(); - chainRatio: any = [] chartData: any = {} - el: any; + flag = false; columns: STColumn[] = [ { title: '运营主体', index: 'networkTransporterName', className: 'text-center' }, @@ -80,12 +81,11 @@ export class DatatableBusiindexComponent implements OnInit { }; this.service.request(this.service.$api_performanceReportHistogram, params).subscribe(res => { if (res) { - this.chainRatio = res.chainRatio this.chartData = res - setTimeout(() => { - this.ngZone.runOutsideAngular(() => this.init(this.el)); - }, 1000); - + if(this.flag) { + this.pillar.reRender() + this.curve.reRender() + } } }) } @@ -124,6 +124,8 @@ export class DatatableBusiindexComponent implements OnInit { } else if(this.mode === 'month') { this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00'] } + this.flag = true + this.initData() } disabledDate = (current: Date): boolean => // Can not select days before today and today @@ -131,38 +133,4 @@ export class DatatableBusiindexComponent implements OnInit { exportFun(){ } - - render(el: ElementRef): void { - this.el = el.nativeElement - - } - - private init(el: HTMLElement): void { - const chart = new Chart({ - container: el, - autoFit: true, - height: 500, - }); - - chart.data(this.chainRatio); - chart.scale({ - year: { - range: [0, 1], - }, - value: { - min: 0, - nice: true, - }, - }); - - chart.tooltip({ - showCrosshairs: true, // 展示 Tooltip 辅助线 - shared: true, - }); - - chart.line().position('time*value').label('value'); - chart.point().position('time*value'); - - chart.render(); - } } diff --git a/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.html b/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.html index 0640a4d4..315c4e18 100644 --- a/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.html +++ b/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.ts b/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.ts index c1a6e85e..70fd0aad 100644 --- a/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.ts +++ b/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.ts @@ -1,6 +1,4 @@ import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core'; -import { G2MiniAreaClickItem } from '@delon/chart/mini-area'; -import DataSet from '@antv/data-set'; import { Chart } from '@antv/g2'; import { DataService } from 'src/app/routes/datatable/services/data.service'; @Component({ @@ -9,43 +7,44 @@ import { DataService } from 'src/app/routes/datatable/services/data.service'; styleUrls: ['./curve.component.less'] }) export class BusitableCurveComponent implements OnInit, OnChanges { - @Input() chartData: any; el: any; + @Input() chartData: any; + chart: any; constructor(private service: DataService, private ngZone: NgZone) { } + ngOnChanges(changes: SimpleChanges): void { + if (this.chartData) { + // setTimeout(()=>{ + // this.chart.render(true) + // }, 1000) + + } + } ngOnInit(): void { } - - ngOnChanges(changes: SimpleChanges): void { - if (this.chartData) { - setTimeout(() => { - this.ngZone.runOutsideAngular(() => this.init(this.el)); - }, 2000) - - } + reRender() { + setTimeout(() => { + this.chart.data(this.chartData); + this.chart.render(); + }, 500) } - - - handleClick(data: G2MiniAreaClickItem): void { - this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`); - } - render(el: ElementRef): void { this.el = el.nativeElement - // this.ngZone.runOutsideAngular(() => this.init(this.el)); + this.ngZone.runOutsideAngular(() => this.init(this.el)); } + private init(el: HTMLElement): void { - const chart = new Chart({ + this.chart = new Chart({ container: el, autoFit: true, height: 500, }); - chart.data(this.chartData); - chart.scale({ + this.chart.data(this.chartData); + this.chart.scale({ year: { range: [0, 1], }, @@ -55,15 +54,15 @@ export class BusitableCurveComponent implements OnInit, OnChanges { }, }); - chart.tooltip({ + this.chart.tooltip({ showCrosshairs: true, // 展示 Tooltip 辅助线 shared: true, }); - chart.line().position('time*value').label('value'); - chart.point().position('time*value'); + this.chart.line().position('time*value').label('value'); + this.chart.point().position('time*value'); - chart.render(); + this.chart.render(); } } \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.ts b/src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.ts deleted file mode 100644 index a02dff78..00000000 --- a/src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core'; -import { G2MiniAreaClickItem } from '@delon/chart/mini-area'; -import DataSet from '@antv/data-set'; -import { Chart } from '@antv/g2'; -import { DataService } from 'src/app/routes/datatable/services/data.service'; -@Component({ - selector: 'app-busitable-curve', - templateUrl: './curve.component.html', - styleUrls: ['./curve.component.less'] -}) -export class BusitableCurveComponent implements OnInit, OnChanges { - @Input() chartData: any ; - el: any; - constructor(private service: DataService, private ngZone: NgZone) { - - } - ngOnChanges(changes: SimpleChanges): void { - if(this.chartData){ - setTimeout(()=>{ - this.ngZone.runOutsideAngular(() => this.init(this.el)); - }, 3000) - - } - } - - ngOnInit(): void { - this.initData() - } - initData(){ - this.service.request(this.service.$api_operationalReportWaybillStatusDistribution).subscribe(res => { - if (res) { - this.chartData = res - this.ngZone.runOutsideAngular(() => this.init(this.el)); - } - }) - } - render(el: ElementRef): void { - this.el = el.nativeElement - } - private init(el: HTMLElement): void { - const ds = new DataSet(); - const dv = ds.createView().source(this.chartData); - dv.transform({ - type: 'map', - callback: row => { - row.year = parseInt(row.year, 10); - return row; - } - }).transform({ - type: 'regression', - method: 'polynomial', - fields: ['year', 'value'], - bandwidth: 0.1, - as: ['Year', 'Value'] - }); - - const chart = new Chart({ - container: el, - autoFit: true, - height: 500, - padding: [20, 40], - }); - - const view1 = chart.createView(); - view1.data(this.chartData); - view1.scale('price', { - nice: true, - }); - view1.tooltip({ - showMarkers: false, - shared: true, - }); - - view1 - .interval() - .position('month*price') - .color('name') - .adjust([ - { - type: 'dodge', - marginRatio: 0, - }, - ]); - - - // chart.interaction('active-region'); - chart.render(); - - } -} - - diff --git a/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.html b/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.html index 0640a4d4..315c4e18 100644 --- a/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.html +++ b/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.ts b/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.ts index f7460ec9..ad1cef14 100644 --- a/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.ts +++ b/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.ts @@ -7,48 +7,50 @@ import { DataService } from 'src/app/routes/datatable/services/data.service'; styleUrls: ['./pillar.component.less'] }) export class BusitablePillarComponent implements OnInit, OnChanges { - el: any; - @Input() chartData: any ; + @Input() chartData: any; + chart: any; constructor(private service: DataService, private ngZone: NgZone) { } ngOnChanges(changes: SimpleChanges): void { - if(this.chartData){ - setTimeout(()=>{ - this.ngZone.runOutsideAngular(() => this.init(this.el)); - }, 1000) - + if (this.chartData) { + // setTimeout(()=>{ + // this.chart.render(true) + // }, 1000) + } } ngOnInit(): void { - + + } + reRender() { + setTimeout(() => { + this.chart.data(this.chartData); + this.chart.render(); + }, 500) } render(el: ElementRef): void { this.el = el.nativeElement + this.ngZone.runOutsideAngular(() => this.init(this.el)); } - private init(el: HTMLElement): void { - const chart = new Chart({ + this.chart = new Chart({ container: el, autoFit: true, height: 500, }); - - chart.data(this.chartData); - chart.tooltip({ + this.chart.data(this.chartData); + + this.chart.tooltip({ showMarkers: false, }); - chart.interval().position('time*number'); - - chart.interaction('element-active'); - - chart.render(); - + this.chart.interval().position('time*number'); + this.chart.render(); } } \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/mantable/mantable.component.html b/src/app/routes/datatable/components/busitable/mantable/mantable.component.html index 835e4a2e..88d2016b 100644 --- a/src/app/routes/datatable/components/busitable/mantable/mantable.component.html +++ b/src/app/routes/datatable/components/busitable/mantable/mantable.component.html @@ -38,5 +38,4 @@ - \ No newline at end of file diff --git a/src/app/routes/datatable/components/customtable/customindex/customindex.component.html b/src/app/routes/datatable/components/customtable/customindex/customindex.component.html index d70ba207..1b5b0a1f 100644 --- a/src/app/routes/datatable/components/customtable/customindex/customindex.component.html +++ b/src/app/routes/datatable/components/customtable/customindex/customindex.component.html @@ -55,5 +55,4 @@ - \ No newline at end of file diff --git a/src/app/routes/datatable/components/customtable/customindex/customindex.component.ts b/src/app/routes/datatable/components/customtable/customindex/customindex.component.ts index c2acb2b1..d8b85955 100644 --- a/src/app/routes/datatable/components/customtable/customindex/customindex.component.ts +++ b/src/app/routes/datatable/components/customtable/customindex/customindex.component.ts @@ -23,6 +23,7 @@ export class DatatableCustomindexComponent implements OnInit { dateNext: any = null; modeNext = 'year'; timeNext: any = ['2022-01-01 00:00:00'] + columns: STColumn[] = [ { title: '用户类型', index: 'networkTransporterName', className: 'text-center' }, diff --git a/src/app/routes/datatable/components/customtable/driver/driver.component.ts b/src/app/routes/datatable/components/customtable/driver/driver.component.ts index b69286d8..6932fd0b 100644 --- a/src/app/routes/datatable/components/customtable/driver/driver.component.ts +++ b/src/app/routes/datatable/components/customtable/driver/driver.component.ts @@ -52,7 +52,8 @@ export class DatatableDriverComponent implements OnInit { } let params: any = { time: this.time, - type: this.type + type: this.type, + ...this.sf?.value }; delete params._$expand; diff --git a/src/app/routes/datatable/components/customtable/owner/owner.component.html b/src/app/routes/datatable/components/customtable/owner/owner.component.html index 71e913ac..35c64a0e 100644 --- a/src/app/routes/datatable/components/customtable/owner/owner.component.html +++ b/src/app/routes/datatable/components/customtable/owner/owner.component.html @@ -38,7 +38,7 @@ - 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 40bb4492..a7d178f8 100644 --- a/src/app/routes/datatable/components/customtable/owner/owner.component.ts +++ b/src/app/routes/datatable/components/customtable/owner/owner.component.ts @@ -26,23 +26,33 @@ export class DatatableOwnerComponent implements OnInit { schema: SFSchema = {}; columns: STColumn[] = [ - { title: '货主名称', index: 'networkTransporterName', className: 'text-center' }, - { title: '注册时间', index: 'zsl', className: 'text-center' }, - { title: '客户类型', index: 'yingsje', className: 'text-center' }, - { title: '业务员', index: 'cys', className: 'text-center' }, - { title: '合伙人', index: 'yingfyf', className: 'text-center' }, - { title: '客户状态', index: 'yl', className: 'text-center' }, - { title: '订单数', index: 'djd', className: 'text-center' }, - { title: '订单金额', index: 'ysz', className: 'text-center' }, - { title: '应收订单数', index: 'yswc', className: 'text-center' }, - { title: '应收金额', index: 'yisje', className: 'text-center' }, + { title: '货主名称', index: 'enterpriseName', className: 'text-center' }, + { title: '注册时间', index: 'registerTime', className: 'text-center' }, + { title: '客户类型', index: 'customerType', className: 'text-center', type: 'enum', enum: { + 1: '平台客户', + 2: '直客', + 3: '渠道客户' + } + }, + { title: '业务员', index: 'salesmanName', className: 'text-center' }, + { title: '合伙人', index: 'partnerName', className: 'text-center' }, + { title: '客户状态', index: 'customerStatus', className: 'text-center', type: 'enum', enum: { + 1: '未激活', + 2: '沉默', + 3: '流失', + 4: '活跃' + } }, + { title: '订单数', index: 'zsl', className: 'text-center' }, + { title: '订单金额', index: 'ddje', className: 'text-center' }, + { title: '应收订单数', index: 'ysdds', className: 'text-center' }, + { title: '应收金额', index: 'yingsje', className: 'text-center' }, { title: '待开票订单数', index: 'yifyf', className: 'text-center' }, - { title: '待开票金额', index: 'yifyf', className: 'text-center' }, - { title: '已收金额', render: 'yifyf', className: 'text-center' }, - { title: '附加费金额', index: 'yifyf', className: 'text-center' }, - { title: '已收附加费', index: 'yifyf', className: 'text-center' }, - { title: '附加费率', index: 'yifyf', className: 'text-center' }, - { title: '已开票金额', index: 'yifyf', className: 'text-center' } + { title: '待开票金额', index: 'dkpdds', className: 'text-center' }, + { title: '已收金额', render: 'yisje', className: 'text-center' }, + { title: '应收附加费', index: 'yingsfjf', className: 'text-center' }, + { title: '已收附加费', index: 'yisfjf', className: 'text-center' }, + { title: '附加费率', index: 'fjfl', className: 'text-center' }, + { title: '已开票金额', index: 'ykpje', className: 'text-center' } ]; /** * 查询参数 @@ -59,7 +69,8 @@ export class DatatableOwnerComponent implements OnInit { } let params: any = { time: this.time, - type: this.type + type: this.type, + ...this.sf?.value }; delete params._$expand; @@ -76,28 +87,41 @@ export class DatatableOwnerComponent implements OnInit { this.schema = { properties: { _$expand: { type: 'boolean', ui: { hidden: true } }, - billCode: { + enterpriseName: { type: 'string', title: '货主名称', ui: { placeholder: '请输入', } }, - resourceCode: { + customerType: { type: 'string', title: '客户类型', ui: { + widget: 'select', placeholder: '请选择', - } + }, + enum: [ + {label: '直客', value: 2}, + {label: '渠道客户', value: 3}, + {label: '平台客户', value: 1}, + ] }, - loadingPlace: { + customerStatus: { type: 'string', title: '客户状态', ui: { + widget: 'select', placeholder: '请选择', - } + }, + enum: [ + {label: '未激活', value: 1}, + {label: '沉默', value: 2}, + {label: '流失', value: 3}, + {label: '活跃', value: 4}, + ] }, - createTime: { + registerTime: { title: '注册时间', type: 'string', ui: { diff --git a/src/app/routes/datatable/components/operationtable/curve/curve.component.spec.ts b/src/app/routes/datatable/components/operationtable/curve/curve.component.spec.ts deleted file mode 100644 index cd009e56..00000000 --- a/src/app/routes/datatable/components/operationtable/curve/curve.component.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; -import { DatatableDataindexComponent } from './dataindex.component'; - -describe('DatatableDataindexComponent', () => { - let component: DatatableDataindexComponent; - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ DatatableDataindexComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(DatatableDataindexComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/routes/datatable/components/operationtable/curve/curve.component.ts b/src/app/routes/datatable/components/operationtable/curve/curve.component.ts index 8f76f6cd..44a3a28e 100644 --- a/src/app/routes/datatable/components/operationtable/curve/curve.component.ts +++ b/src/app/routes/datatable/components/operationtable/curve/curve.component.ts @@ -1,131 +1,81 @@ -import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core'; -import { G2MiniAreaClickItem } from '@delon/chart/mini-area'; -import { DataService } from '../../../services/data.service'; -import DataSet from '@antv/data-set'; +import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core'; import { Chart } from '@antv/g2'; +import { DataService } from 'src/app/routes/datatable/services/data.service'; @Component({ - selector: 'app-datatable-curve', + selector: 'app-operation-curve', templateUrl: './curve.component.html', styleUrls: ['./curve.component.less'] }) -export class OperationtableCurveComponent implements OnInit { - +export class OperationCurveComponent implements OnInit, OnChanges { + el: any; + @Input() chartData: any; + chart: any; constructor(private service: DataService, private ngZone: NgZone) { } + ngOnChanges(changes: SimpleChanges): void { + if (this.chartData) { + // setTimeout(()=>{ + // this.chart.render(true) + // }, 1000) + + } + } ngOnInit(): void { } - - - - - handleClick(data: G2MiniAreaClickItem): void { - this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`); + reRender() { + setTimeout(() => { + this.chart.data(this.chartData); + this.chart.render(); + }, 1000) } - render(el: ElementRef): void { - this.ngZone.runOutsideAngular(() => this.init(el.nativeElement)); + this.el = el.nativeElement + setTimeout(() => { + this.ngZone.runOutsideAngular(() => this.init(this.el)); + }, 1000) } - private init(el: HTMLElement): void { - const data = [ - { name: '订单数', month: '01', count: 150, }, - { name: '订单数', month: '02', count: 288 }, - { name: '订单数', month: '03', count: 393 }, - { name: '订单数', month: '04', count: 814 }, - { name: '订单数', month: '05', count: 47 }, - { name: '承运数', month: '05', count: 124 }, - { name: '订单数', month: '06', count: 203 }, - { name: '承运数', month: '06', count: 203 }, - { name: '订单数', month: '07', count: 24 }, - { name: '订单数', month: '08', count: 356 }, - { name: '承运数', month: '09', count: 124 }, - { name: '承运数', month: '10', count: 232 }, - { name: '承运数', month: '11', count: 345 }, - { name: '承运数', month: '12', count: 997 } - ]; - const dataPillar = [ - { name: '应收金额(元)', month: '01', price: 18.9, }, - { name: '应收金额(元)', month: '02', price: 28.8 }, - { name: '应收金额(元)', month: '03', price: 39.3 }, - { name: '应收金额(元)', month: '04', price: 81.4 }, - { name: '应收金额(元)', month: '05', price: 47 }, - { name: '应付金额(元)', month: '05', price: 12.4 }, - { name: '应收金额(元)', month: '06', price: 20.3 }, - { name: '应付金额(元)', month: '06', price: 20.3 }, - { name: '应收金额(元)', month: '07', price: 24 }, - { name: '应收金额(元)', month: '08', price: 35.6 }, - { name: '应付金额(元)', month: '09', price: 12.4 }, - { name: '应付金额(元)', month: '10', price: 23.2 }, - { name: '应付金额(元)', month: '11', price: 34.5 }, - { name: '应付金额(元)', month: '12', price: 99.7 } - ]; - const ds = new DataSet(); - const dv = ds.createView().source(data); - dv.transform({ - type: 'map', - callback: row => { - row.year = parseInt(row.year, 10); - return row; - } - }).transform({ - type: 'regression', - method: 'polynomial', - fields: ['year', 'value'], - bandwidth: 0.1, - as: ['Year', 'Value'] - }); - const chart = new Chart({ + private init(el: HTMLElement): void { + this.chart = new Chart({ container: el, autoFit: true, height: 500, - padding: [20, 40], }); - const view1 = chart.createView(); - view1.data(dataPillar); - view1.scale('price', { - nice: true, + this.chart.data(this.chartData); + this.chart.scale({ + time: { + range: [0, 1], + }, + number: { + nice: true, + }, }); - view1.tooltip({ - showMarkers: false, + + this.chart.tooltip({ + showCrosshairs: true, shared: true, }); - - view1 - .interval() - .position('month*price') - .color('name') - .adjust([ - { - type: 'dodge', - marginRatio: 0, + + this.chart.axis('number', { + label: { + formatter: (val: any) => { + return val; }, - ]); - - const view2 = chart.createView(); - // view2.axis('count', { - // label: { - // formatter: (val) => { - // return val + ' °C'; - // }, - // }, - // }); - view2.data(data); - view2 + }, + }); + + this.chart .line() - .position('month*count') + .position('time*number') .color('name') - - - - - // chart.interaction('active-region'); - chart.render(); - + + + this.chart.render(); + } -} - +} \ No newline at end of file diff --git a/src/app/routes/datatable/components/operationtable/operationtable.component.html b/src/app/routes/datatable/components/operationtable/operationtable.component.html index bfd7283d..eb11b8ba 100644 --- a/src/app/routes/datatable/components/operationtable/operationtable.component.html +++ b/src/app/routes/datatable/components/operationtable/operationtable.component.html @@ -28,7 +28,7 @@
- +
@@ -42,11 +42,22 @@
- +
+
+ + + + +
+
+ + +
+
- - - - - - \ No newline at end of file + + diff --git a/src/app/routes/datatable/components/operationtable/operationtable.component.ts b/src/app/routes/datatable/components/operationtable/operationtable.component.ts index 51a2f215..e94ec542 100644 --- a/src/app/routes/datatable/components/operationtable/operationtable.component.ts +++ b/src/app/routes/datatable/components/operationtable/operationtable.component.ts @@ -3,6 +3,8 @@ import { STColumn, STComponent } from '@delon/abc/st'; import { DatePipe, _HttpClient } from '@delon/theme'; import { DataService } from '../../services/data.service'; import { differenceInCalendarDays } from 'date-fns'; +import { OperationCurveComponent } from './curve/curve.component'; +import { OperationPillarComponent } from './pillar/pillar.component'; @Component({ selector: 'app-datatable-operationtable', @@ -12,6 +14,8 @@ import { differenceInCalendarDays } from 'date-fns'; }) export class DatatableOperationtableComponent implements OnInit { + @ViewChild('curve') private readonly curve!: OperationCurveComponent; + @ViewChild('pillar') private readonly pillar!: OperationPillarComponent; @ViewChild('st') private readonly st!: STComponent; type = 1; mode = 'year'; @@ -24,8 +28,10 @@ export class DatatableOperationtableComponent implements OnInit { timeNext: any = ['2022-01-01 00:00:00'] today = new Date(); enterpriseInfoId = '' - enterpriseInfoIdPie = '' + interManlist: any = [] + chartData: any = {} + flag = false; columns: STColumn[] = [ { title: '运营主体', index: 'networkTransporterName', className: 'text-center' }, { title: '订单数', index: 'zsl', className: 'text-center' }, @@ -64,12 +70,36 @@ export class DatatableOperationtableComponent implements OnInit { constructor(public service: DataService, private datePipe: DatePipe) { } ngOnInit(): void { this.initData() + this.initPillarData() + } + initPillarData(){ + let type = 1 + if(this.mode === 'year') { + type = 1 + } else if(this.mode === 'month') { + type = 2 + } + const params: any = { + time: this.timeNext, + type, + enterpriseInfoId: this.enterpriseInfoId + }; + this.flag = true + this.service.request(this.service.$api_operationalReportHistogram, params).subscribe(res => { + if (res) { + this.chartData = res + if(this.flag) { + this.pillar.reRender() + this.curve.reRender() + } + } + }) } initData() { + this.service.getNetworkFreightForwarder().subscribe(res => { this.interManlist = res this.enterpriseInfoId = res[0].value - this.enterpriseInfoIdPie = res[0].value }) } diff --git a/src/app/routes/datatable/components/operationtable/pie/pie.component.html b/src/app/routes/datatable/components/operationtable/pie/pie.component.html index f36f8f9d..c7a478c5 100644 --- a/src/app/routes/datatable/components/operationtable/pie/pie.component.html +++ b/src/app/routes/datatable/components/operationtable/pie/pie.component.html @@ -1,3 +1,6 @@ -
+ + + + -
\ No newline at end of file + \ No newline at end of file diff --git a/src/app/routes/datatable/components/operationtable/pie/pie.component.less b/src/app/routes/datatable/components/operationtable/pie/pie.component.less index a69b0822..567be99f 100644 --- a/src/app/routes/datatable/components/operationtable/pie/pie.component.less +++ b/src/app/routes/datatable/components/operationtable/pie/pie.component.less @@ -1,5 +1,5 @@ .box{ width: 50%; - overflow: hidden; margin:0 auto; + overflow: hidden; } \ No newline at end of file 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 594ed06d..fa58fbd1 100644 --- a/src/app/routes/datatable/components/operationtable/pie/pie.component.ts +++ b/src/app/routes/datatable/components/operationtable/pie/pie.component.ts @@ -13,21 +13,30 @@ export class OperationtablePieComponent implements OnInit { @ViewChild('pie', { static: false }) pie!: G2PieComponent; chartData: any = []; el: any; + enterpriseInfoIdPie = '' + interManlist: any = [] constructor(private service: DataService, private ngZone: NgZone) { } ngOnInit(): void { this.initData() + this.initManData() } initData(){ - this.service.request(this.service.$api_operationalReportWaybillStatusDistribution).subscribe(res => { + this.service.request(this.service.$api_operationalReportWaybillStatusDistribution, {id: this.enterpriseInfoIdPie}).subscribe(res => { if (res) { this.chartData = res this.ngZone.runOutsideAngular(() => this.init(this.el)); } }) } + initManData() { + this.service.getNetworkFreightForwarder().subscribe(res => { + this.interManlist = res + this.enterpriseInfoIdPie = res[0].value + }) + } render(el: ElementRef): void { this.el = el.nativeElement } diff --git a/src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.html b/src/app/routes/datatable/components/operationtable/pillar/pillar.component.html similarity index 100% rename from src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.html rename to src/app/routes/datatable/components/operationtable/pillar/pillar.component.html diff --git a/src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.less b/src/app/routes/datatable/components/operationtable/pillar/pillar.component.less similarity index 100% rename from src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.less rename to src/app/routes/datatable/components/operationtable/pillar/pillar.component.less diff --git a/src/app/routes/datatable/components/operationtable/pillar/pillar.component.ts b/src/app/routes/datatable/components/operationtable/pillar/pillar.component.ts new file mode 100644 index 00000000..54a3b4d4 --- /dev/null +++ b/src/app/routes/datatable/components/operationtable/pillar/pillar.component.ts @@ -0,0 +1,75 @@ +import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core'; +import { Chart } from '@antv/g2'; +import { DataService } from 'src/app/routes/datatable/services/data.service'; +@Component({ + selector: 'app-operation-pillar', + templateUrl: './pillar.component.html', + styleUrls: ['./pillar.component.less'] +}) +export class OperationPillarComponent implements OnInit, OnChanges { + el: any; + @Input() chartData: any; + chart: any; + constructor(private service: DataService, private ngZone: NgZone) { + + } + ngOnChanges(changes: SimpleChanges): void { + if (this.chartData) { + // setTimeout(()=>{ + // this.chart.render(true) + // }, 1000) + + } + } + + ngOnInit(): void { + + } + reRender() { + setTimeout(() => { + this.chart.data(this.chartData); + console.log(this.chartData) + this.chart.render(); + }, 1000) + } + render(el: ElementRef): void { + this.el = el.nativeElement + setTimeout(() => { + this.ngZone.runOutsideAngular(() => this.init(this.el)); + },1000) + } + + private init(el: HTMLElement): void { + this.chart = new Chart({ + container: el, + autoFit: true, + height: 500, + }); + + this.chart.data(this.chartData); + + this.chart.scale('number', { + nice: true, + }); + this.chart.tooltip({ + showMarkers: false, + shared: true, + }); + + this.chart + .interval() + .position('time*number') + .color('name') + .adjust([ + { + type: 'dodge', + marginRatio: 0, + }, + ]); + + this.chart.interaction('active-region'); + + this.chart.render(); + } + +} \ No newline at end of file diff --git a/src/app/routes/datatable/datatable.module.ts b/src/app/routes/datatable/datatable.module.ts index 0f4f2574..ac3f8d2f 100644 --- a/src/app/routes/datatable/datatable.module.ts +++ b/src/app/routes/datatable/datatable.module.ts @@ -8,7 +8,6 @@ import { DatatableOperationtableComponent } from './components/operationtable/op import { OperationtablePieComponent } from './components/operationtable/pie/pie.component'; import { DatatableOrderReportingComponent } from './reporting/components/order-reporting/order-reporting.component'; import { DatatableDataindexComponent } from './components/dataindex/dataindex.component'; -import { OperationtableCurveComponent } from './components/operationtable/curve/curve.component'; import { DatatableComplianceIndexComponent } from './components/compliance/index/index.component'; import { DatatableFinancetableComponent } from './components/financetable/financetable.component'; import { DatatableInvoicetableComponent } from './components/invoicetable/invoicetable.component'; @@ -23,7 +22,9 @@ import { DatatableBusiindexComponent } from './components/busitable/busiindex/bu import { DatatableMantableComponent } from './components/busitable/mantable/mantable.component'; import { BusitablePillarComponent } from './components/busitable/busiindex/pillar/pillar.component'; import { DatatableReportingFundInfoComponent } from './reporting/components/fund-info/fund-info.component'; -import { BusitableCurveComponent } from './components/busitable/busiindex/curve2/curve.component'; +import { BusitableCurveComponent } from './components/busitable/busiindex/curve/curve.component'; +import { OperationPillarComponent } from './components/operationtable/pillar/pillar.component'; +import { OperationCurveComponent } from './components/operationtable/curve/curve.component'; const COMPONENTS: Type[] = [ DatatableDataindexComponent, @@ -33,7 +34,6 @@ const COMPONENTS: Type[] = [ DatatableOperationtableComponent, OperationtablePieComponent, DatatableOrderReportingComponent, - OperationtableCurveComponent, DatatableComplianceIndexComponent, DatatableFinancetableComponent, DatatableInvoicetableComponent, @@ -48,8 +48,11 @@ const COMPONENTS: Type[] = [ DatatableMantableComponent, BusitablePillarComponent, DatatableFundReportingComponent, + DatatableReportingFundInfoComponent, BusitableCurveComponent, - DatatableReportingFundInfoComponent] + OperationPillarComponent, + OperationCurveComponent +] @NgModule({ diff --git a/src/app/routes/datatable/services/data.service.ts b/src/app/routes/datatable/services/data.service.ts index c9aafb0e..842d878f 100644 --- a/src/app/routes/datatable/services/data.service.ts +++ b/src/app/routes/datatable/services/data.service.ts @@ -27,6 +27,8 @@ export class DataService extends BaseService { $api_listPerformanceReportPage = `/api/sdc/report/listPerformanceReportPage`; // 运营报表运单状态分布 $api_operationalReportWaybillStatusDistribution = `/api/sdc/report/operationalReportWaybillStatusDistribution`; + // 运营报表柱状图 + $api_operationalReportHistogram = `/api/sdc/report/operationalReportHistogram`; // 获取网络货运人 $api_get_network_freight_forwarder_list = `/api/mdc/cuc/networkTransporter/findAll`; // 业绩报表柱状图 @@ -35,6 +37,9 @@ export class DataService extends BaseService { // 查询开票数据报表 $api_findInvoiceReport = `/api/fcc/invoiceReport/findInvoiceReport`; + // 查询货主报表 + $api_listShipperReportPage = `/api/sdc/report/listShipperReportPage`; + constructor(public injector: Injector) { super(injector); } @@ -43,7 +48,7 @@ export class DataService extends BaseService { * 获取网络货运人 * @returns */ - getNetworkFreightForwarder(params = {}, containerAll = false) { + getNetworkFreightForwarder(params = {}, containerAll = false) { return this.request(this.$api_get_network_freight_forwarder_list, params).pipe( map((res: any) => { if (!res) { @@ -64,7 +69,7 @@ export class DataService extends BaseService { ); } - getPerformanceReportHistogram(params = {}){ + getPerformanceReportHistogram(params = {}) { return this.request(this.$api_performanceReportHistogram, params) } }