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`;
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user