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

Merge branch 'develop' of https://gitlab.eascs.com/tms-ui/tms-obc-web into develop

Browse Source
This commit is contained in:
wangshiming
2022-03-30 17:57:46 +08:00
parent 9c9985fced dec3592a67
commit d394888cfa
43 changed files with 1674 additions and 549 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;
}

12
src/app/routes/datatable/components/customtable/customtable.component.spec.ts → src/app/routes/datatable/components/busitable/busiindex/busiindex.component.spec.ts
View File

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

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(){
}
}

61
src/app/routes/datatable/components/customtable/customindex/customindex.component.html
View File

@ -1,6 +1,59 @@
<!-- 页头 -->
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
<nz-card>
<sf mode="search" [schema]="searchSchema" (formSubmit)="st.reset($event)" (formReset)="st.reset($event)"></sf>
<st #st [data]="url" [columns]="columns"></st>
<page-header-wrapper [title]="'客户报表'"></page-header-wrapper>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'货主'" [bordered]="true" [total]="'¥ 126,560.00'" footer="日访问量 12,423" contentHeight="46">
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'合伙人'" [bordered]="true" [total]="'¥ 126,560.00'" footer="日访问量 12,423" contentHeight="46">
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'司机'" [bordered]="true" [total]="'¥ 126,560.00'" footer="日访问量 12,423" contentHeight="46">
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'车辆'" [bordered]="true" [total]="'¥ 126,560.00'" footer="日访问量 12,423" contentHeight="46">
</g2-card>
</div>
</div>
<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]="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>
</nz-radio-group>
<div class="dateBox">
<nz-date-picker [nzDisabledDate]="disabledDate" [(ngModel)]="dateNext" [nzMode]="modeNext" (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/customtable/customindex/customindex.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;
}

114
src/app/routes/datatable/components/customtable/customindex/customindex.component.ts
View File

@ -1,45 +1,105 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { STColumn, STComponent } from '@delon/abc/st';
import { SFSchema } from '@delon/form';
import { ModalHelper, _HttpClient } from '@delon/theme';
import { DatePipe, _HttpClient } from '@delon/theme';
import { differenceInCalendarDays } from 'date-fns';
import { DataService } from '../../../services/data.service';
@Component({
selector: 'app-datatable-customindex',
templateUrl: './customindex.component.html',
styleUrls: ['./customindex.component.less'],
providers: [DatePipe]
})
export class DatatableCustomindexComponent implements OnInit {
url = `/user`;
searchSchema: SFSchema = {
properties: {
no: {
type: 'string',
title: '编号'
}
}
};
@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: 'no' },
{ title: '调用次数', type: 'number', index: 'callNo' },
{ title: '头像', type: 'img', width: '50px', index: 'avatar' },
{ title: '时间', type: 'date', index: 'updatedAt' },
{
title: '',
buttons: [
// { text: '查看', click: (item: any) => `/form/${item.id}` },
// { text: '编辑', type: 'static', component: FormEditComponent, click: 'reload' },
]
}
{ 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' }
];
/**
* 查询参数
*/
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
};
constructor(private http: _HttpClient, private modal: ModalHelper) { }
delete params._$expand;
return { ...params };
}
constructor(public service: DataService, private datePipe: DatePipe) { }
ngOnInit(): void { }
add(): void {
// this.modal
// .createStatic(FormEditComponent, { i: { id: 0 } })
// .subscribe(() => this.st.reload());
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 });
}
disabledDate = (current: Date): boolean =>
// Can not select days before today and today
differenceInCalendarDays(current, this.today) > 0;
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']
}
}
exportFun() {
}
}

45
src/app/routes/datatable/components/customtable/driver/driver.component.html
View File

@ -1,6 +1,45 @@
<!-- 页头 -->
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
<page-header-wrapper [title]="'司机报表'"></page-header-wrapper>
<nz-card>
<sf mode="search" [schema]="searchSchema" (formSubmit)="st.reset($event)" (formReset)="st.reset($event)"></sf>
<st #st [data]="url" [columns]="columns"></st>
<!-- 搜索表单 -->
<div nz-row nzGutter="8">
<!-- 查询字段大于3个时，根据展开状态调整布局 -->
<ng-container>
<div nz-col [nzSpan]="_$expand ? 24 : 18">
<sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
</div>
<div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
<button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="false" (click)="search()">查询</button>
<button nz-button (click)="resetSF()">重置</button>
<!-- <button nz-button (click)="export()">导出</button> -->
<button nz-button nzType="link" (click)="expandToggle()">
{{ !_$expand ? '展开' : '收起' }}
<i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
</button>
</div>
</ng-container>
</div>
</nz-card>
<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>

11
src/app/routes/datatable/components/customtable/driver/driver.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;
}

173
src/app/routes/datatable/components/customtable/driver/driver.component.ts
View File

@ -1,45 +1,154 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { STColumn, STComponent } from '@delon/abc/st';
import { SFSchema } from '@delon/form';
import { ModalHelper, _HttpClient } from '@delon/theme';
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
import { DatePipe, _HttpClient } from '@delon/theme';
import { differenceInCalendarDays } from 'date-fns';
import { DataService } from '../../../services/data.service';
@Component({
selector: 'app-datatable-driver',
templateUrl: './driver.component.html',
styleUrls: ['./driver.component.less'],
providers: [DatePipe]
})
export class DatatableDriverComponent implements OnInit {
url = `/user`;
searchSchema: SFSchema = {
properties: {
no: {
type: 'string',
title: '编号'
}
}
};
@ViewChild('st') private readonly st!: STComponent;
@ViewChild('st', { static: false }) st!: STComponent;
@ViewChild('sf', { static: false }) sf!: SFComponent;
_$expand = false;
type = 1;
mode = 'year';
date: any = null;
defineDate = [];
time: any = ['2022-01-01 00:00:00']
dateFormat = 'yyyy-MM-dd';
today = new Date();
ui: SFUISchema = {};
schema: SFSchema = {};
columns: STColumn[] = [
{ title: '编号', index: 'no' },
{ title: '调用次数', type: 'number', index: 'callNo' },
{ title: '头像', type: 'img', width: '50px', index: 'avatar' },
{ title: '时间', type: 'date', index: 'updatedAt' },
{
title: '',
buttons: [
// { text: '查看', click: (item: any) => `/form/${item.id}` },
// { text: '编辑', type: 'static', component: FormEditComponent, click: 'reload' },
]
}
{ 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' }
];
constructor(private http: _HttpClient, private modal: ModalHelper) { }
ngOnInit(): void { }
add(): void {
// this.modal
// .createStatic(FormEditComponent, { i: { id: 0 } })
// .subscribe(() => this.st.reload());
/**
* 查询参数
*/
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.initSF();
}
/**
* 初始化查询表单
*/
initSF() {
this.schema = {
properties: {
_$expand: { type: 'boolean', ui: { hidden: true } },
billCode: {
type: 'string',
title: '司机姓名',
ui: {
placeholder: '请输入',
}
},
resourceCode: {
type: 'string',
title: '手机号',
ui: {
placeholder: '请选择',
}
},
loadingPlace: {
type: 'string',
title: '司机状态',
ui: {
placeholder: '请选择',
}
},
createTime: {
title: '注册时间',
type: 'string',
ui: {
widget: 'sl-from-to', type: 'date', format: 'yyyy-MM-dd', visibleIf: {
_$expand: (value: boolean) => value,
},
} as SFDateWidgetSchema,
}
},
type: 'object'
};
this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
}
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 });
}
disabledDate = (current: Date): boolean =>
// Can not select days before today and today
differenceInCalendarDays(current, this.today) > 0;
export() {
// this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {});
}
search() {
this.st?.load(1)
}
/**
* 伸缩查询条件
*/
expandToggle() {
this._$expand = !this._$expand;
this.sf?.setValue('/_$expand', this._$expand);
}
/**
* 重置表单
*/
resetSF() {
this.sf.reset();
this._$expand = false;
}
}

7
src/app/routes/datatable/components/customtable/customtable.component.html → src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.html
View File

@ -1,5 +1,8 @@
<!-- 页头 -->
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
<page-header [action]="phActionTpl">
<ng-template #phActionTpl>
<button (click)="add()" nz-button nzType="primary">新建</button>
</ng-template>
</page-header>
<nz-card>
<sf mode="search" [schema]="searchSchema" (formSubmit)="st.reset($event)" (formReset)="st.reset($event)"></sf>
<st #st [data]="url" [columns]="columns"></st>

24
src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.spec.ts Normal file
View File

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

6
src/app/routes/datatable/components/customtable/customtable.component.ts → src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.ts
View File

@ -4,10 +4,10 @@ import { SFSchema } from '@delon/form';
import { ModalHelper, _HttpClient } from '@delon/theme';
@Component({
selector: 'app-datatable-customtable',
templateUrl: './customtable.component.html',
selector: 'app-datatable-mancustomtable',
templateUrl: './mancustomtable.component.html',
})
export class DatatableCustomtableComponent implements OnInit {
export class DatatableMancustomtableComponent implements OnInit {
url = `/user`;
searchSchema: SFSchema = {
properties: {

44
src/app/routes/datatable/components/customtable/owner/owner.component.html
View File

@ -1,5 +1,45 @@
<!-- 页头 -->
<page-header-wrapper [title]="'运营报表'"></page-header-wrapper>
<page-header-wrapper [title]="'货主报表'"></page-header-wrapper>
<nz-card>
<st #st [data]="url" [columns]="columns"></st>
<!-- 搜索表单 -->
<div nz-row nzGutter="8">
<!-- 查询字段大于3个时，根据展开状态调整布局 -->
<ng-container>
<div nz-col [nzSpan]="_$expand ? 24 : 18">
<sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
</div>
<div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
<button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="false" (click)="search()">查询</button>
<button nz-button (click)="resetSF()">重置</button>
<!-- <button nz-button (click)="export()">导出</button> -->
<button nz-button nzType="link" (click)="expandToggle()">
{{ !_$expand ? '展开' : '收起' }}
<i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
</button>
</div>
</ng-container>
</div>
</nz-card>
<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>

11
src/app/routes/datatable/components/customtable/owner/owner.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;
}

180
src/app/routes/datatable/components/customtable/owner/owner.component.ts
View File

@ -1,45 +1,161 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { STColumn, STComponent } from '@delon/abc/st';
import { SFSchema } from '@delon/form';
import { ModalHelper, _HttpClient } from '@delon/theme';
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
import { DatePipe, _HttpClient } from '@delon/theme';
import { differenceInCalendarDays } from 'date-fns';
import { DataService } from '../../../services/data.service';
@Component({
selector: 'app-datatable-owner',
templateUrl: './owner.component.html',
styleUrls: ['./owner.component.less'],
providers: [DatePipe]
})
export class DatatableOwnerComponent implements OnInit {
url = `/user`;
searchSchema: SFSchema = {
properties: {
no: {
type: 'string',
title: '编号'
}
}
};
@ViewChild('st') private readonly st!: STComponent;
@ViewChild('st', { static: false }) st!: STComponent;
@ViewChild('sf', { static: false }) sf!: SFComponent;
_$expand = false;
type = 1;
mode = 'year';
date: any = null;
defineDate = [];
time: any = ['2022-01-01 00:00:00']
dateFormat = 'yyyy-MM-dd';
today = new Date();
ui: SFUISchema = {};
schema: SFSchema = {};
columns: STColumn[] = [
{ title: '编号', index: 'no' },
{ title: '调用次数', type: 'number', index: 'callNo' },
{ title: '头像', type: 'img', width: '50px', index: 'avatar' },
{ title: '时间', type: 'date', index: 'updatedAt' },
{
title: '',
buttons: [
// { text: '查看', click: (item: any) => `/form/${item.id}` },
// { text: '编辑', type: 'static', component: FormEditComponent, click: 'reload' },
]
}
{ 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' },
{ 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' }
];
constructor(private http: _HttpClient, private modal: ModalHelper) { }
ngOnInit(): void { }
add(): void {
// this.modal
// .createStatic(FormEditComponent, { i: { id: 0 } })
// .subscribe(() => this.st.reload());
/**
* 查询参数
*/
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.initSF();
}
/**
* 初始化查询表单
*/
initSF() {
this.schema = {
properties: {
_$expand: { type: 'boolean', ui: { hidden: true } },
billCode: {
type: 'string',
title: '货主名称',
ui: {
placeholder: '请输入',
}
},
resourceCode: {
type: 'string',
title: '客户类型',
ui: {
placeholder: '请选择',
}
},
loadingPlace: {
type: 'string',
title: '客户状态',
ui: {
placeholder: '请选择',
}
},
createTime: {
title: '注册时间',
type: 'string',
ui: {
widget: 'sl-from-to', type: 'date', format: 'yyyy-MM-dd', visibleIf: {
_$expand: (value: boolean) => value,
},
} as SFDateWidgetSchema,
}
},
type: 'object'
};
this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
}
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 });
}
disabledDate = (current: Date): boolean =>
// Can not select days before today and today
differenceInCalendarDays(current, this.today) > 0;
export() {
// this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {});
}
search() {
this.st?.load(1)
}
/**
* 伸缩查询条件
*/
expandToggle() {
this._$expand = !this._$expand;
this.sf?.setValue('/_$expand', this._$expand);
}
/**
* 重置表单
*/
resetSF() {
this.sf.reset();
this._$expand = false;
}
}

43
src/app/routes/datatable/components/customtable/partnertable/partnertable.component.html Normal file
View File

@ -0,0 +1,43 @@
<!-- <page-header [title]="'订单管理'"> </page-header> -->
<nz-card [nzBordered]="false">
<!-- 搜索表单 -->
<div nz-row nzGutter="8">
<!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
<div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
<sf #sf mode="search" [schema]="schema" [button]="'none'">
<button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="false"
(click)="st?.load(1)" acl [acl-ability]="['companyStaff-search']">查询</button>
<button nz-button (click)="resetSF()">重置</button>
</sf>
</div>
<!-- 查询字段大于3个时，根据展开状态调整布局 -->
<ng-container *ngIf="queryFieldCount > 4">
<div nz-col [nzSpan]="_$expand ? 24 : 18">
<sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
</div>
<div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
<button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="false"
(click)="st?.load(1)" acl [acl-ability]="['companyStaff-search']">查询</button>
<button nz-button (click)="resetSF()">重置</button>
<button nz-button nzType="link" (click)="expandToggle()">
{{ !_$expand ? '展开' : '收起' }}
<i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
</button>
</div>
</ng-container>
</div>
</nz-card>
<nz-card>
<div class="list-table-header-btn">
<!-- <button nz-button nzType="default" (click)="gotoInviteRecord()">员工邀请记录</button> -->
</div>
<!-- 数据列表 -->
<st #st multiSort bordered [data]="service.$api_listOperationalReportPage" [columns]="columns" [ps]="20"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
[res]="{ reName: { list: 'data.records', total: 'data.total' } }"
[page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="false">
</st>
</nz-card>

24
src/app/routes/datatable/components/customtable/partnertable/partnertable.component.spec.ts Normal file
View File

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

147
src/app/routes/datatable/components/customtable/partnertable/partnertable.component.ts Normal file
View File

@ -0,0 +1,147 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { STChange, STColumn, STComponent, STData } from '@delon/abc/st';
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
import { ModalHelper } from '@delon/theme';
import { EAEnvironmentService } from '@shared';
import { NzModalService } from 'ng-zorro-antd/modal';
import { DataService } from '../../../services/data.service';
@Component({
selector: 'app-datatable-partnertable',
templateUrl: './partnertable.component.html',
})
export class DatatablePartnertableComponent implements OnInit {
@ViewChild('st', { static: false }) st!: STComponent;
@ViewChild('sf', { static: false }) sf!: SFComponent;
_$expand = false;
ui!: SFUISchema;
schema!: SFSchema;
phone = '';
columns!: STColumn[];
constructor(
public service: DataService,
private modalSrv: NzModalService,
private modal: ModalHelper,
private envSrv: EAEnvironmentService,
) {}
/**
* 查询字段个数
*/
get queryFieldCount(): number {
return Object.keys(this.schema?.properties || {}).length;
}
/**
* 查询参数
*/
get reqParams() {
const params = Object.assign({}, this.sf?.value || {});
delete params._$expand;
return { ...params };
}
/**
* 选中行
*/
get selectedRows() {
return this.st?.list.filter((item) => item.checked) || [];
}
/**
* 伸缩查询条件
*/
expandToggle() {
this._$expand = !this._$expand;
this.sf?.setValue('/_$expand', this._$expand);
}
/**
* 重置表单
*/
resetSF() {
this.sf.reset();
this._$expand = false;
}
/**
* 程序初始化入口
*/
ngOnInit() {
this.initSF();
this.initST()
}
/**
* 初始化查询表单
*/
initSF() {
this.schema = {
properties: {
_$expand: { type: 'boolean', ui: { hidden: true } },
name: {
title: '合伙人名称',
type: 'string',
ui: { placeholder: '请输入' },
readOnly: false,
},
phone: {
title: '合伙人类型',
type: 'string',
ui: {
widget: 'select',
placeholder: '请输入' },
readOnly: false,
},
phone01: {
title: '合伙人状态',
type: 'string',
ui: {
widget: 'select',
placeholder: '请输入' },
readOnly: false,
},
createTime: {
type: 'string',
title: '注册时间',
ui: { widget: 'sl-from-to', type: 'date', format: 'yyyy-MM-dd' } as SFDateWidgetSchema,
},
},
type: 'object',
};
this.ui = { '*': { spanLabelFixed: 80, grid: { span: 8, gutter: 4 }, enter: () => this.st?.load(1) } };
}
/**
* 初始化数据列表
*/
initST() {
this.columns = [
{ title: '合伙人名称', index: 'name', className: 'text-center' },
{ title: '注册时间', index: 'telephone', className: 'text-center' },
{ title: '注册时间', index: 'roleName', className: 'text-center' },
{ title: '业务员', index: 'lastLoginDate', className: 'text-center' },
{
title: '合伙人状态',
index: 'stateLocked',
className: 'text-center',
type: 'enum',
enum: { 0: '正常', 1: '冻结' },
},
{ title: '客户数', index: 'lastLoginDate', className: 'text-center' },
{ title: '收益额', index: 'lastLoginDate', className: 'text-center' },
{ title: '已提现金额', index: 'lastLoginDate', className: 'text-center' },
{ title: '订单数', index: 'lastLoginDate', className: 'text-center' },
{ title: '订单金额', index: 'lastLoginDate', className: 'text-center' },
{ title: '应收订单数', index: 'lastLoginDate', className: 'text-center' },
];
}
/**
* 数据列表状态变化事件
*/
change(change: STChange) {
// console.log(change);
}
}

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

@ -1,69 +1 @@
<!-- 页头 -->
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'客户预存款总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
<ng-template #footer>
<g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'业绩量总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
<ng-template #footer>
<g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'司机应付总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
<ng-template #footer>
<g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
</g2-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="6">
<g2-card [title]="'附加费总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
<ng-template #footer>
<g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
</g2-mini-area>
</ng-template>
</g2-card>
</div>
</div>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="12">
<nz-card [nzTitle]="'订单类型比例'">
<g2-custom delay="100" (render)="render($event)"></g2-custom>
</nz-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="12">
<nz-card [nzTitle]="'大区业绩完成情况'">
<g2-timeline
[data]="chartData"
[titleMap]="{ y1: '客流量', y2: '支付笔数' }"
[height]="200"
mask="MM月DD日"
[slider]="false"
></g2-timeline>
</nz-card>
</div>
</div>
<div nz-row [nzGutter]="16">
<div nz-col class="gutter-row" [nzSpan]="12">
<nz-card [nzTitle]="'运单直付比例'">
<g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
(clickItem)="handleClick($event)" [lineWidth]="10">
</g2-pie>
</nz-card>
</div>
<div nz-col class="gutter-row" [nzSpan]="12">
<nz-card [nzTitle]="'业绩完成情况'">
<g2-bar height="200" [title]="'销售额趋势'" [data]="salesData" (clickItem)="handleClick($event)"></g2-bar>
</nz-card>
</div>
</div>
<g2-custom delay="100" (render)="render($event)"></g2-custom>

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

@ -1,248 +1,130 @@
import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { ModalHelper, _HttpClient } from '@delon/theme';
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie';
import { format } from 'date-fns';
import { Chart, registerShape, Util } from '@antv/g2';
import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
import { DataService } from '../../../services/data.service';
import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';
@Component({
selector: 'app-datatable-curve',
templateUrl: './curve.component.html',
styleUrls: ['./curve.component.less']
})
export class DatatableDataindexComponent implements OnInit {
@ViewChild('pie', { static: false }) pie!: G2PieComponent;
chartData: G2TimelineData[] = [];
visitData = this.genData();
salesData = this.genData();
salesPieData: G2PieData[] = [];
total = '';
export class OperationtableCurveComponent implements OnInit {
constructor(private service: DataService, private ngZone: NgZone) {
}
ngOnInit(): void {
this.refreshPie();
this.initLineData()
}
initLineData(){
for (let i = 0; i < 20; i += 1) {
this.chartData.push({
time: new Date().getTime() + 1000 * 60 * 60 * 24 * i,
y1: Math.floor(Math.random() * 100) + 1000,
y2: Math.floor(Math.random() * 100) + 10,
});
}
}
private genData(): G2MiniAreaData[] {
const beginDay = new Date().getTime();
const res: G2MiniAreaData[] = [];
for (let i = 0; i < 20; i += 1) {
res.push({
x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
y: Math.floor(Math.random() * 100) + 10,
});
}
return res;
}
refresh(): void {
this.visitData = this.genData();
}
refreshPie(): void {
const rv = (min: number = 0, max: number = 5000) => Math.floor(Math.random() * (max - min + 1) + min);
this.salesPieData = [
{
x: '家用电器',
y: rv(),
},
{
x: '食用酒水',
y: rv(),
},
{
x: '个护健康',
y: rv(),
},
{
x: '服饰箱包',
y: rv(),
},
{
x: '母婴产品',
y: rv(),
},
];
if (Math.random() > 0.5) {
this.salesPieData.push({
x: '其他',
y: rv(),
});
}
this.total = `&yen ${this.salesPieData.reduce((pre, now) => now.y + pre, 0).toFixed(2)}`;
if (this.pie) {
// 等待组件渲染
setTimeout(() => {
console.log('a')
this.pie.changeData()
});
}
}
handleClick(data: G2MiniAreaClickItem): void {
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
}
format(val: number): string {
return `&yen ${val.toFixed(2)}`;
}
render(el: ElementRef<HTMLDivElement>): void {
this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
}
private init(el: HTMLElement): void {
const data = [
{ item: '货源单', count: 40, percent: 0.4 },
{ item: '合同单', count: 21, percent: 0.21 },
{ item: '事例三', count: 17, percent: 0.17 },
{ item: '事例四', count: 13, percent: 0.13 },
{ item: '事例五', count: 9, percent: 0.09 },
{ 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({
container: el,
autoFit: true,
height: 400,
});
// 新建一个 view 用来单独渲染Annotation
const innerView = chart.createView();
chart.coordinate('theta', {
radius: 0.6,
innerRadius: 0.7,
height: 500,
padding: [20, 40],
});
chart.data(data);
chart.scale('percent', {
formatter: val => {
val = val * 100 + '%';
return val;
},
const view1 = chart.createView();
view1.data(dataPillar);
view1.scale('price', {
nice: true,
});
view1.tooltip({
showMarkers: false,
shared: true,
});
chart.tooltip(false);
// 声明需要进行自定义图例字段： 'item'
chart.legend('item', {
position: 'right', // 配置图例显示位置
custom: true, // 关键字段，告诉 G2，要使用自定义的图例
items: data.map((obj, index) => {
return {
name: obj.item, // 对应 itemName
value: obj.percent, // 对应 itemValue
marker: {
symbol: 'square', // marker 的形状
style: {
r: 5, // marker 图形半径
fill: chart.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
},
}, // marker 配置
};
}),
itemValue: {
style: {
fill: '#999',
}, // 配置 itemValue 样式
formatter: (val: any) => `${val * 100}%` // 格式化 itemValue 内容
},
});
chart
view1
.interval()
.adjust('stack')
.position('percent')
.color('item')
.style({
fillOpacity: 1,
stroke: 'white',
lineWidth: 8,
})
.state({
active: {
style: element => {
const shape = element.shape;
return {
lineWidth: 1,
stroke: 'white',
strokeOpacity: shape.attr('fillOpacity'),
};
},
.position('month*price')
.color('name')
.adjust([
{
type: 'dodge',
marginRatio: 0,
},
});
]);
// 移除图例点击过滤交互
chart.removeInteraction('legend-filter');
chart.interaction('element-active');
const view2 = chart.createView();
// view2.axis('count', {
// label: {
// formatter: (val) => {
// return val + ' °C';
// },
// },
// });
view2.data(data);
view2
.line()
.position('month*count')
.color('name')
// chart.interaction('active-region');
chart.render();
// 监听 element 上状态的变化来动态更新 Annotation 信息
chart.on('element:statechange', (ev: any) => {
const { state, stateStatus, element } = ev.gEvent.originalEvent;
// 本示例只需要监听 active 的状态变化
if (state === 'active') {
const data = element.getData();
if (stateStatus) {
// 更新 Annotation
updateAnnotation(data);
} else {
// 隐藏 Annotation
clearAnnotation();
}
}
});
// 绘制 annotation
let lastItem: any;
function updateAnnotation(data: any) {
if (data.item !== lastItem) {
innerView.annotation().clear(true);
innerView
.annotation()
.text({
position: ['50%', '50%'],
content: data.item,
style: {
fontSize: 20,
fill: '#8c8c8c',
textAlign: 'center',
},
offsetY: -20,
})
.text({
position: ['50%', '50%'],
content: data.count,
style: {
fontSize: 28,
fill: '#8c8c8c',
textAlign: 'center',
},
offsetX: -10,
offsetY: 20,
})
innerView.render(true);
lastItem = data.item;
}
}
// 清空 annotation
function clearAnnotation() {
innerView.annotation().clear(true);
innerView.render(true);
lastItem = null;
}
}
}

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

@ -25,22 +25,28 @@
[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]="extraTemplate">
<ng-template #extraTemplate>
<nz-card nzTitle="运营报表" [nzExtra]="extraTemplate01">
<ng-template #extraTemplate01>
<div class="chooseBox">
<button nz-button nzType="primary" (click)="exportFun()">导出</button>
<nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="changeCurve()">
<nz-option [nzValue]="item.value" [nzLabel]="item.label" *ngFor="let item of interManlist"></nz-option>
</nz-select>
<div class="timeBox">
<nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
<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 [nzDisabledDate]="disabledDate" [nzMode]="mode" (ngModelChange)="onChange($event)"></nz-date-picker>
<nz-date-picker [nzDisabledDate]="disabledDate" [(ngModel)]="dateNext" [nzMode]="modeNext" (ngModelChange)="onChangeNext($event)"></nz-date-picker>
</div>
</div>
</div>
</ng-template>
<app-datatable-curve></app-datatable-curve>
</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>

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

@ -11,15 +11,21 @@ import { differenceInCalendarDays } from 'date-fns';
providers: [DatePipe]
})
export class DatatableOperationtableComponent implements OnInit {;
export class DatatableOperationtableComponent 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';
dateNext: any = null;
modeNext = 'year';
timeNext: any = ['2022-01-01 00:00:00']
today = new Date();
@ViewChild('st') private readonly st!: STComponent;
enterpriseInfoId = ''
enterpriseInfoIdPie = ''
interManlist: any = []
columns: STColumn[] = [
{ title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
{ title: '订单数', index: 'zsl', className: 'text-center' },
@ -36,12 +42,12 @@ export class DatatableOperationtableComponent implements OnInit {;
/**
* 查询参数
*/
get reqParams() {
if(this.mode === 'year') {
get reqParams() {
if (this.mode === 'year') {
this.type = 1
} else if(this.mode === 'month') {
} else if (this.mode === 'month') {
this.type = 2
} else if(this.mode === 'date') {
} else if (this.mode === 'date') {
this.type = 3
} else {
this.type = 4
@ -49,32 +55,41 @@ export class DatatableOperationtableComponent implements OnInit {;
let params: any = {
time: this.time,
type: this.type
};
};
delete params._$expand;
return { ...params };
}
constructor(public service: DataService, private datePipe: DatePipe) { }
ngOnInit(): void { }
ngOnInit(): void {
this.initData()
}
initData() {
this.service.getNetworkFreightForwarder().subscribe(res => {
this.interManlist = res
this.enterpriseInfoId = res[0].value
this.enterpriseInfoIdPie = res[0].value
})
}
changeData(){
if(this.mode === 'year') {
changeData() {
if (this.mode === 'year') {
this.dateFormat = 'yyyy'
} else if(this.mode === 'month') {
} else if (this.mode === 'month') {
this.dateFormat = 'yyyy-MM'
} else {
this.dateFormat = 'yyyy-MM-dd'
}
}
}
onChange(result: any) {
if(this.mode === 'year') {
if (this.mode === 'year') {
this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
} else if(this.mode === 'month') {
} else if (this.mode === 'month') {
this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
} else if(this.mode === 'date') {
} else if (this.mode === 'date') {
this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00']
} else{
} 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 });
@ -82,8 +97,27 @@ export class DatatableOperationtableComponent implements OnInit {;
disabledDate = (current: Date): boolean =>
// Can not select days before today and today
differenceInCalendarDays(current, this.today) > 0;
exportFun(){
exportFun() {
}
changeCurve(){
}
changePie(){
}
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']
}
}
}

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

@ -1 +1,3 @@
<g2-custom delay="100" (render)="render($event)"></g2-custom>
<div class="box">
<g2-custom delay="100" (render)="render($event)"></g2-custom>
</div>

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

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

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

@ -1,10 +1,7 @@
import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { ModalHelper, _HttpClient } from '@delon/theme';
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie';
import { G2PieComponent, G2PieData } from '@delon/chart/pie';
import { format } from 'date-fns';
import { Chart, registerShape, Util } from '@antv/g2';
import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
import { Chart } from '@antv/g2';
import { DataService } from '../../../services/data.service';
@Component({
@ -14,101 +11,27 @@ import { DataService } from '../../../services/data.service';
})
export class OperationtablePieComponent implements OnInit {
@ViewChild('pie', { static: false }) pie!: G2PieComponent;
chartData: G2TimelineData[] = [];
visitData = this.genData();
salesData = this.genData();
salesPieData: G2PieData[] = [];
total = '';
chartData: any = [];
el: any;
constructor(private service: DataService, private ngZone: NgZone) {
}
ngOnInit(): void {
this.refreshPie();
this.initLineData()
this.initData()
}
initLineData() {
for (let i = 0; i < 20; i += 1) {
this.chartData.push({
time: new Date().getTime() + 1000 * 60 * 60 * 24 * i,
y1: Math.floor(Math.random() * 100) + 1000,
y2: Math.floor(Math.random() * 100) + 10,
});
}
}
private genData(): G2MiniAreaData[] {
const beginDay = new Date().getTime();
const res: G2MiniAreaData[] = [];
for (let i = 0; i < 20; i += 1) {
res.push({
x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
y: Math.floor(Math.random() * 100) + 10,
});
}
return res;
}
refresh(): void {
this.visitData = this.genData();
}
refreshPie(): void {
const rv = (min: number = 0, max: number = 5000) => Math.floor(Math.random() * (max - min + 1) + min);
this.salesPieData = [
{
x: '家用电器',
y: rv(),
},
{
x: '食用酒水',
y: rv(),
},
{
x: '个护健康',
y: rv(),
},
{
x: '服饰箱包',
y: rv(),
},
{
x: '母婴产品',
y: rv(),
},
];
if (Math.random() > 0.5) {
this.salesPieData.push({
x: '其他',
y: rv(),
});
}
this.total = `&yen ${this.salesPieData.reduce((pre, now) => now.y + pre, 0).toFixed(2)}`;
if (this.pie) {
// 等待组件渲染
setTimeout(() => {
console.log('a')
this.pie.changeData()
});
}
}
handleClick(data: G2MiniAreaClickItem): void {
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
}
format(val: number): string {
return `&yen ${val.toFixed(2)}`;
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.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
this.el = el.nativeElement
}
private init(el: HTMLElement): void {
const data = [
{ item: '货源单', count: 40, percent: 0.4 },
{ item: '合同单', count: 21, percent: 0.21 },
{ item: '事例三', count: 17, percent: 0.17 },
{ item: '事例四', count: 13, percent: 0.13 },
{ item: '事例五', count: 9, percent: 0.09 },
];
const chart = new Chart({
container: el,
autoFit: true,
@ -121,14 +44,14 @@ export class OperationtablePieComponent implements OnInit {
innerRadius: 0.7,
});
chart.data(data);
chart.data(this.chartData);
chart.scale('percent', {
formatter: val => {
val = val * 100 + '%';
return val;
},
});
// chart.scale('percent', {
// formatter: val => {
// val = val * 100 + '%';
// return val;
// },
// });
chart.tooltip(false);
@ -136,10 +59,11 @@ export class OperationtablePieComponent implements OnInit {
chart.legend('item', {
position: 'right', // 配置图例显示位置
custom: true, // 关键字段，告诉 G2，要使用自定义的图例
items: data.map((obj, index) => {
items: this.chartData.map((obj: any, index: any) => {
return {
name: obj.item, // 对应 itemName
value: obj.percent, // 对应 itemValue
value: obj.percent+ '% ' + obj.count,
count: obj.count, // 对应 itemValue
marker: {
symbol: 'square', // marker 的形状
style: {
@ -153,7 +77,7 @@ export class OperationtablePieComponent implements OnInit {
style: {
fill: '#999',
}, // 配置 itemValue 样式
formatter: (val: any) => `${val * 100}%` // 格式化 itemValue 内容
formatter: (val: any) => `${val}` // 格式化 itemValue 内容
},
});
@ -184,9 +108,12 @@ export class OperationtablePieComponent implements OnInit {
chart.removeInteraction('legend-filter');
chart.interaction('element-active');
chart.render();
chart.render(true);
// 默认选择
interval.elements[0].setState('selected', true);
const ele = interval.elements[0].getData();
// 监听 element 上状态的变化来动态更新 Annotation 信息
chart.on('element:statechange', (ev: any) => {
const { state, stateStatus, element } = ev.gEvent.originalEvent;

20
src/app/routes/datatable/datatable-routing.module.ts
View File

@ -1,6 +1,5 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DatatableCustomtableComponent } from './components/customtable/customtable.component';
import { DatatableCustomindexComponent } from './components/customtable/customindex/customindex.component';
import { DatatableOwnerComponent } from './components/customtable/owner/owner.component';
import { DatatableDriverComponent } from './components/customtable/driver/driver.component';
@ -13,14 +12,19 @@ import { DatatableInvoicetableComponent } from './components/invoicetable/invoic
import { DatatableComplianceSalesmanComponent } from './components/compliance/salesman/salesman.component';
import { DatatableComplianceCustomerComponent } from './components/compliance/customer/customer.component';
import { DatatableFundReportingComponent } from './reporting/components/fund-reporting/fund-reporting.component';
import { DatatableMancustomtableComponent } from './components/customtable/mancustomtable/mancustomtable.component';
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 { DatatableReportingFundInfoComponent } from './reporting/components/fund-info/fund-info.component';
const routes: Routes = [
{ path: 'dataindex', component: DatatableDataindexComponent },
{ path: 'customtable', component: DatatableCustomtableComponent },
{ path: 'customindex', component: DatatableCustomindexComponent },
{ path: 'owner', component: DatatableOwnerComponent },
{ path: 'driver', component: DatatableDriverComponent },
{ path: 'customtable/customindex', component: DatatableCustomindexComponent },
{ path: 'customtable/owner', component: DatatableOwnerComponent },
{ path: 'customtable/driver', component: DatatableDriverComponent },
{ path: 'customtable/mancustomtable', component: DatatableMancustomtableComponent },
{ path: 'customtable/partnertable', component: DatatablePartnertableComponent },
{ path: 'operationtable', component: DatatableOperationtableComponent },
{ path: 'reporting/order', component: DatatableOrderReportingComponent },
{ path: 'compliancetabel/index', component: DatatableComplianceIndexComponent },
@ -28,8 +32,10 @@ const routes: Routes = [
{ path: 'compliancetabel/customer', component: DatatableComplianceCustomerComponent },
{ path: 'financetable', component: DatatableFinancetableComponent },
{ path: 'invoicetable', component: DatatableInvoicetableComponent },
{ path: 'reporting/fund', component: DatatableFundReportingComponent }
,
{ path: 'reporting/fund', component: DatatableFundReportingComponent },
{ path: 'busitable/busiindex', component: DatatableBusiindexComponent },
{ path: 'busitable/mantable', component: DatatableMantableComponent },
{ path: 'reporting/fund', component: DatatableFundReportingComponent },
{ path: 'fund-info', component: DatatableReportingFundInfoComponent }];

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

@ -1,7 +1,6 @@
import { NgModule, Type } from '@angular/core';
import { SharedModule, SHARED_G2_MODULES } from '@shared';
import { DatatableRoutingModule } from './datatable-routing.module';
import { DatatableCustomtableComponent } from './components/customtable/customtable.component';
import { DatatableCustomindexComponent } from './components/customtable/customindex/customindex.component';
import { DatatableOwnerComponent } from './components/customtable/owner/owner.component';
import { DatatableDriverComponent } from './components/customtable/driver/driver.component';
@ -9,6 +8,7 @@ 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';
@ -17,17 +17,23 @@ import { DatatableComplianceCustomerComponent } from './components/compliance/cu
import { DatatableReportingUploadSettingComponent } from './reporting/components/upload-setting/upload-setting.component';
import { DatatableReportingVerifyResultComponent } from './reporting/components/verify-result/verify-result.component';
import { DatatableFundReportingComponent } from './reporting/components/fund-reporting/fund-reporting.component';
import { DatatableMancustomtableComponent } from './components/customtable/mancustomtable/mancustomtable.component';
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 { DatatableReportingFundInfoComponent } from './reporting/components/fund-info/fund-info.component';
const COMPONENTS: Type<void>[] = [
DatatableDataindexComponent,
DatatableCustomtableComponent,
DatatableCustomindexComponent,
DatatableOwnerComponent,
DatatableDriverComponent,
DatatableOperationtableComponent,
OperationtablePieComponent,
DatatableOrderReportingComponent,
OperationtableCurveComponent,
DatatableComplianceIndexComponent,
DatatableFinancetableComponent,
DatatableInvoicetableComponent,
@ -35,8 +41,14 @@ const COMPONENTS: Type<void>[] = [
DatatableComplianceCustomerComponent,
DatatableReportingUploadSettingComponent,
DatatableReportingVerifyResultComponent,
DatatableFundReportingComponent
,
DatatableFundReportingComponent,
DatatableMancustomtableComponent,
DatatablePartnertableComponent,
DatatableBusiindexComponent,
DatatableMantableComponent,
busitableCurveComponent,
busitablePillarComponent,
DatatableFundReportingComponent,
DatatableReportingFundInfoComponent]

37
src/app/routes/datatable/services/data.service.ts
View File

@ -23,6 +23,14 @@ export class DataService extends BaseService {
// 查询运营报表
$api_listOperationalReportPage = `/api/sdc/report/listOperationalReportPage`;
// 查询业绩报表
$api_listPerformanceReportPage = `/api/sdc/report/listPerformanceReportPage`;
// 运营报表运单状态分布
$api_operationalReportWaybillStatusDistribution = `/api/sdc/report/operationalReportWaybillStatusDistribution`;
// 获取网络货运人
$api_get_network_freight_forwarder_list = `/api/mdc/cuc/networkTransporter/findAll`;
// 业绩报表柱状图
$api_performanceReportHistogram = `/api/sdc/report/performanceReportHistogram`;
// 查询开票数据报表
$api_findInvoiceReport = `/api/fcc/invoiceReport/findInvoiceReport`;
@ -30,4 +38,33 @@ export class DataService extends BaseService {
constructor(public injector: Injector) {
super(injector);
}
/**
* 获取网络货运人
* @returns
*/
getNetworkFreightForwarder(params = {}, containerAll = false) {
return this.request(this.$api_get_network_freight_forwarder_list, params).pipe(
map((res: any) => {
if (!res) {
return [];
}
const list = res.map((item: any) => {
return {
label: item.enterpriseName,
value: item.id
};
});
const obj = [];
if (containerAll) {
obj.push({ label: '全部', value: '' });
}
return [...obj, ...list];
})
);
}
getPerformanceReportHistogram(params = {}){
return this.request(this.$api_performanceReportHistogram, params)
}
}