Merge branch 'develop' of https://gitlab.eascs.com/tms-ui/tms-obc-web into develop
This commit is contained in:
潘晓云
@ -0,0 +1 @@
|
||||
<g2-custom delay="100" (render)="render($event)"></g2-custom>
|
||||
@ -0,0 +1,81 @@
|
||||
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
|
||||
import { Chart } from '@antv/g2';
|
||||
import { DataService } from 'src/app/routes/datatable/services/data.service';
|
||||
@Component({
|
||||
selector: 'app-datatable-customindex-curve',
|
||||
templateUrl: './curve.component.html',
|
||||
styleUrls: ['./curve.component.less']
|
||||
})
|
||||
export class DatatableCustomindexCurveComponent implements OnInit, OnChanges {
|
||||
el: any;
|
||||
@Input() chartData: any;
|
||||
chart: any;
|
||||
constructor(private service: DataService, private ngZone: NgZone) {
|
||||
|
||||
}
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (this.chartData) {
|
||||
// setTimeout(()=>{
|
||||
// this.chart.render(true)
|
||||
// }, 1000)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
}
|
||||
reRender() {
|
||||
setTimeout(() => {
|
||||
this.chart.data(this.chartData);
|
||||
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 {
|
||||
this.chart = new Chart({
|
||||
container: el,
|
||||
autoFit: true,
|
||||
height: 500,
|
||||
});
|
||||
|
||||
this.chart.data(this.chartData);
|
||||
this.chart.scale({
|
||||
time: {
|
||||
range: [0, 1],
|
||||
},
|
||||
number: {
|
||||
nice: true,
|
||||
},
|
||||
});
|
||||
|
||||
this.chart.tooltip({
|
||||
showCrosshairs: true,
|
||||
shared: true,
|
||||
});
|
||||
|
||||
this.chart.axis('number', {
|
||||
label: {
|
||||
formatter: (val: any) => {
|
||||
return val;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
this.chart
|
||||
.line()
|
||||
.position('time*number')
|
||||
.color('name')
|
||||
|
||||
|
||||
this.chart.render();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,20 +1,30 @@
|
||||
<!--
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-04-06 13:20:56
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-06 15:00:01
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\customtable\\customindex\\customindex.component.html
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
-->
|
||||
<!-- 页头 -->
|
||||
<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]="'¥ 126,560.00'" footer="日访问量 12,423" 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]="'¥ 126,560.00'" footer="日访问量 12,423" 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]="'¥ 126,560.00'" footer="日访问量 12,423" 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]="'¥ 126,560.00'" footer="日访问量 12,423" contentHeight="46">
|
||||
<g2-card [title]="'车辆'" [bordered]="true" [total]="clData?.total" [footer]="'已认证' + clData?.auditPassTotal" contentHeight="46">
|
||||
</g2-card>
|
||||
</div>
|
||||
</div>
|
||||
@ -29,17 +39,43 @@
|
||||
<label nz-radio-button nzValue="define">自定义</label>
|
||||
</nz-radio-group>
|
||||
<div class="dateBox">
|
||||
<nz-date-picker [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" *ngIf="mode !== 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-date-picker>
|
||||
<nz-range-picker [(ngModel)]="defineDate" [nzFormat]="dateFormat" *ngIf="mode === 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-range-picker>
|
||||
<nz-date-picker
|
||||
[(ngModel)]="date"
|
||||
[nzMode]="mode"
|
||||
[nzFormat]="dateFormat"
|
||||
*ngIf="mode !== 'define'"
|
||||
[nzDisabledDate]="disabledDate"
|
||||
(ngModelChange)="onChange($event)"
|
||||
></nz-date-picker>
|
||||
<nz-range-picker
|
||||
[(ngModel)]="defineDate"
|
||||
[nzFormat]="dateFormat"
|
||||
*ngIf="mode === 'define'"
|
||||
[nzDisabledDate]="disabledDate"
|
||||
(ngModelChange)="onChange($event)"
|
||||
></nz-range-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
<st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listOperationalReportPage"
|
||||
<st
|
||||
#st
|
||||
multiSort
|
||||
[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.records', total: 'data.total' } }"
|
||||
[page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }"></st>
|
||||
[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>
|
||||
<div *ngIf="item.type == '1'">货主</div>
|
||||
<div *ngIf="item.type == '2'">合伙人</div>
|
||||
<div *ngIf="item.type == '3'">司机</div>
|
||||
<div *ngIf="item.type == '4'">车辆</div>
|
||||
</ng-template>
|
||||
</st>
|
||||
</nz-card>
|
||||
<nz-card nzTitle="用户新增报表" [nzExtra]="extraTemplate">
|
||||
<ng-template #extraTemplate01>
|
||||
@ -50,10 +86,15 @@
|
||||
<label nz-radio-button nzValue="month">月</label>
|
||||
</nz-radio-group>
|
||||
<div class="dateBox">
|
||||
<nz-date-picker [nzDisabledDate]="disabledDate" [(ngModel)]="dateNext" [nzMode]="modeNext" (ngModelChange)="onChangeNext($event)"></nz-date-picker>
|
||||
<nz-date-picker
|
||||
[nzDisabledDate]="disabledDate"
|
||||
[(ngModel)]="dateNext"
|
||||
[nzMode]="modeNext"
|
||||
(ngModelChange)="onChangeNext($event)"
|
||||
></nz-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<app-operation-curve #curve [chartData]="chartData.lineChart"></app-operation-curve>
|
||||
</nz-card>
|
||||
<app-datatable-customindex-curve #curve [chartData]="chartData?.lineChart"></app-datatable-customindex-curve>
|
||||
</nz-card>
|
||||
|
||||
@ -3,54 +3,58 @@ import { STColumn, STComponent } from '@delon/abc/st';
|
||||
import { DatePipe, _HttpClient } from '@delon/theme';
|
||||
import { differenceInCalendarDays } from 'date-fns';
|
||||
import { DataService } from '../../../services/data.service';
|
||||
import { OperationCurveComponent } from '../../operationtable/curve/curve.component';
|
||||
import { DatatableCustomindexCurveComponent } from './curve/curve.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-customindex',
|
||||
templateUrl: './customindex.component.html',
|
||||
styleUrls: ['./customindex.component.less'],
|
||||
providers: [DatePipe]
|
||||
|
||||
})
|
||||
export class DatatableCustomindexComponent implements OnInit {
|
||||
@ViewChild('st') private readonly st!: STComponent;
|
||||
@ViewChild('curve') private readonly curve!: OperationCurveComponent;
|
||||
@ViewChild('curve') private readonly curve!: DatatableCustomindexCurveComponent;
|
||||
type = 1;
|
||||
mode = 'year';
|
||||
date: any = null;
|
||||
defineDate = [];
|
||||
time: any = ['2022-01-01 00:00:00']
|
||||
time: any = ['2022-01-01 00:00:00'];
|
||||
dateFormat = 'yyyy';
|
||||
today = new Date();
|
||||
dateNext: any = null;
|
||||
modeNext = 'year';
|
||||
timeNext: any = ['2022-01-01 00:00:00']
|
||||
timeNext: any = ['2022-01-01 00:00:00'];
|
||||
chartData: any;
|
||||
flag = false;
|
||||
|
||||
|
||||
columns: STColumn[] = [
|
||||
{ title: '用户类型', index: 'networkTransporterName', className: 'text-center' },
|
||||
{ title: '用户总数', index: 'zsl', className: 'text-center' },
|
||||
{ title: '已认证数量', index: 'yingsje', className: 'text-center' },
|
||||
{ title: '活跃用户数', index: 'cys', className: 'text-center' },
|
||||
{ title: '未激活用户数', index: 'yingfyf', className: 'text-center' },
|
||||
{ title: '沉默用户数', index: 'yl', className: 'text-center' },
|
||||
{ title: '流失用户数', index: 'djd', className: 'text-center' },
|
||||
{ title: '流失率', index: 'ysz', className: 'text-center' }
|
||||
{ title: '用户类型', render: 'type', className: 'text-center' },
|
||||
{ title: '用户总数', index: '总数', 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' }
|
||||
];
|
||||
hzData: any;
|
||||
hhrData: any;
|
||||
sjData: any;
|
||||
clData: any;
|
||||
reportData: any = [];
|
||||
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
get reqParams() {
|
||||
if (this.mode === 'year') {
|
||||
this.type = 1
|
||||
this.type = 1;
|
||||
} else if (this.mode === 'month') {
|
||||
this.type = 2
|
||||
this.type = 2;
|
||||
} else if (this.mode === 'date') {
|
||||
this.type = 3
|
||||
this.type = 3;
|
||||
} else {
|
||||
this.type = 4
|
||||
this.type = 4;
|
||||
}
|
||||
let params: any = {
|
||||
time: this.time,
|
||||
@ -61,50 +65,100 @@ export class DatatableCustomindexComponent implements OnInit {
|
||||
return { ...params };
|
||||
}
|
||||
|
||||
constructor(public service: DataService, private datePipe: DatePipe) { }
|
||||
constructor(public service: DataService, private datePipe: DatePipe) {}
|
||||
ngOnInit(): void {
|
||||
this.initCurveData()
|
||||
this.initCurveData();
|
||||
}
|
||||
initCurveData() {
|
||||
let type = 1
|
||||
let type = 1;
|
||||
if (this.mode === 'year') {
|
||||
type = 1
|
||||
type = 1;
|
||||
} else if (this.mode === 'month') {
|
||||
type = 2
|
||||
type = 2;
|
||||
}
|
||||
const params: any = {
|
||||
time: this.timeNext,
|
||||
type
|
||||
};
|
||||
this.flag = true
|
||||
this.service.request(this.service.$api_operationalReportHistogram, params).subscribe(res => {
|
||||
if (res) {
|
||||
this.chartData = res
|
||||
if (this.flag) {
|
||||
this.curve.reRender()
|
||||
// const params: any = {
|
||||
// time: this.timeNext,
|
||||
// type
|
||||
// };
|
||||
this.flag = true;
|
||||
this.service
|
||||
.request(this.service.$api_statistics_totalDetail, {
|
||||
time: this.timeNext,
|
||||
type: 1 //用户角色类型 1：货主 2：合伙人 3：司机 4：车辆
|
||||
})
|
||||
.subscribe(res => {
|
||||
if (res) {
|
||||
this.reportData.push(res);
|
||||
}
|
||||
});
|
||||
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_total, { type: 1 }).subscribe(res => {
|
||||
if (res) {
|
||||
this.hzData = res;
|
||||
}
|
||||
});
|
||||
this.service.request(this.service.$api_statistics_total, { type: 2 }).subscribe(res => {
|
||||
if (res) {
|
||||
this.hhrData = res;
|
||||
}
|
||||
});
|
||||
this.service.request(this.service.$api_statistics_total, { type: 3 }).subscribe(res => {
|
||||
if (res) {
|
||||
this.sjData = res;
|
||||
}
|
||||
});
|
||||
this.service.request(this.service.$api_statistics_total, { type: 4 }).subscribe(res => {
|
||||
if (res) {
|
||||
this.clData = res;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
changeData() {
|
||||
if (this.mode === 'year') {
|
||||
this.dateFormat = 'yyyy'
|
||||
this.dateFormat = 'yyyy';
|
||||
} else if (this.mode === 'month') {
|
||||
this.dateFormat = 'yyyy-MM'
|
||||
this.dateFormat = 'yyyy-MM';
|
||||
} else {
|
||||
this.dateFormat = 'yyyy-MM-dd'
|
||||
this.dateFormat = 'yyyy-MM-dd';
|
||||
}
|
||||
}
|
||||
onChange(result: any) {
|
||||
if (this.mode === 'year') {
|
||||
this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
|
||||
this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00'];
|
||||
} else if (this.mode === 'month') {
|
||||
this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
|
||||
this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00'];
|
||||
} else if (this.mode === 'date') {
|
||||
this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00']
|
||||
this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00'];
|
||||
} 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.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.st.reload({ ...this.reqParams });
|
||||
}
|
||||
@ -112,24 +166,22 @@ export class DatatableCustomindexComponent implements OnInit {
|
||||
// Can not select days before today and today
|
||||
differenceInCalendarDays(current, this.today) > 0;
|
||||
|
||||
|
||||
changeDataNext() {
|
||||
if(this.mode === 'year') {
|
||||
this.dateFormat = 'yyyy'
|
||||
} else if(this.mode === 'month') {
|
||||
this.dateFormat = 'yyyy-MM'
|
||||
if (this.mode === 'year') {
|
||||
this.dateFormat = 'yyyy';
|
||||
} else if (this.mode === 'month') {
|
||||
this.dateFormat = 'yyyy-MM';
|
||||
}
|
||||
}
|
||||
onChangeNext(result: any) {
|
||||
if(result === null) {
|
||||
return
|
||||
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.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'];
|
||||
}
|
||||
this.initCurveData()
|
||||
this.initCurveData();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -29,6 +29,7 @@ import { DatatableDatascreenComponent } from './components/datascreen/datascreen
|
||||
import { FinancetablePillarComponent } from './components/financetable/pillar/pillar.component';
|
||||
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';
|
||||
|
||||
const COMPONENTS: Type<void>[] = [
|
||||
DatatableDataindexComponent,
|
||||
@ -60,7 +61,8 @@ const COMPONENTS: Type<void>[] = [
|
||||
DatatableDatascreenComponent,
|
||||
FinancetablePillarComponent,
|
||||
ComplianceCurveComponent,
|
||||
BusitableCurveComponent
|
||||
BusitableCurveComponent,
|
||||
DatatableCustomindexCurveComponent
|
||||
]
|
||||
|
||||
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
* @Author : Shiming
|
||||
* @Date : 2021-12-27 10:30:56
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-01-18 17:14:59
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\account\\services\\account.service.ts
|
||||
* @LastEditTime : 2022-04-06 13:47:25
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\services\\data.service.ts
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
*/
|
||||
|
||||
@ -58,6 +58,12 @@ export class DataService extends BaseService {
|
||||
$api_listMonitorSituation = `/api/sdc/reportComplianceMonitor/listMonitorSituation`;
|
||||
|
||||
|
||||
// 客户报表-根据类型获取统计信息(card)
|
||||
$api_statistics_total = `/api/mdc/cuc/statistics/total`;
|
||||
// 客户报表-根据类型获取统计明细信息(table)
|
||||
$api_statistics_totalDetail = `/api/mdc/cuc/statistics/totalDetail`;
|
||||
|
||||
|
||||
|
||||
constructor(public injector: Injector) {
|
||||
super(injector);
|
||||
|
||||
Reference in New Issue
Block a user