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-31 19:21:24 +08:00
parent d34c9f21a8
commit 0fc8b927a1
25 changed files with 319 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/routes/datatable/components/operationtable/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();
});
});

154
src/app/routes/datatable/components/operationtable/curve/curve.component.ts
View File

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

27
src/app/routes/datatable/components/operationtable/operationtable.component.html
View File

@ -28,7 +28,7 @@
<nz-card nzTitle="运营报表" [nzExtra]="extraTemplate01">
<ng-template #extraTemplate01>
<div class="chooseBox">
<nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="changeCurve()">
<nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="initPillarData()">
<nz-option [nzValue]="item.value" [nzLabel]="item.label" *ngFor="let item of interManlist"></nz-option>
</nz-select>
<div class="timeBox">
@ -42,11 +42,22 @@
</div>
</div>
</ng-template>
<app-datatable-curve></app-datatable-curve>
<div nz-row [nzGutter]="64">
<div nz-col class="gutter-row" [nzSpan]="12">
<!-- <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-operation-curve #curve [chartData]="chartData.lineChart"></app-operation-curve>
</div>
<div nz-col class="gutter-row" [nzSpan]="12">
<!-- <div class="title">
<div class="box" style="background-color: #f59a23;"></div> 业绩量(元)
</div> -->
<app-operation-pillar #pillar [chartData]="chartData.histogram"></app-operation-pillar>
</div>
</div>
</nz-card>
<nz-card nzTitle="运单状态分布">
<nz-select [(ngModel)]="enterpriseInfoIdPie" style="width: 200px" (ngModelChange)="changeCurve()">
<nz-option [nzValue]="item.value" [nzLabel]="item.label" *ngFor="let item of interManlist"></nz-option>
</nz-select>
<app-opeationtable-pie></app-opeationtable-pie>
</nz-card>
<app-opeationtable-pie #pie></app-opeationtable-pie>

34
src/app/routes/datatable/components/operationtable/operationtable.component.ts
View File

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

7
src/app/routes/datatable/components/operationtable/pie/pie.component.html
View File

@ -1,3 +1,6 @@
<div class="box">
<nz-card nzTitle="运单状态分布">
<nz-select [(ngModel)]="enterpriseInfoIdPie" style="width: 200px" (ngModelChange)="initData()">
<nz-option [nzValue]="item.value" [nzLabel]="item.label" *ngFor="let item of interManlist"></nz-option>
</nz-select>
<g2-custom delay="100" (render)="render($event)"></g2-custom>
</div>
</nz-card>

2
src/app/routes/datatable/components/operationtable/pie/pie.component.less
View File

@ -1,5 +1,5 @@
.box{
width: 50%;
overflow: hidden;
margin:0 auto;
overflow: hidden;
}

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

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

1
src/app/routes/datatable/components/operationtable/pillar/pillar.component.html Normal file
View File

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

0
src/app/routes/datatable/components/operationtable/pillar/pillar.component.less Normal file
View File

75
src/app/routes/datatable/components/operationtable/pillar/pillar.component.ts Normal file
View File

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