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

666

Browse Source
This commit is contained in:
heqinghang
2022-03-29 17:57:06 +08:00
parent 4b69759518
commit b91095ed9a
14 changed files with 494 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/routes/datatable/components/compliance/customer/customer.component.html Normal file
View File

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

45
src/app/routes/datatable/components/compliance/customer/customer.component.ts Normal file
View File

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

66
src/app/routes/datatable/components/compliance/index/index.component.html Normal file
View File

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

17
src/app/routes/datatable/components/compliance/index/index.component.less Normal file
View File

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

125
src/app/routes/datatable/components/compliance/index/index.component.ts Normal file
View File

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

6
src/app/routes/datatable/components/compliance/salesman/salesman.component.html Normal file
View File

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

45
src/app/routes/datatable/components/compliance/salesman/salesman.component.ts Normal file
View File

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

6
src/app/routes/datatable/components/financetable/financetable.component.html Normal file
View File

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

45
src/app/routes/datatable/components/financetable/financetable.component.ts Normal file
View File

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

14
src/app/routes/datatable/components/invoicetable/invoicetable.component.html Normal file
View File

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

70
src/app/routes/datatable/components/invoicetable/invoicetable.component.ts Normal file
View File

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

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

@ -7,6 +7,11 @@ import { DatatableDriverComponent } from './components/customtable/driver/driver
import { DatatableOperationtableComponent } from './components/operationtable/operationtable.component';
import { DatatableOrderReportingComponent } from './reporting/components/order-reporting/order-reporting.component';
import { DatatableDataindexComponent } from './components/dataindex/dataindex.component';
import { DatatableComplianceIndexComponent } from './components/compliance/index/index.component';
import { DatatableFinancetableComponent } from './components/financetable/financetable.component';
import { DatatableInvoicetableComponent } from './components/invoicetable/invoicetable.component';
import { DatatableComplianceSalesmanComponent } from './components/compliance/salesman/salesman.component';
import { DatatableComplianceCustomerComponent } from './components/compliance/customer/customer.component';
const routes: Routes = [
{ path: 'dataindex', component: DatatableDataindexComponent },
@ -15,9 +20,14 @@ const routes: Routes = [
{ path: 'owner', component: DatatableOwnerComponent },
{ path: 'driver', component: DatatableDriverComponent },
{ path: 'operationtable', component: DatatableOperationtableComponent },
{ path: 'reporting/order', component: DatatableOrderReportingComponent }];
{ path: 'reporting/order', component: DatatableOrderReportingComponent },
{ path: 'compliancetabel/index', component: DatatableComplianceIndexComponent },
{ path: 'compliancetabel/salesman', component: DatatableComplianceSalesmanComponent },
{ path: 'compliancetabel/customer', component: DatatableComplianceCustomerComponent },
{ path: 'financetable', component: DatatableFinancetableComponent },
{ path: 'invoicetable', component: DatatableInvoicetableComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]

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

@ -9,6 +9,11 @@ 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 { DatatableComplianceIndexComponent } from './components/compliance/index/index.component';
import { DatatableFinancetableComponent } from './components/financetable/financetable.component';
import { DatatableInvoicetableComponent } from './components/invoicetable/invoicetable.component';
import { DatatableComplianceSalesmanComponent } from './components/compliance/salesman/salesman.component';
import { DatatableComplianceCustomerComponent } from './components/compliance/customer/customer.component';
const COMPONENTS: Type<void>[] = [
DatatableDataindexComponent,
@ -18,8 +23,13 @@ const COMPONENTS: Type<void>[] = [
DatatableDriverComponent,
DatatableOperationtableComponent,
OperationtablePieComponent,
DatatableOrderReportingComponent
];
DatatableOrderReportingComponent,
DatatableComplianceIndexComponent,
DatatableFinancetableComponent,
DatatableInvoicetableComponent,
DatatableComplianceSalesmanComponent,
DatatableComplianceCustomerComponent
]
@NgModule({
imports: [

26
src/assets/mocks/menu-data.json
View File

@ -646,8 +646,32 @@
{
"text": "订单上报",
"link": "/datatable/reporting/order"
},
{
"text": "合规监控报表",
"children": [{
"text": "合规监控报表",
"link": "/datatable/compliancetabel/index"
},
{
"text": "业务员-合规报表",
"link": "/datatable/compliancetabel/salesman"
},
{
"text": "客户-合规报表",
"link": "/datatable/compliancetabel/customer"
}
]
},
{
"text": "财务报表",
"link": "/datatable/financetable"
},
{
"text": "开票数据报表",
"link": "/datatable/invoicetable"
}
]
]
}
]
}]