解决冲突

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

@@ -1 +1,11 @@
-<g2-custom delay="100" (render)="render($event)"></g2-custom>
+<!--
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-06 17:57:07
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-07 15:48:36
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\curve\\map.component.html
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+-->
+<g2-custom delay="200" (render)="render($event)"></g2-custom>

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

@@ -20,11 +20,7 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges {
   constructor(private service: DataService, private ngZone: NgZone) {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.chartData && !changes.chartData.isFirstChange()) {
+    if (this.chartData) {
-      this.userData = changes.chartData.currentValue;
-      console.log(this.userView);
-      
-      this.userView.source(this.userData)
       // setTimeout(()=>{
       //   this.chart.render(true)
       // }, 1000)
@@ -91,21 +87,17 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges {
       });
 
     // 可视化用户数据
-    this.userData = this.chartData
+    this.userData = [
-    console.log(this.userData);
+      { name: '山东', value: 21 },
+      { name: '山东', value: 22},
+      { name: '广东', value: 20, },
+      { name: '广东', value: 20  },
+      { name: '四川', value: 120  },
+      { name: '湖南', value: 200  },
+      { name: '河北', value: 30  },
 
-    //   let value: any = []
+    ];
-    //   this.service.request(this.service.$api_getTransactionDistribution).subscribe((res: any) => {
+    this.userDv = this.ds.createView().source(this.userData).transform({
-    //  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',
         type: 'geo.region',
@@ -113,7 +105,6 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges {
       }).transform({
         type: 'map',
         callback: (obj: { trend: string; value: number }) => {
-          console.log(this.userData);
           
           obj.trend = obj.value > 100 ? '蓝色地区' : '红色地区';
           return obj;
@@ -126,6 +117,9 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges {
     //     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: {
@@ -134,10 +128,13 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges {
       // });
       this.userView.interaction('element-active');
       this.chart.render();
-    //  }
-      // });
 
-    })
+
+      });
+
+      console.log('9999');
+  
+
   }
   
 }

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

@@ -4,14 +4,15 @@
  * @Author       : Shiming
  * @Date         : 2022-04-06 10:57:56
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-07 14:59:07
+ * @LastEditTime : 2022-04-07 16:16:57
  * @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 style="display: flex; justify-content: center; align-items: center">
+<div >
-  <h1>运多星网络货运平台实时交易监控</h1>
+  <h1 style="display: flex; justify-content: center; align-items: center;margin: 0; padding: 0; font-size: 25px;font-weight: 700;">运多星网络货运平台</h1>
+  <h1 style="display: flex; justify-content: center; align-items: center;margin: 0; padding: 0;font-size: 25px;font-weight: 700;">实时交易监控</h1>
 </div>
 <div nz-row [nzGutter]="24">
   <div nz-col class="gutter-row" [nzSpan]="8">
@@ -34,10 +35,12 @@
       </nz-row>
     </nz-card>
     <nz-card nzTitle="本月交易趋势">
-      <g2-timeline
+      <g2-timeline repaint='true'
         [data]="monthData"
+        #timeline
         [titleMap]="{ y1: '订单数', y2: '运单数' }"
         [height]="200"
+        [delay]='500' 
         mask="MM月DD日"
         [slider]="false"
       ></g2-timeline>
@@ -86,7 +89,7 @@
     <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>
+        <g2-bar #bar height="200" [delay]='500' repaint='true' [title]="'本月发货量排名'" [data]="salesData2"  (ready)='genData()'></g2-bar>
       </nz-row>
     </nz-card>
   </div>

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 15:16:53
+ * @LastEditTime : 2022-04-07 15:53:41
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -15,7 +15,7 @@ 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 { G2TimelineComponent, G2TimelineData } from '@delon/chart/timeline';
 import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
 import { format } from 'date-fns';
 
@@ -29,6 +29,8 @@ export class DatatableDatascreenComponent implements OnInit {
   @ViewChild('st') private readonly st!: STComponent;
   @ViewChild('orderSt') private readonly orderSt!: STComponent;
   @ViewChild('map') private readonly map!: DatatableCustomindexMapComponent;
+  @ViewChild('timeline', { static: false }) timeline!: G2TimelineComponent;
+
   columns: STColumn[] = [];
   chartData: any[] = [];
   orderColumns: STColumn[] = [];
@@ -39,11 +41,14 @@ export class DatatableDatascreenComponent implements OnInit {
   
   monthData: G2TimelineData[] = [];
   salesData :any;
-  salesData2 :any = this.genData();
+  salesData2 :Array<any> = this.genData();
   constructor(public service: DataService) {
    
    }
+   ngOnChanges(changes: any): void {
+    console.log(changes);
     
+  }
   /**
    * 查询参数
    */
@@ -95,16 +100,12 @@ export class DatatableDatascreenComponent implements OnInit {
   initLineData(){
     this.service.request(this.service.$api_getTradingTrend).subscribe((res: any) => {
       this.monthData = res
-      // for (let i = 0; i < 20; i += 1) {
+      if (this.timeline) {
-      //   this.monthData.push({
+        console.log(this.timeline);
-      //     time: new Date().getTime() + 1000 * 60 * 60 * 24 * i,
+        
-      //     y1: Math.floor(Math.random() * 100) + 1000,
+        // 等待组件渲染
-      //     y2: Math.floor(Math.random() * 100) + 10,
+        setTimeout(() => this.timeline.changeData());
-      //   });
+      }
-      // }
-    })
-    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,
@@ -123,6 +124,13 @@ export class DatatableDatascreenComponent implements OnInit {
     });
     });
     this.salesData = value
+    // if (this.pie) {
+    //   // 等待组件渲染
+    //   setTimeout(() => {
+    //     console.log('a')
+    //     this.pie.changeData()
+    //   });
+    // }
     console.log(this.salesData);
   })
   }