fix bug

bug修复

See merge request tms-ui/tms-obc-web!20

.gitignore

@@ -25,6 +25,7 @@ scripts/var.less
 
 # IDE - VSCode
 .vscode/*
+.vscode
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json

.husky/_/husky.sh

@@ -0,0 +1,30 @@
+#!/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

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "compile-hero.disable-compile-files-on-did-save-code": true
+}

angular.json

@@ -34,7 +34,6 @@
             ],
             "styles": [
               "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
-              "node_modules/quill/dist/quill.snow.css",
               "src/styles.less",
               {
                 "input": "src/styles/default.less",
@@ -47,9 +46,8 @@
                 "inject": false
               }
             ],
-            
+
             "scripts": [
-              "node_modules/quill/dist/quill.min.js",
               "node_modules/perfect-scrollbar/dist/perfect-scrollbar.js",
               "node_modules/qrious/dist/qrious.min.js"
             ],
@@ -83,6 +81,18 @@
                 "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,
@@ -127,7 +137,6 @@
             "karmaConfig": "karma.conf.js",
             "tsConfig": "tsconfig.spec.json",
             "scripts": [
-              "node_modules/quill/dist/quill.min.js",
               "node_modules/perfect-scrollbar/dist/perfect-scrollbar.js"
             ],
             "styles": [],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tms-obc-web",
-  "version": "0.0.0",
+  "version": "1.2.0",
   "description": "运营后台-WEB",
   "author": "cipchk <cipchk@qq.com>",
   "repository": {
@@ -16,6 +16,7 @@
     "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",
@@ -66,8 +67,6 @@
     "ngx-trend": "^7.0.0",
     "perfect-scrollbar": "^1.5.2",
     "qrious": "^4.0.2",
-    "quill": "^1.3.7",
-    "quill-image-resize-module": "^3.0.0",
     "rxjs": "~6.6.0",
     "screenfull": "^5.1.0",
     "tslib": "^2.3.0",
@@ -75,22 +74,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",
@@ -99,29 +98,31 @@
     "eslint-plugin-jsdoc": "~36.0.7",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "eslint-plugin-prettier": "~3.4.1",
-    "@angular/language-service": "~12.2.0",
-    "source-map-explorer": "^2.5.2",
+    "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",
+    "source-map-explorer": "^2.5.2",
     "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",
-    "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"
+    "typescript": "~4.3.5"
   },
   "lint-staged": {
     "(src)/**/*.{html,ts}": [

proxy.conf.js

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-01-18 09:51:21
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-03-23 15:21:39
+ * @LastEditTime : 2022-05-16 17:27:31
  * @FilePath     : \\tms-obc-web\\proxy.conf.js
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -18,9 +18,19 @@ 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',
+      host: 'tms-api-dev.eascs.com',
       protocol: 'https:',
       port: 443
     },

src/app/app.module.ts

@@ -1,23 +1,19 @@
 /* eslint-disable import/order */
 /* eslint-disable import/no-duplicates */
-import { HttpClientModule } from '@angular/common/http';
-import { default as ngLang } from '@angular/common/locales/zh';
-import { APP_INITIALIZER, DEFAULT_CURRENCY_CODE, LOCALE_ID, NgModule, Type } from '@angular/core';
+import { APP_INITIALIZER, DEFAULT_CURRENCY_CODE, NgModule, Type } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SimpleInterceptor } from '@delon/auth';
-import { NzNotificationModule } from 'ng-zorro-antd/notification';
 import zh from '@angular/common/locales/zh';
 registerLocaleData(zh);
 // #region global third module
 
-import { BidiModule } from '@angular/cdk/bidi';
-const GLOBAL_THIRD_MODULES: Array<Type<any>> = [BidiModule];
+const GLOBAL_THIRD_MODULES: Array<Type<any>> = [];
 
 // #endregion
 
 // #region Http Interceptors
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 
 import { BusinessInterceptor, DefaultInterceptor } from '@core';
 
@@ -42,35 +38,20 @@ const APPINIT_PROVIDES = [
     multi: true
   },
   { provide: DEFAULT_CURRENCY_CODE, useValue: '￥' },
-  AuthGuard
+  { provide: RouteReuseStrategy, useClass: ReuseTabStrategy, deps: [ReuseTabService] }
 ];
 // #endregion
 
 import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
-import { GlobalConfigModule } from './global-config.module';
-import { LayoutModule } from './layout/layout.module';
 import { RoutesModule } from './routes/routes.module';
-import { SharedModule } from './shared/shared.module';
-import { STWidgetModule } from './shared/widget/st-widget.module';
 import { registerLocaleData } from '@angular/common';
-import { AuthGuard } from './core/guards/auth.guard';
+import { RouteReuseStrategy, RouterModule } from '@angular/router';
+import { ReuseTabService, ReuseTabStrategy } from '@delon/abc/reuse-tab';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
-    GlobalConfigModule.forRoot(),
-    CoreModule,
-    SharedModule,
-    LayoutModule,
-    RoutesModule,
-    STWidgetModule,
-    NzNotificationModule,
-    ...GLOBAL_THIRD_MODULES
-  ],
+  imports: [BrowserModule, BrowserAnimationsModule, HttpClientModule, CoreModule, RoutesModule, RouterModule, ...GLOBAL_THIRD_MODULES],
   providers: [...INTERCEPTOR_PROVIDES, ...APPINIT_PROVIDES],
   bootstrap: [AppComponent]
 })

src/app/core/core.module.ts

@@ -1,10 +1,11 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core';
+import { AuthGuard } from './guards/auth.guard';
 import { EATokenGuard } from './guards/token.guard';
 
 import { throwIfAlreadyLoaded } from './module-import-guard';
 
 @NgModule({
-  providers: [EATokenGuard]
+  providers: [AuthGuard, EATokenGuard]
 })
 export class CoreModule {
   constructor(@Optional() @SkipSelf() parentModule: CoreModule) {

src/app/core/startup/startup.service.ts

@@ -4,10 +4,13 @@ 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';
 
@@ -31,10 +34,22 @@ export class StartupService {
     private userSrv: EAUserService,
     private amapService: AmapService,
     public cacheSrv: EACacheService,
-    private coreSrv: CoreService
+    private coreSrv: CoreService,
+    private nzImageService: NzImageService,
+    private alainConfigService: AlainConfigService
   ) {
     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: 退出登录时需要清理用户信息

src/app/global-config.module.ts

@@ -12,12 +12,14 @@ import { environment } from '@env/environment';
 
 const alainConfig: AlainConfig = {
   st: {
+    bordered: true,
     req: { method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' } },
     res: { reName: { list: 'data.records', total: 'data.total' } },
     page: { show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000], toTop: false },
-    modal: { size: 'lg' }
+    modal: { size: 'lg' },
+    ps: 20
   },
-  sf: { button: { search: '查询' }, ui: { placeholder: '请输入' } },
+  sf: { button: { search: '查询' } },
   pageHeader: { homeI18n: 'home', recursiveBreadcrumb: true },
   auth: { login_url: '/passport/login' },
   acl: { guard_url: '/exception/403' },

src/app/layout/layout.module.ts

@@ -27,6 +27,7 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { NzGridModule } from 'ng-zorro-antd/grid';
 import { LayoutPassportComponent } from './passport/passport.component';
 import { PRO_COMPONENTS } from './pro/index';
+import { SearchDrawerModule } from '../shared/components/search-drawer/search-drawer.module';
 
 const COMPONENTS: Array<Type<any>> = [...PRO_COMPONENTS, LayoutPassportComponent];
 
@@ -57,7 +58,8 @@ const COMPONENTS: Array<Type<any>> = [...PRO_COMPONENTS, LayoutPassportComponent
     ThemeBtnModule,
     ScrollbarModule,
     NzGridModule,
-    NzMessageModule
+    NzMessageModule,
+    SearchDrawerModule
   ],
   declarations: COMPONENTS,
   exports: COMPONENTS

src/app/layout/passport/a.scss

@@ -1,126 +0,0 @@
-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);
-    }
-}

src/app/layout/passport/d.scss

@@ -1,64 +0,0 @@
-$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;
-    }
-}

src/app/layout/passport/particle.ts

@@ -1,325 +0,0 @@
-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]);
-  }
-}

src/app/layout/passport/passport.component.html

@@ -1,67 +1,15 @@
 <nz-layout class="layout">
-  <!-- <nz-header style="z-index: 999;">
+  <nz-header>
     <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" 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-header>
+  <nz-content class="content">
+    <div class="inner-content">
+      <router-outlet></router-outlet>
+    </div>
   </nz-content>
 </nz-layout>

src/app/layout/passport/passport.component.less

@@ -7,71 +7,11 @@
     }
 
     .ant-layout-header {
-      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);
-      }
+      background: #ffffff;
+      box-shadow: 0px 5px 5px #d1d1d1;
     }
 
+   
   }
 }
 

src/app/layout/passport/passport.component.ts

@@ -1,35 +1,15 @@
 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', './d.scss']
+  styleUrls: ['./passport.component.less']
 })
 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);
   }
 }

src/app/layout/pro/components/menu/menu.component.html

@@ -14,7 +14,7 @@
   </div>
 </ng-template>
 <ng-template #subLink let-i>
-  <a *ngIf="!i.externalLink" [routerLink]="i.link" [target]="i.target">{{ i.text }} </a>
+  <a *ngIf="!i.externalLink" (click)="routeTo(i.link)" [target]="i.target">{{ i.text }} </a>
   <a *ngIf="i.externalLink" [attr.href]="i.externalLink" [attr.target]="i.target">{{ i.text }} </a>
 </ng-template>
 <ul *ngIf="menus" nz-menu [nzMode]="mode" [nzTheme]="pro.theme"
@@ -22,7 +22,7 @@
   <ng-container *ngFor="let l1 of menus">
     <li *ngIf="l1.children!.length === 0" nz-menu-item class="alain-pro__menu-item"
       [class.alain-pro__menu-item--disabled]="l1.disabled" [nzSelected]="l1._selected" [nzDisabled]="l1.disabled">
-      <a *ngIf="!l1.externalLink" [routerLink]="l1.link" (click)="closeCollapsed()" class="alain-pro__menu-title">
+      <a *ngIf="!l1.externalLink" (click)="routeTo(l1.link);closeCollapsed()" class="alain-pro__menu-title">
         <ng-template [ngTemplateOutlet]="mainLink" [ngTemplateOutletContext]="{ $implicit: l1 }"></ng-template>
       </a>
       <a *ngIf="l1.externalLink" [attr.href]="l1.externalLink" [attr.target]="l1.target" (click)="closeCollapsed()"

src/app/layout/pro/components/menu/menu.component.ts

@@ -1,7 +1,9 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
+import { ReuseTabService } from '@delon/abc/reuse-tab';
 import { MenuService } from '@delon/theme';
 import { InputBoolean } from '@delon/util';
+import { SearchDrawerService } from '@shared';
 import { NzMenuModeType } from 'ng-zorro-antd/menu';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
@@ -25,7 +27,14 @@ export class LayoutProMenuComponent implements OnInit, OnDestroy {
   @Input() @InputBoolean() disabledAcl = false;
   @Input() mode: NzMenuModeType = 'inline';
 
-  constructor(private menuSrv: MenuService, private router: Router, public pro: BrandService, private cdr: ChangeDetectorRef) {}
+  constructor(
+    private menuSrv: MenuService,
+    private router: Router,
+    public pro: BrandService,
+    private cdr: ChangeDetectorRef,
+    private reuseService: ReuseTabService,
+    private searchDrawerService: SearchDrawerService
+  ) {}
 
   private cd(): void {
     this.cdr.markForCheck();
@@ -121,4 +130,12 @@ export class LayoutProMenuComponent implements OnInit, OnDestroy {
     unsubscribe$.next();
     unsubscribe$.complete();
   }
+
+  routeTo(link: string | undefined) {
+    if (link) {
+      this.reuseService.clear();
+      this.searchDrawerService.unsubscribe();
+      this.router.navigate([link]);
+    }
+  }
 }

src/app/layout/pro/components/widget/widget.component.html

@@ -1,3 +1,4 @@
+<span class="mr-md">客服电话：0755-88393483</span>
 <!--Search-->
 <layout-pro-search class="hidden-xs"></layout-pro-search>
 <!--Link-->

src/app/layout/pro/pro.component.html

@@ -37,4 +37,5 @@
   </div>
 </div>
 <ng-template #settingHost></ng-template>
-<theme-btn></theme-btn>
+<theme-btn></theme-btn>
+<app-search-drawer></app-search-drawer>

src/app/layout/pro/styles/app/_menu.less

@@ -1,26 +1,33 @@
 @{alain-pro-prefix} {
   &__menu {
     display: block;
+
     &-item {
       &--disabled {
         pointer-events: none;
       }
     }
+
     &-only-icon {
       @{alain-pro-prefix}__menu-item {
         padding-right: 8px !important;
         padding-left: 8px !important;
+
         &:first-child {
           padding-left: 0;
         }
       }
+
       @{alain-pro-prefix}__menu-icon {
         margin-right: 0;
         font-size: @alain-pro-top-nav-only-icon-fs;
+        min-width: 14px;
       }
     }
+
     &-title {
       position: relative;
+
       &-badge {
         display: flex;
         justify-content: center;
@@ -31,27 +38,34 @@
         line-height: 18px;
         background: @alain-pro-header-title-badge-bg;
         border-radius: 50%;
-        > em {
+
+        >em {
           color: @alain-pro-header-title-badge-color;
           font-style: normal;
         }
       }
     }
+
     &-img {
-      width: @alain-pro-sider-menu-img-wh !important;
-      height: @alain-pro-sider-menu-img-wh !important;
+      width: @alain-pro-sider-menu-img-wh  !important;
+      height: @alain-pro-sider-menu-img-wh  !important;
     }
+
   }
+
   &__side-nav {
     @{alain-pro-prefix}__menu {
       &-title {
         display: flex;
         align-items: center;
+
         &-text {
           flex: 1;
+          // opacity: 0;
         }
       }
     }
+
     .@{ant-prefix}-menu-inline-collapsed {
       @{alain-pro-prefix}__menu-title-badge {
         position: absolute;
@@ -59,10 +73,28 @@
         right: -16px;
         width: 8px;
         height: 8px;
-        > em {
+
+        >em {
           display: none;
         }
       }
     }
   }
 }
+
+@{aside-collapsed-prefix} {
+  @{alain-pro-prefix} {
+    &__menu {
+      &-icon {
+        overflow: inherit;
+      }
+
+      &-title {
+        &-text {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+}

src/app/routes/account/account-routing.module.ts

@@ -12,6 +12,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AccountComponentsCenterComponent } from './components/center/center.component';
+import { AccountComponentsEditPayPasswordComponent } from './components/edit-paypassword/edit-paypassword.component'
 
 const routes: Routes = [
   { path: '', redirectTo: 'center', pathMatch: 'full' },
@@ -21,7 +22,16 @@ const routes: Routes = [
     data: {
       title: '账户中心'
     }
-  }
+  },
+  {
+    path: 'edit-paypassword',
+    component: AccountComponentsEditPayPasswordComponent,
+    data: {
+      title: '修改支付密码',
+      titleI18n: 'app.my.edit.paypassword',
+      // guard: {ability: ['accountcenter-editpaypassword']}
+    },
+  },
 ];
 
 @NgModule({

src/app/routes/account/account.module.ts

@@ -15,11 +15,13 @@ import { AccountRoutingModule } from './account-routing.module';
 import { AccountComponentsCenterComponent } from './components/center/center.component';
 import { AccountComponentsEditNameComponent } from './components/edit-name/edit-name.component';
 import { AccountComponentsCenterEditComponent } from './components/edit-password/edit-password.component';
+import { AccountComponentsEditPayPasswordComponent } from './components/edit-paypassword/edit-paypassword.component'
 
 const COMPONENTS = [
   AccountComponentsCenterComponent,
   AccountComponentsEditNameComponent,
-  AccountComponentsCenterEditComponent
+  AccountComponentsCenterEditComponent,
+  AccountComponentsEditPayPasswordComponent
 ];
 const COMPONENTS_NOROUNT = [AccountComponentsEditNameComponent];
 

src/app/routes/account/components/center/center.component.html

@@ -12,9 +12,9 @@
               <div nz-col [nzSpan]="10">{{ infoData.phone }}</div>
               <div nz-col [nzSpan]="10">
                 <span *ngIf="infoData.phone; else elsePhone"><i nz-icon [nzType]="'check-circle'" [nzTheme]="'fill'"
-                  style="color: #52c41a"></i> 已绑定</span>
-              <ng-template #elsePhone><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'"
-                  style="color: #ccc"></i> 未绑定</ng-template>
+                    style="color: #52c41a"></i> 已绑定</span>
+                <ng-template #elsePhone><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'"
+                    style="color: #ccc"></i> 未绑定</ng-template>
               </div>
             </div>
           </nz-list-item-meta-title>
@@ -30,19 +30,45 @@
               </div>
               <div nz-col [nzSpan]="10">定期更换密码有助于账号安全</div>
               <div nz-col [nzSpan]="10">
-                <span *ngIf="infoData.isPwd; else elsePwd"
-                  ><i nz-icon [nzType]="'check-circle'" [nzTheme]="'fill'" style="color: #52c41a"></i> 已设置</span
-                >
-                <ng-template #elsePwd
-                  ><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'" style="color: #ccc"></i> 未设置</ng-template
-                >
+                <span *ngIf="infoData.isPwd; else elsePwd"><i nz-icon [nzType]="'check-circle'" [nzTheme]="'fill'"
+                    style="color: #52c41a"></i> 已设置</span>
+                <ng-template #elsePwd><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'"
+                    style="color: #ccc"></i> 未设置</ng-template>
               </div>
             </div>
           </nz-list-item-meta-title>
         </nz-list-item-meta>
         <div class="item-btn"><a (click)="edit('password')">修改</a></div>
       </nz-list-item>
+      <!-- <nz-list-item *ngIf="defaultCompany.enterpriseId"> -->
+      <nz-list-item>
+        <nz-list-item-meta>
+          <nz-list-item-meta-title>
+            <div nz-row [nzGutter]="16">
+              <div nz-col [nzSpan]="4" class="li-label">
+                <!-- <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"
+                  width="19px" height="23px">
+                  <g transform="matrix(1 0 0 1 -345 -324 )">
+                    <path
+                      d="M 15.6123766269722 8.00244105491571  C 15.6119034283768 8.00244105491571  15.6114302297875 8.00244117202714  15.61095703125 8.00244140625  L 15.197197265625 8.00244140625  C 15.1815563889208 8.00244140625  15.168876953125 7.98976197045419  15.168876953125 7.97412109375  L 15.168876953125 5.885498046875  C 15.1737779288544 4.39846216264915  14.595081789561 2.96885593837806  13.55716796875 1.9039453125  C 12.7321123508105 1.05143460529325  11.655620403345 0.485695706108903  10.485546875 0.2896875  C 6.987421875 -0.313818359375  3.801953125 2.4227734375  3.801953125 5.97130859375  L 3.801953125 7.97412109375  C 3.801953125 7.98976197045419  3.78927368920419 8.00244140625  3.7736328125 8.00244140625  L 3.407451171875 8.00244140625  C 1.80531036111513 8.00259780422134  0.50660155486636 9.3014334003565  0.506601562499998 10.90357421875  L 0.506601562499998 19.88734375  C 0.506601562499998 21.489282355869  1.80522937670661 22.7879101700756  3.40716796875 22.7879101700756  L 15.579521484375 22.78791015625  C 17.1817432795434 22.7879101700756  18.48037109375 21.489282355869  18.48037109375 19.8873437638256  L 18.48037109375 10.874970703125  C 18.4803734804811 10.8734601705268  18.4803746738472 10.8719496362745  18.4803746738472 10.8704391017907  C 18.4803746738472 9.28648751795714  17.1963282108058 8.00244105491571  15.6123766269722 8.00244105491571  Z M 5.165859375 7.97412109375  L 5.16416015625 5.885498046875  C 5.16416015625 3.28484375  6.8866015625 1.56580078125  9.484140625 1.56580078125  C 10.7585546875 1.56580078125  11.718046875 1.963984375  12.583798828125 2.85494140625  C 13.430859375 3.72720703125  13.8035546875 4.66234375  13.8035546875 5.88521484375  L 13.8035546875 7.97412109375  C 13.8035546875 7.98976197045419  13.7908752517042 8.00244140625  13.775234375 8.00244140625  L 5.1941796875 8.00244140625  C 5.17853881079581 8.00244140625  5.165859375 7.98976197045419  5.165859375 7.97412109375  Z M 17.1215625 19.9156640625  L 17.1249609375 19.9156640625  C 17.1249609375 20.926982421875  16.622275390625 21.429384765625  15.61095703125 21  L 3.4111328125 21  C 2.55948707595672 21.429384765625  1.869091796875 20.7389894865433  1.869091796875 19.88734375  L 1.869091796875 11.115126953125  C 1.869091796875 10.1483643640389  2.65280772341387 9.3646484375  3.6195703125 9.3646484375  L 15.579521484375 9.3646484375  C 16.4311672209183 9.3646484375  17.1215625 10.0550437165817  17.1215625 10.906689453125  L 17.1215625 19.9156640625  Z "
+                      fill-rule="nonzero" fill="#3370ff" stroke="none" transform="matrix(1 0 0 1 345 324 )" />
+                  </g>
+                </svg> -->
+                <span class="icon iconfont icon-mima" style="color: #aaa"></span>  支付密码
+              </div>
+              <div nz-col [nzSpan]="10">定期更换支付密码有助于账号安全</div>
+              <div nz-col [nzSpan]="10">
+                <span *ngIf="ifHasPayPw; else elsePwd"><i nz-icon [nzType]="'check-circle'" [nzTheme]="'fill'"
+                    style="color: #52c41a"></i> 已设置</span>
+                <ng-template #elsePwd><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'"
+                    style="color: #ccc"></i> 未设置</ng-template>
+              </div>
+            </div>
+          </nz-list-item-meta-title>
+        </nz-list-item-meta>
+        <div class="item-btn"><a (click)="edit('payPassword')">设置</a></div>
+      </nz-list-item>
     </nz-list>
 
   </nz-card>
-</div>
+</div>

src/app/routes/account/components/center/center.component.less

@@ -17,7 +17,7 @@
       right: 20px;
     }
     .item-btn {
-      width: 28px;
+      width: 36px;
       text-align: center;
     }
     .li-label {

src/app/routes/account/components/center/center.component.ts

@@ -53,6 +53,8 @@ export class AccountComponentsCenterComponent implements OnInit {
     },
   ];
   idx: any = 0;
+  defaultCompany: any = {};
+  ifHasPayPw = false;
   constructor(public service: AccountService, private modal: ModalHelper, private http: _HttpClient, private router: Router, private modalService: NzModalService,) {}
 
   ngOnInit() {
@@ -136,9 +138,32 @@ export class AccountComponentsCenterComponent implements OnInit {
   getInfo() {
     this.service.http.post(this.service.$api_get_current_user_info).subscribe((res) => {
       this.infoData = res.data;
+      // this.getDeafaultCompany();
+      this.getPayPw();
     });
   }
 
+  getDeafaultCompany() {
+    this.service.request(this.service.$api_getUserDefaultEnterpriseProject).subscribe(res => {
+      if (res === null) {
+        this.router.navigate(['/changeproject']);
+        return;
+      }
+      this.defaultCompany = res
+      if (res.projectId) {
+        this.getPayPw()                   
+      }
+    })
+  }
+
+  getPayPw() {
+    this.service.request(this.service.$api_isUserVerifyPassword, {}).subscribe(res => {
+      this.ifHasPayPw = res
+    })
+  }
+
+  
+
   edit(tpye: string) {
     if (tpye === 'phone') {
       const modalRef = this.modalService.create({
@@ -170,6 +195,10 @@ export class AccountComponentsCenterComponent implements OnInit {
       }
     });
     }
+
+    if (tpye === 'payPassword') {
+      this.router.navigate(['/account/edit-paypassword']);
+    }
     // if (tpye === 'info') {
     //   this.router.navigate(['/account/editInfo'], {
     //     queryParams: { realName: this.infoData.realName, certificateNumber: this.infoData.certificateNumber },

src/app/routes/account/components/edit-name/edit-name.component.ts

@@ -227,7 +227,7 @@ export class AccountComponentsEditNameComponent implements OnInit, AfterViewInit
   }
   submitForm() {
     const params = {
-      smsVerifyCode: this.sf.value.smsVerifyCode,
+      smsVerifyCode: this.sf?.value.smsVerifyCode,
     };
 
     this.service.http.post(this.service.$api_get_verifyPhone, params).subscribe((res) => {

src/app/routes/account/components/edit-password/edit-password.component.ts

@@ -1,5 +1,5 @@
 /*
- * @Description  : 
+ * @Description  :
  * @Version      : 1.0
  * @Author       : Shiming
  * @Date         : 2021-12-27 10:30:56
@@ -9,14 +9,11 @@
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
 
-import { Component, Inject, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import { STChange, STColumn, STComponent, STData, STRequestOptions } from '@delon/abc/st';
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
 
-import { SFComponent, SFSchema, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
-import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer';
 import { NzFormTooltipIcon } from 'ng-zorro-antd/form';
 import { NzModalRef } from 'ng-zorro-antd/modal';
 import { AccountService } from '../../services/account.service';
@@ -30,14 +27,13 @@ export class AccountComponentsCenterEditComponent implements OnInit {
   record: any;
   count = 0;
   type = 'create';
-  isVisibleView = false
+  isVisibleView = false;
   passwordVisible = false;
   passwordVisible2 = false;
   password: any;
   password2: any;
   interval$: any;
-  confirmationValidator =
- (control: FormControl): { [s: string]: boolean } => {
+  confirmationValidator = (control: FormControl): { [s: string]: boolean } => {
     if (!control.value) {
       return { required: true };
     } else if (control?.value !== this.validateForm?.value?.passWord) {
@@ -51,7 +47,6 @@ export class AccountComponentsCenterEditComponent implements OnInit {
   };
   constructor(
     public router: Router,
-    public ar: ActivatedRoute,
     private modalRef: NzModalRef,
     private fb: FormBuilder,
     public service: AccountService,
@@ -61,19 +56,21 @@ export class AccountComponentsCenterEditComponent implements OnInit {
   ngOnInit() {
     this.initForm();
   }
-  initForm () {
-  this.validateForm = this.fb.group({
-    passWord: [null,
-          [
-        Validators.required,
-        Validators.maxLength(16),
-        Validators.minLength(8),
-        Validators.pattern('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z-_]{8,16}$')
-      ]],
-    passWordTo: [null, [ Validators.required, Validators.maxLength(16), Validators.minLength(8), this.confirmationValidator,]],
-    smsVerifyCode: [null, [Validators.required]],
-  });
-}
+  initForm() {
+    this.validateForm = this.fb.group({
+      passWord: [
+        null,
+        [
+          Validators.required,
+          Validators.maxLength(16),
+          Validators.minLength(8),
+          Validators.pattern('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z-_]{8,16}$')
+        ]
+      ],
+      passWordTo: [null, [Validators.required, Validators.maxLength(16), Validators.minLength(8), this.confirmationValidator]],
+      smsVerifyCode: [null, [Validators.required]]
+    });
+  }
   destroyModal(): void {
     this.modalRef.destroy();
   }
@@ -84,28 +81,28 @@ export class AccountComponentsCenterEditComponent implements OnInit {
         this.service.msgSrv.success('发送成功');
         e.preventDefault();
         this.codeCountDown();
-      }else {
+      } else {
         this.service.msgSrv.success(res.msg);
       }
     });
   }
   save() {
-    if(!this.validateForm.valid) {
-      this.service.msgSrv.warning('必填项为空或格式错误，请检查！')
+    if (!this.validateForm.valid) {
+      this.service.msgSrv.warning('必填项为空或格式错误，请检查！');
       return;
     }
-    const params = {  
+    const params = {
       ...this.validateForm.value
     };
-    this.service.request(this.service.$api_set_phoneUpdatePassword, params).subscribe((res) => {
+    this.service.request(this.service.$api_set_phoneUpdatePassword, params).subscribe(res => {
       if (res) {
         this.service.msgSrv.success('修改密码成功！');
         this.isVisibleView = true;
         setTimeout(() => {
           this.tokenService.clear();
-          this.router.navigate(['/passport/login'])
-          this.modalRef.close()
-        }, 3000)
+          this.router.navigate(['/passport/login']);
+          this.modalRef.close();
+        }, 3000);
       }
     });
   }
@@ -120,11 +117,11 @@ export class AccountComponentsCenterEditComponent implements OnInit {
     }, 1000);
   }
   handleCancel() {
-     this.isVisibleView = false
- }
- handleOK() {
-   this.modalRef.close()
-   this.tokenService.clear();
-   this.router.navigate(['/passport/login'])
- }
+    this.isVisibleView = false;
+  }
+  handleOK() {
+    this.modalRef.close();
+    this.tokenService.clear();
+    this.router.navigate(['/passport/login']);
+  }
 }

src/app/routes/account/components/edit-paypassword/edit-paypassword.component.html

@@ -0,0 +1,171 @@
+<page-header-wrapper [title]="''" [logo]="logo">
+  <ng-template #logo>
+      <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
+          <i nz-icon nzType="left" nzTheme="outline"></i>
+      </button>
+  </ng-template>
+</page-header-wrapper>
+<nz-card>
+  <div class="container">
+    <div>
+      <div style="display: flex; align-items: center; min-height: 150px">
+        <nz-steps [nzCurrent]="step" style="display: contents" [nzProgressDot]="progressTemplate">
+          <nz-step nzTitle="安全验证"></nz-step>
+          <nz-step nzTitle="重设密码"></nz-step>
+          <nz-step nzTitle="完成"></nz-step>
+        </nz-steps>
+        <ng-template #progressTemplate let-dot let-status="status" let-index="index">
+          <ng-container *ngIf="status === 'finish'; else finshTemplate">
+            <i nz-icon nzType="check" nzTheme="outline" style="color: #fff"></i>
+          </ng-container>
+          <ng-template #finshTemplate>
+            {{ index + 1 }}
+          </ng-template>
+        </ng-template>
+      </div>
+      <nz-card [nzBordered]="false">
+        <div style="width: 480px; margin: 0 auto" [ngSwitch]="step.toString()">
+          <div *ngSwitchCase="0">
+            <sf #step1sf *ngIf="step1Schema" [schema]="step1Schema" button="none" [layout]="'horizontal'">
+              <ng-template sf-template="smsVerifyCode" let-smsVerifyCode let-ui="ui" let-schema="schema">
+                <nz-input-group [nzSuffix]="suffixTemplateInfo">
+                  <input
+                    type="text"
+                    maxlength="6"
+                    nz-input
+                    placeholder="请输入验证码"
+                    [ngModel]="smsVerifyCode.formProperty.value"
+                    (ngModelChange)="smsVerifyCode.setValue($event)"
+                  />
+                </nz-input-group>
+              </ng-template>
+              <div nz-col [nzPush]="5">
+                <button
+                  nz-button
+                  type="submit"
+                  nzType="primary"
+                  (click)="nextStep()"
+                  [disabled]="!step1sf.valid"
+                  [nzLoading]="service.http.loading"
+                >
+                  下一步
+                </button>
+              </div>
+            </sf>
+          </div>
+
+          <div *ngSwitchCase="1">
+            <form nz-form [formGroup]="formGroup3" class="myForm">
+              <nz-form-item>
+                <nz-form-label nzSpan="6" nzRequired nzFor="passWord">设置支付密码</nz-form-label>
+                <nz-form-control nzSpan="18" [nzErrorTip]="passwordErrorTpl">
+                  <nz-input-group [nzSuffix]="pwdIconEye">
+                    <input
+                      nz-input
+                      [type]="isShowPwd ? 'text' : 'password'"
+                      formControlName="passWord"
+                      minlength="6"
+                      maxlength="6"
+                      (ngModelChange)="validateConfirmPassword()"
+                      placeholder="请输入支付密码"
+                    />
+                  </nz-input-group>
+                  <ng-template #pwdIconEye>
+                    <span (click)="isShowPwd = !isShowPwd">
+                      <ng-container *ngIf="isShowPwd; else showPwdTempalte">
+                        <i nz-icon nzType="eye" nzTheme="outline"></i>
+                      </ng-container>
+                      <ng-template #showPwdTempalte>
+                        <i nz-icon nzType="eye-invisible" nzTheme="outline"></i>
+                      </ng-template>
+                    </span>
+                  </ng-template>
+                  <ng-template #passwordErrorTpl let-control>
+                    <ng-container *ngIf="control.hasError('required')"> 请输入支付密码! </ng-container>
+                    <ng-container *ngIf="control.hasError('minlength') || control.hasError('pattern')  || control.hasError('confirm')">
+                      6位数字，不能为连续数字或者相同数字（如123456、111111）
+                    </ng-container>
+                  </ng-template>
+                </nz-form-control>
+              </nz-form-item>
+              <nz-form-item>
+                <nz-form-label nzSpan="6" nzRequired nzFor="passWordTo">重复支付密码</nz-form-label>
+                <nz-form-control nzSpan="18" nzDisableAutoTips [nzErrorTip]="confirmPasswordErrorTpl">
+                  <nz-input-group [nzSuffix]="confirmPwdIconEye">
+                    <input
+                      nz-input
+                      [type]="isShowConfirmPwd ? 'text' : 'password'"
+                      formControlName="passWordTo"
+                      minlength="6"
+                      maxlength="6"
+                      (ngModelChange)="validateConfirmPassword()"
+                      placeholder="请输入支付密码"
+                    />
+                  </nz-input-group>
+                  <ng-template #confirmPwdIconEye>
+                    <span (click)="isShowConfirmPwd = !isShowConfirmPwd">
+                      <ng-container *ngIf="isShowConfirmPwd; else showConfirmPwdTempalte">
+                        <i nz-icon nzType="eye" nzTheme="outline"></i>
+                      </ng-container>
+                      <ng-template #showConfirmPwdTempalte>
+                        <i nz-icon nzType="eye-invisible" nzTheme="outline"></i>
+                      </ng-template>
+                    </span>
+                  </ng-template>
+                  <ng-template #confirmPasswordErrorTpl let-control>
+                    <ng-container *ngIf="control.hasError('required')"> 请输入确认密码! </ng-container>
+                    <ng-container *ngIf="control.hasError('passWordTo')"> 两次输入的密码不一致! </ng-container>
+                  </ng-template>
+                </nz-form-control>
+              </nz-form-item>
+              <nz-form-item>
+                <nz-form-control nzSpan="18" nzOffset="6">
+                  <button
+                    [disabled]="!formGroup3.valid"
+                    [nzLoading]="service.http.loading"
+                    nz-button
+                    nzType="primary"
+                    (click)="formSubmit()"
+                    style="width: 74px"
+                  >
+                    确认
+                  </button>
+                </nz-form-control>
+              </nz-form-item>
+            </form>
+          </div>
+          <div *ngSwitchCase="2" class="success-card">
+            <div class="card-icon">
+              <i nz-icon nzType="check" nzTheme="outline" style="color: #fff; font-size: 20px"></i>
+            </div>
+            <p class="card-title">密码设置成功</p>
+            <p class="card-descr">请牢记您的新支付密码，3秒后自动跳转至个人中心...</p>
+            <!-- <button
+              nz-button
+              type="button"
+              nzType="primary"
+              nzSize="large"
+              class="mt-lg"
+              style="font-size: 14px"
+              [routerLink]="['/passport/login']"
+            >
+              立即登录
+            </button> -->
+          </div>
+          <div *ngSwitchDefault></div>
+        </div>
+      </nz-card>
+    </div>
+  </div>
+</nz-card>
+
+<ng-template #suffixTemplateInfo>
+  <ng-container *ngIf="count < 1; else intervalTemplate">
+    <span class="msg-btn" style="color: #3370ff; cursor: pointer" (click)="getMsgCode()">获取验证码</span>
+  </ng-container>
+  <ng-template #intervalTemplate>
+    <!-- {{ count > 0 ? '请等待' + count + 's' : ('app.register.get-verification-code' | translate) }} -->
+    {{ count > 0 ? '请等待' + count + 's' : ('app.register.get-verification-code') }}
+  </ng-template>
+</ng-template>
+<app-captcha #dun [phone]="phone" (done)="captchaDone($event)"></app-captcha>

src/app/routes/account/components/edit-paypassword/edit-paypassword.component.less

@@ -0,0 +1,93 @@
+:host {
+  ::ng-deep {
+    page-grid {
+      background-color: #f0f3f7;
+
+      div.container {
+        width: 80%;
+        margin: 0 auto;
+        padding: 30px 1rem 1rem;
+      }
+    }
+
+    .ant-steps-item-process .ant-steps-item-icon {
+      background-color: #3370ff;
+      border-color: #3370ff;
+    }
+
+    .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-icon {
+      background: #3370ff;
+    }
+
+    .ant-steps-dot .ant-steps-item-icon,
+    .ant-steps-dot.ant-steps-small .ant-steps-item-icon {
+      width: 32px;
+      height: 32px;
+      margin-left: 55px;
+      line-height: 32px;
+      border: 1px solid rgba(0, 0, 0, 0.25);
+    }
+
+    // 文本
+    .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon {
+      color: #000;
+    }
+
+    // 连接线
+    .ant-steps-dot .ant-steps-item-tail,
+    .ant-steps-dot.ant-steps-small .ant-steps-item-tail {
+      top: 12px;
+      margin: 0 0 0 90px;
+    }
+
+    .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-tail::after {
+      background-color: rgba(0, 0, 0, 0.25);
+    }
+
+    .ant-steps-dot .ant-steps-item-process .ant-steps-item-icon,
+    .ant-steps-dot.ant-steps-small .ant-steps-item-process .ant-steps-item-icon {
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+    }
+
+    .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-tail::after {
+      background-color: rgba(0, 0, 0, 0.25);
+    }
+
+    .ant-steps-dot .ant-steps-item-tail::after,
+    .ant-steps-dot.ant-steps-small .ant-steps-item-tail::after {
+      width: calc(100% - 62px);
+      height: 1.5px;
+      margin-left: 12px;
+    }
+  }
+}
+
+.success-card {
+  text-align: center;
+
+  .card-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    margin: auto;
+    background-color: #52c41a;
+    border-radius: 50%;
+  }
+
+  .card-title {
+    margin: 14px 0 0;
+    font-weight: bold;
+    font-size: 16px;
+    text-align: center;
+  }
+
+  .card-descr {
+    margin: 8px 0 0;
+    font-size: 14px;
+    text-align: center;
+  }
+}

src/app/routes/account/components/edit-paypassword/edit-paypassword.component.spec.ts

@@ -0,0 +1,23 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { AccountComponentsEditPayPasswordComponent } from './edit-paypassword.component';
+
+describe('AccountComponentsEditPayPasswordComponent', () => {
+  let component: AccountComponentsEditPayPasswordComponent;
+  let fixture: ComponentFixture<AccountComponentsEditPayPasswordComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AccountComponentsEditPayPasswordComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountComponentsEditPayPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/routes/account/components/edit-paypassword/edit-paypassword.component.ts

@@ -0,0 +1,237 @@
+import { AfterViewInit, Component, Inject, OnInit, Optional, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ReuseTabService } from '@delon/abc/reuse-tab';
+import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
+import { SFComponent, SFSchema, SFTextareaWidgetSchema, SFTextWidgetSchema, SFUISchema } from '@delon/form';
+import { SettingsService } from '@delon/theme';
+import { CaptchaComponent } from 'src/app/shared/components/captcha';
+
+import { AccountService } from '../../services/account.service';
+
+@Component({
+  selector: 'app-account-components-edit-password',
+  templateUrl: './edit-paypassword.component.html',
+  styleUrls: ['./edit-paypassword.component.less'],
+})
+export class AccountComponentsEditPayPasswordComponent implements OnInit, AfterViewInit {
+  @ViewChild('dun', { static: false })
+  private dun!: CaptchaComponent;
+
+  step: 0 | 1 | 2 = 0;
+
+  step1Schema!: SFSchema;
+  ui!: SFUISchema;
+  @ViewChild('step1sf', { static: false })
+  step1sf!: SFComponent;
+
+  phone: string;
+
+  formGroup3!: FormGroup;
+  confirmPasswordValidator!: ValidatorFn;
+
+  isShowPwd = false;
+  isShowConfirmPwd = false;
+
+  count = 0;
+  interval$: any;
+
+  constructor(
+    private fb: FormBuilder,
+    public service: AccountService,
+    private route: ActivatedRoute,
+    private settingService: SettingsService,
+    private router: Router,
+    @Inject(ReuseTabService)
+    private reuseTabService: ReuseTabService,
+    @Optional()
+    @Inject(DA_SERVICE_TOKEN)
+    private tokenService: ITokenService,
+  ) {
+    this.phone = route.snapshot.queryParams.phone;
+  }
+
+  ngAfterViewInit(): void {
+    this.dun.init();
+  }
+
+  ngOnInit() {
+    if (this.phone) {
+      this.initStep1SF();
+    } else {
+      this.service.http.post(this.service.$api_get_current_user_info).subscribe((res) => {
+        if (res) {
+          this.phone = res.data?.phone;
+          this.initStep1SF();
+        }
+      });
+    }
+
+    this.confirmPasswordValidator = (control) => {
+      if (!control.value) {
+        return { error: true, required: true };
+      } else if (control.value !== this.formGroup3.controls.passWord.value) {
+        return { passWordTo: true, error: true };
+      }
+      return {};
+    };
+
+    this.formGroup3 = this.fb.group({
+      passWord: [
+        null,
+        [
+          Validators.required,
+          Validators.maxLength(6),
+          Validators.minLength(6),
+          Validators.pattern('([\\d]){6,6}'),
+          this.blurTestPw
+
+        ],
+      ],
+      passWordTo: [null, [this.confirmPasswordValidator, Validators.required, Validators.maxLength(6), Validators.minLength(6)]],
+      voucher: [null, [Validators.required]],
+    });
+  }
+
+  initStep1SF() {
+    this.step1Schema = {
+      properties: {
+        phone: {
+          title: '手机号',
+          type: 'string',
+          ui: {
+            widget: 'text',
+            defaultText: this.phone.toString(),
+          } as SFTextWidgetSchema,
+        },
+        smsVerifyCode: {
+          type: 'string',
+          title: '验证码',
+          ui: {
+            widget: 'custom',
+            errors: {
+              required: '请输入验证码',
+            },
+          } as SFTextareaWidgetSchema,
+        },
+      },
+      required: ['smsVerifyCode'],
+    };
+
+    this.ui = {
+      '*': { spanLabelFixed: 90, grid: { span: 16, gutter: 4 } },
+    };
+  }
+
+  nextStep() {
+    if (this.step1sf.valid) {
+      this.service.request(this.service.$api_get_verifyPhone, this.step1sf.value).subscribe((res) => {
+        if (res) {
+          this.formGroup3.patchValue(res, { onlySelf: true });
+          this.step = 1;
+          this.count = 0;
+          clearInterval(this.interval$);
+        }
+      });
+    }
+  }
+
+  formSubmit() {
+    for (const i in this.formGroup3.controls) {
+      if (true) {
+        this.formGroup3.controls[i].markAsDirty();
+        this.formGroup3.controls[i].updateValueAndValidity();
+      }
+    }
+
+    if (this.formGroup3.valid) {
+      const param = Object.assign({}, this.formGroup3.value);
+      this.service.http.post(this.service.$api_voucherUpdatePayPassword, param).subscribe((res) => {
+        if (res.success === true) {
+          this.step++;
+          setTimeout(() => {
+            // this.settingService.setUser({});
+            // // 清空路由复用信息
+            // this.reuseTabService.clear();
+            // // 设置用户Token信息
+            // this.tokenService.clear();
+            this.router.navigate(['/account/center']);
+          }, 3000);
+        }
+      });
+    }
+  }
+
+  getMsgCode() {
+    if (this.phone) {
+      this.getCode(`${this.service.$api_get_msg_code}`);
+    } else {
+      this.service.request(this.service.$api_get_current_user_info).subscribe((res) => {
+        this.phone = res.phone;
+        this.getCode(`${this.service.$api_get_msg_code}`);
+      });
+    }
+  }
+  goBack() {
+    window.history.go(-1);
+  }
+  getCode(url: string, params?: any) {
+    this.service.http.post(url, null, params).subscribe((res) => {
+      // code==503046 弹出网易盾
+      if (res.success && res.data.code === '1') {
+        this.service.msgSrv.success('发送成功');
+        this.codeCountDown();
+      } else if (res.data.code === '503046') {
+        this.dun.popUp();
+      } else {
+        this.service.msgSrv.success(res.sendResult);
+      }
+    });
+  }
+  /* code倒计时 */
+  codeCountDown() {
+    this.count = 59;
+    this.interval$ = setInterval(() => {
+      this.count -= 1;
+      if (this.count <= 0) {
+        clearInterval(this.interval$);
+      }
+    }, 1000);
+  }
+  /* 网易盾验证通过 */
+  captchaDone(validate: any) {
+    this.codeCountDown();
+  }
+
+  validateConfirmPassword(): void {
+    
+    setTimeout(() => this.formGroup3.controls.passWordTo.updateValueAndValidity());
+  }
+  // blurTestPw(){
+  //   const reg = /[^\d]/g
+  //   const val: any = this.formGroup3.controls.passWord.value
+  //   if(val.length === 6) {
+  //     const pattern = /([\d])\1{2,}/g
+  //     const pattern2 = /(?:(?:0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)){5}|(?:9(?=8)|8(?=7)|7(?=6)|6(?=5)|5(?=4)|4(?=3)|3(?=2)|2(?=1)|1(?=0)){5})\d/g   
+  //     if(pattern.test(val) || pattern2.test(val)){
+  //       return false
+  //     } else {
+  //       return true
+  //     } 
+  //   } else {
+  //     return false
+  //   }
+  // }
+  blurTestPw = (control: FormControl): { [s: string]: boolean } => {
+    if (!control.value) {
+      return { required: true };
+    } else if (control.value.length === 6) {
+      const pattern = /([\d])\1{2,}/g
+      const pattern2 = /(?:(?:0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)){5}|(?:9(?=8)|8(?=7)|7(?=6)|6(?=5)|5(?=4)|4(?=3)|3(?=2)|2(?=1)|1(?=0)){5})\d/g   
+      if(pattern.test(control.value) || pattern2.test(control.value)){
+        return { confirm: true, error: true };
+      }
+    }
+    return {};
+  };
+}

src/app/routes/account/services/account.service.ts

@@ -36,6 +36,15 @@ export class AccountService extends BaseService {
   $api_set_voucherUpdatePhone = `/api/mdc/cuc/userBasicInfo/forgetPassword/voucherUpdatePhone`;
   // 凭证修改密码
   $api_set_phoneUpdatePassword = `/api/mdc/cuc/userBasicInfo/phoneUpdatePassword`;
+  // 凭证修改设置身份密码
+  $api_voucherUpdatePayPassword = '/api/mdc/cuc/userVerify/forgetPassword/voucherUpdatePassword';
+  // 根据当前登录用户绑定的手机号码获取短信验证码
+  public $api_get_msg_code = `/api/mdc/pbc/smsSend/getSmVerificationCodeByToken`;
+  // 用户下默认企业项目
+  $api_getUserDefaultEnterpriseProject = '/api/mdc/cuc/enterpriseProject/getUserDefaultEnterpriseProject';
+  // 当前登录用户是否设置用户验证密码
+  $api_isUserVerifyPassword = '/api/mdc/cuc/userVerify/isUserVerifyPassword';
+
   constructor(public injector: Injector) {
     super(injector);
   }

src/app/routes/commom/components/basic-table/basic-table.component.ts

@@ -1,14 +1,43 @@
-import { AfterViewInit, Component, OnInit } from '@angular/core';
-import { fromEvent } from 'rxjs';
+import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
+import { OnReuseDestroy, OnReuseInit, ReuseHookOnReuseInitType } from '@delon/abc/reuse-tab';
+import { SFComponent, SFSchema } from '@delon/form';
+import { SearchDrawerService } from '@shared';
+import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
+/**
+ * 列表基础组件
+ * 功能：
+ *  1、计算列表滚动高度（scrollY）
+ *      实现：
+ *        1、列表组件需继承BasicTableComponent，并且提供SearchDrawerService派生类
+ *        2、引入commom-table.less 样式文件
+ *        3、列表使用table-box class包裹。组件会自动减去layout-pro-header、page-header-wrapper和nz-tabs-nav标签的高度，以及header_box和height_box class的高度，最后减去deviationHeight的偏移高度
+ *  2、提供筛选抽屉，并返回sf实例（sf）
+ *      实现：
+ *        1、列表组件需继承BasicTableComponent，并且提供SearchDrawerService派生类
+ *        2、实例化schema，及给schema赋值sf配置
+ *        3、重写search()方法。当筛选抽屉触发查询时会调用这个方法
+ *      提供：
+ *        1、抽屉的sf实例
+ *        2、sf.value的数据=>sfValue
+ */
 @Component({
   template: ''
 })
-export class BasicTableComponent implements AfterViewInit {
+export class BasicTableComponent implements AfterViewInit, OnDestroy, OnReuseDestroy, OnReuseInit {
   scrollY = '400px';
 
-  constructor() {}
+  sf!: SFComponent;
+  sfValue: Record<string, any> = {};
+  schema: SFSchema = {};
+
+  deviationHeight = 0;
+
+  constructor(public searchDrawerService: SearchDrawerService) {}
+  _onReuseInit(type?: ReuseHookOnReuseInitType): void {
+    this.search();
+  }
 
   ngAfterViewInit(): void {
     setTimeout(() => {
@@ -21,20 +50,82 @@ export class BasicTableComponent implements AfterViewInit {
       });
   }
 
+  _onReuseDestroy(): void {
+    // this.drawer.forEach(sub => sub.unsubscribe());
+  }
+
+  ngOnDestroy(): void {
+    this.searchDrawerService.unsubscribe();
+  }
+
+  openDrawer() {
+    if (this.searchDrawerService.drawer?.length > 0) {
+      this.searchDrawerService.create(this.sfValue, this.schema);
+    } else {
+      const drawer = this.searchDrawerService.create(this.sfValue, this.schema);
+      this.searchDrawerService.drawer.push(
+        drawer.initEvent.subscribe((sf: SFComponent) => {
+          if (sf) {
+            this.sf = sf;
+          }
+        })
+      );
+      this.searchDrawerService.drawer.push(
+        drawer.closeEvent.subscribe((res: Record<string, any>) => {
+          this.sfValue = res;
+          if (res) {
+            this.search();
+          }
+        })
+      );
+    }
+  }
+
   getScrollY() {
     const windowHeight = window.innerHeight || Math.max(document.documentElement.clientHeight, document.body.clientHeight);
     const header = document.getElementsByTagName('layout-pro-header')?.[0];
     if (windowHeight && header) {
       let scrollY = windowHeight - header.clientHeight - 35 - 49;
+      // 剔除页头高度
       const headerWrapper = document.getElementsByTagName('page-header-wrapper')?.[0];
       if (headerWrapper) {
         scrollY -= headerWrapper.clientHeight;
       }
-      const tabset = document.getElementsByTagName('nz-tabset')?.[0];
+      // 计算所有tabs高度
+      const tabset = document.getElementsByTagName('nz-tabs-nav');
+      let tabsetHeight = 0;
+      for (let index = 0; index < tabset.length; index++) {
+        tabsetHeight += tabset[index].clientHeight;
+      }
       if (tabset) {
-        scrollY -= tabset.clientHeight;
+        scrollY -= tabsetHeight;
+      }
+      // 剔除高度容器
+      const headerBox = document.getElementsByClassName('header_box');
+      let headerBoxHeight = 0;
+      for (let index = 0; index < headerBox.length; index++) {
+        headerBoxHeight += headerBox[index].clientHeight;
+      }
+      if (headerBox) {
+        scrollY -= headerBoxHeight;
+      }
+
+      // 剔除高度容器
+      const heightBox = document.getElementsByClassName('height_box');
+      let heightBoxHeight = 0;
+      for (let index = 0; index < heightBox.length; index++) {
+        heightBoxHeight += heightBox[index].clientHeight;
+      }
+      if (heightBox) {
+        scrollY -= heightBoxHeight;
+      }
+
+      if (typeof this.deviationHeight === 'number') {
+        scrollY -= this.deviationHeight;
       }
       this.scrollY = scrollY + 'px';
     }
   }
+
+  search() {}
 }

src/app/routes/commom/index.ts

@@ -0,0 +1 @@
+export * from './components/basic-table/basic-table.component';

src/app/routes/commom/less/commom-table.less

@@ -9,7 +9,7 @@
     }
 
     .ant-tabs-tab {
-      margin: 0 0 0 16px;
+      margin : 0 0 0 16px;
       padding: 12px 0;
     }
 
@@ -21,31 +21,77 @@
       .ant-card-body {
         padding: 0;
       }
+
+      .tab_header {
+        display    : flex;
+        align-items: center;
+
+        .page_title {
+          font-weight: bold;
+          font-size  : 17px;
+
+          .driver {
+            color       : #ff4d4f;
+            margin-left : 17px;
+            margin-right: 6px;
+          }
+        }
+
+        nz-tabset {
+          flex: 1;
+        }
+      }
+
+    }
+
+    .double_tabset_box {
+      margin    : -24px -24px 0;
+      background: #ffffff;
+
+      .tab_header {
+        .page_title {
+          font-weight: bold;
+          font-size  : 17px;
+
+          .driver {
+            color       : #ff4d4f;
+            margin-left : 17px;
+            margin-right: 6px;
+          }
+        }
+      }
+
+      .header_tab {
+
+        nz-tabs-nav {
+          margin-bottom: 0;
+        }
+      }
     }
 
     .ant-table-pagination.ant-pagination {
       margin: 8px;
     }
 
-    .ant-table-thead > tr > th,
-    .ant-table-tbody > tr > td,
-    .ant-table tfoot > tr > th,
-    .ant-table tfoot > tr > td {
+    .ant-table-thead>tr>th,
+    .ant-table-tbody>tr>td,
+    .ant-table tfoot>tr>th,
+    .ant-table tfoot>tr>td {
       padding: 8px;
     }
 
-    .ant-table.ant-table-bordered > .ant-table-container {
+    .ant-table.ant-table-bordered>.ant-table-container {
       border-top: 0;
     }
 
     .ant-pagination-item {
-      min-width: 24px;
-      height: 24px;
+      min-width  : 24px;
+      height     : 24px;
       line-height: 21px;
     }
 
     .ant-pagination-total-text {
-      height: 24px;
+      height     : 24px;
       line-height: 24px;
     }
 
@@ -53,8 +99,8 @@
     .ant-pagination-next,
     .ant-pagination-jump-prev,
     .ant-pagination-jump-next {
-      min-width: 24px;
-      height: 24px;
+      min-width  : 24px;
+      height     : 24px;
       line-height: 21px;
     }
 
@@ -66,5 +112,42 @@
     .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
       line-height: 21px;
     }
+
+    .text-truncate {
+      white-space: normal;
+    }
+
+    // 强制头部居中
+    .ant-table-container table>thead>tr>.options {
+      text-align: center !important;
+    }
   }
 }
+
+
+.header_box {
+  display        : flex;
+  align-items    : center;
+  justify-content: space-between;
+  min-height     : 47px;
+
+  .page_title {
+    font-weight: bold;
+    font-size  : 17px;
+
+    .driver {
+      color       : #ff4d4f;
+      margin-left : 17px;
+      margin-right: 6px;
+    }
+  }
+}
+
+.height_box {}
+
+.filter-box {
+  .com-input {
+    width : 150px;
+    height: 32PX;
+  }
+}

src/app/routes/commom/less/common-table-bar.less

@@ -0,0 +1,17 @@
+:host::ng-deep {
+    nz-card {
+        margin: -8px -8px 0 !important
+    }
+
+    .height_box {
+        margin-bottom: 18px !important;
+    }
+}
+
+.total-footer {
+    position   : absolute;
+    bottom     : 0px;
+    height     : 32px;
+    margin     : 4px 8px;
+    line-height: 32px;
+}

src/app/routes/commom/less/trajectory.less

@@ -0,0 +1,48 @@
+: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;
+    }
+}

src/app/routes/contract-management/components/contract-detail/contract-detail.component.ts

@@ -22,11 +22,8 @@ import { ContractManagementService } from '../../services/contract-management.se
 })
 export class ContractManagementDetailComponent implements OnInit {
   constructor(
-    private nzModalService: NzModalService,
     public service: ContractManagementService,
-    public route: ActivatedRoute,
-    private datePipe: DatePipe,
-    private router: Router
+    public route: ActivatedRoute
   ) {}
   textStatus = '合同详情';
   name: any;

src/app/routes/contract-management/components/contract-frame/contract-frame.component.html

@@ -41,7 +41,7 @@
           nz-button
           nzType="primary"
           [disabled]="!sf.valid"
-          [nzLoading]="false"
+          [nzLoading]="isLoading && st.loading"
           (click)="st?.load(1)"
           acl
           [acl-ability]="['CONTRACT-INDEX-listFrame']"
@@ -75,12 +75,13 @@
     [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
     [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
     [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
-    [loading]="false"
+    [loading]="service.http.loading"
     [scroll]="{ x: '1200px', y: '370px' }"
     (change)="stChange($event)"
   >
     <ng-template st-row="contractCode" let-item let-index="index">
-      <a [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a>
+      <a *ngIf="item.esignFlowStatus == '2'" (click)="service.openURL(item?.contractFilePath)">{{ item?.contractCode }}</a>
+      <a *ngIf="item.esignFlowStatus !== '2'" [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a>
     </ng-template>
   </st>
 </nz-card>

src/app/routes/contract-management/components/contract-frame/contract-frame.component.ts

@@ -26,43 +26,50 @@ 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'),
-         }
-      }
-      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
+  /**
+   * 查询参数
+   */
+  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
+    };
+  }
   /**
    * 初始化数据列表
    */
@@ -70,7 +77,7 @@ export class ContractManagementFrameComponent implements OnInit {
     this.columns = [
       {
         title: '合同编号',
-        width: '100px',
+        width: '130px',
         className: 'text-center',
         render: 'contractCode'
       },
@@ -90,7 +97,7 @@ export class ContractManagementFrameComponent implements OnInit {
         title: '合同名称',
         width: '100px',
         className: 'text-center',
-        index: 'templateName'
+        index: 'contractName'
       },
       { title: '网络货运人', index: 'enterpriseInfoName', width: '120px', className: 'text-center' },
       { title: '合同对象', index: 'contractObjectName', width: '120px', className: 'text-center' },
@@ -121,6 +128,19 @@ 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))
+          }
+        ]
       }
     ];
   }
@@ -141,11 +161,11 @@ export class ContractManagementFrameComponent implements OnInit {
           enum: [
             { label: '全部', value: '' },
             { label: '货主', value: 1 },
-            { label: '司机', value: 2 },
+            { label: '司机', value: 2 }
           ],
           ui: {
             widget: 'select',
-            placeholder: '请选择',
+            placeholder: '请选择'
           }
         },
         contractType: {
@@ -156,8 +176,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',
@@ -177,8 +197,8 @@ export class ContractManagementFrameComponent implements OnInit {
           title: '合同对象',
           ui: {
             visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+              _$expand: (value: boolean) => value
+            }
           }
         },
         signTime: {
@@ -187,8 +207,8 @@ export class ContractManagementFrameComponent implements OnInit {
           ui: {
             widget: 'custom',
             visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+              _$expand: (value: boolean) => value
+            }
           }
         },
         effectiveEndTime: {
@@ -197,8 +217,8 @@ export class ContractManagementFrameComponent implements OnInit {
           ui: {
             widget: 'custom',
             visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+              _$expand: (value: boolean) => value
+            }
           }
         },
         esignFlowStatus: {
@@ -209,12 +229,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'
     };
@@ -293,6 +313,7 @@ export class ContractManagementFrameComponent implements OnInit {
   resetSF() {
     this.sf.reset();
     this._$expand = false;
+    this.isLoading = true;
   }
 
   /**

src/app/routes/contract-management/components/contract-list/contract-list.component.html

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2021-12-07 15:57:49
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-02-23 20:11:50
+ * @LastEditTime : 2022-05-07 17:52:57
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-list\\contract-list.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
@@ -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]="false"
-          (click)="st?.load(1)"  acl  [acl-ability]="['CONTRACT-INDEX-searchDetail']">查询</button>
+        <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 (click)="resetSF()">重置</button>
         <button nz-button nzType="link" (click)="expandToggle()">
           {{ !_$expand ? '展开' : '收起' }}
@@ -48,14 +48,15 @@
     </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 [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a>
+      <a *ngIf="item.esignFlowStatus == '2'" (click)="service.openURL(item?.contractFilePath)">{{ item?.contractCode }}</a>
+      <a *ngIf="item.esignFlowStatus !== '2'" [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>

src/app/routes/contract-management/components/contract-list/contract-list.component.ts

@@ -25,20 +25,24 @@ 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
@@ -50,12 +54,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();
   }
   /**
    * 初始化数据列表
@@ -64,7 +68,7 @@ export class ContractManagementContractListComponent implements OnInit {
     this.columns = [
       {
         title: '合同编号',
-        width: '100px',
+        width: '130px',
         className: 'text-center',
         render: 'contractCode'
       },
@@ -72,7 +76,7 @@ export class ContractManagementContractListComponent implements OnInit {
         title: '签约对象',
         width: '100px',
         className: 'text-center',
-        index: 'documentType'
+        index: 'signingObjectLabel'
       },
       {
         title: '合同类型',
@@ -105,72 +109,133 @@ 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: '业务单号'
         },
-        shipperName: {
+        signingObject: {
           type: 'string',
-          title: '托运人'
-        },
-        carrierName: {
-          type: 'string',
-          title: '承运人',
+          title: '签约对象',
+          enum: [
+            { label: '全部', value: '' },
+            { label: '货主', value: 1 },
+            { label: '司机', value: 2 }
+          ],
           ui: {
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+            widget: 'select',
+            placeholder: '请选择'
           }
         },
-        documentType: {
-          title: '单据类型',
+        contractType: {
+          title: '合同类型',
           type: 'string',
           default: '',
           ui: {
             widget: 'dict-select',
-            containsAllLabel: true,
-            params: { dictKey: 'contract:document:type' },
-            containAllLable: true,
+            containsAllLable: true,
+            params: { dictKey: 'contract:type' },
             visibleIf: {
-              _$expand: (value: boolean) => value,
+              _$expand: (value: boolean) => value
             },
-          } as SFSelectWidgetSchema,
+            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
+            }
+          }
         },
         signTime: {
           title: '签署日期',
           type: 'string',
           ui: {
-            widget: 'custom',
+            widget: 'sl-from-to-search',
+            format: 'yyyy-MM-dd',
             visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
-          }
+              _$expand: (value: boolean) => value
+            }
+          } as SFDateWidgetSchema
         },
+        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;
   }
@@ -235,6 +300,7 @@ export class ContractManagementContractListComponent implements OnInit {
   resetSF() {
     this.sf.reset();
     this._$expand = false;
+    this.isLoading = true;
   }
   /**
    * 伸缩查询条件

src/app/routes/contract-management/components/contract-partner/contract-partner.component.html

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-01-07 13:29:57
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-02-24 10:08:28
+ * @LastEditTime : 2022-05-07 17:56:08
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-partner\\contract-partner.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
@@ -41,7 +41,7 @@
           nz-button
           nzType="primary"
           [disabled]="!sf.valid"
-          [nzLoading]="false"
+          [nzLoading]="service.http.loading"
           (click)="st?.load(1)"
           acl
           [acl-ability]="['CONTRACT-INDEX-listFrame']"
@@ -80,7 +80,8 @@
     (change)="stChange($event)"
   >
     <ng-template st-row="contractCode" let-item let-index="index">
-      <a [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a>
+      <a *ngIf="item.esignFlowStatus == '2'" (click)="service.openURL(item?.contractFilePath)">{{ item?.contractCode }}</a>
+      <a *ngIf="item.esignFlowStatus !== '2'" [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a>
     </ng-template>
   </st>
 </nz-card>

src/app/routes/contract-management/components/contract-partner/contract-partner.component.ts

@@ -70,7 +70,7 @@ export class ContractManagementPartnerComponent implements OnInit {
     this.columns = [
       {
         title: '合同编号',
-        width: '100px',
+        width: '130px',
         className: 'text-center',
         render: 'contractCode'
       },
@@ -78,7 +78,7 @@ export class ContractManagementPartnerComponent implements OnInit {
         title: '签约对象',
         width: '100px',
         className: 'text-center',
-        index: 'signingObject'
+        index: 'signingObjectLabel'
       },
       {
         title: '合同类型',
@@ -121,6 +121,19 @@ 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))
+          }
+        ]
       }
     ];
   }

src/app/routes/contract-management/components/contract-template-detail/contract-template-detail.component.html

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-01-05 11:01:55
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-01-18 17:16:27
+ * @LastEditTime : 2022-04-15 14:07:19
  * @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,9 +34,6 @@
 <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>
 

src/app/routes/contract-management/components/contract-template-detail/contract-template-detail.component.ts

@@ -5,7 +5,7 @@ import { OnChanges } from '@angular/core';
  * @Author       : Shiming
  * @Date         : 2022-01-05 11:01:55
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-02-28 20:22:46
+ * @LastEditTime : 2022-05-07 14:28:16
  * @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.
  */
@@ -87,7 +87,6 @@ export class ContractManagementTemplateTextComponent implements OnInit {
             widget: 'select',
             placeholder: '请选择',
             change: (tag: any, org: any) => {
-              console.log(tag);
               switch (tag) {
                 case 'MX':
                   this.Types = [
@@ -95,7 +94,8 @@ export class ContractManagementTemplateTextComponent implements OnInit {
                     { label: '订单补充协议', value: '2' },
                     { label: '运单合同', value: '3' },
                     { label: '运单补充协议', value: '4' },
-                    { label: '委托代收合同', value: '5' }
+                    { label: '委托代收合同', value: '5' },
+                    { label: '权力义务转让协议', value: '10' },
                   ];
                   this.sf.getProperty('/contractType')!.schema.enum = this.Types;
                   this.sf.getProperty('/contractType')!.widget.reset(this.Types);
@@ -176,7 +176,7 @@ export class ContractManagementTemplateTextComponent implements OnInit {
           }
         }
       },
-      required: ['templateName', 'templateType']
+      required: ['templateName', 'templateType', 'contractType']
     };
     this.ui = {
       '*': {
@@ -204,14 +204,70 @@ export class ContractManagementTemplateTextComponent implements OnInit {
     };
   }
   initData(url: string) {
-    console.log('编辑');
-
     this.service.request(url, { id: this.route.snapshot.params.id }).subscribe(res => {
       if (res) {
         this.detailList = res;
         this.title = this.detailList?.templateName;
         this.sfdata = res;
         this.sfdata2 = res;
+    
+        switch (res.templateType) {
+          case 'MX':
+            let Types1 = [
+              { label: '订单合同', value: '1' },
+              { label: '订单补充协议', value: '2' },
+              { label: '运单合同', value: '3' },
+              { label: '运单补充协议', value: '4' },
+              { label: '委托代收合同', value: '5' },
+              { label: '权力义务转让协议', value: '10' },
+            ];
+            setTimeout(() => {
+              if (this.sf) {
+                this.sf.getProperty('/contractType')!.schema.enum = Types1;
+                this.sf.getProperty('/contractType')!.widget.reset(Types1);
+                if (res.contractType) {
+                  this.sf.setValue('/contractType', res.contractType);
+                }
+              }
+            });
+
+            return;
+            break;
+          case 'KJ':
+            const Types2 = [
+              { label: '网络货物运输服务合同', value: '6' },
+              { label: '运输服务承揽合同', value: '7' }
+            ];
+            setTimeout(() => {
+              if (this.sf) {
+                this.sf.getProperty('/contractType')!.schema.enum = Types2;
+                this.sf.getProperty('/contractType')!.widget.reset(Types2);
+                if (res.contractType) {
+                  this.sf.setValue('/contractType', res.contractType);
+                }
+              }
+            });
+            return;
+            break;
+          case 'HHR':
+            const Types3 = [
+              { label: '企业合伙人入驻合同', value: '8' },
+              { label: '个人合伙人入驻合同', value: '9' }
+            ];
+            setTimeout(() => {
+              if (this.sf) {
+                this.sf.getProperty('/contractType')!.schema.enum = Types3;
+                this.sf.getProperty('/contractType')!.widget.reset(Types3);
+                if (res.contractType) {
+                  this.sf.setValue('/contractType', res.contractType);
+                }
+              }
+            });
+            return;
+            break;
+          default:
+            break;
+        }
       }
     });
   }
@@ -220,22 +276,26 @@ export class ContractManagementTemplateTextComponent implements OnInit {
   }
 
   save() {
-    // if (!this.sf.value.templateName || !this.sf.value.templateType || !this.sf2.value.templateContent || !this.title) {
-    //   this.service.msgSrv.error('必填参数为空，请检查再重新保存！');
-    //   return;
-    // }
-    // if (this.sf.value.templateType == 'MX') {
-    //   if (this.sf.value.contractType == '') {
-    //     this.service.msgSrv.error('必填参数为空，请检查再重新保存！');
-    //     return;
-    //   }
-    // }
+    if (
+      !this.sf?.value.templateName ||
+      !this.sf?.value.templateType ||
+      !this.sf2.value.templateContent ||
+      !(this.title || this.detailList.templateName)
+    ) {
+      this.service.msgSrv.error('必填参数为空，请检查再重新保存！');
+      return;
+    }
+    if (this.sf?.value.templateType == 'MX') {
+      if (this.sf?.value.contractType == '') {
+        this.service.msgSrv.error('必填参数为空，请检查再重新保存！');
+        return;
+      }
+    }
     const params = {
-      ...this.sf.value,
+      ...this.sf?.value,
       ...this.sf2.value,
-      templateTitle: this.title || this.detailList.templateName
+      templateTitle: this.detailList.templateName || this.title
     };
-    console.log(params);
     this.service.request(this.service.$api_save_contractTemplate, params).subscribe((res: any) => {
       if (res) {
         this.service.msgSrv.success('保存成功！');
@@ -243,4 +303,5 @@ export class ContractManagementTemplateTextComponent implements OnInit {
       }
     });
   }
+  EditType() {}
 }

src/app/routes/contract-management/components/contract-template-frame/contract-template-frame.component.html

@@ -43,7 +43,7 @@
           nz-button
           nzType="primary"
           [disabled]="!sf.valid"
-          [nzLoading]="false"
+          [nzLoading]="service.http.loading"
           (click)="st?.load(1)"
           acl
           [acl-ability]="['CONTRACT-INDEX-listFrame']"
@@ -75,7 +75,8 @@
       [loading]="false"
     >
       <ng-template st-row="templateName" let-item let-index="index">
-        <a (click)="view(item)">{{ item.templateName }}</a>
+        <a (click)="service.openURL(item?.contractFilePath)">{{ 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>

src/app/routes/contract-management/components/contract-template-frame/contract-template-frame.component.ts

@@ -125,17 +125,18 @@ export class ContractManagementTemplateFrameComponent implements OnInit {
       {
         title: '合同模板名称',
         className: 'text-center',
+        width: '300px',
         render: 'templateName'
       },
       {
         title: '签约对象',
         width: '100px',
         className: 'text-center',
-        render: 'signingObjectLabel'
+        index: 'signingObjectLabel'
       },
       {
         title: '合同类型',
-        width: '100px',
+        width: '200px',
         className: 'text-center',
         index: 'contractTypeLabel'
       },
@@ -145,15 +146,17 @@ export class ContractManagementTemplateFrameComponent implements OnInit {
         className: 'text-center',
         index: 'resourceTypeLabel'
       },
-      { title: '创建人', index: 'createUserId', width: '120px', className: 'text-center' },
+      { title: '创建人', index: 'createUserIdLabel', width: '120px', className: 'text-center' },
       {
         title: '创建时间',
         className: 'text-center',
-        index: 'createTime'
+        index: 'createTime',
+        width: '200px'
       },
       {
         title: '操作',
         fixed: 'right',
+        width: '110px',
         className: 'text-center',
         buttons: [
           {
@@ -242,7 +245,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(1)
+            this.st.reload()
           }
         })
     });

src/app/routes/contract-management/components/contract-template-partner/contract-template-partner.component.html

@@ -43,7 +43,7 @@
           nz-button
           nzType="primary"
           [disabled]="!sf.valid"
-          [nzLoading]="false"
+          [nzLoading]="service.http.loading"
           (click)="st?.load(1)"
           acl
           [acl-ability]="['CONTRACT-INDEX-listFrame']"
@@ -75,7 +75,8 @@
       [loading]="false"
     >
       <ng-template st-row="templateName" let-item let-index="index">
-        <a (click)="view(item)">{{ item.templateName }}</a>
+        <a (click)="service.openURL(item?.contractFilePath)">{{ item.templateName }}</a>
+        <!-- <a (click)="view(item)">{{ item.templateName }}</a> -->
       </ng-template>
     </st>
   </div>

src/app/routes/contract-management/components/contract-template-partner/contract-template-partner.component.ts

@@ -125,6 +125,7 @@ export class ContractManagementTemplatePartnerComponent implements OnInit {
       {
         title: '合同模板名称',
         className: 'text-center',
+        width: '300px',
         render: 'templateName'
       },
       {
@@ -135,7 +136,7 @@ export class ContractManagementTemplatePartnerComponent implements OnInit {
       },
       {
         title: '合同类型',
-        width: '100px',
+        width: '200px',
         className: 'text-center',
         index: 'contractTypeLabel'
       },
@@ -145,15 +146,17 @@ export class ContractManagementTemplatePartnerComponent implements OnInit {
         className: 'text-center',
         index: 'resourceTypeLabel'
       },
-      { title: '创建人', index: 'createUserId', width: '120px', className: 'text-center' },
+      { title: '创建人', index: 'createUserIdLabel', width: '120px', className: 'text-center' },
       {
         title: '创建时间',
         className: 'text-center',
-        index: 'createTime'
+        index: 'createTime',
+        width: '200px'
       },
       {
         title: '操作',
         fixed: 'right',
+        width: '110px',
         className: 'text-center',
         buttons: [
           {
@@ -242,7 +245,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(1)
+            this.st.reload()
           }
         })
     });

src/app/routes/contract-management/components/contract-template/contract-template.component.html

@@ -43,7 +43,7 @@
           nz-button
           nzType="primary"
           [disabled]="!sf.valid"
-          [nzLoading]="false"
+          [nzLoading]="service.http.loading"
           (click)="st?.load(1)"
           acl
           [acl-ability]="['CONTRACT-INDEX-listFrame']"

src/app/routes/contract-management/components/contract-template/contract-template.component.ts

@@ -125,6 +125,7 @@ export class ContractManagementTemplateDetailComponent implements OnInit {
       {
         title: '合同模板名称',
         className: 'text-center',
+        width: '300px',
         render: 'templateName'
       },
       {
@@ -135,7 +136,7 @@ export class ContractManagementTemplateDetailComponent implements OnInit {
       },
       {
         title: '合同类型',
-        width: '100px',
+        width: '200px',
         className: 'text-center',
         index: 'contractTypeLabel'
       },
@@ -145,15 +146,17 @@ export class ContractManagementTemplateDetailComponent implements OnInit {
         className: 'text-center',
         index: 'resourceTypeLabel'
       },
-      { title: '创建人', index: 'createUserId', width: '120px', className: 'text-center' },
+      { title: '创建人', index: 'createUserIdLabel', width: '120px', className: 'text-center' },
       {
         title: '创建时间',
         className: 'text-center',
-        index: 'createTime'
+        index: 'createTime',
+        width: '200px'
       },
       {
         title: '操作',
         fixed: 'right',
+        width: '110px',
         className: 'text-center',
         buttons: [
           {
@@ -242,7 +245,7 @@ export class ContractManagementTemplateDetailComponent implements OnInit {
         this.service.request(this.service.$api_deletebatch_contractTemplate, [value.id]).subscribe(res => {
           if (res) {
             this.service.msgSrv.success('删除成功！');
-            this.st.reload(1)
+            this.st.reload()
           }
         })
     });

src/app/routes/contract-management/components/index/index.component.html

@@ -9,15 +9,16 @@
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
 
+
 <page-header-wrapper title="合同管理" [tab]="tpTab">
 </page-header-wrapper>
 <ng-template #tpTab>
   <nz-tabset [(nzSelectedIndex)]="selectedIndex">
-    <nz-tab nzTitle="明细合同">
+    <nz-tab nzTitle="明细合同" *ngIf="isShowDetail">
       <app-contract-management-contract-list></app-contract-management-contract-list>
     </nz-tab>
-    <nz-tab nzTitle="框架合同">
-      <app-contract-management-contract-frame></app-contract-management-contract-frame>
+    <nz-tab nzTitle="框架合同"*ngIf="isShowFrame">
+        <app-contract-management-contract-frame ></app-contract-management-contract-frame>
     </nz-tab>
     <nz-tab nzTitle="合伙人合同">
       <app-contract-management-contract-partner></app-contract-management-contract-partner>

src/app/routes/contract-management/components/index/index.component.ts

@@ -1,5 +1,5 @@
 /*
- * @Description  : 
+ * @Description  :
  * @Version      : 1.0
  * @Author       : Shiming
  * @Date         : 2022-01-07 13:27:10
@@ -10,18 +10,24 @@
  */
 
 import { Component, OnInit } from '@angular/core';
+import { ACLService } from '@delon/acl';
 import { ModalHelper, _HttpClient } from '@delon/theme';
 
 @Component({
   selector: 'app-supply-management-index',
-  templateUrl: './index.component.html',
+  templateUrl: './index.component.html'
 })
 export class ContractManagementIndexComponent implements OnInit {
   selectedIndex = 0;
-  
-  constructor(private http: _HttpClient, private modal: ModalHelper) { }
-
-  ngOnInit(): void { }
+  isShowDetail = false;
+  isShowFrame = false;
 
+  constructor(private http: _HttpClient, private modal: ModalHelper, private acl: ACLService) {
+    const acls = acl.data.abilities || [];
+    this.isShowDetail =acl.data.full || !!acls.find(acl => acl === 'CONTRACT-INDEX-searchDetail');
+    this.isShowFrame =acl.data.full || !!acls.find(acl => acl === 'CONTRACT-INDEX-listFrame');
+    
+  }
 
+  ngOnInit(): void {}
 }

src/app/routes/contract-management/components/policy/policy.component.html

@@ -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]="false" (click)="st?.load(1)"  acl  [acl-ability]="['CONTRACT-POLICY-search']">查询</button>
+        <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 (click)="resetSF()">重置</button>
         <button nz-button nzType="link" (click)="expandToggle()">
           {{ !_$expand ? '展开' : '收起' }}

src/app/routes/contract-management/components/policy/policy.component.ts

@@ -26,6 +26,7 @@ export class ContractManagementPolicyComponent implements OnInit {
 
   selectedRows: any[] = [];
   paramValue = '';
+  isLoading: boolean = false;
   constructor(public service: ContractManagementService, private modal: NzModalService, private router: Router) {}
 
   /**
@@ -33,7 +34,7 @@ export class ContractManagementPolicyComponent implements OnInit {
    */
   get reqParams() {
     const params: any = {
-      ...(this.sf && this.sf.value)
+      ...(this.sf && this.sf?.value)
     };
     delete params.expand;
     return params;
@@ -185,6 +186,7 @@ export class ContractManagementPolicyComponent implements OnInit {
   resetSF() {
     this.sf.reset();
     this._$expand = false;
+    this.isLoading = true
   }
 
   /**

src/app/routes/contract-management/contract-management-routing.module.ts

@@ -1,5 +1,5 @@
 /*
- * @Description  : 
+ * @Description  :
  * @Version      : 1.0
  * @Author       : Shiming
  * @Date         : 2022-01-04 21:05:49
@@ -19,12 +19,16 @@ import { ContractManagementIndexComponent } from './components/index/index.compo
 import { ContractManagementPolicyComponent } from './components/policy/policy.component';
 import { ContractManagementTemplateComponent } from './components/template/template.component';
 const routes: Routes = [
-  { path: 'index', component: ContractManagementIndexComponent },
+  { path: 'index', component: ContractManagementIndexComponent, data: { guard: { ability: ['CONTRACT-INDEX-searchDetail'] } } },
   { path: 'index/detail/:id', component: ContractManagementDetailComponent },
-  { path: 'template', component: ContractManagementTemplateComponent },
-  { path: 'template/text/:id', component: ContractManagementTemplateTextComponent },
-  { path: 'policy', component: ContractManagementPolicyComponent },
-  { path: 'partner', component: ContractManagementPartnerComponent },
+  { path: 'template', component: ContractManagementTemplateComponent, data: { guard: { ability: ['CONTRACT-TEMPLATE-search'] } } },
+  {
+    path: 'template/text/:id',
+    component: ContractManagementTemplateTextComponent,
+    data: { guard: { ability: ['CONTRACT-TEMPLATE-detail'] } }
+  },
+  { path: 'policy', component: ContractManagementPolicyComponent, data: { guard: { ability: ['CONTRACT-POLICY-search'] } } },
+  { path: 'partner', component: ContractManagementPartnerComponent }
 ];
 
 @NgModule({

src/app/routes/contract-management/services/contract-management.service.ts

@@ -35,7 +35,18 @@ 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();
+      }
+    });
+  }
 }

src/app/routes/dashboard/dashboard.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.less']
+  template: ''
 })
 export class DashboardComponent {}

src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html

@@ -0,0 +1,68 @@
+<!--
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-21 13:49:21
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-28 20:09:34
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\busitable\\busiindex\\busiindex.component.html
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+-->
+<!-- 页头 -->
+<page-header-wrapper [title]="'业务报表'"></page-header-wrapper>
+<nz-card nzTitle="运多星平台业务情况" [nzExtra]="extraTemplate" acl  [acl-ability]="['busiindex-tabel']">
+  <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()" >
+          <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" acl  [acl-ability]="['busiindex-report']">
+  <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]="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>

src/app/routes/datatable/components/busitable/busiindex/busiindex.component.less

@@ -0,0 +1,21 @@
+.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;
+    }
+}

src/app/routes/datatable/components/busitable/busiindex/busiindex.component.spec.ts

@@ -0,0 +1,24 @@
+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();
+  });
+});

src/app/routes/datatable/components/busitable/busiindex/busiindex.component.ts

@@ -0,0 +1,148 @@
+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(){
+
+  }
+}

src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.html

@@ -0,0 +1 @@
+<g2-custom delay="200" (render)="render($event)"></g2-custom>

src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.ts

@@ -0,0 +1,72 @@
+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">
+            环比:&nbsp;&nbsp;{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();
+  }
+
+}

src/app/routes/datatable/components/busitable/mantable/mantable.component.html

@@ -0,0 +1,42 @@
+<!-- 页头 -->
+<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>

src/app/routes/datatable/components/busitable/mantable/mantable.component.less

@@ -0,0 +1,11 @@
+.chooseBox{
+    display: flex;
+}
+.timeBox{
+    display: flex;
+    margin: 0 0 0 10px;
+}
+.dateBox{
+    display: inline-block;
+    margin: 0 0 0 10px;
+}

src/app/routes/datatable/components/busitable/mantable/mantable.component.spec.ts

@@ -0,0 +1,24 @@
+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();
+  });
+});

src/app/routes/datatable/components/busitable/mantable/mantable.component.ts

@@ -0,0 +1,138 @@
+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(){
+
+  }
+
+}

src/app/routes/datatable/components/busitable/pillar/pillar.component.html

@@ -0,0 +1 @@
+<g2-custom delay="200" (render)="render($event)"></g2-custom>

src/app/routes/datatable/components/busitable/pillar/pillar.component.ts

@@ -0,0 +1,72 @@
+/*
+ * @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">
+            业绩量:&nbsp;&nbsp;{value}
+        </div>
+`
+    this.chart.tooltip({
+      showTitle: true,
+      showMarkers: false,
+      itemTpl: itemTpl
+  });
+    this.chart.interval().position('time*number');
+    this.chart.render();
+  }
+
+}

src/app/routes/datatable/components/compliance/customer/customer.component.html

@@ -0,0 +1,48 @@
+<!--
+ * @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>

src/app/routes/datatable/components/compliance/customer/customer.component.less

@@ -0,0 +1,20 @@
+.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%;
+    }
+}

src/app/routes/datatable/components/compliance/customer/customer.component.ts

@@ -0,0 +1,153 @@
+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;
+}

src/app/routes/datatable/components/compliance/index/curve/curve.component.html

@@ -0,0 +1,2 @@
+<g2-custom delay="100" (render)="render($event)"></g2-custom>
+

src/app/routes/datatable/components/compliance/index/curve/curve.component.ts

@@ -0,0 +1,101 @@
+/*
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-28 20:27:07
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-05-07 10:16:08
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\compliance\\index\\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 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).toFixed(0)+ ' %';
+        },
+      },
+    });
+    
+    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();
+    
+  }
+}

src/app/routes/datatable/components/compliance/index/index.component.html

@@ -0,0 +1,67 @@
+<!-- 页头 -->
+<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 || '0'" [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|| '0'" [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|| '0'" [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|| '0'" [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>

src/app/routes/datatable/components/compliance/index/index.component.less

@@ -0,0 +1,17 @@
+.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;
+}

src/app/routes/datatable/components/compliance/index/index.component.ts

@@ -0,0 +1,266 @@
+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;
+         console.log(this.cardData1);
+         
+         this.cardData1.proportion = (this.cardData1?.proportion*100).toFixed(2) +'%'
+        }
+    });
+    this.service.request(this.service.$api_getBillRateProportion, params).subscribe(res => {
+        if (res) {
+         this.cardData2 = res;
+         this.cardData2.proportion = (this.cardData2?.proportion*100).toFixed(2) +'%'
+        }
+    });
+    this.service.request(this.service.$api_getBillRateDirectPayment, params).subscribe(res => {
+        if (res) {
+         this.cardData3 = res;
+         this.cardData3.proportion = (this.cardData3?.proportion*100).toFixed(2) +'%'
+        }
+    });
+    this.service.request(this.service.$api_getBillTimelyPayment, params).subscribe(res => {
+        if (res) {
+         this.cardData4 = res;
+         this.cardData4.proportion = (this.cardData4?.proportion*100).toFixed(2) +'%'
+        }
+    });
+
+    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();
+  }
+}

src/app/routes/datatable/components/compliance/salesman/salesman.component.html

@@ -0,0 +1,46 @@
+<!--
+ * @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>

src/app/routes/datatable/components/compliance/salesman/salesman.component.less

@@ -0,0 +1,20 @@
+.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%;
+    }
+}

src/app/routes/datatable/components/compliance/salesman/salesman.component.ts

@@ -0,0 +1,220 @@
+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
+  }
+}

src/app/routes/datatable/components/customtable/customindex/curve/curve.component.html

@@ -0,0 +1 @@
+<g2-custom delay="100" (render)="render($event)"></g2-custom>

src/app/routes/datatable/components/customtable/customindex/curve/curve.component.ts

@@ -0,0 +1,92 @@
+/*
+ * @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();
+    
+  }
+
+}

src/app/routes/datatable/components/customtable/customindex/customindex.component.html

@@ -0,0 +1,81 @@
+<!--
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-06 13:20:56
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-29 17:55:02
+ * @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" acl [acl-ability]="['customindex-statisticsTotal']">
+  <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" acl [acl-ability]="['customindex-client']">
+  <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]="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" acl [acl-ability]="['customindex-totalAdd']">
+  <ng-template #extraTemplate01>
+    <div class="chooseBox">
+      <div class="timeBox">
+        <nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext2()">
+          <label nz-radio-button nzValue="year">年</label>
+          <label nz-radio-button nzValue="month">月</label>
+        </nz-radio-group>
+        <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>

src/app/routes/datatable/components/customtable/customindex/customindex.component.less

@@ -0,0 +1,11 @@
+.chooseBox{
+    display: flex;
+}
+.timeBox{
+    display: flex;
+    margin: 0 0 0 10px;
+}
+.dateBox{
+    display: inline-block;
+    margin: 0 0 0 10px;
+}

src/app/routes/datatable/components/customtable/customindex/customindex.component.spec.ts

@@ -0,0 +1,24 @@
+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();
+  });
+});

src/app/routes/datatable/components/customtable/customindex/customindex.component.ts

@@ -0,0 +1,236 @@
+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);
+  }
+}

src/app/routes/datatable/components/customtable/driver/driver.component.html

@@ -0,0 +1,46 @@
+<!-- 页头 -->
+<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>

src/app/routes/datatable/components/customtable/driver/driver.component.less

@@ -0,0 +1,11 @@
+.chooseBox{
+    display: flex;
+}
+.timeBox{
+    display: flex;
+    margin: 0 0 0 10px;
+}
+.dateBox{
+    display: inline-block;
+    margin: 0 0 0 10px;
+}

src/app/routes/datatable/components/customtable/driver/driver.component.spec.ts

@@ -0,0 +1,24 @@
+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();
+  });
+});

src/app/routes/datatable/components/customtable/driver/driver.component.ts

@@ -0,0 +1,178 @@
+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
+  }
+}

src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.html

@@ -0,0 +1,51 @@
+<!--
+ * @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>