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

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

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

@@ -5,6 +5,9 @@ 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',
@@ -12,51 +15,107 @@ import { Chart } from '@antv/g2';
   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-MM-dd';
+  dateFormat = 'yyyy';
-  time: any = ['2022-01-01 00:00:00']
+  time: any = '2022'
-  constructor(private http: _HttpClient, private modal: ModalHelper, private ngZone: NgZone, private datePipe: DatePipe) {}
+  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'
-    } 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']
+      this.time = this.datePipe.transform(this.date, 'yyyy')
     } else if(this.mode === 'month') {
-      this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
+      this.time = this.datePipe.transform(this.date, 'yyyy-MM')
     }
+    this.initdData();
   }
 
   initSF() {
     this.schema = {
       properties: {
-        name: {
+        enterpriseInfoId: {
           type: 'string',
           title: '',
           ui: {
             widget: 'select',
-            placeholder: '网络货运人'
+            placeholder: '网络货运人',
+            asyncData: () => this.service.getNetworkFreightForwarder({}),
+            change:()=>{
+              this.initdData();
+            },
+            allowClear: true
           }
         },
-        name2: {
+        enterpriseProjectId: {
           type: 'string',
           title: '',
           ui: {
@@ -64,11 +123,12 @@ export class DatatableComplianceIndexComponent implements OnInit {
             placeholder: '部门'
           }
         },
-        name3: {
+        salesmanId: {
           type: 'string',
           title: '',
           ui: {
-            placeholder: '业务员'
+            placeholder: '业务员',
+            enter: () => this.initdData(),
           }
         }
       }
@@ -81,6 +141,9 @@ export class DatatableComplianceIndexComponent implements OnInit {
 
   }
 
+
+
+
   render(el: ElementRef<HTMLDivElement>) {
     this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
   }

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

@@ -66,16 +66,22 @@ export class FinanceTableCurveComponent implements OnInit,OnChanges {
     this.chart.axis('number', {
       label: {
         formatter: (val: any) => {
-          return val;
+          return val*100+ ' %';
         },
       },
     });
 
+    
     this.chart
       .line()
       .position('time*number')
       .color('name')
-    
+      .tooltip('name*number', (name:any, value:any) => {
+        return {
+          name: name,
+          value: value*100 + '%'
+        };
+      });
     
     this.chart.render();
     

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

@@ -50,7 +50,7 @@
 <nz-card nzTitle="运营报表" [nzExtra]="extraTemplate01">
   <ng-template #extraTemplate01>
     <div class="chooseBox">
-      <nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="changeCurve()">
+      <nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="initPillarData()">
         <nz-option [nzValue]="item.value" [nzLabel]="item.label" *ngFor="let item of interManlist"></nz-option>
       </nz-select>
       <div class="timeBox">
@@ -66,10 +66,10 @@
   </ng-template>
   <div nz-row [nzGutter]="64">
     <div nz-col class="gutter-row" [nzSpan]="12">
-     <app-operation-curve #curve [chartData]="chartData.lineChart"></app-operation-curve>
+     <app-financetable-curve #curve [chartData]="chartData.lineChart"></app-financetable-curve>
     </div>
     <div nz-col class="gutter-row" [nzSpan]="12">
-      <app-operation-pillar #pillar [chartData]="chartData.histogram"></app-operation-pillar>
+      <app-financetable-pillar #pillar [chartData]="chartData.histogram"></app-financetable-pillar>
     </div>
   </div>
 </nz-card>

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

@@ -6,6 +6,8 @@ import { DataService } from '../../services/data.service';
 import { differenceInCalendarDays } from 'date-fns';
 import { OperationCurveComponent } from '../operationtable/curve/curve.component';
 import { OperationPillarComponent } from '../operationtable/pillar/pillar.component';
+import { FinanceTableCurveComponent } from './curve/curve.component';
+import { FinancetablePillarComponent } from './pillar/pillar.component';
 
 @Component({
   selector: 'app-datatable-financetable',
@@ -14,8 +16,8 @@ import { OperationPillarComponent } from '../operationtable/pillar/pillar.compon
   providers: [DatePipe]
 })
 export class DatatableFinancetableComponent implements OnInit {
-  @ViewChild('curve') private readonly curve!: OperationCurveComponent;
+  @ViewChild('curve') private readonly curve!: FinanceTableCurveComponent;
-  @ViewChild('pillar') private readonly pillar!: OperationPillarComponent;
+  @ViewChild('pillar') private readonly pillar!: FinancetablePillarComponent;
   @ViewChild('st') private readonly st!: STComponent;
   type = 1;
   mode = 'year';
@@ -85,7 +87,7 @@ export class DatatableFinancetableComponent implements OnInit {
       enterpriseInfoId: this.enterpriseInfoId
      };
     this.flag = true
-    this.service.request(this.service.$api_operationalReportHistogram, params).subscribe(res => {
+    this.service.request(this.service.$api_financialReportHistogram, params).subscribe(res => {
       if (res) {
         this.chartData = res
         if(this.flag) {
@@ -148,6 +150,7 @@ export class DatatableFinancetableComponent implements OnInit {
     } else if(this.mode === 'month') {
       this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00']
     }
+    this.initPillarData();
   }
 
 }

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

@@ -27,6 +27,7 @@ import { OperationPillarComponent } from './components/operationtable/pillar/pil
 import { OperationCurveComponent } from './components/operationtable/curve/curve.component';
 import { FinanceTableCurveComponent } from './components/financetable/curve/curve.component';
 import { FinancetablePillarComponent } from './components/financetable/pillar/pillar.component';
+import { ComplianceCurveComponent } from './components/compliance/index/curve/curve.component';
 
 const COMPONENTS: Type<void>[] = [
   DatatableDataindexComponent,
@@ -56,7 +57,8 @@ const COMPONENTS: Type<void>[] = [
   OperationCurveComponent,
   DatatableReportingFundInfoComponent,
   FinanceTableCurveComponent,
-  FinancetablePillarComponent
+  FinancetablePillarComponent,
+  ComplianceCurveComponent
 ]
 
 

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

@@ -42,8 +42,20 @@ export class DataService extends BaseService {
 
   // 查询货主报表
   $api_listShipperReportPage = `/api/sdc/report/listShipperReportPage`;
-  // 查询货主报表
+  // 财务报表柱状图
   $api_financialReportHistogram = `/api/sdc/report/financialReportHistogram`;
+  // 合规监控报表-运费直付占比
+  $api_getBillRateDirectPayment = `/api/sdc/reportComplianceMonitor/getBillRateDirectPayment`;
+  // 合规监控报表-货源单占比
+  $api_getBillRateProportion = `/api/sdc/reportComplianceMonitor/getBillRateProportion`;
+  // 合规监控报表-订单合格率
+  $api_getBillRateQualified = `/api/sdc/reportComplianceMonitor/getBillRateQualified`;
+  // 合规监控报表-付款及时率
+  $api_getBillTimelyPayment = `/api/sdc/reportComplianceMonitor/getBillTimelyPayment`;
+  // 合规监控报表-监控报表(折线图)
+  $api_listMonitorSituation = `/api/sdc/reportComplianceMonitor/listMonitorSituation`;
+
+
 
   constructor(public injector: Injector) {
     super(injector);