Merge branch 'develop' of https://gitlab.eascs.com/tms-ui/tms-obc-web into develop
This commit is contained in:
潘晓云
@ -1,3 +1,13 @@
|
||||
/*
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-04-06 13:43:29
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-06 19:20:24
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\customtable\\customindex\\curve\\curve.component.ts
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
*/
|
||||
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';
|
||||
@ -23,7 +33,7 @@ export class DatatableCustomindexCurveComponent implements OnInit, OnChanges {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
|
||||
}
|
||||
reRender() {
|
||||
setTimeout(() => {
|
||||
@ -36,6 +46,7 @@ export class DatatableCustomindexCurveComponent implements OnInit, OnChanges {
|
||||
setTimeout(() => {
|
||||
this.ngZone.runOutsideAngular(() => this.init(this.el));
|
||||
},500)
|
||||
console.log(this.chartData);
|
||||
}
|
||||
|
||||
private init(el: HTMLElement): void {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-04-06 13:20:56
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-06 15:00:01
|
||||
* @LastEditTime : 2022-04-06 20:24:20
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\customtable\\customindex\\customindex.component.html
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
-->
|
||||
@ -12,19 +12,19 @@
|
||||
<page-header-wrapper [title]="'客户报表'"></page-header-wrapper>
|
||||
<div nz-row [nzGutter]="16">
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'货主'" [bordered]="true" [total]="hzData?.total" [footer]="'已认证' + hzData?.auditPassTotal" contentHeight="46">
|
||||
<g2-card [title]="'货主'" [bordered]="true" [total]="hzData?.total" [footer]="'已认证' + ' ' + hzData?.auditPassTotal" contentHeight="46">
|
||||
</g2-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'合伙人'" [bordered]="true" [total]="hhrData?.total" [footer]="'已认证' + hhrData?.auditPassTotal" contentHeight="46">
|
||||
<g2-card [title]="'合伙人'" [bordered]="true" [total]="hhrData?.total" [footer]="'已认证' + ' ' + hhrData?.auditPassTotal" contentHeight="46">
|
||||
</g2-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'司机'" [bordered]="true" [total]="sjData?.total" [footer]="'已认证' + sjData?.auditPassTotal" contentHeight="46">
|
||||
<g2-card [title]="'司机'" [bordered]="true" [total]="sjData?.total" [footer]="'已认证' + ' ' + sjData?.auditPassTotal" contentHeight="46">
|
||||
</g2-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'车辆'" [bordered]="true" [total]="clData?.total" [footer]="'已认证' + clData?.auditPassTotal" contentHeight="46">
|
||||
<g2-card [title]="'车辆'" [bordered]="true" [total]="clData?.total" [footer]="'已认证' + ' '+ clData?.auditPassTotal" contentHeight="46">
|
||||
</g2-card>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,12 +64,11 @@
|
||||
[columns]="columns"
|
||||
[ps]="20"
|
||||
[data]="reportData"
|
||||
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
|
||||
[scroll]="{ x: '1200px' }"
|
||||
[res]="{ reName: { list: 'data', total: 'data.total' } }"
|
||||
[page]="{ show: false, showSize: false, pageSizes: [20, 50, 100] }"
|
||||
>
|
||||
<ng-template sf-template="type" let-item>
|
||||
<ng-template st-row="type" let-item>
|
||||
<div *ngIf="item.type == '1'">货主</div>
|
||||
<div *ngIf="item.type == '2'">合伙人</div>
|
||||
<div *ngIf="item.type == '3'">司机</div>
|
||||
@ -77,11 +76,11 @@
|
||||
</ng-template>
|
||||
</st>
|
||||
</nz-card>
|
||||
<nz-card nzTitle="用户新增报表" [nzExtra]="extraTemplate">
|
||||
<nz-card nzTitle="用户新增报表" [nzExtra]="extraTemplate01">
|
||||
<ng-template #extraTemplate01>
|
||||
<div class="chooseBox">
|
||||
<div class="timeBox">
|
||||
<nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext()">
|
||||
<nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext2()">
|
||||
<label nz-radio-button nzValue="year">年</label>
|
||||
<label nz-radio-button nzValue="month">月</label>
|
||||
</nz-radio-group>
|
||||
@ -96,5 +95,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<app-datatable-customindex-curve #curve [chartData]="chartData?.lineChart"></app-datatable-customindex-curve>
|
||||
<app-datatable-customindex-curve #curve [chartData]="chartData"></app-datatable-customindex-curve>
|
||||
</nz-card>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { STColumn, STComponent } from '@delon/abc/st';
|
||||
import { SFComponent } from '@delon/form';
|
||||
import { DatePipe, _HttpClient } from '@delon/theme';
|
||||
import { differenceInCalendarDays } from 'date-fns';
|
||||
import { DataService } from '../../../services/data.service';
|
||||
@ -13,29 +14,31 @@ import { DatatableCustomindexCurveComponent } from './curve/curve.component';
|
||||
})
|
||||
export class DatatableCustomindexComponent implements OnInit {
|
||||
@ViewChild('st') private readonly st!: STComponent;
|
||||
@ViewChild('sf', { static: false }) sf!: SFComponent;
|
||||
@ViewChild('curve') private readonly curve!: DatatableCustomindexCurveComponent;
|
||||
type = 1;
|
||||
mode = 'year';
|
||||
date: any = null;
|
||||
defineDate = [];
|
||||
time: any = ['2022-01-01 00:00:00'];
|
||||
timeStart: any = '2022-01-01';
|
||||
timeEnd: any = '2022-12-31';
|
||||
dateFormat = 'yyyy';
|
||||
today = new Date();
|
||||
dateNext: any = null;
|
||||
modeNext = 'year';
|
||||
timeNext: any = ['2022-01-01 00:00:00'];
|
||||
chartData: any;
|
||||
chartData: any = [];
|
||||
flag = false;
|
||||
|
||||
columns: STColumn[] = [
|
||||
{ title: '用户类型', render: 'type', className: 'text-center' },
|
||||
{ title: '用户总数', index: '总数', className: 'text-center' },
|
||||
{ title: '用户总数', index: 'total', className: 'text-center' },
|
||||
{ title: '已认证数量', index: 'auditPassTotal', className: 'text-center' },
|
||||
{ title: '活跃用户数', index: 'activeTotal', className: 'text-center' },
|
||||
{ title: '未激活用户数', index: 'notActivationTotal', className: 'text-center' },
|
||||
{ title: '沉默用户数', index: 'silentTotal', className: 'text-center' },
|
||||
{ title: '流失用户数', index: 'drainTotal', className: 'text-center' },
|
||||
{ title: '流失率', index: 'drainRate', className: 'text-center' }
|
||||
{ title: '流失率', index: 'drainRate', className: 'text-center',format: (item: any) => {return (item?.drainRate)*100 + '%' }}
|
||||
];
|
||||
hzData: any;
|
||||
hhrData: any;
|
||||
@ -43,79 +46,67 @@ export class DatatableCustomindexComponent implements OnInit {
|
||||
clData: any;
|
||||
reportData: any = [];
|
||||
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
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.initCurveData();
|
||||
}
|
||||
initCurveData() {
|
||||
let type = 1;
|
||||
if (this.mode === 'year') {
|
||||
type = 1;
|
||||
} else if (this.mode === 'month') {
|
||||
type = 2;
|
||||
}
|
||||
// const params: any = {
|
||||
// time: this.timeNext,
|
||||
// type
|
||||
// };
|
||||
this.flag = true;
|
||||
this.cardData();
|
||||
this.listData();
|
||||
this.addData('year', '2022-01-01');
|
||||
}
|
||||
listData(type?: string, stime?: any, etime?: any) {
|
||||
this.reportData = [];
|
||||
this.service
|
||||
.request(this.service.$api_statistics_totalDetail, {
|
||||
time: this.timeNext,
|
||||
type: 1 //用户角色类型 1：货主 2：合伙人 3：司机 4：车辆
|
||||
dateStart: stime || this.timeStart,
|
||||
dateEnd: etime || this.timeEnd,
|
||||
type: 1 //用户角色类型 1：货主 2：合伙人 3：司机 4：车辆
|
||||
})
|
||||
.subscribe(res => {
|
||||
if (res) {
|
||||
this.reportData.push(res);
|
||||
this.st.reload();
|
||||
}
|
||||
});
|
||||
this.service.request(this.service.$api_statistics_totalDetail, {
|
||||
time: this.timeNext,
|
||||
type: 2
|
||||
}).subscribe(res => {
|
||||
if (res) {
|
||||
this.reportData.push(res);
|
||||
}
|
||||
});
|
||||
this.service.request(this.service.$api_statistics_totalDetail, {
|
||||
time: this.timeNext,
|
||||
type: 3
|
||||
}).subscribe(res => {
|
||||
if (res) {
|
||||
this.reportData.push(res);
|
||||
}
|
||||
});
|
||||
this.service.request(this.service.$api_statistics_totalDetail, {
|
||||
time: this.timeNext,
|
||||
type: 4
|
||||
}).subscribe(res => {
|
||||
if (res) {
|
||||
this.reportData.push(res);
|
||||
this.st.reload();
|
||||
}
|
||||
});
|
||||
this.service
|
||||
.request(this.service.$api_statistics_totalDetail, {
|
||||
dateStart: stime || this.timeStart,
|
||||
dateEnd: etime || this.timeEnd,
|
||||
type: 2
|
||||
})
|
||||
.subscribe(res => {
|
||||
if (res) {
|
||||
this.reportData.push(res);
|
||||
this.st.reload();
|
||||
}
|
||||
});
|
||||
this.service
|
||||
.request(this.service.$api_statistics_totalDetail, {
|
||||
dateStart: stime || this.timeStart,
|
||||
dateEnd: etime || this.timeEnd,
|
||||
type: 3
|
||||
})
|
||||
.subscribe(res => {
|
||||
if (res) {
|
||||
this.reportData.push(res);
|
||||
this.st.reload();
|
||||
}
|
||||
});
|
||||
this.service
|
||||
.request(this.service.$api_statistics_totalDetail, {
|
||||
dateStart: stime || this.timeStart,
|
||||
dateEnd: etime || this.timeEnd,
|
||||
type: 4
|
||||
})
|
||||
.subscribe(res => {
|
||||
if (res) {
|
||||
this.reportData.push(res);
|
||||
this.st.reload();
|
||||
}
|
||||
});
|
||||
}
|
||||
cardData() {
|
||||
this.service.request(this.service.$api_statistics_total, { type: 1 }).subscribe(res => {
|
||||
if (res) {
|
||||
this.hzData = res;
|
||||
@ -137,7 +128,58 @@ export class DatatableCustomindexComponent implements OnInit {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addData(type?: string, time?: any) {
|
||||
this.chartData = []
|
||||
this.service
|
||||
.request(this.service.$api_statistics_totalAdd, {
|
||||
date: time,
|
||||
dateType: type === 'month' ? 2 : 1, //日期类型 1：年 2：月
|
||||
type: 1
|
||||
})
|
||||
.subscribe(res => {
|
||||
if (res) {
|
||||
this.chartData.push(...res);
|
||||
console.log(this.curve);
|
||||
this.curve.reRender();
|
||||
}
|
||||
});
|
||||
this.service
|
||||
.request(this.service.$api_statistics_totalAdd, {
|
||||
date: time,
|
||||
dateType: type === 'month' ? 2 : 1, //日期类型 1：年 2：月
|
||||
type: 2
|
||||
})
|
||||
.subscribe(res => {
|
||||
if (res) {
|
||||
this.chartData.push(...res);
|
||||
this.curve.reRender();
|
||||
}
|
||||
});
|
||||
this.service
|
||||
.request(this.service.$api_statistics_totalAdd, {
|
||||
date: time,
|
||||
dateType: type === 'month' ? 2 : 1, //日期类型 1：年 2：月
|
||||
type: 3
|
||||
})
|
||||
.subscribe(res => {
|
||||
if (res) {
|
||||
this.chartData.push(...res);
|
||||
this.curve.reRender();
|
||||
}
|
||||
});
|
||||
this.service
|
||||
.request(this.service.$api_statistics_totalAdd, {
|
||||
date: time,
|
||||
dateType: type === 'month' ? 2 : 1, //日期类型 1：年 2：月
|
||||
type: 4
|
||||
})
|
||||
.subscribe(res => {
|
||||
if (res) {
|
||||
this.chartData.push(...res);
|
||||
this.curve.reRender();
|
||||
}
|
||||
});
|
||||
}
|
||||
changeData() {
|
||||
if (this.mode === 'year') {
|
||||
this.dateFormat = 'yyyy';
|
||||
@ -149,27 +191,29 @@ export class DatatableCustomindexComponent implements OnInit {
|
||||
}
|
||||
onChange(result: any) {
|
||||
if (this.mode === 'year') {
|
||||
this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00'];
|
||||
this.timeStart = this.datePipe.transform(this.date, 'yyyy') + '-01-01';
|
||||
this.timeEnd = this.datePipe.transform(this.date, 'yyyy') + '-12-31';
|
||||
|
||||
} else if (this.mode === 'month') {
|
||||
this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00'];
|
||||
this.timeStart = this.datePipe.transform(this.date, 'yyyy-MM') + '-01' ;
|
||||
this.timeEnd = this.datePipe.transform(this.date, 'yyyy-MM') + '-31';
|
||||
} else if (this.mode === 'date') {
|
||||
this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00'];
|
||||
this.timeStart=this.datePipe.transform(this.date, 'yyyy-MM-dd');
|
||||
this.timeEnd = this.datePipe.transform(this.date, 'yyyy-MM-dd') ;
|
||||
} 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.timeStart = this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') ;
|
||||
this.timeEnd = this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd');
|
||||
}
|
||||
this.st.reload({ ...this.reqParams });
|
||||
this.listData(this.mode, this.timeStart, this.timeEnd);
|
||||
}
|
||||
disabledDate = (current: Date): boolean =>
|
||||
// Can not select days before today and today
|
||||
differenceInCalendarDays(current, this.today) > 0;
|
||||
|
||||
changeDataNext() {
|
||||
if (this.mode === 'year') {
|
||||
changeDataNext2() {
|
||||
if (this.modeNext === 'year') {
|
||||
this.dateFormat = 'yyyy';
|
||||
} else if (this.mode === 'month') {
|
||||
} else if (this.modeNext === 'month') {
|
||||
this.dateFormat = 'yyyy-MM';
|
||||
}
|
||||
}
|
||||
@ -177,11 +221,11 @@ export class DatatableCustomindexComponent implements OnInit {
|
||||
if (result === null) {
|
||||
return;
|
||||
}
|
||||
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'];
|
||||
if (this.modeNext === 'year') {
|
||||
this.timeNext = this.datePipe.transform(this.dateNext, 'yyyy') + '-01-01';
|
||||
} else if (this.modeNext === 'month') {
|
||||
this.timeNext = this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01';
|
||||
}
|
||||
this.initCurveData();
|
||||
this.addData(this.modeNext, this.timeNext);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<g2-custom delay="100" (render)="render($event)"></g2-custom>
|
||||
@ -0,0 +1,140 @@
|
||||
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
|
||||
import { Chart } from '@antv/g2';
|
||||
import DataSet from '@antv/data-set';
|
||||
import { DataService } from 'src/app/routes/datatable/services/data.service';
|
||||
@Component({
|
||||
selector: 'app-datatable-customindex-map',
|
||||
templateUrl: './map.component.html',
|
||||
styleUrls: ['./map.component.less']
|
||||
})
|
||||
export class DatatableCustomindexMapComponent implements OnInit, OnChanges {
|
||||
el: any;
|
||||
@Input() chartData: any;
|
||||
chart: any;
|
||||
mapData: any;
|
||||
ds!: DataSet ;
|
||||
worldMap: any;
|
||||
userView: any;
|
||||
userDv: any;
|
||||
userData: any = [];
|
||||
constructor(private service: DataService, private ngZone: NgZone) {}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (this.chartData) {
|
||||
// setTimeout(()=>{
|
||||
// this.chart.render(true)
|
||||
// }, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit(): void {}
|
||||
reRender() {
|
||||
console.log('5454545');
|
||||
setTimeout(() => {
|
||||
this.chart.render();
|
||||
}, 1000);
|
||||
}
|
||||
render(el: ElementRef<HTMLDivElement>): void {
|
||||
this.el = el.nativeElement;
|
||||
setTimeout(() => {
|
||||
this.ngZone.runOutsideAngular(() => this.init(this.el));
|
||||
}, 500);
|
||||
}
|
||||
|
||||
private init(el: HTMLElement): void {
|
||||
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/china.json')
|
||||
.then(res => res.json())
|
||||
.then(mapData => {
|
||||
this.mapData =mapData
|
||||
this.chart = new Chart({
|
||||
container: el,
|
||||
autoFit: true,
|
||||
height: 700,
|
||||
padding: [0, 0]
|
||||
});
|
||||
this.chart.tooltip({
|
||||
showTitle: false,
|
||||
showMarkers: false,
|
||||
shared: true
|
||||
});
|
||||
// 同步度量
|
||||
this.chart.scale({
|
||||
longitude: {
|
||||
sync: true
|
||||
},
|
||||
latitude: {
|
||||
sync: true
|
||||
}
|
||||
});
|
||||
this.chart.axis(false);
|
||||
this.chart.legend('trend', {
|
||||
position: 'left'
|
||||
});
|
||||
console.log('8888');
|
||||
|
||||
// 绘制世界地图背景
|
||||
this.ds = new DataSet();
|
||||
this.worldMap = this.ds.createView('back').source(this.mapData, {
|
||||
type: 'GeoJSON'
|
||||
});
|
||||
const worldMapView = this.chart.createView();
|
||||
worldMapView.data(this.worldMap.rows);
|
||||
worldMapView.tooltip(false);
|
||||
worldMapView.polygon().position('longitude*latitude').style({
|
||||
fill: '#fff',
|
||||
stroke: '#ccc',
|
||||
lineWidth: 1
|
||||
});
|
||||
|
||||
// 可视化用户数据
|
||||
this.userData = [
|
||||
{ name: '山东', value: 21 },
|
||||
{ name: '山东', value: 22},
|
||||
{ name: '广东', value: 20, },
|
||||
{ name: '广东', value: 20 },
|
||||
{ name: '四川', value: 120 },
|
||||
{ name: '湖南', value: 200 },
|
||||
{ name: '河北', value: 30 },
|
||||
|
||||
];
|
||||
this.userDv = this.ds.createView().source(this.userData).transform({
|
||||
geoDataView: this.worldMap,
|
||||
field: 'name',
|
||||
type: 'geo.region',
|
||||
as: ['longitude', 'latitude']
|
||||
}).transform({
|
||||
type: 'map',
|
||||
callback: (obj: { trend: string; value: number }) => {
|
||||
|
||||
obj.trend = obj.value > 100 ? '蓝色地区' : '红色地区';
|
||||
return obj;
|
||||
}
|
||||
});
|
||||
this.userView = this.chart.createView();
|
||||
this.userView.data(this.userDv.rows);
|
||||
// this.userView.scale({
|
||||
// trend: {
|
||||
// alias: '蓝色地区数量'
|
||||
// }
|
||||
// });
|
||||
console.log(this.userView);
|
||||
console.log('45545');
|
||||
|
||||
this.userView.polygon().position('longitude*latitude').color('trend', ['#000', '#76ddb2']).tooltip('').style({fillOpacity: 0.85 })
|
||||
// .animate({
|
||||
// leave: {
|
||||
// animation: 'fade-out'
|
||||
// }
|
||||
// });
|
||||
this.userView.interaction('element-active');
|
||||
this.chart.render();
|
||||
|
||||
|
||||
});
|
||||
|
||||
console.log('9999');
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,72 +1,168 @@
|
||||
<!--
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-04-06 10:57:56
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-07 14:59:07
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.html
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
-->
|
||||
<!-- 页头 -->
|
||||
<!-- <page-header-wrapper [title]="'运营报表'"></page-header-wrapper> -->
|
||||
<div nz-row [nzGutter]="16">
|
||||
<div style="display: flex; justify-content: center; align-items: center">
|
||||
<h1>运多星网络货运平台实时交易监控</h1>
|
||||
</div>
|
||||
<div nz-row [nzGutter]="24">
|
||||
<div nz-col class="gutter-row" [nzSpan]="8">
|
||||
<nz-card nzTitle="2022全年交易情况">
|
||||
<nz-row [nzGutter]="16">
|
||||
<nz-col [nzSpan]="12">
|
||||
<nz-statistic [nzValue]="(1949101 | number)!" [nzTitle]="'成交额'"></nz-statistic>
|
||||
<nz-statistic [nzValue]="(allDeal?.dealAmount | currency)!" [nzTitle]="'成交额'"></nz-statistic>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="12">
|
||||
<nz-statistic [nzValue]="(2019.111 | number: '1.0-2')!" [nzTitle]="'结算额'"></nz-statistic>
|
||||
<nz-statistic [nzValue]="(allDeal?.settlementAmount | currency)!" [nzTitle]="'结算额'"></nz-statistic>
|
||||
</nz-col>
|
||||
</nz-row>
|
||||
<nz-row [nzGutter]="16">
|
||||
<nz-col [nzSpan]="12">
|
||||
<nz-statistic [nzValue]="(1949101 | number)!" [nzTitle]="'订单数'"></nz-statistic>
|
||||
<nz-statistic [nzValue]="(allDeal?.billQuantity | number)!" [nzTitle]="'订单数'"></nz-statistic>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="12">
|
||||
<nz-statistic [nzValue]="(2019.111 | number: '1.0-2')!" [nzTitle]="'货物吞吐(吨)'"></nz-statistic>
|
||||
<nz-statistic [nzValue]="(allDeal?.weight | number: '1.0-2')!" [nzTitle]="'货物吞吐(吨)'"></nz-statistic>
|
||||
</nz-col>
|
||||
</nz-row>
|
||||
</nz-card>
|
||||
<nz-card nzTitle="本月交易趋势">
|
||||
|
||||
<g2-timeline
|
||||
[data]="monthData"
|
||||
[titleMap]="{ y1: '订单数', y2: '运单数' }"
|
||||
[height]="200"
|
||||
mask="MM月DD日"
|
||||
[slider]="false"
|
||||
></g2-timeline>
|
||||
</nz-card>
|
||||
<nz-card nzTitle="实时货源">
|
||||
<st #st multiSort bordered [columns]="columns" [ps]="20" [data]="service.$api_listShipperReportPage"
|
||||
<st
|
||||
[scroll]="{ y: '300px' }"
|
||||
#st
|
||||
multiSort
|
||||
bordered
|
||||
[columns]="columns"
|
||||
[data]="service.$api_getRealTimeSupply"
|
||||
[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]="service.http.loading">
|
||||
[res]="{ reName: { list: 'data' } }"
|
||||
[page]="{ show: false, showSize: false, pageSizes: [5, 50, 100] }"
|
||||
[loading]="service.http.loading"
|
||||
>
|
||||
<ng-template st-row="index" let-item let-index="index">
|
||||
{{ index }}
|
||||
</ng-template>
|
||||
<ng-template st-row="weight" let-item let-index="index">
|
||||
{{ item.weight ? item.weight + '吨' : '' }}
|
||||
{{ item.volume ? item.volume + '方' : '' }}
|
||||
</ng-template>
|
||||
<ng-template st-row="weight" let-item let-index="index">
|
||||
{{ item.weight ? item.weight + '吨' : '' }}
|
||||
{{ item.volume ? item.volume + '方' : '' }}
|
||||
</ng-template>
|
||||
</st>
|
||||
</nz-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="8">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<nz-card nzTitle="本月发货量排名">
|
||||
|
||||
<nz-card>
|
||||
<nz-row [nzGutter]="24">
|
||||
<nz-col [nzSpan]="8">
|
||||
<nz-statistic [nzValue]="(headDeal?.todayAmount | currency)!" [nzTitle]="'今日交易额'"></nz-statistic>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="8">
|
||||
<nz-statistic [nzValue]="(headDeal?.monthAmount | currency)!" [nzTitle]="'本月交易额'"></nz-statistic>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="8">
|
||||
<nz-statistic [nzValue]="(headDeal?.cumulativeAmount | currency)!" [nzTitle]="'累计交易额'"></nz-statistic>
|
||||
</nz-col>
|
||||
</nz-row>
|
||||
</nz-card>
|
||||
<app-datatable-customindex-map style="max-height: 600px" #map [chartData]="chartData"></app-datatable-customindex-map>
|
||||
<nz-card>
|
||||
<nz-row [nzGutter]="24">
|
||||
<g2-bar height="200" [title]="'本月发货量排名'" [data]="salesData2" (ready)='genData()'></g2-bar>
|
||||
</nz-row>
|
||||
</nz-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="8">
|
||||
<nz-card>
|
||||
<nz-row [nzGutter]="24">
|
||||
<nz-col [nzSpan]="6">
|
||||
<nz-statistic [nzValue]="(classifyDeal?.enterpriseTotal | number)!" [nzTitle]="'货主'"></nz-statistic>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="6">
|
||||
<nz-statistic [nzValue]="(classifyDeal?.partnerTotal | number: '1.0-2')!" [nzTitle]="'合伙人'"></nz-statistic>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="6">
|
||||
<nz-statistic [nzValue]="(classifyDeal?.driverTotal | number)!" [nzTitle]="'司机'"></nz-statistic>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="6">
|
||||
<nz-statistic [nzValue]="(classifyDeal?.carTotal | number: '1.0-2')!" [nzTitle]="'车辆'"></nz-statistic>
|
||||
</nz-col>
|
||||
</nz-row>
|
||||
</nz-card>
|
||||
<nz-card nzTitle="今日交易情况">
|
||||
<nz-row [nzGutter]="16">
|
||||
<nz-col [nzSpan]="12">
|
||||
<nz-statistic [nzValue]="(1949101 | number)!" [nzTitle]="'订单数'"></nz-statistic>
|
||||
<nz-statistic [nzValue]="(todaysDeal?.billQuantity | number)!" [nzTitle]="'订单数'"></nz-statistic>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="12">
|
||||
<nz-statistic [nzValue]="(2019.111 | number: '1.0-2')!" [nzTitle]="'有效订单'"></nz-statistic>
|
||||
<nz-statistic [nzValue]="(todaysDeal?.billEffectiveQuantity | number: '1.0-2')!" [nzTitle]="'有效订单'"></nz-statistic>
|
||||
</nz-col>
|
||||
</nz-row>
|
||||
<nz-row [nzGutter]="16">
|
||||
<nz-col [nzSpan]="12">
|
||||
<nz-statistic [nzValue]="(1949101 | number)!" [nzTitle]="'运输金额(元)'"></nz-statistic>
|
||||
<nz-statistic [nzValue]="(todaysDeal?.amount | currency)!" [nzTitle]="'运输金额(元)'"></nz-statistic>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="12">
|
||||
<nz-statistic [nzValue]="(2019.111 | number: '1.0-2')!" [nzTitle]="'货物吞吐(吨)'"></nz-statistic>
|
||||
<nz-statistic [nzValue]="(todaysDeal?.weight | number: '1.0-2')!" [nzTitle]="'货物吞吐(吨)'"></nz-statistic>
|
||||
</nz-col>
|
||||
</nz-row>
|
||||
</nz-card>
|
||||
<nz-card nzTitle="本月运营质量监测">
|
||||
|
||||
<nz-row [nzGutter]="24">
|
||||
<nz-col [nzSpan]="12">
|
||||
<div style="width: 200px; display: inline-block">
|
||||
<g2-pie percent="28" subTitle="准点率" total="28%" height="100"></g2-pie>
|
||||
</div>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="12">
|
||||
<div style="width: 200px; display: inline-block">
|
||||
<g2-pie percent="22" subTitle="货损率" total="22%" height="100"></g2-pie>
|
||||
</div>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="12">
|
||||
<div style="width: 200px; display: inline-block">
|
||||
<g2-pie percent="22" subTitle="空车率" total="22%" height="100"></g2-pie>
|
||||
</div>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="12">
|
||||
<div style="width: 200px; display: inline-block">
|
||||
<g2-pie percent="22" subTitle="结算率" total="22%" height="100" width="200"></g2-pie>
|
||||
</div>
|
||||
</nz-col>
|
||||
</nz-row>
|
||||
</nz-card>
|
||||
<nz-card nzTitle="实时运单风控">
|
||||
<st #st multiSort bordered [columns]="orderColumns" [ps]="20" [data]="service.$api_listShipperReportPage"
|
||||
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqOrderParams }"
|
||||
[res]="{ reName: { list: 'data.records', total: 'data.total' } }"
|
||||
[page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="service.http.loading">
|
||||
</st>
|
||||
<st
|
||||
#st
|
||||
multiSort
|
||||
bordered
|
||||
[scroll]="{y: '300px'}"
|
||||
[columns]="orderColumns"
|
||||
[data]="service.$api_getRealTimeWaybillRiskControl"
|
||||
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqOrderParams }"
|
||||
[res]="{ reName: { list: 'data' } }"
|
||||
[page]="{ show: false, showSize: false, pageSizes: [5, 50, 100] }"
|
||||
[loading]="service.http.loading"
|
||||
>
|
||||
</st>
|
||||
</nz-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,5 +4,8 @@
|
||||
color: #399ffd;
|
||||
font-weight: bold;
|
||||
}
|
||||
.nz-statistic-number,.ant-statistic-content-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,24 @@
|
||||
import { map } from 'rxjs/operators';
|
||||
/*
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-04-06 10:57:56
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-07 14:59:12
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.ts
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
*/
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { STColumn, STComponent } from '@delon/abc/st';
|
||||
import { SFSchema } from '@delon/form';
|
||||
import { ModalHelper, _HttpClient } from '@delon/theme';
|
||||
import { DataService } from '../../services/data.service';
|
||||
import { DatatableCustomindexMapComponent } from './curve/map.component';
|
||||
import { G2TimelineData } from '@delon/chart/timeline';
|
||||
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-datascreen',
|
||||
@ -12,9 +28,21 @@ import { DataService } from '../../services/data.service';
|
||||
export class DatatableDatascreenComponent implements OnInit {
|
||||
@ViewChild('st') private readonly st!: STComponent;
|
||||
@ViewChild('orderSt') private readonly orderSt!: STComponent;
|
||||
@ViewChild('map') private readonly map!: DatatableCustomindexMapComponent;
|
||||
columns: STColumn[] = [];
|
||||
orderColumns!: STColumn[];
|
||||
constructor(public service: DataService) { }
|
||||
chartData: G2TimelineData[] = [];
|
||||
orderColumns: STColumn[] = [];
|
||||
allDeal: any;
|
||||
headDeal: any;
|
||||
classifyDeal: any;
|
||||
todaysDeal: any;
|
||||
|
||||
monthData: G2TimelineData[] = [];
|
||||
salesData :any;
|
||||
salesData2 :any = this.genData();
|
||||
constructor(public service: DataService) {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询参数
|
||||
@ -33,25 +61,83 @@ export class DatatableDatascreenComponent implements OnInit {
|
||||
ngOnInit(): void {
|
||||
this.initST()
|
||||
this.initOrderST()
|
||||
this.initData()
|
||||
this.initLineData()
|
||||
}
|
||||
initData(){
|
||||
this.service.request(this.service.$api_getAnnualTransactions).subscribe((res: any) => {
|
||||
this.allDeal = res
|
||||
})
|
||||
this.service.request(this.service.$api_getTransactionAmount).subscribe((res: any) => {
|
||||
this.headDeal = res
|
||||
})
|
||||
this.service.request(this.service.$api_getCustomerStatistics).subscribe((res: any) => {
|
||||
this.classifyDeal = res
|
||||
})
|
||||
this.service.request(this.service.$api_getTradingToday).subscribe((res: any) => {
|
||||
this.todaysDeal = res
|
||||
})
|
||||
}
|
||||
initLineData(){
|
||||
this.service.request(this.service.$api_getTradingTrend).subscribe((res: any) => {
|
||||
this.monthData = res
|
||||
// for (let i = 0; i < 20; i += 1) {
|
||||
// this.monthData.push({
|
||||
// time: new Date().getTime() + 1000 * 60 * 60 * 24 * i,
|
||||
// y1: Math.floor(Math.random() * 100) + 1000,
|
||||
// y2: Math.floor(Math.random() * 100) + 10,
|
||||
// });
|
||||
// }
|
||||
})
|
||||
let value: any = []
|
||||
this.service.request(this.service.$api_getShipmentRanking).subscribe((res: any) => {
|
||||
console.log(res);
|
||||
res.forEach((element: any) => {
|
||||
value.push({
|
||||
x: element.city,
|
||||
y: element.weight,
|
||||
});
|
||||
});
|
||||
this.salesData = value
|
||||
console.log(this.salesData);
|
||||
})
|
||||
}
|
||||
public genData(): G2MiniAreaData[] {
|
||||
let value: any = []
|
||||
this.service.request(this.service.$api_getShipmentRanking).subscribe((res: any) => {
|
||||
console.log(res);
|
||||
res.forEach((element: any) => {
|
||||
value.push({
|
||||
x: element.city,
|
||||
y: element.weight,
|
||||
});
|
||||
});
|
||||
})
|
||||
console.log(value);
|
||||
return value;
|
||||
}
|
||||
/**
|
||||
* 初始化数据列表
|
||||
*/
|
||||
initST() {
|
||||
this.columns = [
|
||||
{ title: '序号', index: 'carNo', className: 'text-center' },
|
||||
{ title: '发货地', index: 'carNoColorLabel', className: 'text-center' },
|
||||
{ title: '卸货地', index: 'carModelLabel', className: 'text-center' },
|
||||
{ title: '货物', index: 'carStatus', className: 'text-center'},
|
||||
{ title: '数量', index: 'approvalStatus', className: 'text-center' },
|
||||
{ title: '序号', render: 'index', className: 'text-center',width: '70px' },
|
||||
{ title: '发货地', index: 'loadAddress', className: 'text-center',width: '90px' },
|
||||
{ title: '卸货地', index: 'dischargeAddress', className: 'text-center' ,width: '90px'},
|
||||
{ title: '货物', index: 'goodsName', className: 'text-center',width: '90px'},
|
||||
{ title: '数量', render: 'weight', className: 'text-center',width: '120px' },
|
||||
];
|
||||
}
|
||||
initOrderST() {
|
||||
this.columns = [
|
||||
{ title: '运单号', index: 'carNo', className: 'text-center' },
|
||||
{ title: '货主', index: 'carNoColorLabel', className: 'text-center' },
|
||||
{ title: '时间', index: 'carModelLabel', className: 'text-center' },
|
||||
{ title: '风险等级', index: 'carStatus', className: 'text-center'}
|
||||
this.orderColumns = [
|
||||
{ title: '运单号', index: 'wayCode', className: 'text-center',width: '120px' },
|
||||
{ title: '货主', index: 'shipperName', className: 'text-center',width: '70px' },
|
||||
{ title: '时间', index: 'createTime', className: 'text-center',width: '200px' },
|
||||
{ title: '风险等级', index: 'warningType', className: 'text-center',width: '90px'}
|
||||
];
|
||||
}
|
||||
|
||||
handleClick(data: G2MiniAreaClickItem): void {
|
||||
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,6 +36,8 @@ export class OperationCurveComponent implements OnInit, OnChanges {
|
||||
setTimeout(() => {
|
||||
this.ngZone.runOutsideAngular(() => this.init(this.el));
|
||||
},500)
|
||||
console.log(this.chartData);
|
||||
|
||||
}
|
||||
|
||||
private init(el: HTMLElement): void {
|
||||
|
||||
@ -1,3 +1,13 @@
|
||||
/*
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-04-06 11:02:17
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-06 17:22:44
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\datatable.module.ts
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
*/
|
||||
import { NgModule, Type } from '@angular/core';
|
||||
import { SharedModule, SHARED_G2_MODULES } from '@shared';
|
||||
import { DatatableRoutingModule } from './datatable-routing.module';
|
||||
@ -30,6 +40,7 @@ import { FinancetablePillarComponent } from './components/financetable/pillar/pi
|
||||
import { ComplianceCurveComponent } from './components/compliance/index/curve/curve.component';
|
||||
import { BusitableCurveComponent } from './components/busitable/busiindex/curve/curve.component';
|
||||
import { DatatableCustomindexCurveComponent } from './components/customtable/customindex/curve/curve.component';
|
||||
import { DatatableCustomindexMapComponent } from './components/datascreen/curve/map.component';
|
||||
|
||||
const COMPONENTS: Type<void>[] = [
|
||||
DatatableDataindexComponent,
|
||||
@ -62,7 +73,8 @@ const COMPONENTS: Type<void>[] = [
|
||||
FinancetablePillarComponent,
|
||||
ComplianceCurveComponent,
|
||||
BusitableCurveComponent,
|
||||
DatatableCustomindexCurveComponent
|
||||
DatatableCustomindexCurveComponent,
|
||||
DatatableCustomindexMapComponent
|
||||
]
|
||||
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @Author : Shiming
|
||||
* @Date : 2021-12-27 10:30:56
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-06 13:47:25
|
||||
* @LastEditTime : 2022-04-07 09:30:16
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\services\\data.service.ts
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
*/
|
||||
@ -62,6 +62,26 @@ export class DataService extends BaseService {
|
||||
$api_statistics_total = `/api/mdc/cuc/statistics/total`;
|
||||
// 客户报表-根据类型获取统计明细信息(table)
|
||||
$api_statistics_totalDetail = `/api/mdc/cuc/statistics/totalDetail`;
|
||||
// 客户报表-根据类型获取统计图表信息
|
||||
$api_statistics_totalAdd = `/api/mdc/cuc/statistics/totalAdd`;
|
||||
|
||||
|
||||
// 数据大屏-本年全年交易情况
|
||||
$api_getAnnualTransactions = `/api/sdc/reportDataLargeScreen/getAnnualTransactions`;
|
||||
// 数据大屏-客户统计(货主，合伙人，司机，车辆)
|
||||
$api_getCustomerStatistics = `/api/sdc/reportDataLargeScreen/getCustomerStatistics`;
|
||||
// 数据大屏-实时货源
|
||||
$api_getRealTimeSupply = `/api/sdc/reportDataLargeScreen/getRealTimeSupply`;
|
||||
// 数据大屏-实时运单风控
|
||||
$api_getRealTimeWaybillRiskControl = `/api/sdc/reportDataLargeScreen/getRealTimeWaybillRiskControl`;
|
||||
// 数据大屏-本月发货量排名
|
||||
$api_getShipmentRanking = `/api/sdc/reportDataLargeScreen/getShipmentRanking`;
|
||||
// 数据大屏-今日交易情况
|
||||
$api_getTradingToday = `/api/sdc/reportDataLargeScreen/getTradingToday`;
|
||||
// 数据大屏-本月交易趋势
|
||||
$api_getTradingTrend = `/api/sdc/reportDataLargeScreen/getTradingTrend`;
|
||||
// 数据大屏-交易额(今日，本月，累计)
|
||||
$api_getTransactionAmount = `/api/sdc/reportDataLargeScreen/getTransactionAmount`;
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,94 @@
|
||||
<!--
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-01-12 10:52:50
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-07 10:11:15
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\components\\abnormal-warning\\abnormal-warning.component.html
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
-->
|
||||
<!-- 搜索表单 -->
|
||||
<page-header-wrapper [title]="''"> </page-header-wrapper>
|
||||
<nz-card>
|
||||
<div nz-row nzGutter="8">
|
||||
<!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
|
||||
<div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
|
||||
<sf
|
||||
#sf
|
||||
[schema]="schema"
|
||||
[ui]="ui"
|
||||
[mode]="'search'"
|
||||
[disabled]="!sf?.valid"
|
||||
[loading]="false"
|
||||
(formSubmit)="st?.load(1)"
|
||||
(formReset)="resetSF()"
|
||||
></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"
|
||||
[nzLoading]="service.http.loading"
|
||||
(click)="search()"
|
||||
acl
|
||||
[acl-ability]="['ORDER-COMPLIANCE-AUDIT-search']"
|
||||
>查询</button
|
||||
>
|
||||
<button nz-button nzType="primary" [disabled]="false" acl [acl-ability]="['ORDER-COMPLIANCE-AUDIT-export']" (click)="exprot()"
|
||||
>导出</button
|
||||
>
|
||||
<button nz-button [disabled]="false" (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 style="margin-top: 15px">
|
||||
<st
|
||||
#st
|
||||
[bordered]="true"
|
||||
[scroll]="{ x: '2000px' }"
|
||||
[data]="service.$api_get_abnormalWarning"
|
||||
[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] }"
|
||||
[loading]="false"
|
||||
>
|
||||
|
||||
|
||||
<ng-template st-row="driverName" let-item let-index="index">
|
||||
<div> {{ item?.driverName }}{{ item?.driverPhone ? "/" + item?.driverPhone : '' }}{{ item?.carNo ? "/" + item?.carNo : '' }} </div>
|
||||
</ng-template>
|
||||
<ng-template st-row="longitude" let-item let-index="index">
|
||||
<div> {{ item?.longitude }}
|
||||
{{ item?.latitude ? "," + item?.latitude : '' }} </div>
|
||||
</ng-template>
|
||||
<ng-template st-row="billCode" let-item let-index="index">
|
||||
<!-- <a *ngIf="item.billType == '1'" [routerLink]="'/order-management/vehicle/vehicle-detail/' + item.id">{{ item.billCode }}</a>
|
||||
<a *ngIf="item.billType == '2'" [routerLink]="'/order-management/bulk/bulk-detail/' + item.id" [queryParams]="{ sts :1}">{{ item.billCode }}</a>
|
||||
<a *ngIf="item.billType == '3'" [routerLink]="'/order-management/vehicle/vehicle-detail/' + item.id">{{ item.billCode }}</a> -->
|
||||
<div>
|
||||
<span>{{ item?.billStatusLabel }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span >{{item?.billTypeLabel}}{{item?.serviceTypeLabel === item?.billTypeLabel ? '':item?.serviceTypeLabel}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</st>
|
||||
</div>
|
||||
</nz-card>
|
||||
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
|
||||
:host {
|
||||
p{
|
||||
margin-bottom: 0
|
||||
}
|
||||
.left_btn {
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
padding-left: 8px;
|
||||
line-height:32px;
|
||||
background-color: #d7d7d7;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
/*
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2021-12-06 20:03:28
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-07 09:43:16
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\components\\abnormal-warning\\abnormal-warning.component.spec.ts
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
*/
|
||||
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { OrderManagementAbnormalWarningComponent } from './abnormal-warning.component';
|
||||
|
||||
describe('OrderManagementAbnormalWarningComponent', () => {
|
||||
let component: OrderManagementAbnormalWarningComponent;
|
||||
let fixture: ComponentFixture<OrderManagementAbnormalWarningComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ OrderManagementAbnormalWarningComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(OrderManagementAbnormalWarningComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,288 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { STColumn, STComponent } from '@delon/abc/st';
|
||||
import { SFComponent, SFDateWidgetSchema, SFSchema, SFSchemaEnum, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
|
||||
import { ModalHelper, _HttpClient } from '@delon/theme';
|
||||
import { NzModalService } from 'ng-zorro-antd/modal';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { OrderManagementService } from '../../services/order-management.service';
|
||||
import { UpdateFreightComponent } from '../../modal/bulk/update-freight/update-freight.component';
|
||||
import { ConfirReceiptComponent } from '../../modal/bulk/confir-receipt/confir-receipt.component';
|
||||
import { of } from 'rxjs';
|
||||
import { ShipperBaseService } from '@shared';
|
||||
import { Router } from '@angular/router';
|
||||
import { OneCarOrderAppealComponent } from '../../modal/audit/appeal/appeal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-order-management-abnormal-warning',
|
||||
templateUrl: './abnormal-warning.component.html',
|
||||
styleUrls: ['./abnormal-warning.component.less']
|
||||
})
|
||||
export class OrderManagementAbnormalWarningComponent implements OnInit {
|
||||
ui: SFUISchema = {};
|
||||
uiView: SFUISchema = {};
|
||||
schema: SFSchema = {};
|
||||
schemaView: SFSchema = {};
|
||||
changeId: any; // 主页面查看运费变更记录id - 用于运费变更记录
|
||||
changeViewId: any; // 查看运费变更记录id - 用于查看
|
||||
auditId: any;
|
||||
auditIdR: any;
|
||||
auditMany = false;
|
||||
isVisibleView = false;
|
||||
isVisibleEvaluate = false;
|
||||
isVisible = false;
|
||||
isVisibleRE = false;
|
||||
_$expand = false;
|
||||
@ViewChild('st') private readonly st!: STComponent;
|
||||
@ViewChild('sf', { static: false }) sf!: SFComponent;
|
||||
@ViewChild('sfView', { static: false }) sfView!: SFComponent;
|
||||
@ViewChild('stFloat') private readonly stFloat!: STComponent;
|
||||
@ViewChild('stFloatView') private readonly stFloatView!: STComponent;
|
||||
columns: STColumn[] = [];
|
||||
columnsFloat: STColumn[] = [];
|
||||
columnsFloatView: STColumn[] = [];
|
||||
ViewCause: any; // 变更运费查看数据
|
||||
constructor(
|
||||
public service: OrderManagementService,
|
||||
private modal: NzModalService,
|
||||
public shipperservice: ShipperBaseService,
|
||||
private router: Router
|
||||
) { }
|
||||
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
get reqParams() {
|
||||
const a: any = {};
|
||||
const params: any = Object.assign({}, this.sf?.value || {});
|
||||
delete params._$expand;
|
||||
return {
|
||||
...a,
|
||||
...params,
|
||||
warningTime: {
|
||||
start: this.sf?.value?.warningTime?.[0] || '',
|
||||
end: this.sf?.value?.warningTime?.[1] || ''
|
||||
}
|
||||
};
|
||||
}
|
||||
get changeParams() {
|
||||
return {
|
||||
id: this.changeId
|
||||
};
|
||||
}
|
||||
get selectedRows() {
|
||||
return this.st?.list.filter(item => item.checked) || [];
|
||||
}
|
||||
get changeViewParams() {
|
||||
return {
|
||||
id: this.changeViewId
|
||||
};
|
||||
}
|
||||
search() {
|
||||
this.st?.load(1);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initSF();
|
||||
this.initST();
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化查询表单
|
||||
*/
|
||||
initSF() {
|
||||
this.schema = {
|
||||
properties: {
|
||||
_$expand: { type: 'boolean', ui: { hidden: true } },
|
||||
billCode: {
|
||||
type: 'string',
|
||||
title: '订单号',
|
||||
ui: {
|
||||
}
|
||||
},
|
||||
wayCode: {
|
||||
type: 'string',
|
||||
title: '运单号',
|
||||
ui: {
|
||||
}
|
||||
},
|
||||
serviceType: {
|
||||
title: '服务类型',
|
||||
type: 'string',
|
||||
default: '',
|
||||
ui: {
|
||||
widget: 'dict-select',
|
||||
params: { dictKey: 'service:type' },
|
||||
containsAllLabel: true,
|
||||
} as SFSelectWidgetSchema
|
||||
},
|
||||
resourceType: {
|
||||
title: '货源类型',
|
||||
type: 'string',
|
||||
default: '',
|
||||
ui: {
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
},
|
||||
widget: 'dict-select',
|
||||
params: { dictKey: 'goodresource:type' },
|
||||
containsAllLabel: true,
|
||||
} as SFSelectWidgetSchema
|
||||
},
|
||||
shipperId: {
|
||||
type: 'string',
|
||||
title: '货主',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
serverSearch: true,
|
||||
searchDebounceTime: 300,
|
||||
searchLoadingText: '搜索中...',
|
||||
allowClear: true,
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
},
|
||||
onSearch: (q: any) => {
|
||||
let str =q.replace(/^\s+|\s+$/g,"");
|
||||
if (str) {
|
||||
return this.service
|
||||
.request(this.service.$api_enterpriceList, { enterpriseName: str })
|
||||
.pipe(map((res: any) => (res as any[]).map(i => ({ label: i.enterpriseName, value: i.id } as SFSchemaEnum))))
|
||||
.toPromise();
|
||||
} else {
|
||||
return of([]);
|
||||
}
|
||||
},
|
||||
} as SFSelectWidgetSchema
|
||||
},
|
||||
loadingPlace: {
|
||||
type: 'string',
|
||||
title: '装货地',
|
||||
ui: {
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
}
|
||||
}
|
||||
},
|
||||
dischargePlace: {
|
||||
type: 'string',
|
||||
title: '卸货地',
|
||||
ui: {
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
}
|
||||
}
|
||||
},
|
||||
driverName: {
|
||||
title: '承运司机',
|
||||
type: 'string',
|
||||
ui: {
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
}
|
||||
}
|
||||
},
|
||||
carNos: {
|
||||
title: '车牌号',
|
||||
type: 'string',
|
||||
ui: {
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
}
|
||||
}
|
||||
},
|
||||
warningTime: {
|
||||
title: '预警时间',
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'date',
|
||||
mode: 'range',
|
||||
format: 'yyyy-MM-dd',
|
||||
allowClear: true,
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
}
|
||||
} as SFDateWidgetSchema
|
||||
},
|
||||
},
|
||||
type: 'object'
|
||||
};
|
||||
this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化数据列表
|
||||
*/
|
||||
initST() {
|
||||
this.columns = [
|
||||
{
|
||||
title: '运单号',
|
||||
width: '180px',
|
||||
fixed: 'left',
|
||||
className: 'text-left',
|
||||
index: 'wayCode'
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
width: '180px',
|
||||
fixed: 'left',
|
||||
className: 'text-left',
|
||||
index: 'billCode'
|
||||
},
|
||||
{ title: '服务类型', index: 'serviceTypeLabel', width: '220px', className: 'text-left' },
|
||||
{ title: '货主', index: 'shipperName', width: '220px', className: 'text-left' },
|
||||
{ title: '装货地', index: 'loadingAddressArr', width: '220px', className: 'text-left' },
|
||||
{ title: '卸货地', index: 'unloadingAddressArr', width: '220px', className: 'text-left' },
|
||||
{ title: '司机', render: 'driverName', width: '180px', className: 'text-left' },
|
||||
{ title: '车牌号', index: 'carNo', width: '180px', className: 'text-left' },
|
||||
{ title: '预警类型', index: 'warningTypeLabel', width: '180px', className: 'text-left' },
|
||||
{
|
||||
title: '预警时间',
|
||||
className: 'text-left',
|
||||
width: '180px',
|
||||
index: 'warningTime'
|
||||
},
|
||||
{
|
||||
title: '位置描述',
|
||||
className: 'text-left',
|
||||
width: '250px',
|
||||
render: 'longitude'
|
||||
},
|
||||
{
|
||||
title: '提醒内容',
|
||||
className: 'text-left',
|
||||
width: '250px',
|
||||
index: 'warningContent',
|
||||
},
|
||||
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询字段个数
|
||||
*/
|
||||
get queryFieldCount(): number {
|
||||
return Object.keys(this.schema?.properties || {}).length;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 伸缩查询条件
|
||||
*/
|
||||
expandToggle(): void {
|
||||
this._$expand = !this._$expand;
|
||||
this.sf?.setValue('/_$expand', this._$expand);
|
||||
}
|
||||
tabChange(item: any) { }
|
||||
/**
|
||||
* 重置表单
|
||||
*/
|
||||
resetSF(): void {
|
||||
this.sf.reset();
|
||||
this._$expand = false;
|
||||
}
|
||||
|
||||
|
||||
// 导出
|
||||
exprot() {
|
||||
this.service.asyncExport(this.reqParams, this.service.$api_get_asyncExportSpotCheckList);
|
||||
}
|
||||
}
|
||||
@ -4,12 +4,13 @@
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-01-06 09:24:00
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-02-10 11:34:03
|
||||
* @LastEditTime : 2022-04-07 09:43:47
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\order-management-routing.module.ts
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
*/
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { OrderManagementAbnormalWarningComponent } from './components/abnormal-warning/abnormal-warning.component';
|
||||
import { OrderManagementBulkDetailChangeComponent } from './components/bulk-detail-change/bulk-detail-change.component';
|
||||
import { OrderManagementBulkeDetailComponent } from './components/bulk-detail/bulk-detail.component';
|
||||
import { OrderManagementBulkComponent } from './components/bulk/bulk.component';
|
||||
@ -36,6 +37,7 @@ const routes: Routes = [
|
||||
{ path: 'complaint-detail/:id', component: OrderManagementComplaintDetailComponent },
|
||||
{ path: 'receipts-audit', component: OrderManagementReceiptsAuditComponent },
|
||||
{ path: 'compliance-audit', component: OrderManagementComplianceAuditComponent },
|
||||
{ path: 'abnormal-warning', component: OrderManagementAbnormalWarningComponent },
|
||||
]
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
|
||||
import { NgModule, Type } from '@angular/core';
|
||||
import { SharedModule } from '@shared';
|
||||
import { OrderManagementAbnormalWarningComponent } from './components/abnormal-warning/abnormal-warning.component';
|
||||
import { OrderManagementBulkDetailChangeComponent } from './components/bulk-detail-change/bulk-detail-change.component';
|
||||
import { OrderManagementBulkeDetailComponent } from './components/bulk-detail/bulk-detail.component';
|
||||
import { OrderManagementBulkComponent } from './components/bulk/bulk.component';
|
||||
@ -66,7 +67,8 @@ const COMPONENTS: Type<void>[] = [
|
||||
OrderManagementComplianceAuditComponent,
|
||||
OneCarOrderCancelConfirmComponent,
|
||||
OneCarOrderViewtrackComponent,
|
||||
OneCarOrderAppealComponent
|
||||
OneCarOrderAppealComponent,
|
||||
OrderManagementAbnormalWarningComponent
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @Author : Shiming
|
||||
* @Date : 2021-12-03 15:31:52
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-06 11:03:58
|
||||
* @LastEditTime : 2022-04-07 09:49:44
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\order-management\\services\\order-management.service.ts
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
*/
|
||||
@ -186,6 +186,9 @@ export class OrderManagementService extends ShipperBaseService {
|
||||
// 查看申述记录
|
||||
$api_get_getOrderComplaintDetail = `/api/sdc/billOperate/getOrderComplaintDetail`;
|
||||
|
||||
// 查询异常预警表
|
||||
$api_get_abnormalWarning = `/api/sdc/abnormalWarning/list/page`;
|
||||
|
||||
|
||||
// 异步导出运营后台大宗订单列表
|
||||
$api_get_asyncExportBulkList = `/api/sdc/billOperate/asyncExportBulkList`;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-12-03 15:31:52
|
||||
* @LastEditTime : 2022-04-06 15:37:59
|
||||
* @LastEditTime : 2022-04-07 15:02:55
|
||||
* @LastEditors : Shiming
|
||||
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\waybill-management\\components\\bulk-detail\\bulk-detail.component.html
|
||||
@ -30,6 +30,7 @@
|
||||
<sv label="所属项目">{{i?.enterpriseProjectName}}</sv>
|
||||
<sv label="服务类型">{{i?.serviceTypeLabel}}</sv>
|
||||
<sv label="调度员">{{i?.dispatchName}} /{{i?.dispatchPhone}}</sv>
|
||||
<sv label="外部订单号">{{ i?.externalBillCode }}</sv>
|
||||
<sv label="货源编号">{{ i?.resourceCode }} </sv>
|
||||
<sv label="承诺付款天数">{{ i?.paymentDays }}</sv>
|
||||
</div>
|
||||
@ -92,13 +93,12 @@
|
||||
<sv label="接单数量">
|
||||
{{ i?.acceptWeight }}吨,{{ i?.acceptVolume }}方
|
||||
</sv>
|
||||
<sv label="装货数量">
|
||||
<sv *ngIf="i?.billStatus =='3' || i?.billStatus =='4' || i?.billStatus =='5'" label="装货数量">
|
||||
{{ i?.loadWeight }}吨，{{ i?.loadVolume }}方
|
||||
</sv>
|
||||
<sv label="卸货数量">
|
||||
<sv *ngIf="i?.billStatus =='4' || i?.billStatus =='5'" label="卸货数量">
|
||||
{{ i?.settlementWeight }}吨,{{ i?.settlementVolume }}方
|
||||
</sv>
|
||||
|
||||
</sv-container>
|
||||
<div class="mt-md">
|
||||
<h4 class="text-md">装货卸货信息
|
||||
@ -154,10 +154,10 @@
|
||||
totalObj?.price - attObj?.price | currency
|
||||
}}，附加运费{{ attObj?.price | currency}}，附加费率{{ (attObj?.price / totalObj?.price) * 100 | number: '0.2-2' }}%）
|
||||
</div>
|
||||
<div>车队长：{{ i?.payee?.name }}/{{ i?.payee?.phone }}/{{ i?.payee?.idNo }}</div>
|
||||
<div>收款人：{{ i?.payee?.name }}/{{ i?.payee?.phone }}/{{ i?.payee?.idNo }}</div>
|
||||
</nz-card> -->
|
||||
<nz-card [nzTitle]="'运费信息' +'（到货后'+i?.paymentDays+'天内支付运费）'" #distannce3>
|
||||
<h2>{{i?.goodsInfos?.[0]?.freightPrice}}{{i?.goodsInfos?.[0]?.freightTypeLabel}}（{{ i?.goodsInfos?.[0]?.settlementBasisLabel ? i?.goodsInfos?.[0]?.settlementBasisLabel + '，' :' ' }}{{i?.goodsInfos?.[0]?.ruleLabel}}）</h2>
|
||||
<h2>{{i?.freightPrice}}{{i?.goodsInfos?.[0]?.freightTypeLabel}}（{{ i?.goodsInfos?.[0]?.settlementBasisLabel ? i?.goodsInfos?.[0]?.settlementBasisLabel + '，' :' ' }}{{i?.goodsInfos?.[0]?.ruleLabel}}）</h2>
|
||||
<st #st [data]="billExpenses" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">
|
||||
<ng-template st-row="PriceType" let-item let-index="index"> 到付 </ng-template>
|
||||
<ng-template st-row="price" let-item let-index="index">
|
||||
@ -176,7 +176,7 @@
|
||||
附加费{{ i?.totalSurcharge | currency }}，附加费率{{ (i?.totalRate * 100).toFixed(2)}}%）
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf ="i?.payee?.phone && i?.payee?.phone !== i?.driverVo.phone">车队长：{{ i?.payee?.name }}/{{ i?.payee?.phone }}/{{ i?.payee?.idNo }}</div>
|
||||
<div>收款人：{{ i?.payee?.name }}/{{ i?.payee?.phone }}/{{ i?.payee?.idNo }}</div>
|
||||
</nz-card>
|
||||
|
||||
<nz-card nzTitle="附件信息" #distannce4>
|
||||
|
||||
Reference in New Issue
Block a user