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:
Taric Xin
2022-04-01 08:55:30 +08:00
parent 4deec2010d 05cb535943
commit 627f790edc
33 changed files with 429 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html
View File

@ -32,7 +32,7 @@
<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>
<nz-date-picker [(ngModel)]="dateNext" [nzDisabledDate]="disabledDate" [nzMode]="modeNext" (ngModelChange)="onChangeNext($event)"></nz-date-picker>
</div>
</div>
</div>
@ -43,9 +43,9 @@
<div class="title">
<div class="box" style="background-color: #3ba1ff;"></div> 环比(%)
</div>
<g2-custom delay="100" (render)="render($event)"></g2-custom>
<!-- <g2-custom delay="100" (render)="render($event)"></g2-custom> -->
<!-- <app-busitable-curve></app-busitable-curve> -->
<!-- <app-busitable-curve #curve [chartData]="chartData.chainRatio"></app-busitable-curve> -->
<app-busitable-curve #curve [chartData]="chartData.chainRatio"></app-busitable-curve>
</div>
<div nz-col class="gutter-row" [nzSpan]="12">
<div class="title">
@ -53,7 +53,6 @@
</div>
<app-busitable-pillar #pillar [chartData]="chartData.performance"></app-busitable-pillar>
</div>
</div>
</nz-card>

52
src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts
View File

@ -4,7 +4,8 @@ import { DatePipe, _HttpClient } from '@delon/theme';
import { differenceInCalendarDays } from 'date-fns';
import { DataService } from '../../../services/data.service';
import { Chart } from '@antv/g2';
import { BusitableCurveComponent } from './curve2/curve.component';
import { BusitablePillarComponent } from './pillar/pillar.component';
import { BusitableCurveComponent } from './curve/curve.component';
@Component({
selector: 'app-datatable-busiindex',
@ -16,6 +17,7 @@ import { BusitableCurveComponent } from './curve2/curve.component';
export class DatatableBusiindexComponent implements OnInit {
@ViewChild('st') private readonly st!: STComponent;
@ViewChild('curve') private readonly curve!: BusitableCurveComponent;
@ViewChild('pillar') private readonly pillar!: BusitablePillarComponent;
type = 1;
mode = 'year';
date: any = null;
@ -26,9 +28,8 @@ export class DatatableBusiindexComponent implements OnInit {
timeNext: any = ['2022-01-01 00:00:00']
dateFormat = 'yyyy-MM-dd';
today = new Date();
chainRatio: any = []
chartData: any = {}
el: any;
flag = false;
columns: STColumn[] = [
{ title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
@ -80,12 +81,11 @@ export class DatatableBusiindexComponent implements OnInit {
};
this.service.request(this.service.$api_performanceReportHistogram, params).subscribe(res => {
if (res) {
this.chainRatio = res.chainRatio
this.chartData = res
setTimeout(() => {
this.ngZone.runOutsideAngular(() => this.init(this.el));
}, 1000);
if(this.flag) {
this.pillar.reRender()
this.curve.reRender()
}
}
})
}
@ -124,6 +124,8 @@ export class DatatableBusiindexComponent implements OnInit {
} else if(this.mode === 'month') {
this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00']
}
this.flag = true
this.initData()
}
disabledDate = (current: Date): boolean =>
// Can not select days before today and today
@ -131,38 +133,4 @@ export class DatatableBusiindexComponent implements OnInit {
exportFun(){
}
render(el: ElementRef<HTMLDivElement>): void {
this.el = el.nativeElement
}
private init(el: HTMLElement): void {
const chart = new Chart({
container: el,
autoFit: true,
height: 500,
});
chart.data(this.chainRatio);
chart.scale({
year: {
range: [0, 1],
},
value: {
min: 0,
nice: true,
},
});
chart.tooltip({
showCrosshairs: true, // 展示 Tooltip 辅助线
shared: true,
});
chart.line().position('time*value').label('value');
chart.point().position('time*value');
chart.render();
}
}

2
src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.html
View File

@ -1 +1 @@
<g2-custom delay="100" (render)="render($event)"></g2-custom>
<g2-custom delay="200" (render)="render($event)"></g2-custom>

49
src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.ts
View File

@ -1,6 +1,4 @@
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, 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({
@ -9,43 +7,44 @@ import { DataService } from 'src/app/routes/datatable/services/data.service';
styleUrls: ['./curve.component.less']
})
export class BusitableCurveComponent implements OnInit, OnChanges {
@Input() chartData: any;
el: any;
@Input() chartData: any;
chart: any;
constructor(private service: DataService, private ngZone: NgZone) {
}
ngOnChanges(changes: SimpleChanges): void {
if (this.chartData) {
// setTimeout(()=>{
// this.chart.render(true)
// }, 1000)
}
}
ngOnInit(): void {
}
ngOnChanges(changes: SimpleChanges): void {
if (this.chartData) {
setTimeout(() => {
this.ngZone.runOutsideAngular(() => this.init(this.el));
}, 2000)
}
reRender() {
setTimeout(() => {
this.chart.data(this.chartData);
this.chart.render();
}, 500)
}
handleClick(data: G2MiniAreaClickItem): void {
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
}
render(el: ElementRef<HTMLDivElement>): void {
this.el = el.nativeElement
// this.ngZone.runOutsideAngular(() => this.init(this.el));
this.ngZone.runOutsideAngular(() => this.init(this.el));
}
private init(el: HTMLElement): void {
const chart = new Chart({
this.chart = new Chart({
container: el,
autoFit: true,
height: 500,
});
chart.data(this.chartData);
chart.scale({
this.chart.data(this.chartData);
this.chart.scale({
year: {
range: [0, 1],
},
@ -55,15 +54,15 @@ export class BusitableCurveComponent implements OnInit, OnChanges {
},
});
chart.tooltip({
this.chart.tooltip({
showCrosshairs: true, // 展示 Tooltip 辅助线
shared: true,
});
chart.line().position('time*value').label('value');
chart.point().position('time*value');
this.chart.line().position('time*value').label('value');
this.chart.point().position('time*value');
chart.render();
this.chart.render();
}
}

92
src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.ts
View File

@ -1,92 +0,0 @@
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, 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, OnChanges {
@Input() chartData: any ;
el: any;
constructor(private service: DataService, private ngZone: NgZone) {
}
ngOnChanges(changes: SimpleChanges): void {
if(this.chartData){
setTimeout(()=>{
this.ngZone.runOutsideAngular(() => this.init(this.el));
}, 3000)
}
}
ngOnInit(): void {
this.initData()
}
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.el = el.nativeElement
}
private init(el: HTMLElement): void {
const ds = new DataSet();
const dv = ds.createView().source(this.chartData);
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: 500,
padding: [20, 40],
});
const view1 = chart.createView();
view1.data(this.chartData);
view1.scale('price', {
nice: true,
});
view1.tooltip({
showMarkers: false,
shared: true,
});
view1
.interval()
.position('month*price')
.color('name')
.adjust([
{
type: 'dodge',
marginRatio: 0,
},
]);
// chart.interaction('active-region');
chart.render();
}
}

2
src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.html
View File

@ -1 +1 @@
<g2-custom delay="100" (render)="render($event)"></g2-custom>
<g2-custom delay="200" (render)="render($event)"></g2-custom>

40
src/app/routes/datatable/components/busitable/busiindex/pillar/pillar.component.ts
View File

@ -7,48 +7,50 @@ import { DataService } from 'src/app/routes/datatable/services/data.service';
styleUrls: ['./pillar.component.less']
})
export class BusitablePillarComponent implements OnInit, OnChanges {
el: any;
@Input() chartData: any ;
@Input() chartData: any;
chart: any;
constructor(private service: DataService, private ngZone: NgZone) {
}
ngOnChanges(changes: SimpleChanges): void {
if(this.chartData){
setTimeout(()=>{
this.ngZone.runOutsideAngular(() => this.init(this.el));
}, 1000)
if (this.chartData) {
// setTimeout(()=>{
// this.chart.render(true)
// }, 1000)
}
}
ngOnInit(): void {
}
reRender() {
setTimeout(() => {
this.chart.data(this.chartData);
this.chart.render();
}, 500)
}
render(el: ElementRef<HTMLDivElement>): void {
this.el = el.nativeElement
this.ngZone.runOutsideAngular(() => this.init(this.el));
}
private init(el: HTMLElement): void {
const chart = new Chart({
this.chart = new Chart({
container: el,
autoFit: true,
height: 500,
});
chart.data(this.chartData);
chart.tooltip({
this.chart.data(this.chartData);
this.chart.tooltip({
showMarkers: false,
});
chart.interval().position('time*number');
chart.interaction('element-active');
chart.render();
this.chart.interval().position('time*number');
this.chart.render();
}
}

1
src/app/routes/datatable/components/busitable/mantable/mantable.component.html
View File

@ -38,5 +38,4 @@
</div>
</div>
</ng-template>
<app-datatable-curve></app-datatable-curve>
</nz-card>

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

@ -55,5 +55,4 @@
</div>
</div>
</ng-template>
<app-datatable-curve></app-datatable-curve>
</nz-card>

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

@ -23,6 +23,7 @@ export class DatatableCustomindexComponent implements OnInit {
dateNext: any = null;
modeNext = 'year';
timeNext: any = ['2022-01-01 00:00:00']
columns: STColumn[] = [
{ title: '用户类型', index: 'networkTransporterName', className: 'text-center' },

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

@ -52,7 +52,8 @@ export class DatatableDriverComponent implements OnInit {
}
let params: any = {
time: this.time,
type: this.type
type: this.type,
...this.sf?.value
};
delete params._$expand;

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

@ -38,7 +38,7 @@
</div>
</div>
</ng-template>
<st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listOperationalReportPage"
<st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listShipperReportPage"
[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>

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

@ -26,23 +26,33 @@ export class DatatableOwnerComponent implements OnInit {
schema: SFSchema = {};
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: 'enterpriseName', className: 'text-center' },
{ title: '注册时间', index: 'registerTime', className: 'text-center' },
{ title: '客户类型', index: 'customerType', className: 'text-center', type: 'enum', enum: {
1: '平台客户',
2: '直客',
3: '渠道客户'
}
},
{ title: '业务员', index: 'salesmanName', className: 'text-center' },
{ title: '合伙人', index: 'partnerName', className: 'text-center' },
{ title: '客户状态', index: 'customerStatus', className: 'text-center', type: 'enum', enum: {
1: '未激活',
2: '沉默',
3: '流失',
4: '活跃'
} },
{ title: '订单数', index: 'zsl', className: 'text-center' },
{ title: '订单金额', index: 'ddje', className: 'text-center' },
{ title: '应收订单数', index: 'ysdds', className: 'text-center' },
{ title: '应收金额', index: 'yingsje', 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' }
{ title: '待开票金额', index: 'dkpdds', className: 'text-center' },
{ title: '已收金额', render: 'yisje', className: 'text-center' },
{ title: '应收附加费', index: 'yingsfjf', className: 'text-center' },
{ title: '已收附加费', index: 'yisfjf', className: 'text-center' },
{ title: '附加费率', index: 'fjfl', className: 'text-center' },
{ title: '已开票金额', index: 'ykpje', className: 'text-center' }
];
/**
* 查询参数
@ -59,7 +69,8 @@ export class DatatableOwnerComponent implements OnInit {
}
let params: any = {
time: this.time,
type: this.type
type: this.type,
...this.sf?.value
};
delete params._$expand;
@ -76,28 +87,41 @@ export class DatatableOwnerComponent implements OnInit {
this.schema = {
properties: {
_$expand: { type: 'boolean', ui: { hidden: true } },
billCode: {
enterpriseName: {
type: 'string',
title: '货主名称',
ui: {
placeholder: '请输入',
}
},
resourceCode: {
customerType: {
type: 'string',
title: '客户类型',
ui: {
widget: 'select',
placeholder: '请选择',
}
},
enum: [
{label: '直客', value: 2},
{label: '渠道客户', value: 3},
{label: '平台客户', value: 1},
]
},
loadingPlace: {
customerStatus: {
type: 'string',
title: '客户状态',
ui: {
widget: 'select',
placeholder: '请选择',
}
},
enum: [
{label: '未激活', value: 1},
{label: '沉默', value: 2},
{label: '流失', value: 3},
{label: '活跃', value: 4},
]
},
createTime: {
registerTime: {
title: '注册时间',
type: 'string',
ui: {

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

@ -1,24 +0,0 @@
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();
});
});

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

@ -1,131 +1,81 @@
import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
import { DataService } from '../../../services/data.service';
import DataSet from '@antv/data-set';
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-datatable-curve',
selector: 'app-operation-curve',
templateUrl: './curve.component.html',
styleUrls: ['./curve.component.less']
})
export class OperationtableCurveComponent implements OnInit {
export class OperationCurveComponent implements OnInit, OnChanges {
el: any;
@Input() chartData: any;
chart: any;
constructor(private service: DataService, private ngZone: NgZone) {
}
ngOnChanges(changes: SimpleChanges): void {
if (this.chartData) {
// setTimeout(()=>{
// this.chart.render(true)
// }, 1000)
}
}
ngOnInit(): void {
}
handleClick(data: G2MiniAreaClickItem): void {
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
reRender() {
setTimeout(() => {
this.chart.data(this.chartData);
this.chart.render();
}, 1000)
}
render(el: ElementRef<HTMLDivElement>): void {
this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
this.el = el.nativeElement
setTimeout(() => {
this.ngZone.runOutsideAngular(() => this.init(this.el));
}, 1000)
}
private init(el: HTMLElement): void {
const data = [
{ 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({
private init(el: HTMLElement): void {
this.chart = new Chart({
container: el,
autoFit: true,
height: 500,
padding: [20, 40],
});
const view1 = chart.createView();
view1.data(dataPillar);
view1.scale('price', {
nice: true,
this.chart.data(this.chartData);
this.chart.scale({
time: {
range: [0, 1],
},
number: {
nice: true,
},
});
view1.tooltip({
showMarkers: false,
this.chart.tooltip({
showCrosshairs: true,
shared: true,
});
view1
.interval()
.position('month*price')
.color('name')
.adjust([
{
type: 'dodge',
marginRatio: 0,
this.chart.axis('number', {
label: {
formatter: (val: any) => {
return val;
},
]);
const view2 = chart.createView();
// view2.axis('count', {
// label: {
// formatter: (val) => {
// return val + ' °C';
// },
// },
// });
view2.data(data);
view2
},
});
this.chart
.line()
.position('month*count')
.position('time*number')
.color('name')
// chart.interaction('active-region');
chart.render();
this.chart.render();
}
}
}

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

@ -28,7 +28,7 @@
<nz-card nzTitle="运营报表" [nzExtra]="extraTemplate01">
<ng-template #extraTemplate01>
<div class="chooseBox">
<nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="changeCurve()">
<nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="initPillarData()">
<nz-option [nzValue]="item.value" [nzLabel]="item.label" *ngFor="let item of interManlist"></nz-option>
</nz-select>
<div class="timeBox">
@ -42,11 +42,22 @@
</div>
</div>
</ng-template>
<app-datatable-curve></app-datatable-curve>
<div nz-row [nzGutter]="64">
<div nz-col class="gutter-row" [nzSpan]="12">
<!-- <div class="title">
<div class="box" style="background-color: #3ba1ff;"></div> 环比(%)
</div> -->
<!-- <g2-custom delay="100" (render)="render($event)"></g2-custom> -->
<!-- <app-busitable-curve></app-busitable-curve> -->
<app-operation-curve #curve [chartData]="chartData.lineChart"></app-operation-curve>
</div>
<div nz-col class="gutter-row" [nzSpan]="12">
<!-- <div class="title">
<div class="box" style="background-color: #f59a23;"></div> 业绩量(元)
</div> -->
<app-operation-pillar #pillar [chartData]="chartData.histogram"></app-operation-pillar>
</div>
</div>
</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>
<app-opeationtable-pie #pie></app-opeationtable-pie>

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

@ -3,6 +3,8 @@ import { STColumn, STComponent } from '@delon/abc/st';
import { DatePipe, _HttpClient } from '@delon/theme';
import { DataService } from '../../services/data.service';
import { differenceInCalendarDays } from 'date-fns';
import { OperationCurveComponent } from './curve/curve.component';
import { OperationPillarComponent } from './pillar/pillar.component';
@Component({
selector: 'app-datatable-operationtable',
@ -12,6 +14,8 @@ import { differenceInCalendarDays } from 'date-fns';
})
export class DatatableOperationtableComponent implements OnInit {
@ViewChild('curve') private readonly curve!: OperationCurveComponent;
@ViewChild('pillar') private readonly pillar!: OperationPillarComponent;
@ViewChild('st') private readonly st!: STComponent;
type = 1;
mode = 'year';
@ -24,8 +28,10 @@ export class DatatableOperationtableComponent implements OnInit {
timeNext: any = ['2022-01-01 00:00:00']
today = new Date();
enterpriseInfoId = ''
enterpriseInfoIdPie = ''
interManlist: any = []
chartData: any = {}
flag = false;
columns: STColumn[] = [
{ title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
{ title: '订单数', index: 'zsl', className: 'text-center' },
@ -64,12 +70,36 @@ export class DatatableOperationtableComponent implements OnInit {
constructor(public service: DataService, private datePipe: DatePipe) { }
ngOnInit(): void {
this.initData()
this.initPillarData()
}
initPillarData(){
let type = 1
if(this.mode === 'year') {
type = 1
} else if(this.mode === 'month') {
type = 2
}
const params: any = {
time: this.timeNext,
type,
enterpriseInfoId: this.enterpriseInfoId
};
this.flag = true
this.service.request(this.service.$api_operationalReportHistogram, params).subscribe(res => {
if (res) {
this.chartData = res
if(this.flag) {
this.pillar.reRender()
this.curve.reRender()
}
}
})
}
initData() {
this.service.getNetworkFreightForwarder().subscribe(res => {
this.interManlist = res
this.enterpriseInfoId = res[0].value
this.enterpriseInfoIdPie = res[0].value
})
}

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

@ -1,3 +1,6 @@
<div class="box">
<nz-card nzTitle="运单状态分布">
<nz-select [(ngModel)]="enterpriseInfoIdPie" style="width: 200px" (ngModelChange)="initData()">
<nz-option [nzValue]="item.value" [nzLabel]="item.label" *ngFor="let item of interManlist"></nz-option>
</nz-select>
<g2-custom delay="100" (render)="render($event)"></g2-custom>
</div>
</nz-card>

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

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

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

@ -13,21 +13,30 @@ export class OperationtablePieComponent implements OnInit {
@ViewChild('pie', { static: false }) pie!: G2PieComponent;
chartData: any = [];
el: any;
enterpriseInfoIdPie = ''
interManlist: any = []
constructor(private service: DataService, private ngZone: NgZone) {
}
ngOnInit(): void {
this.initData()
this.initManData()
}
initData(){
this.service.request(this.service.$api_operationalReportWaybillStatusDistribution).subscribe(res => {
this.service.request(this.service.$api_operationalReportWaybillStatusDistribution, {id: this.enterpriseInfoIdPie}).subscribe(res => {
if (res) {
this.chartData = res
this.ngZone.runOutsideAngular(() => this.init(this.el));
}
})
}
initManData() {
this.service.getNetworkFreightForwarder().subscribe(res => {
this.interManlist = res
this.enterpriseInfoIdPie = res[0].value
})
}
render(el: ElementRef<HTMLDivElement>): void {
this.el = el.nativeElement
}

0
src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.html → src/app/routes/datatable/components/operationtable/pillar/pillar.component.html
View File

0
src/app/routes/datatable/components/busitable/busiindex/curve2/curve.component.less → src/app/routes/datatable/components/operationtable/pillar/pillar.component.less
View File

75
src/app/routes/datatable/components/operationtable/pillar/pillar.component.ts Normal file
View File

@ -0,0 +1,75 @@
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-operation-pillar',
templateUrl: './pillar.component.html',
styleUrls: ['./pillar.component.less']
})
export class OperationPillarComponent implements OnInit, OnChanges {
el: any;
@Input() chartData: any;
chart: any;
constructor(private service: DataService, private ngZone: NgZone) {
}
ngOnChanges(changes: SimpleChanges): void {
if (this.chartData) {
// setTimeout(()=>{
// this.chart.render(true)
// }, 1000)
}
}
ngOnInit(): void {
}
reRender() {
setTimeout(() => {
this.chart.data(this.chartData);
console.log(this.chartData)
this.chart.render();
}, 1000)
}
render(el: ElementRef<HTMLDivElement>): void {
this.el = el.nativeElement
setTimeout(() => {
this.ngZone.runOutsideAngular(() => this.init(this.el));
},1000)
}
private init(el: HTMLElement): void {
this.chart = new Chart({
container: el,
autoFit: true,
height: 500,
});
this.chart.data(this.chartData);
this.chart.scale('number', {
nice: true,
});
this.chart.tooltip({
showMarkers: false,
shared: true,
});
this.chart
.interval()
.position('time*number')
.color('name')
.adjust([
{
type: 'dodge',
marginRatio: 0,
},
]);
this.chart.interaction('active-region');
this.chart.render();
}
}

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

@ -8,7 +8,6 @@ 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';
@ -23,7 +22,9 @@ import { DatatableBusiindexComponent } from './components/busitable/busiindex/bu
import { DatatableMantableComponent } from './components/busitable/mantable/mantable.component';
import { BusitablePillarComponent } from './components/busitable/busiindex/pillar/pillar.component';
import { DatatableReportingFundInfoComponent } from './reporting/components/fund-info/fund-info.component';
import { BusitableCurveComponent } from './components/busitable/busiindex/curve2/curve.component';
import { BusitableCurveComponent } from './components/busitable/busiindex/curve/curve.component';
import { OperationPillarComponent } from './components/operationtable/pillar/pillar.component';
import { OperationCurveComponent } from './components/operationtable/curve/curve.component';
import { FinanceTableCurveComponent } from './components/financetable/curve/curve.component';
const COMPONENTS: Type<void>[] = [
@ -34,7 +35,6 @@ const COMPONENTS: Type<void>[] = [
DatatableOperationtableComponent,
OperationtablePieComponent,
DatatableOrderReportingComponent,
OperationtableCurveComponent,
DatatableComplianceIndexComponent,
DatatableFinancetableComponent,
DatatableInvoicetableComponent,
@ -49,7 +49,10 @@ const COMPONENTS: Type<void>[] = [
DatatableMantableComponent,
BusitablePillarComponent,
DatatableFundReportingComponent,
DatatableReportingFundInfoComponent,
BusitableCurveComponent,
OperationPillarComponent,
OperationCurveComponent,
DatatableReportingFundInfoComponent,
FinanceTableCurveComponent
]

2
src/app/routes/datatable/reporting/components/fund-info/fund-info.component.html
View File

@ -1,5 +1,5 @@
<nz-spin [nzSpinning]="service.http.loading"></nz-spin>
<st #st [scroll]="{x:'1000px'}" [data]="service.$api_get_order_reporting_page" [columns]="columns"
<st #st [scroll]="{x:'1000px'}" [data]="service.$api_get_fund_valid_result" [columns]="columns"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
[res]="{ reName: { list: 'data.records', total: 'data.total' } }" [page]="{ show: false}" [loading]="false"
[bordered]="true">

36
src/app/routes/datatable/reporting/components/fund-info/fund-info.component.ts
View File

@ -19,7 +19,7 @@ export class DatatableReportingFundInfoComponent implements OnInit {
get reqParams() {
return {};
return { capitalCode: this?.record?.orderCode };
}
constructor(public service: ReportingService, private modalRef: NzModalRef, public router: Router) {
@ -35,13 +35,34 @@ export class DatatableReportingFundInfoComponent implements OnInit {
initST() {
this.columns = [
{ title: '序号', type: 'no', className: 'text-center', width: '60px', },
{ title: '监管平台字段', index: 'orderStatus', className: 'text-center', width: '120px', },
{ title: '系统字段', index: 'orderStatus', className: 'text-center', width: '100px', },
{ title: '监管平台字段', index: 'thirdPartyFieldName', className: 'text-center', width: '120px', },
{ title: '系统字段', index: 'checkFieldName', className: 'text-center', width: '100px', },
{ title: '归属模块', index: 'orderStatus', className: 'text-center', width: '120px', },
{ title: '是否必填', index: 'orderStatus', className: 'text-center', width: '100px', },
{ title: '上传值', index: 'orderStatus', className: 'text-center', width: '150px', },
{ title: '本地校验', index: 'orderStatus', className: 'text-center', width: '100px', },
{ title: '错误内容', index: 'orderStatus', className: 'text-center', width: '150px', },
{
title: '是否必填',
index: 'orderStatus',
className: 'text-center',
width: '100px',
type: 'enum',
enum: {
'0': '非必填',
'1': '必填',
},
},
{ title: '上传值', index: 'fieldValue', className: 'text-center', width: '150px', },
{
title: '本地校验',
index: 'checkStatus',
className: 'text-center',
type: 'enum',
enum: {
'0': '校验中',
'1': '通过',
'2': '不通过'
},
width: '100px',
},
{ title: '错误内容', index: 'remark', className: 'text-center', width: '150px', },
]
}
@ -71,4 +92,5 @@ export class DatatableReportingFundInfoComponent implements OnInit {
}
}

7
src/app/routes/datatable/reporting/components/fund-reporting/fund-reporting.component.html
View File

@ -28,7 +28,8 @@
<st #st [scroll]="{x:'1200px'}" [data]="service.$api_get_fund_reporting_page" [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, 50, 100] }" [loading]="false">
[page]="{ show: true, showSize: true, pageSizes: [1,10,20, 50, 100] }" [loading]="false"
(change)="changeSt($event)">
<ng-template st-row="uploadStatus" let-item>
<span [ngClass]="{'text-red-dark':item?.uploadStatus === '4'}">{{item?.billStatusLabel}}</span>
</ng-template>
@ -48,10 +49,10 @@
<span *ngIf="item?.billStatus !== '2'">{{item?.billStatusLabel}}</span>
</ng-template>
<ng-template st-row="tolalAmount" let-item let-index="index">
<div class="text-right">{{item?.tolalAmount | currency :' '}}</div>
<div class="text-right">{{item?.tolalAmount | currency }}</div>
</ng-template>
<ng-template st-row="payAmount" let-item let-index="index">
<div class="text-right">{{item?.payAmount | currency :' '}}</div>
<div class="text-right">{{item?.payAmount | currency }}</div>
</ng-template>
</st>
</nz-card>

74
src/app/routes/datatable/reporting/components/fund-reporting/fund-reporting.component.ts
View File

@ -1,10 +1,11 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { STColumn, STComponent, STData } from '@delon/abc/st';
import { STChange, STColumn, STComponent, STData } from '@delon/abc/st';
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
import { ShipperBaseService } from '@shared';
import { NzModalService } from 'ng-zorro-antd/modal';
import { ReportingService } from '../../services/reporting.service';
import { DatatableReportingFundInfoComponent } from '../fund-info/fund-info.component';
import { DatatableReportingUploadSettingComponent } from '../upload-setting/upload-setting.component';
import { DatatableReportingVerifyResultComponent } from '../verify-result/verify-result.component';
@ -30,6 +31,7 @@ export class DatatableFundReportingComponent implements OnInit {
];
selectedIndex = '1'; //选择的项目
serviceTel = '';
selectedRows: any[] = [];
constructor(
public service: ReportingService,
private router: Router,
@ -51,7 +53,7 @@ export class DatatableFundReportingComponent implements OnInit {
*/
get reqParams() {
const params = Object.assign({}, this.sf?.value || {}, {
uploadStatus: this.selectedIndex,
uploadStatus: this.selectedIndex
});
delete params._$expand;
return { ...params };
@ -60,9 +62,9 @@ export class DatatableFundReportingComponent implements OnInit {
/**
* 选中行
*/
get selectedRows() {
return this.st?.list.filter((item: any) => item.checked) || [];
}
// get selectedRows() {
// return this.st?.list.filter((item: any) => item.checked) || [];
// }
/**
* 伸缩查询条件
@ -217,12 +219,12 @@ export class DatatableFundReportingComponent implements OnInit {
{ title: '', type: 'checkbox', className: 'text-center', width: '60px', },
{ title: '上传状态', render: 'uploadStatus', className: 'text-center', width: '120px', },
{ title: '本地校验', render: 'verifyStatus', className: 'text-center', width: '120px', },
{ title: '流水单号', index: 'serialNumberCode', className: 'text-center', width: '150px', },
{ title: '流水单号', index: 'serialNumberCode', className: 'text-center', width: '190px', },
{
title: '订单号',
render: 'orderCode',
className: 'text-center',
width: '150px',
width: '180px',
},
{ title: '运单号', render: 'wayBillCode', className: 'text-center', width: '150px', },
{
@ -243,9 +245,9 @@ export class DatatableFundReportingComponent implements OnInit {
{ title: '收款银行', index: 'bankTypeLabel', className: 'text-center', width: '200px' },
{ title: '银行流水号', index: 'bankSerialNumber', className: 'text-center', width: '150px' },
{ title: '银行流水号', index: 'bankSerialNumber', className: 'text-center', width: '180px' },
{ title: '实际支付金额', render: 'payAmount', className: 'text-center', width: '150px' },
{ title: '交易时间', index: 'transactionTime', className: 'text-center', width: '150px' },
{ title: '交易时间', index: 'transactionTime', className: 'text-center', width: '180px' },
{ title: '上传次数', index: 'uploadFrequency', className: 'text-center', width: '120px' },
{ title: '上传时间', index: 'uploadTime', className: 'text-center', width: '180px' },
];
@ -268,9 +270,11 @@ export class DatatableFundReportingComponent implements OnInit {
nzOkText: '确定',
nzCancelText: '取消',
nzOnOk: () => {
this.service.request(this.service.$api_recall_reporting, { rows: this.selectedRows }).subscribe((res: any) => {
const ids = this.selectedRows.map(i => i?.id);
this.service.request(this.service.$api_fund_reporting_recall, ids).subscribe((res: any) => {
if (res) {
this.service.msgSrv.success('撤销成功');
this.search();
}
})
@ -326,7 +330,8 @@ export class DatatableFundReportingComponent implements OnInit {
this.openWainingModal('请选择需要上传的数据');
return;
}
this.service.request(this.service.$api_recall_reporting, { rows: this.selectedRows }).subscribe((res: any) => {
const ids = this.selectedRows.map(i => i?.id);
this.service.request(this.service.$api_fund_reporting_upload, ids).subscribe((res: any) => {
if (res) {
this.service.msgSrv.success('上传成功');
this.search();
@ -354,13 +359,13 @@ export class DatatableFundReportingComponent implements OnInit {
/**
* 查看校验结果
*/
viewResult(item: any) {
viewResult(record: any) {
const modalRef = this.modal.create({
nzTitle: '校验结果',
nzWidth: 1200,
nzContent: DatatableReportingVerifyResultComponent,
nzContent: DatatableReportingFundInfoComponent,
nzComponentParams: {
record: item
record
},
nzFooter: null
});
@ -380,6 +385,7 @@ export class DatatableFundReportingComponent implements OnInit {
search() {
this.selectedRows = [];
this.st.load(1);
}
@ -398,5 +404,45 @@ export class DatatableFundReportingComponent implements OnInit {
})
}
changeSt(e: STChange): void {
if (e.type === 'checkbox') {
const checkRows = (e.checkbox as STData[]) || [];
//判断当前页是否有选中的行
if (checkRows.length === 0) {
// 当前页没有存在已勾选的行，移除之前所记录的当前页的行
const stList = this.st.list;
stList.forEach(item => {
this.selectedRows = this.selectedRows.filter((e: any) => e.id !== item.id);
})
} else {
//添加新增的行
checkRows.forEach((item: any) => {
const newSelectedList = this.selectedRows.filter((r: any) => r.id === item.id);
if (newSelectedList.length === 0) {
this.selectedRows.push(item);
}
})
// 移除取消选中的行
const stList = this.st.list;
stList.forEach(item => {
if (!item.checked) {
const index = this.selectedRows.findIndex(_item => item.id === _item.id);
if (index !== -1) this.selectedRows.splice(index, 1);
}
})
}
} else if (e.type === 'loaded') {
// 页面加载时勾选
(e?.loaded || []).forEach((r: any) => {
this.selectedRows.forEach((x) => {
if (x.id === r.id) {
r.checked = true;
}
});
});
}
}
}

5
src/app/routes/datatable/reporting/services/reporting.service.ts
View File

@ -12,7 +12,10 @@ export class ReportingService extends BaseService {
$api_get_upload_setting = ``; // 修改上传设置
$api_upload_setting_save = ``; // 修改上传设置
$api_get_fund_reporting_page = `/api/fcc/fundUploadHead/list/page`;
$api_get_fund_reporting_page = `/api/fcc/fundUploadHead/list/page`; // 资金上报列表
$api_fund_reporting_upload = `/api/fcc/fundUploadHead/uploadFundNumber`; // 资金批量上传
$api_fund_reporting_recall = `/api/fcc/fundUploadHead/recallUploadFundNumber`; //资金批量撤回
$api_get_fund_valid_result = `/api/fcc/capitalFieldCheck/getCapitalFieldCheckList`; // 查询资金校验表
constructor(public injector: Injector) {
super(injector);
}

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

@ -27,6 +27,8 @@ export class DataService extends BaseService {
$api_listPerformanceReportPage = `/api/sdc/report/listPerformanceReportPage`;
// 运营报表运单状态分布
$api_operationalReportWaybillStatusDistribution = `/api/sdc/report/operationalReportWaybillStatusDistribution`;
// 运营报表柱状图
$api_operationalReportHistogram = `/api/sdc/report/operationalReportHistogram`;
// 获取网络货运人
$api_get_network_freight_forwarder_list = `/api/mdc/cuc/networkTransporter/findAll`;
// 业绩报表柱状图
@ -37,6 +39,10 @@ export class DataService extends BaseService {
// 查询开票数据报表
$api_listFinancialReportPage = `/api/sdc/report/listFinancialReportPage`;
// 查询货主报表
$api_listShipperReportPage = `/api/sdc/report/listShipperReportPage`;
constructor(public injector: Injector) {
super(injector);
}
@ -45,7 +51,7 @@ export class DataService extends BaseService {
* 获取网络货运人
* @returns
*/
getNetworkFreightForwarder(params = {}, containerAll = false) {
getNetworkFreightForwarder(params = {}, containerAll = false) {
return this.request(this.$api_get_network_freight_forwarder_list, params).pipe(
map((res: any) => {
if (!res) {
@ -66,7 +72,7 @@ export class DataService extends BaseService {
);
}
getPerformanceReportHistogram(params = {}){
getPerformanceReportHistogram(params = {}) {
return this.request(this.$api_performanceReportHistogram, params)
}
}

8
src/app/routes/order-management/components/receipts-audit/receipts-audit.component.ts
View File

@ -532,13 +532,13 @@ export class OrderManagementReceiptsAuditComponent implements OnInit {
}
// 批量生成电子单据
sign1(item?: any) {
if (this.selectedRows.length <= 0) {
if (this.selectedRows?.length <= 0) {
this.service.msgSrv.error('请选择订单！')
return
}
let params: any[] = [];
this.selectedRows.forEach(item => {
params.push(item.id);
params.push(item?.id);
});
this.modal.confirm({
nzTitle: `<b>已选择${this.selectedRows.length}条订单，确认批量生成电子单据吗？</b>`,
@ -555,10 +555,10 @@ export class OrderManagementReceiptsAuditComponent implements OnInit {
// this.getGoodsSourceStatistical();
// })
{
this.service.downloadFile(this.service.$api_createBillTakeGoods,{billIds: params})
this.service.downloadFile(this.service.$api_createBillTakeGoods,{billIds: params.join(',')})
this.service.downloadFile(this.service.$api_createBillDischargeGoods,{billIds: params})}
this.service.downloadFile(this.service.$api_createBillDischargeGoods,{billIds: params.join(',')})}
});
}

6
src/app/routes/order-management/components/vehicle/vehicle.component.ts
View File

@ -761,6 +761,12 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
},
nzFooter: null
});
modalRef.afterClose.subscribe((res: boolean) => {
if (res) {
this.resetSF;
this.st.load();
}
});
}
revoke(item: any) {
this.modal.confirm({

4
src/app/routes/order-management/modal/vehicle/confir-receipt/confir-receipt.component.ts
View File

@ -4,7 +4,7 @@
* @Author : Shiming
* @Date : 2021-12-15 13:17:42
* @LastEditors : Shiming
* @LastEditTime : 2022-03-31 14:21:48
* @LastEditTime : 2022-03-31 17:36:46
* @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\modal\\vehicle\\confir-receipt\\confir-receipt.component.ts
* Copyright (C) 2022 huzhenhong. All rights reserved.
*/
@ -74,7 +74,7 @@ export class VehicleConfirReceiptComponent implements OnInit {
console.log(res);
if (res) {
this.service.msgSrv.success('确认签收成功！');
this.modal.destroy();
this.modal.destroy(true);
}
});
}