666

2022-03-29 17:57:06 +08:00
parent 4b69759518
commit b91095ed9a
14 changed files with 494 additions and 5 deletions
--- a/src/app/routes/datatable/components/compliance/index/index.component.ts
+++ b/src/app/routes/datatable/components/compliance/index/index.component.ts
@ -0,0 +1,125 @@
+import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { DatePipe, ModalHelper, _HttpClient } from '@delon/theme';
+import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
+import { format } from 'date-fns';
+import { SFComponent, SFDateWidgetSchema, SFRadioWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
+import { G2TimelineData, G2TimelineMap } from '@delon/chart/timeline';
+import { Chart } from '@antv/g2';
+const DataSet = require('@antv/data-set');
+@Component({
+  selector: 'app-datatable-compliance-index',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.less'],
+  providers: [DatePipe]
+})
+export class DatatableComplianceIndexComponent implements OnInit {
+  @ViewChild('sf', { static: false })
+  sf!: SFComponent;
+  ui!: SFUISchema;
+  schema: SFSchema = {};
+
+  mode = 'year';
+  date: any = null;
+  dateFormat = 'yyyy-MM-dd';
+  time: any = ['2022-01-01 00:00:00']
+  constructor(private http: _HttpClient, private modal: ModalHelper, private ngZone: NgZone, private datePipe: DatePipe) {}
+
+  ngOnInit(): void {
+    this.initSF();
+  }
+
+  changeData(){
+    if(this.mode === 'year') {
+      this.dateFormat = 'yyyy'
+    } else if(this.mode === 'month') {
+      this.dateFormat = 'yyyy-MM'
+    } else {
+      this.dateFormat = 'yyyy-MM-dd'
+    } 
+  }
+
+  onChange(result: any) {
+    if(this.mode === 'year') {
+      this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
+    } else if(this.mode === 'month') {
+      this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
+    }
+  }
+
+  initSF() {
+    this.schema = {
+      properties: {
+        name: {
+          type: 'string',
+          title: '',
+          ui: {
+            widget: 'select',
+            placeholder: '网络货运人'
+          }
+        },
+        name2: {
+          type: 'string',
+          title: '',
+          ui: {
+            widget: 'select',
+            placeholder: '部门'
+          }
+        },
+        name3: {
+          type: 'string',
+          title: '',
+          ui: {
+            placeholder: '业务员'
+          }
+        }
+      }
+    };
+    this.ui = {
+      '*': {
+        grid: { span: 4 }
+      }
+    };
+
+  }
+
+  data = [
+    { Date: '22 February', 订单合格率: 50000, 付款及时率: 125000 },
+    { Date: '28 February', 订单合格率: 60000, 付款及时率: 150000 },
+    { Date: '3 March', 订单合格率: 100000, 付款及时率: 250000 },
+    { Date: '20 March', 订单合格率: 200000, 付款及时率: 500000 },
+    { Date: '7 April', 订单合格率: 250000, 付款及时率: 625000 },
+    { Date: '13 June', 订单合格率: 210000, 付款及时率: 525000 }
+  ];
+  render(el: ElementRef<HTMLDivElement>) {
+    this.ngZone.runOutsideAngular(() => this.init(el.nativeElement));
+  }
+
+  private init(el: HTMLElement): void {
+    const chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 400
+    });
+    // 以三组数据为例, 需要展示 91/92/93年中a/b/c数据走势
+		const data = [
+			{x: '1991', z: 'a', y: 1},
+			{x: '1991', z: 'b', y: 2},
+			{x: '1991', z: 'c', y: 3},
+
+			{x: '1992', z: 'a', y: 11},
+			{x: '1992', z: 'b', y: 22},
+			{x: '1992', z: 'c', y: 33},
+			
+			{x: '1993', z: 'a', y: 1},
+			{x: '1993', z: 'b', y: 2},
+			{x: '1993', z: 'c', y: 3}
+		];
+
+    chart.data(data);
+		// 在x*y的坐标点上按z值绘制线条, 如果z值相同将使用直线连接
+		chart.line().position('x*y').color('z');
+		// 在x*y的坐标上按z值绘制圆点
+		chart.point().position('x*y').size(4).color('z').shape('circle');
+		chart.render();
+  }
+}