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

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

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

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
 import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
 import { DataService } from '../../../services/data.service';
 // import DataSet from '@antv/data-set';
@@ -9,160 +9,75 @@ import { Chart } from '@antv/g2';
   templateUrl: './curve.component.html',
   styleUrls: ['./curve.component.less']
 })
-export class FinanceTableCurveComponent implements OnInit {
+export class FinanceTableCurveComponent implements OnInit,OnChanges {
-  constructor(private service: DataService, private ngZone: NgZone) {}
+  el: any;
+  @Input() chartData: any;
+  chart: any;
+  constructor(private service: DataService, private ngZone: NgZone) {
 
-  ngOnInit(): void {}
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.chartData) {
+      // setTimeout(()=>{
+      //   this.chart.render(true)
+      // }, 1000)
 
-  handleClick(data: G2MiniAreaClickItem): void {
+    }
-    this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
   }
 
+  ngOnInit(): void {
+
+  }
+  reRender() {
+    setTimeout(() => {
+      this.chart.data(this.chartData);
+      this.chart.render();
+    }, 1000)
+  }
   render(el: ElementRef<HTMLDivElement>): void {
-    this.ngZone.runOutsideAngular(() => this.initBar(el.nativeElement));
+    this.el = el.nativeElement
+    setTimeout(() => {
+      this.ngZone.runOutsideAngular(() => this.init(this.el));
+      }, 1000)
   }
-  private initBar(el: HTMLElement): void {
-    const data = [
-      { name: '已收金额（元）', 月份: 'Jan.', 月均降雨量: 18.9 },
-      { name: '已收金额（元）', 月份: 'Feb.', 月均降雨量: 28.8 },
-      { name: '已收金额（元）', 月份: 'Mar.', 月均降雨量: 39.3 },
-      { name: '已收金额（元）', 月份: 'Apr.', 月均降雨量: 81.4 },
-      { name: '已收金额（元）', 月份: 'May', 月均降雨量: 47 },
-      { name: '已收金额（元）', 月份: 'Jun.', 月均降雨量: 20.3 },
-      { name: '已收金额（元）', 月份: 'Jul.', 月均降雨量: 24 },
-      { name: '已收金额（元）', 月份: 'Aug.', 月均降雨量: 35.6 },
-      { name: '已付运费（元）', 月份: 'Jan.', 月均降雨量: 12.4 },
-      { name: '已付运费（元）', 月份: 'Feb.', 月均降雨量: 23.2 },
-      { name: '已付运费（元）', 月份: 'Mar.', 月均降雨量: 34.5 },
-      { name: '已付运费（元）', 月份: 'Apr.', 月均降雨量: 99.7 },
-      { name: '已付运费（元）', 月份: 'May', 月均降雨量: 52.6 },
-      { name: '已付运费（元）', 月份: 'Jun.', 月均降雨量: 35.5 },
-      { name: '已付运费（元）', 月份: 'Jul.', 月均降雨量: 37.4 },
-      { name: '已付运费（元）', 月份: 'Aug.', 月均降雨量: 42.4 }
-    ];
 
-    const chart = new Chart({
+  private init(el: HTMLElement): void {
+    this.chart = new Chart({
       container: el,
       autoFit: true,
-      height: 500
+      height: 500,
-    });
-    chart.data(data);
-    chart.scale('月均降雨量', {
-      nice: true
-    });
-    chart.tooltip({
-      showMarkers: false,
-      shared: true
-    });
-    // 图表下方图形文字自定义
-    chart.legend({
-      items: [
-        {
-          name: '已收金额（元）',
-          value: 'node_load1',
-          marker: {
-            symbol: 'circle',
-            style: { fill: '#6395f9' }
-          }
-        },
-        {
-          name: '已付运费（元）',
-          value: 'node_load1',
-          marker: {
-            symbol: 'circle',
-            style: { fill: '#62daab' }
-          }
-        }
-      ]
     });
 
-    chart
+    this.chart.data(this.chartData);
-      .interval()
+    this.chart.scale({
-      .position('月份*月均降雨量')
+      time: {
-      .color('name')
+        range: [0, 1],
-      .adjust([
+      },
-        {
+      number: {
-          type: 'dodge',
+        nice: true,
-          marginRatio: 0
-        }
-      ]);
-
-    chart.render();
-  }
-
-  render2(el: ElementRef<HTMLDivElement>): void {
-    this.ngZone.runOutsideAngular(() => this.initCurve(el.nativeElement));
-  }
-
-  private initCurve(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 }
-    ];
-
-    chart.data(data);
-    //刻度自定义
-    chart.scale({
-      data: {
-        range: [0, 1]
       },
-      value: {
-        min: 0,
-        nice: true
-      }
     });
-    // 图表下方图形文字自定义
+    
-    chart.legend({
+    this.chart.tooltip({
-      items: [
-        {
-          name: '平均附加费率',
-          value: 'node_load1',
-          marker: {
-            symbol: 'circle',
-            style: { fill: '#6193f7' }
-          }
-        }
-      ]
-    });
-    // 提示自定义
-    chart.tooltip({
       showCrosshairs: true,
-      shared: true
+      shared: true,
     });
-
+    
-    //数据格式化
+    this.chart.axis('number', {
-    chart.axis('value', {
       label: {
-        formatter: val => {
+        formatter: (val: any) => {
-          return val + ' %';
+          return val;
-        }
+        },
-      }
+      },
     });
-    // 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
+    
-    chart
+    this.chart
       .line()
-      .position('data*value')
+      .position('time*number')
-      .color('label')
+      .color('name')
-      .tooltip('label*value', (name: any, value: any) => {
+    
-        return {
+    
-          name: name,
+    this.chart.render();
-          value: value + '%'
+    
-        };
-      });
-    // 在x*y的坐标上按z值绘制圆点
-    // chart.point().position('data*value').size(4).color('label').shape('circle');
-    chart.render();
   }
 }

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

@@ -64,5 +64,12 @@
       </div>
     </div>
   </ng-template>
-  <app-financetable-curve></app-financetable-curve>
+  <div nz-row [nzGutter]="64">
+    <div nz-col class="gutter-row" [nzSpan]="12">
+     <app-operation-curve #curve [chartData]="chartData.lineChart"></app-operation-curve>
+    </div>
+    <div nz-col class="gutter-row" [nzSpan]="12">
+      <app-operation-pillar #pillar [chartData]="chartData.histogram"></app-operation-pillar>
+    </div>
+  </div>
 </nz-card>

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

@@ -4,6 +4,8 @@ import { SFSchema } from '@delon/form';
 import { DatePipe, ModalHelper, _HttpClient } from '@delon/theme';
 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';
 
 @Component({
   selector: 'app-datatable-financetable',
@@ -12,6 +14,8 @@ import { differenceInCalendarDays } from 'date-fns';
   providers: [DatePipe]
 })
 export class DatatableFinancetableComponent implements OnInit {
+  @ViewChild('curve') private readonly curve!: OperationCurveComponent;
+  @ViewChild('pillar') private readonly pillar!: OperationPillarComponent;
   @ViewChild('st') private readonly st!: STComponent;
   type = 1;
   mode = 'year';
@@ -24,8 +28,9 @@ export class DatatableFinancetableComponent implements OnInit {
   timeNext: any = ['2022-01-01 00:00:00']
   today = new Date();
   enterpriseInfoId = ''
-  enterpriseInfoIdPie = ''
   interManlist: any = []
+  chartData: any = {}
+  flag = false;
   columns: STColumn[] = [
     { title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
     { title: '客户预存款', index: 'czcgje',render: 'czcgje', className: 'text-center' },
@@ -63,13 +68,37 @@ export class DatatableFinancetableComponent implements OnInit {
 
   constructor(public service: DataService, private datePipe: DatePipe) { }
   ngOnInit(): void {
-    this.initData()
+    this.initData();
+    this.initPillarData();
+  }
+
+  initPillarData(){
+    let type = 1
+    if(this.mode === 'year') {
+      type = 1
+    } else if(this.mode === 'month') {
+      type = 2
+    }
+    const params: any = {
+      time: this.timeNext,
+      type,
+      enterpriseInfoId: this.enterpriseInfoId
+     };
+    this.flag = true
+    this.service.request(this.service.$api_operationalReportHistogram, params).subscribe(res => {
+      if (res) {
+        this.chartData = res
+        if(this.flag) {
+          this.pillar.reRender()
+          this.curve.reRender()
+        }
+      }
+    })
   }
   initData() {
     this.service.getNetworkFreightForwarder().subscribe(res => {
       this.interManlist = res
       this.enterpriseInfoId = res[0].value
-      this.enterpriseInfoIdPie = res[0].value
     })
   }
 

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

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

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

@@ -0,0 +1,75 @@
+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-financetable-pillar',
+  templateUrl: './pillar.component.html',
+  styleUrls: ['./pillar.component.less']
+})
+export class FinancetablePillarComponent 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);
+      console.log(this.chartData)
+      this.chart.render();
+    }, 1000)
+  }
+  render(el: ElementRef<HTMLDivElement>): void {
+    this.el = el.nativeElement
+    setTimeout(() => {
+    this.ngZone.runOutsideAngular(() => this.init(this.el));
+    },1000)
+  }
+
+  private init(el: HTMLElement): void {
+    this.chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 500,
+    });
+
+    this.chart.data(this.chartData);
+
+    this.chart.scale('number', {
+      nice: true,
+    });
+    this.chart.tooltip({
+      showMarkers: false,
+      shared: true,
+    });
+
+    this.chart
+      .interval()
+      .position('time*number')
+      .color('name')
+      .adjust([
+        {
+          type: 'dodge',
+          marginRatio: 0,
+        },
+      ]);
+
+    this.chart.interaction('active-region');
+
+    this.chart.render();
+  }
+
+}

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

@@ -26,6 +26,7 @@ import { BusitableCurveComponent } from './components/busitable/busiindex/curve/
 import { OperationPillarComponent } from './components/operationtable/pillar/pillar.component';
 import { OperationCurveComponent } from './components/operationtable/curve/curve.component';
 import { FinanceTableCurveComponent } from './components/financetable/curve/curve.component';
+import { FinancetablePillarComponent } from './components/financetable/pillar/pillar.component';
 
 const COMPONENTS: Type<void>[] = [
   DatatableDataindexComponent,
@@ -54,7 +55,8 @@ const COMPONENTS: Type<void>[] = [
   OperationPillarComponent,
   OperationCurveComponent,
   DatatableReportingFundInfoComponent,
-  FinanceTableCurveComponent
+  FinanceTableCurveComponent,
+  FinancetablePillarComponent
 ]
 
 

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

@@ -42,6 +42,8 @@ export class DataService extends BaseService {
 
   // 查询货主报表
   $api_listShipperReportPage = `/api/sdc/report/listShipperReportPage`;
+  // 查询货主报表
+  $api_financialReportHistogram = `/api/sdc/report/financialReportHistogram`;
 
   constructor(public injector: Injector) {
     super(injector);