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 17:54:15 +08:00
parent 6bbbc68ff7 bd55b5fd74
commit 5baa6b5f12
81 changed files with 2568 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html Normal file
View File

@ -0,0 +1,50 @@
<!-- 页头 -->
<page-header-wrapper [title]="'业务报表'"></page-header-wrapper>
<nz-card nzTitle="运多星平台业务情况" [nzExtra]="extraTemplate">
<ng-template #extraTemplate>
<div class="chooseBox">
<button nz-button nzType="primary" (click)="exportFun()">导出</button>
<div class="timeBox">
<nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
<label nz-radio-button nzValue="year">年</label>
<label nz-radio-button nzValue="month">月</label>
<label nz-radio-button nzValue="date">日</label>
<label nz-radio-button nzValue="define">自定义</label>
</nz-radio-group>
<div class="dateBox">
<nz-date-picker [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" *ngIf="mode !== 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-date-picker>
<nz-range-picker [(ngModel)]="defineDate" [nzFormat]="dateFormat" *ngIf="mode === 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-range-picker>
</div>
</div>
</div>
</ng-template>
<st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listPerformanceReportPage"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
[scroll]="{ x: '1200px' }" [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
[page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="false"></st>
</nz-card>
<nz-card nzTitle="业绩报表" [nzExtra]="extraTemplate01">
<ng-template #extraTemplate01>
<div class="chooseBox">
<div class="timeBox">
<nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext()">
<label nz-radio-button nzValue="year">年</label>
<label nz-radio-button nzValue="month">月</label>
</nz-radio-group>
<div class="dateBox">
<nz-date-picker [(ngModel)]="dateNext" [nzDisabledDate]="disabledDate" [nzMode]="mode" (ngModelChange)="onChangeNext($event)"></nz-date-picker>
</div>
</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>
<div nz-col class="gutter-row" [nzSpan]="12">
<app-busitable-pillar [chartData]="chartData.performance"></app-busitable-pillar>
</div>
</div>
</nz-card>

11
src/app/routes/datatable/components/busitable/busiindex/busiindex.component.less Normal file
View File

@ -0,0 +1,11 @@
.chooseBox{
display: flex;
}
.timeBox{
display: flex;
margin: 0 0 0 10px;
}
.dateBox{
display: inline-block;
margin: 0 0 0 10px;
}

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

@ -0,0 +1,24 @@
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
import { DatatableBusiindexComponent } from './busiindex.component';
describe('DatatableBusiindexComponent', () => {
let component: DatatableBusiindexComponent;
let fixture: ComponentFixture<DatatableBusiindexComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ DatatableBusiindexComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DatatableBusiindexComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

125
src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts Normal file
View File

@ -0,0 +1,125 @@
import { Component, OnInit, ViewChild } 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';
@Component({
selector: 'app-datatable-busiindex',
templateUrl: './busiindex.component.html',
styleUrls: ['./busiindex.component.less'],
providers: [DatePipe]
})
export class DatatableBusiindexComponent implements OnInit {
@ViewChild('st') private readonly st!: STComponent;
type = 1;
mode = 'year';
date: any = null;
time: any = ['2022-01-01 00:00:00']
defineDate = [];
dateNext: any = null;
modeNext = 'year';
timeNext: any = ['2022-01-01 00:00:00']
dateFormat = 'yyyy-MM-dd';
today = new Date();
chartData: any = []
columns: STColumn[] = [
{ title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
{ title: '合伙人数', index: 'partnerNumber', className: 'text-center' },
{ title: '客户数', index: 'enterpriseNumbe', className: 'text-center' },
{ title: '订单数', index: 'zsl', className: 'text-center' },
{ title: '客户预存款', index: 'czcgje', className: 'text-center' },
{ title: '业绩量', index: 'yisje', className: 'text-center' },
{ title: '已收附加费', index: 'yisfjf', className: 'text-center' },
{ title: '平均附加费率', index: 'fjfl', className: 'text-center' },
{ title: '已开票金额', index: 'ykpje', className: 'text-center' }
];
/**
* 查询参数
*/
get reqParams() {
if(this.mode === 'year') {
this.type = 1
} else if(this.mode === 'month') {
this.type = 2
} else if(this.mode === 'date') {
this.type = 3
} else {
this.type = 4
}
let params: any = {
time: this.time,
type: this.type
};
delete params._$expand;
return { ...params };
}
constructor(public service: DataService, private datePipe: DatePipe) { }
ngOnInit(): void {
this.initData()
}
initData(){
let type = 1
if(this.mode === 'year') {
type = 1
} else if(this.mode === 'month') {
type = 2
}
const params: any = {
time: this.timeNext,
type
};
this.service.getPerformanceReportHistogram(params).subscribe(res => {
if (res) {
this.chartData = res
}
})
}
changeData(){
if(this.mode === 'year') {
this.dateFormat = 'yyyy'
} else if(this.mode === 'month') {
this.dateFormat = 'yyyy-MM'
} else {
this.dateFormat = 'yyyy-MM-dd'
}
}
onChange(result: any) {
if(this.mode === 'year') {
this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
} else if(this.mode === 'month') {
this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
} 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.st.reload({ ...this.reqParams });
}
changeDataNext() {
if(this.mode === 'year') {
this.dateFormat = 'yyyy'
} else if(this.mode === 'month') {
this.dateFormat = 'yyyy-MM'
}
}
onChangeNext(result: any) {
if(this.mode === 'year') {
this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy') + '-01-01 00:00:00']
} else if(this.mode === 'month') {
this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00']
}
}
disabledDate = (current: Date): boolean =>
// Can not select days before today and today
differenceInCalendarDays(current, this.today) > 0;
exportFun(){
}
}

1
src/app/routes/datatable/components/busitable/busiindex/curve/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/curve/curve.component.less Normal file
View File

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

@ -0,0 +1,24 @@
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();
});
});

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

@ -0,0 +1,74 @@
import { Component, ElementRef, Input, NgZone, OnInit, 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 {
@Input() chartData: any = {}
constructor(private service: DataService, private ngZone: NgZone) {
}
ngOnInit(): void {
}
handleClick(data: G2MiniAreaClickItem): void {
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
}
render(el: ElementRef<HTMLDivElement>): void {
this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
}
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.scale({
month: {
range: [0, 1],
},
value: {
min: 0,
nice: true,
},
});
chart.tooltip({
showCrosshairs: true, // 展示 Tooltip 辅助线
shared: true,
});
chart.line().position('month*value').label('value');
//chart.point().position('month*value');
chart.render();
}
}

1
src/app/routes/datatable/components/busitable/busiindex/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/busitable/busiindex/pillar/pillar.component.less Normal file
View File

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

@ -0,0 +1,24 @@
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();
});
});

52
src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.ts Normal file
View File

@ -0,0 +1,52 @@
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-busitable-pillar',
templateUrl: './pillar.component.html',
styleUrls: ['./pillar.component.less']
})
export class busitablePillarComponent implements OnInit {
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
this.ngZone.runOutsideAngular(() => this.init(this.el));
}
})
}
render(el: ElementRef<HTMLDivElement>): void {
this.el = el
}
private init(el: HTMLElement): void {
const chart = new Chart({
container: el,
autoFit: true,
height: 500,
});
chart.data(this.chartData);
chart.tooltip({
showMarkers: false,
});
chart.interval().position('time*number');
chart.interaction('element-active');
chart.render();
}
}

42
src/app/routes/datatable/components/busitable/mantable/mantable.component.html Normal file
View File

@ -0,0 +1,42 @@
<!-- 页头 -->
<page-header-wrapper [title]="'业务报表'"></page-header-wrapper>
<nz-card nzTitle="业务员报表" [nzExtra]="extraTemplate">
<ng-template #extraTemplate>
<div class="chooseBox">
<div class="timeBox">
<nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
<label nz-radio-button nzValue="year">年</label>
<label nz-radio-button nzValue="month">月</label>
<label nz-radio-button nzValue="date">日</label>
<label nz-radio-button nzValue="define">自定义</label>
</nz-radio-group>
<div class="dateBox">
<nz-date-picker [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" *ngIf="mode !== 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-date-picker>
<nz-range-picker [(ngModel)]="defineDate" [nzFormat]="dateFormat" *ngIf="mode === 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-range-picker>
</div>
</div>
</div>
</ng-template>
<st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listOperationalReportPage"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
[scroll]="{ x: '1200px' }" [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
[page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="false"></st>
</nz-card>
<nz-card nzTitle="业绩报表" [nzExtra]="extraTemplate01">
<ng-template #extraTemplate01>
<div class="chooseBox">
<div class="timeBox">
<nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext()">
<label nz-radio-button nzValue="year">年</label>
<label nz-radio-button nzValue="month">月</label>
</nz-radio-group>
<div class="dateBox">
<nz-date-picker [(ngModel)]="dateNext" [nzDisabledDate]="disabledDate" [nzMode]="mode" (ngModelChange)="onChangeNext($event)"></nz-date-picker>
</div>
</div>
</div>
</ng-template>
<app-datatable-curve></app-datatable-curve>
</nz-card>

11
src/app/routes/datatable/components/busitable/mantable/mantable.component.less Normal file
View File

@ -0,0 +1,11 @@
.chooseBox{
display: flex;
}
.timeBox{
display: flex;
margin: 0 0 0 10px;
}
.dateBox{
display: inline-block;
margin: 0 0 0 10px;
}

24
src/app/routes/datatable/components/busitable/mantable/mantable.component.spec.ts Normal file
View File

@ -0,0 +1,24 @@
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
import { DatatableMantableComponent } from './mantable.component';
describe('DatatableMantableComponent', () => {
let component: DatatableMantableComponent;
let fixture: ComponentFixture<DatatableMantableComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ DatatableMantableComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DatatableMantableComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

109
src/app/routes/datatable/components/busitable/mantable/mantable.component.ts Normal file
View File

@ -0,0 +1,109 @@
import { Component, OnInit, ViewChild } 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';
@Component({
selector: 'app-datatable-mantable',
templateUrl: './mantable.component.html',
styleUrls: ['./mantable.component.less'],
providers: [DatePipe]
})
export class DatatableMantableComponent implements OnInit {
@ViewChild('st') private readonly st!: STComponent;
type = 1;
mode = 'year';
date: any = null;
defineDate = [];
time: any = ['2022-01-01 00:00:00']
dateFormat = 'yyyy-MM-dd';
today = new Date();
dateNext: any = null;
modeNext = 'year';
timeNext: any = ['2022-01-01 00:00:00']
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: 'yifyf', className: 'text-center' },
{ title: '已开票金额', index: 'yifyf', className: 'text-center' }
];
/**
* 查询参数
*/
get reqParams() {
if(this.mode === 'year') {
this.type = 1
} else if(this.mode === 'month') {
this.type = 2
} else if(this.mode === 'date') {
this.type = 3
} else {
this.type = 4
}
let params: any = {
time: this.time,
type: this.type
};
delete params._$expand;
return { ...params };
}
constructor(public service: DataService, private datePipe: DatePipe) { }
ngOnInit(): void { }
changeData(){
if(this.mode === 'year') {
this.dateFormat = 'yyyy'
} else if(this.mode === 'month') {
this.dateFormat = 'yyyy-MM'
} else {
this.dateFormat = 'yyyy-MM-dd'
}
}
onChange(result: any) {
if(this.mode === 'year') {
this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
} else if(this.mode === 'month') {
this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
} 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.st.reload({ ...this.reqParams });
}
changeDataNext() {
if(this.mode === 'year') {
this.dateFormat = 'yyyy'
} else if(this.mode === 'month') {
this.dateFormat = 'yyyy-MM'
}
}
onChangeNext(result: any) {
if(this.mode === 'year') {
this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy') + '-01-01 00:00:00']
} else if(this.mode === 'month') {
this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00']
}
}
disabledDate = (current: Date): boolean =>
// Can not select days before today and today
differenceInCalendarDays(current, this.today) > 0;
exportFun(){
}
}