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

import { map } from 'rxjs/operators';
/*
 * @Description  :
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-04-06 10:57:56
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-04-07 18:28:03
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.ts
 * Copyright (C) 2022 huzhenhong. All rights reserved.
 */
import { Component, OnInit, ViewChild } from '@angular/core';
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 './map/map.component';
import { G2TimelineComponent, G2TimelineData } from '@delon/chart/timeline';
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
import { FinanceTableCurveComponent } from '../financetable/curve/curve.component';


@Component({
  selector: 'app-datatable-datascreen',
  templateUrl: './datascreen.component.html',
  styleUrls: ['./datascreen.component.less']
})
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;
  @ViewChild('curve') private readonly curve!: FinanceTableCurveComponent;

  columns: STColumn[] = [];
  chartData: any[] = [];
  orderColumns: STColumn[] = [];
  chartData2: any = {}
  allDeal: any;
  headDeal: any;
  classifyDeal: any;
  todaysDeal: any;
  todayTime: string = '';

  monthData: G2TimelineData[] = [];
  monthData2:G2TimelineData[] =[];
  salesData2: Array<any> = this.genData();
  constructor(public service: DataService) {}
  ngOnChanges(changes: any): void {
    console.log(changes);
  }
  /**
   * 查询参数
   */
  get reqOrderParams() {
    const params = {};
    return { ...params };
  }
  get reqParams() {
    const params = {};
    return { ...params };
  }
  ngOnInit(): void {
    setInterval(() => {
      this.setTime();
    }, 1000);
    this.initST();
    this.initOrderST();
    this.initData();
    this.genData2();
    // this.initLineData();
  }
  setTime() {
    var myDate = new Date();
    var mytime = myDate.toLocaleTimeString(); //获取当前时间
    myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    myDate.getMonth(); //获取当前月份(0-11,0代表1月)
    myDate.getDate(); //获取当前日(1-31)
    this.todayTime = myDate.getFullYear() + '-' + myDate.getMonth() + 1 + '-' + myDate.getDate() + ' ' + mytime;
  }
  initData() {
    this.service.request(this.service.$api_getAnnualTransactions).subscribe((res: any) => {
      this.allDeal = res;
    });
    this.service.request(this.service.$api_getTransactionAmount).subscribe((res: any) => {
      this.headDeal = res;
    });
    this.service.request(this.service.$api_getCustomerStatistics).subscribe((res: any) => {
      this.classifyDeal = res;
    });
    this.service.request(this.service.$api_getTradingToday).subscribe((res: any) => {
      this.todaysDeal = res;
    });
    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.chartData = value;
        this.map.reRender();
      }
    });
  }
  public genData(): G2MiniAreaData[] {
    let value: any = [];
    this.service.request(this.service.$api_getShipmentRanking).subscribe((res: any) => {
      console.log(res);
      res.forEach((element: any) => {
        value.push({
          x: element.city,
          y: element.weight
        });
      });
    });
    console.log(value);
    return value;
  }
  initPillarData(){
        this.curve.reRender()
  }
  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
          });
        });
        this.monthData2 = res;
        console.log(this.monthData2);

      }
    });
   console.log(this.monthData2);
     return value1;
  }
  /**
   * 初始化数据列表
   */
  initST() {
    this.columns = [
      { title: '序号', render: 'index', className: 'text-center', width: '70px' },
      { title: '发货地', index: 'loadAddress', className: 'text-center', width: '90px' },
      { title: '卸货地', index: 'dischargeAddress', className: 'text-center', width: '90px' },
      { title: '货物', index: 'goodsName', className: 'text-center', width: '90px' },
      { title: '数量', render: 'weight', className: 'text-center', width: '120px' }
    ];
  }
  initOrderST() {
    this.orderColumns = [
      { title: '运单号', index: 'wayCode', className: 'text-center', width: '120px' },
      { title: '货主', index: 'shipperName', className: 'text-center', width: '70px' },
      { title: '时间', index: 'createTime', className: 'text-center', width: '200px' },
      { title: '风险等级', index: 'warningType', className: 'text-center', width: '90px' }
    ];
  }

  handleClick(data: G2MiniAreaClickItem): void {
    this.service.msgSrv.info(`${data.item.x} - ${data.item.y}`);
  }
}