Merge branch 'develop' of https://gitlab.eascs.com/tms-ui/tms-obc-web into develop
This commit is contained in:
潘晓云
@ -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>
|
||||
@ -0,0 +1,11 @@
|
||||
.chooseBox{
|
||||
display: flex;
|
||||
}
|
||||
.timeBox{
|
||||
display: flex;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.dateBox{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
@ -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(){
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<g2-custom delay="100" (render)="render($event)"></g2-custom>
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<g2-custom delay="100" (render)="render($event)"></g2-custom>
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -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>
|
||||
@ -0,0 +1,11 @@
|
||||
.chooseBox{
|
||||
display: flex;
|
||||
}
|
||||
.timeBox{
|
||||
display: flex;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.dateBox{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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(){
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -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>
|
||||
@ -0,0 +1,11 @@
|
||||
.chooseBox{
|
||||
display: flex;
|
||||
}
|
||||
.timeBox{
|
||||
display: flex;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.dateBox{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
@ -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() {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -0,0 +1,11 @@
|
||||
.chooseBox{
|
||||
display: flex;
|
||||
}
|
||||
.timeBox{
|
||||
display: flex;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.dateBox{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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: {
|
||||
@ -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>
|
||||
@ -0,0 +1,11 @@
|
||||
.chooseBox{
|
||||
display: flex;
|
||||
}
|
||||
.timeBox{
|
||||
display: flex;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.dateBox{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -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>
|
||||
@ -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 = `¥ ${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 `¥ ${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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -0,0 +1,5 @@
|
||||
.box{
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
margin:0 auto;
|
||||
}
|
||||
@ -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 = `¥ ${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 `¥ ${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;
|
||||
|
||||
@ -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 }];
|
||||
|
||||
|
||||
|
||||
@ -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]
|
||||
|
||||
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @Author : Shiming
|
||||
* @Date : 2021-12-06 20:20:26
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-03-30 09:35:49
|
||||
* @LastEditTime : 2022-03-30 17:39:43
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\components\\bulk-detail\\bulk-detail.component.html
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
-->
|
||||
@ -137,7 +137,7 @@
|
||||
</div>
|
||||
</nz-card>
|
||||
<nz-card nzTitle="运费信息" #distannce3>
|
||||
<h2>{{i?.goodsInfoList?.[0]?.freightPrice}}{{i?.goodsInfoList?.[0]?.freightTypeLabel}}（{{ i?.goodsInfoList?.[0]?.settlementBasisLabel ? i?.goodsInfoList?.[0]?.settlementBasisLabel + '，' :' ' }}{{i?.goodsInfoList?.[0]?.ruleLabel}}）</h2>
|
||||
<h2>{{i?.freightPrice}}{{i?.freightTypeLabel}}（{{ i.settlementBasisLabel ? i?.settlementBasisLabel + '，' :' ' }}{{i?.ruleLabel}}）</h2>
|
||||
<st #st [data]="billExpenses" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">
|
||||
<ng-template st-row="PriceType" let-item let-index="index"> 到付 </ng-template>
|
||||
<ng-template st-row="prices" let-item let-index="index">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-12-03 15:31:52
|
||||
* @LastEditTime : 2022-03-24 13:51:41
|
||||
* @LastEditTime : 2022-03-30 17:31:38
|
||||
* @LastEditors : Shiming
|
||||
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\waybill-management\\components\\bulk-detail\\bulk-detail.component.html
|
||||
@ -30,7 +30,6 @@
|
||||
<sv label="所属项目">{{i?.enterpriseProjectName}}</sv>
|
||||
<sv label="服务类型">{{i?.serviceTypeLabel}}</sv>
|
||||
<sv label="调度员">{{i?.dispatchName}} /{{i?.dispatchPhone}}</sv>
|
||||
<sv label="外部订单号">{{ i?.externalBillCode }}</sv>
|
||||
<sv label="货源编号">{{ i?.resourceCode }} </sv>
|
||||
<sv label="承诺付款天数">{{ i?.paymentDays }}</sv>
|
||||
</div>
|
||||
@ -93,12 +92,13 @@
|
||||
<sv label="接单数量">
|
||||
{{ i?.acceptWeight }}吨,{{ i?.acceptVolume }}方
|
||||
</sv>
|
||||
<sv *ngIf="i?.billStatus =='3' || i?.billStatus =='4' || i?.billStatus =='5'" label="装货数量">
|
||||
<sv label="装货数量">
|
||||
{{ i?.loadWeight }}吨，{{ i?.loadVolume }}方
|
||||
</sv>
|
||||
<sv *ngIf="i?.billStatus =='4' || i?.billStatus =='5'" label="卸货数量">
|
||||
<sv label="卸货数量">
|
||||
{{ i?.settlementWeight }}吨,{{ i?.settlementVolume }}方
|
||||
</sv>
|
||||
|
||||
</sv-container>
|
||||
<div class="mt-md">
|
||||
<h4 class="text-md">装货卸货信息
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-12-03 15:31:52
|
||||
* @LastEditTime : 2022-03-29 11:10:08
|
||||
* @LastEditTime : 2022-03-30 17:16:40
|
||||
* @LastEditors : Shiming
|
||||
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\waybill-management\\components\\vehicle-detail\\vehicle-detail.component.html
|
||||
@ -30,7 +30,6 @@
|
||||
<sv label="所属项目">{{i?.enterpriseProjectName}}</sv>
|
||||
<sv label="服务类型">{{i?.serviceTypeLabel}}</sv>
|
||||
<sv label="调度员">{{i?.dispatchName}} /{{i?.dispatchPhone}}</sv>
|
||||
<sv label="外部订单号">{{ i?.externalBillCode }}</sv>
|
||||
<sv label="货源编号">{{ i?.resourceCode }} </sv>
|
||||
<sv label="承诺付款天数">{{ i?.paymentDays }}</sv>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user