解决冲突

2022-04-07 02:04:09 +08:00
parent 6e40152bc9
commit a477278651
3 changed files with 179 additions and 91 deletions
--- a/src/app/routes/datatable/components/datascreen/curve/map.component.ts
+++ b/src/app/routes/datatable/components/datascreen/curve/map.component.ts
@ -12,6 +12,11 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges {
  @Input() chartData: any;
  chart: any;
  mapData: any;
+  ds!: DataSet ;
+  worldMap: any;
+  userView: any;
+  userDv: any;
+  userData: any = [];
  constructor(private service: DataService, private ngZone: NgZone) {}

  ngOnChanges(changes: SimpleChanges): void {
@ -40,90 +45,96 @@ export class DatatableCustomindexMapComponent implements OnInit, OnChanges {
    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/china.json')
      .then(res => res.json())
      .then(mapData => {
-        console.log(mapData);
      this.mapData =mapData
+      this.chart = new Chart({
+        container: el,
+        autoFit: true,
+        height: 540,
+        padding: [0, 0]
+      });
+      this.chart.tooltip({
+        showTitle: false,
+        showMarkers: false,
+        shared: true
+      });
+      // 同步度量
+      this.chart.scale({
+        longitude: {
+          sync: true
+        },
+        latitude: {
+          sync: true
+        }
+      });
+      this.chart.axis(false);
+      this.chart.legend('trend', {
+        position: 'left'
+      });
+      console.log('8888');
+  
+      // 绘制世界地图背景
+      this.ds = new DataSet();
+      this.worldMap = this.ds.createView('back').source(this.mapData, {
+        type: 'GeoJSON'
+      });
+      const worldMapView = this.chart.createView();
+      worldMapView.data(this.worldMap.rows);
+      worldMapView.tooltip(false);
+      worldMapView.polygon().position('longitude*latitude').style({
+        fill: '#fff',
+        stroke: '#ccc',
+        lineWidth: 1
      });
-    this.chart = new Chart({
-      container: el,
-      autoFit: true,
-      height: 500,
-      padding: [0, 0]
-    });
-    this.chart.tooltip({
-      showTitle: false,
-      showMarkers: false,
-      shared: true
-    });
-    // 同步度量
-    this.chart.scale({
-      longitude: {
-        sync: true
-      },
-      latitude: {
-        sync: true
-      }
-    });
-    this.chart.axis(false);
-    this.chart.legend('trend', {
-      position: 'left'
-    });
-
-    // 绘制世界地图背景
-    const ds = new DataSet();
-    const worldMap = ds.createView('back').source(this.mapData, {
-      type: 'GeoJSON'
-    });
-    const worldMapView = this.chart.createView();
-    worldMapView.data(worldMap.rows);
-    worldMapView.tooltip(false);
-    worldMapView.polygon().position('longitude*latitude').style({
-      fill: '#fff',
-      stroke: '#ccc',
-      lineWidth: 1
-    });

    // 可视化用户数据
-    const userData = [
-      { name: 'China', value: 106.3 },
+    this.userData = [
+      { name: '山东', value: '21',trend:'#F51D27'  },
+      { name: '山东', value: 22},
+      { name: '广东', value: 20,trend:'#0A61D7'  },
+      { name: '广东', value: 20  },
+      { name: '四川', value: 120  },
+      { name: '湖南', value: 200  },
+      { name: '河北', value: 30  },
+
    ];
-    const userDv = ds
-      .createView()
-      .source(userData)
-      .transform({
-        geoDataView: worldMap,
+    this.userDv = this.ds.createView().source(this.userData).transform({
+        geoDataView: this.worldMap,
        field: 'name',
        type: 'geo.region',
        as: ['longitude', 'latitude']
-      })
-      .transform({
+      }).transform({
        type: 'map',
        callback: (obj: { trend: string; value: number }) => {
-          obj.trend = obj.value > 100 ? '男性更多' : '女性更多';
+          
+          obj.trend = obj.value > 100 ? '蓝色地区' : '红色地区';
          return obj;
        }
      });
-    const userView = this.chart.createView();
-    userView.data(userDv.rows);
-    userView.scale({
-      trend: {
-        alias: '每100位女性对应的男性数量'
-      }
-    });
-    userView
-      .polygon()
-      .position('longitude*latitude')
-      .color('trend', ['#F51D27', '#0A61D7'])
-      .tooltip('name*trend')
-      .style({
-        fillOpacity: 0.85
-      })
-      .animate({
-        leave: {
-          animation: 'fade-out'
-        }
-      });
-    userView.interaction('element-active');
+    this.userView = this.chart.createView();
+    this.userView.data(this.userDv.rows);
+    // this.userView.scale({
+    //   trend: {
+    //     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: {
+      //     animation: 'fade-out'
+      //   }
+      // });
+      this.userView.interaction('element-active');
+      this.chart.render();
+
+
+      });
+
+      console.log('9999');
+  

-    this.chart.render();
  }
+  
 }
--- a/src/app/routes/datatable/components/datascreen/datascreen.component.html
+++ b/src/app/routes/datatable/components/datascreen/datascreen.component.html
@ -4,13 +4,13 @@
 * @Author       : Shiming
 * @Date         : 2022-04-06 10:57:56
 * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-06 20:39:43
+ * @LastEditTime : 2022-04-07 01:26:56
 * @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 nz-row [nzGutter]="16">
+<div nz-row [nzGutter]="24">
  <div nz-col class="gutter-row" [nzSpan]="8">
    <nz-card nzTitle="2022全年交易情况">
      <nz-row [nzGutter]="16">
@ -31,26 +31,60 @@
      </nz-row>
    </nz-card>
    <nz-card nzTitle="本月交易趋势">
-
+      <g2-timeline
+      [data]="chartData"
+      [titleMap]="{ y1: '客流量', y2: '支付笔数' }"
+      [height]="200"
+      mask="MM月DD日"
+      [slider]="false"
+    ></g2-timeline>
    </nz-card>
    <nz-card nzTitle="实时货源">
-      <st #st multiSort bordered [columns]="columns" [ps]="20" [data]="service.$api_listShipperReportPage"
+      <st #st multiSort bordered [columns]="columns" [ps]="5" [data]="service.$api_listShipperReportPage"
        [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
        [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
-        [page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="service.http.loading">
+        [page]="{ show: false, showSize: false, pageSizes: [5, 50, 100] }" [loading]="service.http.loading">
      </st>
    </nz-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="8">
-    <!-- <div>
-   
-    </div>
-    <nz-card nzTitle="本月发货量排名">
-  
-    </nz-card> -->
-    <app-datatable-customindex-map #map [chartData]="chartData"></app-datatable-customindex-map>
+    <nz-card>
+      <nz-row [nzGutter]="24">
+        <nz-col [nzSpan]="8">
+          <nz-statistic [nzValue]="(2019.111 | number: '1.0-2')!" [nzTitle]="'今日交易额'"></nz-statistic> 
+        </nz-col>
+        <nz-col [nzSpan]="8">
+          <nz-statistic [nzValue]="(1949101 | number)!" [nzTitle]="'本月交易额'"></nz-statistic>
+        </nz-col>
+        <nz-col [nzSpan]="8">
+          <nz-statistic [nzValue]="(2019.111 | number: '1.0-2')!" [nzTitle]="'累计交易额'"></nz-statistic>
+        </nz-col>
+      </nz-row>
+    </nz-card>
+    <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]="salesData" (clickItem)="handleClick($event)"></g2-bar>
+      </nz-row>
+    </nz-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="8">
+    <nz-card>
+      <nz-row [nzGutter]="24">
+        <nz-col [nzSpan]="6">
+          <nz-statistic [nzValue]="(1949101 | number)!" [nzTitle]="'货主'"></nz-statistic>
+        </nz-col>
+        <nz-col [nzSpan]="6">
+          <nz-statistic [nzValue]="(2019.111 | number: '1.0-2')!" [nzTitle]="'合伙人'"></nz-statistic>
+        </nz-col>
+        <nz-col [nzSpan]="6">
+          <nz-statistic [nzValue]="(1949101 | number)!" [nzTitle]="'司机'"></nz-statistic>
+        </nz-col>
+        <nz-col [nzSpan]="6">
+          <nz-statistic [nzValue]="(2019.111 | number: '1.0-2')!" [nzTitle]="'车辆'"></nz-statistic>
+        </nz-col>
+      </nz-row>
+    </nz-card>
    <nz-card nzTitle="今日交易情况">
      <nz-row [nzGutter]="16">
        <nz-col [nzSpan]="12">
@ -70,14 +104,27 @@
      </nz-row>
    </nz-card>
    <nz-card nzTitle="本月运营质量监测">
-
+       <nz-row [nzGutter]="24">
+        <nz-col [nzSpan]="6">
+          <g2-pie percent="28" subTitle="中式快餐" total="28%" height="130"></g2-pie>
+        </nz-col>
+        <nz-col [nzSpan]="6">
+          <g2-pie percent="28" subTitle="中式快餐" total="28%" height="130"></g2-pie>
+        </nz-col>
+        <nz-col [nzSpan]="6">
+          <g2-pie percent="28" subTitle="中式快餐" total="28%" height="130"></g2-pie>
+        </nz-col>
+        <nz-col [nzSpan]="6">
+          <g2-pie percent="28" subTitle="中式快餐" total="28%" height="130"></g2-pie>
+        </nz-col>
+      </nz-row>
    </nz-card>
    <nz-card nzTitle="实时运单风控">
-      <!-- <st #st multiSort bordered [columns]="orderColumns" [ps]="20" [data]="service.$api_listShipperReportPage"
+      <st #st multiSort bordered [columns]="orderColumns" [ps]="5" [data]="service.$api_listShipperReportPage"
      [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqOrderParams }"
      [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
-      [page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="service.http.loading">
-    </st> -->
+      [page]="{ show: false, showSize: false, pageSizes: [5, 50, 100] }" [loading]="service.http.loading">
+    </st>
    </nz-card>
  </div>
 </div>
--- a/src/app/routes/datatable/components/datascreen/datascreen.component.ts
+++ b/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-06 20:39:15
+ * @LastEditTime : 2022-04-07 01:48:44
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.ts
 * Copyright (C) 2022 huzhenhong. All rights reserved.
 */
@ -15,6 +15,10 @@ 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 { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
+import { format } from 'date-fns';
+

@Component({
  selector: 'app-datatable-datascreen',
@ -26,8 +30,9 @@ export class DatatableDatascreenComponent implements OnInit {
  @ViewChild('orderSt') private readonly orderSt!: STComponent;
  @ViewChild('map') private readonly map!: DatatableCustomindexMapComponent;
  columns: STColumn[] = [];
-  chartData: any = [];
-  orderColumns!: STColumn[];
+  chartData: G2TimelineData[] = [];
+  orderColumns: STColumn[] = [];
+  salesData = this.genData();
  constructor(public service: DataService) {
   
   }
@ -51,6 +56,27 @@ export class DatatableDatascreenComponent implements OnInit {
  ngOnInit(): void {
    this.initST()
    this.initOrderST()
+    this.initLineData()
+  }
+  initLineData(){
+    for (let i = 0; i < 20; i += 1) {
+      this.chartData.push({
+        time: new Date().getTime() + 1000 * 60 * 60 * 24 * i,
+        y1: Math.floor(Math.random() * 100) + 1000,
+        y2: Math.floor(Math.random() * 100) + 10,
+      });
+    }
+  }
+  private genData(): G2MiniAreaData[] {
+    const beginDay = new Date().getTime();
+    const res: G2MiniAreaData[] = [];
+    for (let i = 0; i < 20; i += 1) {
+      res.push({
+        x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
+        y: Math.floor(Math.random() * 100) + 10,
+      });
+    }
+    return res;
  }
  /**
 * 初始化数据列表
@ -72,11 +98,15 @@ export class DatatableDatascreenComponent implements OnInit {
   
  }
  initOrderST() {
-    this.columns = [
+    this.orderColumns = [
      { title: '运单号', index: 'carNo', className: 'text-center' },
      { title: '货主', index: 'carNoColorLabel', className: 'text-center' },
      { title: '时间', index: 'carModelLabel', className: 'text-center' },
      { title: '风险等级', index: 'carStatus', className: 'text-center'}
    ];
  }
+  
+  handleClick(data: G2MiniAreaClickItem): void {
+    this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
+  }
 }