Merge remote-tracking branch 'origin/develop'

Lxx

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

.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

@@ -35,8 +35,19 @@
             "styles": [
               "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
               "node_modules/quill/dist/quill.snow.css",
-              "src/styles.less"
+              "src/styles.less",
+              {
+                "input": "src/styles/default.less",
+                "bundleName": "default",
+                "inject": false
+              },
+              {
+                "input": "src/styles/compact.less",
+                "bundleName": "compact",
+                "inject": false
+              }
             ],
+
             "scripts": [
               "node_modules/quill/dist/quill.min.js",
               "node_modules/perfect-scrollbar/dist/perfect-scrollbar.js",
@@ -72,6 +83,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,

package-lock.json

@@ -2733,11 +2733,46 @@
       "integrity": "sha1-ayxRCnrXA56Y57jT1lmPQ1nlwIA=",
       "dev": true
     },
+    "@types/d3-geo": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.2.tgz",
+      "integrity": "sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/d3-path": {
       "version": "2.0.1",
       "resolved": "https://registry.nlark.com/@types/d3-path/download/@types/d3-path-2.0.1.tgz",
       "integrity": "sha1-ygPfqLlNit2XrQzZfpbiAGtHY8s="
     },
+    "@types/d3-sankey": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-sankey/-/d3-sankey-0.11.2.tgz",
+      "integrity": "sha512-U6SrTWUERSlOhnpSrgvMX64WblX1AxX6nEjI2t3mLK2USpQrnbwYYK+AS9SwiE7wgYmOsSSKoSdr8aoKBH0HgQ==",
+      "dev": true,
+      "requires": {
+        "@types/d3-shape": "^1"
+      },
+      "dependencies": {
+        "@types/d3-path": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.9.tgz",
+          "integrity": "sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==",
+          "dev": true
+        },
+        "@types/d3-shape": {
+          "version": "1.3.8",
+          "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.8.tgz",
+          "integrity": "sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==",
+          "dev": true,
+          "requires": {
+            "@types/d3-path": "^1"
+          }
+        }
+      }
+    },
     "@types/d3-shape": {
       "version": "2.1.3",
       "resolved": "https://registry.npmmirror.com/@types/d3-shape/download/@types/d3-shape-2.1.3.tgz",
@@ -2783,6 +2818,12 @@
       "integrity": "sha512-sPZYQEIF/SOnLAvaz9lTuydniP+afBMtElRTdYkeV1QtEgvtJ7qolCPjly6O32QI8CbEmP5O/fztMXEDWfEcrg==",
       "dev": true
     },
+    "@types/geojson": {
+      "version": "7946.0.8",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
+      "dev": true
+    },
     "@types/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/@types/glob/download/@types/glob-7.2.0.tgz?cache=0&sync_timestamp=1637267477186&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fglob%2Fdownload%2F%40types%2Fglob-7.2.0.tgz",
@@ -5172,6 +5213,14 @@
         }
       }
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "css-loader": {
       "version": "6.2.0",
       "resolved": "https://registry.npmmirror.com/css-loader/download/css-loader-6.2.0.tgz?cache=0&sync_timestamp=1635967924209&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcss-loader%2Fdownload%2Fcss-loader-6.2.0.tgz",
@@ -8113,6 +8162,15 @@
       "integrity": "sha1-e15vfmZen7QfMAB+2eDUHpf7IUA=",
       "dev": true
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "htmlparser2": {
       "version": "3.10.1",
       "resolved": "https://registry.npmmirror.com/htmlparser2/download/htmlparser2-3.10.1.tgz?cache=0&sync_timestamp=1636640940074&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fhtmlparser2%2Fdownload%2Fhtmlparser2-3.10.1.tgz",
@@ -22662,6 +22720,14 @@
         }
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npm.taobao.org/text-table/download/text-table-0.2.0.tgz",
@@ -23211,6 +23277,21 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      },
+      "dependencies": {
+        "base64-arraybuffer": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+          "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+        }
+      }
+    },
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmmirror.com/uuid/download/uuid-3.4.0.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tms-obc-web",
-  "version": "0.0.0",
-  "description": "运营后台－WEB",
+  "version": "1.0.0",
+  "description": "运营后台-WEB",
   "author": "cipchk <cipchk@qq.com>",
   "repository": {
     "type": "git",
@@ -12,9 +12,11 @@
     "ng-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng",
     "ng": "ng",
     "start": "ng s -o --port 4202  --host 0.0.0.0",
+    "startIp": "ng serve -o --port 4202 --host 172.29.9.71 --open",
     "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",
@@ -56,6 +58,7 @@
     "@swimlane/ngx-charts": "^18.0.1",
     "ajv": "^8.6.2",
     "file-saver": "^2.0.5",
+    "html2canvas": "^1.4.1",
     "js-base64": "^3.6.1",
     "masonry-layout": "^4.2.2",
     "ng-gallery": "^5.0.0",
@@ -73,22 +76,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",
@@ -97,29 +100,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-02-17 15:57:11
+ * @LastEditTime : 2022-04-20 14:18:40
  * @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-dev.eascs.com',
+      host: 'tms-api-test.eascs.com',
       protocol: 'https:',
       port: 443
     },

src/app/app.component.ts

@@ -5,6 +5,7 @@ import { environment } from '@env/environment';
 import { NzIconService } from 'ng-zorro-antd/icon';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { VERSION as VERSION_ZORRO } from 'ng-zorro-antd/version';
+import { ThemeService } from './theme.service';
 
 @Component({
   selector: 'app-root',
@@ -17,7 +18,8 @@ export class AppComponent implements OnInit {
     private router: Router,
     private titleSrv: TitleService,
     private modalSrv: NzModalService,
-    private iconService: NzIconService
+    private iconService: NzIconService,
+    private themeService: ThemeService
   ) {
     renderer.setAttribute(el.nativeElement, 'ng-alain-version', VERSION_ALAIN.full);
     renderer.setAttribute(el.nativeElement, 'ng-zorro-version', VERSION_ZORRO.full);
@@ -47,5 +49,15 @@ export class AppComponent implements OnInit {
         this.modalSrv.closeAll();
       }
     });
+    // 适配放大150%的屏幕
+    const screen: any = window.screen
+    var zoom = window.devicePixelRatio || screen.deviceXDPI / screen?.logicalXDPI;
+    // console.log(zoom)
+    if (document.body.clientWidth >= 1280) {
+      if (zoom != 1 && zoom != 2 && zoom != 3) {
+        this.themeService.toggleTheme().then();
+      }
+    }
+    
   }
 }

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,9 +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: 退出登录时需要清理用户信息
@@ -95,7 +111,9 @@ export class StartupService {
     // ACL：设置权限为全量
     this.aclService.setFull(false);
     // 初始化菜单
-    this.menuService.add(menuData);
+    if (menuData) {
+      this.menuService.add(menuData);
+    }
     // 设置页面标题的后缀
     this.titleService.default = '';
     this.titleService.suffix = appData.name;
@@ -134,12 +152,12 @@ export class StartupService {
     const userData = this.httpClient.post(this.userSrv.$api_get_user_by_token, {}).pipe(map((res: any) => res.data));
 
     // 菜单数据
-    // const menuData = this.httpClient
-    //   .post(this.coreSrv.$api_get_current_user_menus, {
-    //     appId: this.coreSrv.envSrv.getEnvironment().appId
-    //   })
-    //   .pipe(map((res: any) => res.data));
-    const menuData = this.httpClient.get('assets/mocks/menu-data.json').pipe(map((res: any) => res.data.menu));
+    const menuData = this.httpClient
+      .post(this.coreSrv.$api_get_current_user_menus, {
+        appId: this.coreSrv.envSrv.getEnvironment().appId
+      })
+      .pipe(map((res: any) => res.data));
+    // const menuData = this.httpClient.get('assets/mocks/menu-data.json').pipe(map((res: any) => res.data.menu));
 
     return zip(appData, userData, menuData);
   }

src/app/global-config.module.ts

@@ -14,10 +14,10 @@ const alainConfig: AlainConfig = {
   st: {
     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] },
+    page: { show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000], toTop: false },
     modal: { size: 'lg' }
   },
-  sf: { button: { search: '查询' }, ui: { placeholder: '请输入' } },
+  sf: { button: { search: '查询' } },
   pageHeader: { homeI18n: 'home', recursiveBreadcrumb: true },
   auth: { login_url: '/passport/login' },
   acl: { guard_url: '/exception/403' },
@@ -27,7 +27,7 @@ const alainConfig: AlainConfig = {
       'https://gw.alipayobjects.com/os/lib/antv/g2/4.1.4/dist/g2.min.js',
       'https://gw.alipayobjects.com/os/lib/antv/data-set/0.11.7/dist/data-set.js'
     ]
-  }
+  },
 };
 
 const alainModules = [AlainThemeModule.forRoot(), DelonACLModule.forRoot()];

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

@@ -51,7 +51,6 @@ export class LayoutProMenuComponent implements OnInit, OnDestroy {
       }
     });
     this.menus = res;
-
     this.openStatus();
   }
 

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/routes/commom/components/basic-table/basic-table.component.ts

@@ -0,0 +1,40 @@
+import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+@Component({
+  template: ''
+})
+export class BasicTableComponent implements AfterViewInit {
+  scrollY = '400px';
+
+  constructor() {}
+
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.getScrollY();
+    }, 100);
+    fromEvent(window, 'resize')
+      .pipe(debounceTime(100))
+      .subscribe(event => {
+        this.getScrollY();
+      });
+  }
+
+  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];
+      if (tabset) {
+        scrollY -= tabset.clientHeight;
+      }
+      this.scrollY = scrollY + 'px';
+    }
+  }
+}

src/app/routes/commom/less/box.less

@@ -31,4 +31,12 @@
             font-size  : 16px;
         }
     }
+}
+
+.total-footer {
+    position   : absolute;
+    bottom     : 25px;
+    height     : 32px;
+    margin     : 16px 0;
+    line-height: 32px;
 }

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

@@ -0,0 +1,70 @@
+:host {
+  ::ng-deep {
+    nz-card {
+      margin: -24px -24px 0;
+
+      .ant-tabs-nav {
+        margin: 0;
+      }
+    }
+
+    .ant-tabs-tab {
+      margin: 0 0 0 16px;
+      padding: 12px 0;
+    }
+
+    .ant-table-body {
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    .table-box {
+      .ant-card-body {
+        padding: 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 {
+      padding: 8px;
+    }
+
+    .ant-table.ant-table-bordered > .ant-table-container {
+      border-top: 0;
+    }
+
+    .ant-pagination-item {
+      min-width: 24px;
+      height: 24px;
+      line-height: 21px;
+    }
+
+    .ant-pagination-total-text {
+      height: 24px;
+      line-height: 24px;
+    }
+
+    .ant-pagination-prev,
+    .ant-pagination-next,
+    .ant-pagination-jump-prev,
+    .ant-pagination-jump-next {
+      min-width: 24px;
+      height: 24px;
+      line-height: 21px;
+    }
+
+    .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+      height: 24px;
+    }
+
+    .ant-select-single .ant-select-selector .ant-select-selection-item,
+    .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+      line-height: 21px;
+    }
+  }
+}

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-frame/contract-frame.component.html

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-01-07 13:29:57
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-02-23 16:04:18
+ * @LastEditTime : 2022-02-24 10:08:53
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-frame\\contract-frame.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
@@ -18,7 +18,7 @@
         [ui]="ui"
         [mode]="'search'"
         [disabled]="!sf?.valid"
-        [loading]="service.http.loading"
+        [loading]="false"
         (formSubmit)="st?.load(1)"
         (formReset)="resetSF()"
       ></sf>
@@ -29,8 +29,9 @@
       <div nz-col [nzSpan]="_$expand ? 24 : 18">
         <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'">
           <ng-template sf-template="signTime" let-me let-ui="ui" let-schema="schema">
-            <!-- <input placeholder="请输入1-30" type="number" [ngModel]="sf.value.description3" style="width: 200px;" nz-input />
-              <span> 天内支付运费</span> -->
+            <ng-template sf-template="effectiveEndTime" let-me let-ui="ui" let-schema="schema">
+              <nz-range-picker [nzShowTime]="true" [(ngModel)]="sf.value.effectiveEndTime"></nz-range-picker>
+            </ng-template>
             <nz-range-picker [nzShowTime]="true" [(ngModel)]="sf.value.signTime"></nz-range-picker>
           </ng-template>
         </sf>
@@ -40,7 +41,7 @@
           nz-button
           nzType="primary"
           [disabled]="!sf.valid"
-          [nzLoading]="service.http.loading"
+          [nzLoading]="isLoading && st.loading"
           (click)="st?.load(1)"
           acl
           [acl-ability]="['CONTRACT-INDEX-listFrame']"

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

@@ -1,14 +1,17 @@
+import { DatePipe } from '@angular/common';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { STComponent, STColumn, STChange } from '@delon/abc/st';
-import { SFComponent, SFSchema, SFDateWidgetSchema, SFUISchema } from '@delon/form';
+import { SFComponent, SFSchema, SFDateWidgetSchema, SFUISchema, SFSelectWidgetSchema } from '@delon/form';
+import { ShipperBaseService } from '@shared';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { ContractManagementService } from '../../services/contract-management.service';
 
 @Component({
   selector: 'app-contract-management-contract-frame',
   templateUrl: './contract-frame.component.html',
-  styleUrls: ['./contract-frame.component.less']
+  styleUrls: ['./contract-frame.component.less'],
+  providers: [DatePipe]
 })
 export class ContractManagementFrameComponent implements OnInit {
   url = `/rule?_allow_anonymous=true`;
@@ -22,34 +25,82 @@ export class ContractManagementFrameComponent implements OnInit {
   columns: STColumn[] = [];
   ui: SFUISchema = {};
   _$expand = false;
-
-  reqParams = {};
   selectedRows: any[] = [];
-  constructor(public service: ContractManagementService, private nzModalService: NzModalService, private router: Router) {}
+  isLoading: boolean = false;
+  constructor(
+    public service: ContractManagementService,
+    private nzModalService: NzModalService,
+    private router: Router,
+    public shipperservice: ShipperBaseService,
+    private datePipe: DatePipe
+  ) {}
 
   ngOnInit(): void {
-    this.initST()
-    this.initSF()
+    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
+    };
   }
   /**
    * 初始化数据列表
    */
-   initST() {
+  initST() {
     this.columns = [
       {
         title: '合同编号',
-        width: '100px',
+        width: '130px',
         className: 'text-center',
         render: 'contractCode'
       },
+      {
+        title: '签约对象',
+        width: '100px',
+        className: 'text-center',
+        index: 'signingObjectLabel'
+      },
+      {
+        title: '合同类型',
+        width: '100px',
+        className: 'text-center',
+        index: 'contractTypeLabel'
+      },
       {
         title: '合同名称',
         width: '100px',
         className: 'text-center',
-        index:'contractName'
+        index: 'contractName'
       },
-      { title: '托运人', index: 'shipperName', width: '120px', className: 'text-center' },
-      { title: '承运人', index: 'carrierName', width: '120px', className: 'text-center' },
+      { title: '网络货运人', index: 'enterpriseInfoName', width: '120px', className: 'text-center' },
+      { title: '合同对象', index: 'contractObjectName', width: '120px', className: 'text-center' },
       {
         title: '有效期至',
         className: 'text-center',
@@ -75,47 +126,121 @@ export class ContractManagementFrameComponent 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: '合同编号',
-          },
-          shipperName: {
-            type: 'string',
-            title: '托运人'
-          },
-          carrierName: {
-            type: 'string',
-            title: '承运人',
-          },
-          signTime: {
-            title: '签署日期',
-            type: 'string',
-            ui: {
-              widget: 'custom',
-              visibleIf: {
-                _$expand: (value: boolean) => value,
-              },
-            }
-          },
+  /**
+   * 初始化查询表单
+   */
+  initSF() {
+    this.schema = {
+      properties: {
+        _$expand: { type: 'boolean', ui: { hidden: true } },
+        contractCode: {
+          type: 'string',
+          title: '合同编号'
         },
-        type: 'object',
-      };
-      this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
-    }
-      /**
+        signingObject: {
+          type: 'string',
+          title: '签约对象',
+          enum: [
+            { label: '全部', value: '' },
+            { label: '货主', value: 1 },
+            { label: '司机', value: 2 }
+          ],
+          ui: {
+            widget: 'select',
+            placeholder: '请选择'
+          }
+        },
+        contractType: {
+          title: '合同类型',
+          type: 'string',
+          default: '',
+          ui: {
+            widget: 'dict-select',
+            containsAllLable: true,
+            params: { dictKey: 'contract:type' },
+            containAllLable: true
+          } 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',
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            }
+          }
+        },
+        effectiveEndTime: {
+          title: '有效期',
+          type: 'string',
+          ui: {
+            widget: 'custom',
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            }
+          }
+        },
+        esignFlowStatus: {
+          title: '状态',
+          type: 'string',
+          default: '',
+          ui: {
+            widget: 'dict-select',
+            containsAllLable: true,
+            params: { dictKey: 'esign:flow:status' },
+            containAllLable: true,
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            }
+          } as SFSelectWidgetSchema
+        }
+      },
+      type: 'object'
+    };
+    this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
+  }
+  /**
    * 查询字段个数
    */
   get queryFieldCount(): number {
@@ -188,12 +313,13 @@ export class ContractManagementFrameComponent implements OnInit {
   resetSF() {
     this.sf.reset();
     this._$expand = false;
+    this.isLoading = true;
   }
 
   /**
    * 伸缩查询条件
    */
-   expandToggle(): void {
+  expandToggle(): void {
     this._$expand = !this._$expand;
     this.sf?.setValue('/_$expand', this._$expand);
   }

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-01-18 17:16:12
+ * @LastEditTime : 2022-02-23 20:11:50
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-list\\contract-list.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
@@ -13,7 +13,7 @@
   <div nz-row nzGutter="8">
     <!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
     <div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
-      <sf #sf [schema]="schema" [ui]="ui" [mode]="'search'" [disabled]="!sf?.valid" [loading]="service.http.loading"
+      <sf #sf [schema]="schema" [ui]="ui" [mode]="'search'" [disabled]="!sf?.valid" [loading]="false"
         (formSubmit)="st?.load(1)" (formReset)="resetSF()"></sf>
     </div>
 
@@ -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]="service.http.loading"
-          (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,10 +48,15 @@
     </nz-alert>
   </div>
 
-  <st #st [data]="service.$api_listDetailed_page" [columns]="columns" [req]="{  params: reqParams }"
-    [loading]="service.http.loading" [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 (click)="service.openURL(item?.contractFilePath)">{{ item?.contractCode }}</a>
+      <!-- <a [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a> -->
+    </ng-template>
+    <ng-template st-row="signingObject" let-item let-index="index">
+      <span *ngIf="item.signingObject == 0"></span>
+      <span></span>
     </ng-template>
   </st>
 </nz-card>

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

@@ -5,6 +5,7 @@ import { SFComponent, SFSchema, SFDateWidgetSchema, SFUISchema, SFSelectWidgetSc
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { ContractManagementService } from '../../services/contract-management.service';
 import { DatePipe } from '@angular/common';
+import { ShipperBaseService } from '@shared';
 
 @Component({
   selector: 'app-contract-management-contract-list',
@@ -24,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
@@ -47,13 +52,14 @@ export class ContractManagementContractListComponent implements OnInit {
   constructor(
     public service: ContractManagementService,
     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();
   }
   /**
    * 初始化数据列表
@@ -62,24 +68,22 @@ export class ContractManagementContractListComponent implements OnInit {
     this.columns = [
       {
         title: '合同编号',
-        width: '100px',
+        width: '130px',
         className: 'text-center',
         render: 'contractCode'
       },
       {
-        title: '单据类型',
+        title: '签约对象',
         width: '100px',
         className: 'text-center',
-        index: 'documentType'
+        index: 'signingObjectLabel'
       },
       {
-        title: '合同名称',
+        title: '合同类型',
         width: '100px',
         className: 'text-center',
         index: 'contractName'
       },
-      { title: '托运人', index: 'shipperName', width: '120px', className: 'text-center' },
-      { title: '承运人', index: 'carrierName', width: '120px', className: 'text-center' },
       {
         title: '业务单号',
         className: 'text-center',
@@ -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

@@ -0,0 +1,101 @@
+<!--
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-01-07 13:29:57
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-02-24 10:08:28
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-partner\\contract-partner.component.html
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+-->
+<nz-card>
+  <div nz-row nzGutter="8">
+    <!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
+    <div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
+      <sf
+        #sf
+        [schema]="schema"
+        [ui]="ui"
+        [mode]="'search'"
+        [disabled]="!sf?.valid"
+        [loading]="false"
+        (formSubmit)="st?.load(1)"
+        (formReset)="resetSF()"
+      ></sf>
+    </div>
+
+    <!-- 查询字段大于3个时，根据展开状态调整布局 -->
+    <ng-container>
+      <div nz-col [nzSpan]="_$expand ? 24 : 18">
+        <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'">
+          <ng-template sf-template="signTime" let-me let-ui="ui" let-schema="schema">
+            <nz-range-picker [nzShowTime]="true" [(ngModel)]="sf.value.signTime"></nz-range-picker>
+          </ng-template>
+          <ng-template sf-template="effectiveEndTime" let-me let-ui="ui" let-schema="schema">
+            <nz-range-picker [nzShowTime]="true" [(ngModel)]="sf.value.effectiveEndTime"></nz-range-picker>
+          </ng-template>
+        </sf>
+      </div>
+      <div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
+        <button
+          nz-button
+          nzType="primary"
+          [disabled]="!sf.valid"
+          [nzLoading]="service.http.loading"
+          (click)="st?.load(1)"
+          acl
+          [acl-ability]="['CONTRACT-INDEX-listFrame']"
+          >查询</button
+        >
+        <button nz-button (click)="resetSF()">重置</button>
+        <button nz-button nzType="link" (click)="expandToggle()">
+          {{ !_$expand ? '展开' : '收起' }}
+          <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
+        </button>
+      </div>
+    </ng-container>
+  </div>
+</nz-card>
+
+<nz-card class="content-box" nzBordered>
+  <div style="position: relative">
+    <nz-alert
+      nzType="info"
+      [nzMessage]="'当前共' + st?.total + '行记录，已选择' + selectedRows.length + '项'"
+      nzShowIcon
+      [ngStyle]="{ margin: '0 0 1rem 0' }"
+    >
+    </nz-alert>
+  </div>
+
+  <st
+    #st
+    [data]="service.$api_listPartner_page"
+    [columns]="columns"
+    [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"
+    [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>
+    </ng-template>
+  </st>
+</nz-card>
+
+<ng-template #auditModal>
+  <div nz-row nzGutter="8">
+    <div nz-col nzSpan="24" se-container [labelWidth]="80">
+      <se [col]="1" label="备注">
+        <textarea
+          nz-input
+          rows="3"
+          placeholder="同意可以不用填写原因 ，拒绝必须说明原因"
+          style="width: 325px; margin-left: 14px"
+        ></textarea>
+      </se>
+    </div>
+  </div>
+</ng-template>

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

@@ -16,22 +16,20 @@
     }
 
     .ant-tabs-tab-btn {
-        padding-left : 16px;
         padding-right: 16px;
+        padding-left : 16px;
     }
 }
 
 .expend-options {
-    margin-top: 0px;
+    margin-top: 0;
 }
 
 
 @media (min-width: 1200px) {
     .expend-options {
-        max-width: 400px;
-        position : absolute;
-        right    : 0;
-        bottom   : 25px;
+        z-index   : -99;
+        margin-top: -40px;
     }
 
 }

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

@@ -0,0 +1,318 @@
+import { DatePipe } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { STComponent, STColumn, STChange } from '@delon/abc/st';
+import { SFComponent, SFSchema, SFDateWidgetSchema, SFUISchema, SFSelectWidgetSchema } from '@delon/form';
+import { ShipperBaseService } from '@shared';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { ContractManagementService } from '../../services/contract-management.service';
+
+@Component({
+  selector: 'app-contract-management-contract-partner',
+  templateUrl: './contract-partner.component.html',
+  styleUrls: ['./contract-partner.component.less'],
+  providers: [DatePipe]
+})
+export class ContractManagementPartnerComponent implements OnInit {
+  url = `/rule?_allow_anonymous=true`;
+  @ViewChild('st', { static: true })
+  st!: STComponent;
+  @ViewChild('sf', { static: false })
+  sf!: SFComponent;
+  @ViewChild('auditModal', { static: false })
+  auditModal!: any;
+  schema: SFSchema = {};
+  columns: STColumn[] = [];
+  ui: SFUISchema = {};
+  _$expand = false;
+  selectedRows: any[] = [];
+  constructor(
+    public service: ContractManagementService,
+    private nzModalService: NzModalService,
+    private router: Router,
+    public shipperservice: ShipperBaseService,
+    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
+      };
+    }
+  /**
+   * 初始化数据列表
+   */
+  initST() {
+    this.columns = [
+      {
+        title: '合同编号',
+        width: '130px',
+        className: 'text-center',
+        render: 'contractCode'
+      },
+      {
+        title: '签约对象',
+        width: '100px',
+        className: 'text-center',
+        index: 'signingObjectLabel'
+      },
+      {
+        title: '合同类型',
+        width: '100px',
+        className: 'text-center',
+        index: 'contractType'
+      },
+      { title: '合同名称', index: 'contractName', width: '120px', className: 'text-center' },
+      { title: '网络货运人', index: 'enterpriseInfoName', width: '120px', className: 'text-center' },
+      {
+        title: '合同对象',
+        className: 'text-center',
+        width: '120px',
+        index: 'contractObjectName'
+      },
+      {
+        title: '有效期至',
+        className: 'text-center',
+        width: '120px',
+        index: 'effectiveEndTime'
+      },
+      {
+        title: '签署日期',
+        className: 'text-center',
+        width: '120px',
+        index: 'signTime'
+      },
+      {
+        title: '状态',
+        className: 'text-center',
+        width: '120px',
+        type: 'badge',
+        index: 'esignFlowStatus',
+        badge: {
+          '0': { text: '未发起', color: 'default' },
+          '1': { text: '待签章', color: 'default' },
+          '2': { text: '已生效', color: 'success' },
+          '3': { text: '已撤销', color: 'warning' },
+          '4': { text: '已作废', color: 'warning' },
+          '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))
+          }
+        ]
+      }
+    ];
+  }
+  /**
+   * 初始化查询表单
+   */
+  initSF() {
+    this.schema = {
+      properties: {
+        _$expand: { type: 'boolean', ui: { hidden: true } },
+        contractCode: {
+          type: 'string',
+          title: '合同编号'
+        },
+        signingObject: {
+          type: 'string',
+          title: '签约对象',
+          enum: [
+            { label: '全部', value: '' },
+            { label: '货主', value: 1 },
+            { label: '司机', value: 2 }
+          ],
+          ui: {
+            widget: 'select',
+            placeholder: '请选择'
+          }
+        },
+        contractType: {
+          title: '合同类型',
+          type: 'string',
+          default: '',
+          ui: {
+            widget: 'dict-select',
+            containsAllLable: true,
+            params: { dictKey: 'contract:type' },
+            containAllLable: true,
+          } 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',
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            }
+          }
+        },
+        effectiveEndTime: {
+          title: '有效期',
+          type: 'string',
+          ui: {
+            widget: 'custom',
+            visibleIf: {
+              _$expand: (value: boolean) => value,
+            },
+          }
+        },
+        esignFlowStatus: {
+          title: '状态',
+          type: 'string',
+          default: '',
+          ui: {
+            widget: 'dict-select',
+            containsAllLable: true,
+            params: { dictKey: 'esign:flow:status' },
+            containAllLable: true,
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            }
+          } as SFSelectWidgetSchema
+        }
+      },
+      type: 'object'
+    };
+    this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
+  }
+  /**
+   * 查询字段个数
+   */
+  get queryFieldCount(): number {
+    return Object.keys(this.schema?.properties || {}).length;
+  }
+  stChange(e: STChange): void {
+    switch (e.type) {
+      case 'checkbox':
+        this.selectedRows = e.checkbox!;
+        break;
+      case 'filter':
+        this.st.load();
+        break;
+    }
+  }
+
+  approval(): void {}
+
+  add(): void {}
+
+  routeTo(item: any) {
+    this.router.navigate(['/ticket/invoice-requested-detail/1']);
+  }
+
+  auditAction(item: any) {
+    const modal = this.nzModalService.create({
+      nzTitle: '审核',
+      nzContent: this.auditModal,
+      nzFooter: [
+        {
+          label: '拒绝',
+          type: 'default',
+          onClick: () => {
+            modal.destroy();
+          }
+        },
+        {
+          label: '通过',
+          type: 'primary',
+          onClick: () => {
+            modal.destroy();
+          }
+        }
+      ]
+    });
+    modal.afterClose.subscribe(res => {
+      this.st.load();
+    });
+  }
+
+  showReason(item: any) {
+    const modal = this.nzModalService.create({
+      nzTitle: '查看原因',
+      nzContent: '运单数据异常，暂时无法开票，请联系客服400-xxxx-xxxx',
+      nzFooter: [
+        {
+          label: '关闭',
+          type: 'primary',
+          onClick: () => {
+            modal.destroy();
+          }
+        }
+      ]
+    });
+  }
+
+  /**
+   * 重置表单
+   */
+  resetSF() {
+    this.sf.reset();
+    this._$expand = false;
+  }
+
+  /**
+   * 伸缩查询条件
+   */
+  expandToggle(): void {
+    this._$expand = !this._$expand;
+    this.sf?.setValue('/_$expand', this._$expand);
+  }
+}

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

@@ -1,10 +1,11 @@
+import { OnChanges } from '@angular/core';
 /*
- * @Description  : 
+ * @Description  :
  * @Version      : 1.0
  * @Author       : Shiming
  * @Date         : 2022-01-05 11:01:55
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-01-25 14:25:49
+ * @LastEditTime : 2022-03-30 10:45:19
  * @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.
  */
@@ -12,22 +13,24 @@ import { DatePipe } from '@angular/common';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SFComponent, SFSchema, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
+import { ShipperBaseService } from '@shared';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { ContractManagementService } from '../../services/contract-management.service';
 
 @Component({
-  selector: 'app-contract-management-template-detail-complaint',
+  selector: 'app-contract-management-template-text-complaint',
   templateUrl: './contract-template-detail.component.html',
   styleUrls: ['./contract-template-detail.component.less'],
   providers: [DatePipe]
 })
-export class ContractManagementTemplateDetailComponent implements OnInit {
+export class ContractManagementTemplateTextComponent implements OnInit {
   constructor(
     private nzModalService: NzModalService,
     public service: ContractManagementService,
     public route: ActivatedRoute,
     private datePipe: DatePipe,
-    private router: Router
+    private router: Router,
+    public shipperservice: ShipperBaseService
   ) {}
   textStatus = '新建模板';
   @ViewChild('sf', { static: false }) sf!: SFComponent;
@@ -38,6 +41,7 @@ export class ContractManagementTemplateDetailComponent implements OnInit {
   sfdata: any;
   sfdata2: any;
   title: any;
+  Types: any;
   templateHTML: any;
   detailList: any = {
     templateName: ''
@@ -74,28 +78,104 @@ export class ContractManagementTemplateDetailComponent implements OnInit {
         templateType: {
           title: '模板类型',
           type: 'string',
-          default: '',
+          enum: [
+            { label: '框架合同', value: 'KJ' },
+            { label: '明细合同', value: 'MX' },
+            { label: '合伙人合同', value: 'HHR' }
+          ],
           ui: {
-            widget: 'dict-select',
-            params: { dictKey: 'contract:template:type' },
-            containAllLable: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
+            widget: 'select',
+            placeholder: '请选择',
+            change: (tag: any, org: any) => {
+              console.log(tag);
+              switch (tag) {
+                case 'MX':
+                  this.Types = [
+                    { label: '订单合同', value: '1' },
+                    { label: '订单补充协议', value: '2' },
+                    { label: '运单合同', value: '3' },
+                    { label: '运单补充协议', value: '4' },
+                    { label: '委托代收合同', value: '5' },
+                    { label: '电子提货单', value: '10' },
+                    { label: '电子卸货单', value: '11' },
+                  ];
+                  this.sf.getProperty('/contractType')!.schema.enum = this.Types;
+                  this.sf.getProperty('/contractType')!.widget.reset(this.Types);
+                  this.sf.setValue('/contractType', this.Types);
+                  return;
+                  break;
+                case 'KJ':
+                  this.Types = [
+                    { label: '网络货物运输服务合同', value: '6' },
+                    { label: '运输服务承揽合同', value: '7' }
+                  ];
+                  this.sf.getProperty('/contractType')!.schema.enum = this.Types;
+                  this.sf.getProperty('/contractType')!.widget.reset(this.Types);
+                  this.sf.setValue('/contractType', this.Types);
+                  return;
+                  break;
+                case 'HHR':
+                  this.Types = [
+                    { label: '企业合伙人入驻合同', value: '8' },
+                    { label: '个人合伙人入驻合同', value: '9' }
+                  ];
+                  this.sf.getProperty('/contractType')!.schema.enum = this.Types;
+                  this.sf.getProperty('/contractType')!.widget.reset(this.Types);
+                  this.sf.setValue('/contractType', this.Types);
+                  return;
+                  break;
+                default:
+                  break;
+              }
             }
-          } as SFSelectWidgetSchema
+          }
+        },
+        signingObject: {
+          type: 'string',
+          title: '承包商对象',
+          enum: [
+            { label: '货主', value: '1' },
+            { label: '司机', value: '2' }
+          ],
+          ui: {
+            widget: 'select',
+            placeholder: '请选择'
+          }
         },
         contractType: {
-          title: '单据类型',
+          title: '合同类型',
+          type: 'string',
+          enum: this.Types,
+          ui: {
+            widget: 'select',
+            placeholder: '请选择'
+          }
+        },
+        resourceType: {
+          title: '货源类型',
           type: 'string',
           default: '',
           ui: {
             widget: 'dict-select',
-            params: { dictKey: 'contract:document:type' },
-            containAllLable: true,
+            params: { dictKey: 'goodresource:type' },
+            containsAllLable: true,
             visibleIf: {
               templateType: value => value === 'MX'
             }
           } as SFSelectWidgetSchema
+        },
+        enterpriseInfoId: {
+          type: 'string',
+          title: '网络货运人',
+          ui: {
+            widget: 'select',
+            placeholder: '请选择',
+            allowClear: true,
+            visibleIf: {
+              templateType: value => value === 'KJ' || value === 'HHR'
+            },
+            asyncData: () => this.shipperservice.getNetworkFreightForwarder()
+          }
         }
       },
       required: ['templateName', 'templateType']
@@ -126,10 +206,12 @@ export class ContractManagementTemplateDetailComponent 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.title = this.detailList?.templateName;
         this.sfdata = res;
         this.sfdata2 = res;
       }
@@ -140,21 +222,22 @@ export class ContractManagementTemplateDetailComponent 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.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.sf2.value,
-      templateTitle: this.title
+      templateTitle: this.title || this.detailList.templateName
     };
+    console.log(params);
     this.service.request(this.service.$api_save_contractTemplate, params).subscribe((res: any) => {
       if (res) {
         this.service.msgSrv.success('保存成功！');

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

@@ -0,0 +1,87 @@
+<!--
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-01-12 10:52:50
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-02-24 20:01:42
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-template-frame\\contract-template-frame.component.html
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+-->
+
+<!-- 搜索表单 -->
+<nz-card>
+  <div nz-row nzGutter="8">
+    <!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
+    <div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
+      <sf
+        #sf
+        [schema]="schema"
+        [ui]="ui"
+        [mode]="'search'"
+        [disabled]="!sf?.valid"
+        [loading]="false"
+        (formSubmit)="st?.load(1)"
+        (formReset)="resetSF()"
+      ></sf>
+    </div>
+
+    <!-- 查询字段大于3个时，根据展开状态调整布局 -->
+    <ng-container>
+      <div nz-col [nzSpan]="_$expand ? 24 : 18">
+        <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'">
+          <ng-template sf-template="signTime" let-me let-ui="ui" let-schema="schema">
+            <nz-range-picker [nzShowTime]="true" [(ngModel)]="sf.value.signTime"></nz-range-picker>
+          </ng-template>
+          <ng-template sf-template="effectiveEndTime" let-me let-ui="ui" let-schema="schema">
+            <nz-range-picker [nzShowTime]="true" [(ngModel)]="sf.value.effectiveEndTime"></nz-range-picker>
+          </ng-template>
+        </sf>
+      </div>
+      <div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
+        <button
+          nz-button
+          nzType="primary"
+          [disabled]="!sf.valid"
+          [nzLoading]="service.http.loading"
+          (click)="st?.load(1)"
+          acl
+          [acl-ability]="['CONTRACT-INDEX-listFrame']"
+          >查询</button
+        >
+        <button nz-button (click)="resetSF()">重置</button>
+        <button nz-button nzType="link" (click)="expandToggle()">
+          {{ !_$expand ? '展开' : '收起' }}
+          <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
+        </button>
+      </div>
+    </ng-container>
+  </div>
+</nz-card>
+
+<nz-card>
+  <div class="NewBtn">
+    <button nz-button nzType="primary" (click)="creatTemplate()" acl [acl-ability]="['CONTRACT-TEMPLATE-new']"> 新建 </button>
+  </div>
+  <div style="margin-top: 15px">
+    <st
+      #st
+      [bordered]="true"
+      [data]="service.$api_get_contractTemplate_page"
+      [columns]="columns"
+      [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"
+    >
+      <ng-template st-row="templateName" let-item let-index="index">
+        <a (click)="service.openURL(item?.contractFilePath)">{{ item.templateName }}</a>
+        <!-- <a (click)="view(item)">{{ item.templateName }}</a> -->
+      </ng-template>
+      <ng-template st-row="signingObject" let-item let-index="index">
+        <span *ngIf="item?.signingObject == 1">货主</span>
+        <span *ngIf="item?.signingObject == 2">司机</span>
+      </ng-template>
+    </st>
+  </div>
+</nz-card>

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

@@ -0,0 +1,4 @@
+.NewBtn{
+    float: right;
+    margin-bottom: 15px;
+}

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

@@ -0,0 +1,35 @@
+/*
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-01-05 09:45:47
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-02-24 10:25:58
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-template\\contract-template.component.spec.ts
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+ */
+
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ContractManagementTemplateFrameComponent } from './contract-template-frame.component';
+
+describe('ContractManagementTemplateFrameComponent', () => {
+  let component: ContractManagementTemplateFrameComponent;
+  let fixture: ComponentFixture<ContractManagementTemplateFrameComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContractManagementTemplateFrameComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContractManagementTemplateFrameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,252 @@
+import { Router } from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { STColumn, STComponent } from '@delon/abc/st';
+import { SFComponent, SFDateWidgetSchema, SFSchema, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
+import { ModalHelper, _HttpClient } from '@delon/theme';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { map } from 'rxjs/operators';
+import { ContractManagementService } from '../../services/contract-management.service';
+
+
+@Component({
+  selector: 'app-contract-management-template-frame-complaint',
+  templateUrl: './contract-template-frame.component.html',
+  styleUrls: ['./contract-template-frame.component.less']
+})
+export class ContractManagementTemplateFrameComponent implements OnInit {
+  ui: SFUISchema = {};
+  uiView: SFUISchema = {};
+  schema: SFSchema = {};
+  schemaView: SFSchema = {};
+  auditMany = false;
+  _$expand = false;
+  channelId: any;
+  @ViewChild('st') private readonly st!: STComponent;
+  @ViewChild('sf', { static: false }) sf!: SFComponent;
+  columns: STColumn[] = [];
+  datass: any = [
+    {
+    one: '1',
+    two: '1',
+    three: '1',
+    id: 1
+   },
+    {
+    one: '2',
+    two: '2',
+    three: '2',
+    id: 2
+   },
+];
+  constructor(
+    public service: ContractManagementService,
+    private modal: NzModalService,
+    private router: Router
+     ) { }
+
+  /**
+ * 查询参数
+ */
+  get reqParams() {
+    return {
+      templateType: 'kj',
+      ...this.sf?.value,
+    };
+  }
+  get selectedRows() {
+    return this.st?.list.filter((item) => item.checked) || [];
+  }
+  ngOnInit(): void {
+    this.initSF();
+    this.initST();
+    this.initSTAudit();
+  }
+
+
+
+  /**
+ * 初始化查询表单
+ */
+  initSF() {
+    this.schema = {
+      properties: {
+        _$expand: { type: 'boolean', ui: { hidden: true } },
+        templateName: {
+          type: 'string',
+          title: '模板名称',
+        },
+        signingObject: {
+          type: 'string',
+          title: '签约对象',
+          enum: [
+            { label: '全部', value: '' },
+            { label: '货主', value: 1 },
+            { label: '司机', value: 2 }
+          ],
+          ui: {
+            widget: 'select',
+            placeholder: '请选择'
+          }
+        },
+        contractType: {
+          title: '合同类型',
+          type: 'string',
+          default: '',
+          ui: {
+            widget: 'dict-select',
+            containsAllLable: true,
+            params: { dictKey: 'contract:type' },
+            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,
+        },
+      },
+    };
+    this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
+  }
+
+  /**
+   * 初始化数据列表
+   */
+  initST() {
+    this.columns = [
+      {
+        title: '合同模板名称',
+        className: 'text-center',
+        render: 'templateName'
+      },
+      {
+        title: '签约对象',
+        width: '100px',
+        className: 'text-center',
+        index: 'signingObjectLabel'
+      },
+      {
+        title: '合同类型',
+        width: '100px',
+        className: 'text-center',
+        index: 'contractTypeLabel'
+      },
+      {
+        title: '货源类型',
+        width: '100px',
+        className: 'text-center',
+        index: 'resourceTypeLabel'
+      },
+      { title: '创建人', index: 'createUserIdLabel', width: '120px', className: 'text-center' },
+      {
+        title: '创建时间',
+        className: 'text-center',
+        index: 'createTime',
+        width: '200px'
+      },
+      {
+        title: '操作',
+        fixed: 'right',
+        width: '110px',
+        className: 'text-center',
+        buttons: [
+          {
+            text: '编辑',
+            click: (_record) => this.edit(_record),
+            acl: { ability: ['CONTRACT-TEMPLATE-edit'] },
+          },
+          {
+            text: '删除',
+            click: (_record) => this.delete(_record),
+            acl: { ability: ['CONTRACT-TEMPLATE-delete'] },
+          },
+        ],
+      },
+    ];
+  }
+  initSTAudit() {
+    this.schemaView = {
+      properties: {
+        handleResult: {
+          title: '处理结果',
+          type: 'string',
+          maxLength: 50,
+          ui: {
+            placeholder: '最多不超过50字',
+            widget: 'textarea',
+            autosize: { minRows: 3, maxRows: 6 }
+          },
+        },
+      },
+      required: ['handleResult']
+    };
+    this.uiView = { '*': { spanLabelFixed: 110, grid: { span: 24 } } };
+  }
+  /**
+   * 查询字段个数
+   */
+  get queryFieldCount(): number {
+    return Object.keys(this.schema?.properties || {}).length;
+  }
+ /**
+   * 伸缩查询条件
+   */
+  expandToggle(): void {
+    this._$expand = !this._$expand;
+    this.sf?.setValue('/_$expand', this._$expand);
+  }
+  tabChange(item: any) {
+  }
+  /**
+   * 重置表单
+   */
+  resetSF(): void {
+    this.sf.reset();
+    this._$expand = false;
+  }
+
+  edit(value: any) {
+    this.router.navigate(['/contract-management/template/text/' + value.id],{
+      queryParams: {
+        status: 2
+      }
+    })
+  }
+  creatTemplate() {
+    this.router.navigate(['/contract-management/template/text/' + 0], {
+      queryParams: {
+        status: 1
+      }
+    })
+  }
+  goBack() {
+    window.history.go(-1)
+  }
+  view(value: any) {
+    this.router.navigate(['/contract-management/template/text/' + value.id],{
+      queryParams: {
+        status: 3
+      }
+    })
+  }
+  delete(value: any) {
+    this.modal.confirm({
+      nzTitle: '<i>删除确认</i>',
+      nzOnOk: () =>
+        this.service.request(this.service.$api_deletebatch_contractTemplate, [value.id]).subscribe(res => {
+          if (res) {
+            this.service.msgSrv.success('删除成功！');
+            this.st.reload()
+          }
+        })
+    });
+  }
+}

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

@@ -0,0 +1,83 @@
+<!--
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-01-12 10:52:50
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-02-24 10:31:05
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-template\\contract-template.component.html
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+-->
+
+<!-- 搜索表单 -->
+<nz-card>
+  <div nz-row nzGutter="8">
+    <!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
+    <div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
+      <sf
+        #sf
+        [schema]="schema"
+        [ui]="ui"
+        [mode]="'search'"
+        [disabled]="!sf?.valid"
+        [loading]="false"
+        (formSubmit)="st?.load(1)"
+        (formReset)="resetSF()"
+      ></sf>
+    </div>
+
+    <!-- 查询字段大于3个时，根据展开状态调整布局 -->
+    <ng-container>
+      <div nz-col [nzSpan]="_$expand ? 24 : 18">
+        <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'">
+          <ng-template sf-template="signTime" let-me let-ui="ui" let-schema="schema">
+            <nz-range-picker [nzShowTime]="true" [(ngModel)]="sf.value.signTime"></nz-range-picker>
+          </ng-template>
+          <ng-template sf-template="effectiveEndTime" let-me let-ui="ui" let-schema="schema">
+            <nz-range-picker [nzShowTime]="true" [(ngModel)]="sf.value.effectiveEndTime"></nz-range-picker>
+          </ng-template>
+        </sf>
+      </div>
+      <div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
+        <button
+          nz-button
+          nzType="primary"
+          [disabled]="!sf.valid"
+          [nzLoading]="service.http.loading"
+          (click)="st?.load(1)"
+          acl
+          [acl-ability]="['CONTRACT-INDEX-listFrame']"
+          >查询</button
+        >
+        <button nz-button (click)="resetSF()">重置</button>
+        <button nz-button nzType="link" (click)="expandToggle()">
+          {{ !_$expand ? '展开' : '收起' }}
+          <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
+        </button>
+      </div>
+    </ng-container>
+  </div>
+</nz-card>
+
+<nz-card>
+  <div class="NewBtn">
+    <button nz-button nzType="primary" (click)="creatTemplate()" acl [acl-ability]="['CONTRACT-TEMPLATE-new']"> 新建 </button>
+  </div>
+  <div style="margin-top: 15px">
+    <st
+      #st
+      [bordered]="true"
+      [data]="service.$api_get_contractTemplate_page"
+      [columns]="columns"
+      [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"
+    >
+      <ng-template st-row="templateName" let-item let-index="index">
+        <a (click)="service.openURL(item?.contractFilePath)">{{ item.templateName }}</a>
+        <!-- <a (click)="view(item)">{{ item.templateName }}</a> -->
+      </ng-template>
+    </st>
+  </div>
+</nz-card>

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

@@ -0,0 +1,4 @@
+.NewBtn{
+    float: right;
+    margin-bottom: 15px;
+}

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

@@ -0,0 +1,35 @@
+/*
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-01-05 09:45:47
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-02-24 14:09:28
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-template-partner\\contract-template-partner.component.spec.ts
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+ */
+
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ContractManagementTemplatePartnerComponent } from './contract-template-partner.component';
+
+describe('ContractManagementTemplatePartnerComponent', () => {
+  let component: ContractManagementTemplatePartnerComponent;
+  let fixture: ComponentFixture<ContractManagementTemplatePartnerComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContractManagementTemplatePartnerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContractManagementTemplatePartnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,252 @@
+import { Router } from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { STColumn, STComponent } from '@delon/abc/st';
+import { SFComponent, SFDateWidgetSchema, SFSchema, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
+import { ModalHelper, _HttpClient } from '@delon/theme';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { map } from 'rxjs/operators';
+import { ContractManagementService } from '../../services/contract-management.service';
+
+
+@Component({
+  selector: 'app-contract-management-template-partner-complaint',
+  templateUrl: './contract-template-partner.component.html',
+  styleUrls: ['./contract-template-partner.component.less']
+})
+export class ContractManagementTemplatePartnerComponent implements OnInit {
+  ui: SFUISchema = {};
+  uiView: SFUISchema = {};
+  schema: SFSchema = {};
+  schemaView: SFSchema = {};
+  auditMany = false;
+  _$expand = false;
+  channelId: any;
+  @ViewChild('st') private readonly st!: STComponent;
+  @ViewChild('sf', { static: false }) sf!: SFComponent;
+  columns: STColumn[] = [];
+  datass: any = [
+    {
+    one: '1',
+    two: '1',
+    three: '1',
+    id: 1
+   },
+    {
+    one: '2',
+    two: '2',
+    three: '2',
+    id: 2
+   },
+];
+  constructor(
+    public service: ContractManagementService,
+    private modal: NzModalService,
+    private router: Router
+     ) { }
+
+  /**
+ * 查询参数
+ */
+  get reqParams() {
+    return {
+      templateType: 'HHR',
+      ...this.sf?.value,
+    };
+  }
+  get selectedRows() {
+    return this.st?.list.filter((item) => item.checked) || [];
+  }
+  ngOnInit(): void {
+    this.initSF();
+    this.initST();
+    this.initSTAudit();
+  }
+
+
+
+  /**
+ * 初始化查询表单
+ */
+  initSF() {
+    this.schema = {
+      properties: {
+        _$expand: { type: 'boolean', ui: { hidden: true } },
+        templateName: {
+          type: 'string',
+          title: '模板名称',
+        },
+        signingObject: {
+          type: 'string',
+          title: '签约对象',
+          enum: [
+            { label: '全部', value: '' },
+            { label: '货主', value: 1 },
+            { label: '司机', value: 2 }
+          ],
+          ui: {
+            widget: 'select',
+            placeholder: '请选择'
+          }
+        },
+        contractType: {
+          title: '合同类型',
+          type: 'string',
+          default: '',
+          ui: {
+            widget: 'dict-select',
+            containsAllLable: true,
+            params: { dictKey: 'contract:type' },
+            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,
+        },
+      },
+    };
+    this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
+  }
+
+  /**
+   * 初始化数据列表
+   */
+  initST() {
+    this.columns = [
+      {
+        title: '合同模板名称',
+        className: 'text-center',
+        render: 'templateName'
+      },
+      {
+        title: '签约对象',
+        width: '100px',
+        className: 'text-center',
+        index: 'signingObjectLabel'
+      },
+      {
+        title: '合同类型',
+        width: '100px',
+        className: 'text-center',
+        index: 'contractTypeLabel'
+      },
+      {
+        title: '货源类型',
+        width: '100px',
+        className: 'text-center',
+        index: 'resourceTypeLabel'
+      },
+      { title: '创建人', index: 'createUserIdLabel', width: '120px', className: 'text-center' },
+      {
+        title: '创建时间',
+        className: 'text-center',
+        index: 'createTime',
+        width: '200px'
+      },
+      {
+        title: '操作',
+        fixed: 'right',
+        width: '110px',
+        className: 'text-center',
+        buttons: [
+          {
+            text: '编辑',
+            click: (_record) => this.edit(_record),
+            acl: { ability: ['CONTRACT-TEMPLATE-edit'] },
+          },
+          {
+            text: '删除',
+            click: (_record) => this.delete(_record),
+            acl: { ability: ['CONTRACT-TEMPLATE-delete'] },
+          },
+        ],
+      },
+    ];
+  }
+  initSTAudit() {
+    this.schemaView = {
+      properties: {
+        handleResult: {
+          title: '处理结果',
+          type: 'string',
+          maxLength: 50,
+          ui: {
+            placeholder: '最多不超过50字',
+            widget: 'textarea',
+            autosize: { minRows: 3, maxRows: 6 }
+          },
+        },
+      },
+      required: ['handleResult']
+    };
+    this.uiView = { '*': { spanLabelFixed: 110, grid: { span: 24 } } };
+  }
+  /**
+   * 查询字段个数
+   */
+  get queryFieldCount(): number {
+    return Object.keys(this.schema?.properties || {}).length;
+  }
+ /**
+   * 伸缩查询条件
+   */
+  expandToggle(): void {
+    this._$expand = !this._$expand;
+    this.sf?.setValue('/_$expand', this._$expand);
+  }
+  tabChange(item: any) {
+  }
+  /**
+   * 重置表单
+   */
+  resetSF(): void {
+    this.sf.reset();
+    this._$expand = false;
+  }
+
+  edit(value: any) {
+    this.router.navigate(['/contract-management/template/text/' + value.id],{
+      queryParams: {
+        status: 2
+      }
+    })
+  }
+  creatTemplate() {
+    this.router.navigate(['/contract-management/template/text/' + 0], {
+      queryParams: {
+        status: 1
+      }
+    })
+  }
+  goBack() {
+    window.history.go(-1)
+  }
+  view(value: any) {
+    this.router.navigate(['/contract-management/template/text/' + value.id],{
+      queryParams: {
+        status: 3
+      }
+    })
+  }
+  delete(value: any) {
+    this.modal.confirm({
+      nzTitle: '<i>删除确认</i>',
+      nzOnOk: () =>
+        this.service.request(this.service.$api_deletebatch_contractTemplate, [value.id]).subscribe(res => {
+          if (res) {
+            this.service.msgSrv.success('删除成功！');
+            this.st.reload()
+          }
+        })
+    });
+  }
+}

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

@@ -4,13 +4,12 @@
  * @Author       : Shiming
  * @Date         : 2022-01-12 10:52:50
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-01-18 17:16:18
+ * @LastEditTime : 2022-02-24 10:31:05
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-template\\contract-template.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
 
 <!-- 搜索表单 -->
-<page-header-wrapper [title]="'合同模板'"> </page-header-wrapper>
 <nz-card>
   <div nz-row nzGutter="8">
     <!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
@@ -21,16 +20,23 @@
         [ui]="ui"
         [mode]="'search'"
         [disabled]="!sf?.valid"
-        [loading]="service.http.loading"
+        [loading]="false"
         (formSubmit)="st?.load(1)"
         (formReset)="resetSF()"
       ></sf>
     </div>
 
     <!-- 查询字段大于3个时，根据展开状态调整布局 -->
-    <ng-container *ngIf="queryFieldCount > 4">
+    <ng-container>
       <div nz-col [nzSpan]="_$expand ? 24 : 18">
-        <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
+        <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'">
+          <ng-template sf-template="signTime" let-me let-ui="ui" let-schema="schema">
+            <nz-range-picker [nzShowTime]="true" [(ngModel)]="sf.value.signTime"></nz-range-picker>
+          </ng-template>
+          <ng-template sf-template="effectiveEndTime" let-me let-ui="ui" let-schema="schema">
+            <nz-range-picker [nzShowTime]="true" [(ngModel)]="sf.value.effectiveEndTime"></nz-range-picker>
+          </ng-template>
+        </sf>
       </div>
       <div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
         <button
@@ -40,10 +46,9 @@
           [nzLoading]="service.http.loading"
           (click)="st?.load(1)"
           acl
-          [acl-ability]="['CONTRACT-TEMPLATE-search']"
+          [acl-ability]="['CONTRACT-INDEX-listFrame']"
           >查询</button
         >
-        <button nz-button nzType="primary" acl [acl-ability]="['CONTRACT-TEMPLATE-export']">导出</button>
         <button nz-button (click)="resetSF()">重置</button>
         <button nz-button nzType="link" (click)="expandToggle()">
           {{ !_$expand ? '展开' : '收起' }}
@@ -67,7 +72,7 @@
       [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
       [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
       [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
-      [loading]="service.http.loading"
+      [loading]="false"
     >
       <ng-template st-row="templateName" let-item let-index="index">
         <a (click)="view(item)">{{ item.templateName }}</a>

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

@@ -4,27 +4,27 @@
  * @Author       : Shiming
  * @Date         : 2022-01-05 09:45:47
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-01-18 17:16:22
+ * @LastEditTime : 2022-02-24 10:25:58
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-template\\contract-template.component.spec.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
 
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ContractManagementTemplateComponent } from './contract-template.component';
+import { ContractManagementTemplateDetailComponent } from './contract-template.component';
 
-describe('ContractManagementTemplateComponent', () => {
-  let component: ContractManagementTemplateComponent;
-  let fixture: ComponentFixture<ContractManagementTemplateComponent>;
+describe('ContractManagementTemplateDetailComponent', () => {
+  let component: ContractManagementTemplateDetailComponent;
+  let fixture: ComponentFixture<ContractManagementTemplateDetailComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ ContractManagementTemplateComponent ]
+      declarations: [ ContractManagementTemplateDetailComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ContractManagementTemplateComponent);
+    fixture = TestBed.createComponent(ContractManagementTemplateDetailComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -9,11 +9,11 @@ import { ContractManagementService } from '../../services/contract-management.se
 
 
 @Component({
-  selector: 'app-contract-management-template-complaint',
+  selector: 'app-contract-management-template-detail-complaint',
   templateUrl: './contract-template.component.html',
   styleUrls: ['./contract-template.component.less']
 })
-export class ContractManagementTemplateComponent implements OnInit {
+export class ContractManagementTemplateDetailComponent implements OnInit {
   ui: SFUISchema = {};
   uiView: SFUISchema = {};
   schema: SFSchema = {};
@@ -49,6 +49,7 @@ export class ContractManagementTemplateComponent implements OnInit {
  */
   get reqParams() {
     return {
+      templateType: 'MX',
       ...this.sf?.value,
     };
   }
@@ -69,20 +70,45 @@ export class ContractManagementTemplateComponent implements OnInit {
   initSF() {
     this.schema = {
       properties: {
+        _$expand: { type: 'boolean', ui: { hidden: true } },
         templateName: {
           type: 'string',
           title: '模板名称',
         },
-        templateType: {
-          title: '模板类型',
+        signingObject: {
+          type: 'string',
+          title: '签约对象',
+          enum: [
+            { label: '全部', value: '' },
+            { label: '货主', value: 1 },
+            { label: '司机', value: 2 }
+          ],
+          ui: {
+            widget: 'select',
+            placeholder: '请选择'
+          }
+        },
+        contractType: {
+          title: '合同类型',
           type: 'string',
           default: '',
           ui: {
             widget: 'dict-select',
-            params: { dictKey: 'contract:template:type' },
-            containsAllLabel: true,
+            containsAllLable: true,
+            params: { dictKey: 'contract:type' },
+            containAllLable: true,
+          } as SFSelectWidgetSchema
+        },
+        resourceType: {
+          title: '货源类型',
+          type: 'string',
+          default: '',
+          ui: {
+            widget: 'dict-select',
+            params: { dictKey: 'goodresource:type' },
+            containsAllLable: true,
             visibleIf: {
-              _$expand: (value: boolean) => value,
+              _$expand: (value: boolean) => value
             },
           } as SFSelectWidgetSchema,
         },
@@ -102,25 +128,35 @@ export class ContractManagementTemplateComponent implements OnInit {
         render: 'templateName'
       },
       {
-        title: '模板类型',
+        title: '签约对象',
+        width: '100px',
         className: 'text-center',
-        index: 'templateType'
+        index: 'signingObjectLabel'
       },
       {
-        title: '单据类型',
-        index: 'contractType',
+        title: '合同类型',
+        width: '100px',
         className: 'text-center',
+        index: 'contractTypeLabel'
       },
-      { title: '创建人', index: 'createUserId', width: '120px', className: 'text-center' },
+      {
+        title: '货源类型',
+        width: '100px',
+        className: 'text-center',
+        index: 'resourceTypeLabel'
+      },
+      { title: '创建人', index: 'createUserIdLabel', width: '120px', className: 'text-center' },
       {
         title: '创建时间',
         className: 'text-center',
-        index: 'createTime'
+        index: 'createTime',
+        width: '200px'
       },
       {
         title: '操作',
         fixed: 'right',
-        className: 'text-left',
+        width: '110px',
+        className: 'text-center',
         buttons: [
           {
             text: '编辑',
@@ -160,9 +196,9 @@ export class ContractManagementTemplateComponent implements OnInit {
   get queryFieldCount(): number {
     return Object.keys(this.schema?.properties || {}).length;
   }
-  /**
-  * 伸缩查询条件
-  */
+ /**
+   * 伸缩查询条件
+   */
   expandToggle(): void {
     this._$expand = !this._$expand;
     this.sf?.setValue('/_$expand', this._$expand);
@@ -178,14 +214,14 @@ export class ContractManagementTemplateComponent implements OnInit {
   }
 
   edit(value: any) {
-    this.router.navigate(['/contract-management/template/detail/' + value.id], {
+    this.router.navigate(['/contract-management/template/text/' + value.id],{
       queryParams: {
         status: 2
       }
     })
   }
   creatTemplate() {
-    this.router.navigate(['/contract-management/template/detail/' + 0], {
+    this.router.navigate(['/contract-management/template/text/' + 0], {
       queryParams: {
         status: 1
       }
@@ -195,7 +231,7 @@ export class ContractManagementTemplateComponent implements OnInit {
     window.history.go(-1)
   }
   view(value: any) {
-    this.router.navigate(['/contract-management/template/detail/' + value.id], {
+    this.router.navigate(['/contract-management/template/text/' + value.id],{
       queryParams: {
         status: 3
       }

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

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-01-07 13:27:10
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-01-18 17:16:56
+ * @LastEditTime : 2022-02-23 19:39:38
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\index\\index.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
@@ -19,5 +19,8 @@
     <nz-tab nzTitle="框架合同">
       <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>
+    </nz-tab>
   </nz-tabset>
 </ng-template>

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

@@ -4,14 +4,12 @@
  * @Author       : Shiming
  * @Date         : 2022-01-12 10:52:50
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-02-23 15:57:26
+ * @LastEditTime : 2022-03-23 13:56:14
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\policy\\policy.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
-<page-header [action]="phActionTpl">
-  <ng-template #phActionTpl> </ng-template>
-</page-header>
-
+<page-header-wrapper title="保单管理" >
+</page-header-wrapper>
 <nz-card>
   <div nz-row nzGutter="8">
     <!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
@@ -22,7 +20,7 @@
         [ui]="ui"
         [mode]="'search'"
         [disabled]="!sf?.valid"
-        [loading]="service.http.loading"
+        [loading]="false"
         (formSubmit)="st?.load(1)"
         (formReset)="resetSF()"
       ></sf>
@@ -34,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]="service.http.loading" (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 ? '展开' : '收起' }}
@@ -53,7 +51,7 @@
     [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
     [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
     [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
-    [loading]="service.http.loading"
+    [loading]="false"
   >
 
   </st>

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) {}
 
   /**
@@ -185,6 +186,7 @@ export class ContractManagementPolicyComponent implements OnInit {
   resetSF() {
     this.sf.reset();
     this._$expand = false;
+    this.isLoading = true
   }
 
   /**

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

@@ -0,0 +1,26 @@
+<!--
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-01-07 13:27:10
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-02-24 14:10:45
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\template\\template.component.html
+ * 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="明细合同">
+      <app-contract-management-template-detail-complaint></app-contract-management-template-detail-complaint>
+    </nz-tab>
+    <nz-tab nzTitle="框架合同">
+      <app-contract-management-template-frame-complaint></app-contract-management-template-frame-complaint>
+    </nz-tab>
+    <nz-tab nzTitle="合伙人合同">
+      <app-contract-management-template-partner-complaint></app-contract-management-template-partner-complaint>
+    </nz-tab>
+  </nz-tabset>
+</ng-template>

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

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

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

@@ -0,0 +1,27 @@
+/*
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-01-07 13:27:10
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-02-24 10:20:23
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\template\\template.component.ts
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { ModalHelper, _HttpClient } from '@delon/theme';
+
+@Component({
+  selector: 'app-supply-management-template',
+  templateUrl: './template.component.html',
+})
+export class ContractManagementTemplateComponent implements OnInit {
+  selectedIndex = 0;
+  
+  constructor(private http: _HttpClient, private modal: ModalHelper) { }
+
+  ngOnInit(): void { }
+
+
+}

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

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-01-04 21:05:49
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-01-18 17:15:03
+ * @LastEditTime : 2022-02-24 10:24:16
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\contract-management-routing.module.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -13,16 +13,18 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { ContractManagementDetailComponent } from './components/contract-detail/contract-detail.component';
 import { ContractManagementContractListComponent } from './components/contract-list/contract-list.component';
-import { ContractManagementTemplateDetailComponent } from './components/contract-template-detail/contract-template-detail.component';
-import { ContractManagementTemplateComponent } from './components/contract-template/contract-template.component';
+import { ContractManagementPartnerComponent } from './components/contract-partner/contract-partner.component';
+import { ContractManagementTemplateTextComponent } from './components/contract-template-detail/contract-template-detail.component';
 import { ContractManagementIndexComponent } from './components/index/index.component';
 import { ContractManagementPolicyComponent } from './components/policy/policy.component';
+import { ContractManagementTemplateComponent } from './components/template/template.component';
 const routes: Routes = [
   { path: 'index', component: ContractManagementIndexComponent },
   { path: 'index/detail/:id', component: ContractManagementDetailComponent },
   { path: 'template', component: ContractManagementTemplateComponent },
-  { path: 'template/detail/:id', component: ContractManagementTemplateDetailComponent },
-  { path: 'policy', component: ContractManagementPolicyComponent }
+  { path: 'template/text/:id', component: ContractManagementTemplateTextComponent },
+  { path: 'policy', component: ContractManagementPolicyComponent },
+  { path: 'partner', component: ContractManagementPartnerComponent },
 ];
 
 @NgModule({

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

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-01-04 21:05:49
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-01-18 17:15:08
+ * @LastEditTime : 2022-02-24 14:09:24
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\contract-management.module.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -15,20 +15,29 @@ import { SharedModule } from '@shared';
 import { ContractManagementManagementRoutingModule } from './contract-management-routing.module';
 import { ContractManagementContractListComponent } from './components/contract-list/contract-list.component';
 import { ContractManagementPolicyComponent } from './components/policy/policy.component';
-import { ContractManagementTemplateComponent } from './components/contract-template/contract-template.component';
+import { ContractManagementTemplateDetailComponent } from './components/contract-template/contract-template.component';
 import { ContractManagementIndexComponent } from './components/index/index.component';
 import { ContractManagementFrameComponent } from './components/contract-frame/contract-frame.component';
-import { ContractManagementTemplateDetailComponent } from './components/contract-template-detail/contract-template-detail.component';
 import { ContractManagementDetailComponent } from './components/contract-detail/contract-detail.component';
+import { ContractManagementPartnerComponent } from './components/contract-partner/contract-partner.component';
+import { ContractManagementTemplateComponent } from './components/template/template.component';
+import { ContractManagementTemplateTextComponent } from './components/contract-template-detail/contract-template-detail.component';
+import { ContractManagementTemplateFrameComponent } from './components/contract-template-frame/contract-template-frame.component';
+import { ContractManagementTemplatePartnerComponent } from './components/contract-template-partner/contract-template-partner.component';
 
 const COMPONENTS: any = [
   ContractManagementContractListComponent,
   ContractManagementPolicyComponent,
-  ContractManagementTemplateComponent,
+  ContractManagementTemplateDetailComponent,
   ContractManagementTemplateDetailComponent,
   ContractManagementIndexComponent,
   ContractManagementFrameComponent,
-  ContractManagementDetailComponent
+  ContractManagementDetailComponent,
+  ContractManagementPartnerComponent,
+  ContractManagementTemplateComponent,
+  ContractManagementTemplateTextComponent,
+  ContractManagementTemplateFrameComponent,
+  ContractManagementTemplatePartnerComponent
 ];
 const NOTROUTECOMPONENTS: any = [];
 @NgModule({

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

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-01-04 21:05:49
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-01-18 17:17:10
+ * @LastEditTime : 2022-02-24 10:00:59
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\services\\contract-management.service.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -31,9 +31,22 @@ export class ContractManagementService extends BaseService {
   $api_listDetailed_page = `/api/sdc/contract/listDetailed/page`;
   // 查询框架合同
   $api_listFrame_page = `/api/sdc/contract/listFrame/page`;
+  // 查询合伙人合同
+  $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/datatable/components/busitable/busiindex/busiindex.component.html

@@ -0,0 +1,58 @@
+<!-- 页头 -->
+<page-header-wrapper [title]="'业务报表'"></page-header-wrapper>
+<nz-card nzTitle="运多星平台业务情况" [nzExtra]="extraTemplate">
+  <ng-template #extraTemplate>
+    <div class="chooseBox">
+      <button nz-button nzType="primary" (click)="exportFun()">导出</button>
+      <div class="timeBox">
+        <nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()" acl  [acl-ability]="['busiindex-tabel']">
+          <label nz-radio-button nzValue="year">年</label>
+          <label nz-radio-button nzValue="month">月</label>
+          <label nz-radio-button nzValue="date">日</label>
+          <label nz-radio-button nzValue="define">自定义</label>
+        </nz-radio-group>
+        <div class="dateBox">
+          <nz-date-picker [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" *ngIf="mode !== 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-date-picker>
+          <nz-range-picker [(ngModel)]="defineDate" [nzFormat]="dateFormat" *ngIf="mode === 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-range-picker>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+  <st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listPerformanceReportPage"
+    [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
+    [scroll]="{ x: '1200px' }" [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
+    [page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }"></st>
+</nz-card>
+<nz-card nzTitle="业绩报表" [nzExtra]="extraTemplate01">
+  <ng-template #extraTemplate01>
+    <div class="chooseBox">
+      <div class="timeBox">
+        <nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext()" acl  [acl-ability]="['busiindex-report']">
+          <label nz-radio-button nzValue="year">年</label>
+          <label nz-radio-button nzValue="month">月</label>
+        </nz-radio-group>
+        <div class="dateBox">
+          <nz-date-picker [(ngModel)]="dateNext" [nzDisabledDate]="disabledDate" [nzMode]="modeNext" (ngModelChange)="onChangeNext($event)"></nz-date-picker>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+
+  <div nz-row [nzGutter]="64">
+    <div nz-col class="gutter-row" [nzSpan]="12">
+      <div class="title">
+        <div class="box" style="background-color: #3ba1ff;"></div> 环比(%)
+      </div>
+      <!-- <g2-custom delay="100" (render)="render($event)"></g2-custom> -->
+     <!-- <app-busitable-curve></app-busitable-curve> -->
+     <app-busitable-curve #curve [chartData]="chartData.chainRatio"></app-busitable-curve>
+    </div>
+    <div nz-col class="gutter-row" [nzSpan]="12">
+      <div class="title">
+        <div class="box" style="background-color: #f59a23;"></div> 业绩量(元)
+      </div>
+      <app-busitable-pillar #pillar [chartData]="chartData.performance"></app-busitable-pillar>
+    </div>
+  </div>
+  
+</nz-card>

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,91 @@
+import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
+
+// import DataSet from '@antv/data-set';
+const DataSet = require('@antv/data-set');
+import { Chart } from '@antv/g2';
+import { DataService } from 'src/app/routes/datatable/services/data.service';
+@Component({
+  selector: 'app-compliance-curve',
+  templateUrl: './curve.component.html',
+  styleUrls: ['./curve.component.less']
+})
+export class ComplianceCurveComponent implements OnInit,OnChanges {
+  el: any;
+  @Input() chartData: any;
+  chart: any;
+  constructor(private service: DataService, private ngZone: NgZone) {
+
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.chartData) {
+      // setTimeout(()=>{
+      //   this.chart.render(true)
+      // }, 1000)
+
+    }
+  }
+
+  ngOnInit(): void {
+
+  }
+  reRender() {
+    setTimeout(() => {
+      this.chart.data(this.chartData);
+      this.chart.render();
+    }, 1000)
+  }
+  render(el: ElementRef<HTMLDivElement>): void {
+    this.el = el.nativeElement
+    setTimeout(() => {
+      console.log(this.chartData)
+      this.ngZone.runOutsideAngular(() => this.init(this.el));
+      }, 1000)
+  }
+
+  private init(el: HTMLElement): void {
+    this.chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 500,
+    });
+
+    this.chart.data(this.chartData);
+    this.chart.scale({
+      time: {
+        range: [0, 1],
+      },
+      number: {
+        min: 0,
+        nice: true,
+      },
+    });
+    
+    this.chart.tooltip({
+      showCrosshairs: true,
+      shared: true,
+    });
+    
+    this.chart.axis('proportion', {
+      label: {
+        formatter: (val: any) => {
+          return val*100+ ' %';
+        },
+      },
+    });
+    
+    this.chart
+      .line()
+      .position('situationDate*proportion')
+      .color('type')
+      .tooltip('proportion*type', function(name: any, value: any) {
+        return {
+          name: name*100+'%',
+          value: value
+        };
+      });
+
+    this.chart.render();
+    
+  }
+}

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" [footer]="footer1" contentHeight="46">
+      <ng-template #footer1>
+        <div class="card-f">
+          <span class="card-f-l">合格：{{cardData1?.leftQuantity}}</span> <span>不合格：{{cardData1?.rightQuantity}}</span>
+        </div>
+      </ng-template>
+    </g2-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'货源单占比'" [bordered]="true" [total]="cardData2?.proportion" [footer]="footer2" contentHeight="46">
+      <ng-template #footer2>
+        <div class="card-f">
+          <span class="card-f-l">货源单：{{cardData2?.leftQuantity}}</span> <span>合同单：{{cardData2?.rightQuantity}}</span>
+        </div>
+      </ng-template>
+    </g2-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'运费直付占比'" [bordered]="true" [total]="cardData3?.proportion" [footer]="footer3" contentHeight="46">
+      <ng-template #footer3>
+        <div class="card-f">
+          <span class="card-f-l">司机：{{cardData3?.leftQuantity}}</span> <span>车队长：{{cardData3?.rightQuantity}}</span>
+        </div>
+      </ng-template>
+    </g2-card>
+    </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'付款及时率'" [bordered]="true" [total]="cardData4?.proportion" [footer]="footer4" contentHeight="46">
+      <ng-template #footer4>
+        <div class="card-f">
+          <span class="card-f-l">准时：{{cardData4?.leftQuantity}}</span> <span>逾期：{{cardData4?.rightQuantity}}</span>
+        </div>
+      </ng-template>
+    </g2-card>
+  </div>
+</div>
+
+<nz-card nzTitle="平台合规情况监控报表">
+  <app-compliance-curve #curve [chartData]="chartData"></app-compliance-curve>
+  <!-- <g2-custom delay="100" (render)="render($event)"></g2-custom> -->
+</nz-card>

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,263 @@
+import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { DatePipe, ModalHelper, _HttpClient } from '@delon/theme';
+import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
+import { format } from 'date-fns';
+import { SFComponent, SFDateWidgetSchema, SFRadioWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
+import { G2TimelineData, G2TimelineMap } from '@delon/chart/timeline';
+import { Chart } from '@antv/g2';
+import { DataService } from '../../../services/data.service';
+import { ComplianceCurveComponent } from './curve/curve.component';
+
+@Component({
+  selector: 'app-datatable-compliance-index',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.less'],
+  providers: [DatePipe]
+})
+export class DatatableComplianceIndexComponent implements OnInit {
+  @ViewChild('curve') private readonly curve!: ComplianceCurveComponent;
+  @ViewChild('sf', { static: false })
+  
+  sf!: SFComponent;
+  ui!: SFUISchema;
+  schema: SFSchema = {};
+
+  mode = 'year';
+  date: any = null;
+  dateFormat = 'yyyy';
+  time: any = '2022'
+  chartData: any = {}
+
+  cardData1:any;
+  cardData2:any;
+  cardData3:any;
+  cardData4:any;
+ 
+  constructor(private http: _HttpClient, private modal: ModalHelper, private ngZone: NgZone,public service: DataService, private datePipe: DatePipe) {}
+
+  ngOnInit(): void {
+    this.initSF();
+    this.initdData();
+  }
+
+  initdData(){
+    const params ={
+      ...this.sf?.value,
+      timeType:this.mode ==='month'?'M':'Y',
+      time:this.time
+    }
+    this.service.request(this.service.$api_getBillRateQualified, params).subscribe(res => {
+        if (res) {
+         this.cardData1 = res;
+         this.cardData1.proportion = this.cardData1.proportion*100 +'%'
+        }
+    });
+    this.service.request(this.service.$api_getBillRateProportion, params).subscribe(res => {
+        if (res) {
+         this.cardData2 = res;
+         this.cardData2.proportion = this.cardData2.proportion*100 +'%'
+        }
+    });
+    this.service.request(this.service.$api_getBillRateDirectPayment, params).subscribe(res => {
+        if (res) {
+         this.cardData3 = res;
+         this.cardData3.proportion = this.cardData3.proportion*100 +'%'
+        }
+    });
+    this.service.request(this.service.$api_getBillTimelyPayment, params).subscribe(res => {
+        if (res) {
+         this.cardData4 = res;
+         this.cardData4.proportion = this.cardData4.proportion*100 +'%'
+        }
+    });
+
+    this.service.request(this.service.$api_listMonitorSituation, params).subscribe(res => {
+      if (res) {
+        this.chartData = res
+        this.curve.reRender();
+
+      }
+    })
+  }
+  
+
+  changeData(){
+    if(this.mode === 'year') {
+      this.dateFormat = 'yyyy'
+    } else if(this.mode === 'month') {
+      this.dateFormat = 'yyyy-MM'
+    }
+   
+  }
+
+  onChange(result: any) {
+    if(result === null) {
+      return
+    }
+    if(this.mode === 'year') {
+      this.time = this.datePipe.transform(this.date, 'yyyy')
+    } else if(this.mode === 'month') {
+      this.time = this.datePipe.transform(this.date, 'yyyy-MM')
+    }
+    this.initdData();
+  }
+
+  initSF() {
+    this.schema = {
+      properties: {
+        enterpriseInfoId: {
+          type: 'string',
+          title: '',
+          ui: {
+            widget: 'select',
+            placeholder: '网络货运人',
+            asyncData: () => this.service.getNetworkFreightForwarder({}),
+            change:()=>{
+              this.initdData();
+            },
+            allowClear: true
+          }
+        },
+        enterpriseProjectId: {
+          type: 'string',
+          title: '',
+          ui: {
+            widget: 'select',
+            placeholder: '部门'
+          }
+        },
+        salesmanId: {
+          type: 'string',
+          title: '',
+          ui: {
+            placeholder: '业务员',
+            enter: () => this.initdData(),
+          }
+        }
+      }
+    };
+    this.ui = {
+      '*': {
+        grid: { span: 4 }
+      }
+    };
+
+  }
+
+
+
+
+  render(el: ElementRef<HTMLDivElement>) {
+    this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
+  }
+
+  private init(el: HTMLElement): void {
+    const chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 400
+    });
+    // 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
+		const data = [
+      { data: '1月', label: '订单合格率', value: 5 },
+      { data: '2月', label: '订单合格率', value: 10 },
+      { data: '3月', label: '订单合格率', value: 25 },
+      { data: '4月', label: '订单合格率', value: 35 },
+      { data: '5月', label: '订单合格率', value: 15 },
+      { data: '6月', label: '订单合格率', value: 5 },
+      { data: '7月', label: '订单合格率', value: 95 },
+      { data: '8月', label: '订单合格率', value: 45 },
+
+      { data: '1月', label: '付款及时率', value: 10 },
+      { data: '2月', label: '付款及时率', value: 15 },
+      { data: '3月', label: '付款及时率', value: 30 },
+      { data: '4月', label: '付款及时率', value: 8 },
+      { data: '5月', label: '付款及时率', value: 9 },
+      { data: '6月', label: '付款及时率', value: 5 },
+      { data: '7月', label: '付款及时率', value: 80 },
+      { data: '8月', label: '付款及时率', value: 55 },
+
+      { data: '1月', label: '货源占比率', value: 90 },
+      { data: '2月', label: '货源占比率', value: 30 },
+      { data: '3月', label: '货源占比率', value: 45 },
+      { data: '4月', label: '货源占比率', value: 35 },
+      { data: '5月', label: '货源占比率', value: 95 },
+      { data: '6月', label: '货源占比率', value: 35 },
+      { data: '7月', label: '货源占比率', value: 65 },
+      { data: '8月', label: '货源占比率', value: 63 },
+
+      { data: '1月', label: '运费直付占比', value: 30 },
+      { data: '2月', label: '运费直付占比', value: 60 },
+      { data: '3月', label: '运费直付占比', value: 25 },
+      { data: '4月', label: '运费直付占比', value: 35 },
+      { data: '5月', label: '运费直付占比', value: 15 },
+      { data: '6月', label: '运费直付占比', value: 55 },
+      { data: '7月', label: '运费直付占比', value: 50 },
+      { data: '8月', label: '运费直付占比', value: 30 },
+    ];
+
+    chart.data(data);
+    //刻度自定义
+    chart.scale({
+      data: {
+        range: [0, 1],
+      },
+      value: {
+        min: 0,
+        nice: true,
+      },
+    });
+    // 图表下方图形文字自定义
+    chart.legend({
+      items:[
+        {
+          name: '订单合格率',
+          value: 'node_load1',
+          marker: {
+            symbol: 'circle',
+            style: {fill: '#6193f7'}
+          },
+        },
+        {
+          name: '付款及时率',
+          value: 'node_load2',
+          marker: {symbol: 'circle',style: {fill: '#58d3a2'}},
+        },
+        {
+          name: '货源占比率',
+          value: 'node_load13',
+          marker: {symbol: 'circle',style: {fill: '#5b6d8f'}},
+        },
+        {
+          name: '运费直付占比',
+          value: 'node_load13',
+          marker: {symbol: 'circle',style: {fill: '#f0b915'}},
+        },
+      ]
+    });
+    // 提示自定义
+    chart.tooltip({
+      showCrosshairs: true,
+      shared: true,
+    });
+    
+    //数据格式化
+    chart.axis('value', {
+      label: {
+        formatter: (val) => {
+          return val + ' %';
+        },
+      },
+    });
+		// 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
+		chart.line().position('data*value').color('label').tooltip('label*value', (name:any, value:any) => {
+      return {
+        name: name,
+        value: value + '%'
+      };
+    });;
+		// 在x*y的坐标上按z值绘制圆点
+		chart.point().position('data*value').size(4).color('label').shape('circle');
+		chart.render();
+  }
+}

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,99 @@
+<!--
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-06 13:20:56
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-19 15:52:16
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\customtable\\customindex\\customindex.component.html
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+-->
+<!-- 页头 -->
+<page-header-wrapper [title]="'客户报表'"></page-header-wrapper>
+<div nz-row [nzGutter]="16">
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'货主'" [bordered]="true" [total]="hzData?.total || '0'" [footer]="'已认证' + ' ' + hzData?.auditPassTotal" contentHeight="46">
+    </g2-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'合伙人'" [bordered]="true" [total]="hhrData?.total || '0'" [footer]="'已认证' + ' ' + hhrData?.auditPassTotal" contentHeight="46">
+    </g2-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'司机'" [bordered]="true" [total]="sjData?.total || '0'" [footer]="'已认证' + ' ' + sjData?.auditPassTotal" contentHeight="46">
+    </g2-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'车辆'" [bordered]="true" [total]="clData?.total || '0'" [footer]="'已认证'  + ' '+ clData?.auditPassTotal" contentHeight="46">
+    </g2-card>
+  </div>
+</div>
+<nz-card nzTitle="客户报表" [nzExtra]="extraTemplate">
+  <ng-template #extraTemplate>
+    <div class="chooseBox">
+      <div class="timeBox">
+        <nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()"  acl  [acl-ability]="['customindex-client']">
+          <label nz-radio-button nzValue="year">年</label>
+          <label nz-radio-button nzValue="month">月</label>
+          <label nz-radio-button nzValue="date">日</label>
+          <label nz-radio-button nzValue="define">自定义</label>
+        </nz-radio-group>
+        <div class="dateBox">
+          <nz-date-picker
+            [(ngModel)]="date"
+            [nzMode]="mode"
+            [nzFormat]="dateFormat"
+            *ngIf="mode !== 'define'"
+            [nzDisabledDate]="disabledDate"
+            (ngModelChange)="onChange($event)"
+          ></nz-date-picker>
+          <nz-range-picker
+            [(ngModel)]="defineDate"
+            [nzFormat]="dateFormat"
+            *ngIf="mode === 'define'"
+            [nzDisabledDate]="disabledDate"
+            (ngModelChange)="onChange($event)"
+          ></nz-range-picker>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+  <st
+    #st
+    multiSort
+    [columns]="columns"
+    [ps]="20"
+    [data]="reportData"
+    [scroll]="{ x: '1200px' }"
+    [res]="{ reName: { list: 'data', total: 'data.total' } }"
+    [page]="{ show: false, showSize: false, pageSizes: [20, 50, 100] }"
+  >
+  <ng-template  st-row="type"  let-item>
+      <div *ngIf="item.type == '1'">货主</div>
+      <div *ngIf="item.type == '2'">合伙人</div>
+      <div *ngIf="item.type == '3'">司机</div>
+      <div *ngIf="item.type == '4'">车辆</div>
+  </ng-template>
+</st>
+</nz-card>
+<nz-card nzTitle="用户新增报表" [nzExtra]="extraTemplate01">
+  <ng-template #extraTemplate01>
+    <div class="chooseBox">
+      <div class="timeBox">
+        <nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext2()" acl  [acl-ability]="['customindex-totalAdd']">
+          <label nz-radio-button nzValue="year">年</label>
+          <label nz-radio-button nzValue="month">月</label>
+        </nz-radio-group>
+        <div class="dateBox">
+          <nz-date-picker
+            [nzDisabledDate]="disabledDate"
+            [(ngModel)]="dateNext"
+            [nzMode]="modeNext"
+            (ngModelChange)="onChangeNext($event)"
+          ></nz-date-picker>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+  <app-datatable-customindex-curve #curve [chartData]="chartData"></app-datatable-customindex-curve>
+</nz-card>

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>

src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.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/customtable/mancustomtable/mancustomtable.component.spec.ts

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

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

@@ -0,0 +1,345 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { STColumn, STComponent } from '@delon/abc/st';
+import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
+import { DatePipe, _HttpClient } from '@delon/theme';
+import { differenceInCalendarDays } from 'date-fns';
+import { DataService } from '../../../services/data.service';
+
+@Component({
+  selector: 'app-datatable-mancustomtable',
+  templateUrl: './mancustomtable.component.html',
+  styleUrls: ['./mancustomtable.component.less'],
+  providers: [DatePipe]
+})
+export class DatatableMancustomtableComponent implements OnInit {
+  @ViewChild('st', { static: false }) st!: STComponent;
+  @ViewChild('sf', { static: false }) sf!: SFComponent;
+  _$expand = false;
+  type = 1;
+  mode = 'year';
+  date: any = null;
+  defineDate = [];
+  columns: STColumn[] = [];
+  resourceStatus: number = 1;
+  time: any = ['2022-01-01 00:00:00'];
+  dateFormat = 'yyyy';
+  today = new Date();
+  ui: SFUISchema = {};
+  schema: SFSchema = {};
+  isLoading: boolean = false;
+  searchSchema: SFSchema = {
+    properties: {
+      customerName: {
+        type: 'string',
+        title: '',
+        ui: {
+          placeholder: '请输入客户名称',
+          change: (value: any) => {
+            console.log(value);
+            this.st.reload({ ...this.reqParams });
+          }
+        }
+      },
+      salesmanName: {
+        type: 'string',
+        title: '',
+        ui: {
+          placeholder: '请输入业务员',
+          change: (value: any) => {
+            this.st.reload({ ...this.reqParams });
+          }
+        }
+      },
+      no4: {
+        type: 'string',
+        title: '',
+        ui: {
+          class: 'custom',
+          widget: 'custom',
+          grid: { xxl: 12, xl: 12, lg: 24, md: 24, sm: 24, xs: 24 }
+        }
+      }
+    }
+  };
+  initST() {
+    this.columns = [
+      { title: '部门', index: 'department', className: 'text-center', width: '150px' },
+      { title: '业务员', index: 'salesmen', className: 'text-center', width: '150px' },
+      {
+        title: '已认证货主数',
+        index: 'certifiedCount',
+        className: 'text-center',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 1 ? false : true;
+        }
+      },
+      {
+        title: '已认证合伙人',
+        index: 'certifiedCount',
+        className: 'text-center',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 2 ? false : true;
+        }
+      },
+      {
+        title: '新增合伙人数',
+        index: 'addCount',
+        className: 'text-center',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 2 ? false : true;
+        }
+      },
+      {
+        title: '合伙人活跃率',
+        index: 'alivePer',
+        className: 'text-center',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 2 ? false : true;
+        }
+      },
+      {
+        title: '活跃合伙人数',
+        index: 'aliveCount',
+        className: 'text-center',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 2 ? false : true;
+        }
+      },
+      {
+        title: '沉默合伙人数',
+        index: 'silentCount',
+        className: 'text-center',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 2 ? false : true;
+        }
+      },
+      {
+        title: '流失合伙人数',
+        index: 'drainCount',
+        className: 'text-center',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 2 ? false : true;
+        }
+      },
+      {
+        title: '未激活合伙人数',
+        index: 'notActiveCount',
+        className: 'text-center',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 2 ? false : true;
+        }
+      },
+
+      {
+        title: '新增货主数',
+        index: 'addCount',
+        className: 'text-center',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 1 ? false : true;
+        }
+      },
+      {
+        title: '货主活跃率',
+        index: 'alivePer',
+        className: 'text-center',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 1 ? false : true;
+        }
+      },
+      {
+        title: '活跃货主数',
+        index: 'aliveCount',
+        className: 'text-center',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 1 ? false : true;
+        }
+      },
+      {
+        title: '沉默货主数',
+        index: 'silentCount',
+        className: 'text-center',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 1 ? false : true;
+        }
+      },
+      {
+        title: '流失货主数',
+        index: 'drainCount',
+        className: 'text-right',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 1 ? false : true;
+        }
+      },
+      {
+        title: '未激活货主数',
+        index: 'notActiveCount',
+        className: 'text-center',
+        width: '150px',
+        iif: () => {
+          return this?.resourceStatus !== 1 ? false : true;
+        }
+      }
+    ];
+  }
+  /**
+   * 查询参数
+   */
+  get reqParams() {
+    if (this.mode === 'year') {
+      this.type = 1;
+    } else if (this.mode === 'month') {
+      this.type = 2;
+    } else if (this.mode === 'date') {
+      this.type = 3;
+    } else {
+      this.type = 4;
+    }
+    let params: any = {
+      time: this.time,
+      type: this.type,
+      parType: this.resourceStatus,
+      ...this.sf?.value
+    };
+
+    delete params._$expand;
+    delete params.sort;
+    return { ...params };
+  }
+  constructor(public service: DataService, private datePipe: DatePipe) {}
+  ngOnInit(): void {
+    this.initSF();
+    this.initST();
+  }
+  /**
+   * 初始化查询表单
+   */
+  initSF() {
+    this.schema = {
+      properties: {
+        _$expand: { type: 'boolean', ui: { hidden: true } },
+        enterpriseName: {
+          type: 'string',
+          title: '货主名称',
+          ui: {
+            placeholder: '请输入'
+          }
+        },
+        customerType: {
+          type: 'string',
+          title: '客户类型',
+          ui: {
+            widget: 'select',
+            placeholder: '请选择'
+          },
+          enum: [
+            { label: '直客', value: 2 },
+            { label: '渠道客户', value: 3 },
+            { label: '平台客户', value: 1 }
+          ]
+        },
+        customerStatus: {
+          type: 'string',
+          title: '客户状态',
+          ui: {
+            widget: 'select',
+            placeholder: '请选择'
+          },
+          enum: [
+            { label: '未激活', value: 1 },
+            { label: '沉默', value: 2 },
+            { label: '流失', value: 3 },
+            { label: '活跃', value: 4 }
+          ]
+        },
+        registerTime: {
+          title: '注册时间',
+          type: 'string',
+          ui: {
+            widget: 'sl-from-to',
+            type: 'date',
+            format: 'yyyy-MM-dd',
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            }
+          } as SFDateWidgetSchema
+        }
+      },
+      type: 'object'
+    };
+    this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
+  }
+  changeData() {
+    if (this.mode === 'year') {
+      this.dateFormat = 'yyyy';
+    } else if (this.mode === 'month') {
+      this.dateFormat = 'yyyy-MM';
+    } else {
+      this.dateFormat = 'yyyy-MM-dd';
+    }
+  }
+  onChange(result: any) {
+    if (result === null) {
+      return;
+    }
+    if (this.mode === 'year') {
+      this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00'];
+    } else if (this.mode === 'month') {
+      this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00'];
+    } else if (this.mode === 'date') {
+      this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00'];
+    } else {
+      this.time = [
+        this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00',
+        this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00'
+      ];
+    }
+    this.st.reload({ ...this.reqParams });
+  }
+  disabledDate = (current: Date): boolean =>
+    // Can not select days before today and today
+    differenceInCalendarDays(current, this.today) > 0;
+
+  export() {
+    // this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {});
+  }
+  search() {
+    this.st?.load(1);
+  }
+  /**
+   * 伸缩查询条件
+   */
+  expandToggle() {
+    this._$expand = !this._$expand;
+    this.sf?.setValue('/_$expand', this._$expand);
+  }
+
+  /**
+   * 重置表单
+   */
+  resetSF() {
+    this.sf.reset();
+    this._$expand = false;
+    this.isLoading = true;
+  }
+  selectChange(e: number) {
+    console.log(e);
+    this.resourceStatus = e + 1;
+    setTimeout(() => {
+      this.st?.resetColumns();
+      this.st?.load(1);
+    }, 500);
+  }
+}

src/app/routes/datatable/components/customtable/owner/owner.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]="['owner-search']">查询</button>
+          <button nz-button (click)="resetSF()">重置</button>
+          <!-- <button nz-button (click)="export()">导出</button> -->
+          <button nz-button nzType="link" (click)="expandToggle()">
+            {{ !_$expand ? '展开' : '收起' }}
+            <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
+          </button>
+        </div>
+      </ng-container>
+    </div>
+</nz-card>
+<nz-card nzTitle="货主报表" [nzExtra]="extraTemplate">
+  <ng-template #extraTemplate>
+    <div class="chooseBox">
+      <div class="timeBox">
+        <nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
+          <label nz-radio-button nzValue="year">年</label>
+          <label nz-radio-button nzValue="month">月</label>
+          <label nz-radio-button nzValue="date">日</label>
+          <label nz-radio-button nzValue="define">自定义</label>
+        </nz-radio-group>
+        <div class="dateBox">
+          <nz-date-picker [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" *ngIf="mode !== 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-date-picker>
+          <nz-range-picker [(ngModel)]="defineDate" [nzFormat]="dateFormat" *ngIf="mode === 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-range-picker>
+        </div>
+
+      </div>
+    </div>
+  </ng-template>
+  <st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listShipperReportPage"
+    [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
+    [scroll]="{ x: '1200px' }" [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
+    [page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }">
+  </st>
+</nz-card>

src/app/routes/datatable/components/customtable/owner/owner.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/owner/owner.component.spec.ts

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

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

@@ -0,0 +1,190 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { STColumn, STComponent } from '@delon/abc/st';
+import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
+import {  DatePipe, _HttpClient } from '@delon/theme';
+import { differenceInCalendarDays } from 'date-fns';
+import { DataService } from '../../../services/data.service';
+
+@Component({
+  selector: 'app-datatable-owner',
+  templateUrl: './owner.component.html',
+  styleUrls: ['./owner.component.less'],
+  providers: [DatePipe]
+})
+export class DatatableOwnerComponent implements OnInit {
+  @ViewChild('st', { static: false }) st!: STComponent;
+  @ViewChild('sf', { static: false }) sf!: SFComponent;
+  _$expand = false;
+  type = 1;
+  mode = 'year';
+  date: any = null;
+  defineDate = [];
+  time: any = ['2022-01-01 00:00:00']
+  dateFormat = 'yyyy';
+  today = new Date();
+  ui: SFUISchema = {};
+  schema: SFSchema = {};
+  isLoading: boolean = false;
+ 
+  columns: STColumn[] = [
+    { title: '货主名称', index: 'enterpriseName', className: 'text-center', width: '200px' },
+    { title: '注册时间', index: 'registerTime', className: 'text-center', width: '200px' },
+    { title: '客户类型', index: 'customerType', className: 'text-center', width: '100px', type: 'enum', enum: {
+      1: '平台客户',
+      2: '直客',
+      3: '渠道客户'
+    }
+   },
+    { title: '业务员', index: 'salesmanName', className: 'text-center', width: '100px' },
+    { title: '合伙人', index: 'partnerName', className: 'text-center', width: '100px' },
+    { title: '客户状态', index: 'customerStatus', className: 'text-center', width: '100px', type: 'enum', enum: {
+      1: '未激活',
+      2: '流失',
+      3: '活跃',
+      4: '沉默'
+    } },
+    { title: '订单数', index: 'zsl', className: 'text-center', width: '100px' },
+    { title: '订单金额', index: 'ddje', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.ddje }) } },
+    { title: '应收订单数', index: 'ysdds', className: 'text-center', width: '120px' },
+    { title: '应收金额', index: 'yingsje', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yingsje }) } },
+    { title: '待开票订单数', index: 'yifyf', className: 'text-center', width: '130px' },
+    { title: '待开票金额', index: 'dkpdds', className: 'text-right', width: '120px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.dkpdds }) } },
+    { title: '已收金额', index: 'yisje', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yisje }) } },
+    { title: '应收附加费', index: 'yingsfjf', className: 'text-right', width: '120px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yingsfjf }) } },
+    { title: '已收附加费', index: 'yisfjf', className: 'text-right', width: '120px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yisfjf }) } },
+    { title: '附加费率', index: 'fjfl', className: 'text-center', width: '100px' },
+    { title: '已开票金额', index: 'ykpje', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.ykpje }) } },
+  ];
+  /**
+   * 查询参数
+   */
+   get reqParams() {
+    if(this.mode === 'year') {
+      this.type = 1
+    } else if(this.mode === 'month') {
+      this.type = 2
+    } else if(this.mode === 'date') {
+      this.type = 3
+    } else {
+      this.type = 4
+    }
+    let params: any = {
+      time: this.time,
+      type: this.type,
+      ...this.sf?.value
+     };
+  
+    delete params._$expand;
+    return { ...params };
+  }
+  constructor(public service: DataService, private datePipe: DatePipe) { }
+  ngOnInit(): void { 
+    this.initSF();
+  }
+ /**
+   * 初始化查询表单
+   */
+  initSF() {
+    this.schema = {
+      properties: {
+        _$expand: { type: 'boolean', ui: { hidden: true } },
+        enterpriseName: {
+          type: 'string',
+          title: '货主名称',
+          ui: {
+            placeholder: '请输入',
+          }
+        },
+        customerType: {
+          type: 'string',
+          title: '客户类型',
+          ui: {
+            widget: 'select',
+            placeholder: '请选择',
+          },
+          enum: [
+            {label: '直客', value: 2},
+            {label: '渠道客户', value: 3},
+            {label: '平台客户', value: 1},
+          ]
+        },
+        customerStatus: {
+          type: 'string',
+          title: '客户状态',
+          ui: {
+            widget: 'select',
+            placeholder: '请选择',
+          },
+          enum: [
+            {label: '未激活', value: 1},
+            {label: '流失', value: 2},
+            {label: '活跃', value: 3},
+            {label: '沉默', value: 4},
+          ]
+        },
+        registerTime: {
+          title: '注册时间',
+          type: 'string',
+          ui: {
+            widget: 'sl-from-to', type: 'date', format: 'yyyy-MM-dd', visibleIf: {
+              _$expand: (value: boolean) => value,
+            },
+          } as SFDateWidgetSchema,
+        }
+      },
+      type: 'object'
+    };
+    this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
+  }
+  changeData(){
+    if(this.mode === 'year') {
+      this.dateFormat = 'yyyy'
+    } else if(this.mode === 'month') {
+      this.dateFormat = 'yyyy-MM'
+    } else {
+      this.dateFormat = 'yyyy-MM-dd'
+    } 
+  }
+  onChange(result: any) {
+    if(result === null) {
+      return
+    }
+    if(this.mode === 'year') {
+      this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
+    } else if(this.mode === 'month') {
+      this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
+    } else if(this.mode === 'date') {
+      this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00']
+    } else{
+      this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + ' 00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00']
+    }
+    this.st.reload({ ...this.reqParams });
+  }
+  disabledDate = (current: Date): boolean =>
+    // Can not select days before today and today
+    differenceInCalendarDays(current, this.today) > 0;
+
+    export() {
+      // this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {});
+    }
+  search() {
+    this.st?.load(1)
+
+  }
+    /**
+   * 伸缩查询条件
+   */
+     expandToggle() {
+      this._$expand = !this._$expand;
+      this.sf?.setValue('/_$expand', this._$expand);
+    }
+  
+  /**
+   * 重置表单
+   */
+   resetSF() {
+    this.sf.reset();
+    this._$expand = false;
+    this.isLoading = true
+  }
+}

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

@@ -0,0 +1,43 @@
+<!-- <page-header [title]="'订单管理'"> </page-header> -->
+<nz-card [nzBordered]="false">
+  <!-- 搜索表单 -->
+  <div nz-row nzGutter="8">
+    <!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
+    <div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
+        <sf #sf mode="search" [schema]="schema" [button]="'none'">
+          <button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="isLoading && st.loading"
+            (click)="st?.load(1)" acl [acl-ability]="['partnertable-search']">查询</button>
+          <button nz-button (click)="resetSF()">重置</button>
+        </sf>
+    </div>
+
+    <!-- 查询字段大于3个时，根据展开状态调整布局 -->
+    <ng-container *ngIf="queryFieldCount > 4">
+      <div nz-col [nzSpan]="_$expand ? 24 : 18">
+        <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
+      </div>
+      <div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
+        <button nz-button nzType="primary" [disabled]="!sf.valid" [nzLoading]="isLoading && st.loading"
+          (click)="st?.load(1)" acl [acl-ability]="['partnertable-search']">查询</button>
+        <button nz-button (click)="resetSF()">重置</button>
+        <button nz-button nzType="link" (click)="expandToggle()">
+          {{ !_$expand ? '展开' : '收起' }}
+          <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
+        </button>
+      </div>
+    </ng-container>
+  </div>
+
+</nz-card>
+<nz-card>
+  <div class="list-table-header-btn">
+    <!-- <button nz-button nzType="default" (click)="gotoInviteRecord()">员工邀请记录</button> -->
+  </div>
+  <!-- 数据列表 -->
+  <st #st multiSort bordered [data]="service.$api_listOperationalReportPage" [columns]="columns" [ps]="20"
+    [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
+    [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
+    [page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }">
+  </st>
+
+</nz-card>

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

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

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

@@ -0,0 +1,151 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { STChange, STColumn, STComponent, STData } from '@delon/abc/st';
+import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
+import { ModalHelper } from '@delon/theme';
+import { EAEnvironmentService } from '@shared';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { DataService } from '../../../services/data.service';
+
+@Component({
+  selector: 'app-datatable-partnertable',
+  templateUrl: './partnertable.component.html'
+})
+export class DatatablePartnertableComponent implements OnInit {
+  @ViewChild('st', { static: false }) st!: STComponent;
+  @ViewChild('sf', { static: false }) sf!: SFComponent;
+  _$expand = false;
+  ui!: SFUISchema;
+  schema!: SFSchema;
+  phone = '';
+  columns!: STColumn[];
+  isLoading: boolean = false;
+
+  constructor(
+    public service: DataService,
+    private modalSrv: NzModalService,
+    private modal: ModalHelper,
+    private envSrv: EAEnvironmentService
+  ) {}
+
+  /**
+   * 查询字段个数
+   */
+  get queryFieldCount(): number {
+    return Object.keys(this.schema?.properties || {}).length;
+  }
+
+  /**
+   * 查询参数
+   */
+  get reqParams() {
+    const params = Object.assign({}, this.sf?.value || {});
+    delete params._$expand;
+    return { ...params };
+  }
+
+  /**
+   * 选中行
+   */
+  get selectedRows() {
+    return this.st?.list.filter(item => item.checked) || [];
+  }
+
+  /**
+   * 伸缩查询条件
+   */
+  expandToggle() {
+    this._$expand = !this._$expand;
+    this.sf?.setValue('/_$expand', this._$expand);
+  }
+  /**
+   * 重置表单
+   */
+  resetSF() {
+    this.sf.reset();
+    this._$expand = false;
+    this.isLoading = true;
+  }
+  /**
+   * 程序初始化入口
+   */
+  ngOnInit() {
+    this.initSF();
+    this.initST();
+  }
+
+  /**
+   * 初始化查询表单
+   */
+  initSF() {
+    this.schema = {
+      properties: {
+        _$expand: { type: 'boolean', ui: { hidden: true } },
+        name: {
+          title: '合伙人名称',
+          type: 'string',
+          ui: { placeholder: '请输入' },
+          readOnly: false
+        },
+        phone: {
+          title: '合伙人类型',
+          type: 'string',
+          ui: {
+            widget: 'select',
+            placeholder: '请输入'
+          },
+          readOnly: false
+        },
+        phone01: {
+          title: '合伙人状态',
+          type: 'string',
+          ui: {
+            widget: 'select',
+            placeholder: '请输入'
+          },
+          readOnly: false
+        },
+        createTime: {
+          type: 'string',
+          title: '注册时间',
+          ui: { widget: 'sl-from-to', type: 'date', format: 'yyyy-MM-dd', visibleIf: {
+            _$expand: (value: boolean) => value,
+          }, } as SFDateWidgetSchema
+        }
+      },
+      type: 'object'
+    };
+    this.ui = { '*': { spanLabelFixed: 120, grid: { span: 8, gutter: 4 }, enter: () => this.st?.load(1) } };
+  }
+
+  /**
+   * 初始化数据列表
+   */
+  initST() {
+    this.columns = [
+      { title: '合伙人名称', index: 'networkTransporterName', className: 'text-center' },
+      { title: '注册时间', index: 'telephone', className: 'text-center' },
+      { title: '注册时间', index: 'roleName', className: 'text-center' },
+      { title: '业务员', index: 'lastLoginDate', className: 'text-center' },
+      {
+        title: '合伙人状态',
+        index: 'stateLocked',
+        className: 'text-center',
+        type: 'enum',
+        enum: { 0: '正常', 1: '冻结' }
+      },
+      { title: '客户数', index: 'lastLoginDate', className: 'text-center' },
+      { title: '收益额', index: 'lastLoginDate', className: 'text-center' },
+      { title: '已提现金额', index: 'lastLoginDate', className: 'text-center' },
+      { title: '订单数', index: 'lastLoginDate', className: 'text-center' },
+      { title: '订单金额', index: 'lastLoginDate', className: 'text-center' },
+      { title: '应收订单数', index: 'lastLoginDate', className: 'text-center' }
+    ];
+  }
+
+  /**
+   * 数据列表状态变化事件
+   */
+  change(change: STChange) {
+    // console.log(change);
+  }
+}

src/app/routes/datatable/components/dataindex/dataindex.component.html

@@ -0,0 +1,74 @@
+<!-- 页头 -->
+<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
+<div nz-row [nzGutter]="16">
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'客户预存款总额'" [bordered]="true" [total]="totalAdvanceDeposit?.totalAmount || '¥ 0.00万'"
+      [footer]="AdvanceDepositFooter" contentHeight="46">
+      <ng-template #AdvanceDepositFooter>
+        <g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []"
+          (clickItem)="handleClick($event)">
+        </g2-mini-area>
+      </ng-template>
+    </g2-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'业绩量总额'" [bordered]="true" [total]="totalPerformanceVolume?.totalAmount || '¥ 0.00万'"
+      [footer]="PerformanceVolumeFooter" contentHeight="46">
+      <ng-template #PerformanceVolumeFooter>
+        <g2-mini-area line color="#cceafe" height="45" [data]="totalPerformanceVolume?.list || []"
+          (clickItem)="handleClick($event)">
+        </g2-mini-area>
+      </ng-template>
+    </g2-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'司机应付总额'" [bordered]="true" [total]="totalFreight?.totalAmount || '¥ 0.00万'" [footer]="footer"
+      contentHeight="46">
+      <ng-template #footer>
+        <g2-mini-area line color="#cceafe" height="45" [data]="totalFreight?.list || []"
+          (clickItem)="handleClick($event)">
+        </g2-mini-area>
+      </ng-template>
+    </g2-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'附加费总额'" [bordered]="true" [total]="totalSurcharge?.totalAmount || '¥ 0.00万'"
+      [footer]="SurchargeFooter" contentHeight="46">
+      <ng-template #SurchargeFooter>
+        <g2-mini-area line color="#cceafe" height="45" [data]="totalSurcharge?.list || []"
+          (clickItem)="handleClick($event)">
+        </g2-mini-area>
+      </ng-template>
+    </g2-card>
+  </div>
+</div>
+<div nz-row [nzGutter]="16">
+  <div nz-col class="gutter-row" [nzSpan]="12">
+    <nz-card [nzTitle]="'订单类型比例'">
+      <g2-custom #g2custom delay="100"></g2-custom>
+    </nz-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="12">
+    <nz-card [nzTitle]="'大区业绩完成情况'">
+      <!-- <g2-timeline [data]="chartData" [titleMap]="{ y1: '订单金额（元）', y2: '' }" [height]="200" mask="MM月DD日"
+        [slider]="false"></g2-timeline> -->
+      <g2-custom #RegionalPerforman delay="100"></g2-custom>
+    </nz-card>
+  </div>
+</div>
+<div nz-row [nzGutter]="16">
+  <div nz-col class="gutter-row" [nzSpan]="12">
+    <nz-card [nzTitle]="'运单直付比例'">
+      <!-- <g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
+        (clickItem)="handleClick($event)" [lineWidth]="10">
+      </g2-pie> -->
+      <g2-custom #BillDirectProportion delay="100"></g2-custom>
+    </nz-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="12">
+    <nz-card [nzTitle]="'业绩完成情况'">
+      <g2-bar  [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar>
+
+    </nz-card>
+  </div>
+</div>

src/app/routes/datatable/components/dataindex/dataindex.component.spec.ts

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

src/app/routes/datatable/components/dataindex/dataindex.component.ts

@@ -0,0 +1,386 @@
+import { ChangeDetectorRef, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { ModalHelper, _HttpClient } from '@delon/theme';
+import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
+import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie';
+import { format } from 'date-fns';
+import { DataService } from '../../services/data.service';
+import { Chart, registerShape, Util } from '@antv/g2';
+import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
+import { CurrencyPipe } from '@angular/common';
+import { LOGS } from '_mock';
+import { G2CustomComponent } from '@delon/chart/custom';
+
+@Component({
+  selector: 'app-datatable-dataindex',
+  templateUrl: './dataindex.component.html',
+  styleUrls: ['./dataindex.component.less'],
+  providers: [CurrencyPipe]
+})
+export class DatatableDataindexComponent implements OnInit {
+  @ViewChild('g2custom', { static: false }) g2custom!: G2CustomComponent;
+  @ViewChild('RegionalPerforman', { static: false }) RegionalPerforman!: G2CustomComponent;
+  @ViewChild('BillDirectProportion', { static: false }) BillDirectProportion!: G2CustomComponent;
+  salesData: any[] = [];
+
+  totalAdvanceDeposit: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
+  totalPerformanceVolume: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
+  totalFreight: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
+  totalSurcharge: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
+
+  billTypeDatas: any = [
+    { item: '货源单', count: 0, percent: 0 },
+    { item: '合同单', count: 0, percent: 0 }
+  ];
+
+  regionalPerformanceCompletion: DataPerformanceTrendVO[] = [];
+
+  constructor(private service: DataService, private currency: CurrencyPipe) {}
+
+  ngOnInit(): void {
+    this.initMiniAreaData();
+    this.initOthersData();
+  }
+
+  private initMiniAreaData() {
+    // 客户预存款总额
+    this.service.request(this.service.$api_total_advance_deposit).subscribe((res: DataTotalVO) => {
+      if (res) {
+        this.totalAdvanceDeposit = this.formatMiniAreaData(res);
+      }
+    });
+    // 业绩量总额
+    this.service.request(this.service.$api_total_performance_volume).subscribe((res: DataTotalVO) => {
+      if (res) {
+        this.totalPerformanceVolume = this.formatMiniAreaData(res);
+      }
+    });
+    // 司机应付总额
+    this.service.request(this.service.$api_total_freight).subscribe((res: DataTotalVO) => {
+      if (res) {
+        this.totalFreight = this.formatMiniAreaData(res);
+      }
+    });
+    // 业绩量总额
+    this.service.request(this.service.$api_total_surcharge).subscribe((res: DataTotalVO) => {
+      if (res) {
+        this.totalSurcharge = this.formatMiniAreaData(res);
+      }
+    });
+  }
+
+  private initOthersData() {
+    // 订单类型比例
+    this.service.request(this.service.$api_getBillTypeProportion).subscribe(res => {
+      if (res) {
+        this.billTypeDatas = this.formatCoordinateData(res);
+        this.initBillChart(this.g2custom['el'].nativeElement as any);
+      }
+    });
+    // 大区业绩完成情况
+    this.service.request(this.service.$api_getBillAmount).subscribe((res: DataPerformanceTrendVO[]) => {
+      if (res) {
+        this.regionalPerformanceCompletion = res.map(item => ({ ...item, time: new Date(item.time)?.getTime() }));
+        this.initRegionalPerformanceChart(this.RegionalPerforman['el'].nativeElement as any, this.regionalPerformanceCompletion);
+      }
+    });
+    // 订单类型比例
+    this.service.request(this.service.$api_getWayBillDirectProportion).subscribe(res => {
+      if (res) {
+        const billTypeDatas = this.formatCoordinateData(res.map((item: any) => ({ ...item, billType: item.wayBillType })));
+        this.initBillChart(this.BillDirectProportion['el'].nativeElement as any, billTypeDatas);
+      }
+    });
+    // 统计订单结算金额-趋势
+    this.service.request(this.service.$api_get_bill_payment_amount).subscribe(res => {
+      if (res) {
+        this.salesData = this.formatBarData(res);
+      }
+    });
+  }
+
+  handleClick(data: G2MiniAreaClickItem): void {
+    this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
+  }
+
+  /**
+   * 构建订单类型秘鲁图
+   * @param el
+   */
+  private initBillChart(el: HTMLElement, datas?: any[]): void {
+    const data = datas || this.billTypeDatas;
+
+    const chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 400
+    });
+    // 新建一个 view 用来单独渲染Annotation
+    const innerView = chart.createView();
+    chart.coordinate('theta', {
+      radius: 0.6,
+      innerRadius: 0.7
+    });
+
+    chart.data(data);
+
+    chart.scale('percent', {
+      formatter: val => {
+        val = val * 100 + '%';
+        return val;
+      }
+    });
+
+    chart.tooltip(false);
+
+    // 声明需要进行自定义图例字段： 'item'
+    chart.legend('item', {
+      position: 'right', // 配置图例显示位置
+      custom: true, // 关键字段，告诉 G2，要使用自定义的图例
+      items: data.map((obj: any, index: any) => {
+        return {
+          name: obj.item, // 对应 itemName
+          value: obj.percent, // 对应 itemValue
+          marker: {
+            symbol: 'square', // marker 的形状
+            style: {
+              r: 5, // marker 图形半径
+              fill: chart.getTheme().colors10[index] // marker 颜色，使用默认颜色，同图形对应
+            }
+          } // marker 配置
+        };
+      }),
+      itemValue: {
+        style: {
+          fill: '#999'
+        }, // 配置 itemValue 样式
+        formatter: (val: any) => `${val * 100}%` // 格式化 itemValue 内容
+      }
+    });
+
+    chart
+      .interval()
+      .adjust('stack')
+      .position('percent')
+      .color('item')
+      .style({
+        fillOpacity: 1,
+        stroke: 'white',
+        lineWidth: 8
+      })
+      .state({
+        active: {
+          style: element => {
+            const shape = element.shape;
+            return {
+              lineWidth: 1,
+              stroke: 'white',
+              strokeOpacity: shape.attr('fillOpacity')
+            };
+          }
+        }
+      });
+
+    innerView
+      .annotation()
+      .text({
+        position: ['50%', '50%'],
+        content: data[0].item,
+        style: {
+          fontSize: 20,
+          fill: '#8c8c8c',
+          textAlign: 'center'
+        },
+        offsetY: -20
+      })
+      .text({
+        position: ['50%', '50%'],
+        content: data[0].count,
+        style: {
+          fontSize: 28,
+          fill: '#8c8c8c',
+          textAlign: 'center'
+        },
+        offsetY: 20
+      });
+    innerView.render(true);
+
+    // 移除图例点击过滤交互
+    chart.removeInteraction('legend-filter');
+    chart.interaction('element-active');
+
+    chart.render();
+
+    // 监听 element 上状态的变化来动态更新 Annotation 信息
+    chart.on('element:statechange', (ev: any) => {
+      const { state, stateStatus, element } = ev.gEvent.originalEvent;
+
+      // 本示例只需要监听 active 的状态变化
+      if (state === 'active') {
+        const data = element.getData();
+        if (stateStatus) {
+          // 更新 Annotation
+          updateAnnotation(data);
+        } else {
+          // 隐藏 Annotation
+          // clearAnnotation();
+        }
+      }
+    });
+
+    // 绘制 annotation
+    let lastItem: any;
+    function updateAnnotation(data: any) {
+      if (data.item !== lastItem) {
+        innerView.annotation().clear(true);
+        innerView
+          .annotation()
+          .text({
+            position: ['50%', '50%'],
+            content: data.item,
+            style: {
+              fontSize: 20,
+              fill: '#8c8c8c',
+              textAlign: 'center'
+            },
+            offsetY: -20
+          })
+          .text({
+            position: ['50%', '50%'],
+            content: data.count,
+            style: {
+              fontSize: 28,
+              fill: '#8c8c8c',
+              textAlign: 'center'
+            },
+            offsetY: 20
+          });
+        innerView.render(true);
+        lastItem = data.item;
+      }
+    }
+
+    // 清空 annotation
+    function clearAnnotation() {
+      innerView.annotation().clear(true);
+      innerView.render(true);
+      lastItem = null;
+    }
+  }
+
+  private initRegionalPerformanceChart(el: HTMLElement, data: DataPerformanceTrendVO[]) {
+    const chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 400
+    });
+
+    chart.data(data);
+    chart.scale({
+      time: {
+        alias: '日期',
+        type: 'time'
+      },
+      quantity: {
+        alias: '金额',
+        min: 0,
+        sync: true, // 将 pv 字段数值同 time 字段数值进行同步
+        nice: true
+      }
+    });
+
+    chart.axis('quantity', {
+      title: {}
+    });
+
+    chart.tooltip({
+      showCrosshairs: true,
+      shared: true
+    });
+
+    // 声明需要进行自定义图例字段： 'item'
+    chart.legend({
+      offsetY: 10,
+      position: 'bottom', // 配置图例显示位置
+      custom: true, // 关键字段，告诉 G2，要使用自定义的图例
+      items: [
+        {
+          name: '订单金额 （元）', // 对应 itemName
+          value: '' // 对应 itemValue
+        }
+      ],
+      itemValue: {
+        style: {
+          fill: '#999'
+        } // 配置 itemValue 样式
+      }
+    });
+
+    chart.line().position('time*quantity').color('#4FAAEB');
+    chart.render();
+  }
+
+  private formatMiniAreaData(data: DataTotalVO) {
+    return {
+      totalAmount: `${this.currency.transform(data.totalAmount || 0)}万`,
+      list: data.list?.map(item => ({
+        x: item.time,
+        y: item.quantity
+      }))
+    };
+  }
+
+  private formatCoordinateData(data: DataBillTypeProportion[]): any[] {
+    const total = data.map(item => item.quantity).reduce((pre, next) => pre + next);
+    const rs: any[] = [];
+    data.forEach(item => {
+      rs.push({
+        item: (BILLTYPE as any)[item.billType],
+        count: item.quantity,
+        percent: Number((item.quantity / total).toFixed(2))
+      });
+    });
+    return rs;
+  }
+
+  private formatBarData(data: DataPerformanceTrendVO[]): any[] {
+    return data.map(item => ({
+      x: item.time,
+      y: item.quantity,
+      color: '#f50'
+    }));
+  }
+
+  private genData(): G2MiniAreaData[] {
+    const beginDay = new Date().getTime();
+    const res: G2MiniAreaData[] = [];
+    for (let i = 0; i < 20; i += 1) {
+      res.push({
+        x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
+        y: Math.floor(Math.random() * 100) + 10
+      });
+    }
+    return res;
+  }
+}
+
+interface DataTotalVO {
+  totalAmount: number;
+  list: DataPerformanceTrendVO[];
+}
+
+interface DataPerformanceTrendVO {
+  quantity: number;
+  time: number;
+}
+
+interface DataBillTypeProportion {
+  billType: BILLTYPE;
+  quantity: number;
+}
+
+enum BILLTYPE {
+  'HY' = '货源单',
+  'HT' = '合同单',
+  'ZF' = '直付',
+  'CDZ' = '车队长'
+}

src/app/routes/datatable/components/dataindex/dataindex_line/dataindex_line.component.html

@@ -0,0 +1,69 @@
+<!-- 页头 -->
+<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
+<div nz-row [nzGutter]="16">
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'客户预存款总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
+      <ng-template #footer>
+        <g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
+        </g2-mini-area>
+      </ng-template>
+    </g2-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'业绩量总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
+      <ng-template #footer>
+        <g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
+        </g2-mini-area>
+      </ng-template>
+    </g2-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'司机应付总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
+      <ng-template #footer>
+        <g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
+        </g2-mini-area>
+      </ng-template>
+    </g2-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <g2-card [title]="'附加费总额'" [bordered]="true" [total]="'¥ 126,560.00'" [footer]="footer" contentHeight="46">
+      <ng-template #footer>
+        <g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)">
+        </g2-mini-area>
+      </ng-template>
+    </g2-card>
+  </div>
+</div>
+<div nz-row [nzGutter]="16">
+  <div nz-col class="gutter-row" [nzSpan]="12">
+    <nz-card [nzTitle]="'订单类型比例'">
+      <g2-custom delay="100" (render)="render($event)"></g2-custom>
+    </nz-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="12">
+    <nz-card [nzTitle]="'大区业绩完成情况'">
+      <g2-timeline
+    [data]="chartData"
+    [titleMap]="{ y1: '客流量', y2: '支付笔数' }"
+    [height]="200"
+    mask="MM月DD日"
+    [slider]="false"
+  ></g2-timeline>
+    </nz-card>
+  </div>
+</div>
+<div nz-row [nzGutter]="16">
+  <div nz-col class="gutter-row" [nzSpan]="12">
+    <nz-card [nzTitle]="'运单直付比例'">
+      <g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
+      (clickItem)="handleClick($event)" [lineWidth]="10">
+      </g2-pie>
+    </nz-card>
+  </div>
+  <div nz-col class="gutter-row" [nzSpan]="12">
+    <nz-card [nzTitle]="'业绩完成情况'">
+      <g2-bar height="200" [title]="'销售额趋势'" [data]="salesData" (clickItem)="handleClick($event)"></g2-bar>
+
+    </nz-card>
+  </div>
+</div>

src/app/routes/datatable/components/dataindex/dataindex_line/dataindex_line.component.spec.ts

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