解决冲突

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

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

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

@@ -0,0 +1,133 @@
+/*
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-07 17:57:23
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-07 18:24:57
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\curve\\curve.component.ts
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+ */
+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';
+const DataSet = require('@antv/data-set');
+import { Chart } from '@antv/g2';
+@Component({
+  selector: 'app-financetable-curve-min',
+  templateUrl: './curve.component.html',
+  styleUrls: ['./curve.component.less']
+})
+export class DatatableCustomindexCurveMinComponent implements OnInit,OnChanges {
+  el: any;
+  @Input() chartData: any;
+  chart: any;
+  data = [
+    { time: '01', type: '订单数', temperature: 7 },
+    { time: '02', city: '运单数', temperature: 3.9 },
+    { time: '03', city: '订单数', temperature: 6.9 },
+    { time: '04', city: '订单数', temperature: 4.2 },
+    { time: '05', city: '订单数', temperature: 9.5 },
+    { time: '06', city: '订单数', temperature: 5.7 },
+    { time: '06', city: '运单数', temperature: 5.7 },
+    { time: '07', city: '运单数', temperature: 14.5 },
+    { time: '08', city: '订单数', temperature: 8.5 },
+    { time: '09', city: '订单数', temperature: 18.4 },
+    { time: '10', city: '订单数', temperature: 11.9 },
+    { time: '11', city: '订单数', temperature: 21.5 },
+    { time: '12', city: '订单数', temperature: 15.2 },
+    { time: '08', city: '运单数', temperature: 8.5 },
+    { time: '09', city: '运单数', temperature: 18.4 },
+    { time: '10', city: '运单数', temperature: 11.9 },
+    { time: '11', city: '运单数', temperature: 21.5 },
+    { time: '12', city: '订单数', temperature: 15.2 },
+  ];
+  
+  constructor(private service: DataService, private ngZone: NgZone) {
+
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.chartData) {
+      // setTimeout(()=>{
+      //   this.chart.render(true)
+      // }, 1000)
+
+    }
+  }
+
+  ngOnInit(): void {
+
+  }
+  reRender() {
+    setTimeout(() => {
+      this.chart.data(this.chartData);
+      this.chart.render();
+    }, 1000)
+  }
+  render(el: ElementRef<HTMLDivElement>): void {
+    this.el = el.nativeElement
+    setTimeout(() => {
+      this.ngZone.runOutsideAngular(() => this.init(this.el));
+      }, 1000)
+  }
+
+  private init(el: HTMLElement): void {
+    this.chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 500,
+    });
+    let value: any = []
+      this.service.request(this.service.$api_getTradingTrend).subscribe((res: any) => {
+     if(res) {
+      res.forEach((element: any) => {
+        value.push({
+          time: element?.time,
+          type: element?.type,
+          temperature: element?.value,
+       });
+       });
+       console.log(value);
+       this.chartData = value
+    this.chart.data(this.chartData);
+    this.chart.scale({
+      time: {
+        range: [0, 1],
+      },
+      number: {
+        nice: true,
+      },
+    });
+    
+    this.chart.tooltip({
+      showCrosshairs: true,
+      shared: true,
+    });
+    
+  
+    this.chart.axis('temperature', {
+      label: {
+        formatter: (val: any) => {
+          return val + '万';
+        },
+      },
+    });
+    this.chart
+    .line()
+    .position('time*temperature')
+    .color('city')
+    .shape('smooth');
+  
+    this.chart
+    .point()
+    .position('time*temperature')
+    .color('city')
+    .shape('circle');
+  this.chart.render();
+        };
+      });
+  
+    
+  }
+}

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

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-04-06 10:57:56
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-07 16:57:05
+ * @LastEditTime : 2022-04-07 18:02:07
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
@@ -43,15 +43,16 @@
       </nz-row>
     </nz-card>
     <nz-card nzTitle="本月交易趋势">
-      <g2-timeline repaint='true'
+      <!-- <g2-timeline 
         [data]="monthData2"
         #timeline
         [titleMap]="{ y1: '订单数', y2: '运单数' }"
         [height]="200"
         [delay]='200' 
-        mask="MM月DD日"
+        mask="MM"
         [slider]="false"
-      ></g2-timeline>
+      ></g2-timeline> -->
+      <app-financetable-curve-min #curve [chartData]='chartData2'></app-financetable-curve-min>
     </nz-card>
     <nz-card nzTitle="实时货源">
       <st

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

@@ -5,7 +5,7 @@ import { map } from 'rxjs/operators';
  * @Author       : Shiming
  * @Date         : 2022-04-06 10:57:56
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-07 16:58:19
+ * @LastEditTime : 2022-04-07 18:02:02
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -14,10 +14,11 @@ 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 { DatatableCustomindexMapComponent } from './map/map.component';
 import { G2TimelineComponent, G2TimelineData } from '@delon/chart/timeline';
 import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
-import { format } from 'date-fns';
+import { FinanceTableCurveComponent } from '../financetable/curve/curve.component';
+
 
 @Component({
   selector: 'app-datatable-datascreen',
@@ -29,10 +30,12 @@ export class DatatableDatascreenComponent implements OnInit {
   @ViewChild('orderSt') private readonly orderSt!: STComponent;
   @ViewChild('map') private readonly map!: DatatableCustomindexMapComponent;
   @ViewChild('timeline', { static: false }) timeline!: G2TimelineComponent;
+  @ViewChild('curve') private readonly curve!: FinanceTableCurveComponent;
 
   columns: STColumn[] = [];
   chartData: any[] = [];
   orderColumns: STColumn[] = [];
+  chartData2: any = {}
   allDeal: any;
   headDeal: any;
   classifyDeal: any;
@@ -40,7 +43,7 @@ export class DatatableDatascreenComponent implements OnInit {
   todayTime: string = '';
 
   monthData: G2TimelineData[] = [];
-  monthData2: Array<any> = this.genData2();
+  monthData2:G2TimelineData[] =[];
   salesData2: Array<any> = this.genData();
   constructor(public service: DataService) {}
   ngOnChanges(changes: any): void {
@@ -64,6 +67,7 @@ export class DatatableDatascreenComponent implements OnInit {
     this.initST();
     this.initOrderST();
     this.initData();
+    this.genData2();
     // this.initLineData();
   }
   setTime() {
@@ -126,24 +130,46 @@ export class DatatableDatascreenComponent implements OnInit {
     console.log(value);
     return value;
   }
-  private genData2(): G2TimelineData[] {
+  initPillarData(){
-    let ress: G2TimelineData[] = [];
+ 
-    this.service.request(this.service.$api_getTradingTrend).subscribe((res: any) => {
+    this.service.request(this.service.$api_getTradingTrend).subscribe(res => {
       if (res) {
-        res.forEach((element: any) => {
+        this.chartData2 = res
-          ress.push({
+        this.curve.reRender()
-            time: element.time,
+      }
-            y1: element.billQuantity,
+    })
-            y2: element.wayBillQuantity
+  }
+  public genData2(): G2TimelineData[] {
+    let value1: any[] = [];
+    this.monthData2 =[];
+     this.service.request(this.service.$api_getTradingTrend).subscribe((res: any) => {
+      if (res) {       
+        // var data1 = new Date('2022.1.1')
+        // var time1 = data1.getTime(); 
+        // console.log(time1);
+           
+        var data2 = new Date('2022.2.1')
+        var time2 = data2.getTime(); 
+        console.log(time2);
+
+        var data3 = new Date('2022.3.1')
+        res.forEach((element: any,i:any) => {
+          console.log(element);
+          console.log(new Date().getTime() + 1000 * 60 * 60 * 24 * 2);
+          console.log(time2);
+          value1.push({
+            time:'Feb',
+            y1: element?.y1,
+            y2: element?.y2
           });
         });
-        console.log(ress);
+        this.monthData2 = res;
+        console.log(this.monthData2);
+
       }
     });
-    if(!ress) {
+   console.log(this.monthData2);
-      setTimeout(() => {},100)
+     return value1;
-    }
-    return ress;
   }
   /**
    * 初始化数据列表

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

@@ -87,16 +87,27 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges {
       });
 
     // 可视化用户数据
-    this.userData = [
+    // this.userData = [
-      { name: '山东', value: 21 },
+    //   { name: '山东', value: 21 },
-      { name: '山东', value: 22},
+    //   { name: '山东', value: 22},
-      { name: '广东', value: 20, },
+    //   { name: '广东', value: 20, },
-      { name: '广东', value: 20  },
+    //   { name: '广东', value: 20  },
-      { name: '四川', value: 120  },
+    //   { name: '四川', value: 120  },
-      { name: '湖南', value: 200  },
+    //   { name: '湖南', value: 200  },
-      { name: '河北', value: 30  },
+    //   { name: '河北', value: 30  },
 
-    ];
+    // ];
+        let value: any = []
+      this.service.request(this.service.$api_getTransactionDistribution).subscribe((res: any) => {
+     if(res) {
+      res.forEach((element: any) => {
+        value.push({
+          name: element.province,
+          value: element.weight,
+       });
+       });
+       console.log(value);
+       this.userData = value
     this.userDv = this.ds.createView().source(this.userData).transform({
         geoDataView: this.worldMap,
         field: 'name',
@@ -129,7 +140,8 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges {
       this.userView.interaction('element-active');
       this.chart.render();
 
-
+    }
+      })
       });
 
       console.log('9999');

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

@@ -40,7 +40,8 @@ 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';
+import { DatatableCustomindexMapComponent } from './components/datascreen/map/map.component';
+import { DatatableCustomindexCurveMinComponent } from './components/datascreen/curve/curve.component';
 
 const COMPONENTS: Type<void>[] = [
   DatatableDataindexComponent,
@@ -74,7 +75,8 @@ const COMPONENTS: Type<void>[] = [
   ComplianceCurveComponent,
   BusitableCurveComponent,
   DatatableCustomindexCurveComponent,
-  DatatableCustomindexMapComponent
+  DatatableCustomindexMapComponent,
+  DatatableCustomindexCurveMinComponent
 ]