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

fix bug

Browse Source
This commit is contained in:
Lingzi
2022-03-30 18:39:42 +08:00
parent dec3592a67
commit f4d53b86fd
13 changed files with 201 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html
View File

@ -37,12 +37,21 @@
</div>
</div>
</ng-template>
<div nz-row [nzGutter]="64">
<div nz-col class="gutter-row" [nzSpan]="12">
<app-busitable-curve [chartData]="chartData.chainRatio"></app-busitable-curve>
<div class="title">
<div class="box" style="background-color: #3ba1ff;"></div> 环比(%)
</div>
<g2-custom delay="100" (render)="render($event)"></g2-custom>
<!-- <app-busitable-curve></app-busitable-curve> -->
<!-- <app-busitable-curve #curve [chartData]="chartData.chainRatio"></app-busitable-curve> -->
</div>
<div nz-col class="gutter-row" [nzSpan]="12">
<app-busitable-pillar [chartData]="chartData.performance"></app-busitable-pillar>
<div class="title">
<div class="box" style="background-color: #f59a23;"></div> 业绩量(元)
</div>
<app-busitable-pillar #pillar [chartData]="chartData.performance"></app-busitable-pillar>
</div>
</div>

10
src/app/routes/datatable/components/busitable/busiindex/busiindex.component.less
View File

@ -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;
}
}

51
src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts
View File

@ -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<HTMLDivElement>): 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();
}
}

24
src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.spec.ts
View File

@ -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<DatatableDataindexComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ DatatableDataindexComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DatatableDataindexComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

49
src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.ts
View File

@ -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<HTMLDivElement>): 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();
}
}
}

1
src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.html Normal file
View File

@ -0,0 +1 @@
<g2-custom delay="100" (render)="render($event)"></g2-custom>

0
src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.less Normal file
View File

92
src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.ts Normal file
View File

@ -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<HTMLDivElement>): 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();
}
}

24
src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.spec.ts
View File

@ -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<DatatableDataindexComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ DatatableDataindexComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DatatableDataindexComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

24
src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.ts
View File

@ -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<HTMLDivElement>): void {
this.el = el
this.el = el.nativeElement
}

24
src/app/routes/datatable/components/operationtable/pie/pie.component.spec.ts
View File

@ -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<DatatableDataindexComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ DatatableDataindexComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DatatableDataindexComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

8
src/app/routes/datatable/datatable.module.ts
View File

@ -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<void>[] = [
DatatableDataindexComponent,
@ -46,9 +46,9 @@ const COMPONENTS: Type<void>[] = [
DatatablePartnertableComponent,
DatatableBusiindexComponent,
DatatableMantableComponent,
busitableCurveComponent,
busitablePillarComponent,
BusitablePillarComponent,
DatatableFundReportingComponent,
BusitableCurveComponent,
DatatableReportingFundInfoComponent]