Compare commits
13 Commits
master
...
login-page
| Author | SHA1 | Date | |
|---|---|---|---|
| e13b7669f2 | |||
| b8fd0cd28f | |||
| 6ed11186d4 | |||
| f8c82f6f13 | |||
| 889023bbb1 | |||
| be97d820bd | |||
| 9e306ab949 | |||
| aed0d157f1 | |||
| b7ab261549 | |||
| 3a822d7d33 | |||
| f8cb159203 | |||
| e33c956306 | |||
| 9ae46c9957 |
1
.gitignore
vendored
1
.gitignore
vendored
@ -25,7 +25,6 @@ scripts/var.less
|
||||
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
.vscode
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
#!/bin/sh
|
||||
if [ -z "$husky_skip_init" ]; then
|
||||
debug () {
|
||||
[ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
|
||||
}
|
||||
|
||||
readonly hook_name="$(basename "$0")"
|
||||
debug "starting $hook_name..."
|
||||
|
||||
if [ "$HUSKY" = "0" ]; then
|
||||
debug "HUSKY env variable is set to 0, skipping hook"
|
||||
exit 0
|
||||
fi
|
||||
|
||||
if [ -f ~/.huskyrc ]; then
|
||||
debug "sourcing ~/.huskyrc"
|
||||
. ~/.huskyrc
|
||||
fi
|
||||
|
||||
export readonly husky_skip_init=1
|
||||
sh -e "$0" "$@"
|
||||
exitCode="$?"
|
||||
|
||||
if [ $exitCode != 0 ]; then
|
||||
echo "husky - $hook_name hook exited with code $exitCode (error)"
|
||||
exit $exitCode
|
||||
fi
|
||||
|
||||
exit 0
|
||||
fi
|
||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@ -1,3 +0,0 @@
|
||||
{
|
||||
"compile-hero.disable-compile-files-on-did-save-code": true
|
||||
}
|
||||
14
angular.json
14
angular.json
@ -47,7 +47,7 @@
|
||||
"inject": false
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
"scripts": [
|
||||
"node_modules/quill/dist/quill.min.js",
|
||||
"node_modules/perfect-scrollbar/dist/perfect-scrollbar.js",
|
||||
@ -83,18 +83,6 @@
|
||||
"maximumError": "10mb"
|
||||
}]
|
||||
},
|
||||
"test": {
|
||||
"fileReplacements": [{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/eascs/environment.test.ts"
|
||||
}],
|
||||
"outputHashing": "all",
|
||||
"budgets": [{
|
||||
"type": "initial",
|
||||
"maximumWarning": "4mb",
|
||||
"maximumError": "10mb"
|
||||
}]
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
|
||||
41
package-lock.json
generated
41
package-lock.json
generated
@ -2733,46 +2733,11 @@
|
||||
"integrity": "sha1-ayxRCnrXA56Y57jT1lmPQ1nlwIA=",
|
||||
"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": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.nlark.com/@types/d3-path/download/@types/d3-path-2.0.1.tgz",
|
||||
"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": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/@types/d3-shape/download/@types/d3-shape-2.1.3.tgz",
|
||||
@ -2818,12 +2783,6 @@
|
||||
"integrity": "sha512-sPZYQEIF/SOnLAvaz9lTuydniP+afBMtElRTdYkeV1QtEgvtJ7qolCPjly6O32QI8CbEmP5O/fztMXEDWfEcrg==",
|
||||
"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": {
|
||||
"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",
|
||||
|
||||
57
package.json
57
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tms-obc-web",
|
||||
"version": "1.0.0",
|
||||
"version": "0.0.0",
|
||||
"description": "运营后台-WEB",
|
||||
"author": "cipchk <cipchk@qq.com>",
|
||||
"repository": {
|
||||
@ -16,7 +16,6 @@
|
||||
"hmr": "ng s -o --hmr",
|
||||
"build": "npm run ng-high-memory build --",
|
||||
"build:dev": "npm run build -- -c dev",
|
||||
"build:test": "npm run build -- -c test",
|
||||
"analyze": "npm run ng-high-memory build -- --source-map",
|
||||
"analyze:view": "source-map-explorer dist/**/*.js",
|
||||
"lint": "npm run lint:ts && npm run lint:style",
|
||||
@ -76,22 +75,22 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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/eslint-plugin": "~12.3.1",
|
||||
"@angular-eslint/eslint-plugin-template": "~12.3.1",
|
||||
"@angular-eslint/schematics": "~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/parser": "~4.29.2",
|
||||
"eslint": "^7.32.0",
|
||||
@ -100,31 +99,29 @@
|
||||
"eslint-plugin-jsdoc": "~36.0.7",
|
||||
"eslint-plugin-prefer-arrow": "~1.2.3",
|
||||
"eslint-plugin-prettier": "~3.4.1",
|
||||
"husky": "^6.0.0",
|
||||
"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",
|
||||
"protractor": "~7.0.0",
|
||||
"@angular/language-service": "~12.2.0",
|
||||
"source-map-explorer": "^2.5.2",
|
||||
"prettier": "^2.2.1",
|
||||
"stylelint": "^13.13.1",
|
||||
"stylelint-config-prettier": "^8.0.2",
|
||||
"stylelint-config-rational-order": "^0.1.2",
|
||||
"stylelint-config-standard": "^22.0.0",
|
||||
"stylelint-declaration-block-no-ignored-properties": "^2.4.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",
|
||||
"typescript": "~4.3.5"
|
||||
"node-fetch": "^2.6.1",
|
||||
"husky": "^6.0.0",
|
||||
"lint-staged": "^11.1.2",
|
||||
"@types/file-saver": "^2.0.3",
|
||||
"@types/js-base64": "^3.0.0"
|
||||
},
|
||||
"lint-staged": {
|
||||
"(src)/**/*.{html,ts}": [
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-01-18 09:51:21
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-20 14:18:40
|
||||
* @LastEditTime : 2022-03-23 15:21:39
|
||||
* @FilePath : \\tms-obc-web\\proxy.conf.js
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
*/
|
||||
@ -18,16 +18,6 @@ module.exports = {
|
||||
// secure: false, // Ignore invalid SSL certificates
|
||||
// changeOrigin: true
|
||||
// }
|
||||
// '//api': {
|
||||
// target: {
|
||||
// host: 'tms-api.yunduoxing.com',
|
||||
// protocol: 'https:',
|
||||
// port: 443
|
||||
// },
|
||||
// secure: false,
|
||||
// changeOrigin: true,
|
||||
// logLevel: 'debug'
|
||||
// },
|
||||
'//api': {
|
||||
target: {
|
||||
host: 'tms-api-test.eascs.com',
|
||||
|
||||
@ -4,13 +4,10 @@ import { cacheConf } from '@conf/cache.conf';
|
||||
import { sysConf } from '@conf/sys.conf';
|
||||
import { ACLService } from '@delon/acl';
|
||||
import { MenuService, SettingsService, TitleService, _HttpClient } from '@delon/theme';
|
||||
import { AlainConfigService } from '@delon/util';
|
||||
import { environment } from '@env/environment';
|
||||
import { AmapService, EACacheService, EAUserService } from '@shared';
|
||||
import { NzSafeAny } from 'ng-zorro-antd/core/types';
|
||||
import { NzIconService } from 'ng-zorro-antd/icon';
|
||||
import { NzImageService } from 'ng-zorro-antd/image';
|
||||
import { NzUploadFile } from 'ng-zorro-antd/upload';
|
||||
import { Observable, zip } from 'rxjs';
|
||||
import { catchError, map } from 'rxjs/operators';
|
||||
|
||||
@ -34,22 +31,10 @@ export class StartupService {
|
||||
private userSrv: EAUserService,
|
||||
private amapService: AmapService,
|
||||
public cacheSrv: EACacheService,
|
||||
private coreSrv: CoreService,
|
||||
private nzImageService: NzImageService,
|
||||
private alainConfigService: AlainConfigService
|
||||
private coreSrv: CoreService
|
||||
) {
|
||||
iconSrv.addIcon(...ICONS_AUTO, ...ICONS);
|
||||
this.settingService.setLayout('fixSiderbar', true);
|
||||
// 全局修改sf图片预览方式
|
||||
alainConfigService.set('sf', {
|
||||
ui: {
|
||||
preview: (file: NzUploadFile) => {
|
||||
if (file.url) {
|
||||
this.nzImageService.preview([{ src: file.url }]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// TODO: 退出登录时需要清理用户信息
|
||||
|
||||
@ -17,7 +17,7 @@ const alainConfig: AlainConfig = {
|
||||
page: { show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000], toTop: false },
|
||||
modal: { size: 'lg' }
|
||||
},
|
||||
sf: { button: { search: '查询' } },
|
||||
sf: { button: { search: '查询' }, ui: { placeholder: '请输入' } },
|
||||
pageHeader: { homeI18n: 'home', recursiveBreadcrumb: true },
|
||||
auth: { login_url: '/passport/login' },
|
||||
acl: { guard_url: '/exception/403' },
|
||||
@ -27,7 +27,7 @@ const alainConfig: AlainConfig = {
|
||||
'https://gw.alipayobjects.com/os/lib/antv/g2/4.1.4/dist/g2.min.js',
|
||||
'https://gw.alipayobjects.com/os/lib/antv/data-set/0.11.7/dist/data-set.js'
|
||||
]
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
const alainModules = [AlainThemeModule.forRoot(), DelonACLModule.forRoot()];
|
||||
|
||||
126
src/app/layout/passport/a.scss
Normal file
126
src/app/layout/passport/a.scss
Normal file
@ -0,0 +1,126 @@
|
||||
body {
|
||||
background : radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
|
||||
height : 100vh;
|
||||
overflow : hidden;
|
||||
display : flex;
|
||||
font-family : 'Anton', sans-serif;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
}
|
||||
|
||||
$shooting-time: 3000ms;
|
||||
|
||||
.night {
|
||||
position : relative;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
transform : rotateZ(45deg);
|
||||
// animation: sky 200000ms linear infinite;
|
||||
}
|
||||
|
||||
.shooting_star {
|
||||
position : absolute;
|
||||
left : 50%;
|
||||
top : 50%;
|
||||
// width: 100px;
|
||||
height : 2px;
|
||||
background : linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
|
||||
border-radius: 999px;
|
||||
filter : drop-shadow(0 0 6px rgba(105, 155, 255, 1));
|
||||
animation :
|
||||
tail $shooting-time ease-in-out infinite,
|
||||
shooting $shooting-time ease-in-out infinite;
|
||||
|
||||
&::before {
|
||||
content : '';
|
||||
position : absolute;
|
||||
top : calc(50% - 1px);
|
||||
right : 0;
|
||||
// width: 30px;
|
||||
height : 2px;
|
||||
background : linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
|
||||
transform : translateX(50%) rotateZ(45deg);
|
||||
border-radius: 100%;
|
||||
animation : shining $shooting-time ease-in-out infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
// CodePen Error
|
||||
// @extend .shooting_star::before;
|
||||
|
||||
content : '';
|
||||
position : absolute;
|
||||
top : calc(50% - 1px);
|
||||
right : 0;
|
||||
// width: 30px;
|
||||
height : 2px;
|
||||
background : linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
|
||||
transform : translateX(50%) rotateZ(45deg);
|
||||
border-radius: 100%;
|
||||
animation : shining $shooting-time ease-in-out infinite;
|
||||
transform : translateX(50%) rotateZ(-45deg);
|
||||
}
|
||||
|
||||
@for $i from 1 through 20 {
|
||||
&:nth-child(#{$i}) {
|
||||
$delay : random(9999) + 0ms;
|
||||
top : calc(50% - #{random(400) - 200px});
|
||||
left : calc(50% - #{random(300) + 0px});
|
||||
// animation-delay: $delay;
|
||||
// opacity: random(50) / 100 + 0.5;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
// animation-delay: $delay;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tail {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
30% {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shining {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shooting {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(300px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sky {
|
||||
0% {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(45 + 360deg);
|
||||
}
|
||||
}
|
||||
64
src/app/layout/passport/d.scss
Normal file
64
src/app/layout/passport/d.scss
Normal file
@ -0,0 +1,64 @@
|
||||
$n: 20; // 流星數量
|
||||
|
||||
|
||||
$shadow: ();
|
||||
|
||||
|
||||
@for $i from 1 through $n {
|
||||
$v: random(90) + 9; // left
|
||||
$h: random(150) + 10; // top
|
||||
$d: random(70)/10 + 12; // 秒數
|
||||
|
||||
.meteor-#{$i} {
|
||||
position : fixed;
|
||||
top : $h + px;
|
||||
left : $v*1%;
|
||||
width : 130px;
|
||||
height : 1px;
|
||||
transform : rotate(-45deg);
|
||||
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
|
||||
animation : meteor $d+s linear infinite;
|
||||
|
||||
&:before {
|
||||
content : "";
|
||||
position : fixed;
|
||||
width : 4px;
|
||||
height : 5px;
|
||||
border-radius: 50%;
|
||||
margin-top : -2px;
|
||||
background : rgba(#fff, .7);
|
||||
box-shadow : 0 0 15px 3px #fff;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes meteor {
|
||||
0% {
|
||||
opacity : 1;
|
||||
margin-top : -300px;
|
||||
margin-right: -300px;
|
||||
}
|
||||
|
||||
12% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
13% {
|
||||
margin-top : 600px;
|
||||
margin-left : -900px;
|
||||
opacity : 0.6;
|
||||
animation-delay: 2000ms;
|
||||
}
|
||||
|
||||
15% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
100% {
|
||||
margin-top : 700px;
|
||||
margin-left: -900px;
|
||||
opacity : 0;
|
||||
}
|
||||
}
|
||||
325
src/app/layout/passport/particle.ts
Normal file
325
src/app/layout/passport/particle.ts
Normal file
@ -0,0 +1,325 @@
|
||||
export default class Particle {
|
||||
getLimitedRandom = function (min: number, max: number, roundToInteger?: any) {
|
||||
var number = Math.random() * (max - min) + min;
|
||||
if (roundToInteger) {
|
||||
number = Math.round(number);
|
||||
}
|
||||
return number;
|
||||
};
|
||||
|
||||
returnRandomArrayitem = function (array: string | any[]) {
|
||||
return array[Math.floor(Math.random() * array.length)];
|
||||
};
|
||||
|
||||
constructor() {}
|
||||
|
||||
init() {
|
||||
var ParticleNetworkAnimation: any, PNA: any;
|
||||
ParticleNetworkAnimation = PNA = function () {};
|
||||
|
||||
PNA.prototype.init = function (element: any) {
|
||||
console.log(this);
|
||||
this.$el = document.getElementsByClassName(element);
|
||||
|
||||
this.container = element;
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.sizeCanvas();
|
||||
this.container.appendChild(this.canvas);
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
this.particleNetwork = new ParticleNetwork(this);
|
||||
|
||||
this.bindUiActions();
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
PNA.prototype.bindUiActions = function () {
|
||||
(window as any).on('resize', () => {
|
||||
// this.sizeContainer();
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
this.sizeCanvas();
|
||||
this.particleNetwork.createParticles();
|
||||
});
|
||||
};
|
||||
|
||||
PNA.prototype.sizeCanvas = function () {
|
||||
this.canvas.width = this.container.offsetWidth;
|
||||
this.canvas.height = this.container.offsetHeight;
|
||||
};
|
||||
|
||||
console.log(PNA);
|
||||
|
||||
const Particle: any = function (parent: any, x?: any, y?: any) {
|
||||
// this.network = parent;
|
||||
// this.canvas = parent.canvas;
|
||||
// this.ctx = parent.ctx;
|
||||
// this.particleColor = ;
|
||||
// this.radius = ;
|
||||
// this.opacity = 0;
|
||||
// this.x = x || Math.random() * this.canvas.width;
|
||||
// this.y = y || Math.random() * this.canvas.height;
|
||||
// this.velocity = {
|
||||
// x: (Math.random() - 0.5) * parent.options.velocity,
|
||||
// y: (Math.random() - 0.5) * parent.options.velocity
|
||||
// };
|
||||
return {
|
||||
network: parent,
|
||||
canvas: parent.canvas,
|
||||
ctx: parent.ctx,
|
||||
// particleColor: this.returnRandomArrayitem(parent.options.particleColors),
|
||||
// radius: this.getLimitedRandom(1.5, 2.5),
|
||||
opacity: 0,
|
||||
x: x || Math.random() * parent.canvas.width,
|
||||
y: y || Math.random() * parent.canvas.height,
|
||||
velocity: {
|
||||
x: (Math.random() - 0.5) * parent.options.velocity,
|
||||
y: (Math.random() - 0.5) * parent.options.velocity
|
||||
}
|
||||
};
|
||||
};
|
||||
console.log(new Particle(this));
|
||||
|
||||
Particle.prototype.update = function () {
|
||||
if (this.opacity < 1) {
|
||||
this.opacity += 0.01;
|
||||
} else {
|
||||
this.opacity = 1;
|
||||
}
|
||||
// Change dir if outside map
|
||||
if (this.x > this.canvas.width + 100 || this.x < -100) {
|
||||
this.velocity.x = -this.velocity.x;
|
||||
}
|
||||
if (this.y > this.canvas.height + 100 || this.y < -100) {
|
||||
this.velocity.y = -this.velocity.y;
|
||||
}
|
||||
|
||||
// Update position
|
||||
this.x += this.velocity.x;
|
||||
this.y += this.velocity.y;
|
||||
};
|
||||
|
||||
Particle.prototype.draw = function () {
|
||||
// Draw particle
|
||||
this.ctx.beginPath();
|
||||
this.ctx.fillStyle = this.particleColor;
|
||||
this.ctx.globalAlpha = this.opacity;
|
||||
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
|
||||
this.ctx.fill();
|
||||
};
|
||||
|
||||
var ParticleNetwork: any = function (this: any, parent: { canvas: any; ctx: any }) {
|
||||
this.options = {
|
||||
velocity: 1, // the higher the faster
|
||||
density: 15000, // the lower the denser
|
||||
netLineDistance: 200,
|
||||
netLineColor: '#929292',
|
||||
particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
|
||||
};
|
||||
this.canvas = parent.canvas;
|
||||
this.ctx = parent.ctx;
|
||||
|
||||
this.init();
|
||||
};
|
||||
|
||||
ParticleNetwork.prototype.init = function () {
|
||||
// Create particle objects
|
||||
this.createParticles(true);
|
||||
|
||||
// Update canvas
|
||||
this.animationFrame = requestAnimationFrame(this.update.bind(this));
|
||||
|
||||
this.bindUiActions();
|
||||
};
|
||||
|
||||
ParticleNetwork.prototype.createParticles = function (isInitial: any) {
|
||||
// Initialise / reset particles
|
||||
var me = this;
|
||||
this.particles = [];
|
||||
var quantity = (this.canvas.width * this.canvas.height) / this.options.density;
|
||||
|
||||
if (isInitial) {
|
||||
var counter = 0;
|
||||
clearInterval(this.createIntervalId);
|
||||
this.createIntervalId = setInterval(() => {
|
||||
if (counter < quantity - 1) {
|
||||
// Create particle object
|
||||
this.particles.push(new Particle(this));
|
||||
} else {
|
||||
clearInterval(me.createIntervalId);
|
||||
}
|
||||
counter++;
|
||||
}, 50);
|
||||
} else {
|
||||
// Create particle objects
|
||||
for (var i = 0; i < quantity; i++) {
|
||||
this.particles.push(new Particle(this));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ParticleNetwork.prototype.createInteractionParticle = function () {
|
||||
// Add interaction particle
|
||||
this.interactionParticle = new Particle(this);
|
||||
this.interactionParticle.velocity = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
this.particles.push(this.interactionParticle);
|
||||
return this.interactionParticle;
|
||||
};
|
||||
|
||||
ParticleNetwork.prototype.removeInteractionParticle = function () {
|
||||
// Find it
|
||||
var index = this.particles.indexOf(this.interactionParticle);
|
||||
if (index > -1) {
|
||||
// Remove it
|
||||
this.interactionParticle = undefined;
|
||||
this.particles.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
ParticleNetwork.prototype.update = function () {
|
||||
if (this.canvas) {
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
this.ctx.globalAlpha = 1;
|
||||
|
||||
// Draw connections
|
||||
for (var i = 0; i < this.particles.length; i++) {
|
||||
for (var j = this.particles.length - 1; j > i; j--) {
|
||||
var distance,
|
||||
p1 = this.particles[i],
|
||||
p2 = this.particles[j];
|
||||
|
||||
// check very simply if the two points are even a candidate for further measurements
|
||||
distance = Math.min(Math.abs(p1.x - p2.x), Math.abs(p1.y - p2.y));
|
||||
if (distance > this.options.netLineDistance) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// the two points seem close enough, now let's measure precisely
|
||||
distance = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
|
||||
if (distance > this.options.netLineDistance) {
|
||||
continue;
|
||||
}
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.strokeStyle = this.options.netLineColor;
|
||||
this.ctx.globalAlpha = ((this.options.netLineDistance - distance) / this.options.netLineDistance) * p1.opacity * p2.opacity;
|
||||
this.ctx.lineWidth = 0.7;
|
||||
this.ctx.moveTo(p1.x, p1.y);
|
||||
this.ctx.lineTo(p2.x, p2.y);
|
||||
this.ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
// Draw particles
|
||||
for (var i = 0; i < this.particles.length; i++) {
|
||||
this.particles[i].update();
|
||||
this.particles[i].draw();
|
||||
}
|
||||
|
||||
if (this.options.velocity !== 0) {
|
||||
this.animationFrame = requestAnimationFrame(this.update.bind(this));
|
||||
}
|
||||
} else {
|
||||
cancelAnimationFrame(this.animationFrame);
|
||||
}
|
||||
};
|
||||
|
||||
ParticleNetwork.prototype.bindUiActions = function () {
|
||||
// Mouse / touch event handling
|
||||
this.spawnQuantity = 3;
|
||||
this.mouseIsDown = false;
|
||||
this.touchIsMoving = false;
|
||||
|
||||
this.onMouseMove = (e: { offsetX: any; offsetY: any }) => {
|
||||
if (!this.interactionParticle) {
|
||||
this.createInteractionParticle();
|
||||
}
|
||||
this.interactionParticle.x = e.offsetX;
|
||||
this.interactionParticle.y = e.offsetY;
|
||||
};
|
||||
|
||||
this.onTouchMove = (e: { preventDefault: () => void; changedTouches: { clientX: any; clientY: any }[] }) => {
|
||||
e.preventDefault();
|
||||
this.touchIsMoving = true;
|
||||
if (!this.interactionParticle) {
|
||||
this.createInteractionParticle();
|
||||
}
|
||||
this.interactionParticle.x = e.changedTouches[0].clientX;
|
||||
this.interactionParticle.y = e.changedTouches[0].clientY;
|
||||
};
|
||||
|
||||
this.onMouseDown = () => {
|
||||
this.mouseIsDown = true;
|
||||
var counter = 0;
|
||||
var quantity = this.spawnQuantity;
|
||||
var intervalId = setInterval(() => {
|
||||
if (this.mouseIsDown) {
|
||||
if (counter === 1) {
|
||||
quantity = 1;
|
||||
}
|
||||
for (var i = 0; i < quantity; i++) {
|
||||
if (this.interactionParticle) {
|
||||
this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
clearInterval(intervalId);
|
||||
}
|
||||
counter++;
|
||||
}, 50);
|
||||
};
|
||||
|
||||
this.onTouchStart = (e: { preventDefault: () => void; changedTouches: { clientX: any; clientY: any }[] }) => {
|
||||
e.preventDefault();
|
||||
setTimeout(() => {
|
||||
if (!this.touchIsMoving) {
|
||||
for (var i = 0; i < this.spawnQuantity; i++) {
|
||||
this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
|
||||
}
|
||||
}
|
||||
}, 200);
|
||||
};
|
||||
|
||||
this.onMouseUp = () => {
|
||||
this.mouseIsDown = false;
|
||||
};
|
||||
|
||||
this.onMouseOut = function () {
|
||||
this.removeInteractionParticle();
|
||||
};
|
||||
|
||||
this.onTouchEnd = function (e: { preventDefault: () => void }) {
|
||||
e.preventDefault();
|
||||
this.touchIsMoving = false;
|
||||
this.removeInteractionParticle();
|
||||
};
|
||||
|
||||
// this.canvas.addEventListener('mousemove', this.onMouseMove);
|
||||
// this.canvas.addEventListener('touchmove', this.onTouchMove);
|
||||
// this.canvas.addEventListener('mousedown', this.onMouseDown);
|
||||
// this.canvas.addEventListener('touchstart', this.onTouchStart);
|
||||
// this.canvas.addEventListener('mouseup', this.onMouseUp);
|
||||
// this.canvas.addEventListener('mouseout', this.onMouseOut);
|
||||
// this.canvas.addEventListener('touchend', this.onTouchEnd);
|
||||
};
|
||||
|
||||
ParticleNetwork.prototype.unbindUiActions = function () {
|
||||
if (this.canvas) {
|
||||
// this.canvas.removeEventListener('mousemove', this.onMouseMove);
|
||||
// this.canvas.removeEventListener('touchmove', this.onTouchMove);
|
||||
// this.canvas.removeEventListener('mousedown', this.onMouseDown);
|
||||
// this.canvas.removeEventListener('touchstart', this.onTouchStart);
|
||||
// this.canvas.removeEventListener('mouseup', this.onMouseUp);
|
||||
// this.canvas.removeEventListener('mouseout', this.onMouseOut);
|
||||
// this.canvas.removeEventListener('touchend', this.onTouchEnd);
|
||||
}
|
||||
};
|
||||
|
||||
const pna = new PNA();
|
||||
console.log(pna);
|
||||
|
||||
pna.init(document.getElementsByClassName('particle-network-animation')[0]);
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,67 @@
|
||||
<nz-layout class="layout">
|
||||
<nz-header>
|
||||
<!-- <nz-header style="z-index: 999;">
|
||||
<div nz-row>
|
||||
<div nz-col nzSpan="24" style="display: flex;align-items: center;">
|
||||
<img width="32" height="32" src="./assets/images/user/logo.svg" [routerLink]="['/']" />
|
||||
<label class="title ml-sm">运多星网络货运管理平台</label>
|
||||
</div>
|
||||
</div>
|
||||
</nz-header>
|
||||
<nz-content class="content">
|
||||
<div class="inner-content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</nz-header> -->
|
||||
<nz-content class="content" id="content">
|
||||
<nz-row>
|
||||
<nz-col nzXs="0" nzSm="0" nzMd="0" nzLg="14" nzXl="14" nzXXl="14" style="z-index: 9999;">
|
||||
<div style="width: 100%;height: 100%;display: flex;align-items: center;padding: 60px;">
|
||||
<div class="earth-box">
|
||||
<div class="earth" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nz-col>
|
||||
<nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="9" nzXl="8" nzXXl="7" style="z-index: 9999; ">
|
||||
<router-outlet></router-outlet>
|
||||
</nz-col>
|
||||
</nz-row>
|
||||
<div class="meteor-1"></div>
|
||||
<div class="meteor-2"></div>
|
||||
<div class="meteor-3"></div>
|
||||
<div class="meteor-4"></div>
|
||||
<div class="meteor-5"></div>
|
||||
<div class="meteor-6"></div>
|
||||
<div class="meteor-7"></div>
|
||||
<div class="meteor-8"></div>
|
||||
<div class="meteor-9"></div>
|
||||
<div class="meteor-10"></div>
|
||||
<div class="meteor-11"></div>
|
||||
<div class="meteor-12"></div>
|
||||
<div class="meteor-13"></div>
|
||||
<div class="meteor-14"></div>
|
||||
<div class="meteor-15"></div>
|
||||
<div class="meteor-16"></div>
|
||||
<div class="meteor-17"></div>
|
||||
<div class="meteor-18"></div>
|
||||
<div class="meteor-19"></div>
|
||||
<div class="meteor-20"></div>
|
||||
<div class=" particle-network-animation"></div>
|
||||
<!-- <div class="night">
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
<div class="shooting_star"></div>
|
||||
</div> -->
|
||||
</nz-content>
|
||||
</nz-layout>
|
||||
@ -7,11 +7,71 @@
|
||||
}
|
||||
|
||||
.ant-layout-header {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 5px 5px #d1d1d1;
|
||||
background : #ffffff;
|
||||
// box-shadow: 0px 5px 5px #d1d1d1;
|
||||
}
|
||||
|
||||
nz-content {
|
||||
background : url('../../../assets/images/login/login-bg.jpg') 100% 100% no-repeat;
|
||||
background-size: cover;
|
||||
// overflow : auto;
|
||||
}
|
||||
|
||||
passport-login {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.earth-box {
|
||||
background : url('../../../assets/images/login/4-界面背景.png') 100% 100% no-repeat;
|
||||
background-size : cover;
|
||||
background-position: center;
|
||||
// overflow : hidden;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
}
|
||||
|
||||
.earth {
|
||||
// animation : eatthAnimation 60s linear infinite;
|
||||
// -webkit-animation: eatthAnimation 60s linear infinite;
|
||||
max-width : 100%;
|
||||
height : 100%;
|
||||
// margin-top : -50px;
|
||||
// max-height : calc(100% - 64px);
|
||||
// border-radius : 40%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
left : calc(50% - 82px);
|
||||
width : 164px;
|
||||
top : calc(50% - 82px);
|
||||
}
|
||||
|
||||
.earth:hover {
|
||||
animation-play-state : paused;
|
||||
-webkit-animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes eatthAnimation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes eatthAnimation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,15 +1,35 @@
|
||||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
|
||||
import Particle from './particle';
|
||||
|
||||
@Component({
|
||||
selector: 'layout-passport',
|
||||
templateUrl: './passport.component.html',
|
||||
styleUrls: ['./passport.component.less']
|
||||
styleUrls: ['./passport.component.less', './d.scss']
|
||||
})
|
||||
export class LayoutPassportComponent implements OnInit {
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {
|
||||
// this.tokenService.clear();
|
||||
// this.loadJS();
|
||||
|
||||
const particle = new Particle();
|
||||
particle.init();
|
||||
}
|
||||
|
||||
loadJS() {
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = './assets/login/js/script.js';
|
||||
script.id = 'particle';
|
||||
document.getElementsByTagName('head')[0].appendChild(script);
|
||||
|
||||
setTimeout(() => {
|
||||
var content = document.getElementById('content');
|
||||
if (content) {
|
||||
content.style.overflow = 'auto';
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
<span class="mr-md">客服电话:0755-88393483</span>
|
||||
<!--Search-->
|
||||
<layout-pro-search class="hidden-xs"></layout-pro-search>
|
||||
<!--Link-->
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
:host::ng-deep {
|
||||
.text-truncate {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.map_st {
|
||||
max-height: 350px;
|
||||
max-width : 360px;
|
||||
position : absolute;
|
||||
top : 20px;
|
||||
right : 49px;
|
||||
}
|
||||
|
||||
.map_radio {
|
||||
position : absolute;
|
||||
top : 20px;
|
||||
left : 20px;
|
||||
background : #F4F4F5;
|
||||
box-shadow : 0px 2px 8px 1px rgb(0 0 0 / 10%);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
|
||||
.ant-radio-button-wrapper {
|
||||
background: #F4F4F5;
|
||||
border : unset;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper-checked {
|
||||
color : #CF3834;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail_title {
|
||||
font-size : 16px;
|
||||
font-weight: 500;
|
||||
color : #252A3D;
|
||||
line-height: 24px;
|
||||
|
||||
span {
|
||||
color : #E60012;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
@ -41,7 +41,7 @@
|
||||
nz-button
|
||||
nzType="primary"
|
||||
[disabled]="!sf.valid"
|
||||
[nzLoading]="isLoading && st.loading"
|
||||
[nzLoading]="false"
|
||||
(click)="st?.load(1)"
|
||||
acl
|
||||
[acl-ability]="['CONTRACT-INDEX-listFrame']"
|
||||
@ -75,7 +75,7 @@
|
||||
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
|
||||
[res]="{ reName: { list: 'data.records', total: 'data.total' } }"
|
||||
[page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
|
||||
[loading]="service.http.loading"
|
||||
[loading]="false"
|
||||
[scroll]="{ x: '1200px', y: '370px' }"
|
||||
(change)="stChange($event)"
|
||||
>
|
||||
|
||||
@ -26,50 +26,43 @@ export class ContractManagementFrameComponent implements OnInit {
|
||||
ui: SFUISchema = {};
|
||||
_$expand = false;
|
||||
selectedRows: any[] = [];
|
||||
isLoading: boolean = false;
|
||||
constructor(
|
||||
public service: ContractManagementService,
|
||||
private nzModalService: NzModalService,
|
||||
private router: Router,
|
||||
public shipperservice: ShipperBaseService,
|
||||
private datePipe: DatePipe
|
||||
) {}
|
||||
private datePipe: DatePipe,
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initST();
|
||||
this.initSF();
|
||||
}
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
get reqParams() {
|
||||
const params = {
|
||||
...this.sf?.value
|
||||
};
|
||||
delete params.signTime;
|
||||
delete params._$expand;
|
||||
if (
|
||||
this.datePipe.transform(this.sf?.value?.signTime?.[0], 'yyyy-MM-dd HH:mm:ss') &&
|
||||
this.datePipe.transform(this.sf?.value?.signTime?.[1], 'yyyy-MM-dd HH:mm:ss')
|
||||
) {
|
||||
params.signTime = {
|
||||
start: this.datePipe.transform(this.sf?.value?.signTime?.[0], 'yyyy-MM-dd HH:mm:ss'),
|
||||
end: this.datePipe.transform(this.sf?.value?.signTime?.[1], 'yyyy-MM-dd HH:mm:ss')
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
get reqParams() {
|
||||
const params = {
|
||||
...this.sf?.value,
|
||||
}
|
||||
delete params.signTime;
|
||||
delete params._$expand;
|
||||
if(this.datePipe.transform(this.sf?.value?.signTime?.[0], 'yyyy-MM-dd HH:mm:ss') && this.datePipe.transform(this.sf?.value?.signTime?.[1], 'yyyy-MM-dd HH:mm:ss')) {
|
||||
params.signTime = {
|
||||
start: this.datePipe.transform(this.sf?.value?.signTime?.[0], 'yyyy-MM-dd HH:mm:ss'),
|
||||
end: this.datePipe.transform(this.sf?.value?.signTime?.[1], 'yyyy-MM-dd HH:mm:ss'),
|
||||
}
|
||||
}
|
||||
if(this.datePipe.transform(this.sf?.value?.effectiveEndTime?.[0], 'yyyy-MM-dd HH:mm:ss') && this.datePipe.transform(this.sf?.value?.effectiveEndTime?.[1], 'yyyy-MM-dd HH:mm:ss')) {
|
||||
params.effectiveEndTime = {
|
||||
start: this.datePipe.transform(this.sf?.value?.effectiveEndTime?.[0], 'yyyy-MM-dd HH:mm:ss'),
|
||||
end: this.datePipe.transform(this.sf?.value?.effectiveEndTime?.[1], 'yyyy-MM-dd HH:mm:ss'),
|
||||
}
|
||||
}
|
||||
return {
|
||||
...params
|
||||
};
|
||||
}
|
||||
if (
|
||||
this.datePipe.transform(this.sf?.value?.effectiveEndTime?.[0], 'yyyy-MM-dd HH:mm:ss') &&
|
||||
this.datePipe.transform(this.sf?.value?.effectiveEndTime?.[1], 'yyyy-MM-dd HH:mm:ss')
|
||||
) {
|
||||
params.effectiveEndTime = {
|
||||
start: this.datePipe.transform(this.sf?.value?.effectiveEndTime?.[0], 'yyyy-MM-dd HH:mm:ss'),
|
||||
end: this.datePipe.transform(this.sf?.value?.effectiveEndTime?.[1], 'yyyy-MM-dd HH:mm:ss')
|
||||
};
|
||||
}
|
||||
return {
|
||||
...params
|
||||
};
|
||||
}
|
||||
/**
|
||||
* 初始化数据列表
|
||||
*/
|
||||
@ -77,7 +70,7 @@ export class ContractManagementFrameComponent implements OnInit {
|
||||
this.columns = [
|
||||
{
|
||||
title: '合同编号',
|
||||
width: '130px',
|
||||
width: '100px',
|
||||
className: 'text-center',
|
||||
render: 'contractCode'
|
||||
},
|
||||
@ -97,7 +90,7 @@ export class ContractManagementFrameComponent implements OnInit {
|
||||
title: '合同名称',
|
||||
width: '100px',
|
||||
className: 'text-center',
|
||||
index: 'contractName'
|
||||
index: 'templateName'
|
||||
},
|
||||
{ title: '网络货运人', index: 'enterpriseInfoName', width: '120px', className: 'text-center' },
|
||||
{ title: '合同对象', index: 'contractObjectName', width: '120px', className: 'text-center' },
|
||||
@ -128,19 +121,6 @@ export class ContractManagementFrameComponent implements OnInit {
|
||||
'5': { text: '已过期', color: 'warning' },
|
||||
'7': { text: '已拒签', color: 'warning' }
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
className: 'text-center',
|
||||
fixed: 'right',
|
||||
width: '80px',
|
||||
buttons: [
|
||||
{
|
||||
text: '签署',
|
||||
iif: item => item.esignFlowStatus === '0' || item.esignFlowStatus === '1' || item.esignFlowStatus === '13',
|
||||
click: item => this.service.StartTheProcessToESignById(item.id, () => this.st.load(1))
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
@ -161,11 +141,11 @@ export class ContractManagementFrameComponent implements OnInit {
|
||||
enum: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '货主', value: 1 },
|
||||
{ label: '司机', value: 2 }
|
||||
{ label: '司机', value: 2 },
|
||||
],
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '请选择'
|
||||
placeholder: '请选择',
|
||||
}
|
||||
},
|
||||
contractType: {
|
||||
@ -176,8 +156,8 @@ export class ContractManagementFrameComponent implements OnInit {
|
||||
widget: 'dict-select',
|
||||
containsAllLable: true,
|
||||
params: { dictKey: 'contract:type' },
|
||||
containAllLable: true
|
||||
} as SFSelectWidgetSchema
|
||||
containAllLable:true,
|
||||
} as SFSelectWidgetSchema,
|
||||
},
|
||||
enterpriseInfoId: {
|
||||
type: 'string',
|
||||
@ -197,8 +177,8 @@ export class ContractManagementFrameComponent implements OnInit {
|
||||
title: '合同对象',
|
||||
ui: {
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
}
|
||||
_$expand: (value: boolean) => value,
|
||||
},
|
||||
}
|
||||
},
|
||||
signTime: {
|
||||
@ -207,8 +187,8 @@ export class ContractManagementFrameComponent implements OnInit {
|
||||
ui: {
|
||||
widget: 'custom',
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
}
|
||||
_$expand: (value: boolean) => value,
|
||||
},
|
||||
}
|
||||
},
|
||||
effectiveEndTime: {
|
||||
@ -217,8 +197,8 @@ export class ContractManagementFrameComponent implements OnInit {
|
||||
ui: {
|
||||
widget: 'custom',
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
}
|
||||
_$expand: (value: boolean) => value,
|
||||
},
|
||||
}
|
||||
},
|
||||
esignFlowStatus: {
|
||||
@ -229,12 +209,12 @@ export class ContractManagementFrameComponent implements OnInit {
|
||||
widget: 'dict-select',
|
||||
containsAllLable: true,
|
||||
params: { dictKey: 'esign:flow:status' },
|
||||
containAllLable: true,
|
||||
containAllLable:true,
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
}
|
||||
} as SFSelectWidgetSchema
|
||||
}
|
||||
_$expand: (value: boolean) => value,
|
||||
},
|
||||
} as SFSelectWidgetSchema,
|
||||
},
|
||||
},
|
||||
type: 'object'
|
||||
};
|
||||
@ -313,7 +293,6 @@ export class ContractManagementFrameComponent implements OnInit {
|
||||
resetSF() {
|
||||
this.sf.reset();
|
||||
this._$expand = false;
|
||||
this.isLoading = true;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -29,8 +29,8 @@
|
||||
</sf>
|
||||
</div>
|
||||
<div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
|
||||
<button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="isLoading && st.loading"
|
||||
(click)="st?.load(1)" acl [acl-ability]="['CONTRACT-INDEX-searchDetail']">查询</button>
|
||||
<button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="false"
|
||||
(click)="st?.load(1)" acl [acl-ability]="['CONTRACT-INDEX-searchDetail']">查询</button>
|
||||
<button nz-button (click)="resetSF()">重置</button>
|
||||
<button nz-button nzType="link" (click)="expandToggle()">
|
||||
{{ !_$expand ? '展开' : '收起' }}
|
||||
@ -48,15 +48,14 @@
|
||||
</nz-alert>
|
||||
</div>
|
||||
|
||||
<st #st [data]="service.$api_listDetailed_page" [columns]="columns" [req]="{ params: reqParams }" [loading]="false"
|
||||
[scroll]="{ x: '1200px', y: '370px' }" (change)="stChange($event)">
|
||||
<st #st [data]="service.$api_listDetailed_page" [columns]="columns" [req]="{ params: reqParams }"
|
||||
[loading]="false" [scroll]="{ x: '1200px', y: '370px' }" (change)="stChange($event)">
|
||||
<ng-template st-row="contractCode" let-item let-index="index">
|
||||
<a (click)="service.openURL(item?.contractFilePath)">{{ item?.contractCode }}</a>
|
||||
<!-- <a [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a> -->
|
||||
<a [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a>
|
||||
</ng-template>
|
||||
<ng-template st-row="signingObject" let-item let-index="index">
|
||||
<span *ngIf="item.signingObject == 0"></span>
|
||||
<span></span>
|
||||
<span *ngIf="item.signingObject == 0"></span>
|
||||
<span></span>
|
||||
</ng-template>
|
||||
</st>
|
||||
</nz-card>
|
||||
|
||||
@ -25,24 +25,20 @@ export class ContractManagementContractListComponent implements OnInit {
|
||||
columns: STColumn[] = [];
|
||||
ui: SFUISchema = {};
|
||||
_$expand = false;
|
||||
isLoading: boolean = false;
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
* 查询参数
|
||||
*/
|
||||
get reqParams() {
|
||||
const params = {
|
||||
...this.sf?.value
|
||||
};
|
||||
...this.sf?.value,
|
||||
}
|
||||
delete params.signTime;
|
||||
delete params._$expand;
|
||||
if (
|
||||
this.datePipe.transform(this.sf?.value?.signTime?.[0], 'yyyy-MM-dd HH:mm:ss') &&
|
||||
this.datePipe.transform(this.sf?.value?.signTime?.[1], 'yyyy-MM-dd HH:mm:ss')
|
||||
) {
|
||||
if (this.datePipe.transform(this.sf?.value?.signTime?.[0], 'yyyy-MM-dd HH:mm:ss') && this.datePipe.transform(this.sf?.value?.signTime?.[1], 'yyyy-MM-dd HH:mm:ss')) {
|
||||
params.signTime = {
|
||||
start: this.datePipe.transform(this.sf?.value?.signTime?.[0], 'yyyy-MM-dd HH:mm:ss'),
|
||||
end: this.datePipe.transform(this.sf?.value?.signTime?.[1], 'yyyy-MM-dd HH:mm:ss')
|
||||
};
|
||||
end: this.datePipe.transform(this.sf?.value?.signTime?.[1], 'yyyy-MM-dd HH:mm:ss'),
|
||||
}
|
||||
}
|
||||
return {
|
||||
...params
|
||||
@ -54,12 +50,12 @@ export class ContractManagementContractListComponent implements OnInit {
|
||||
private nzModalService: NzModalService,
|
||||
public shipperservice: ShipperBaseService,
|
||||
private router: Router,
|
||||
private datePipe: DatePipe
|
||||
) {}
|
||||
private datePipe: DatePipe,
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initST();
|
||||
this.initSF();
|
||||
this.initST()
|
||||
this.initSF()
|
||||
}
|
||||
/**
|
||||
* 初始化数据列表
|
||||
@ -68,7 +64,7 @@ export class ContractManagementContractListComponent implements OnInit {
|
||||
this.columns = [
|
||||
{
|
||||
title: '合同编号',
|
||||
width: '130px',
|
||||
width: '100px',
|
||||
className: 'text-center',
|
||||
render: 'contractCode'
|
||||
},
|
||||
@ -76,7 +72,7 @@ export class ContractManagementContractListComponent implements OnInit {
|
||||
title: '签约对象',
|
||||
width: '100px',
|
||||
className: 'text-center',
|
||||
index: 'signingObjectLabel'
|
||||
index: 'documentType'
|
||||
},
|
||||
{
|
||||
title: '合同类型',
|
||||
@ -109,133 +105,72 @@ export class ContractManagementContractListComponent implements OnInit {
|
||||
'3': { text: '已撤销', color: 'warning' },
|
||||
'4': { text: '已作废', color: 'warning' },
|
||||
'5': { text: '已过期', color: 'warning' },
|
||||
'7': { text: '已拒签', color: 'warning' }
|
||||
}
|
||||
'7': { text: '已拒签', color: 'warning' },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
className: 'text-center',
|
||||
fixed: 'right',
|
||||
width: '80px',
|
||||
buttons: [
|
||||
{
|
||||
text: '签署',
|
||||
iif: item => item.esignFlowStatus === '0' || item.esignFlowStatus === '1' || item.esignFlowStatus === '13',
|
||||
click: item => this.service.StartTheProcessToESignById(item.id, () => this.st.load(1))
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
];
|
||||
}
|
||||
/**
|
||||
* 初始化查询表单
|
||||
*/
|
||||
* 初始化查询表单
|
||||
*/
|
||||
initSF() {
|
||||
this.schema = {
|
||||
properties: {
|
||||
_$expand: { type: 'boolean', ui: { hidden: true } },
|
||||
contractCode: {
|
||||
type: 'string',
|
||||
title: '合同编号'
|
||||
title: '合同编号',
|
||||
},
|
||||
businessCode: {
|
||||
type: 'string',
|
||||
title: '业务单号'
|
||||
},
|
||||
signingObject: {
|
||||
shipperName: {
|
||||
type: 'string',
|
||||
title: '签约对象',
|
||||
enum: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '货主', value: 1 },
|
||||
{ label: '司机', value: 2 }
|
||||
],
|
||||
title: '托运人'
|
||||
},
|
||||
carrierName: {
|
||||
type: 'string',
|
||||
title: '承运人',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '请选择'
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value,
|
||||
},
|
||||
}
|
||||
},
|
||||
contractType: {
|
||||
title: '合同类型',
|
||||
documentType: {
|
||||
title: '单据类型',
|
||||
type: 'string',
|
||||
default: '',
|
||||
ui: {
|
||||
widget: 'dict-select',
|
||||
containsAllLable: true,
|
||||
params: { dictKey: 'contract:type' },
|
||||
containsAllLabel: true,
|
||||
params: { dictKey: 'contract:document:type' },
|
||||
containAllLable: true,
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
_$expand: (value: boolean) => value,
|
||||
},
|
||||
containAllLable: true
|
||||
} as SFSelectWidgetSchema
|
||||
},
|
||||
resourceType: {
|
||||
title: '货源类型',
|
||||
type: 'string',
|
||||
default: '',
|
||||
ui: {
|
||||
widget: 'dict-select',
|
||||
params: { dictKey: 'goodresource:type' },
|
||||
containsAllLable: true,
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
}
|
||||
} as SFSelectWidgetSchema
|
||||
},
|
||||
enterpriseInfoId: {
|
||||
type: 'string',
|
||||
title: '网络货运人',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '请选择',
|
||||
allowClear: true,
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
},
|
||||
asyncData: () => this.shipperservice.getNetworkFreightForwarder()
|
||||
}
|
||||
},
|
||||
contractObjectName: {
|
||||
type: 'string',
|
||||
title: '合同对象',
|
||||
ui: {
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
}
|
||||
}
|
||||
} as SFSelectWidgetSchema,
|
||||
},
|
||||
signTime: {
|
||||
title: '签署日期',
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'sl-from-to-search',
|
||||
format: 'yyyy-MM-dd',
|
||||
widget: 'custom',
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
}
|
||||
} as SFDateWidgetSchema
|
||||
_$expand: (value: boolean) => value,
|
||||
},
|
||||
}
|
||||
},
|
||||
esignFlowStatus: {
|
||||
title: '状态',
|
||||
type: 'string',
|
||||
default: '',
|
||||
ui: {
|
||||
widget: 'dict-select',
|
||||
params: { dictKey: 'esign:flow:status' },
|
||||
containsAllLable: true,
|
||||
visibleIf: {
|
||||
_$expand: (value: boolean) => value
|
||||
}
|
||||
} as SFSelectWidgetSchema
|
||||
}
|
||||
},
|
||||
type: 'object'
|
||||
type: 'object',
|
||||
};
|
||||
this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
|
||||
}
|
||||
/**
|
||||
* 查询字段个数
|
||||
*/
|
||||
* 查询字段个数
|
||||
*/
|
||||
get queryFieldCount(): number {
|
||||
return Object.keys(this.schema?.properties || {}).length;
|
||||
}
|
||||
@ -300,7 +235,6 @@ export class ContractManagementContractListComponent implements OnInit {
|
||||
resetSF() {
|
||||
this.sf.reset();
|
||||
this._$expand = false;
|
||||
this.isLoading = true;
|
||||
}
|
||||
/**
|
||||
* 伸缩查询条件
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
nz-button
|
||||
nzType="primary"
|
||||
[disabled]="!sf.valid"
|
||||
[nzLoading]="service.http.loading"
|
||||
[nzLoading]="false"
|
||||
(click)="st?.load(1)"
|
||||
acl
|
||||
[acl-ability]="['CONTRACT-INDEX-listFrame']"
|
||||
|
||||
@ -70,7 +70,7 @@ export class ContractManagementPartnerComponent implements OnInit {
|
||||
this.columns = [
|
||||
{
|
||||
title: '合同编号',
|
||||
width: '130px',
|
||||
width: '100px',
|
||||
className: 'text-center',
|
||||
render: 'contractCode'
|
||||
},
|
||||
@ -78,7 +78,7 @@ export class ContractManagementPartnerComponent implements OnInit {
|
||||
title: '签约对象',
|
||||
width: '100px',
|
||||
className: 'text-center',
|
||||
index: 'signingObjectLabel'
|
||||
index: 'signingObject'
|
||||
},
|
||||
{
|
||||
title: '合同类型',
|
||||
@ -121,19 +121,6 @@ export class ContractManagementPartnerComponent implements OnInit {
|
||||
'5': { text: '已过期', color: 'warning' },
|
||||
'7': { text: '已拒签', color: 'warning' }
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
className: 'text-center',
|
||||
fixed: 'right',
|
||||
width: '80px',
|
||||
buttons: [
|
||||
{
|
||||
text: '签署',
|
||||
iif: item => item.esignFlowStatus === '0' || item.esignFlowStatus === '1' || item.esignFlowStatus === '13',
|
||||
click: item => this.service.StartTheProcessToESignById(item.id, () => this.st.load(1))
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-01-05 11:01:55
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-15 14:07:19
|
||||
* @LastEditTime : 2022-01-18 17:16:27
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-template-detail\\contract-template-detail.component.html
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
-->
|
||||
@ -34,6 +34,9 @@
|
||||
<nz-card>
|
||||
<div nz-col nzSpan="20" style="overflow: scroll">
|
||||
<nz-card class="card-height" *ngIf="!isUpdate">
|
||||
<div class="mb-md">
|
||||
<div>{{detailList?.templateName}}</div>
|
||||
</div>
|
||||
<div [innerHTML]="detailList?.templateContent | safehtml"></div>
|
||||
</nz-card>
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import { OnChanges } from '@angular/core';
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-01-05 11:01:55
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-03-30 10:45:19
|
||||
* @LastEditTime : 2022-02-28 20:22:46
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-template-detail\\contract-template-detail.component.ts
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
*/
|
||||
@ -95,9 +95,7 @@ export class ContractManagementTemplateTextComponent implements OnInit {
|
||||
{ label: '订单补充协议', value: '2' },
|
||||
{ label: '运单合同', value: '3' },
|
||||
{ label: '运单补充协议', value: '4' },
|
||||
{ label: '委托代收合同', value: '5' },
|
||||
{ label: '电子提货单', value: '10' },
|
||||
{ label: '电子卸货单', value: '11' },
|
||||
{ label: '委托代收合同', value: '5' }
|
||||
];
|
||||
this.sf.getProperty('/contractType')!.schema.enum = this.Types;
|
||||
this.sf.getProperty('/contractType')!.widget.reset(this.Types);
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
nz-button
|
||||
nzType="primary"
|
||||
[disabled]="!sf.valid"
|
||||
[nzLoading]="service.http.loading"
|
||||
[nzLoading]="false"
|
||||
(click)="st?.load(1)"
|
||||
acl
|
||||
[acl-ability]="['CONTRACT-INDEX-listFrame']"
|
||||
@ -75,8 +75,7 @@
|
||||
[loading]="false"
|
||||
>
|
||||
<ng-template st-row="templateName" let-item let-index="index">
|
||||
<a (click)="service.openURL(item?.contractFilePath)">{{ item.templateName }}</a>
|
||||
<!-- <a (click)="view(item)">{{ item.templateName }}</a> -->
|
||||
<a (click)="view(item)">{{ item.templateName }}</a>
|
||||
</ng-template>
|
||||
<ng-template st-row="signingObject" let-item let-index="index">
|
||||
<span *ngIf="item?.signingObject == 1">货主</span>
|
||||
|
||||
@ -131,7 +131,7 @@ export class ContractManagementTemplateFrameComponent implements OnInit {
|
||||
title: '签约对象',
|
||||
width: '100px',
|
||||
className: 'text-center',
|
||||
index: 'signingObjectLabel'
|
||||
render: 'signingObjectLabel'
|
||||
},
|
||||
{
|
||||
title: '合同类型',
|
||||
@ -145,17 +145,15 @@ export class ContractManagementTemplateFrameComponent implements OnInit {
|
||||
className: 'text-center',
|
||||
index: 'resourceTypeLabel'
|
||||
},
|
||||
{ title: '创建人', index: 'createUserIdLabel', width: '120px', className: 'text-center' },
|
||||
{ title: '创建人', index: 'createUserId', width: '120px', className: 'text-center' },
|
||||
{
|
||||
title: '创建时间',
|
||||
className: 'text-center',
|
||||
index: 'createTime',
|
||||
width: '200px'
|
||||
index: 'createTime'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
fixed: 'right',
|
||||
width: '110px',
|
||||
className: 'text-center',
|
||||
buttons: [
|
||||
{
|
||||
@ -244,7 +242,7 @@ export class ContractManagementTemplateFrameComponent implements OnInit {
|
||||
this.service.request(this.service.$api_deletebatch_contractTemplate, [value.id]).subscribe(res => {
|
||||
if (res) {
|
||||
this.service.msgSrv.success('删除成功!');
|
||||
this.st.reload()
|
||||
this.st.reload(1)
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
nz-button
|
||||
nzType="primary"
|
||||
[disabled]="!sf.valid"
|
||||
[nzLoading]="service.http.loading"
|
||||
[nzLoading]="false"
|
||||
(click)="st?.load(1)"
|
||||
acl
|
||||
[acl-ability]="['CONTRACT-INDEX-listFrame']"
|
||||
@ -75,8 +75,7 @@
|
||||
[loading]="false"
|
||||
>
|
||||
<ng-template st-row="templateName" let-item let-index="index">
|
||||
<a (click)="service.openURL(item?.contractFilePath)">{{ item.templateName }}</a>
|
||||
<!-- <a (click)="view(item)">{{ item.templateName }}</a> -->
|
||||
<a (click)="view(item)">{{ item.templateName }}</a>
|
||||
</ng-template>
|
||||
</st>
|
||||
</div>
|
||||
|
||||
@ -145,17 +145,15 @@ export class ContractManagementTemplatePartnerComponent implements OnInit {
|
||||
className: 'text-center',
|
||||
index: 'resourceTypeLabel'
|
||||
},
|
||||
{ title: '创建人', index: 'createUserIdLabel', width: '120px', className: 'text-center' },
|
||||
{ title: '创建人', index: 'createUserId', width: '120px', className: 'text-center' },
|
||||
{
|
||||
title: '创建时间',
|
||||
className: 'text-center',
|
||||
index: 'createTime',
|
||||
width: '200px'
|
||||
index: 'createTime'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
fixed: 'right',
|
||||
width: '110px',
|
||||
className: 'text-center',
|
||||
buttons: [
|
||||
{
|
||||
@ -244,7 +242,7 @@ export class ContractManagementTemplatePartnerComponent implements OnInit {
|
||||
this.service.request(this.service.$api_deletebatch_contractTemplate, [value.id]).subscribe(res => {
|
||||
if (res) {
|
||||
this.service.msgSrv.success('删除成功!');
|
||||
this.st.reload()
|
||||
this.st.reload(1)
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
nz-button
|
||||
nzType="primary"
|
||||
[disabled]="!sf.valid"
|
||||
[nzLoading]="service.http.loading"
|
||||
[nzLoading]="false"
|
||||
(click)="st?.load(1)"
|
||||
acl
|
||||
[acl-ability]="['CONTRACT-INDEX-listFrame']"
|
||||
|
||||
@ -145,17 +145,15 @@ export class ContractManagementTemplateDetailComponent implements OnInit {
|
||||
className: 'text-center',
|
||||
index: 'resourceTypeLabel'
|
||||
},
|
||||
{ title: '创建人', index: 'createUserIdLabel', width: '120px', className: 'text-center' },
|
||||
{ title: '创建人', index: 'createUserId', width: '120px', className: 'text-center' },
|
||||
{
|
||||
title: '创建时间',
|
||||
className: 'text-center',
|
||||
index: 'createTime',
|
||||
width: '200px'
|
||||
index: 'createTime'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
fixed: 'right',
|
||||
width: '110px',
|
||||
className: 'text-center',
|
||||
buttons: [
|
||||
{
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<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]="isLoading && st.loading" (click)="st?.load(1)" acl [acl-ability]="['CONTRACT-POLICY-search']">查询</button>
|
||||
<button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="false" (click)="st?.load(1)" acl [acl-ability]="['CONTRACT-POLICY-search']">查询</button>
|
||||
<button nz-button (click)="resetSF()">重置</button>
|
||||
<button nz-button nzType="link" (click)="expandToggle()">
|
||||
{{ !_$expand ? '展开' : '收起' }}
|
||||
|
||||
@ -26,7 +26,6 @@ export class ContractManagementPolicyComponent implements OnInit {
|
||||
|
||||
selectedRows: any[] = [];
|
||||
paramValue = '';
|
||||
isLoading: boolean = false;
|
||||
constructor(public service: ContractManagementService, private modal: NzModalService, private router: Router) {}
|
||||
|
||||
/**
|
||||
@ -186,7 +185,6 @@ export class ContractManagementPolicyComponent implements OnInit {
|
||||
resetSF() {
|
||||
this.sf.reset();
|
||||
this._$expand = false;
|
||||
this.isLoading = true
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -35,18 +35,7 @@ export class ContractManagementService extends BaseService {
|
||||
$api_listPartner_page = `/api/sdc/contract/listPartner/page`;
|
||||
// 获取订单合同表
|
||||
$api_contract_get = `/api/sdc/contract/get`;
|
||||
|
||||
// 发起E签宝跟据合同ID
|
||||
$api_startTheProcessToESignById = `/api/sdc/contract/startTheProcessToESignById`;
|
||||
constructor(public injector: Injector) {
|
||||
super(injector);
|
||||
}
|
||||
|
||||
StartTheProcessToESignById(id: string, callback: () => void) {
|
||||
this.request(this.$api_startTheProcessToESignById, { id }).subscribe(res => {
|
||||
if (res) {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,58 +0,0 @@
|
||||
<!-- 页头 -->
|
||||
<page-header-wrapper [title]="'业务报表'"></page-header-wrapper>
|
||||
<nz-card nzTitle="运多星平台业务情况" [nzExtra]="extraTemplate">
|
||||
<ng-template #extraTemplate>
|
||||
<div class="chooseBox">
|
||||
<button nz-button nzType="primary" (click)="exportFun()">导出</button>
|
||||
<div class="timeBox">
|
||||
<nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()" acl [acl-ability]="['busiindex-tabel']">
|
||||
<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_listPerformanceReportPage"
|
||||
[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>
|
||||
</nz-card>
|
||||
<nz-card nzTitle="业绩报表" [nzExtra]="extraTemplate01">
|
||||
<ng-template #extraTemplate01>
|
||||
<div class="chooseBox">
|
||||
<div class="timeBox">
|
||||
<nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext()" acl [acl-ability]="['busiindex-report']">
|
||||
<label nz-radio-button nzValue="year">年</label>
|
||||
<label nz-radio-button nzValue="month">月</label>
|
||||
</nz-radio-group>
|
||||
<div class="dateBox">
|
||||
<nz-date-picker [(ngModel)]="dateNext" [nzDisabledDate]="disabledDate" [nzMode]="modeNext" (ngModelChange)="onChangeNext($event)"></nz-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<div nz-row [nzGutter]="64">
|
||||
<div nz-col class="gutter-row" [nzSpan]="12">
|
||||
<div class="title">
|
||||
<div class="box" style="background-color: #3ba1ff;"></div> 环比(%)
|
||||
</div>
|
||||
<!-- <g2-custom delay="100" (render)="render($event)"></g2-custom> -->
|
||||
<!-- <app-busitable-curve></app-busitable-curve> -->
|
||||
<app-busitable-curve #curve [chartData]="chartData.chainRatio"></app-busitable-curve>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="12">
|
||||
<div class="title">
|
||||
<div class="box" style="background-color: #f59a23;"></div> 业绩量(元)
|
||||
</div>
|
||||
<app-busitable-pillar #pillar [chartData]="chartData.performance"></app-busitable-pillar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nz-card>
|
||||
@ -1,21 +0,0 @@
|
||||
.chooseBox{
|
||||
display: flex;
|
||||
}
|
||||
.timeBox{
|
||||
display: flex;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.dateBox{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.box{
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 10px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { DatatableBusiindexComponent } from './busiindex.component';
|
||||
|
||||
describe('DatatableBusiindexComponent', () => {
|
||||
let component: DatatableBusiindexComponent;
|
||||
let fixture: ComponentFixture<DatatableBusiindexComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DatatableBusiindexComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DatatableBusiindexComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,148 +0,0 @@
|
||||
import { Component, OnInit, ViewChild, NgZone } from '@angular/core';
|
||||
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 { BusitablePillarComponent } from '../pillar/pillar.component';
|
||||
import { BusitableCurveComponent } from './curve/curve.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-busiindex',
|
||||
templateUrl: './busiindex.component.html',
|
||||
styleUrls: ['./busiindex.component.less'],
|
||||
providers: [DatePipe]
|
||||
|
||||
})
|
||||
export class DatatableBusiindexComponent implements OnInit {
|
||||
@ViewChild('st') private readonly st!: STComponent;
|
||||
@ViewChild('curve') private readonly curve!: BusitableCurveComponent;
|
||||
@ViewChild('pillar') private readonly pillar!: BusitablePillarComponent;
|
||||
type = 1;
|
||||
mode = 'year';
|
||||
date: any = null;
|
||||
time: any = ['2022-01-01 00:00:00']
|
||||
defineDate = [];
|
||||
dateNext: any = null;
|
||||
modeNext = 'year';
|
||||
timeNext: any = ['2022-01-01 00:00:00']
|
||||
dateFormat = 'yyyy';
|
||||
today = new Date();
|
||||
chartData: any = {}
|
||||
|
||||
columns: STColumn[] = [
|
||||
{ title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
|
||||
{ title: '合伙人数', index: 'partnerNumber', className: 'text-center' },
|
||||
{ title: '客户数', index: 'enterpriseNumbe', className: 'text-center' },
|
||||
{ title: '订单数', index: 'zsl', className: 'text-center' },
|
||||
{ title: '客户预存款', index: 'czcgje', className: 'text-right', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.czcgje }) } },
|
||||
{ title: '业绩量', index: 'yisje', className: 'text-center' },
|
||||
{ title: '已收附加费', index: 'yisfjf', className: 'text-right', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yisfjf }) } },
|
||||
{ title: '平均附加费率', index: 'fjfl', className: 'text-center',format: (item)=> {
|
||||
return item.fjfl + '%'
|
||||
} },
|
||||
{ title: '已开票金额', index: 'ykpje', className: 'text-right', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.ykpje }) } },
|
||||
];
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
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, private ngZone: NgZone) { }
|
||||
ngOnInit(): void {
|
||||
this.initData()
|
||||
}
|
||||
initData(flag?: boolean){
|
||||
let type = 1
|
||||
if(this.mode === 'year') {
|
||||
type = 1
|
||||
} else if(this.mode === 'month') {
|
||||
type = 2
|
||||
}
|
||||
if(this.modeNext === 'year') {
|
||||
type = 1
|
||||
} else if(this.modeNext === 'month') {
|
||||
type = 2
|
||||
}
|
||||
const params: any = {
|
||||
time: this.timeNext,
|
||||
type
|
||||
};
|
||||
this.service.request(this.service.$api_performanceReportHistogram, params).subscribe(res => {
|
||||
if (res) {
|
||||
this.chartData = res
|
||||
if(flag) {
|
||||
this.pillar.reRender()
|
||||
this.curve.reRender()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
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 });
|
||||
}
|
||||
|
||||
changeDataNext() {
|
||||
if(this.modeNext === 'year') {
|
||||
this.dateFormat = 'yyyy'
|
||||
} else if(this.modeNext === 'month') {
|
||||
this.dateFormat = 'yyyy-MM'
|
||||
}
|
||||
}
|
||||
onChangeNext(result: any) {
|
||||
if(result === null) {
|
||||
return
|
||||
}
|
||||
console.log(this.mode);
|
||||
if(this.modeNext === 'year') {
|
||||
this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy') + '-01-01 00:00:00']
|
||||
} else if(this.modeNext === 'month') {
|
||||
this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00']
|
||||
|
||||
console.log(this.dateNext);
|
||||
console.log(this.timeNext);
|
||||
|
||||
}
|
||||
this.initData(true)
|
||||
}
|
||||
disabledDate = (current: Date): boolean =>
|
||||
// Can not select days before today and today
|
||||
differenceInCalendarDays(current, this.today) > 0;
|
||||
exportFun(){
|
||||
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<g2-custom delay="200" (render)="render($event)"></g2-custom>
|
||||
@ -1,72 +0,0 @@
|
||||
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-busitable-curve',
|
||||
templateUrl: './curve.component.html',
|
||||
styleUrls: ['./curve.component.less']
|
||||
})
|
||||
export class BusitableCurveComponent 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() {
|
||||
this.chart.data(this.chartData);
|
||||
this.chart.render();
|
||||
}
|
||||
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({
|
||||
year: {
|
||||
range: [0, 1],
|
||||
},
|
||||
number: {
|
||||
min: -9999,
|
||||
nice: true,
|
||||
},
|
||||
});
|
||||
const itemTpl = `
|
||||
<div style="padding: 15px; color: red">
|
||||
环比: {value}%
|
||||
</div>
|
||||
`
|
||||
this.chart.tooltip({
|
||||
showCrosshairs: true, // 展示 Tooltip 辅助线
|
||||
shared: true,
|
||||
itemTpl: itemTpl
|
||||
});
|
||||
this.chart.line().position('time*number').label('number');
|
||||
this.chart.point().position('time*number');
|
||||
|
||||
this.chart.render();
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
<!-- 页头 -->
|
||||
<page-header-wrapper [title]="'业务报表'"></page-header-wrapper>
|
||||
<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]="service.http.loading"></st>
|
||||
</nz-card>
|
||||
<nz-card nzTitle="业绩报表" [nzExtra]="extraTemplate01">
|
||||
<ng-template #extraTemplate01>
|
||||
<div class="chooseBox">
|
||||
<div class="timeBox">
|
||||
<nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext()">
|
||||
<label nz-radio-button nzValue="year">年</label>
|
||||
<label nz-radio-button nzValue="month">月</label>
|
||||
</nz-radio-group>
|
||||
<div class="dateBox">
|
||||
<nz-date-picker [(ngModel)]="dateNext" [nzDisabledDate]="disabledDate" [nzMode]="mode" (ngModelChange)="onChangeNext($event)"></nz-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<app-busitable-pillar #pillar [chartData]="chartData.performance"></app-busitable-pillar>
|
||||
</nz-card>
|
||||
@ -1,11 +0,0 @@
|
||||
.chooseBox{
|
||||
display: flex;
|
||||
}
|
||||
.timeBox{
|
||||
display: flex;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.dateBox{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { DatatableMantableComponent } from './mantable.component';
|
||||
|
||||
describe('DatatableMantableComponent', () => {
|
||||
let component: DatatableMantableComponent;
|
||||
let fixture: ComponentFixture<DatatableMantableComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DatatableMantableComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DatatableMantableComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,138 +0,0 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
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 { BusitablePillarComponent } from '../pillar/pillar.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-mantable',
|
||||
templateUrl: './mantable.component.html',
|
||||
styleUrls: ['./mantable.component.less'],
|
||||
providers: [DatePipe]
|
||||
|
||||
})
|
||||
export class DatatableMantableComponent implements OnInit {
|
||||
@ViewChild('pillar') private readonly pillar!: BusitablePillarComponent;
|
||||
@ViewChild('st') private readonly st!: STComponent;
|
||||
type = 1;
|
||||
mode = 'year';
|
||||
date: any = null;
|
||||
defineDate = [];
|
||||
time: any = ['2022-01-01 00:00:00']
|
||||
dateFormat = 'yyyy';
|
||||
today = new Date();
|
||||
dateNext: any = null;
|
||||
modeNext = 'year';
|
||||
chartData: any = {}
|
||||
timeNext: any = ['2022-01-01 00:00:00']
|
||||
flag = false;
|
||||
|
||||
columns: STColumn[] = [
|
||||
{ title: '部门', index: 'bm', className: 'text-center' },
|
||||
{ title: '业务员', index: 'ywy', className: 'text-center' },
|
||||
{ title: '合伙人数', index: 'hhrs', className: 'text-center' },
|
||||
{ title: '客户数', index: 'khs', className: 'text-center' },
|
||||
{ title: '客户活跃率', index: 'khhyl', className: 'text-center' },
|
||||
{ title: '客户预存款', index: 'kfyck', className: 'text-center', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.kfyck }) } },
|
||||
{ title: '订单数', index: 'dds', className: 'text-center' },
|
||||
{ title: '订单金额', index: 'ddje', className: 'text-center', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.ddje }) } },
|
||||
{ title: '业绩量', index: 'yjl', className: 'text-center' },
|
||||
{ title: '附加费金额', index: 'fjfje', className: 'text-center', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.fjfje }) } },
|
||||
{ title: '平均附加费率', index: 'pjfjl', className: 'text-center' },
|
||||
{ title: '已开票金额', index: 'ykpje', className: 'text-center', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.ykpje }) } },
|
||||
];
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
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 { }
|
||||
|
||||
initData(){
|
||||
let type = 1
|
||||
if(this.mode === 'year') {
|
||||
type = 1
|
||||
} else if(this.mode === 'month') {
|
||||
type = 2
|
||||
}
|
||||
const params: any = {
|
||||
time: this.timeNext,
|
||||
type
|
||||
};
|
||||
this.service.request(this.service.$api_performanceReportHistogram, params).subscribe(res => {
|
||||
if (res) {
|
||||
this.chartData = res
|
||||
if(this.flag) {
|
||||
this.pillar.reRender()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
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 });
|
||||
}
|
||||
|
||||
changeDataNext() {
|
||||
if(this.mode === 'year') {
|
||||
this.dateFormat = 'yyyy'
|
||||
} else if(this.mode === 'month') {
|
||||
this.dateFormat = 'yyyy-MM'
|
||||
}
|
||||
}
|
||||
onChangeNext(result: any) {
|
||||
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']
|
||||
}
|
||||
this.flag = true
|
||||
this.initData()
|
||||
}
|
||||
disabledDate = (current: Date): boolean =>
|
||||
// Can not select days before today and today
|
||||
differenceInCalendarDays(current, this.today) > 0;
|
||||
exportFun(){
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<g2-custom delay="200" (render)="render($event)"></g2-custom>
|
||||
@ -1,72 +0,0 @@
|
||||
/*
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-04-06 14:32:03
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-18 14:25:25
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\busitable\\pillar\\pillar.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';
|
||||
@Component({
|
||||
selector: 'app-busitable-pillar',
|
||||
templateUrl: './pillar.component.html',
|
||||
styleUrls: ['./pillar.component.less']
|
||||
})
|
||||
export class BusitablePillarComponent 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() {
|
||||
this.chart.data(this.chartData);
|
||||
this.chart.render();
|
||||
}
|
||||
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);
|
||||
|
||||
const itemTpl = `
|
||||
<div style="padding: 15px; color: red">
|
||||
业绩量: {value}
|
||||
</div>
|
||||
`
|
||||
this.chart.tooltip({
|
||||
showTitle: true,
|
||||
showMarkers: false,
|
||||
itemTpl: itemTpl
|
||||
});
|
||||
this.chart.interval().position('time*number');
|
||||
this.chart.render();
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
<!--
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-03-30 13:55:41
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-18 16:13:49
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\compliance\\customer\\customer.component.html
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
-->
|
||||
<!-- 页头 -->
|
||||
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
|
||||
<nz-card>
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col [nzXl]="24" [nzLg]="24" [nzSm]="24" [nzXs]="24">
|
||||
<sf #sf [schema]="searchSchema" button="none"
|
||||
[ui]="{ '*': { spanLabelFixed: 0, grid: { xxl:5,xl:4, lg: 8, md: 12, sm: 12, xs: 24,gutter:20 } } }"
|
||||
[compact]="true">
|
||||
<ng-template sf-template="no4" let-me let-ui="ui" let-schema="schema">
|
||||
<div class="chooseBox">
|
||||
<div class="timeBox">
|
||||
<nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()" acl [acl-ability]="['customer-search']">
|
||||
<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>
|
||||
</sf>
|
||||
</div>
|
||||
</div>
|
||||
<st #st multiSort [scroll]="{ x: '2000px' }" [data]="service.$api_listCusComplianceReportPage" [columns]="columns"
|
||||
[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: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }" [loading]="false">
|
||||
<ng-template st-row="freightPrice" let-item let-index="index">
|
||||
{{ item.freightPrice | currency }}
|
||||
</ng-template>
|
||||
</st>
|
||||
</nz-card>
|
||||
@ -1,20 +0,0 @@
|
||||
.chooseBox {
|
||||
display: flex;
|
||||
float : right;
|
||||
}
|
||||
|
||||
.timeBox {
|
||||
display: flex;
|
||||
margin : 0 0 0 10px;
|
||||
}
|
||||
|
||||
.dateBox {
|
||||
display: inline-block;
|
||||
margin : 0 0 0 10px;
|
||||
}
|
||||
|
||||
:host::ng-deep {
|
||||
.ant-form-item-control {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,153 +0,0 @@
|
||||
import { SFComponent } from '@delon/form';
|
||||
/*
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-03-30 13:55:41
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-19 17:45:44
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\compliance\\customer\\customer.component.ts
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
*/
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { STColumn, STComponent, STRequestOptions } from '@delon/abc/st';
|
||||
import { SFSchema } from '@delon/form';
|
||||
import { ModalHelper, _HttpClient, DatePipe } from '@delon/theme';
|
||||
import { DataService } from '../../../services/data.service';
|
||||
import { differenceInCalendarDays } from 'date-fns';
|
||||
import { Placeholder } from '@angular/compiler/src/i18n/i18n_ast';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-compliance-customer',
|
||||
templateUrl: './customer.component.html',
|
||||
styleUrls: ['./customer.component.less'],
|
||||
providers: [DatePipe]
|
||||
})
|
||||
export class DatatableComplianceCustomerComponent implements OnInit {
|
||||
@ViewChild('sf', { static: false }) sf!: SFComponent;
|
||||
mode = 'year';
|
||||
type = 1;
|
||||
date: any = null;
|
||||
defineDate = [];
|
||||
time: any = ['2022'];
|
||||
dateFormat = 'yyyy';
|
||||
dateNext: any = null;
|
||||
modeNext = 'year';
|
||||
timeNext: any = ['2022-01-01 00:00:00'];
|
||||
today = new Date();
|
||||
searchSchema: SFSchema = {
|
||||
properties: {
|
||||
customerName: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
placeholder: '请输入客户名称',
|
||||
change: (value: any) => {
|
||||
console.log(value);
|
||||
this.st.reload({ ...this.reqParams });
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
salesmanName: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
placeholder: '请输入业务员',
|
||||
change: (value: any) => {
|
||||
this.st.reload({ ...this.reqParams });
|
||||
}
|
||||
}
|
||||
},
|
||||
partnerName: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
placeholder: '请输入客户名称',
|
||||
change: (value: any) => {
|
||||
console.log(value);
|
||||
this.st.reload({ ...this.reqParams });
|
||||
}
|
||||
}
|
||||
},
|
||||
no4: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
class: 'custom',
|
||||
widget: 'custom',
|
||||
grid: { xxl: 9, xl: 12, lg: 24, md: 24, sm: 24, xs: 24 }
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ViewChild('st') private readonly st!: STComponent;
|
||||
columns: STColumn[] = [
|
||||
{ title: '公司名称',width: '200px', index: 'enterpriseName' ,},
|
||||
{ title: '注册时间', width: '200px', index: 'registerTime',},
|
||||
{ title: '客户类型', width: '200px', index: 'customerType' },
|
||||
{ title: '业务员',width: '200px', index: 'salesmanName' },
|
||||
{ title: '合伙人',width: '200px', index: 'partnerName' },
|
||||
{ title: '订单数',width: '200px', index: 'billCounts' },
|
||||
{ title: '订单不合格数',width: '200px', index: 'billQuaCounts' },
|
||||
{ title: '订单不合格率',width: '200px', index: 'billQuaCountsPer' },
|
||||
{ title: '货源单订单数',width: '200px', index: 'gsourceCounts' },
|
||||
{ title: '合同单数', width: '200px',index: 'billConCounts' },
|
||||
{ title: '货源单个',width: '200px', index: 'gsourceCounts' },
|
||||
{ title: '运费直付单数',width: '200px', index: 'freightDirPayCounts' },
|
||||
{ title: '运费代收单数',width: '200px', index: 'freightRepPayCounts' },
|
||||
{ title: '手机直付', width: '200px',index: 'updatedAt' },
|
||||
{ title: '汇款单数',width: '200px', index: 'updatedAt' },
|
||||
{ title: '及时付款',width: '200px', index: 'timelyPayPer' },
|
||||
|
||||
];
|
||||
|
||||
constructor(private http: _HttpClient, private modal: ModalHelper, public service: DataService, private datePipe: DatePipe) {}
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
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;
|
||||
}
|
||||
const params: any = Object.assign({}, this.sf?.value || {});
|
||||
params.type = this.type;
|
||||
params.queryTime = this.time;
|
||||
delete params._$expand;
|
||||
return { ...params };
|
||||
}
|
||||
ngOnInit(): void {}
|
||||
onChange(result: any) {
|
||||
if (this.mode === 'year') {
|
||||
this.time = [this.datePipe.transform(this.date, 'yyyy')];
|
||||
} else if (this.mode === 'month') {
|
||||
this.time = [this.datePipe.transform(this.date, 'yyyy-MM')];
|
||||
} else if (this.mode === 'date') {
|
||||
this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd')];
|
||||
} else {
|
||||
this.time = [
|
||||
this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd'),
|
||||
this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd')
|
||||
];
|
||||
}
|
||||
this.st.reload({ ...this.reqParams });
|
||||
}
|
||||
changeData() {
|
||||
if (this.mode === 'year') {
|
||||
this.dateFormat = 'yyyy';
|
||||
} else if (this.mode === 'month') {
|
||||
this.dateFormat = 'yyyy-MM';
|
||||
} else {
|
||||
this.dateFormat = 'yyyy-MM-dd';
|
||||
}
|
||||
}
|
||||
disabledDate = (current: Date): boolean =>
|
||||
// Can not select days before today and today
|
||||
differenceInCalendarDays(current, this.today) > 0;
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
<g2-custom delay="100" (render)="render($event)"></g2-custom>
|
||||
|
||||
@ -1,91 +0,0 @@
|
||||
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
|
||||
import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
|
||||
|
||||
// import DataSet from '@antv/data-set';
|
||||
const DataSet = require('@antv/data-set');
|
||||
import { Chart } from '@antv/g2';
|
||||
import { DataService } from 'src/app/routes/datatable/services/data.service';
|
||||
@Component({
|
||||
selector: 'app-compliance-curve',
|
||||
templateUrl: './curve.component.html',
|
||||
styleUrls: ['./curve.component.less']
|
||||
})
|
||||
export class ComplianceCurveComponent 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(() => {
|
||||
console.log(this.chartData)
|
||||
this.ngZone.runOutsideAngular(() => this.init(this.el));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
private init(el: HTMLElement): void {
|
||||
this.chart = new Chart({
|
||||
container: el,
|
||||
autoFit: true,
|
||||
height: 500,
|
||||
});
|
||||
|
||||
this.chart.data(this.chartData);
|
||||
this.chart.scale({
|
||||
time: {
|
||||
range: [0, 1],
|
||||
},
|
||||
number: {
|
||||
min: 0,
|
||||
nice: true,
|
||||
},
|
||||
});
|
||||
|
||||
this.chart.tooltip({
|
||||
showCrosshairs: true,
|
||||
shared: true,
|
||||
});
|
||||
|
||||
this.chart.axis('proportion', {
|
||||
label: {
|
||||
formatter: (val: any) => {
|
||||
return val*100+ ' %';
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
this.chart
|
||||
.line()
|
||||
.position('situationDate*proportion')
|
||||
.color('type')
|
||||
.tooltip('proportion*type', function(name: any, value: any) {
|
||||
return {
|
||||
name: name*100+'%',
|
||||
value: value
|
||||
};
|
||||
});
|
||||
|
||||
this.chart.render();
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,67 +0,0 @@
|
||||
<!-- 页头 -->
|
||||
<page-header-wrapper [title]="'合规监控报表'"></page-header-wrapper>
|
||||
<nz-card>
|
||||
<!-- 搜索区 -->
|
||||
<div nz-row>
|
||||
<div nz-col nzSpan="18">
|
||||
<sf #sf [ui]="ui" [schema]="schema" [button]="'none'"></sf>
|
||||
</div>
|
||||
<div nz-col nzSpan="6">
|
||||
<div class="chooseBox">
|
||||
<div class="timeBox">
|
||||
<nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()" acl [acl-ability]="['index-lRateQualified']">
|
||||
<label nz-radio-button nzValue="year">年</label>
|
||||
<label nz-radio-button nzValue="month">月</label>
|
||||
</nz-radio-group>
|
||||
<div class="dateBox">
|
||||
<nz-date-picker [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" (ngModelChange)="onChange($event)"></nz-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nz-card>
|
||||
|
||||
<div nz-row [nzGutter]="16">
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'订单合格率'" [bordered]="true" [total]="cardData1?.proportion" [footer]="footer1" contentHeight="46">
|
||||
<ng-template #footer1>
|
||||
<div class="card-f">
|
||||
<span class="card-f-l">合格:{{cardData1?.leftQuantity}}</span> <span>不合格:{{cardData1?.rightQuantity}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</g2-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'货源单占比'" [bordered]="true" [total]="cardData2?.proportion" [footer]="footer2" contentHeight="46">
|
||||
<ng-template #footer2>
|
||||
<div class="card-f">
|
||||
<span class="card-f-l">货源单:{{cardData2?.leftQuantity}}</span> <span>合同单:{{cardData2?.rightQuantity}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</g2-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'运费直付占比'" [bordered]="true" [total]="cardData3?.proportion" [footer]="footer3" contentHeight="46">
|
||||
<ng-template #footer3>
|
||||
<div class="card-f">
|
||||
<span class="card-f-l">司机:{{cardData3?.leftQuantity}}</span> <span>车队长:{{cardData3?.rightQuantity}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</g2-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'付款及时率'" [bordered]="true" [total]="cardData4?.proportion" [footer]="footer4" contentHeight="46">
|
||||
<ng-template #footer4>
|
||||
<div class="card-f">
|
||||
<span class="card-f-l">准时:{{cardData4?.leftQuantity}}</span> <span>逾期:{{cardData4?.rightQuantity}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</g2-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nz-card nzTitle="平台合规情况监控报表">
|
||||
<app-compliance-curve #curve [chartData]="chartData"></app-compliance-curve>
|
||||
<!-- <g2-custom delay="100" (render)="render($event)"></g2-custom> -->
|
||||
</nz-card>
|
||||
@ -1,17 +0,0 @@
|
||||
.card-f{
|
||||
color: #5a5a5a;
|
||||
.card-f-l{
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
.chooseBox{
|
||||
display: flex;
|
||||
}
|
||||
.timeBox{
|
||||
display: flex;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.dateBox{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
@ -1,263 +0,0 @@
|
||||
import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
|
||||
import { DatePipe, ModalHelper, _HttpClient } from '@delon/theme';
|
||||
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
|
||||
import { format } from 'date-fns';
|
||||
import { SFComponent, SFDateWidgetSchema, SFRadioWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
|
||||
import { G2TimelineData, G2TimelineMap } from '@delon/chart/timeline';
|
||||
import { Chart } from '@antv/g2';
|
||||
import { DataService } from '../../../services/data.service';
|
||||
import { ComplianceCurveComponent } from './curve/curve.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-compliance-index',
|
||||
templateUrl: './index.component.html',
|
||||
styleUrls: ['./index.component.less'],
|
||||
providers: [DatePipe]
|
||||
})
|
||||
export class DatatableComplianceIndexComponent implements OnInit {
|
||||
@ViewChild('curve') private readonly curve!: ComplianceCurveComponent;
|
||||
@ViewChild('sf', { static: false })
|
||||
|
||||
sf!: SFComponent;
|
||||
ui!: SFUISchema;
|
||||
schema: SFSchema = {};
|
||||
|
||||
mode = 'year';
|
||||
date: any = null;
|
||||
dateFormat = 'yyyy';
|
||||
time: any = '2022'
|
||||
chartData: any = {}
|
||||
|
||||
cardData1:any;
|
||||
cardData2:any;
|
||||
cardData3:any;
|
||||
cardData4:any;
|
||||
|
||||
constructor(private http: _HttpClient, private modal: ModalHelper, private ngZone: NgZone,public service: DataService, private datePipe: DatePipe) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initSF();
|
||||
this.initdData();
|
||||
}
|
||||
|
||||
initdData(){
|
||||
const params ={
|
||||
...this.sf?.value,
|
||||
timeType:this.mode ==='month'?'M':'Y',
|
||||
time:this.time
|
||||
}
|
||||
this.service.request(this.service.$api_getBillRateQualified, params).subscribe(res => {
|
||||
if (res) {
|
||||
this.cardData1 = res;
|
||||
this.cardData1.proportion = this.cardData1.proportion*100 +'%'
|
||||
}
|
||||
});
|
||||
this.service.request(this.service.$api_getBillRateProportion, params).subscribe(res => {
|
||||
if (res) {
|
||||
this.cardData2 = res;
|
||||
this.cardData2.proportion = this.cardData2.proportion*100 +'%'
|
||||
}
|
||||
});
|
||||
this.service.request(this.service.$api_getBillRateDirectPayment, params).subscribe(res => {
|
||||
if (res) {
|
||||
this.cardData3 = res;
|
||||
this.cardData3.proportion = this.cardData3.proportion*100 +'%'
|
||||
}
|
||||
});
|
||||
this.service.request(this.service.$api_getBillTimelyPayment, params).subscribe(res => {
|
||||
if (res) {
|
||||
this.cardData4 = res;
|
||||
this.cardData4.proportion = this.cardData4.proportion*100 +'%'
|
||||
}
|
||||
});
|
||||
|
||||
this.service.request(this.service.$api_listMonitorSituation, params).subscribe(res => {
|
||||
if (res) {
|
||||
this.chartData = res
|
||||
this.curve.reRender();
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
changeData(){
|
||||
if(this.mode === 'year') {
|
||||
this.dateFormat = 'yyyy'
|
||||
} else if(this.mode === 'month') {
|
||||
this.dateFormat = 'yyyy-MM'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onChange(result: any) {
|
||||
if(result === null) {
|
||||
return
|
||||
}
|
||||
if(this.mode === 'year') {
|
||||
this.time = this.datePipe.transform(this.date, 'yyyy')
|
||||
} else if(this.mode === 'month') {
|
||||
this.time = this.datePipe.transform(this.date, 'yyyy-MM')
|
||||
}
|
||||
this.initdData();
|
||||
}
|
||||
|
||||
initSF() {
|
||||
this.schema = {
|
||||
properties: {
|
||||
enterpriseInfoId: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '网络货运人',
|
||||
asyncData: () => this.service.getNetworkFreightForwarder({}),
|
||||
change:()=>{
|
||||
this.initdData();
|
||||
},
|
||||
allowClear: true
|
||||
}
|
||||
},
|
||||
enterpriseProjectId: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '部门'
|
||||
}
|
||||
},
|
||||
salesmanId: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
placeholder: '业务员',
|
||||
enter: () => this.initdData(),
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
this.ui = {
|
||||
'*': {
|
||||
grid: { span: 4 }
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
render(el: ElementRef<HTMLDivElement>) {
|
||||
this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
|
||||
}
|
||||
|
||||
private init(el: HTMLElement): void {
|
||||
const chart = new Chart({
|
||||
container: el,
|
||||
autoFit: true,
|
||||
height: 400
|
||||
});
|
||||
// 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
|
||||
const data = [
|
||||
{ data: '1月', label: '订单合格率', value: 5 },
|
||||
{ data: '2月', label: '订单合格率', value: 10 },
|
||||
{ data: '3月', label: '订单合格率', value: 25 },
|
||||
{ data: '4月', label: '订单合格率', value: 35 },
|
||||
{ data: '5月', label: '订单合格率', value: 15 },
|
||||
{ data: '6月', label: '订单合格率', value: 5 },
|
||||
{ data: '7月', label: '订单合格率', value: 95 },
|
||||
{ data: '8月', label: '订单合格率', value: 45 },
|
||||
|
||||
{ data: '1月', label: '付款及时率', value: 10 },
|
||||
{ data: '2月', label: '付款及时率', value: 15 },
|
||||
{ data: '3月', label: '付款及时率', value: 30 },
|
||||
{ data: '4月', label: '付款及时率', value: 8 },
|
||||
{ data: '5月', label: '付款及时率', value: 9 },
|
||||
{ data: '6月', label: '付款及时率', value: 5 },
|
||||
{ data: '7月', label: '付款及时率', value: 80 },
|
||||
{ data: '8月', label: '付款及时率', value: 55 },
|
||||
|
||||
{ data: '1月', label: '货源占比率', value: 90 },
|
||||
{ data: '2月', label: '货源占比率', value: 30 },
|
||||
{ data: '3月', label: '货源占比率', value: 45 },
|
||||
{ data: '4月', label: '货源占比率', value: 35 },
|
||||
{ data: '5月', label: '货源占比率', value: 95 },
|
||||
{ data: '6月', label: '货源占比率', value: 35 },
|
||||
{ data: '7月', label: '货源占比率', value: 65 },
|
||||
{ data: '8月', label: '货源占比率', value: 63 },
|
||||
|
||||
{ data: '1月', label: '运费直付占比', value: 30 },
|
||||
{ data: '2月', label: '运费直付占比', value: 60 },
|
||||
{ data: '3月', label: '运费直付占比', value: 25 },
|
||||
{ data: '4月', label: '运费直付占比', value: 35 },
|
||||
{ data: '5月', label: '运费直付占比', value: 15 },
|
||||
{ data: '6月', label: '运费直付占比', value: 55 },
|
||||
{ data: '7月', label: '运费直付占比', value: 50 },
|
||||
{ data: '8月', label: '运费直付占比', value: 30 },
|
||||
];
|
||||
|
||||
chart.data(data);
|
||||
//刻度自定义
|
||||
chart.scale({
|
||||
data: {
|
||||
range: [0, 1],
|
||||
},
|
||||
value: {
|
||||
min: 0,
|
||||
nice: true,
|
||||
},
|
||||
});
|
||||
// 图表下方图形文字自定义
|
||||
chart.legend({
|
||||
items:[
|
||||
{
|
||||
name: '订单合格率',
|
||||
value: 'node_load1',
|
||||
marker: {
|
||||
symbol: 'circle',
|
||||
style: {fill: '#6193f7'}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '付款及时率',
|
||||
value: 'node_load2',
|
||||
marker: {symbol: 'circle',style: {fill: '#58d3a2'}},
|
||||
},
|
||||
{
|
||||
name: '货源占比率',
|
||||
value: 'node_load13',
|
||||
marker: {symbol: 'circle',style: {fill: '#5b6d8f'}},
|
||||
},
|
||||
{
|
||||
name: '运费直付占比',
|
||||
value: 'node_load13',
|
||||
marker: {symbol: 'circle',style: {fill: '#f0b915'}},
|
||||
},
|
||||
]
|
||||
});
|
||||
// 提示自定义
|
||||
chart.tooltip({
|
||||
showCrosshairs: true,
|
||||
shared: true,
|
||||
});
|
||||
|
||||
//数据格式化
|
||||
chart.axis('value', {
|
||||
label: {
|
||||
formatter: (val) => {
|
||||
return val + ' %';
|
||||
},
|
||||
},
|
||||
});
|
||||
// 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
|
||||
chart.line().position('data*value').color('label').tooltip('label*value', (name:any, value:any) => {
|
||||
return {
|
||||
name: name,
|
||||
value: value + '%'
|
||||
};
|
||||
});;
|
||||
// 在x*y的坐标上按z值绘制圆点
|
||||
chart.point().position('data*value').size(4).color('label').shape('circle');
|
||||
chart.render();
|
||||
}
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
<!--
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-03-30 17:57:46
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-18 17:21:43
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\compliance\\salesman\\salesman.component.html
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
-->
|
||||
<!-- 页头 -->
|
||||
<page-header-wrapper [title]="'业务员-合规报告'"></page-header-wrapper>
|
||||
<nz-card >
|
||||
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col [nzXl]="24" [nzLg]="24" [nzSm]="24" [nzXs]="24">
|
||||
<sf #sf [schema]="searchSchema" button="none"
|
||||
[ui]="{ '*': { spanLabelFixed: 0, grid: { xxl:5,xl:4, lg: 8, md: 12, sm: 12, xs: 24,gutter:20 } } }"
|
||||
[compact]="true">
|
||||
<ng-template sf-template="no4" let-me let-ui="ui" let-schema="schema">
|
||||
<div class="chooseBox">
|
||||
<div class="timeBox">
|
||||
<nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()" acl [acl-ability]="['salesman-ComplianceReportPage']">
|
||||
<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>
|
||||
</sf>
|
||||
</div>
|
||||
</div>
|
||||
<st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listPartComplianceReportPage"
|
||||
[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>
|
||||
</nz-card>
|
||||
@ -1,20 +0,0 @@
|
||||
.chooseBox {
|
||||
display: flex;
|
||||
float : right;
|
||||
}
|
||||
|
||||
.timeBox {
|
||||
display: flex;
|
||||
margin : 0 0 0 10px;
|
||||
}
|
||||
|
||||
.dateBox {
|
||||
display: inline-block;
|
||||
margin : 0 0 0 10px;
|
||||
}
|
||||
|
||||
:host::ng-deep {
|
||||
.ant-form-item-control {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,220 +0,0 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { STColumn, STComponent } from '@delon/abc/st';
|
||||
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
|
||||
import { DatePipe, _HttpClient } from '@delon/theme';
|
||||
import { differenceInCalendarDays } from 'date-fns';
|
||||
import { DataService } from '../../../services/data.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-compliance-salesman',
|
||||
templateUrl: './salesman.component.html',
|
||||
styleUrls: ['./salesman.component.less'],
|
||||
providers: [DatePipe]
|
||||
|
||||
})
|
||||
export class DatatableComplianceSalesmanComponent implements OnInit {
|
||||
url = `/user`;
|
||||
@ViewChild('st', { static: false }) st!: STComponent;
|
||||
@ViewChild('sf', { static: false }) sf!: SFComponent;
|
||||
_$expand = false;
|
||||
type = 1;
|
||||
mode = 'year';
|
||||
date: any = null;
|
||||
defineDate = [];
|
||||
time: any = ['2022-01-01 00:00:00']
|
||||
dateFormat = 'yyyy';
|
||||
today = new Date();
|
||||
ui: SFUISchema = {};
|
||||
schema: SFSchema = {};
|
||||
isLoading: boolean = false;
|
||||
searchSchema: SFSchema = {
|
||||
properties: {
|
||||
department: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
placeholder: '请选择部门',
|
||||
change: (value: any) => {
|
||||
console.log(value);
|
||||
this.st.reload({ ...this.reqParams });
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
customerName: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
placeholder: '请输入业务员',
|
||||
change: (value: any) => {
|
||||
console.log(value);
|
||||
this.st.reload({ ...this.reqParams });
|
||||
}
|
||||
},
|
||||
},
|
||||
salesmanName: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
placeholder: '请输入客户名称',
|
||||
change: (value: any) => {
|
||||
this.st.reload({ ...this.reqParams });
|
||||
}
|
||||
}
|
||||
},
|
||||
no4: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
class: 'custom',
|
||||
widget: 'custom',
|
||||
grid: { xxl: 9, xl: 10, lg: 12, md: 24, sm: 24, xs: 24 }
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
columns: STColumn[] = [
|
||||
{ title: '部门', index: 'department', className: 'text-center', width: '200px' },
|
||||
{ title: '业务员', index: 'salesmen', className: 'text-center', width: '100px' },
|
||||
{ title: '客户数', index: 'cusCount', className: 'text-right', width: '100px', },
|
||||
{ title: '订单数', index: 'billCount', className: 'text-center', width: '120px' },
|
||||
{ title: '订单合格率', index: 'billComPer', className: 'text-right', width: '100px',format: (item: any) => {return ((item?.billComPer)*100).toFixed(2) + '%' }},
|
||||
{ title: '付款及时率', index: 'payTimePer', className: 'text-center', width: '130px',format: (item: any) => {return ((item?.payTimePer)*100).toFixed(2) + '%' } },
|
||||
{ title: '货源单占比', index: 'goodResPer', className: 'text-right', width: '120px',format: (item: any) => {return ((item?.goodResPer)*100).toFixed(2) + '%' } },
|
||||
{ title: '运费直付占比', index: 'feightPayPer', className: 'text-right', width: '100px', format: (item: any) => {return ((item?.feightPayPer)*100).toFixed(2) + '%' } },
|
||||
];
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
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,
|
||||
...this.sf?.value
|
||||
};
|
||||
|
||||
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 } },
|
||||
enterpriseName: {
|
||||
type: 'string',
|
||||
title: '货主名称',
|
||||
ui: {
|
||||
placeholder: '请输入',
|
||||
}
|
||||
},
|
||||
customerType: {
|
||||
type: 'string',
|
||||
title: '客户类型',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '请选择',
|
||||
},
|
||||
enum: [
|
||||
{label: '直客', value: 2},
|
||||
{label: '渠道客户', value: 3},
|
||||
{label: '平台客户', value: 1},
|
||||
]
|
||||
},
|
||||
customerStatus: {
|
||||
type: 'string',
|
||||
title: '客户状态',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '请选择',
|
||||
},
|
||||
enum: [
|
||||
{label: '未激活', value: 1},
|
||||
{label: '沉默', value: 2},
|
||||
{label: '流失', value: 3},
|
||||
{label: '活跃', value: 4},
|
||||
]
|
||||
},
|
||||
registerTime: {
|
||||
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(result === null) {
|
||||
return
|
||||
}
|
||||
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;
|
||||
this.isLoading = true
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<g2-custom delay="100" (render)="render($event)"></g2-custom>
|
||||
@ -1,92 +0,0 @@
|
||||
/*
|
||||
* @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';
|
||||
@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)
|
||||
console.log(this.chartData);
|
||||
}
|
||||
|
||||
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,99 +0,0 @@
|
||||
<!--
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-04-06 13:20:56
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-19 15:52:16
|
||||
* @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]="hzData?.total || '0'" [footer]="'已认证' + ' ' + hzData?.auditPassTotal" contentHeight="46">
|
||||
</g2-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'合伙人'" [bordered]="true" [total]="hhrData?.total || '0'" [footer]="'已认证' + ' ' + hhrData?.auditPassTotal" contentHeight="46">
|
||||
</g2-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'司机'" [bordered]="true" [total]="sjData?.total || '0'" [footer]="'已认证' + ' ' + sjData?.auditPassTotal" contentHeight="46">
|
||||
</g2-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="6">
|
||||
<g2-card [title]="'车辆'" [bordered]="true" [total]="clData?.total || '0'" [footer]="'已认证' + ' '+ clData?.auditPassTotal" 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()" acl [acl-ability]="['customindex-client']">
|
||||
<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]="reportData"
|
||||
[scroll]="{ x: '1200px' }"
|
||||
[res]="{ reName: { list: 'data', total: 'data.total' } }"
|
||||
[page]="{ show: false, showSize: false, pageSizes: [20, 50, 100] }"
|
||||
>
|
||||
<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>
|
||||
<div *ngIf="item.type == '4'">车辆</div>
|
||||
</ng-template>
|
||||
</st>
|
||||
</nz-card>
|
||||
<nz-card nzTitle="用户新增报表" [nzExtra]="extraTemplate01">
|
||||
<ng-template #extraTemplate01>
|
||||
<div class="chooseBox">
|
||||
<div class="timeBox">
|
||||
<nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext2()" acl [acl-ability]="['customindex-totalAdd']">
|
||||
<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"
|
||||
[(ngModel)]="dateNext"
|
||||
[nzMode]="modeNext"
|
||||
(ngModelChange)="onChangeNext($event)"
|
||||
></nz-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<app-datatable-customindex-curve #curve [chartData]="chartData"></app-datatable-customindex-curve>
|
||||
</nz-card>
|
||||
@ -1,11 +0,0 @@
|
||||
.chooseBox{
|
||||
display: flex;
|
||||
}
|
||||
.timeBox{
|
||||
display: flex;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.dateBox{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { DatatableCustomindexComponent } from './customindex.component';
|
||||
|
||||
describe('DatatableCustomindexComponent', () => {
|
||||
let component: DatatableCustomindexComponent;
|
||||
let fixture: ComponentFixture<DatatableCustomindexComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DatatableCustomindexComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DatatableCustomindexComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,236 +0,0 @@
|
||||
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';
|
||||
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('sf', { static: false }) sf!: SFComponent;
|
||||
@ViewChild('curve') private readonly curve!: DatatableCustomindexCurveComponent;
|
||||
type = 1;
|
||||
mode = 'year';
|
||||
date: any = null;
|
||||
defineDate = [];
|
||||
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 = [];
|
||||
flag = false;
|
||||
|
||||
columns: STColumn[] = [
|
||||
{ title: '用户类型', render: 'type', 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',format: (item: any) => {return ((item?.drainRate)*100).toFixed(2) + '%' }}
|
||||
];
|
||||
hzData: any;
|
||||
hhrData: any = {
|
||||
total: 0
|
||||
};
|
||||
sjData: any;
|
||||
clData: any;
|
||||
reportData: any = [];
|
||||
|
||||
constructor(public service: DataService, private datePipe: DatePipe) {}
|
||||
ngOnInit(): void {
|
||||
this.initCurveData();
|
||||
}
|
||||
initCurveData() {
|
||||
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, {
|
||||
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, {
|
||||
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;
|
||||
}
|
||||
});
|
||||
this.service.request(this.service.$api_statistics_total, { type: 2 }).subscribe(res => {
|
||||
if (res) {
|
||||
|
||||
this.hhrData = res;
|
||||
console.log(this.hhrData);
|
||||
|
||||
}
|
||||
});
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
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';
|
||||
} else if (this.mode === 'month') {
|
||||
this.dateFormat = 'yyyy-MM';
|
||||
} else {
|
||||
this.dateFormat = 'yyyy-MM-dd';
|
||||
}
|
||||
}
|
||||
onChange(result: any) {
|
||||
if (this.mode === 'year') {
|
||||
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.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.timeStart=this.datePipe.transform(this.date, 'yyyy-MM-dd');
|
||||
this.timeEnd = this.datePipe.transform(this.date, 'yyyy-MM-dd') ;
|
||||
} else {
|
||||
this.timeStart = this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') ;
|
||||
this.timeEnd = this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd');
|
||||
}
|
||||
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;
|
||||
|
||||
changeDataNext2() {
|
||||
if (this.modeNext === 'year') {
|
||||
this.dateFormat = 'yyyy';
|
||||
} else if (this.modeNext === 'month') {
|
||||
this.dateFormat = 'yyyy-MM';
|
||||
}
|
||||
}
|
||||
onChangeNext(result: any) {
|
||||
if (result === null) {
|
||||
return;
|
||||
}
|
||||
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.addData(this.modeNext, this.timeNext);
|
||||
}
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
<!-- 页头 -->
|
||||
<page-header-wrapper [title]="'司机报表'"></page-header-wrapper>
|
||||
<nz-card>
|
||||
<!-- 搜索表单 -->
|
||||
<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]="isLoading && st.loading" (click)="search()"acl [acl-ability]="['driver-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 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_listDriverReportPage"
|
||||
[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>
|
||||
</nz-card>
|
||||
@ -1,11 +0,0 @@
|
||||
.chooseBox{
|
||||
display: flex;
|
||||
}
|
||||
.timeBox{
|
||||
display: flex;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.dateBox{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { DatatableDriverComponent } from './driver.component';
|
||||
|
||||
describe('DatatableDriverComponent', () => {
|
||||
let component: DatatableDriverComponent;
|
||||
let fixture: ComponentFixture<DatatableDriverComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DatatableDriverComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DatatableDriverComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,178 +0,0 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { STColumn, STComponent } from '@delon/abc/st';
|
||||
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
|
||||
import { DatePipe, _HttpClient } from '@delon/theme';
|
||||
import { differenceInCalendarDays } from 'date-fns';
|
||||
import { DataService } from '../../../services/data.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-driver',
|
||||
templateUrl: './driver.component.html',
|
||||
styleUrls: ['./driver.component.less'],
|
||||
providers: [DatePipe]
|
||||
})
|
||||
export class DatatableDriverComponent implements OnInit {
|
||||
@ViewChild('st', { static: false }) st!: STComponent;
|
||||
@ViewChild('sf', { static: false }) sf!: SFComponent;
|
||||
_$expand = false;
|
||||
type = 1;
|
||||
mode = 'year';
|
||||
date: any = null;
|
||||
defineDate = [];
|
||||
queryTime: any = [new Date().getFullYear()]
|
||||
dateFormat = 'yyyy';
|
||||
today = new Date();
|
||||
ui: SFUISchema = {};
|
||||
schema: SFSchema = {};
|
||||
|
||||
columns: STColumn[] = [
|
||||
{ title: '司机姓名', index: 'driverName', className: 'text-center' },
|
||||
{ title: '手机号', index: 'driverPhone', className: 'text-center' },
|
||||
{ title: '注册时间', index: 'driverRegisterTime', className: 'text-center' },
|
||||
{
|
||||
title: '司机状态', index: 'driverStatus', className: 'text-center', type: 'enum', enum: {
|
||||
0: '未激活',
|
||||
1: '活跃',
|
||||
2: '沉默',
|
||||
3: '流失',
|
||||
}
|
||||
},
|
||||
{ title: '运单数', index: 'wbAllCount', className: 'text-center' },
|
||||
{ title: '待接单运单', index: 'wbWaitCount', className: 'text-center' },
|
||||
{ title: '已完成运单', index: 'wbOverCount', className: 'text-center' },
|
||||
{ title: '运费金额', index: 'wbAllAmount', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.wbAllAmount }) } },
|
||||
{ title: '已收运费金额', index: 'wbGetAmount', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.wbGetAmount }) } },
|
||||
{ title: '待收运费金额', index: 'wbWaitAmount', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.wbWaitAmount }) } },
|
||||
];
|
||||
isLoading: boolean = false;
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
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 = {
|
||||
queryTime: this.queryTime,
|
||||
...this.sf?.value
|
||||
};
|
||||
|
||||
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 } },
|
||||
driverName: {
|
||||
type: 'string',
|
||||
title: '司机姓名',
|
||||
ui: {
|
||||
placeholder: '请输入',
|
||||
}
|
||||
},
|
||||
driverPhone: {
|
||||
type: 'string',
|
||||
title: '手机号',
|
||||
ui: {
|
||||
placeholder: '请选择',
|
||||
}
|
||||
},
|
||||
driverStatus: {
|
||||
type: 'string',
|
||||
title: '司机状态',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '请选择',
|
||||
},
|
||||
enum: [
|
||||
{ label: '未激活', value: 0 },
|
||||
{ label: '活跃', value: 1 },
|
||||
{ label: '沉默', value: 2 },
|
||||
{ label: '流失', value: 3 },
|
||||
]
|
||||
},
|
||||
driverRegisterTime: {
|
||||
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'
|
||||
}
|
||||
}
|
||||
onChange(result: any) {
|
||||
if(result === null) {
|
||||
return
|
||||
}
|
||||
// if (this.mode === 'year') {
|
||||
// this.queryTime = this.datePipe.transform(this.date, 'yyyy')
|
||||
// } else if (this.mode === 'month') {
|
||||
// this.queryTime = this.datePipe.transform(this.date, 'yyyy-MM')
|
||||
// }
|
||||
|
||||
if(this.mode === 'year') {
|
||||
this.queryTime = [this.datePipe.transform(this.date, 'yyyy')]
|
||||
} else if(this.mode === 'month') {
|
||||
this.queryTime = [this.datePipe.transform(this.date, 'yyyy-MM')]
|
||||
} else if(this.mode === 'date') {
|
||||
this.queryTime = [this.datePipe.transform(this.date, 'yyyy-MM-dd')]
|
||||
} else{
|
||||
this.queryTime = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd'), this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd')]
|
||||
}
|
||||
|
||||
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;
|
||||
this.isLoading = true
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
<!--
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-03-30 17:57:46
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-19 15:09:26
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\customtable\\mancustomtable\\mancustomtable.component.html
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
-->
|
||||
<!-- 页头 -->
|
||||
<page-header-wrapper [title]="'业务员报告'"></page-header-wrapper>
|
||||
<nz-card >
|
||||
<nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate">
|
||||
<nz-tab [nzTitle]="'客户'"></nz-tab>
|
||||
<nz-tab [nzTitle]="'合伙人'"></nz-tab>
|
||||
</nz-tabset>
|
||||
<ng-template #extraTemplate>
|
||||
<div class="chooseBox">
|
||||
<div class="timeBox">
|
||||
<sf #sf [schema]="searchSchema" button="none"
|
||||
[ui]="{ '*': { spanLabelFixed: 0, grid: { xxl:5,xl:4, lg: 8, md: 12, sm: 12, xs: 24,gutter:20 } } }"
|
||||
[compact]="true">
|
||||
<ng-template sf-template="no4" let-me let-ui="ui" let-schema="schema">
|
||||
<div class="chooseBox">
|
||||
<div class="timeBox">
|
||||
<nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()" acl [acl-ability]="['mancustomtable-search']">
|
||||
<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>
|
||||
</sf>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listPartBusinessReportPage"
|
||||
[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>
|
||||
</nz-card>
|
||||
@ -1,20 +0,0 @@
|
||||
.chooseBox {
|
||||
display: flex;
|
||||
float : right;
|
||||
}
|
||||
|
||||
.timeBox {
|
||||
display: flex;
|
||||
margin : 0 0 0 10px;
|
||||
}
|
||||
|
||||
.dateBox {
|
||||
display: inline-block;
|
||||
margin : 0 0 0 10px;
|
||||
}
|
||||
|
||||
:host::ng-deep {
|
||||
.ant-form-item-control {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { DatatableMancustomtableComponent } from './mancustomtable.component';
|
||||
|
||||
describe('DatatableMancustomtableComponent', () => {
|
||||
let component: DatatableMancustomtableComponent;
|
||||
let fixture: ComponentFixture<DatatableMancustomtableComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DatatableMancustomtableComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DatatableMancustomtableComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,345 +0,0 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { STColumn, STComponent } from '@delon/abc/st';
|
||||
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
|
||||
import { DatePipe, _HttpClient } from '@delon/theme';
|
||||
import { differenceInCalendarDays } from 'date-fns';
|
||||
import { DataService } from '../../../services/data.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-mancustomtable',
|
||||
templateUrl: './mancustomtable.component.html',
|
||||
styleUrls: ['./mancustomtable.component.less'],
|
||||
providers: [DatePipe]
|
||||
})
|
||||
export class DatatableMancustomtableComponent implements OnInit {
|
||||
@ViewChild('st', { static: false }) st!: STComponent;
|
||||
@ViewChild('sf', { static: false }) sf!: SFComponent;
|
||||
_$expand = false;
|
||||
type = 1;
|
||||
mode = 'year';
|
||||
date: any = null;
|
||||
defineDate = [];
|
||||
columns: STColumn[] = [];
|
||||
resourceStatus: number = 1;
|
||||
time: any = ['2022-01-01 00:00:00'];
|
||||
dateFormat = 'yyyy';
|
||||
today = new Date();
|
||||
ui: SFUISchema = {};
|
||||
schema: SFSchema = {};
|
||||
isLoading: boolean = false;
|
||||
searchSchema: SFSchema = {
|
||||
properties: {
|
||||
customerName: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
placeholder: '请输入客户名称',
|
||||
change: (value: any) => {
|
||||
console.log(value);
|
||||
this.st.reload({ ...this.reqParams });
|
||||
}
|
||||
}
|
||||
},
|
||||
salesmanName: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
placeholder: '请输入业务员',
|
||||
change: (value: any) => {
|
||||
this.st.reload({ ...this.reqParams });
|
||||
}
|
||||
}
|
||||
},
|
||||
no4: {
|
||||
type: 'string',
|
||||
title: '',
|
||||
ui: {
|
||||
class: 'custom',
|
||||
widget: 'custom',
|
||||
grid: { xxl: 12, xl: 12, lg: 24, md: 24, sm: 24, xs: 24 }
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
initST() {
|
||||
this.columns = [
|
||||
{ title: '部门', index: 'department', className: 'text-center', width: '150px' },
|
||||
{ title: '业务员', index: 'salesmen', className: 'text-center', width: '150px' },
|
||||
{
|
||||
title: '已认证货主数',
|
||||
index: 'certifiedCount',
|
||||
className: 'text-center',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 1 ? false : true;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '已认证合伙人',
|
||||
index: 'certifiedCount',
|
||||
className: 'text-center',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 2 ? false : true;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '新增合伙人数',
|
||||
index: 'addCount',
|
||||
className: 'text-center',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 2 ? false : true;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '合伙人活跃率',
|
||||
index: 'alivePer',
|
||||
className: 'text-center',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 2 ? false : true;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '活跃合伙人数',
|
||||
index: 'aliveCount',
|
||||
className: 'text-center',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 2 ? false : true;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '沉默合伙人数',
|
||||
index: 'silentCount',
|
||||
className: 'text-center',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 2 ? false : true;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '流失合伙人数',
|
||||
index: 'drainCount',
|
||||
className: 'text-center',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 2 ? false : true;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '未激活合伙人数',
|
||||
index: 'notActiveCount',
|
||||
className: 'text-center',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 2 ? false : true;
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: '新增货主数',
|
||||
index: 'addCount',
|
||||
className: 'text-center',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 1 ? false : true;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '货主活跃率',
|
||||
index: 'alivePer',
|
||||
className: 'text-center',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 1 ? false : true;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '活跃货主数',
|
||||
index: 'aliveCount',
|
||||
className: 'text-center',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 1 ? false : true;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '沉默货主数',
|
||||
index: 'silentCount',
|
||||
className: 'text-center',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 1 ? false : true;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '流失货主数',
|
||||
index: 'drainCount',
|
||||
className: 'text-right',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 1 ? false : true;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '未激活货主数',
|
||||
index: 'notActiveCount',
|
||||
className: 'text-center',
|
||||
width: '150px',
|
||||
iif: () => {
|
||||
return this?.resourceStatus !== 1 ? false : true;
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
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,
|
||||
parType: this.resourceStatus,
|
||||
...this.sf?.value
|
||||
};
|
||||
|
||||
delete params._$expand;
|
||||
delete params.sort;
|
||||
return { ...params };
|
||||
}
|
||||
constructor(public service: DataService, private datePipe: DatePipe) {}
|
||||
ngOnInit(): void {
|
||||
this.initSF();
|
||||
this.initST();
|
||||
}
|
||||
/**
|
||||
* 初始化查询表单
|
||||
*/
|
||||
initSF() {
|
||||
this.schema = {
|
||||
properties: {
|
||||
_$expand: { type: 'boolean', ui: { hidden: true } },
|
||||
enterpriseName: {
|
||||
type: 'string',
|
||||
title: '货主名称',
|
||||
ui: {
|
||||
placeholder: '请输入'
|
||||
}
|
||||
},
|
||||
customerType: {
|
||||
type: 'string',
|
||||
title: '客户类型',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '请选择'
|
||||
},
|
||||
enum: [
|
||||
{ label: '直客', value: 2 },
|
||||
{ label: '渠道客户', value: 3 },
|
||||
{ label: '平台客户', value: 1 }
|
||||
]
|
||||
},
|
||||
customerStatus: {
|
||||
type: 'string',
|
||||
title: '客户状态',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '请选择'
|
||||
},
|
||||
enum: [
|
||||
{ label: '未激活', value: 1 },
|
||||
{ label: '沉默', value: 2 },
|
||||
{ label: '流失', value: 3 },
|
||||
{ label: '活跃', value: 4 }
|
||||
]
|
||||
},
|
||||
registerTime: {
|
||||
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 (result === null) {
|
||||
return;
|
||||
}
|
||||
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;
|
||||
this.isLoading = true;
|
||||
}
|
||||
selectChange(e: number) {
|
||||
console.log(e);
|
||||
this.resourceStatus = e + 1;
|
||||
setTimeout(() => {
|
||||
this.st?.resetColumns();
|
||||
this.st?.load(1);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
<!-- 页头 -->
|
||||
<page-header-wrapper [title]="'货主报表'"></page-header-wrapper>
|
||||
<nz-card>
|
||||
<!-- 搜索表单 -->
|
||||
<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]="isLoading && st.loading" (click)="search()" acl [acl-ability]="['owner-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 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_listShipperReportPage"
|
||||
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
|
||||
[scroll]="{ x: '1200px' }" [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
|
||||
[page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }">
|
||||
</st>
|
||||
</nz-card>
|
||||
@ -1,11 +0,0 @@
|
||||
.chooseBox{
|
||||
display: flex;
|
||||
}
|
||||
.timeBox{
|
||||
display: flex;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.dateBox{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { DatatableOwnerComponent } from './owner.component';
|
||||
|
||||
describe('DatatableOwnerComponent', () => {
|
||||
let component: DatatableOwnerComponent;
|
||||
let fixture: ComponentFixture<DatatableOwnerComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DatatableOwnerComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DatatableOwnerComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,190 +0,0 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { STColumn, STComponent } from '@delon/abc/st';
|
||||
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
|
||||
import { DatePipe, _HttpClient } from '@delon/theme';
|
||||
import { differenceInCalendarDays } from 'date-fns';
|
||||
import { DataService } from '../../../services/data.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-owner',
|
||||
templateUrl: './owner.component.html',
|
||||
styleUrls: ['./owner.component.less'],
|
||||
providers: [DatePipe]
|
||||
})
|
||||
export class DatatableOwnerComponent implements OnInit {
|
||||
@ViewChild('st', { static: false }) st!: STComponent;
|
||||
@ViewChild('sf', { static: false }) sf!: SFComponent;
|
||||
_$expand = false;
|
||||
type = 1;
|
||||
mode = 'year';
|
||||
date: any = null;
|
||||
defineDate = [];
|
||||
time: any = ['2022-01-01 00:00:00']
|
||||
dateFormat = 'yyyy';
|
||||
today = new Date();
|
||||
ui: SFUISchema = {};
|
||||
schema: SFSchema = {};
|
||||
isLoading: boolean = false;
|
||||
|
||||
columns: STColumn[] = [
|
||||
{ title: '货主名称', index: 'enterpriseName', className: 'text-center', width: '200px' },
|
||||
{ title: '注册时间', index: 'registerTime', className: 'text-center', width: '200px' },
|
||||
{ title: '客户类型', index: 'customerType', className: 'text-center', width: '100px', type: 'enum', enum: {
|
||||
1: '平台客户',
|
||||
2: '直客',
|
||||
3: '渠道客户'
|
||||
}
|
||||
},
|
||||
{ title: '业务员', index: 'salesmanName', className: 'text-center', width: '100px' },
|
||||
{ title: '合伙人', index: 'partnerName', className: 'text-center', width: '100px' },
|
||||
{ title: '客户状态', index: 'customerStatus', className: 'text-center', width: '100px', type: 'enum', enum: {
|
||||
1: '未激活',
|
||||
2: '流失',
|
||||
3: '活跃',
|
||||
4: '沉默'
|
||||
} },
|
||||
{ title: '订单数', index: 'zsl', className: 'text-center', width: '100px' },
|
||||
{ title: '订单金额', index: 'ddje', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.ddje }) } },
|
||||
{ title: '应收订单数', index: 'ysdds', className: 'text-center', width: '120px' },
|
||||
{ title: '应收金额', index: 'yingsje', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yingsje }) } },
|
||||
{ title: '待开票订单数', index: 'yifyf', className: 'text-center', width: '130px' },
|
||||
{ title: '待开票金额', index: 'dkpdds', className: 'text-right', width: '120px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.dkpdds }) } },
|
||||
{ title: '已收金额', index: 'yisje', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yisje }) } },
|
||||
{ title: '应收附加费', index: 'yingsfjf', className: 'text-right', width: '120px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yingsfjf }) } },
|
||||
{ title: '已收附加费', index: 'yisfjf', className: 'text-right', width: '120px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yisfjf }) } },
|
||||
{ title: '附加费率', index: 'fjfl', className: 'text-center', width: '100px' },
|
||||
{ title: '已开票金额', index: 'ykpje', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.ykpje }) } },
|
||||
];
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
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,
|
||||
...this.sf?.value
|
||||
};
|
||||
|
||||
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 } },
|
||||
enterpriseName: {
|
||||
type: 'string',
|
||||
title: '货主名称',
|
||||
ui: {
|
||||
placeholder: '请输入',
|
||||
}
|
||||
},
|
||||
customerType: {
|
||||
type: 'string',
|
||||
title: '客户类型',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '请选择',
|
||||
},
|
||||
enum: [
|
||||
{label: '直客', value: 2},
|
||||
{label: '渠道客户', value: 3},
|
||||
{label: '平台客户', value: 1},
|
||||
]
|
||||
},
|
||||
customerStatus: {
|
||||
type: 'string',
|
||||
title: '客户状态',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '请选择',
|
||||
},
|
||||
enum: [
|
||||
{label: '未激活', value: 1},
|
||||
{label: '流失', value: 2},
|
||||
{label: '活跃', value: 3},
|
||||
{label: '沉默', value: 4},
|
||||
]
|
||||
},
|
||||
registerTime: {
|
||||
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(result === null) {
|
||||
return
|
||||
}
|
||||
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;
|
||||
this.isLoading = true
|
||||
}
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
<!-- <page-header [title]="'订单管理'"> </page-header> -->
|
||||
<nz-card [nzBordered]="false">
|
||||
<!-- 搜索表单 -->
|
||||
<div nz-row nzGutter="8">
|
||||
<!-- 查询字段小于或等于3个时,不显示伸缩按钮 -->
|
||||
<div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
|
||||
<sf #sf mode="search" [schema]="schema" [button]="'none'">
|
||||
<button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="isLoading && st.loading"
|
||||
(click)="st?.load(1)" acl [acl-ability]="['partnertable-search']">查询</button>
|
||||
<button nz-button (click)="resetSF()">重置</button>
|
||||
</sf>
|
||||
</div>
|
||||
|
||||
<!-- 查询字段大于3个时,根据展开状态调整布局 -->
|
||||
<ng-container *ngIf="queryFieldCount > 4">
|
||||
<div nz-col [nzSpan]="_$expand ? 24 : 18">
|
||||
<sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
|
||||
</div>
|
||||
<div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
|
||||
<button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="isLoading && st.loading"
|
||||
(click)="st?.load(1)" acl [acl-ability]="['partnertable-search']">查询</button>
|
||||
<button nz-button (click)="resetSF()">重置</button>
|
||||
<button nz-button nzType="link" (click)="expandToggle()">
|
||||
{{ !_$expand ? '展开' : '收起' }}
|
||||
<i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</nz-card>
|
||||
<nz-card>
|
||||
<div class="list-table-header-btn">
|
||||
<!-- <button nz-button nzType="default" (click)="gotoInviteRecord()">员工邀请记录</button> -->
|
||||
</div>
|
||||
<!-- 数据列表 -->
|
||||
<st #st multiSort bordered [data]="service.$api_listOperationalReportPage" [columns]="columns" [ps]="20"
|
||||
[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] }">
|
||||
</st>
|
||||
|
||||
</nz-card>
|
||||
@ -1,24 +0,0 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { DatatablePartnertableComponent } from './partnertable.component';
|
||||
|
||||
describe('DatatablePartnertableComponent', () => {
|
||||
let component: DatatablePartnertableComponent;
|
||||
let fixture: ComponentFixture<DatatablePartnertableComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DatatablePartnertableComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DatatablePartnertableComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,151 +0,0 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { STChange, STColumn, STComponent, STData } from '@delon/abc/st';
|
||||
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
|
||||
import { ModalHelper } from '@delon/theme';
|
||||
import { EAEnvironmentService } from '@shared';
|
||||
import { NzModalService } from 'ng-zorro-antd/modal';
|
||||
import { DataService } from '../../../services/data.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-partnertable',
|
||||
templateUrl: './partnertable.component.html'
|
||||
})
|
||||
export class DatatablePartnertableComponent implements OnInit {
|
||||
@ViewChild('st', { static: false }) st!: STComponent;
|
||||
@ViewChild('sf', { static: false }) sf!: SFComponent;
|
||||
_$expand = false;
|
||||
ui!: SFUISchema;
|
||||
schema!: SFSchema;
|
||||
phone = '';
|
||||
columns!: STColumn[];
|
||||
isLoading: boolean = false;
|
||||
|
||||
constructor(
|
||||
public service: DataService,
|
||||
private modalSrv: NzModalService,
|
||||
private modal: ModalHelper,
|
||||
private envSrv: EAEnvironmentService
|
||||
) {}
|
||||
|
||||
/**
|
||||
* 查询字段个数
|
||||
*/
|
||||
get queryFieldCount(): number {
|
||||
return Object.keys(this.schema?.properties || {}).length;
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
get reqParams() {
|
||||
const params = Object.assign({}, this.sf?.value || {});
|
||||
delete params._$expand;
|
||||
return { ...params };
|
||||
}
|
||||
|
||||
/**
|
||||
* 选中行
|
||||
*/
|
||||
get selectedRows() {
|
||||
return this.st?.list.filter(item => item.checked) || [];
|
||||
}
|
||||
|
||||
/**
|
||||
* 伸缩查询条件
|
||||
*/
|
||||
expandToggle() {
|
||||
this._$expand = !this._$expand;
|
||||
this.sf?.setValue('/_$expand', this._$expand);
|
||||
}
|
||||
/**
|
||||
* 重置表单
|
||||
*/
|
||||
resetSF() {
|
||||
this.sf.reset();
|
||||
this._$expand = false;
|
||||
this.isLoading = true;
|
||||
}
|
||||
/**
|
||||
* 程序初始化入口
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.initSF();
|
||||
this.initST();
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化查询表单
|
||||
*/
|
||||
initSF() {
|
||||
this.schema = {
|
||||
properties: {
|
||||
_$expand: { type: 'boolean', ui: { hidden: true } },
|
||||
name: {
|
||||
title: '合伙人名称',
|
||||
type: 'string',
|
||||
ui: { placeholder: '请输入' },
|
||||
readOnly: false
|
||||
},
|
||||
phone: {
|
||||
title: '合伙人类型',
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '请输入'
|
||||
},
|
||||
readOnly: false
|
||||
},
|
||||
phone01: {
|
||||
title: '合伙人状态',
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
placeholder: '请输入'
|
||||
},
|
||||
readOnly: false
|
||||
},
|
||||
createTime: {
|
||||
type: 'string',
|
||||
title: '注册时间',
|
||||
ui: { widget: 'sl-from-to', type: 'date', format: 'yyyy-MM-dd', visibleIf: {
|
||||
_$expand: (value: boolean) => value,
|
||||
}, } as SFDateWidgetSchema
|
||||
}
|
||||
},
|
||||
type: 'object'
|
||||
};
|
||||
this.ui = { '*': { spanLabelFixed: 120, grid: { span: 8, gutter: 4 }, enter: () => this.st?.load(1) } };
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化数据列表
|
||||
*/
|
||||
initST() {
|
||||
this.columns = [
|
||||
{ title: '合伙人名称', index: 'networkTransporterName', className: 'text-center' },
|
||||
{ title: '注册时间', index: 'telephone', className: 'text-center' },
|
||||
{ title: '注册时间', index: 'roleName', className: 'text-center' },
|
||||
{ title: '业务员', index: 'lastLoginDate', className: 'text-center' },
|
||||
{
|
||||
title: '合伙人状态',
|
||||
index: 'stateLocked',
|
||||
className: 'text-center',
|
||||
type: 'enum',
|
||||
enum: { 0: '正常', 1: '冻结' }
|
||||
},
|
||||
{ title: '客户数', index: 'lastLoginDate', className: 'text-center' },
|
||||
{ title: '收益额', index: 'lastLoginDate', className: 'text-center' },
|
||||
{ title: '已提现金额', index: 'lastLoginDate', className: 'text-center' },
|
||||
{ title: '订单数', index: 'lastLoginDate', className: 'text-center' },
|
||||
{ title: '订单金额', index: 'lastLoginDate', className: 'text-center' },
|
||||
{ title: '应收订单数', index: 'lastLoginDate', className: 'text-center' }
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据列表状态变化事件
|
||||
*/
|
||||
change(change: STChange) {
|
||||
// console.log(change);
|
||||
}
|
||||
}
|
||||
@ -1,74 +0,0 @@
|
||||
<!-- 页头 -->
|
||||
<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]="totalAdvanceDeposit?.totalAmount || '¥ 0.00万'"
|
||||
[footer]="AdvanceDepositFooter" contentHeight="46">
|
||||
<ng-template #AdvanceDepositFooter>
|
||||
<g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []"
|
||||
(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]="totalPerformanceVolume?.totalAmount || '¥ 0.00万'"
|
||||
[footer]="PerformanceVolumeFooter" contentHeight="46">
|
||||
<ng-template #PerformanceVolumeFooter>
|
||||
<g2-mini-area line color="#cceafe" height="45" [data]="totalPerformanceVolume?.list || []"
|
||||
(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]="totalFreight?.totalAmount || '¥ 0.00万'" [footer]="footer"
|
||||
contentHeight="46">
|
||||
<ng-template #footer>
|
||||
<g2-mini-area line color="#cceafe" height="45" [data]="totalFreight?.list || []"
|
||||
(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]="totalSurcharge?.totalAmount || '¥ 0.00万'"
|
||||
[footer]="SurchargeFooter" contentHeight="46">
|
||||
<ng-template #SurchargeFooter>
|
||||
<g2-mini-area line color="#cceafe" height="45" [data]="totalSurcharge?.list || []"
|
||||
(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 #g2custom delay="100"></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> -->
|
||||
<g2-custom #RegionalPerforman delay="100"></g2-custom>
|
||||
</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> -->
|
||||
<g2-custom #BillDirectProportion delay="100"></g2-custom>
|
||||
</nz-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" [nzSpan]="12">
|
||||
<nz-card [nzTitle]="'业绩完成情况'">
|
||||
<g2-bar [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar>
|
||||
|
||||
</nz-card>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,24 +0,0 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { DatatableDataindexComponent } from './dataindex.component';
|
||||
|
||||
describe('DatatableDataindexComponent', () => {
|
||||
let component: DatatableDataindexComponent;
|
||||
let fixture: ComponentFixture<DatatableDataindexComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DatatableDataindexComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DatatableDataindexComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,386 +0,0 @@
|
||||
import { ChangeDetectorRef, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
|
||||
import { ModalHelper, _HttpClient } from '@delon/theme';
|
||||
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
|
||||
import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie';
|
||||
import { format } from 'date-fns';
|
||||
import { DataService } from '../../services/data.service';
|
||||
import { Chart, registerShape, Util } from '@antv/g2';
|
||||
import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
|
||||
import { CurrencyPipe } from '@angular/common';
|
||||
import { LOGS } from '_mock';
|
||||
import { G2CustomComponent } from '@delon/chart/custom';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-dataindex',
|
||||
templateUrl: './dataindex.component.html',
|
||||
styleUrls: ['./dataindex.component.less'],
|
||||
providers: [CurrencyPipe]
|
||||
})
|
||||
export class DatatableDataindexComponent implements OnInit {
|
||||
@ViewChild('g2custom', { static: false }) g2custom!: G2CustomComponent;
|
||||
@ViewChild('RegionalPerforman', { static: false }) RegionalPerforman!: G2CustomComponent;
|
||||
@ViewChild('BillDirectProportion', { static: false }) BillDirectProportion!: G2CustomComponent;
|
||||
salesData: any[] = [];
|
||||
|
||||
totalAdvanceDeposit: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
|
||||
totalPerformanceVolume: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
|
||||
totalFreight: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
|
||||
totalSurcharge: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
|
||||
|
||||
billTypeDatas: any = [
|
||||
{ item: '货源单', count: 0, percent: 0 },
|
||||
{ item: '合同单', count: 0, percent: 0 }
|
||||
];
|
||||
|
||||
regionalPerformanceCompletion: DataPerformanceTrendVO[] = [];
|
||||
|
||||
constructor(private service: DataService, private currency: CurrencyPipe) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initMiniAreaData();
|
||||
this.initOthersData();
|
||||
}
|
||||
|
||||
private initMiniAreaData() {
|
||||
// 客户预存款总额
|
||||
this.service.request(this.service.$api_total_advance_deposit).subscribe((res: DataTotalVO) => {
|
||||
if (res) {
|
||||
this.totalAdvanceDeposit = this.formatMiniAreaData(res);
|
||||
}
|
||||
});
|
||||
// 业绩量总额
|
||||
this.service.request(this.service.$api_total_performance_volume).subscribe((res: DataTotalVO) => {
|
||||
if (res) {
|
||||
this.totalPerformanceVolume = this.formatMiniAreaData(res);
|
||||
}
|
||||
});
|
||||
// 司机应付总额
|
||||
this.service.request(this.service.$api_total_freight).subscribe((res: DataTotalVO) => {
|
||||
if (res) {
|
||||
this.totalFreight = this.formatMiniAreaData(res);
|
||||
}
|
||||
});
|
||||
// 业绩量总额
|
||||
this.service.request(this.service.$api_total_surcharge).subscribe((res: DataTotalVO) => {
|
||||
if (res) {
|
||||
this.totalSurcharge = this.formatMiniAreaData(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private initOthersData() {
|
||||
// 订单类型比例
|
||||
this.service.request(this.service.$api_getBillTypeProportion).subscribe(res => {
|
||||
if (res) {
|
||||
this.billTypeDatas = this.formatCoordinateData(res);
|
||||
this.initBillChart(this.g2custom['el'].nativeElement as any);
|
||||
}
|
||||
});
|
||||
// 大区业绩完成情况
|
||||
this.service.request(this.service.$api_getBillAmount).subscribe((res: DataPerformanceTrendVO[]) => {
|
||||
if (res) {
|
||||
this.regionalPerformanceCompletion = res.map(item => ({ ...item, time: new Date(item.time)?.getTime() }));
|
||||
this.initRegionalPerformanceChart(this.RegionalPerforman['el'].nativeElement as any, this.regionalPerformanceCompletion);
|
||||
}
|
||||
});
|
||||
// 订单类型比例
|
||||
this.service.request(this.service.$api_getWayBillDirectProportion).subscribe(res => {
|
||||
if (res) {
|
||||
const billTypeDatas = this.formatCoordinateData(res.map((item: any) => ({ ...item, billType: item.wayBillType })));
|
||||
this.initBillChart(this.BillDirectProportion['el'].nativeElement as any, billTypeDatas);
|
||||
}
|
||||
});
|
||||
// 统计订单结算金额-趋势
|
||||
this.service.request(this.service.$api_get_bill_payment_amount).subscribe(res => {
|
||||
if (res) {
|
||||
this.salesData = this.formatBarData(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleClick(data: G2MiniAreaClickItem): void {
|
||||
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建订单类型秘鲁图
|
||||
* @param el
|
||||
*/
|
||||
private initBillChart(el: HTMLElement, datas?: any[]): void {
|
||||
const data = datas || this.billTypeDatas;
|
||||
|
||||
const chart = new Chart({
|
||||
container: el,
|
||||
autoFit: true,
|
||||
height: 400
|
||||
});
|
||||
// 新建一个 view 用来单独渲染Annotation
|
||||
const innerView = chart.createView();
|
||||
chart.coordinate('theta', {
|
||||
radius: 0.6,
|
||||
innerRadius: 0.7
|
||||
});
|
||||
|
||||
chart.data(data);
|
||||
|
||||
chart.scale('percent', {
|
||||
formatter: val => {
|
||||
val = val * 100 + '%';
|
||||
return val;
|
||||
}
|
||||
});
|
||||
|
||||
chart.tooltip(false);
|
||||
|
||||
// 声明需要进行自定义图例字段: 'item'
|
||||
chart.legend('item', {
|
||||
position: 'right', // 配置图例显示位置
|
||||
custom: true, // 关键字段,告诉 G2,要使用自定义的图例
|
||||
items: data.map((obj: any, index: any) => {
|
||||
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()
|
||||
.adjust('stack')
|
||||
.position('percent')
|
||||
.color('item')
|
||||
.style({
|
||||
fillOpacity: 1,
|
||||
stroke: 'white',
|
||||
lineWidth: 8
|
||||
})
|
||||
.state({
|
||||
active: {
|
||||
style: element => {
|
||||
const shape = element.shape;
|
||||
return {
|
||||
lineWidth: 1,
|
||||
stroke: 'white',
|
||||
strokeOpacity: shape.attr('fillOpacity')
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
innerView
|
||||
.annotation()
|
||||
.text({
|
||||
position: ['50%', '50%'],
|
||||
content: data[0].item,
|
||||
style: {
|
||||
fontSize: 20,
|
||||
fill: '#8c8c8c',
|
||||
textAlign: 'center'
|
||||
},
|
||||
offsetY: -20
|
||||
})
|
||||
.text({
|
||||
position: ['50%', '50%'],
|
||||
content: data[0].count,
|
||||
style: {
|
||||
fontSize: 28,
|
||||
fill: '#8c8c8c',
|
||||
textAlign: 'center'
|
||||
},
|
||||
offsetY: 20
|
||||
});
|
||||
innerView.render(true);
|
||||
|
||||
// 移除图例点击过滤交互
|
||||
chart.removeInteraction('legend-filter');
|
||||
chart.interaction('element-active');
|
||||
|
||||
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'
|
||||
},
|
||||
offsetY: 20
|
||||
});
|
||||
innerView.render(true);
|
||||
lastItem = data.item;
|
||||
}
|
||||
}
|
||||
|
||||
// 清空 annotation
|
||||
function clearAnnotation() {
|
||||
innerView.annotation().clear(true);
|
||||
innerView.render(true);
|
||||
lastItem = null;
|
||||
}
|
||||
}
|
||||
|
||||
private initRegionalPerformanceChart(el: HTMLElement, data: DataPerformanceTrendVO[]) {
|
||||
const chart = new Chart({
|
||||
container: el,
|
||||
autoFit: true,
|
||||
height: 400
|
||||
});
|
||||
|
||||
chart.data(data);
|
||||
chart.scale({
|
||||
time: {
|
||||
alias: '日期',
|
||||
type: 'time'
|
||||
},
|
||||
quantity: {
|
||||
alias: '金额',
|
||||
min: 0,
|
||||
sync: true, // 将 pv 字段数值同 time 字段数值进行同步
|
||||
nice: true
|
||||
}
|
||||
});
|
||||
|
||||
chart.axis('quantity', {
|
||||
title: {}
|
||||
});
|
||||
|
||||
chart.tooltip({
|
||||
showCrosshairs: true,
|
||||
shared: true
|
||||
});
|
||||
|
||||
// 声明需要进行自定义图例字段: 'item'
|
||||
chart.legend({
|
||||
offsetY: 10,
|
||||
position: 'bottom', // 配置图例显示位置
|
||||
custom: true, // 关键字段,告诉 G2,要使用自定义的图例
|
||||
items: [
|
||||
{
|
||||
name: '订单金额 (元)', // 对应 itemName
|
||||
value: '' // 对应 itemValue
|
||||
}
|
||||
],
|
||||
itemValue: {
|
||||
style: {
|
||||
fill: '#999'
|
||||
} // 配置 itemValue 样式
|
||||
}
|
||||
});
|
||||
|
||||
chart.line().position('time*quantity').color('#4FAAEB');
|
||||
chart.render();
|
||||
}
|
||||
|
||||
private formatMiniAreaData(data: DataTotalVO) {
|
||||
return {
|
||||
totalAmount: `${this.currency.transform(data.totalAmount || 0)}万`,
|
||||
list: data.list?.map(item => ({
|
||||
x: item.time,
|
||||
y: item.quantity
|
||||
}))
|
||||
};
|
||||
}
|
||||
|
||||
private formatCoordinateData(data: DataBillTypeProportion[]): any[] {
|
||||
const total = data.map(item => item.quantity).reduce((pre, next) => pre + next);
|
||||
const rs: any[] = [];
|
||||
data.forEach(item => {
|
||||
rs.push({
|
||||
item: (BILLTYPE as any)[item.billType],
|
||||
count: item.quantity,
|
||||
percent: Number((item.quantity / total).toFixed(2))
|
||||
});
|
||||
});
|
||||
return rs;
|
||||
}
|
||||
|
||||
private formatBarData(data: DataPerformanceTrendVO[]): any[] {
|
||||
return data.map(item => ({
|
||||
x: item.time,
|
||||
y: item.quantity,
|
||||
color: '#f50'
|
||||
}));
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
interface DataTotalVO {
|
||||
totalAmount: number;
|
||||
list: DataPerformanceTrendVO[];
|
||||
}
|
||||
|
||||
interface DataPerformanceTrendVO {
|
||||
quantity: number;
|
||||
time: number;
|
||||
}
|
||||
|
||||
interface DataBillTypeProportion {
|
||||
billType: BILLTYPE;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
enum BILLTYPE {
|
||||
'HY' = '货源单',
|
||||
'HT' = '合同单',
|
||||
'ZF' = '直付',
|
||||
'CDZ' = '车队长'
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
<!-- 页头 -->
|
||||
<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,24 +0,0 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { DatatableDataindexComponent } from './dataindex.component';
|
||||
|
||||
describe('DatatableDataindexComponent', () => {
|
||||
let component: DatatableDataindexComponent;
|
||||
let fixture: ComponentFixture<DatatableDataindexComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DatatableDataindexComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DatatableDataindexComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,249 +0,0 @@
|
||||
import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
|
||||
import { ModalHelper, _HttpClient } from '@delon/theme';
|
||||
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
|
||||
import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie';
|
||||
import { format } from 'date-fns';
|
||||
import { DataindexService } from '../services/dataindex.service';
|
||||
import { Chart, registerShape, Util } from '@antv/g2';
|
||||
import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-dataindex',
|
||||
templateUrl: './dataindex.component.html',
|
||||
styleUrls: ['./dataindex.component.less']
|
||||
})
|
||||
export class DatatableDataindexComponent implements OnInit {
|
||||
@ViewChild('pie', { static: false }) pie!: G2PieComponent;
|
||||
chartData: G2TimelineData[] = [];
|
||||
visitData = this.genData();
|
||||
salesData = this.genData();
|
||||
salesPieData: G2PieData[] = [];
|
||||
total = '';
|
||||
|
||||
constructor(private service: DataindexService, private ngZone: NgZone) {
|
||||
|
||||
}
|
||||
|
||||
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 {
|
||||
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
|
||||
}
|
||||
format(val: number): string {
|
||||
return `¥ ${val.toFixed(2)}`;
|
||||
}
|
||||
render(el: ElementRef<HTMLDivElement>): void {
|
||||
this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
|
||||
}
|
||||
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({
|
||||
container: el,
|
||||
autoFit: true,
|
||||
height: 400,
|
||||
});
|
||||
// 新建一个 view 用来单独渲染Annotation
|
||||
const innerView = chart.createView();
|
||||
chart.coordinate('theta', {
|
||||
radius: 0.6,
|
||||
innerRadius: 0.7,
|
||||
});
|
||||
|
||||
chart.data(data);
|
||||
|
||||
chart.scale('percent', {
|
||||
formatter: val => {
|
||||
val = val * 100 + '%';
|
||||
return val;
|
||||
},
|
||||
});
|
||||
|
||||
chart.tooltip(false);
|
||||
|
||||
// 声明需要进行自定义图例字段: '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()
|
||||
.adjust('stack')
|
||||
.position('percent')
|
||||
.color('item')
|
||||
.style({
|
||||
fillOpacity: 1,
|
||||
stroke: 'white',
|
||||
lineWidth: 8,
|
||||
})
|
||||
.state({
|
||||
active: {
|
||||
style: element => {
|
||||
const shape = element.shape;
|
||||
return {
|
||||
lineWidth: 1,
|
||||
stroke: 'white',
|
||||
strokeOpacity: shape.attr('fillOpacity'),
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 移除图例点击过滤交互
|
||||
chart.removeInteraction('legend-filter');
|
||||
chart.interaction('element-active');
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
<g2-custom delay="100" (render)="render($event)"></g2-custom>
|
||||
|
||||
@ -1,132 +0,0 @@
|
||||
/*
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-04-07 17:57:23
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-13 10:22:35
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\curve\\curve.component.ts
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
*/
|
||||
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
|
||||
import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
|
||||
import { DataService } from '../../../services/data.service';
|
||||
// import DataSet from '@antv/data-set';
|
||||
const DataSet = require('@antv/data-set');
|
||||
import { Chart } from '@antv/g2';
|
||||
@Component({
|
||||
selector: 'app-financetable-curve-min',
|
||||
templateUrl: './curve.component.html',
|
||||
styleUrls: ['./curve.component.less']
|
||||
})
|
||||
export class DatatableCustomindexCurveMinComponent implements OnInit,OnChanges {
|
||||
el: any;
|
||||
@Input() chartData: any;
|
||||
chart: any;
|
||||
data = [
|
||||
{ time: '01', type: '订单数', temperature: 7 },
|
||||
{ time: '02', type: '运单数', temperature: 3.9 },
|
||||
{ time: '03', type: '订单数', temperature: 6.9 },
|
||||
{ time: '04', type: '订单数', temperature: 4.2 },
|
||||
{ time: '05', type: '订单数', temperature: 9.5 },
|
||||
{ time: '06', type: '订单数', temperature: 5.7 },
|
||||
{ time: '06', type: '运单数', temperature: 5.7 },
|
||||
{ time: '07', type: '运单数', temperature: 14.5 },
|
||||
{ time: '08', type: '订单数', temperature: 8.5 },
|
||||
{ time: '09', type: '订单数', temperature: 18.4 },
|
||||
{ time: '10', type: '订单数', temperature: 11.9 },
|
||||
{ time: '11', type: '订单数', temperature: 21.5 },
|
||||
{ time: '12', type: '订单数', temperature: 15.2 },
|
||||
{ time: '08', type: '运单数', temperature: 8.5 },
|
||||
{ time: '09', type: '运单数', temperature: 18.4 },
|
||||
{ time: '10', type: '运单数', temperature: 11.9 },
|
||||
{ time: '11', type: '运单数', temperature: 21.5 },
|
||||
{ time: '12', type: '订单数', temperature: 15.2 },
|
||||
];
|
||||
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));
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
private init(el: HTMLElement): void {
|
||||
this.chart = new Chart({
|
||||
container: el,
|
||||
autoFit: true,
|
||||
height: 320,
|
||||
});
|
||||
let value: any = []
|
||||
this.service.request(this.service.$api_getTradingTrend).subscribe((res: any) => {
|
||||
if(res) {
|
||||
res.forEach((element: any) => {
|
||||
value.push({
|
||||
time: element?.time,
|
||||
type: element?.type == 'DD' ? '订单数' : '运单数',
|
||||
temperature: element?.value,
|
||||
});
|
||||
});
|
||||
console.log(value);
|
||||
this.chartData = value
|
||||
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('temperature', {
|
||||
label: {
|
||||
formatter: (val: any) => {
|
||||
return val + '万';
|
||||
},
|
||||
},
|
||||
});
|
||||
this.chart
|
||||
.line()
|
||||
.position('time*temperature')
|
||||
.color('type')
|
||||
.shape('smooth');
|
||||
|
||||
this.chart
|
||||
.point()
|
||||
.position('time*temperature')
|
||||
.color('type')
|
||||
.shape('circle');
|
||||
this.chart.render();
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,177 +0,0 @@
|
||||
<!--
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-04-06 10:57:56
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-19 14:01:38
|
||||
* @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>
|
||||
<div style="position: relative">
|
||||
<h1 style="display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; font-size: 20px; font-weight: 700"
|
||||
>运多星网络货运平台</h1
|
||||
>
|
||||
<div style="position: absolute; right: 0; display: flex">
|
||||
<img src="../../../../../assets/images/oclock.svg" alt="" />
|
||||
<span style="font-size: 16px; margin-top: 5px">{{ todayTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 style="display: flex; justify-content: center; align-items: center; padding: 0; font-size: 20px; font-weight: 700"
|
||||
>实时交易监控</h1
|
||||
>
|
||||
</div>
|
||||
<div nz-row [nzGutter]="24">
|
||||
<div nz-col class="gutter-row" nzXs="12" nzSm="12" nzMd="12" nzLg="12" nzXl="8" nzXXl="8">
|
||||
<nz-card nzTitle="2022全年交易情况">
|
||||
<nz-row [nzGutter]="16">
|
||||
<nz-col [nzSpan]="12">
|
||||
<nz-statistic [nzValue]="(allDeal?.dealAmount | currency)!" [nzTitle]="'成交额'"></nz-statistic>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="12">
|
||||
<nz-statistic [nzValue]="(allDeal?.settlementAmount | currency)!" [nzTitle]="'结算额'"></nz-statistic>
|
||||
</nz-col>
|
||||
</nz-row>
|
||||
<nz-row [nzGutter]="16">
|
||||
<nz-col [nzSpan]="12">
|
||||
<nz-statistic [nzValue]="(allDeal?.billQuantity | number)!" [nzTitle]="'订单数'"></nz-statistic>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="12">
|
||||
<nz-statistic [nzValue]="(allDeal?.weight | number: '1.0-2')!" [nzTitle]="'货物吞吐(吨)'"></nz-statistic>
|
||||
</nz-col>
|
||||
</nz-row>
|
||||
</nz-card>
|
||||
<nz-card nzTitle="本月交易趋势">
|
||||
<app-financetable-curve-min #curve [chartData]="chartData2"></app-financetable-curve-min>
|
||||
</nz-card>
|
||||
<nz-card nzTitle="实时货源" style="height: 400px">
|
||||
<st
|
||||
#st
|
||||
multiSort
|
||||
[columns]="columns"
|
||||
[scroll]="{ y: '280px' }"
|
||||
[data]="service.$api_getRealTimeSupply"
|
||||
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
|
||||
[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 + 1 }}
|
||||
</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" nzXs="12" nzSm="12" nzMd="12" nzLg="12" nzXl="8" nzXXl="8">
|
||||
<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>
|
||||
<div style="min-height: 550px">
|
||||
<app-datatable-customindex-map style="max-height: 680px" #map [chartData]="chartData"></app-datatable-customindex-map>
|
||||
</div>
|
||||
<nz-card>
|
||||
<nz-row [nzGutter]="24">
|
||||
<g2-bar #bar height="350" [delay]="300" repaint="true" [title]="'本月发货量排名'" [data]="salesData2" (ready)="genData()"></g2-bar>
|
||||
</nz-row>
|
||||
</nz-card>
|
||||
</div>
|
||||
<div nz-col class="gutter-row" nzXs="12" nzSm="12" nzMd="12" nzLg="12" nzXl="8" nzXXl="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]="(todaysDeal?.billQuantity | number)!" [nzTitle]="'订单数'"></nz-statistic>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="12">
|
||||
<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]="(todaysDeal?.amount | currency)!" [nzTitle]="'运输金额(元)'"></nz-statistic>
|
||||
</nz-col>
|
||||
<nz-col [nzSpan]="12">
|
||||
<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="实时运单风控" style="height: 400px">
|
||||
<st
|
||||
#st
|
||||
multiSort
|
||||
[scroll]="{ y: '280px' }"
|
||||
[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"
|
||||
>
|
||||
<ng-template st-row="carNo" let-item let-index="index">
|
||||
{{ item?.driverName }}{{ item?.carNo ? '/' + item?.carNo : '' }}
|
||||
</ng-template>
|
||||
</st>
|
||||
</nz-card>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,15 +0,0 @@
|
||||
:host{
|
||||
::ng-deep {
|
||||
.ant-statistic-content-value{
|
||||
color: #399ffd;
|
||||
font-weight: bold;
|
||||
}
|
||||
.nz-statistic-number,.ant-statistic-content-value {
|
||||
font-size: 14px;
|
||||
}
|
||||
.ant-table-thead > tr > th, .ant-table-tbody > tr > td, .ant-table tfoot > tr > th, .ant-table tfoot > tr > td {
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { DatatableDatascreenComponent } from './datascreen.component';
|
||||
|
||||
describe('DatatableDatascreenComponent', () => {
|
||||
let component: DatatableDatascreenComponent;
|
||||
let fixture: ComponentFixture<DatatableDatascreenComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DatatableDatascreenComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DatatableDatascreenComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,151 +0,0 @@
|
||||
import { map } from 'rxjs/operators';
|
||||
/*
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-04-06 10:57:56
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-14 16:21:00
|
||||
* @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 './map/map.component';
|
||||
import { G2TimelineComponent, G2TimelineData } from '@delon/chart/timeline';
|
||||
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
|
||||
import { FinanceTableCurveComponent } from '../financetable/curve/curve.component';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-datatable-datascreen',
|
||||
templateUrl: './datascreen.component.html',
|
||||
styleUrls: ['./datascreen.component.less']
|
||||
})
|
||||
export class DatatableDatascreenComponent implements OnInit {
|
||||
@ViewChild('st') private readonly st!: STComponent;
|
||||
@ViewChild('orderSt') private readonly orderSt!: STComponent;
|
||||
@ViewChild('map') private readonly map!: DatatableCustomindexMapComponent;
|
||||
@ViewChild('timeline', { static: false }) timeline!: G2TimelineComponent;
|
||||
@ViewChild('curve') private readonly curve!: FinanceTableCurveComponent;
|
||||
|
||||
columns: STColumn[] = [];
|
||||
chartData: any[] = [];
|
||||
orderColumns: STColumn[] = [];
|
||||
chartData2: any = {}
|
||||
allDeal: any;
|
||||
headDeal: any;
|
||||
classifyDeal: any;
|
||||
todaysDeal: any;
|
||||
todayTime: string = '';
|
||||
|
||||
monthData: G2TimelineData[] = [];
|
||||
monthData2:G2TimelineData[] =[];
|
||||
salesData2: Array<any> = [];
|
||||
constructor(public service: DataService) {}
|
||||
ngOnChanges(changes: any): void {
|
||||
console.log(changes);
|
||||
}
|
||||
/**
|
||||
* 查询参数
|
||||
*/
|
||||
get reqOrderParams() {
|
||||
const params = {};
|
||||
return { ...params };
|
||||
}
|
||||
get reqParams() {
|
||||
const params = {};
|
||||
return { ...params };
|
||||
}
|
||||
ngOnInit(): void {
|
||||
setInterval(() => {
|
||||
this.setTime();
|
||||
}, 1000);
|
||||
this.initST();
|
||||
this.initOrderST();
|
||||
this.initData();
|
||||
// this.initLineData();
|
||||
}
|
||||
setTime() {
|
||||
var myDate = new Date();
|
||||
var mytime = myDate.toLocaleTimeString(); //获取当前时间
|
||||
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
|
||||
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
|
||||
myDate.getDate(); //获取当前日(1-31)
|
||||
this.todayTime = myDate.getFullYear() + '-' + myDate.getMonth() + 1 + '-' + myDate.getDate() + ' ' + mytime;
|
||||
}
|
||||
initData() {
|
||||
this.service.request(this.service.$api_getAnnualTransactions).subscribe((res: any) => {
|
||||
this.allDeal = res;
|
||||
});
|
||||
this.initPillarData()
|
||||
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;
|
||||
});
|
||||
let value: any = [];
|
||||
this.service.request(this.service.$api_getTransactionDistribution).subscribe((res: any) => {
|
||||
if (res) {
|
||||
res.forEach((element: any) => {
|
||||
value.push({
|
||||
name: element.province,
|
||||
value: element.weight
|
||||
});
|
||||
});
|
||||
console.log(value);
|
||||
this.chartData = value;
|
||||
this.map.reRender();
|
||||
}
|
||||
});
|
||||
}
|
||||
genData(): any{
|
||||
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.salesData2 = value
|
||||
});
|
||||
}
|
||||
initPillarData(){
|
||||
// this.curve.reRender()
|
||||
this.genData();
|
||||
}
|
||||
/**
|
||||
* 初始化数据列表
|
||||
*/
|
||||
initST() {
|
||||
this.columns = [
|
||||
{ title: '序号', render: 'index', className: 'text-center', },
|
||||
{ title: '发货地', index: 'loadAddress', className: 'text-center', },
|
||||
{ title: '卸货地', index: 'dischargeAddress', className: 'text-center',},
|
||||
{ title: '货物', index: 'goodsName', className: 'text-center', },
|
||||
{ title: '数量', render: 'weight', className: 'text-center',}
|
||||
];
|
||||
}
|
||||
initOrderST() {
|
||||
this.orderColumns = [
|
||||
{ title: '运单号', index: 'wayCode', className: 'text-center', },
|
||||
{ title: '司机/车辆', index: 'carNo', className: 'text-center', },
|
||||
{ title: '货主', index: 'shipperName', className: 'text-center', },
|
||||
{ title: '时间', index: 'createTime', className: 'text-center', },
|
||||
{ title: '异常预警', index: 'warningTypeLabel', className: 'text-center',}
|
||||
];
|
||||
}
|
||||
|
||||
handleClick(data: G2MiniAreaClickItem): void {
|
||||
this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
<!--
|
||||
* @Description :
|
||||
* @Version : 1.0
|
||||
* @Author : Shiming
|
||||
* @Date : 2022-04-06 17:57:07
|
||||
* @LastEditors : Shiming
|
||||
* @LastEditTime : 2022-04-13 15:20:33
|
||||
* @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\map\\map.component.html
|
||||
* Copyright (C) 2022 huzhenhong. All rights reserved.
|
||||
-->
|
||||
<g2-custom #map div style="height: 680px; " delay="200" (render)="render($event)" ></g2-custom>
|
||||
<!-- <nz-col nzXs="0" nzSm="0" nzMd="0" nzLg="14" nzXl="14" nzXXl="14" style="z-index: 9999;"></nz-col> -->
|
||||
@ -1,145 +0,0 @@
|
||||
import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild, AfterViewInit } 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, AfterViewInit {
|
||||
el: any;
|
||||
@Input() chartData: any;
|
||||
@ViewChild('auditModal', { static: false }) auditModal!: any;
|
||||
@ViewChild('map',{static: false}) map!: any;
|
||||
chart: any;
|
||||
mapData: any;
|
||||
ds!: DataSet ;
|
||||
worldMap: any;
|
||||
userView: any;
|
||||
userDv: any;
|
||||
userData: any = [];
|
||||
constructor(private service: DataService, private ngZone: NgZone) {}
|
||||
ngAfterViewInit(): void {
|
||||
this.map.el.nativeElement.style.height = this.map.el.nativeElement.clientWidth + 'px'
|
||||
this.chart?.render();
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (this.chartData) {
|
||||
// setTimeout(()=>{
|
||||
// this.chart.render(true)
|
||||
// }, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit(): void {}
|
||||
reRender() {
|
||||
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,
|
||||
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'
|
||||
});
|
||||
|
||||
// 绘制世界地图背景
|
||||
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
|
||||
});
|
||||
let value: any = []
|
||||
this.service.request(this.service.$api_getTransactionDistribution).subscribe((res: any) => {
|
||||
if(res) {
|
||||
res.forEach((element: any) => {
|
||||
value.push({
|
||||
'省份': element.province,
|
||||
'订单数': element.weight,
|
||||
});
|
||||
});
|
||||
this.userData = value
|
||||
|
||||
if (!(this.userData instanceof Array) || this.userData.length === 0) {
|
||||
return;
|
||||
}
|
||||
this.userDv = this.ds.createView().source(this.userData).transform({
|
||||
geoDataView: this.worldMap,
|
||||
field: '省份',
|
||||
type: 'geo.region',
|
||||
as: ['longitude', 'latitude']
|
||||
}).transform({
|
||||
type: 'map',
|
||||
callback: (obj: { trend: string; 订单数: number }) => {
|
||||
|
||||
if(obj.订单数 < 500) {
|
||||
obj.trend = '500以下';
|
||||
} else if(obj.订单数 >= 500 && obj.订单数 < 1000){
|
||||
obj.trend = '500-1000';
|
||||
} else if(obj.订单数 >= 1000 ){
|
||||
obj.trend = '>1000';
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
});
|
||||
this.userView = this.chart.createView();
|
||||
this.userView.data(this.userDv.rows);
|
||||
this.userView.scale({
|
||||
trend: {
|
||||
alias: '订单交易数量'
|
||||
}
|
||||
});
|
||||
this.userView.polygon().position('longitude*latitude').color('trend', ['#0a3f80', '#1b6aca', '#5d93d4']).tooltip('省份*订单数').style({fillOpacity: 0.85 })
|
||||
.animate({
|
||||
leave: {
|
||||
animation: 'fade-out'
|
||||
}
|
||||
});
|
||||
this.userView.interaction('element-active');
|
||||
this.chart.render();
|
||||
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
<g2-custom delay="100" (render)="render($event)"></g2-custom>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user