Merge branch 'develop' of https://gitlab.eascs.com/tms-ui/tms-obc-web into develop

proxy.conf.js

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-01-18 09:51:21
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-01 14:41:31
+ * @LastEditTime : 2022-04-06 16:45:43
  * @FilePath     : \\tms-obc-web\\proxy.conf.js
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -20,7 +20,7 @@ module.exports = {
   // }
   '//api': {
     target: {
-      host: 'tms-api-test.eascs.com',
+      host: 'tms-api-dev.eascs.com',
       protocol: 'https:',
       port: 443
     },

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

@@ -1,3 +1,13 @@
+/*
+ * @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';
@@ -36,6 +46,7 @@ export class DatatableCustomindexCurveComponent implements OnInit, OnChanges {
     setTimeout(() => {
       this.ngZone.runOutsideAngular(() => this.init(this.el));
       },500)
+    console.log(this.chartData);
   }
 
   private init(el: HTMLElement): void {

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

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-04-06 13:20:56
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-06 15:00:01
+ * @LastEditTime : 2022-04-06 20:24:20
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\customtable\\customindex\\customindex.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
@@ -12,19 +12,19 @@
 <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" [footer]="'已认证' + hzData?.auditPassTotal" contentHeight="46">
+    <g2-card [title]="'货主'" [bordered]="true" [total]="hzData?.total" [footer]="'已认证' + ' ' + hzData?.auditPassTotal" contentHeight="46">
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'合伙人'" [bordered]="true" [total]="hhrData?.total" [footer]="'已认证' + hhrData?.auditPassTotal" contentHeight="46">
+    <g2-card [title]="'合伙人'" [bordered]="true" [total]="hhrData?.total" [footer]="'已认证' + ' ' + hhrData?.auditPassTotal" contentHeight="46">
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'司机'" [bordered]="true" [total]="sjData?.total" [footer]="'已认证' + sjData?.auditPassTotal" contentHeight="46">
+    <g2-card [title]="'司机'" [bordered]="true" [total]="sjData?.total" [footer]="'已认证' + ' ' + sjData?.auditPassTotal" contentHeight="46">
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'车辆'" [bordered]="true" [total]="clData?.total" [footer]="'已认证' + clData?.auditPassTotal" contentHeight="46">
+    <g2-card [title]="'车辆'" [bordered]="true" [total]="clData?.total" [footer]="'已认证'  + ' '+ clData?.auditPassTotal" contentHeight="46">
     </g2-card>
   </div>
 </div>
@@ -64,12 +64,11 @@
     [columns]="columns"
     [ps]="20"
     [data]="reportData"
-    [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
     [scroll]="{ x: '1200px' }"
     [res]="{ reName: { list: 'data', total: 'data.total' } }"
     [page]="{ show: false, showSize: false, pageSizes: [20, 50, 100] }"
   >
-  <ng-template sf-template="type" let-item>
+  <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>
@@ -77,11 +76,11 @@
   </ng-template>
 </st>
 </nz-card>
-<nz-card nzTitle="用户新增报表" [nzExtra]="extraTemplate">
+<nz-card nzTitle="用户新增报表" [nzExtra]="extraTemplate01">
   <ng-template #extraTemplate01>
     <div class="chooseBox">
       <div class="timeBox">
-        <nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext()">
+        <nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext2()">
           <label nz-radio-button nzValue="year">年</label>
           <label nz-radio-button nzValue="month">月</label>
         </nz-radio-group>
@@ -96,5 +95,5 @@
       </div>
     </div>
   </ng-template>
-  <app-datatable-customindex-curve #curve [chartData]="chartData?.lineChart"></app-datatable-customindex-curve>
+  <app-datatable-customindex-curve #curve [chartData]="chartData"></app-datatable-customindex-curve>
 </nz-card>

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

@@ -1,5 +1,6 @@
 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';
@@ -13,29 +14,31 @@ import { DatatableCustomindexCurveComponent } from './curve/curve.component';
 })
 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 = [];
-  time: any = ['2022-01-01 00:00:00'];
+  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;
+  chartData: any = [];
   flag = false;
 
   columns: STColumn[] = [
     { title: '用户类型', render: 'type', className: 'text-center' },
-    { title: '用户总数', index: '总数', 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' }
+    { title: '流失率', index: 'drainRate', className: 'text-center',format: (item: any) => {return (item?.drainRate)*100 + '%'  }}
   ];
   hzData: any;
   hhrData: any;
@@ -43,79 +46,67 @@ export class DatatableCustomindexComponent implements OnInit {
   clData: any;
   reportData: any = [];
 
-  /**
-   * 查询参数
-   */
-  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 {
     this.initCurveData();
   }
   initCurveData() {
-    let type = 1;
+    this.cardData();
-    if (this.mode === 'year') {
+    this.listData();
-      type = 1;
+    this.addData('year', '2022-01-01');
-    } else if (this.mode === 'month') {
-      type = 2;
   }
-    // const params: any = {
+  listData(type?: string,  stime?: any, etime?: any) { 
-    //   time: this.timeNext,
+    this.reportData = [];
-    //   type
-    // };
-    this.flag = true;
     this.service
       .request(this.service.$api_statistics_totalDetail, {
-        time: this.timeNext,
+        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, {
+    this.service
-      time: this.timeNext,
+      .request(this.service.$api_statistics_totalDetail, {
+        dateStart: stime || this.timeStart,
+        dateEnd: etime || this.timeEnd,
         type: 2
-    }).subscribe(res => {
+      })
-      if (res) {
+      .subscribe(res => {
-        this.reportData.push(res);
-      }
-    });
-    this.service.request(this.service.$api_statistics_totalDetail, {
-      time: this.timeNext,
-      type: 3
-    }).subscribe(res => {
-      if (res) {
-        this.reportData.push(res);
-      }
-    });
-    this.service.request(this.service.$api_statistics_totalDetail, {
-      time: this.timeNext,
-      type: 4
-    }).subscribe(res => {
         if (res) {
           this.reportData.push(res);
           this.st.reload();
         }
       });
+    this.service
+      .request(this.service.$api_statistics_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;
@@ -137,7 +128,58 @@ export class DatatableCustomindexComponent implements OnInit {
       }
     });
   }
-
+  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';
@@ -149,27 +191,29 @@ export class DatatableCustomindexComponent implements OnInit {
   }
   onChange(result: any) {
     if (this.mode === 'year') {
-      this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00'];
+      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.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00'];
+      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.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00'];
+      this.timeStart=this.datePipe.transform(this.date, 'yyyy-MM-dd');
+      this.timeEnd = this.datePipe.transform(this.date, 'yyyy-MM-dd') ;
     } else {
-      this.time = [
+      this.timeStart = this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') ;
-        this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00',
+      this.timeEnd = this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd');
-        this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00'
-      ];
     }
-    this.st.reload({ ...this.reqParams });
+    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;
 
-  changeDataNext() {
+  changeDataNext2() {
-    if (this.mode === 'year') {
+    if (this.modeNext === 'year') {
       this.dateFormat = 'yyyy';
-    } else if (this.mode === 'month') {
+    } else if (this.modeNext === 'month') {
       this.dateFormat = 'yyyy-MM';
     }
   }
@@ -177,11 +221,11 @@ export class DatatableCustomindexComponent implements OnInit {
     if (result === null) {
       return;
     }
-    if (this.mode === 'year') {
+    if (this.modeNext === 'year') {
-      this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy') + '-01-01 00:00:00'];
+      this.timeNext = this.datePipe.transform(this.dateNext, 'yyyy') + '-01-01';
-    } else if (this.mode === 'month') {
+    } else if (this.modeNext === 'month') {
-      this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00'];
+      this.timeNext = this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01';
     }
-    this.initCurveData();
+    this.addData(this.modeNext, this.timeNext);
   }
 }

src/app/routes/datatable/components/datascreen/curve/map.component.html

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

src/app/routes/datatable/components/datascreen/curve/map.component.ts

@@ -0,0 +1,140 @@
+import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { Chart } from '@antv/g2';
+import DataSet from '@antv/data-set';
+import { DataService } from 'src/app/routes/datatable/services/data.service';
+@Component({
+  selector: 'app-datatable-customindex-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.less']
+})
+export class DatatableCustomindexMapComponent implements OnInit, OnChanges {
+  el: any;
+  @Input() chartData: any;
+  chart: any;
+  mapData: any;
+  ds!: DataSet ;
+  worldMap: any;
+  userView: any;
+  userDv: any;
+  userData: any = [];
+  constructor(private service: DataService, private ngZone: NgZone) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.chartData) {
+      // setTimeout(()=>{
+      //   this.chart.render(true)
+      // }, 1000)
+    }
+  }
+
+  ngOnInit(): void {}
+  reRender() {
+    console.log('5454545');
+    setTimeout(() => {
+      this.chart.render();
+    }, 1000);
+  }
+  render(el: ElementRef<HTMLDivElement>): void {
+    this.el = el.nativeElement;
+    setTimeout(() => {
+      this.ngZone.runOutsideAngular(() => this.init(this.el));
+    }, 500);
+  }
+
+  private init(el: HTMLElement): void {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/china.json')
+      .then(res => res.json())
+      .then(mapData => {
+      this.mapData =mapData
+      this.chart = new Chart({
+        container: el,
+        autoFit: true,
+        height: 700,
+        padding: [0, 0]
+      });
+      this.chart.tooltip({
+        showTitle: false,
+        showMarkers: false,
+        shared: true
+      });
+      // 同步度量
+      this.chart.scale({
+        longitude: {
+          sync: true
+        },
+        latitude: {
+          sync: true
+        }
+      });
+      this.chart.axis(false);
+      this.chart.legend('trend', {
+        position: 'left'
+      });
+      console.log('8888');
+  
+      // 绘制世界地图背景
+      this.ds = new DataSet();
+      this.worldMap = this.ds.createView('back').source(this.mapData, {
+        type: 'GeoJSON'
+      });
+      const worldMapView = this.chart.createView();
+      worldMapView.data(this.worldMap.rows);
+      worldMapView.tooltip(false);
+      worldMapView.polygon().position('longitude*latitude').style({
+        fill: '#fff',
+        stroke: '#ccc',
+        lineWidth: 1
+      });
+
+    // 可视化用户数据
+    this.userData = [
+      { name: '山东', value: 21 },
+      { name: '山东', value: 22},
+      { name: '广东', value: 20, },
+      { name: '广东', value: 20  },
+      { name: '四川', value: 120  },
+      { name: '湖南', value: 200  },
+      { name: '河北', value: 30  },
+
+    ];
+    this.userDv = this.ds.createView().source(this.userData).transform({
+        geoDataView: this.worldMap,
+        field: 'name',
+        type: 'geo.region',
+        as: ['longitude', 'latitude']
+      }).transform({
+        type: 'map',
+        callback: (obj: { trend: string; value: number }) => {
+          
+          obj.trend = obj.value > 100 ? '蓝色地区' : '红色地区';
+          return obj;
+        }
+      });
+    this.userView = this.chart.createView();
+    this.userView.data(this.userDv.rows);
+    // this.userView.scale({
+    //   trend: {
+    //     alias: '蓝色地区数量'
+    //   }
+    // });
+    console.log(this.userView);
+    console.log('45545');
+    
+    this.userView.polygon().position('longitude*latitude').color('trend', ['#000', '#76ddb2']).tooltip('').style({fillOpacity: 0.85 })
+      // .animate({
+      //   leave: {
+      //     animation: 'fade-out'
+      //   }
+      // });
+      this.userView.interaction('element-active');
+      this.chart.render();
+
+
+      });
+
+      console.log('9999');
+  
+
+  }
+  
+}

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

@@ -1,71 +1,167 @@
+<!--
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-06 10:57:56
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-07 14:59:07
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.html
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+-->
 <!-- 页头 -->
 <!-- <page-header-wrapper [title]="'运营报表'"></page-header-wrapper> -->
-<div nz-row [nzGutter]="16">
+<div style="display: flex; justify-content: center; align-items: center">
+  <h1>运多星网络货运平台实时交易监控</h1>
+</div>
+<div nz-row [nzGutter]="24">
   <div nz-col class="gutter-row" [nzSpan]="8">
     <nz-card nzTitle="2022全年交易情况">
       <nz-row [nzGutter]="16">
         <nz-col [nzSpan]="12">
-          <nz-statistic [nzValue]="(1949101 | number)!" [nzTitle]="'成交额'"></nz-statistic>
+          <nz-statistic [nzValue]="(allDeal?.dealAmount | currency)!" [nzTitle]="'成交额'"></nz-statistic>
         </nz-col>
         <nz-col [nzSpan]="12">
-          <nz-statistic [nzValue]="(2019.111 | number: '1.0-2')!" [nzTitle]="'结算额'"></nz-statistic>
+          <nz-statistic [nzValue]="(allDeal?.settlementAmount | currency)!" [nzTitle]="'结算额'"></nz-statistic>
         </nz-col>
       </nz-row>
       <nz-row [nzGutter]="16">
         <nz-col [nzSpan]="12">
-          <nz-statistic [nzValue]="(1949101 | number)!" [nzTitle]="'订单数'"></nz-statistic>
+          <nz-statistic [nzValue]="(allDeal?.billQuantity | number)!" [nzTitle]="'订单数'"></nz-statistic>
         </nz-col>
         <nz-col [nzSpan]="12">
-          <nz-statistic [nzValue]="(2019.111 | number: '1.0-2')!" [nzTitle]="'货物吞吐(吨)'"></nz-statistic>
+          <nz-statistic [nzValue]="(allDeal?.weight | number: '1.0-2')!" [nzTitle]="'货物吞吐(吨)'"></nz-statistic>
         </nz-col>
       </nz-row>
     </nz-card>
     <nz-card nzTitle="本月交易趋势">
-
+      <g2-timeline
+        [data]="monthData"
+        [titleMap]="{ y1: '订单数', y2: '运单数' }"
+        [height]="200"
+        mask="MM月DD日"
+        [slider]="false"
+      ></g2-timeline>
     </nz-card>
     <nz-card nzTitle="实时货源">
-      <st #st multiSort bordered [columns]="columns" [ps]="20" [data]="service.$api_listShipperReportPage"
+      <st
+        [scroll]="{ y: '300px' }"
+        #st
+        multiSort
+        bordered
+        [columns]="columns"
+        [data]="service.$api_getRealTimeSupply"
         [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
-        [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
+        [res]="{ reName: { list: 'data' } }"
-        [page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="service.http.loading">
+        [page]="{ show: false, showSize: false, pageSizes: [5, 50, 100] }"
+        [loading]="service.http.loading"
+      >
+        <ng-template st-row="index" let-item let-index="index">
+          {{ index }}
+        </ng-template>
+        <ng-template st-row="weight" let-item let-index="index">
+          {{ item.weight ? item.weight + '吨' : '' }}
+          {{ item.volume ? item.volume + '方' : '' }}
+        </ng-template>
+        <ng-template st-row="weight" let-item let-index="index">
+          {{ item.weight ? item.weight + '吨' : '' }}
+          {{ item.volume ? item.volume + '方' : '' }}
+        </ng-template>
       </st>
     </nz-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="8">
-    <div>
+    <nz-card>
-
+      <nz-row [nzGutter]="24">
-    </div>
+        <nz-col [nzSpan]="8">
-    <nz-card nzTitle="本月发货量排名">
+          <nz-statistic [nzValue]="(headDeal?.todayAmount | currency)!" [nzTitle]="'今日交易额'"></nz-statistic>
-
+        </nz-col>
+        <nz-col [nzSpan]="8">
+          <nz-statistic [nzValue]="(headDeal?.monthAmount | currency)!" [nzTitle]="'本月交易额'"></nz-statistic>
+        </nz-col>
+        <nz-col [nzSpan]="8">
+          <nz-statistic [nzValue]="(headDeal?.cumulativeAmount | currency)!" [nzTitle]="'累计交易额'"></nz-statistic>
+        </nz-col>
+      </nz-row>
+    </nz-card>
+    <app-datatable-customindex-map style="max-height: 600px" #map [chartData]="chartData"></app-datatable-customindex-map>
+    <nz-card>
+      <nz-row [nzGutter]="24">
+        <g2-bar height="200" [title]="'本月发货量排名'" [data]="salesData2"  (ready)='genData()'></g2-bar>
+      </nz-row>
     </nz-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="8">
+    <nz-card>
+      <nz-row [nzGutter]="24">
+        <nz-col [nzSpan]="6">
+          <nz-statistic [nzValue]="(classifyDeal?.enterpriseTotal | number)!" [nzTitle]="'货主'"></nz-statistic>
+        </nz-col>
+        <nz-col [nzSpan]="6">
+          <nz-statistic [nzValue]="(classifyDeal?.partnerTotal | number: '1.0-2')!" [nzTitle]="'合伙人'"></nz-statistic>
+        </nz-col>
+        <nz-col [nzSpan]="6">
+          <nz-statistic [nzValue]="(classifyDeal?.driverTotal | number)!" [nzTitle]="'司机'"></nz-statistic>
+        </nz-col>
+        <nz-col [nzSpan]="6">
+          <nz-statistic [nzValue]="(classifyDeal?.carTotal | number: '1.0-2')!" [nzTitle]="'车辆'"></nz-statistic>
+        </nz-col>
+      </nz-row>
+    </nz-card>
     <nz-card nzTitle="今日交易情况">
       <nz-row [nzGutter]="16">
         <nz-col [nzSpan]="12">
-          <nz-statistic [nzValue]="(1949101 | number)!" [nzTitle]="'订单数'"></nz-statistic>
+          <nz-statistic [nzValue]="(todaysDeal?.billQuantity | number)!" [nzTitle]="'订单数'"></nz-statistic>
         </nz-col>
         <nz-col [nzSpan]="12">
-          <nz-statistic [nzValue]="(2019.111 | number: '1.0-2')!" [nzTitle]="'有效订单'"></nz-statistic>
+          <nz-statistic [nzValue]="(todaysDeal?.billEffectiveQuantity | number: '1.0-2')!" [nzTitle]="'有效订单'"></nz-statistic>
         </nz-col>
       </nz-row>
       <nz-row [nzGutter]="16">
         <nz-col [nzSpan]="12">
-          <nz-statistic [nzValue]="(1949101 | number)!" [nzTitle]="'运输金额(元)'"></nz-statistic>
+          <nz-statistic [nzValue]="(todaysDeal?.amount | currency)!" [nzTitle]="'运输金额(元)'"></nz-statistic>
         </nz-col>
         <nz-col [nzSpan]="12">
-          <nz-statistic [nzValue]="(2019.111 | number: '1.0-2')!" [nzTitle]="'货物吞吐(吨)'"></nz-statistic>
+          <nz-statistic [nzValue]="(todaysDeal?.weight | number: '1.0-2')!" [nzTitle]="'货物吞吐(吨)'"></nz-statistic>
         </nz-col>
       </nz-row>
     </nz-card>
     <nz-card nzTitle="本月运营质量监测">
-
+      <nz-row [nzGutter]="24">
+        <nz-col [nzSpan]="12">
+          <div style="width: 200px; display: inline-block">
+            <g2-pie percent="28" subTitle="准点率" total="28%" height="100"></g2-pie>
+          </div>
+        </nz-col>
+        <nz-col [nzSpan]="12">
+          <div style="width: 200px; display: inline-block">
+            <g2-pie percent="22" subTitle="货损率" total="22%" height="100"></g2-pie>
+          </div>
+        </nz-col>
+        <nz-col [nzSpan]="12">
+          <div style="width: 200px; display: inline-block">
+            <g2-pie percent="22" subTitle="空车率" total="22%" height="100"></g2-pie>
+          </div>
+        </nz-col>
+        <nz-col [nzSpan]="12">
+          <div style="width: 200px; display: inline-block">
+            <g2-pie percent="22" subTitle="结算率" total="22%" height="100" width="200"></g2-pie>
+          </div>
+        </nz-col>
+      </nz-row>
     </nz-card>
     <nz-card nzTitle="实时运单风控">
-      <st #st multiSort bordered [columns]="orderColumns" [ps]="20" [data]="service.$api_listShipperReportPage"
+      <st
+        #st
+        multiSort
+        bordered
+       [scroll]="{y: '300px'}"
+        [columns]="orderColumns"
+        [data]="service.$api_getRealTimeWaybillRiskControl"
         [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqOrderParams }"
-      [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
+        [res]="{ reName: { list: 'data' } }"
-      [page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="service.http.loading">
+        [page]="{ show: false, showSize: false, pageSizes: [5, 50, 100] }"
+        [loading]="service.http.loading"
+      >
       </st>
     </nz-card>
   </div>

src/app/routes/datatable/components/datascreen/datascreen.component.less

@@ -4,5 +4,8 @@
             color: #399ffd;
             font-weight: bold;
         }
+        .nz-statistic-number,.ant-statistic-content-value {
+            font-size: 20px;
+        }
     }
 }

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

@@ -1,8 +1,24 @@
+import { map } from 'rxjs/operators';
+/*
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-06 10:57:56
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-07 14:59:12
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.ts
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+ */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { STColumn, STComponent } from '@delon/abc/st';
 import { SFSchema } from '@delon/form';
 import { ModalHelper, _HttpClient } from '@delon/theme';
 import { DataService } from '../../services/data.service';
+import { DatatableCustomindexMapComponent } from './curve/map.component';
+import { G2TimelineData } from '@delon/chart/timeline';
+import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
+import { format } from 'date-fns';
+
 
 @Component({
   selector: 'app-datatable-datascreen',
@@ -12,9 +28,21 @@ import { DataService } from '../../services/data.service';
 export class DatatableDatascreenComponent implements OnInit {
   @ViewChild('st') private readonly st!: STComponent;
   @ViewChild('orderSt') private readonly orderSt!: STComponent;
+  @ViewChild('map') private readonly map!: DatatableCustomindexMapComponent;
   columns: STColumn[] = [];
-  orderColumns!: STColumn[];
+  chartData: G2TimelineData[] = [];
-  constructor(public service: DataService) { }
+  orderColumns: STColumn[] = [];
+  allDeal: any;
+  headDeal: any;
+  classifyDeal: any;
+  todaysDeal: any;
+  
+  monthData: G2TimelineData[] = [];
+  salesData :any;
+  salesData2 :any = this.genData();
+  constructor(public service: DataService) {
+   
+   }
 
   /**
    * 查询参数
@@ -33,25 +61,83 @@ export class DatatableDatascreenComponent implements OnInit {
   ngOnInit(): void {
     this.initST()
     this.initOrderST()
+    this.initData()
+    this.initLineData()
+  }
+  initData(){
+    this.service.request(this.service.$api_getAnnualTransactions).subscribe((res: any) => {
+      this.allDeal = res
+    })
+    this.service.request(this.service.$api_getTransactionAmount).subscribe((res: any) => {
+      this.headDeal = res
+    })
+    this.service.request(this.service.$api_getCustomerStatistics).subscribe((res: any) => {
+      this.classifyDeal = res
+    })
+    this.service.request(this.service.$api_getTradingToday).subscribe((res: any) => {
+      this.todaysDeal = res
+    })
+}
+  initLineData(){
+    this.service.request(this.service.$api_getTradingTrend).subscribe((res: any) => {
+      this.monthData = res
+      // for (let i = 0; i < 20; i += 1) {
+      //   this.monthData.push({
+      //     time: new Date().getTime() + 1000 * 60 * 60 * 24 * i,
+      //     y1: Math.floor(Math.random() * 100) + 1000,
+      //     y2: Math.floor(Math.random() * 100) + 10,
+      //   });
+      // }
+  })
+  let value: any = []
+  this.service.request(this.service.$api_getShipmentRanking).subscribe((res: any) => {
+    console.log(res);
+    res.forEach((element: any) => {
+     value.push({
+      x: element.city,
+      y: element.weight,
+    });
+    });
+    this.salesData = value
+    console.log(this.salesData);
+  })
+  }
+  public genData(): G2MiniAreaData[] {
+    let value: any = []
+    this.service.request(this.service.$api_getShipmentRanking).subscribe((res: any) => {
+      console.log(res);
+      res.forEach((element: any) => {
+          value.push({
+        x: element.city,
+        y: element.weight,
+      });
+      });
+    })
+    console.log(value);
+    return value;
     }
   /**
 * 初始化数据列表
 */
   initST() {
     this.columns = [
-      { title: '序号', index: 'carNo', className: 'text-center' },
+      { title: '序号', render: 'index', className: 'text-center',width: '70px' },
-      { title: '发货地', index: 'carNoColorLabel', className: 'text-center' },
+      { title: '发货地', index: 'loadAddress', className: 'text-center',width: '90px' },
-      { title: '卸货地', index: 'carModelLabel', className: 'text-center' },
+      { title: '卸货地', index: 'dischargeAddress', className: 'text-center' ,width: '90px'},
-      { title: '货物', index: 'carStatus', className: 'text-center'},
+      { title: '货物', index: 'goodsName', className: 'text-center',width: '90px'},
-      { title: '数量', index: 'approvalStatus', className: 'text-center' },
+      { title: '数量', render: 'weight', className: 'text-center',width: '120px' },
     ];
   }
   initOrderST() {
-    this.columns = [
+    this.orderColumns = [
-      { title: '运单号', index: 'carNo', className: 'text-center' },
+      { title: '运单号', index: 'wayCode', className: 'text-center',width: '120px' },
-      { title: '货主', index: 'carNoColorLabel', className: 'text-center' },
+      { title: '货主', index: 'shipperName', className: 'text-center',width: '70px' },
-      { title: '时间', index: 'carModelLabel', className: 'text-center' },
+      { title: '时间', index: 'createTime', className: 'text-center',width: '200px' },
-      { title: '风险等级', index: 'carStatus', className: 'text-center'}
+      { title: '风险等级', index: 'warningType', className: 'text-center',width: '90px'}
     ];
   }
+  
+  handleClick(data: G2MiniAreaClickItem): void {
+    this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
+  }
 }

src/app/routes/datatable/components/operationtable/curve/curve.component.ts

@@ -36,6 +36,8 @@ export class OperationCurveComponent implements OnInit, OnChanges {
     setTimeout(() => {
       this.ngZone.runOutsideAngular(() => this.init(this.el));
       },500)
+      console.log(this.chartData);
+      
   }
 
   private init(el: HTMLElement): void {

src/app/routes/datatable/datatable.module.ts

@@ -1,3 +1,13 @@
+/*
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-06 11:02:17
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-06 17:22:44
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\datatable.module.ts
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+ */
 import { NgModule, Type } from '@angular/core';
 import { SharedModule, SHARED_G2_MODULES } from '@shared';
 import { DatatableRoutingModule } from './datatable-routing.module';
@@ -30,6 +40,7 @@ import { FinancetablePillarComponent } from './components/financetable/pillar/pi
 import { ComplianceCurveComponent } from './components/compliance/index/curve/curve.component';
 import { BusitableCurveComponent } from './components/busitable/busiindex/curve/curve.component';
 import { DatatableCustomindexCurveComponent } from './components/customtable/customindex/curve/curve.component';
+import { DatatableCustomindexMapComponent } from './components/datascreen/curve/map.component';
 
 const COMPONENTS: Type<void>[] = [
   DatatableDataindexComponent,
@@ -62,7 +73,8 @@ const COMPONENTS: Type<void>[] = [
   FinancetablePillarComponent,
   ComplianceCurveComponent,
   BusitableCurveComponent,
-  DatatableCustomindexCurveComponent
+  DatatableCustomindexCurveComponent,
+  DatatableCustomindexMapComponent
 ]
 
 

src/app/routes/datatable/services/data.service.ts

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2021-12-27 10:30:56
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-06 13:47:25
+ * @LastEditTime : 2022-04-07 09:30:16
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\services\\data.service.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -62,6 +62,26 @@ export class DataService extends BaseService {
   $api_statistics_total = `/api/mdc/cuc/statistics/total`;
   // 客户报表-根据类型获取统计明细信息(table)
   $api_statistics_totalDetail = `/api/mdc/cuc/statistics/totalDetail`;
+  // 客户报表-根据类型获取统计图表信息
+  $api_statistics_totalAdd = `/api/mdc/cuc/statistics/totalAdd`;
+
+
+  // 数据大屏-本年全年交易情况
+  $api_getAnnualTransactions = `/api/sdc/reportDataLargeScreen/getAnnualTransactions`;
+  // 数据大屏-客户统计(货主，合伙人，司机，车辆)
+  $api_getCustomerStatistics = `/api/sdc/reportDataLargeScreen/getCustomerStatistics`;
+  // 数据大屏-实时货源
+  $api_getRealTimeSupply = `/api/sdc/reportDataLargeScreen/getRealTimeSupply`;
+  // 数据大屏-实时运单风控
+  $api_getRealTimeWaybillRiskControl = `/api/sdc/reportDataLargeScreen/getRealTimeWaybillRiskControl`;
+  // 数据大屏-本月发货量排名
+  $api_getShipmentRanking = `/api/sdc/reportDataLargeScreen/getShipmentRanking`;
+  // 数据大屏-今日交易情况
+  $api_getTradingToday = `/api/sdc/reportDataLargeScreen/getTradingToday`;
+  // 数据大屏-本月交易趋势
+  $api_getTradingTrend = `/api/sdc/reportDataLargeScreen/getTradingTrend`;
+  // 数据大屏-交易额(今日，本月，累计)
+  $api_getTransactionAmount = `/api/sdc/reportDataLargeScreen/getTransactionAmount`;
 
 
 

src/app/routes/order-management/components/abnormal-warning/abnormal-warning.component.html

@@ -0,0 +1,94 @@
+<!--
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-01-12 10:52:50
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-07 10:11:15
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\order-management\\components\\abnormal-warning\\abnormal-warning.component.html
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+-->
+<!-- 搜索表单 -->
+<page-header-wrapper [title]="''"> </page-header-wrapper>
+<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 *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"
+          [nzLoading]="service.http.loading"
+          (click)="search()"
+          acl
+          [acl-ability]="['ORDER-COMPLIANCE-AUDIT-search']"
+          >查询</button
+        >
+        <button nz-button nzType="primary" [disabled]="false" acl [acl-ability]="['ORDER-COMPLIANCE-AUDIT-export']" (click)="exprot()"
+          >导出</button
+        >
+        <button nz-button [disabled]="false" (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 style="margin-top: 15px">
+    <st
+      #st
+      [bordered]="true"
+      [scroll]="{ x: '2000px' }"
+      [data]="service.$api_get_abnormalWarning"
+      [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="driverName" let-item let-index="index">
+        <div> {{ item?.driverName }}{{ item?.driverPhone ? "/" + item?.driverPhone : '' }}{{ item?.carNo ? "/" + item?.carNo : '' }} </div>
+      </ng-template>
+      <ng-template st-row="longitude" let-item let-index="index">
+        <div> {{ item?.longitude }}
+          {{ item?.latitude ? "," + item?.latitude : '' }} </div>
+      </ng-template>
+      <ng-template st-row="billCode" let-item let-index="index">
+        <!-- <a *ngIf="item.billType == '1'" [routerLink]="'/order-management/vehicle/vehicle-detail/' + item.id">{{ item.billCode }}</a>
+        <a *ngIf="item.billType == '2'"  [routerLink]="'/order-management/bulk/bulk-detail/' + item.id" [queryParams]="{ sts :1}">{{ item.billCode }}</a>
+        <a *ngIf="item.billType == '3'"  [routerLink]="'/order-management/vehicle/vehicle-detail/' + item.id">{{ item.billCode }}</a> -->
+        <div>
+          <span>{{ item?.billStatusLabel }}</span>
+        </div>
+        <div>
+          <span >{{item?.billTypeLabel}}{{item?.serviceTypeLabel === item?.billTypeLabel ? '':item?.serviceTypeLabel}}</span>
+        </div>
+      </ng-template>
+    </st>
+  </div>
+</nz-card>
+
+

src/app/routes/order-management/components/abnormal-warning/abnormal-warning.component.less

@@ -0,0 +1,13 @@
+
+    :host {
+     p{
+         margin-bottom: 0
+     }
+     .left_btn {
+          width: 50px;
+         height: 32px; 
+          padding-left: 8px;
+          line-height:32px; 
+          background-color: #d7d7d7;
+     }
+ }

src/app/routes/order-management/components/abnormal-warning/abnormal-warning.component.spec.ts

@@ -0,0 +1,35 @@
+/*
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2021-12-06 20:03:28
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-07 09:43:16
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\order-management\\components\\abnormal-warning\\abnormal-warning.component.spec.ts
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+ */
+
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { OrderManagementAbnormalWarningComponent } from './abnormal-warning.component';
+
+describe('OrderManagementAbnormalWarningComponent', () => {
+  let component: OrderManagementAbnormalWarningComponent;
+  let fixture: ComponentFixture<OrderManagementAbnormalWarningComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrderManagementAbnormalWarningComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderManagementAbnormalWarningComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/routes/order-management/components/abnormal-warning/abnormal-warning.component.ts

@@ -0,0 +1,288 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { STColumn, STComponent } from '@delon/abc/st';
+import { SFComponent, SFDateWidgetSchema, SFSchema, SFSchemaEnum, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
+import { ModalHelper, _HttpClient } from '@delon/theme';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { map } from 'rxjs/operators';
+import { OrderManagementService } from '../../services/order-management.service';
+import { UpdateFreightComponent } from '../../modal/bulk/update-freight/update-freight.component';
+import { ConfirReceiptComponent } from '../../modal/bulk/confir-receipt/confir-receipt.component';
+import { of } from 'rxjs';
+import { ShipperBaseService } from '@shared';
+import { Router } from '@angular/router';
+import { OneCarOrderAppealComponent } from '../../modal/audit/appeal/appeal.component';
+
+@Component({
+  selector: 'app-order-management-abnormal-warning',
+  templateUrl: './abnormal-warning.component.html',
+  styleUrls: ['./abnormal-warning.component.less']
+})
+export class OrderManagementAbnormalWarningComponent implements OnInit {
+  ui: SFUISchema = {};
+  uiView: SFUISchema = {};
+  schema: SFSchema = {};
+  schemaView: SFSchema = {};
+  changeId: any;       // 主页面查看运费变更记录id - 用于运费变更记录
+  changeViewId: any;  // 查看运费变更记录id - 用于查看
+  auditId: any;
+  auditIdR: any;
+  auditMany = false;
+  isVisibleView = false;
+  isVisibleEvaluate = false;
+  isVisible = false;
+  isVisibleRE = false;
+  _$expand = false;
+  @ViewChild('st') private readonly st!: STComponent;
+  @ViewChild('sf', { static: false }) sf!: SFComponent;
+  @ViewChild('sfView', { static: false }) sfView!: SFComponent;
+  @ViewChild('stFloat') private readonly stFloat!: STComponent;
+  @ViewChild('stFloatView') private readonly stFloatView!: STComponent;
+  columns: STColumn[] = [];
+  columnsFloat: STColumn[] = [];
+  columnsFloatView: STColumn[] = [];
+  ViewCause: any;  // 变更运费查看数据
+  constructor(
+    public service: OrderManagementService,
+    private modal: NzModalService,
+    public shipperservice: ShipperBaseService,
+    private router: Router
+  ) { }
+
+  /**
+   * 查询参数
+   */
+  get reqParams() {
+    const a: any = {};
+    const params: any = Object.assign({}, this.sf?.value || {});
+    delete params._$expand;
+    return {
+      ...a,
+      ...params,
+      warningTime: {
+        start: this.sf?.value?.warningTime?.[0] || '',
+        end: this.sf?.value?.warningTime?.[1] || ''
+      }
+    };
+  }
+  get changeParams() {
+    return {
+      id: this.changeId
+    };
+  }
+  get selectedRows() {
+    return this.st?.list.filter(item => item.checked) || [];
+  }
+  get changeViewParams() {
+    return {
+      id: this.changeViewId
+    };
+  }
+  search() {
+    this.st?.load(1);
+  }
+
+  ngOnInit(): void {
+    this.initSF();
+    this.initST();
+  }
+
+  /**
+   * 初始化查询表单
+   */
+  initSF() {
+    this.schema = {
+      properties: {
+        _$expand: { type: 'boolean', ui: { hidden: true } },
+        billCode: {
+          type: 'string',
+          title: '订单号',
+          ui: {
+          }
+        },
+        wayCode: {
+          type: 'string',
+          title: '运单号',
+          ui: {
+          }
+        },
+        serviceType: {
+          title: '服务类型',
+          type: 'string',
+          default: '',
+          ui: {
+            widget: 'dict-select',
+            params: { dictKey: 'service:type' },
+            containsAllLabel: true,
+          } as SFSelectWidgetSchema
+        },
+        resourceType: {
+          title: '货源类型',
+          type: 'string',
+          default: '',
+          ui: {
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            },
+            widget: 'dict-select',
+            params: { dictKey: 'goodresource:type' },
+            containsAllLabel: true,
+          } as SFSelectWidgetSchema
+        },
+        shipperId: {
+          type: 'string',
+          title: '货主',
+          ui: {
+            widget: 'select',
+            serverSearch: true,
+            searchDebounceTime: 300,
+            searchLoadingText: '搜索中...',
+            allowClear: true,
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            },
+            onSearch: (q: any) => {
+              let str =q.replace(/^\s+|\s+$/g,"");
+              if (str) {
+                return this.service
+                  .request(this.service.$api_enterpriceList, { enterpriseName: str })
+                  .pipe(map((res: any) => (res as any[]).map(i => ({ label: i.enterpriseName, value: i.id } as SFSchemaEnum))))
+                  .toPromise();
+              } else {
+                return of([]);
+              }
+            },
+          } as SFSelectWidgetSchema
+        },
+        loadingPlace: {
+          type: 'string',
+          title: '装货地',
+          ui: {
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            }
+          }
+        },
+        dischargePlace: {
+          type: 'string',
+          title: '卸货地',
+          ui: {
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            }
+          }
+        },
+        driverName: {
+          title: '承运司机',
+          type: 'string',
+          ui: {
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            }
+          }
+        },
+        carNos: {
+          title: '车牌号',
+          type: 'string',
+          ui: {
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            }
+          }
+        },
+        warningTime: {
+          title: '预警时间',
+          type: 'string',
+          ui: {
+            widget: 'date',
+            mode: 'range',
+            format: 'yyyy-MM-dd',
+            allowClear: true,
+            visibleIf: {
+              _$expand: (value: boolean) => value
+            }
+          } as SFDateWidgetSchema
+        },
+      },
+      type: 'object'
+    };
+    this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
+  }
+
+  /**
+   * 初始化数据列表
+   */
+  initST() {
+    this.columns = [
+      {
+        title: '运单号',
+        width: '180px',
+        fixed: 'left',
+        className: 'text-left',
+        index: 'wayCode'
+      },
+      {
+        title: '订单号',
+        width: '180px',
+        fixed: 'left',
+        className: 'text-left',
+        index: 'billCode'
+      },
+      { title: '服务类型', index: 'serviceTypeLabel', width: '220px', className: 'text-left' },
+      { title: '货主', index: 'shipperName', width: '220px', className: 'text-left' },
+      { title: '装货地', index: 'loadingAddressArr', width: '220px', className: 'text-left' },
+      { title: '卸货地', index: 'unloadingAddressArr', width: '220px', className: 'text-left' },
+      { title: '司机',  render: 'driverName', width: '180px', className: 'text-left' },
+      { title: '车牌号', index: 'carNo', width: '180px', className: 'text-left' },
+      { title: '预警类型', index: 'warningTypeLabel', width: '180px', className: 'text-left' },
+      {
+        title: '预警时间',
+        className: 'text-left',
+        width: '180px',
+        index: 'warningTime'
+      },
+      {
+        title: '位置描述',
+        className: 'text-left',
+        width: '250px',
+        render: 'longitude'
+      },
+      {
+        title: '提醒内容',
+        className: 'text-left',
+        width: '250px',
+        index: 'warningContent',
+      },
+    
+    ];
+  }
+
+  /**
+   * 查询字段个数
+   */
+  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;
+  }
+
+
+    // 导出
+    exprot() {
+      this.service.asyncExport(this.reqParams, this.service.$api_get_asyncExportSpotCheckList);
+    }
+}

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

@@ -4,12 +4,13 @@
  * @Author       : Shiming
  * @Date         : 2022-01-06 09:24:00
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-02-10 11:34:03
+ * @LastEditTime : 2022-04-07 09:43:47
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\order-management\\order-management-routing.module.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { OrderManagementAbnormalWarningComponent } from './components/abnormal-warning/abnormal-warning.component';
 import { OrderManagementBulkDetailChangeComponent } from './components/bulk-detail-change/bulk-detail-change.component';
 import { OrderManagementBulkeDetailComponent } from './components/bulk-detail/bulk-detail.component';
 import { OrderManagementBulkComponent } from './components/bulk/bulk.component';
@@ -36,6 +37,7 @@ const routes: Routes = [
   { path: 'complaint-detail/:id', component: OrderManagementComplaintDetailComponent },
   { path: 'receipts-audit', component: OrderManagementReceiptsAuditComponent },
   { path: 'compliance-audit', component: OrderManagementComplianceAuditComponent },
+  { path: 'abnormal-warning', component: OrderManagementAbnormalWarningComponent },
 ]
 @NgModule({
   imports: [RouterModule.forChild(routes)],

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

@@ -11,6 +11,7 @@
 
 import { NgModule, Type } from '@angular/core';
 import { SharedModule } from '@shared';
+import { OrderManagementAbnormalWarningComponent } from './components/abnormal-warning/abnormal-warning.component';
 import { OrderManagementBulkDetailChangeComponent } from './components/bulk-detail-change/bulk-detail-change.component';
 import { OrderManagementBulkeDetailComponent } from './components/bulk-detail/bulk-detail.component';
 import { OrderManagementBulkComponent } from './components/bulk/bulk.component';
@@ -66,7 +67,8 @@ const COMPONENTS: Type<void>[] = [
   OrderManagementComplianceAuditComponent,
   OneCarOrderCancelConfirmComponent,
   OneCarOrderViewtrackComponent,
-  OneCarOrderAppealComponent
+  OneCarOrderAppealComponent,
+  OrderManagementAbnormalWarningComponent
 ];
 
 @NgModule({

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

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2021-12-03 15:31:52
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-06 11:03:58
+ * @LastEditTime : 2022-04-07 09:49:44
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\order-management\\services\\order-management.service.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -186,6 +186,9 @@ export class OrderManagementService extends ShipperBaseService {
   //  查看申述记录
   $api_get_getOrderComplaintDetail = `/api/sdc/billOperate/getOrderComplaintDetail`;
 
+  //  查询异常预警表
+  $api_get_abnormalWarning = `/api/sdc/abnormalWarning/list/page`;
+
 
   //  异步导出运营后台大宗订单列表
   $api_get_asyncExportBulkList = `/api/sdc/billOperate/asyncExportBulkList`;

src/app/routes/waybill-management/components/bulk-detail/bulk-detail.component.html

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-12-03 15:31:52
- * @LastEditTime : 2022-04-06 15:37:59
+ * @LastEditTime : 2022-04-07 15:02:55
  * @LastEditors  : Shiming
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\waybill-management\\components\\bulk-detail\\bulk-detail.component.html
@@ -30,6 +30,7 @@
         <sv label="所属项目">{{i?.enterpriseProjectName}}</sv>
         <sv label="服务类型">{{i?.serviceTypeLabel}}</sv>
         <sv label="调度员">{{i?.dispatchName}} /{{i?.dispatchPhone}}</sv>
+        <sv label="外部订单号">{{ i?.externalBillCode }}</sv>
         <sv label="货源编号">{{ i?.resourceCode }} </sv>
         <sv label="承诺付款天数">{{ i?.paymentDays }}</sv>
      </div>
@@ -92,13 +93,12 @@
     <sv label="接单数量">
       {{ i?.acceptWeight }}吨,{{ i?.acceptVolume }}方
     </sv>
-    <sv label="装货数量">
+    <sv *ngIf="i?.billStatus =='3' || i?.billStatus =='4' || i?.billStatus =='5'" label="装货数量">
       {{ i?.loadWeight }}吨，{{ i?.loadVolume }}方
     </sv>
-    <sv  label="卸货数量">
+    <sv *ngIf="i?.billStatus =='4' || i?.billStatus =='5'" label="卸货数量">
       {{ i?.settlementWeight }}吨,{{ i?.settlementVolume }}方
     </sv>
-    
 </sv-container>
 <div class="mt-md">
   <h4 class="text-md">装货卸货信息
@@ -154,10 +154,10 @@
       totalObj?.price - attObj?.price | currency
     }}，附加运费{{ attObj?.price | currency}}，附加费率{{ (attObj?.price / totalObj?.price) * 100 | number: '0.2-2' }}%）
   </div>
-  <div>车队长：{{ i?.payee?.name }}/{{ i?.payee?.phone }}/{{ i?.payee?.idNo }}</div>
+  <div>收款人：{{ i?.payee?.name }}/{{ i?.payee?.phone }}/{{ i?.payee?.idNo }}</div>
 </nz-card> -->
 <nz-card  [nzTitle]="'运费信息' +'（到货后'+i?.paymentDays+'天内支付运费）'"  #distannce3>
-  <h2>{{i?.goodsInfos?.[0]?.freightPrice}}{{i?.goodsInfos?.[0]?.freightTypeLabel}}（{{ i?.goodsInfos?.[0]?.settlementBasisLabel ? i?.goodsInfos?.[0]?.settlementBasisLabel + '，' :' ' }}{{i?.goodsInfos?.[0]?.ruleLabel}}）</h2>
+  <h2>{{i?.freightPrice}}{{i?.goodsInfos?.[0]?.freightTypeLabel}}（{{ i?.goodsInfos?.[0]?.settlementBasisLabel ? i?.goodsInfos?.[0]?.settlementBasisLabel + '，' :' ' }}{{i?.goodsInfos?.[0]?.ruleLabel}}）</h2>
   <st #st [data]="billExpenses" [columns]="logColumns" [ps]="0" [page]="{ show: false, showSize: false }">
     <ng-template st-row="PriceType" let-item let-index="index"> 到付 </ng-template>
     <ng-template st-row="price" let-item let-index="index">
@@ -176,7 +176,7 @@
       附加费{{ i?.totalSurcharge | currency }}，附加费率{{ (i?.totalRate * 100).toFixed(2)}}%）
     </div>
   </div>
-  <div *ngIf ="i?.payee?.phone && i?.payee?.phone !== i?.driverVo.phone">车队长：{{ i?.payee?.name }}/{{ i?.payee?.phone }}/{{ i?.payee?.idNo }}</div>
+  <div>收款人：{{ i?.payee?.name }}/{{ i?.payee?.phone }}/{{ i?.payee?.idNo }}</div>
 </nz-card>
 
 <nz-card nzTitle="附件信息" #distannce4>