fix bug

proxy.conf.js

@@ -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/busitable/busiindex/busiindex.component.html

@@ -37,12 +37,21 @@
       </div>
     </div>
   </ng-template>
+
   <div nz-row [nzGutter]="64">
     <div nz-col class="gutter-row" [nzSpan]="12">
-      <app-busitable-curve [chartData]="chartData.chainRatio"></app-busitable-curve>
+      <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">
-      <app-busitable-pillar [chartData]="chartData.performance"></app-busitable-pillar>
+      <div class="title">
+        <div class="box" style="background-color: #f59a23;"></div> 业绩量(元)
+      </div>
+      <app-busitable-pillar #pillar [chartData]="chartData.performance"></app-busitable-pillar>
     </div>
 
   </div>

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

@@ -9,3 +9,13 @@
     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.ts

@@ -1,8 +1,10 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, 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 { Chart } from '@antv/g2';
+import { BusitableCurveComponent } from './curve2/curve.component';
 
 @Component({
   selector: 'app-datatable-busiindex',
@@ -13,6 +15,7 @@ import { DataService } from '../../../services/data.service';
 })
 export class DatatableBusiindexComponent implements OnInit {
   @ViewChild('st') private readonly st!: STComponent;
+  @ViewChild('curve') private readonly curve!: BusitableCurveComponent;
   type = 1;
   mode = 'year';
   date: any = null;
@@ -23,7 +26,9 @@ export class DatatableBusiindexComponent implements OnInit {
   timeNext: any = ['2022-01-01 00:00:00']
   dateFormat = 'yyyy-MM-dd';
   today = new Date();
-  chartData: any = []
+  chainRatio: any = []
+  chartData: any = {}
+  el: any;
 
   columns: STColumn[] = [
     { title: '运营主体', index: 'networkTransporterName', className: 'text-center' },
@@ -58,7 +63,7 @@ export class DatatableBusiindexComponent implements OnInit {
     return { ...params };
   }
 
-  constructor(public service: DataService, private datePipe: DatePipe) { }
+  constructor(public service: DataService, private datePipe: DatePipe,  private ngZone: NgZone) { }
   ngOnInit(): void {
     this.initData()
   }
@@ -73,9 +78,14 @@ export class DatatableBusiindexComponent implements OnInit {
       time: this.timeNext,
       type
      };
-    this.service.getPerformanceReportHistogram(params).subscribe(res => {
+    this.service.request(this.service.$api_performanceReportHistogram, params).subscribe(res => {
       if (res) {
+        this.chainRatio = res.chainRatio
         this.chartData = res
+        setTimeout(() => {
+          this.ngZone.runOutsideAngular(() => this.init(this.el));
+        }, 1000);
+        
       }
     })
   }
@@ -122,4 +132,37 @@ export class DatatableBusiindexComponent implements OnInit {
 
   }
 
+  render(el: ElementRef<HTMLDivElement>): void {
+    this.el = el.nativeElement
+   
+  }
+
+  private init(el: HTMLElement): void {
+    const chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 500,
+    });
+
+    chart.data(this.chainRatio);
+    chart.scale({
+      year: {
+        range: [0, 1],
+      },
+      value: {
+        min: 0,
+        nice: true,
+      },
+    });
+
+    chart.tooltip({
+      showCrosshairs: true, // 展示 Tooltip 辅助线
+      shared: true,
+    });
+
+    chart.line().position('time*value').label('value');
+    chart.point().position('time*value');
+
+    chart.render();
+  }
 }

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

@@ -1,24 +0,0 @@
-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/busitable/busiindex/curve/curve.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, 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 DataSet from '@antv/data-set';
 import { Chart } from '@antv/g2';
@@ -8,8 +8,9 @@ import { DataService } from 'src/app/routes/datatable/services/data.service';
   templateUrl: './curve.component.html',
   styleUrls: ['./curve.component.less']
 })
-export class busitableCurveComponent implements OnInit {
+export class BusitableCurveComponent implements OnInit, OnChanges {
-  @Input() chartData: any = {}
+  @Input() chartData: any;
+  el: any;
   constructor(private service: DataService, private ngZone: NgZone) {
 
   }
@@ -18,7 +19,14 @@ export class busitableCurveComponent implements OnInit {
 
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.chartData) {
+      setTimeout(() => {
+        this.ngZone.runOutsideAngular(() => this.init(this.el));
+      }, 2000)
 
+    }
+  }
 
 
   handleClick(data: G2MiniAreaClickItem): void {
@@ -26,32 +34,19 @@ export class busitableCurveComponent implements OnInit {
   }
 
   render(el: ElementRef<HTMLDivElement>): void {
-    this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
+    this.el = el.nativeElement
+   // this.ngZone.runOutsideAngular(() => this.init(this.el));
   }
   private init(el: HTMLElement): void {
-    const data = [
-      { month: '01月', value: 3 },
-      { month: '02月', value: 4 },
-      { month: '03月', value: 3.5 },
-      { month: '04月', value: 5 },
-      { month: '05月', value: 4.9 },
-      { month: '06月', value: 6 },
-      { month: '07月', value: 7 },
-      { month: '08月', value: 9 },
-      { month: '09月', value: 13 },
-      { month: '10月', value: 13 },
-      { month: '11月', value: 13 },
-      { month: '12月', value: 13 },
-    ];
     const chart = new Chart({
       container: el,
       autoFit: true,
       height: 500,
     });
-    
+
-    chart.data(data);
+    chart.data(this.chartData);
     chart.scale({
-      month: {
+      year: {
         range: [0, 1],
       },
       value: {
@@ -59,16 +54,16 @@ export class busitableCurveComponent implements OnInit {
         nice: true,
       },
     });
-    
+
     chart.tooltip({
       showCrosshairs: true, // 展示 Tooltip 辅助线
       shared: true,
     });
-    
+
-    chart.line().position('month*value').label('value');
+    chart.line().position('time*value').label('value');
-    //chart.point().position('month*value');
+    chart.point().position('time*value');
-    
+
     chart.render();
-}
+  }
 
 }

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

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

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

@@ -0,0 +1,92 @@
+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';
+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 {
+  @Input() chartData: any ;
+  el: any;
+  constructor(private service: DataService, private ngZone: NgZone) {
+
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if(this.chartData){
+      setTimeout(()=>{
+        this.ngZone.runOutsideAngular(() => this.init(this.el));
+      }, 3000)
+     
+    }
+  }
+
+  ngOnInit(): void {
+    this.initData()
+  }
+  initData(){
+    this.service.request(this.service.$api_operationalReportWaybillStatusDistribution).subscribe(res => {
+      if (res) {
+        this.chartData = res
+        this.ngZone.runOutsideAngular(() => this.init(this.el));
+      }
+    })
+  }
+  render(el: ElementRef<HTMLDivElement>): void {
+    this.el = el.nativeElement
+  }
+  private init(el: HTMLElement): void {
+    const ds = new DataSet();
+    const dv = ds.createView().source(this.chartData);
+    dv.transform({
+      type: 'map',
+      callback: row => {
+        row.year = parseInt(row.year, 10);
+        return row;
+      }
+    }).transform({
+      type: 'regression',
+      method: 'polynomial',
+      fields: ['year', 'value'],
+      bandwidth: 0.1,
+      as: ['Year', 'Value']
+    });
+
+    const chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 500,
+      padding: [20, 40],
+    });
+
+    const view1 = chart.createView();
+    view1.data(this.chartData);
+    view1.scale('price', {
+      nice: true,
+    });
+    view1.tooltip({
+      showMarkers: false,
+      shared: true,
+    });
+
+    view1
+      .interval()
+      .position('month*price')
+      .color('name')
+      .adjust([
+        {
+          type: 'dodge',
+          marginRatio: 0,
+        },
+      ]);
+
+
+   // chart.interaction('active-region');
+    chart.render();
+
+  }
+}
+
+

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

@@ -1,24 +0,0 @@
-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/busitable/busiindex/pillar/pillar.component.ts

@@ -6,25 +6,27 @@ import { DataService } from 'src/app/routes/datatable/services/data.service';
   templateUrl: './pillar.component.html',
   styleUrls: ['./pillar.component.less']
 })
-export class busitablePillarComponent implements OnInit {
+export class BusitablePillarComponent implements OnInit, OnChanges {
+  
   el: any;
   @Input() chartData: any ;
   constructor(private service: DataService, private ngZone: NgZone) {
 
   }
-  ngOnInit(): void {
+  ngOnChanges(changes: SimpleChanges): void {
-    this.initData()
+    if(this.chartData){
-  }
+      setTimeout(()=>{
-  initData(){
-    this.service.request(this.service.$api_performanceReportHistogram).subscribe(res => {
-      if (res) {
-        this.chartData = res.performance
         this.ngZone.runOutsideAngular(() => this.init(this.el));
-      }
+      }, 1000)
-    })
+     
+    }
+  }
+
+  ngOnInit(): void {
+    
   }
   render(el: ElementRef<HTMLDivElement>): void {
-    this.el = el
+    this.el = el.nativeElement
   }
 
 

src/app/routes/datatable/components/operationtable/pie/pie.component.spec.ts

@@ -1,24 +0,0 @@
-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/datatable.module.ts

@@ -21,9 +21,9 @@ import { DatatableMancustomtableComponent } from './components/customtable/mancu
 import { DatatablePartnertableComponent } from './components/customtable/partnertable/partnertable.component';
 import { DatatableBusiindexComponent } from './components/busitable/busiindex/busiindex.component';
 import { DatatableMantableComponent } from './components/busitable/mantable/mantable.component';
-import { busitableCurveComponent } from './components/busitable/busiindex/curve/curve.component';
+import { BusitablePillarComponent } from './components/busitable/busiindex/pillar/pillar.component';
-import { busitablePillarComponent } from './components/busitable/busiindex/pillar/pillar.component';
 import { DatatableReportingFundInfoComponent } from './reporting/components/fund-info/fund-info.component';
+import { BusitableCurveComponent } from './components/busitable/busiindex/curve2/curve.component';
 
 const COMPONENTS: Type<void>[] = [
   DatatableDataindexComponent,
@@ -46,9 +46,9 @@ const COMPONENTS: Type<void>[] = [
   DatatablePartnertableComponent,
   DatatableBusiindexComponent,
   DatatableMantableComponent,
-  busitableCurveComponent,
+  BusitablePillarComponent,
-  busitablePillarComponent,
   DatatableFundReportingComponent,
+  BusitableCurveComponent,
   DatatableReportingFundInfoComponent]