diff --git a/proxy.conf.js b/proxy.conf.js index 67c15ee2..10071e14 100644 --- a/proxy.conf.js +++ b/proxy.conf.js @@ -20,7 +20,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/busitable/busiindex/busiindex.component.html b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html index f8c1a030..2ed7ccb3 100644 --- a/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html +++ b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html @@ -37,12 +37,21 @@ +
- +
+
环比(%) +
+ + +
- +
+
业绩量(元) +
+
diff --git a/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.less b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.less index 32c6893e..af1850ca 100644 --- a/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.less +++ b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.less @@ -9,3 +9,13 @@ display: inline-block; margin: 0 0 0 10px; } +.title{ + display: flex; + align-items: center; + .box{ + width: 8px; + height: 8px; + margin-right: 10px; + border-radius: 100px; + } +} 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 bfe52480..af0711a4 100644 --- a/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts +++ b/src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts @@ -1,8 +1,10 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, ElementRef, OnInit, ViewChild, NgZone } from '@angular/core'; import { STColumn, STComponent } from '@delon/abc/st'; 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'; @Component({ selector: 'app-datatable-busiindex', @@ -13,6 +15,7 @@ import { DataService } from '../../../services/data.service'; }) export class DatatableBusiindexComponent implements OnInit { @ViewChild('st') private readonly st!: STComponent; + @ViewChild('curve') private readonly curve!: BusitableCurveComponent; type = 1; mode = 'year'; date: any = null; @@ -23,7 +26,9 @@ export class DatatableBusiindexComponent implements OnInit { timeNext: any = ['2022-01-01 00:00:00'] dateFormat = 'yyyy-MM-dd'; today = new Date(); - chartData: any = [] + chainRatio: any = [] + chartData: any = {} + el: any; columns: STColumn[] = [ { title: '运营主体', index: 'networkTransporterName', className: 'text-center' }, @@ -58,7 +63,7 @@ export class DatatableBusiindexComponent implements OnInit { return { ...params }; } - constructor(public service: DataService, private datePipe: DatePipe) { } + constructor(public service: DataService, private datePipe: DatePipe, private ngZone: NgZone) { } ngOnInit(): void { this.initData() } @@ -73,9 +78,14 @@ export class DatatableBusiindexComponent implements OnInit { time: this.timeNext, type }; - this.service.getPerformanceReportHistogram(params).subscribe(res => { + 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); + } }) } @@ -122,4 +132,37 @@ export class DatatableBusiindexComponent implements OnInit { } + 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.spec.ts b/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.spec.ts deleted file mode 100644 index cd009e56..00000000 --- a/src/app/routes/datatable/components/busitable/busiindex/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/busitable/busiindex/curve/curve.component.ts b/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.ts index 35dbdcdb..c1a6e85e 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,4 +1,4 @@ -import { Component, ElementRef, Input, NgZone, OnInit, ViewChild } from '@angular/core'; +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'; @@ -8,8 +8,9 @@ import { DataService } from 'src/app/routes/datatable/services/data.service'; templateUrl: './curve.component.html', styleUrls: ['./curve.component.less'] }) -export class busitableCurveComponent implements OnInit { - @Input() chartData: any = {} +export class BusitableCurveComponent implements OnInit, OnChanges { + @Input() chartData: any; + el: any; constructor(private service: DataService, private ngZone: NgZone) { } @@ -18,7 +19,14 @@ export class busitableCurveComponent implements OnInit { } + ngOnChanges(changes: SimpleChanges): void { + if (this.chartData) { + setTimeout(() => { + this.ngZone.runOutsideAngular(() => this.init(this.el)); + }, 2000) + } + } handleClick(data: G2MiniAreaClickItem): void { @@ -26,32 +34,19 @@ export class busitableCurveComponent implements OnInit { } render(el: ElementRef): void { - this.ngZone.runOutsideAngular(() => this.init(el.nativeElement)); + this.el = el.nativeElement + // this.ngZone.runOutsideAngular(() => this.init(this.el)); } private init(el: HTMLElement): void { - const data = [ - { month: '01月', value: 3 }, - { month: '02月', value: 4 }, - { month: '03月', value: 3.5 }, - { month: '04月', value: 5 }, - { month: '05月', value: 4.9 }, - { month: '06月', value: 6 }, - { month: '07月', value: 7 }, - { month: '08月', value: 9 }, - { month: '09月', value: 13 }, - { month: '10月', value: 13 }, - { month: '11月', value: 13 }, - { month: '12月', value: 13 }, - ]; const chart = new Chart({ container: el, autoFit: true, height: 500, }); - - chart.data(data); + + chart.data(this.chartData); chart.scale({ - month: { + year: { range: [0, 1], }, value: { @@ -59,16 +54,16 @@ export class busitableCurveComponent implements OnInit { nice: true, }, }); - + chart.tooltip({ showCrosshairs: true, // 展示 Tooltip 辅助线 shared: true, }); - - chart.line().position('month*value').label('value'); - //chart.point().position('month*value'); - + + chart.line().position('time*value').label('value'); + chart.point().position('time*value'); + chart.render(); -} + } } \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.html b/src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.html new file mode 100644 index 00000000..0640a4d4 --- /dev/null +++ b/src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.less b/src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.less new file mode 100644 index 00000000..e69de29b 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 new file mode 100644 index 00000000..a02dff78 --- /dev/null +++ b/src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.ts @@ -0,0 +1,92 @@ +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.spec.ts b/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.spec.ts deleted file mode 100644 index cd009e56..00000000 --- a/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.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/busitable/busiindex/pillar/pillar.component.ts b/src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.ts index b651b086..f7460ec9 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 @@ -6,25 +6,27 @@ import { DataService } from 'src/app/routes/datatable/services/data.service'; templateUrl: './pillar.component.html', styleUrls: ['./pillar.component.less'] }) -export class busitablePillarComponent implements OnInit { +export class BusitablePillarComponent implements OnInit, OnChanges { + el: any; @Input() chartData: any ; constructor(private service: DataService, private ngZone: NgZone) { } - ngOnInit(): void { - this.initData() - } - initData(){ - this.service.request(this.service.$api_performanceReportHistogram).subscribe(res => { - if (res) { - this.chartData = res.performance + ngOnChanges(changes: SimpleChanges): void { + if(this.chartData){ + setTimeout(()=>{ this.ngZone.runOutsideAngular(() => this.init(this.el)); - } - }) + }, 1000) + + } + } + + ngOnInit(): void { + } render(el: ElementRef): void { - this.el = el + this.el = el.nativeElement } diff --git a/src/app/routes/datatable/components/operationtable/pie/pie.component.spec.ts b/src/app/routes/datatable/components/operationtable/pie/pie.component.spec.ts deleted file mode 100644 index cd009e56..00000000 --- a/src/app/routes/datatable/components/operationtable/pie/pie.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/datatable.module.ts b/src/app/routes/datatable/datatable.module.ts index cb63fd77..0f4f2574 100644 --- a/src/app/routes/datatable/datatable.module.ts +++ b/src/app/routes/datatable/datatable.module.ts @@ -21,9 +21,9 @@ import { DatatableMancustomtableComponent } from './components/customtable/mancu import { DatatablePartnertableComponent } from './components/customtable/partnertable/partnertable.component'; import { DatatableBusiindexComponent } from './components/busitable/busiindex/busiindex.component'; import { DatatableMantableComponent } from './components/busitable/mantable/mantable.component'; -import { busitableCurveComponent } from './components/busitable/busiindex/curve/curve.component'; -import { busitablePillarComponent } from './components/busitable/busiindex/pillar/pillar.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'; const COMPONENTS: Type[] = [ DatatableDataindexComponent, @@ -46,9 +46,9 @@ const COMPONENTS: Type[] = [ DatatablePartnertableComponent, DatatableBusiindexComponent, DatatableMantableComponent, - busitableCurveComponent, - busitablePillarComponent, + BusitablePillarComponent, DatatableFundReportingComponent, + BusitableCurveComponent, DatatableReportingFundInfoComponent]