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

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

Browse Source
This commit is contained in:
潘晓云
2022-03-30 11:34:11 +08:00
parent 8e1169a8d9 6de4675aa9
commit 41e675ae6a
22 changed files with 601 additions and 21 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;
}

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

@ -0,0 +1,198 @@
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 }
}
};
}
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 = [
{ data: '1月', label: '订单合格率', value: 5 },
{ data: '2月', label: '订单合格率', value: 10 },
{ data: '3月', label: '订单合格率', value: 25 },
{ data: '4月', label: '订单合格率', value: 35 },
{ data: '5月', label: '订单合格率', value: 15 },
{ data: '6月', label: '订单合格率', value: 5 },
{ data: '7月', label: '订单合格率', value: 95 },
{ data: '8月', label: '订单合格率', value: 45 },
{ data: '1月', label: '付款及时率', value: 10 },
{ data: '2月', label: '付款及时率', value: 15 },
{ data: '3月', label: '付款及时率', value: 30 },
{ data: '4月', label: '付款及时率', value: 8 },
{ data: '5月', label: '付款及时率', value: 9 },
{ data: '6月', label: '付款及时率', value: 5 },
{ data: '7月', label: '付款及时率', value: 80 },
{ data: '8月', label: '付款及时率', value: 55 },
{ data: '1月', label: '货源占比率', value: 90 },
{ data: '2月', label: '货源占比率', value: 30 },
{ data: '3月', label: '货源占比率', value: 45 },
{ data: '4月', label: '货源占比率', value: 35 },
{ data: '5月', label: '货源占比率', value: 95 },
{ data: '6月', label: '货源占比率', value: 35 },
{ data: '7月', label: '货源占比率', value: 65 },
{ data: '8月', label: '货源占比率', value: 63 },
{ data: '1月', label: '运费直付占比', value: 30 },
{ data: '2月', label: '运费直付占比', value: 60 },
{ data: '3月', label: '运费直付占比', value: 25 },
{ data: '4月', label: '运费直付占比', value: 35 },
{ data: '5月', label: '运费直付占比', value: 15 },
{ data: '6月', label: '运费直付占比', value: 55 },
{ data: '7月', label: '运费直付占比', value: 50 },
{ data: '8月', label: '运费直付占比', value: 30 },
];
chart.data(data);
//刻度自定义
chart.scale({
data: {
range: [0, 1],
},
value: {
min: 0,
nice: true,
},
});
// 图表下方图形文字自定义
chart.legend({
items:[
{
name: '订单合格率',
value: 'node_load1',
marker: {
symbol: 'circle',
style: {fill: '#6193f7'}
},
},
{
name: '付款及时率',
value: 'node_load2',
marker: {symbol: 'circle',style: {fill: '#58d3a2'}},
},
{
name: '货源占比率',
value: 'node_load13',
marker: {symbol: 'circle',style: {fill: '#5b6d8f'}},
},
{
name: '运费直付占比',
value: 'node_load13',
marker: {symbol: 'circle',style: {fill: '#f0b915'}},
},
]
});
// 提示自定义
chart.tooltip({
showCrosshairs: true,
shared: true,
});
//数据格式化
chart.axis('value', {
label: {
formatter: (val) => {
return val + ' %';
},
},
});
// 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
chart.line().position('data*value').color('label').tooltip('label*value', (name:any, value:any) => {
return {
name: name,
value: value + '%'
};
});;
// 在x*y的坐标上按z值绘制圆点
chart.point().position('data*value').size(4).color('label').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());
}
}

12
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';
import { DatatableFundReportingComponent } from './reporting/components/fund-reporting/fund-reporting.component';
const routes: Routes = [
@ -17,9 +22,14 @@ const routes: Routes = [
{ path: 'driver', component: DatatableDriverComponent },
{ path: 'operationtable', component: DatatableOperationtableComponent },
{ 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 },
{ path: 'reporting/fund', component: DatatableFundReportingComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],

13
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';
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';
@ -22,10 +27,16 @@ const COMPONENTS: Type<void>[] = [
DatatableOperationtableComponent,
OperationtablePieComponent,
DatatableOrderReportingComponent,
DatatableComplianceIndexComponent,
DatatableFinancetableComponent,
DatatableInvoicetableComponent,
DatatableComplianceSalesmanComponent,
DatatableComplianceCustomerComponent,
DatatableReportingUploadSettingComponent,
DatatableReportingVerifyResultComponent,
DatatableFundReportingComponent
];
]
@NgModule({
imports: [

2
src/app/routes/datatable/reporting/components/order-reporting/order-reporting.component.ts
View File

@ -267,7 +267,7 @@ export class DatatableOrderReportingComponent implements OnInit {
{ title: '订单状态', render: 'orderStatus', className: 'text-center', width: '120px', },
{ title: '司机状态', render: 'driverStatus', className: 'text-center', width: '120px', },
{ title: '车辆状态', render: 'carStatus', className: 'text-center', width: '120px', },
{ title: '本地校验', render: 'localValid', className: 'text-center', width: '120px', },
{ title: '本地校验66', render: 'localValid', className: 'text-center', width: '120px', },
{
title: '订单号',
render: 'billComplianceVOS',