fix bug
This commit is contained in:
Lingzi
@ -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;
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { DatatableBusiindexComponent } from './busiindex.component';
|
||||
|
||||
describe('DatatableBusiindexComponent', () => {
|
||||
let component: DatatableBusiindexComponent;
|
||||
let fixture: ComponentFixture<DatatableBusiindexComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DatatableBusiindexComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DatatableBusiindexComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -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(){
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
<!-- 页头 -->
|
||||
<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>
|
||||
</nz-card>
|
||||
@ -0,0 +1,45 @@
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-compliance-customer',
|
||||
templateUrl: './customer.component.html',
|
||||
})
|
||||
export class DatatableComplianceCustomerComponent implements OnInit {
|
||||
url = `/user`;
|
||||
searchSchema: SFSchema = {
|
||||
properties: {
|
||||
no: {
|
||||
type: 'string',
|
||||
title: '编号'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ViewChild('st') private readonly st!: STComponent;
|
||||
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' },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
constructor(private http: _HttpClient, private modal: ModalHelper) { }
|
||||
|
||||
ngOnInit(): void { }
|
||||
|
||||
add(): void {
|
||||
// this.modal
|
||||
// .createStatic(FormEditComponent, { i: { id: 0 } })
|
||||
// .subscribe(() => this.st.reload());
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
<!-- 页头 -->
|
||||
<page-header-wrapper [title]="'合规监控报表'"></page-header-wrapper>
|
||||
<nz-card>
|
||||
<!-- 搜索区 -->
|
||||
<div nz-row>
|
||||
<div nz-col nzSpan="18">
|
||||
<sf #sf [ui]="ui" [schema]="schema" [button]="'none'"></sf>
|
||||
</div>
|
||||
<div nz-col nzSpan="6">
|
||||
<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 [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" (ngModelChange)="onChange($event)"></nz-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nz-card>
|
||||
|
||||
<div nz-row [nzGutter]="16">
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'订单合格率'" [bordered]="true" [total]="'95.00%'" [footer]="footer1" contentHeight="46">
|
||||
<ng-template #footer1>
|
||||
<div class="card-f">
|
||||
<span class="card-f-l">合格：12423</span> <span>不合格：12423</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</g2-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'货源单占比'" [bordered]="true" [total]="'94.00%'" [footer]="footer2" contentHeight="46">
|
||||
<ng-template #footer2>
|
||||
<div class="card-f">
|
||||
<span class="card-f-l">货源单：12423</span> <span>合同单：12423</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</g2-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'运费直付占比'" [bordered]="true" [total]="'95.10%'" [footer]="footer3" contentHeight="46">
|
||||
<ng-template #footer3>
|
||||
<div class="card-f">
|
||||
<span class="card-f-l">司机：12423</span> <span>车队长：12423</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</g2-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'付款及时率'" [bordered]="true" [total]="'90.00%'" [footer]="footer4" contentHeight="46">
|
||||
<ng-template #footer4>
|
||||
<div class="card-f">
|
||||
<span class="card-f-l">准时：12423</span> <span>逾期：12423</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</g2-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nz-card nzTitle="平台合规情况监控报表">
|
||||
<g2-custom delay="100" (render)="render($event)"></g2-custom>
|
||||
</nz-card>
|
||||
@ -0,0 +1,17 @@
|
||||
.card-f{
|
||||
color: #5a5a5a;
|
||||
.card-f-l{
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
.chooseBox{
|
||||
display: flex;
|
||||
}
|
||||
.timeBox{
|
||||
display: flex;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.dateBox{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
@ -0,0 +1,125 @@
|
||||
import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
|
||||
import { DatePipe, ModalHelper, _HttpClient } from '@delon/theme';
|
||||
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
|
||||
import { format } from 'date-fns';
|
||||
import { SFComponent, SFDateWidgetSchema, SFRadioWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
|
||||
import { G2TimelineData, G2TimelineMap } from '@delon/chart/timeline';
|
||||
import { Chart } from '@antv/g2';
|
||||
const DataSet = require('@antv/data-set');
|
||||
@Component({
|
||||
selector: 'app-datatable-compliance-index',
|
||||
templateUrl: './index.component.html',
|
||||
styleUrls: ['./index.component.less'],
|
||||
providers: [DatePipe]
|
||||
})
|
||||
export class DatatableComplianceIndexComponent implements OnInit {
|
||||
@ViewChild('sf', { static: false })
|
||||
sf!: SFComponent;
|
||||
ui!: SFUISchema;
|
||||
schema: SFSchema = {};
|
||||
|
||||
mode = 'year';
|
||||
date: any = null;
|
||||
dateFormat = 'yyyy-MM-dd';
|
||||
time: any = ['2022-01-01 00:00:00']
|
||||
constructor(private http: _HttpClient, private modal: ModalHelper, private ngZone: NgZone, private datePipe: DatePipe) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initSF();
|
||||
}
|
||||
|
||||
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']
|
||||
}
|
||||
}
|
||||
|
||||
initSF() {
|
||||
this.schema = {
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '网络货运人'
|
||||
}
|
||||
},
|
||||
name2: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '部门'
|
||||
}
|
||||
},
|
||||
name3: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
placeholder: '业务员'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
this.ui = {
|
||||
'*': {
|
||||
grid: { span: 4 }
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
data = [
|
||||
{ Date: '22 February', 订单合格率: 50000, 付款及时率: 125000 },
|
||||
{ Date: '28 February', 订单合格率: 60000, 付款及时率: 150000 },
|
||||
{ Date: '3 March', 订单合格率: 100000, 付款及时率: 250000 },
|
||||
{ Date: '20 March', 订单合格率: 200000, 付款及时率: 500000 },
|
||||
{ Date: '7 April', 订单合格率: 250000, 付款及时率: 625000 },
|
||||
{ Date: '13 June', 订单合格率: 210000, 付款及时率: 525000 }
|
||||
];
|
||||
render(el: ElementRef<HTMLDivElement>) {
|
||||
this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
|
||||
}
|
||||
|
||||
private init(el: HTMLElement): void {
|
||||
const chart = new Chart({
|
||||
container: el,
|
||||
autoFit: true,
|
||||
height: 400
|
||||
});
|
||||
// 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
|
||||
const data = [
|
||||
{x: '1991', z: 'a', y: 1},
|
||||
{x: '1991', z: 'b', y: 2},
|
||||
{x: '1991', z: 'c', y: 3},
|
||||
|
||||
{x: '1992', z: 'a', y: 11},
|
||||
{x: '1992', z: 'b', y: 22},
|
||||
{x: '1992', z: 'c', y: 33},
|
||||
|
||||
{x: '1993', z: 'a', y: 1},
|
||||
{x: '1993', z: 'b', y: 2},
|
||||
{x: '1993', z: 'c', y: 3}
|
||||
];
|
||||
|
||||
chart.data(data);
|
||||
// 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
|
||||
chart.line().position('x*y').color('z');
|
||||
// 在x*y的坐标上按z值绘制圆点
|
||||
chart.point().position('x*y').size(4).color('z').shape('circle');
|
||||
chart.render();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
<!-- 页头 -->
|
||||
<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>
|
||||
</nz-card>
|
||||
@ -0,0 +1,45 @@
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-compliance-salesman',
|
||||
templateUrl: './salesman.component.html',
|
||||
})
|
||||
export class DatatableComplianceSalesmanComponent implements OnInit {
|
||||
url = `/user`;
|
||||
searchSchema: SFSchema = {
|
||||
properties: {
|
||||
no: {
|
||||
type: 'string',
|
||||
title: '编号'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ViewChild('st') private readonly st!: STComponent;
|
||||
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' },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
constructor(private http: _HttpClient, private modal: ModalHelper) { }
|
||||
|
||||
ngOnInit(): void { }
|
||||
|
||||
add(): void {
|
||||
// this.modal
|
||||
// .createStatic(FormEditComponent, { i: { id: 0 } })
|
||||
// .subscribe(() => this.st.reload());
|
||||
}
|
||||
|
||||
}
|
||||
@ -32,7 +32,6 @@
|
||||
<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>
|
||||
|
||||
@ -51,7 +50,7 @@
|
||||
<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>
|
||||
|
||||
@ -20,6 +20,9 @@ export class DatatableCustomindexComponent implements OnInit {
|
||||
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' },
|
||||
@ -34,12 +37,12 @@ export class DatatableCustomindexComponent 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
|
||||
@ -47,8 +50,8 @@ export class DatatableCustomindexComponent implements OnInit {
|
||||
let params: any = {
|
||||
time: this.time,
|
||||
type: this.type
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
delete params._$expand;
|
||||
return { ...params };
|
||||
}
|
||||
@ -56,23 +59,23 @@ export class DatatableCustomindexComponent implements OnInit {
|
||||
constructor(public service: DataService, private datePipe: DatePipe) { }
|
||||
ngOnInit(): void { }
|
||||
|
||||
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 });
|
||||
@ -80,7 +83,22 @@ export class DatatableCustomindexComponent implements OnInit {
|
||||
disabledDate = (current: Date): boolean =>
|
||||
// Can not select days before today and today
|
||||
differenceInCalendarDays(current, this.today) > 0;
|
||||
exportFun(){
|
||||
|
||||
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() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
<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>
|
||||
</nz-card>
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,45 @@
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-mancustomtable',
|
||||
templateUrl: './mancustomtable.component.html',
|
||||
})
|
||||
export class DatatableMancustomtableComponent implements OnInit {
|
||||
url = `/user`;
|
||||
searchSchema: SFSchema = {
|
||||
properties: {
|
||||
no: {
|
||||
type: 'string',
|
||||
title: '编号'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ViewChild('st') private readonly st!: STComponent;
|
||||
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' },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
constructor(private http: _HttpClient, private modal: ModalHelper) { }
|
||||
|
||||
ngOnInit(): void { }
|
||||
|
||||
add(): void {
|
||||
// this.modal
|
||||
// .createStatic(FormEditComponent, { i: { id: 0 } })
|
||||
// .subscribe(() => this.st.reload());
|
||||
}
|
||||
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
<!-- 页头 -->
|
||||
<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>
|
||||
</nz-card>
|
||||
@ -0,0 +1,45 @@
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-financetable',
|
||||
templateUrl: './financetable.component.html',
|
||||
})
|
||||
export class DatatableFinancetableComponent implements OnInit {
|
||||
url = `/user`;
|
||||
searchSchema: SFSchema = {
|
||||
properties: {
|
||||
no: {
|
||||
type: 'string',
|
||||
title: '编号'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ViewChild('st') private readonly st!: STComponent;
|
||||
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' },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
constructor(private http: _HttpClient, private modal: ModalHelper) { }
|
||||
|
||||
ngOnInit(): void { }
|
||||
|
||||
add(): void {
|
||||
// this.modal
|
||||
// .createStatic(FormEditComponent, { i: { id: 0 } })
|
||||
// .subscribe(() => this.st.reload());
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
<!-- 页头 -->
|
||||
<page-header-wrapper [title]="'开票数据报表'"></page-header-wrapper>
|
||||
<nz-card nzTitle="开票数据报表">
|
||||
<st
|
||||
#st
|
||||
[data]="data"
|
||||
[columns]="columns"
|
||||
[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: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
|
||||
[loadingDelay]="500"
|
||||
>
|
||||
</st>
|
||||
</nz-card>
|
||||
@ -0,0 +1,70 @@
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-invoicetable',
|
||||
templateUrl: './invoicetable.component.html',
|
||||
})
|
||||
export class DatatableInvoicetableComponent implements OnInit {
|
||||
@ViewChild('st', { static: false })
|
||||
st!: STComponent;
|
||||
columns!: STColumn[];
|
||||
|
||||
data=[{name1:1111}]
|
||||
constructor(private http: _HttpClient, private modal: ModalHelper) { }
|
||||
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
get reqParams() {
|
||||
return { };
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.initST();
|
||||
}
|
||||
initST() {
|
||||
this.columns = [
|
||||
{
|
||||
title: '运营主体',
|
||||
index: 'name1'
|
||||
},
|
||||
{
|
||||
title: '已开票总金额',
|
||||
index: 'name1'
|
||||
},
|
||||
{
|
||||
title: '当月已开票金额',
|
||||
index: 'name1'
|
||||
},
|
||||
{
|
||||
title: '已申请待开金额',
|
||||
index: 'name1'
|
||||
},
|
||||
{
|
||||
title: '未申请开票金额（历史）',
|
||||
index: 'name1'
|
||||
},
|
||||
{
|
||||
title: '未申请开票金额（当月）',
|
||||
index: 'name1'
|
||||
},
|
||||
{
|
||||
title: '当月发票张数',
|
||||
index: 'name1'
|
||||
},
|
||||
{
|
||||
title: '剩余发票张数',
|
||||
index: 'name1'
|
||||
},
|
||||
|
||||
];
|
||||
}
|
||||
add(): void {
|
||||
// this.modal
|
||||
// .createStatic(FormEditComponent, { i: { id: 0 } })
|
||||
// .subscribe(() => this.st.reload());
|
||||
}
|
||||
|
||||
}
|
||||
@ -37,7 +37,7 @@ export class OperationtableCurveComponent implements OnInit {
|
||||
{ name: '订单数', month: '05', count: 47 },
|
||||
{ name: '承运数', month: '05', count: 124 },
|
||||
{ name: '订单数', month: '06', count: 203 },
|
||||
{ name: '承运数', month: '06', count: 213 },
|
||||
{ name: '承运数', month: '06', count: 203 },
|
||||
{ name: '订单数', month: '07', count: 24 },
|
||||
{ name: '订单数', month: '08', count: 356 },
|
||||
{ name: '承运数', month: '09', count: 124 },
|
||||
|
||||
@ -25,17 +25,19 @@
|
||||
[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>
|
||||
@ -43,5 +45,8 @@
|
||||
<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>
|
||||
@ -19,8 +19,13 @@ export class DatatableOperationtableComponent implements OnInit {
|
||||
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();
|
||||
|
||||
enterpriseInfoId = ''
|
||||
enterpriseInfoIdPie = ''
|
||||
interManlist: any = []
|
||||
columns: STColumn[] = [
|
||||
{ title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
|
||||
{ title: '订单数', index: 'zsl', className: 'text-center' },
|
||||
@ -37,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
|
||||
@ -50,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 });
|
||||
@ -83,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']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user