fix bug
This commit is contained in:
Lingzi
41
package-lock.json
generated
41
package-lock.json
generated
@ -2733,11 +2733,46 @@
|
|||||||
"integrity": "sha1-ayxRCnrXA56Y57jT1lmPQ1nlwIA=",
|
"integrity": "sha1-ayxRCnrXA56Y57jT1lmPQ1nlwIA=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"@types/d3-geo": {
|
||||||
|
"version": "3.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.2.tgz",
|
||||||
|
"integrity": "sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"@types/geojson": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@types/d3-path": {
|
"@types/d3-path": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.nlark.com/@types/d3-path/download/@types/d3-path-2.0.1.tgz",
|
"resolved": "https://registry.nlark.com/@types/d3-path/download/@types/d3-path-2.0.1.tgz",
|
||||||
"integrity": "sha1-ygPfqLlNit2XrQzZfpbiAGtHY8s="
|
"integrity": "sha1-ygPfqLlNit2XrQzZfpbiAGtHY8s="
|
||||||
},
|
},
|
||||||
|
"@types/d3-sankey": {
|
||||||
|
"version": "0.11.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/d3-sankey/-/d3-sankey-0.11.2.tgz",
|
||||||
|
"integrity": "sha512-U6SrTWUERSlOhnpSrgvMX64WblX1AxX6nEjI2t3mLK2USpQrnbwYYK+AS9SwiE7wgYmOsSSKoSdr8aoKBH0HgQ==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"@types/d3-shape": "^1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@types/d3-path": {
|
||||||
|
"version": "1.0.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.9.tgz",
|
||||||
|
"integrity": "sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"@types/d3-shape": {
|
||||||
|
"version": "1.3.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.8.tgz",
|
||||||
|
"integrity": "sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"@types/d3-path": "^1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"@types/d3-shape": {
|
"@types/d3-shape": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmmirror.com/@types/d3-shape/download/@types/d3-shape-2.1.3.tgz",
|
"resolved": "https://registry.npmmirror.com/@types/d3-shape/download/@types/d3-shape-2.1.3.tgz",
|
||||||
@ -2783,6 +2818,12 @@
|
|||||||
"integrity": "sha512-sPZYQEIF/SOnLAvaz9lTuydniP+afBMtElRTdYkeV1QtEgvtJ7qolCPjly6O32QI8CbEmP5O/fztMXEDWfEcrg==",
|
"integrity": "sha512-sPZYQEIF/SOnLAvaz9lTuydniP+afBMtElRTdYkeV1QtEgvtJ7qolCPjly6O32QI8CbEmP5O/fztMXEDWfEcrg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"@types/geojson": {
|
||||||
|
"version": "7946.0.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
|
||||||
|
"integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"@types/glob": {
|
"@types/glob": {
|
||||||
"version": "7.2.0",
|
"version": "7.2.0",
|
||||||
"resolved": "https://registry.npmmirror.com/@types/glob/download/@types/glob-7.2.0.tgz?cache=0&sync_timestamp=1637267477186&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fglob%2Fdownload%2F%40types%2Fglob-7.2.0.tgz",
|
"resolved": "https://registry.npmmirror.com/@types/glob/download/@types/glob-7.2.0.tgz?cache=0&sync_timestamp=1637267477186&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fglob%2Fdownload%2F%40types%2Fglob-7.2.0.tgz",
|
||||||
|
|||||||
54
package.json
54
package.json
@ -75,22 +75,22 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "~12.2.0",
|
"@angular-devkit/build-angular": "~12.2.0",
|
||||||
"@angular/cli": "~12.2.0",
|
|
||||||
"@angular/compiler-cli": "~12.2.0",
|
|
||||||
"@types/jasmine": "~3.8.0",
|
|
||||||
"@types/node": "^12.11.1",
|
|
||||||
"jasmine-core": "~3.8.0",
|
|
||||||
"karma": "~6.3.0",
|
|
||||||
"karma-chrome-launcher": "~3.1.0",
|
|
||||||
"karma-coverage": "~2.0.3",
|
|
||||||
"karma-jasmine": "~4.0.0",
|
|
||||||
"karma-jasmine-html-reporter": "~1.7.0",
|
|
||||||
"typescript": "~4.3.5",
|
|
||||||
"@angular-eslint/builder": "~12.3.1",
|
"@angular-eslint/builder": "~12.3.1",
|
||||||
"@angular-eslint/eslint-plugin": "~12.3.1",
|
"@angular-eslint/eslint-plugin": "~12.3.1",
|
||||||
"@angular-eslint/eslint-plugin-template": "~12.3.1",
|
"@angular-eslint/eslint-plugin-template": "~12.3.1",
|
||||||
"@angular-eslint/schematics": "~12.3.1",
|
"@angular-eslint/schematics": "~12.3.1",
|
||||||
"@angular-eslint/template-parser": "~12.3.1",
|
"@angular-eslint/template-parser": "~12.3.1",
|
||||||
|
"@angular/cli": "~12.2.0",
|
||||||
|
"@angular/compiler-cli": "~12.2.0",
|
||||||
|
"@angular/language-service": "~12.2.0",
|
||||||
|
"@delon/testing": "^12.3.0",
|
||||||
|
"@types/d3-geo": "^3.0.2",
|
||||||
|
"@types/d3-sankey": "^0.11.2",
|
||||||
|
"@types/file-saver": "^2.0.3",
|
||||||
|
"@types/jasmine": "~3.8.0",
|
||||||
|
"@types/jasminewd2": "~2.0.3",
|
||||||
|
"@types/js-base64": "^3.0.0",
|
||||||
|
"@types/node": "^12.11.1",
|
||||||
"@typescript-eslint/eslint-plugin": "~4.29.2",
|
"@typescript-eslint/eslint-plugin": "~4.29.2",
|
||||||
"@typescript-eslint/parser": "~4.29.2",
|
"@typescript-eslint/parser": "~4.29.2",
|
||||||
"eslint": "^7.32.0",
|
"eslint": "^7.32.0",
|
||||||
@ -99,29 +99,31 @@
|
|||||||
"eslint-plugin-jsdoc": "~36.0.7",
|
"eslint-plugin-jsdoc": "~36.0.7",
|
||||||
"eslint-plugin-prefer-arrow": "~1.2.3",
|
"eslint-plugin-prefer-arrow": "~1.2.3",
|
||||||
"eslint-plugin-prettier": "~3.4.1",
|
"eslint-plugin-prettier": "~3.4.1",
|
||||||
"@angular/language-service": "~12.2.0",
|
"husky": "^6.0.0",
|
||||||
"source-map-explorer": "^2.5.2",
|
"jasmine-core": "~3.8.0",
|
||||||
|
"jasmine-spec-reporter": "~5.0.0",
|
||||||
|
"karma": "~6.3.0",
|
||||||
|
"karma-chrome-launcher": "~3.1.0",
|
||||||
|
"karma-coverage": "~2.0.3",
|
||||||
|
"karma-coverage-istanbul-reporter": "~3.0.2",
|
||||||
|
"karma-jasmine": "~4.0.0",
|
||||||
|
"karma-jasmine-html-reporter": "~1.7.0",
|
||||||
|
"lint-staged": "^11.1.2",
|
||||||
|
"ng-alain": "^12.3.0",
|
||||||
|
"ng-alain-plugin-theme": "^12.0.0",
|
||||||
|
"ng-alain-sts": "^0.0.1",
|
||||||
|
"node-fetch": "^2.6.1",
|
||||||
"prettier": "^2.2.1",
|
"prettier": "^2.2.1",
|
||||||
|
"protractor": "~7.0.0",
|
||||||
|
"source-map-explorer": "^2.5.2",
|
||||||
"stylelint": "^13.13.1",
|
"stylelint": "^13.13.1",
|
||||||
"stylelint-config-prettier": "^8.0.2",
|
"stylelint-config-prettier": "^8.0.2",
|
||||||
"stylelint-config-rational-order": "^0.1.2",
|
"stylelint-config-rational-order": "^0.1.2",
|
||||||
"stylelint-config-standard": "^22.0.0",
|
"stylelint-config-standard": "^22.0.0",
|
||||||
"stylelint-declaration-block-no-ignored-properties": "^2.4.0",
|
"stylelint-declaration-block-no-ignored-properties": "^2.4.0",
|
||||||
"stylelint-order": "^4.1.0",
|
"stylelint-order": "^4.1.0",
|
||||||
"@delon/testing": "^12.3.0",
|
|
||||||
"ng-alain": "^12.3.0",
|
|
||||||
"ng-alain-plugin-theme": "^12.0.0",
|
|
||||||
"ng-alain-sts": "^0.0.1",
|
|
||||||
"@types/jasminewd2": "~2.0.3",
|
|
||||||
"jasmine-spec-reporter": "~5.0.0",
|
|
||||||
"karma-coverage-istanbul-reporter": "~3.0.2",
|
|
||||||
"protractor": "~7.0.0",
|
|
||||||
"ts-node": "~8.3.0",
|
"ts-node": "~8.3.0",
|
||||||
"node-fetch": "^2.6.1",
|
"typescript": "~4.3.5"
|
||||||
"husky": "^6.0.0",
|
|
||||||
"lint-staged": "^11.1.2",
|
|
||||||
"@types/file-saver": "^2.0.3",
|
|
||||||
"@types/js-base64": "^3.0.0"
|
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"(src)/**/*.{html,ts}": [
|
"(src)/**/*.{html,ts}": [
|
||||||
|
|||||||
@ -20,7 +20,7 @@ module.exports = {
|
|||||||
// }
|
// }
|
||||||
'//api': {
|
'//api': {
|
||||||
target: {
|
target: {
|
||||||
host: 'tms-api-test.eascs.com',
|
host: 'tms-api-dev.eascs.com',
|
||||||
protocol: 'https:',
|
protocol: 'https:',
|
||||||
port: 443
|
port: 443
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,6 +1,60 @@
|
|||||||
<!-- 页头 -->
|
<!-- 页头 -->
|
||||||
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
|
<page-header-wrapper [title]="'客户报表'"></page-header-wrapper>
|
||||||
<nz-card>
|
<div nz-row [nzGutter]="16">
|
||||||
<sf mode="search" [schema]="searchSchema" (formSubmit)="st.reset($event)" (formReset)="st.reset($event)"></sf>
|
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||||
<st #st [data]="url" [columns]="columns"></st>
|
<g2-card [title]="'货主'" [bordered]="true" [total]="'¥ 126,560.00'" footer="日访问量 12,423" 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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nz-card nzTitle="客户报表" [nzExtra]="extraTemplate">
|
||||||
|
<ng-template #extraTemplate>
|
||||||
|
<div class="chooseBox">
|
||||||
|
<div class="timeBox">
|
||||||
|
<nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
|
||||||
|
<label nz-radio-button nzValue="year">年</label>
|
||||||
|
<label nz-radio-button nzValue="month">月</label>
|
||||||
|
<label nz-radio-button nzValue="date">日</label>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-template>
|
||||||
|
<st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listOperationalReportPage"
|
||||||
|
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
|
||||||
|
[scroll]="{ x: '1200px' }" [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
|
||||||
|
[page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="false"></st>
|
||||||
</nz-card>
|
</nz-card>
|
||||||
|
<nz-card nzTitle="用户新增报表" [nzExtra]="extraTemplate">
|
||||||
|
<ng-template #extraTemplate>
|
||||||
|
<div class="chooseBox">
|
||||||
|
<div class="timeBox">
|
||||||
|
<nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
|
||||||
|
<label nz-radio-button nzValue="year">年</label>
|
||||||
|
<label nz-radio-button nzValue="month">月</label>
|
||||||
|
</nz-radio-group>
|
||||||
|
<div class="dateBox">
|
||||||
|
<nz-date-picker [nzDisabledDate]="disabledDate" [nzMode]="mode" (ngModelChange)="onChange($event)"></nz-date-picker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
<app-datatable-curve></app-datatable-curve>
|
||||||
|
</nz-card>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
.chooseBox{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.timeBox{
|
||||||
|
display: flex;
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
}
|
||||||
|
.dateBox{
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
}
|
||||||
@ -1,45 +1,87 @@
|
|||||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||||
import { STColumn, STComponent } from '@delon/abc/st';
|
import { STColumn, STComponent } from '@delon/abc/st';
|
||||||
import { SFSchema } from '@delon/form';
|
import { DatePipe, _HttpClient } from '@delon/theme';
|
||||||
import { ModalHelper, _HttpClient } from '@delon/theme';
|
import { differenceInCalendarDays } from 'date-fns';
|
||||||
|
import { DataService } from '../../../services/data.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-datatable-customindex',
|
selector: 'app-datatable-customindex',
|
||||||
templateUrl: './customindex.component.html',
|
templateUrl: './customindex.component.html',
|
||||||
|
styleUrls: ['./customindex.component.less'],
|
||||||
|
providers: [DatePipe]
|
||||||
|
|
||||||
})
|
})
|
||||||
export class DatatableCustomindexComponent implements OnInit {
|
export class DatatableCustomindexComponent implements OnInit {
|
||||||
url = `/user`;
|
|
||||||
searchSchema: SFSchema = {
|
|
||||||
properties: {
|
|
||||||
no: {
|
|
||||||
type: 'string',
|
|
||||||
title: '编号'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ViewChild('st') private readonly st!: STComponent;
|
@ViewChild('st') private readonly st!: STComponent;
|
||||||
|
type = 1;
|
||||||
|
mode = 'year';
|
||||||
|
date: any = null;
|
||||||
|
defineDate = [];
|
||||||
|
time: any = ['2022-01-01 00:00:00']
|
||||||
|
dateFormat = 'yyyy-MM-dd';
|
||||||
|
today = new Date();
|
||||||
|
|
||||||
columns: STColumn[] = [
|
columns: STColumn[] = [
|
||||||
{ title: '编号', index: 'no' },
|
{ title: '用户类型', index: 'networkTransporterName', className: 'text-center' },
|
||||||
{ title: '调用次数', type: 'number', index: 'callNo' },
|
{ title: '用户总数', index: 'zsl', className: 'text-center' },
|
||||||
{ title: '头像', type: 'img', width: '50px', index: 'avatar' },
|
{ title: '已认证数量', index: 'yingsje', className: 'text-center' },
|
||||||
{ title: '时间', type: 'date', index: 'updatedAt' },
|
{ title: '活跃用户数', index: 'cys', className: 'text-center' },
|
||||||
{
|
{ title: '未激活用户数', index: 'yingfyf', className: 'text-center' },
|
||||||
title: '',
|
{ title: '沉默用户数', index: 'yl', className: 'text-center' },
|
||||||
buttons: [
|
{ title: '流失用户数', index: 'djd', className: 'text-center' },
|
||||||
// { text: '查看', click: (item: any) => `/form/${item.id}` },
|
{ title: '流失率', index: 'ysz', className: 'text-center' }
|
||||||
// { text: '编辑', type: 'static', component: FormEditComponent, click: 'reload' },
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
/**
|
||||||
|
* 查询参数
|
||||||
|
*/
|
||||||
|
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(private http: _HttpClient, private modal: ModalHelper) { }
|
constructor(public service: DataService, private datePipe: DatePipe) { }
|
||||||
|
|
||||||
ngOnInit(): void { }
|
ngOnInit(): void { }
|
||||||
|
|
||||||
add(): void {
|
changeData(){
|
||||||
// this.modal
|
if(this.mode === 'year') {
|
||||||
// .createStatic(FormEditComponent, { i: { id: 0 } })
|
this.dateFormat = 'yyyy'
|
||||||
// .subscribe(() => this.st.reload());
|
} else if(this.mode === 'month') {
|
||||||
|
this.dateFormat = 'yyyy-MM'
|
||||||
|
} else {
|
||||||
|
this.dateFormat = 'yyyy-MM-dd'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onChange(result: any) {
|
||||||
|
if(this.mode === 'year') {
|
||||||
|
this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
|
||||||
|
} else if(this.mode === 'month') {
|
||||||
|
this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
|
||||||
|
} else if(this.mode === 'date') {
|
||||||
|
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.st.reload({ ...this.reqParams });
|
||||||
|
}
|
||||||
|
disabledDate = (current: Date): boolean =>
|
||||||
|
// Can not select days before today and today
|
||||||
|
differenceInCalendarDays(current, this.today) > 0;
|
||||||
|
exportFun(){
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +0,0 @@
|
|||||||
<!-- 页头 -->
|
|
||||||
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
|
|
||||||
<nz-card>
|
|
||||||
<sf mode="search" [schema]="searchSchema" (formSubmit)="st.reset($event)" (formReset)="st.reset($event)"></sf>
|
|
||||||
<st #st [data]="url" [columns]="columns"></st>
|
|
||||||
</nz-card>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
import { DatatableCustomtableComponent } from './customtable.component';
|
|
||||||
|
|
||||||
describe('DatatableCustomtableComponent', () => {
|
|
||||||
let component: DatatableCustomtableComponent;
|
|
||||||
let fixture: ComponentFixture<DatatableCustomtableComponent>;
|
|
||||||
|
|
||||||
beforeEach(waitForAsync(() => {
|
|
||||||
TestBed.configureTestingModule({
|
|
||||||
declarations: [ DatatableCustomtableComponent ]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
}));
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fixture = TestBed.createComponent(DatatableCustomtableComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
|
||||||
import { STColumn, STComponent } from '@delon/abc/st';
|
|
||||||
import { SFSchema } from '@delon/form';
|
|
||||||
import { ModalHelper, _HttpClient } from '@delon/theme';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-datatable-customtable',
|
|
||||||
templateUrl: './customtable.component.html',
|
|
||||||
})
|
|
||||||
export class DatatableCustomtableComponent implements OnInit {
|
|
||||||
url = `/user`;
|
|
||||||
searchSchema: SFSchema = {
|
|
||||||
properties: {
|
|
||||||
no: {
|
|
||||||
type: 'string',
|
|
||||||
title: '编号'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ViewChild('st') private readonly st!: STComponent;
|
|
||||||
columns: STColumn[] = [
|
|
||||||
{ title: '编号', index: 'no' },
|
|
||||||
{ title: '调用次数', type: 'number', index: 'callNo' },
|
|
||||||
{ title: '头像', type: 'img', width: '50px', index: 'avatar' },
|
|
||||||
{ title: '时间', type: 'date', index: 'updatedAt' },
|
|
||||||
{
|
|
||||||
title: '',
|
|
||||||
buttons: [
|
|
||||||
// { text: '查看', click: (item: any) => `/form/${item.id}` },
|
|
||||||
// { text: '编辑', type: 'static', component: FormEditComponent, click: 'reload' },
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
constructor(private http: _HttpClient, private modal: ModalHelper) { }
|
|
||||||
|
|
||||||
ngOnInit(): void { }
|
|
||||||
|
|
||||||
add(): void {
|
|
||||||
// this.modal
|
|
||||||
// .createStatic(FormEditComponent, { i: { id: 0 } })
|
|
||||||
// .subscribe(() => this.st.reload());
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,6 +1,45 @@
|
|||||||
<!-- 页头 -->
|
<!-- 页头 -->
|
||||||
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
|
<page-header-wrapper [title]="'司机报表'"></page-header-wrapper>
|
||||||
<nz-card>
|
<nz-card>
|
||||||
<sf mode="search" [schema]="searchSchema" (formSubmit)="st.reset($event)" (formReset)="st.reset($event)"></sf>
|
<!-- 搜索表单 -->
|
||||||
<st #st [data]="url" [columns]="columns"></st>
|
<div nz-row nzGutter="8">
|
||||||
|
<!-- 查询字段大于3个时，根据展开状态调整布局 -->
|
||||||
|
<ng-container>
|
||||||
|
<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" [disabled]="!sf.valid" [nzLoading]="false" (click)="search()">查询</button>
|
||||||
|
<button nz-button (click)="resetSF()">重置</button>
|
||||||
|
<!-- <button nz-button (click)="export()">导出</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>
|
||||||
|
<nz-card nzTitle="司机报表" [nzExtra]="extraTemplate">
|
||||||
|
<ng-template #extraTemplate>
|
||||||
|
<div class="chooseBox">
|
||||||
|
<div class="timeBox">
|
||||||
|
<nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
|
||||||
|
<label nz-radio-button nzValue="year">年</label>
|
||||||
|
<label nz-radio-button nzValue="month">月</label>
|
||||||
|
<label nz-radio-button nzValue="date">日</label>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
<st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listOperationalReportPage"
|
||||||
|
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
|
||||||
|
[scroll]="{ x: '1200px' }" [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
|
||||||
|
[page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="false"></st>
|
||||||
|
</nz-card>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
.chooseBox{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.timeBox{
|
||||||
|
display: flex;
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
}
|
||||||
|
.dateBox{
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
}
|
||||||
@ -1,45 +1,154 @@
|
|||||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||||
import { STColumn, STComponent } from '@delon/abc/st';
|
import { STColumn, STComponent } from '@delon/abc/st';
|
||||||
import { SFSchema } from '@delon/form';
|
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
|
||||||
import { ModalHelper, _HttpClient } from '@delon/theme';
|
import { DatePipe, _HttpClient } from '@delon/theme';
|
||||||
|
import { differenceInCalendarDays } from 'date-fns';
|
||||||
|
import { DataService } from '../../../services/data.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-datatable-driver',
|
selector: 'app-datatable-driver',
|
||||||
templateUrl: './driver.component.html',
|
templateUrl: './driver.component.html',
|
||||||
|
styleUrls: ['./driver.component.less'],
|
||||||
|
providers: [DatePipe]
|
||||||
})
|
})
|
||||||
export class DatatableDriverComponent implements OnInit {
|
export class DatatableDriverComponent implements OnInit {
|
||||||
url = `/user`;
|
@ViewChild('st', { static: false }) st!: STComponent;
|
||||||
searchSchema: SFSchema = {
|
@ViewChild('sf', { static: false }) sf!: SFComponent;
|
||||||
properties: {
|
_$expand = false;
|
||||||
no: {
|
type = 1;
|
||||||
type: 'string',
|
mode = 'year';
|
||||||
title: '编号'
|
date: any = null;
|
||||||
}
|
defineDate = [];
|
||||||
}
|
time: any = ['2022-01-01 00:00:00']
|
||||||
};
|
dateFormat = 'yyyy-MM-dd';
|
||||||
@ViewChild('st') private readonly st!: STComponent;
|
today = new Date();
|
||||||
|
ui: SFUISchema = {};
|
||||||
|
schema: SFSchema = {};
|
||||||
|
|
||||||
columns: STColumn[] = [
|
columns: STColumn[] = [
|
||||||
{ title: '编号', index: 'no' },
|
{ title: '司机姓名', index: 'networkTransporterName', className: 'text-center' },
|
||||||
{ title: '调用次数', type: 'number', index: 'callNo' },
|
{ title: '手机号', index: 'zsl', className: 'text-center' },
|
||||||
{ title: '头像', type: 'img', width: '50px', index: 'avatar' },
|
{ title: '注册时间', index: 'yingsje', className: 'text-center' },
|
||||||
{ title: '时间', type: 'date', index: 'updatedAt' },
|
{ title: '司机状态', index: 'cys', className: 'text-center' },
|
||||||
{
|
{ title: '运单数', index: 'yingfyf', className: 'text-center' },
|
||||||
title: '',
|
{ title: '待接单运单', index: 'yl', className: 'text-center' },
|
||||||
buttons: [
|
{ title: '已完成运单', index: 'djd', className: 'text-center' },
|
||||||
// { text: '查看', click: (item: any) => `/form/${item.id}` },
|
{ title: '运费金额', index: 'ysz', className: 'text-center' },
|
||||||
// { text: '编辑', type: 'static', component: FormEditComponent, click: 'reload' },
|
{ title: '已收运费金额', index: 'yswc', className: 'text-center' },
|
||||||
]
|
{ title: '待收运费金额', index: 'yisje', className: 'text-center' }
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
/**
|
||||||
constructor(private http: _HttpClient, private modal: ModalHelper) { }
|
* 查询参数
|
||||||
|
*/
|
||||||
ngOnInit(): void { }
|
get reqParams() {
|
||||||
|
if(this.mode === 'year') {
|
||||||
add(): void {
|
this.type = 1
|
||||||
// this.modal
|
} else if(this.mode === 'month') {
|
||||||
// .createStatic(FormEditComponent, { i: { id: 0 } })
|
this.type = 2
|
||||||
// .subscribe(() => this.st.reload());
|
} 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.initSF();
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 初始化查询表单
|
||||||
|
*/
|
||||||
|
initSF() {
|
||||||
|
this.schema = {
|
||||||
|
properties: {
|
||||||
|
_$expand: { type: 'boolean', ui: { hidden: true } },
|
||||||
|
billCode: {
|
||||||
|
type: 'string',
|
||||||
|
title: '司机姓名',
|
||||||
|
ui: {
|
||||||
|
placeholder: '请输入',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resourceCode: {
|
||||||
|
type: 'string',
|
||||||
|
title: '手机号',
|
||||||
|
ui: {
|
||||||
|
placeholder: '请选择',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
loadingPlace: {
|
||||||
|
type: 'string',
|
||||||
|
title: '司机状态',
|
||||||
|
ui: {
|
||||||
|
placeholder: '请选择',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
createTime: {
|
||||||
|
title: '注册时间',
|
||||||
|
type: 'string',
|
||||||
|
ui: {
|
||||||
|
widget: 'sl-from-to', type: 'date', format: 'yyyy-MM-dd', visibleIf: {
|
||||||
|
_$expand: (value: boolean) => value,
|
||||||
|
},
|
||||||
|
} as SFDateWidgetSchema,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: 'object'
|
||||||
|
};
|
||||||
|
this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
|
||||||
|
}
|
||||||
|
changeData(){
|
||||||
|
if(this.mode === 'year') {
|
||||||
|
this.dateFormat = 'yyyy'
|
||||||
|
} else if(this.mode === 'month') {
|
||||||
|
this.dateFormat = 'yyyy-MM'
|
||||||
|
} else {
|
||||||
|
this.dateFormat = 'yyyy-MM-dd'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onChange(result: any) {
|
||||||
|
if(this.mode === 'year') {
|
||||||
|
this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
|
||||||
|
} else if(this.mode === 'month') {
|
||||||
|
this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
|
||||||
|
} else if(this.mode === 'date') {
|
||||||
|
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.st.reload({ ...this.reqParams });
|
||||||
|
}
|
||||||
|
disabledDate = (current: Date): boolean =>
|
||||||
|
// Can not select days before today and today
|
||||||
|
differenceInCalendarDays(current, this.today) > 0;
|
||||||
|
|
||||||
|
export() {
|
||||||
|
// this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {});
|
||||||
|
}
|
||||||
|
search() {
|
||||||
|
this.st?.load(1)
|
||||||
|
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 伸缩查询条件
|
||||||
|
*/
|
||||||
|
expandToggle() {
|
||||||
|
this._$expand = !this._$expand;
|
||||||
|
this.sf?.setValue('/_$expand', this._$expand);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置表单
|
||||||
|
*/
|
||||||
|
resetSF() {
|
||||||
|
this.sf.reset();
|
||||||
|
this._$expand = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,45 @@
|
|||||||
<!-- 页头 -->
|
<!-- 页头 -->
|
||||||
<page-header-wrapper [title]="'运营报表'"></page-header-wrapper>
|
<page-header-wrapper [title]="'货主报表'"></page-header-wrapper>
|
||||||
<nz-card>
|
<nz-card>
|
||||||
<st #st [data]="url" [columns]="columns"></st>
|
<!-- 搜索表单 -->
|
||||||
|
<div nz-row nzGutter="8">
|
||||||
|
<!-- 查询字段大于3个时，根据展开状态调整布局 -->
|
||||||
|
<ng-container>
|
||||||
|
<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" [disabled]="!sf.valid" [nzLoading]="false" (click)="search()">查询</button>
|
||||||
|
<button nz-button (click)="resetSF()">重置</button>
|
||||||
|
<!-- <button nz-button (click)="export()">导出</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>
|
||||||
|
<nz-card nzTitle="货主报表" [nzExtra]="extraTemplate">
|
||||||
|
<ng-template #extraTemplate>
|
||||||
|
<div class="chooseBox">
|
||||||
|
<div class="timeBox">
|
||||||
|
<nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
|
||||||
|
<label nz-radio-button nzValue="year">年</label>
|
||||||
|
<label nz-radio-button nzValue="month">月</label>
|
||||||
|
<label nz-radio-button nzValue="date">日</label>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
<st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listOperationalReportPage"
|
||||||
|
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
|
||||||
|
[scroll]="{ x: '1200px' }" [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
|
||||||
|
[page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="false"></st>
|
||||||
|
</nz-card>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
.chooseBox{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.timeBox{
|
||||||
|
display: flex;
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
}
|
||||||
|
.dateBox{
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
}
|
||||||
@ -1,45 +1,161 @@
|
|||||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||||
import { STColumn, STComponent } from '@delon/abc/st';
|
import { STColumn, STComponent } from '@delon/abc/st';
|
||||||
import { SFSchema } from '@delon/form';
|
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
|
||||||
import { ModalHelper, _HttpClient } from '@delon/theme';
|
import { DatePipe, _HttpClient } from '@delon/theme';
|
||||||
|
import { differenceInCalendarDays } from 'date-fns';
|
||||||
|
import { DataService } from '../../../services/data.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-datatable-owner',
|
selector: 'app-datatable-owner',
|
||||||
templateUrl: './owner.component.html',
|
templateUrl: './owner.component.html',
|
||||||
|
styleUrls: ['./owner.component.less'],
|
||||||
|
providers: [DatePipe]
|
||||||
})
|
})
|
||||||
export class DatatableOwnerComponent implements OnInit {
|
export class DatatableOwnerComponent implements OnInit {
|
||||||
url = `/user`;
|
@ViewChild('st', { static: false }) st!: STComponent;
|
||||||
searchSchema: SFSchema = {
|
@ViewChild('sf', { static: false }) sf!: SFComponent;
|
||||||
properties: {
|
_$expand = false;
|
||||||
no: {
|
type = 1;
|
||||||
type: 'string',
|
mode = 'year';
|
||||||
title: '编号'
|
date: any = null;
|
||||||
}
|
defineDate = [];
|
||||||
}
|
time: any = ['2022-01-01 00:00:00']
|
||||||
};
|
dateFormat = 'yyyy-MM-dd';
|
||||||
@ViewChild('st') private readonly st!: STComponent;
|
today = new Date();
|
||||||
|
ui: SFUISchema = {};
|
||||||
|
schema: SFSchema = {};
|
||||||
|
|
||||||
columns: STColumn[] = [
|
columns: STColumn[] = [
|
||||||
{ title: '编号', index: 'no' },
|
{ title: '货主名称', index: 'networkTransporterName', className: 'text-center' },
|
||||||
{ title: '调用次数', type: 'number', index: 'callNo' },
|
{ title: '注册时间', index: 'zsl', className: 'text-center' },
|
||||||
{ title: '头像', type: 'img', width: '50px', index: 'avatar' },
|
{ title: '客户类型', index: 'yingsje', className: 'text-center' },
|
||||||
{ title: '时间', type: 'date', index: 'updatedAt' },
|
{ title: '业务员', index: 'cys', className: 'text-center' },
|
||||||
{
|
{ title: '合伙人', index: 'yingfyf', className: 'text-center' },
|
||||||
title: '',
|
{ title: '客户状态', index: 'yl', className: 'text-center' },
|
||||||
buttons: [
|
{ title: '订单数', index: 'djd', className: 'text-center' },
|
||||||
// { text: '查看', click: (item: any) => `/form/${item.id}` },
|
{ title: '订单金额', index: 'ysz', className: 'text-center' },
|
||||||
// { text: '编辑', type: 'static', component: FormEditComponent, click: 'reload' },
|
{ title: '应收订单数', index: 'yswc', className: 'text-center' },
|
||||||
]
|
{ title: '应收金额', index: 'yisje', className: 'text-center' },
|
||||||
}
|
{ title: '待开票订单数', index: 'yifyf', className: 'text-center' },
|
||||||
|
{ title: '待开票金额', index: 'yifyf', className: 'text-center' },
|
||||||
|
{ title: '已收金额', render: 'yifyf', className: 'text-center' },
|
||||||
|
{ title: '附加费金额', index: 'yifyf', className: 'text-center' },
|
||||||
|
{ title: '已收附加费', index: 'yifyf', className: 'text-center' },
|
||||||
|
{ title: '附加费率', index: 'yifyf', className: 'text-center' },
|
||||||
|
{ title: '已开票金额', index: 'yifyf', className: 'text-center' }
|
||||||
];
|
];
|
||||||
|
/**
|
||||||
constructor(private http: _HttpClient, private modal: ModalHelper) { }
|
* 查询参数
|
||||||
|
*/
|
||||||
ngOnInit(): void { }
|
get reqParams() {
|
||||||
|
if(this.mode === 'year') {
|
||||||
add(): void {
|
this.type = 1
|
||||||
// this.modal
|
} else if(this.mode === 'month') {
|
||||||
// .createStatic(FormEditComponent, { i: { id: 0 } })
|
this.type = 2
|
||||||
// .subscribe(() => this.st.reload());
|
} 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.initSF();
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 初始化查询表单
|
||||||
|
*/
|
||||||
|
initSF() {
|
||||||
|
this.schema = {
|
||||||
|
properties: {
|
||||||
|
_$expand: { type: 'boolean', ui: { hidden: true } },
|
||||||
|
billCode: {
|
||||||
|
type: 'string',
|
||||||
|
title: '货主名称',
|
||||||
|
ui: {
|
||||||
|
placeholder: '请输入',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resourceCode: {
|
||||||
|
type: 'string',
|
||||||
|
title: '客户类型',
|
||||||
|
ui: {
|
||||||
|
placeholder: '请选择',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
loadingPlace: {
|
||||||
|
type: 'string',
|
||||||
|
title: '客户状态',
|
||||||
|
ui: {
|
||||||
|
placeholder: '请选择',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
createTime: {
|
||||||
|
title: '注册时间',
|
||||||
|
type: 'string',
|
||||||
|
ui: {
|
||||||
|
widget: 'sl-from-to', type: 'date', format: 'yyyy-MM-dd', visibleIf: {
|
||||||
|
_$expand: (value: boolean) => value,
|
||||||
|
},
|
||||||
|
} as SFDateWidgetSchema,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: 'object'
|
||||||
|
};
|
||||||
|
this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
|
||||||
|
}
|
||||||
|
changeData(){
|
||||||
|
if(this.mode === 'year') {
|
||||||
|
this.dateFormat = 'yyyy'
|
||||||
|
} else if(this.mode === 'month') {
|
||||||
|
this.dateFormat = 'yyyy-MM'
|
||||||
|
} else {
|
||||||
|
this.dateFormat = 'yyyy-MM-dd'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onChange(result: any) {
|
||||||
|
if(this.mode === 'year') {
|
||||||
|
this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
|
||||||
|
} else if(this.mode === 'month') {
|
||||||
|
this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
|
||||||
|
} else if(this.mode === 'date') {
|
||||||
|
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.st.reload({ ...this.reqParams });
|
||||||
|
}
|
||||||
|
disabledDate = (current: Date): boolean =>
|
||||||
|
// Can not select days before today and today
|
||||||
|
differenceInCalendarDays(current, this.today) > 0;
|
||||||
|
|
||||||
|
export() {
|
||||||
|
// this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {});
|
||||||
|
}
|
||||||
|
search() {
|
||||||
|
this.st?.load(1)
|
||||||
|
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 伸缩查询条件
|
||||||
|
*/
|
||||||
|
expandToggle() {
|
||||||
|
this._$expand = !this._$expand;
|
||||||
|
this.sf?.setValue('/_$expand', this._$expand);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置表单
|
||||||
|
*/
|
||||||
|
resetSF() {
|
||||||
|
this.sf.reset();
|
||||||
|
this._$expand = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,69 +1 @@
|
|||||||
<!-- 页头 -->
|
<g2-custom delay="100" (render)="render($event)"></g2-custom>
|
||||||
<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]="footer" contentHeight="46">
|
|
||||||
<ng-template #footer>
|
|
||||||
<g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
|
|
||||||
</g2-mini-area>
|
|
||||||
</ng-template>
|
|
||||||
</g2-card>
|
|
||||||
</div>
|
|
||||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
|
||||||
<g2-card [title]="'业绩量总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
|
|
||||||
<ng-template #footer>
|
|
||||||
<g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
|
|
||||||
</g2-mini-area>
|
|
||||||
</ng-template>
|
|
||||||
</g2-card>
|
|
||||||
</div>
|
|
||||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
|
||||||
<g2-card [title]="'司机应付总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
|
|
||||||
<ng-template #footer>
|
|
||||||
<g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
|
|
||||||
</g2-mini-area>
|
|
||||||
</ng-template>
|
|
||||||
</g2-card>
|
|
||||||
</div>
|
|
||||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
|
||||||
<g2-card [title]="'附加费总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
|
|
||||||
<ng-template #footer>
|
|
||||||
<g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
|
|
||||||
</g2-mini-area>
|
|
||||||
</ng-template>
|
|
||||||
</g2-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div nz-row [nzGutter]="16">
|
|
||||||
<div nz-col class="gutter-row" [nzSpan]="12">
|
|
||||||
<nz-card [nzTitle]="'订单类型比例'">
|
|
||||||
<g2-custom delay="100" (render)="render($event)"></g2-custom>
|
|
||||||
</nz-card>
|
|
||||||
</div>
|
|
||||||
<div nz-col class="gutter-row" [nzSpan]="12">
|
|
||||||
<nz-card [nzTitle]="'大区业绩完成情况'">
|
|
||||||
<g2-timeline
|
|
||||||
[data]="chartData"
|
|
||||||
[titleMap]="{ y1: '客流量', y2: '支付笔数' }"
|
|
||||||
[height]="200"
|
|
||||||
mask="MM月DD日"
|
|
||||||
[slider]="false"
|
|
||||||
></g2-timeline>
|
|
||||||
</nz-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div nz-row [nzGutter]="16">
|
|
||||||
<div nz-col class="gutter-row" [nzSpan]="12">
|
|
||||||
<nz-card [nzTitle]="'运单直付比例'">
|
|
||||||
<g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
|
|
||||||
(clickItem)="handleClick($event)" [lineWidth]="10">
|
|
||||||
</g2-pie>
|
|
||||||
</nz-card>
|
|
||||||
</div>
|
|
||||||
<div nz-col class="gutter-row" [nzSpan]="12">
|
|
||||||
<nz-card [nzTitle]="'业绩完成情况'">
|
|
||||||
<g2-bar height="200" [title]="'销售额趋势'" [data]="salesData" (clickItem)="handleClick($event)"></g2-bar>
|
|
||||||
|
|
||||||
</nz-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -1,248 +1,130 @@
|
|||||||
import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
|
import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
|
||||||
import { ModalHelper, _HttpClient } from '@delon/theme';
|
import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
|
||||||
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
|
|
||||||
import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie';
|
|
||||||
import { format } from 'date-fns';
|
|
||||||
import { Chart, registerShape, Util } from '@antv/g2';
|
|
||||||
import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
|
|
||||||
import { DataService } from '../../../services/data.service';
|
import { DataService } from '../../../services/data.service';
|
||||||
|
import DataSet from '@antv/data-set';
|
||||||
|
import { Chart } from '@antv/g2';
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-datatable-curve',
|
selector: 'app-datatable-curve',
|
||||||
templateUrl: './curve.component.html',
|
templateUrl: './curve.component.html',
|
||||||
styleUrls: ['./curve.component.less']
|
styleUrls: ['./curve.component.less']
|
||||||
})
|
})
|
||||||
export class DatatableDataindexComponent implements OnInit {
|
export class OperationtableCurveComponent implements OnInit {
|
||||||
@ViewChild('pie', { static: false }) pie!: G2PieComponent;
|
|
||||||
chartData: G2TimelineData[] = [];
|
|
||||||
visitData = this.genData();
|
|
||||||
salesData = this.genData();
|
|
||||||
salesPieData: G2PieData[] = [];
|
|
||||||
total = '';
|
|
||||||
|
|
||||||
constructor(private service: DataService, private ngZone: NgZone) {
|
constructor(private service: DataService, private ngZone: NgZone) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.refreshPie();
|
|
||||||
this.initLineData()
|
|
||||||
}
|
|
||||||
initLineData(){
|
|
||||||
for (let i = 0; i < 20; i += 1) {
|
|
||||||
this.chartData.push({
|
|
||||||
time: new Date().getTime() + 1000 * 60 * 60 * 24 * i,
|
|
||||||
y1: Math.floor(Math.random() * 100) + 1000,
|
|
||||||
y2: Math.floor(Math.random() * 100) + 10,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
private genData(): G2MiniAreaData[] {
|
|
||||||
const beginDay = new Date().getTime();
|
|
||||||
const res: G2MiniAreaData[] = [];
|
|
||||||
for (let i = 0; i < 20; i += 1) {
|
|
||||||
res.push({
|
|
||||||
x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
|
|
||||||
y: Math.floor(Math.random() * 100) + 10,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return res;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
refresh(): void {
|
|
||||||
this.visitData = this.genData();
|
|
||||||
}
|
|
||||||
refreshPie(): void {
|
|
||||||
const rv = (min: number = 0, max: number = 5000) => Math.floor(Math.random() * (max - min + 1) + min);
|
|
||||||
this.salesPieData = [
|
|
||||||
{
|
|
||||||
x: '家用电器',
|
|
||||||
y: rv(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: '食用酒水',
|
|
||||||
y: rv(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: '个护健康',
|
|
||||||
y: rv(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: '服饰箱包',
|
|
||||||
y: rv(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: '母婴产品',
|
|
||||||
y: rv(),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
if (Math.random() > 0.5) {
|
|
||||||
this.salesPieData.push({
|
|
||||||
x: '其他',
|
|
||||||
y: rv(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.total = `¥ ${this.salesPieData.reduce((pre, now) => now.y + pre, 0).toFixed(2)}`;
|
|
||||||
if (this.pie) {
|
|
||||||
// 等待组件渲染
|
|
||||||
setTimeout(() => {
|
|
||||||
console.log('a')
|
|
||||||
this.pie.changeData()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClick(data: G2MiniAreaClickItem): void {
|
handleClick(data: G2MiniAreaClickItem): void {
|
||||||
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
|
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
|
||||||
}
|
}
|
||||||
format(val: number): string {
|
|
||||||
return `¥ ${val.toFixed(2)}`;
|
|
||||||
}
|
|
||||||
render(el: ElementRef<HTMLDivElement>): void {
|
render(el: ElementRef<HTMLDivElement>): void {
|
||||||
this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
|
this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
|
||||||
}
|
}
|
||||||
private init(el: HTMLElement): void {
|
private init(el: HTMLElement): void {
|
||||||
const data = [
|
const data = [
|
||||||
{ item: '货源单', count: 40, percent: 0.4 },
|
{ name: '订单数', month: '01', count: 150, },
|
||||||
{ item: '合同单', count: 21, percent: 0.21 },
|
{ name: '订单数', month: '02', count: 288 },
|
||||||
{ item: '事例三', count: 17, percent: 0.17 },
|
{ name: '订单数', month: '03', count: 393 },
|
||||||
{ item: '事例四', count: 13, percent: 0.13 },
|
{ name: '订单数', month: '04', count: 814 },
|
||||||
{ item: '事例五', count: 9, percent: 0.09 },
|
{ name: '订单数', month: '05', count: 47 },
|
||||||
|
{ name: '承运数', month: '05', count: 124 },
|
||||||
|
{ name: '订单数', month: '06', count: 203 },
|
||||||
|
{ name: '承运数', month: '06', count: 213 },
|
||||||
|
{ name: '订单数', month: '07', count: 24 },
|
||||||
|
{ name: '订单数', month: '08', count: 356 },
|
||||||
|
{ name: '承运数', month: '09', count: 124 },
|
||||||
|
{ name: '承运数', month: '10', count: 232 },
|
||||||
|
{ name: '承运数', month: '11', count: 345 },
|
||||||
|
{ name: '承运数', month: '12', count: 997 }
|
||||||
];
|
];
|
||||||
|
const dataPillar = [
|
||||||
|
{ name: '应收金额(元)', month: '01', price: 18.9, },
|
||||||
|
{ name: '应收金额(元)', month: '02', price: 28.8 },
|
||||||
|
{ name: '应收金额(元)', month: '03', price: 39.3 },
|
||||||
|
{ name: '应收金额(元)', month: '04', price: 81.4 },
|
||||||
|
{ name: '应收金额(元)', month: '05', price: 47 },
|
||||||
|
{ name: '应付金额(元)', month: '05', price: 12.4 },
|
||||||
|
{ name: '应收金额(元)', month: '06', price: 20.3 },
|
||||||
|
{ name: '应付金额(元)', month: '06', price: 20.3 },
|
||||||
|
{ name: '应收金额(元)', month: '07', price: 24 },
|
||||||
|
{ name: '应收金额(元)', month: '08', price: 35.6 },
|
||||||
|
{ name: '应付金额(元)', month: '09', price: 12.4 },
|
||||||
|
{ name: '应付金额(元)', month: '10', price: 23.2 },
|
||||||
|
{ name: '应付金额(元)', month: '11', price: 34.5 },
|
||||||
|
{ name: '应付金额(元)', month: '12', price: 99.7 }
|
||||||
|
];
|
||||||
|
const ds = new DataSet();
|
||||||
|
const dv = ds.createView().source(data);
|
||||||
|
dv.transform({
|
||||||
|
type: 'map',
|
||||||
|
callback: row => {
|
||||||
|
row.year = parseInt(row.year, 10);
|
||||||
|
return row;
|
||||||
|
}
|
||||||
|
}).transform({
|
||||||
|
type: 'regression',
|
||||||
|
method: 'polynomial',
|
||||||
|
fields: ['year', 'value'],
|
||||||
|
bandwidth: 0.1,
|
||||||
|
as: ['Year', 'Value']
|
||||||
|
});
|
||||||
|
|
||||||
const chart = new Chart({
|
const chart = new Chart({
|
||||||
container: el,
|
container: el,
|
||||||
autoFit: true,
|
autoFit: true,
|
||||||
height: 400,
|
height: 500,
|
||||||
});
|
padding: [20, 40],
|
||||||
// 新建一个 view 用来单独渲染Annotation
|
|
||||||
const innerView = chart.createView();
|
|
||||||
chart.coordinate('theta', {
|
|
||||||
radius: 0.6,
|
|
||||||
innerRadius: 0.7,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
chart.data(data);
|
const view1 = chart.createView();
|
||||||
|
view1.data(dataPillar);
|
||||||
chart.scale('percent', {
|
view1.scale('price', {
|
||||||
formatter: val => {
|
nice: true,
|
||||||
val = val * 100 + '%';
|
});
|
||||||
return val;
|
view1.tooltip({
|
||||||
},
|
showMarkers: false,
|
||||||
|
shared: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
chart.tooltip(false);
|
view1
|
||||||
|
|
||||||
// 声明需要进行自定义图例字段： 'item'
|
|
||||||
chart.legend('item', {
|
|
||||||
position: 'right', // 配置图例显示位置
|
|
||||||
custom: true, // 关键字段，告诉 G2，要使用自定义的图例
|
|
||||||
items: data.map((obj, index) => {
|
|
||||||
return {
|
|
||||||
name: obj.item, // 对应 itemName
|
|
||||||
value: obj.percent, // 对应 itemValue
|
|
||||||
marker: {
|
|
||||||
symbol: 'square', // marker 的形状
|
|
||||||
style: {
|
|
||||||
r: 5, // marker 图形半径
|
|
||||||
fill: chart.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
|
|
||||||
},
|
|
||||||
}, // marker 配置
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
itemValue: {
|
|
||||||
style: {
|
|
||||||
fill: '#999',
|
|
||||||
}, // 配置 itemValue 样式
|
|
||||||
formatter: (val: any) => `${val * 100}%` // 格式化 itemValue 内容
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
chart
|
|
||||||
.interval()
|
.interval()
|
||||||
.adjust('stack')
|
.position('month*price')
|
||||||
.position('percent')
|
.color('name')
|
||||||
.color('item')
|
.adjust([
|
||||||
.style({
|
{
|
||||||
fillOpacity: 1,
|
type: 'dodge',
|
||||||
stroke: 'white',
|
marginRatio: 0,
|
||||||
lineWidth: 8,
|
|
||||||
})
|
|
||||||
.state({
|
|
||||||
active: {
|
|
||||||
style: element => {
|
|
||||||
const shape = element.shape;
|
|
||||||
return {
|
|
||||||
lineWidth: 1,
|
|
||||||
stroke: 'white',
|
|
||||||
strokeOpacity: shape.attr('fillOpacity'),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
]);
|
||||||
|
|
||||||
// 移除图例点击过滤交互
|
const view2 = chart.createView();
|
||||||
chart.removeInteraction('legend-filter');
|
// view2.axis('count', {
|
||||||
chart.interaction('element-active');
|
// label: {
|
||||||
|
// formatter: (val) => {
|
||||||
|
// return val + ' °C';
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
view2.data(data);
|
||||||
|
view2
|
||||||
|
.line()
|
||||||
|
.position('month*count')
|
||||||
|
.color('name')
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// chart.interaction('active-region');
|
||||||
chart.render();
|
chart.render();
|
||||||
|
|
||||||
// 监听 element 上状态的变化来动态更新 Annotation 信息
|
|
||||||
chart.on('element:statechange', (ev: any) => {
|
|
||||||
const { state, stateStatus, element } = ev.gEvent.originalEvent;
|
|
||||||
|
|
||||||
// 本示例只需要监听 active 的状态变化
|
|
||||||
if (state === 'active') {
|
|
||||||
const data = element.getData();
|
|
||||||
if (stateStatus) {
|
|
||||||
// 更新 Annotation
|
|
||||||
updateAnnotation(data);
|
|
||||||
} else {
|
|
||||||
// 隐藏 Annotation
|
|
||||||
clearAnnotation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 绘制 annotation
|
|
||||||
let lastItem: any;
|
|
||||||
function updateAnnotation(data: any) {
|
|
||||||
if (data.item !== lastItem) {
|
|
||||||
innerView.annotation().clear(true);
|
|
||||||
innerView
|
|
||||||
.annotation()
|
|
||||||
.text({
|
|
||||||
position: ['50%', '50%'],
|
|
||||||
content: data.item,
|
|
||||||
style: {
|
|
||||||
fontSize: 20,
|
|
||||||
fill: '#8c8c8c',
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
offsetY: -20,
|
|
||||||
})
|
|
||||||
.text({
|
|
||||||
position: ['50%', '50%'],
|
|
||||||
content: data.count,
|
|
||||||
style: {
|
|
||||||
fontSize: 28,
|
|
||||||
fill: '#8c8c8c',
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
offsetX: -10,
|
|
||||||
offsetY: 20,
|
|
||||||
})
|
|
||||||
innerView.render(true);
|
|
||||||
lastItem = data.item;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空 annotation
|
|
||||||
function clearAnnotation() {
|
|
||||||
innerView.annotation().clear(true);
|
|
||||||
innerView.render(true);
|
|
||||||
lastItem = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -40,6 +40,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
<app-datatable-curve></app-datatable-curve>
|
||||||
</nz-card>
|
</nz-card>
|
||||||
<nz-card nzTitle="运单状态分布">
|
<nz-card nzTitle="运单状态分布">
|
||||||
<app-opeationtable-pie></app-opeationtable-pie>
|
<app-opeationtable-pie></app-opeationtable-pie>
|
||||||
|
|||||||
@ -11,7 +11,8 @@ import { differenceInCalendarDays } from 'date-fns';
|
|||||||
providers: [DatePipe]
|
providers: [DatePipe]
|
||||||
|
|
||||||
})
|
})
|
||||||
export class DatatableOperationtableComponent implements OnInit {;
|
export class DatatableOperationtableComponent implements OnInit {
|
||||||
|
@ViewChild('st') private readonly st!: STComponent;
|
||||||
type = 1;
|
type = 1;
|
||||||
mode = 'year';
|
mode = 'year';
|
||||||
date: any = null;
|
date: any = null;
|
||||||
@ -19,7 +20,7 @@ export class DatatableOperationtableComponent implements OnInit {;
|
|||||||
time: any = ['2022-01-01 00:00:00']
|
time: any = ['2022-01-01 00:00:00']
|
||||||
dateFormat = 'yyyy-MM-dd';
|
dateFormat = 'yyyy-MM-dd';
|
||||||
today = new Date();
|
today = new Date();
|
||||||
@ViewChild('st') private readonly st!: STComponent;
|
|
||||||
columns: STColumn[] = [
|
columns: STColumn[] = [
|
||||||
{ title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
|
{ title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
|
||||||
{ title: '订单数', index: 'zsl', className: 'text-center' },
|
{ title: '订单数', index: 'zsl', className: 'text-center' },
|
||||||
|
|||||||
@ -1 +1,3 @@
|
|||||||
<g2-custom delay="100" (render)="render($event)"></g2-custom>
|
<div class="box">
|
||||||
|
<g2-custom delay="100" (render)="render($event)"></g2-custom>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
.box{
|
||||||
|
width: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
@ -1,10 +1,7 @@
|
|||||||
import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
|
import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
|
||||||
import { ModalHelper, _HttpClient } from '@delon/theme';
|
import { G2PieComponent, G2PieData } from '@delon/chart/pie';
|
||||||
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
|
|
||||||
import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie';
|
|
||||||
import { format } from 'date-fns';
|
import { format } from 'date-fns';
|
||||||
import { Chart, registerShape, Util } from '@antv/g2';
|
import { Chart } from '@antv/g2';
|
||||||
import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
|
|
||||||
import { DataService } from '../../../services/data.service';
|
import { DataService } from '../../../services/data.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -14,101 +11,27 @@ import { DataService } from '../../../services/data.service';
|
|||||||
})
|
})
|
||||||
export class OperationtablePieComponent implements OnInit {
|
export class OperationtablePieComponent implements OnInit {
|
||||||
@ViewChild('pie', { static: false }) pie!: G2PieComponent;
|
@ViewChild('pie', { static: false }) pie!: G2PieComponent;
|
||||||
chartData: G2TimelineData[] = [];
|
chartData: any = [];
|
||||||
visitData = this.genData();
|
el: any;
|
||||||
salesData = this.genData();
|
|
||||||
salesPieData: G2PieData[] = [];
|
|
||||||
total = '';
|
|
||||||
|
|
||||||
constructor(private service: DataService, private ngZone: NgZone) {
|
constructor(private service: DataService, private ngZone: NgZone) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.refreshPie();
|
this.initData()
|
||||||
this.initLineData()
|
|
||||||
}
|
}
|
||||||
initLineData() {
|
initData(){
|
||||||
for (let i = 0; i < 20; i += 1) {
|
this.service.request(this.service.$api_operationalReportWaybillStatusDistribution).subscribe(res => {
|
||||||
this.chartData.push({
|
if (res) {
|
||||||
time: new Date().getTime() + 1000 * 60 * 60 * 24 * i,
|
this.chartData = res
|
||||||
y1: Math.floor(Math.random() * 100) + 1000,
|
this.ngZone.runOutsideAngular(() => this.init(this.el));
|
||||||
y2: Math.floor(Math.random() * 100) + 10,
|
}
|
||||||
});
|
})
|
||||||
}
|
|
||||||
}
|
|
||||||
private genData(): G2MiniAreaData[] {
|
|
||||||
const beginDay = new Date().getTime();
|
|
||||||
const res: G2MiniAreaData[] = [];
|
|
||||||
for (let i = 0; i < 20; i += 1) {
|
|
||||||
res.push({
|
|
||||||
x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
|
|
||||||
y: Math.floor(Math.random() * 100) + 10,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return res;
|
|
||||||
}
|
|
||||||
|
|
||||||
refresh(): void {
|
|
||||||
this.visitData = this.genData();
|
|
||||||
}
|
|
||||||
refreshPie(): void {
|
|
||||||
const rv = (min: number = 0, max: number = 5000) => Math.floor(Math.random() * (max - min + 1) + min);
|
|
||||||
this.salesPieData = [
|
|
||||||
{
|
|
||||||
x: '家用电器',
|
|
||||||
y: rv(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: '食用酒水',
|
|
||||||
y: rv(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: '个护健康',
|
|
||||||
y: rv(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: '服饰箱包',
|
|
||||||
y: rv(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: '母婴产品',
|
|
||||||
y: rv(),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
if (Math.random() > 0.5) {
|
|
||||||
this.salesPieData.push({
|
|
||||||
x: '其他',
|
|
||||||
y: rv(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.total = `¥ ${this.salesPieData.reduce((pre, now) => now.y + pre, 0).toFixed(2)}`;
|
|
||||||
if (this.pie) {
|
|
||||||
// 等待组件渲染
|
|
||||||
setTimeout(() => {
|
|
||||||
console.log('a')
|
|
||||||
this.pie.changeData()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClick(data: G2MiniAreaClickItem): void {
|
|
||||||
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
|
|
||||||
}
|
|
||||||
format(val: number): string {
|
|
||||||
return `¥ ${val.toFixed(2)}`;
|
|
||||||
}
|
}
|
||||||
render(el: ElementRef<HTMLDivElement>): void {
|
render(el: ElementRef<HTMLDivElement>): void {
|
||||||
this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
|
this.el = el.nativeElement
|
||||||
}
|
}
|
||||||
private init(el: HTMLElement): void {
|
private init(el: HTMLElement): void {
|
||||||
const data = [
|
|
||||||
{ item: '货源单', count: 40, percent: 0.4 },
|
|
||||||
{ item: '合同单', count: 21, percent: 0.21 },
|
|
||||||
{ item: '事例三', count: 17, percent: 0.17 },
|
|
||||||
{ item: '事例四', count: 13, percent: 0.13 },
|
|
||||||
{ item: '事例五', count: 9, percent: 0.09 },
|
|
||||||
];
|
|
||||||
const chart = new Chart({
|
const chart = new Chart({
|
||||||
container: el,
|
container: el,
|
||||||
autoFit: true,
|
autoFit: true,
|
||||||
@ -121,14 +44,14 @@ export class OperationtablePieComponent implements OnInit {
|
|||||||
innerRadius: 0.7,
|
innerRadius: 0.7,
|
||||||
});
|
});
|
||||||
|
|
||||||
chart.data(data);
|
chart.data(this.chartData);
|
||||||
|
|
||||||
chart.scale('percent', {
|
// chart.scale('percent', {
|
||||||
formatter: val => {
|
// formatter: val => {
|
||||||
val = val * 100 + '%';
|
// val = val * 100 + '%';
|
||||||
return val;
|
// return val;
|
||||||
},
|
// },
|
||||||
});
|
// });
|
||||||
|
|
||||||
chart.tooltip(false);
|
chart.tooltip(false);
|
||||||
|
|
||||||
@ -136,10 +59,11 @@ export class OperationtablePieComponent implements OnInit {
|
|||||||
chart.legend('item', {
|
chart.legend('item', {
|
||||||
position: 'right', // 配置图例显示位置
|
position: 'right', // 配置图例显示位置
|
||||||
custom: true, // 关键字段，告诉 G2，要使用自定义的图例
|
custom: true, // 关键字段，告诉 G2，要使用自定义的图例
|
||||||
items: data.map((obj, index) => {
|
items: this.chartData.map((obj: any, index: any) => {
|
||||||
return {
|
return {
|
||||||
name: obj.item, // 对应 itemName
|
name: obj.item, // 对应 itemName
|
||||||
value: obj.percent, // 对应 itemValue
|
value: obj.percent+ '% ' + obj.count,
|
||||||
|
count: obj.count, // 对应 itemValue
|
||||||
marker: {
|
marker: {
|
||||||
symbol: 'square', // marker 的形状
|
symbol: 'square', // marker 的形状
|
||||||
style: {
|
style: {
|
||||||
@ -153,7 +77,7 @@ export class OperationtablePieComponent implements OnInit {
|
|||||||
style: {
|
style: {
|
||||||
fill: '#999',
|
fill: '#999',
|
||||||
}, // 配置 itemValue 样式
|
}, // 配置 itemValue 样式
|
||||||
formatter: (val: any) => `${val * 100}%` // 格式化 itemValue 内容
|
formatter: (val: any) => `${val}` // 格式化 itemValue 内容
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -184,9 +108,12 @@ export class OperationtablePieComponent implements OnInit {
|
|||||||
chart.removeInteraction('legend-filter');
|
chart.removeInteraction('legend-filter');
|
||||||
chart.interaction('element-active');
|
chart.interaction('element-active');
|
||||||
|
|
||||||
chart.render();
|
chart.render(true);
|
||||||
// 默认选择
|
// 默认选择
|
||||||
interval.elements[0].setState('selected', true);
|
interval.elements[0].setState('selected', true);
|
||||||
|
const ele = interval.elements[0].getData();
|
||||||
|
|
||||||
|
|
||||||
// 监听 element 上状态的变化来动态更新 Annotation 信息
|
// 监听 element 上状态的变化来动态更新 Annotation 信息
|
||||||
chart.on('element:statechange', (ev: any) => {
|
chart.on('element:statechange', (ev: any) => {
|
||||||
const { state, stateStatus, element } = ev.gEvent.originalEvent;
|
const { state, stateStatus, element } = ev.gEvent.originalEvent;
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { RouterModule, Routes } from '@angular/router';
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
import { DatatableCustomtableComponent } from './components/customtable/customtable.component';
|
|
||||||
import { DatatableCustomindexComponent } from './components/customtable/customindex/customindex.component';
|
import { DatatableCustomindexComponent } from './components/customtable/customindex/customindex.component';
|
||||||
import { DatatableOwnerComponent } from './components/customtable/owner/owner.component';
|
import { DatatableOwnerComponent } from './components/customtable/owner/owner.component';
|
||||||
import { DatatableDriverComponent } from './components/customtable/driver/driver.component';
|
import { DatatableDriverComponent } from './components/customtable/driver/driver.component';
|
||||||
@ -10,10 +9,9 @@ import { DatatableDataindexComponent } from './components/dataindex/dataindex.co
|
|||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{ path: 'dataindex', component: DatatableDataindexComponent },
|
{ path: 'dataindex', component: DatatableDataindexComponent },
|
||||||
{ path: 'customtable', component: DatatableCustomtableComponent },
|
{ path: 'customtable/customindex', component: DatatableCustomindexComponent },
|
||||||
{ path: 'customindex', component: DatatableCustomindexComponent },
|
{ path: 'customtable/owner', component: DatatableOwnerComponent },
|
||||||
{ path: 'owner', component: DatatableOwnerComponent },
|
{ path: 'customtable/driver', component: DatatableDriverComponent },
|
||||||
{ path: 'driver', component: DatatableDriverComponent },
|
|
||||||
{ path: 'operationtable', component: DatatableOperationtableComponent },
|
{ path: 'operationtable', component: DatatableOperationtableComponent },
|
||||||
{ path: 'reporting/order', component: DatatableOrderReportingComponent }];
|
{ path: 'reporting/order', component: DatatableOrderReportingComponent }];
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import { NgModule, Type } from '@angular/core';
|
import { NgModule, Type } from '@angular/core';
|
||||||
import { SharedModule, SHARED_G2_MODULES } from '@shared';
|
import { SharedModule, SHARED_G2_MODULES } from '@shared';
|
||||||
import { DatatableRoutingModule } from './datatable-routing.module';
|
import { DatatableRoutingModule } from './datatable-routing.module';
|
||||||
import { DatatableCustomtableComponent } from './components/customtable/customtable.component';
|
|
||||||
import { DatatableCustomindexComponent } from './components/customtable/customindex/customindex.component';
|
import { DatatableCustomindexComponent } from './components/customtable/customindex/customindex.component';
|
||||||
import { DatatableOwnerComponent } from './components/customtable/owner/owner.component';
|
import { DatatableOwnerComponent } from './components/customtable/owner/owner.component';
|
||||||
import { DatatableDriverComponent } from './components/customtable/driver/driver.component';
|
import { DatatableDriverComponent } from './components/customtable/driver/driver.component';
|
||||||
@ -9,16 +8,17 @@ import { DatatableOperationtableComponent } from './components/operationtable/op
|
|||||||
import { OperationtablePieComponent } from './components/operationtable/pie/pie.component';
|
import { OperationtablePieComponent } from './components/operationtable/pie/pie.component';
|
||||||
import { DatatableOrderReportingComponent } from './reporting/components/order-reporting/order-reporting.component';
|
import { DatatableOrderReportingComponent } from './reporting/components/order-reporting/order-reporting.component';
|
||||||
import { DatatableDataindexComponent } from './components/dataindex/dataindex.component';
|
import { DatatableDataindexComponent } from './components/dataindex/dataindex.component';
|
||||||
|
import { OperationtableCurveComponent } from './components/operationtable/curve/curve.component';
|
||||||
|
|
||||||
const COMPONENTS: Type<void>[] = [
|
const COMPONENTS: Type<void>[] = [
|
||||||
DatatableDataindexComponent,
|
DatatableDataindexComponent,
|
||||||
DatatableCustomtableComponent,
|
|
||||||
DatatableCustomindexComponent,
|
DatatableCustomindexComponent,
|
||||||
DatatableOwnerComponent,
|
DatatableOwnerComponent,
|
||||||
DatatableDriverComponent,
|
DatatableDriverComponent,
|
||||||
DatatableOperationtableComponent,
|
DatatableOperationtableComponent,
|
||||||
OperationtablePieComponent,
|
OperationtablePieComponent,
|
||||||
DatatableOrderReportingComponent
|
DatatableOrderReportingComponent,
|
||||||
|
OperationtableCurveComponent
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|||||||
@ -23,6 +23,8 @@ export class DataService extends BaseService {
|
|||||||
|
|
||||||
// 查询运营报表
|
// 查询运营报表
|
||||||
$api_listOperationalReportPage = `/api/sdc/report/listOperationalReportPage`;
|
$api_listOperationalReportPage = `/api/sdc/report/listOperationalReportPage`;
|
||||||
|
// 运营报表运单状态分布
|
||||||
|
$api_operationalReportWaybillStatusDistribution = `/api/sdc/report/operationalReportWaybillStatusDistribution`;
|
||||||
|
|
||||||
constructor(public injector: Injector) {
|
constructor(public injector: Injector) {
|
||||||
super(injector);
|
super(injector);
|
||||||
|
|||||||
Reference in New Issue
Block a user