import { Component, OnInit, ViewChild } from '@angular/core'; import { STColumn, STComponent } from '@delon/abc/st'; import { DatePipe, _HttpClient } from '@delon/theme'; import { DataService } from '../../services/data.service'; import { differenceInCalendarDays } from 'date-fns'; import { OperationCurveComponent } from './curve/curve.component'; import { OperationPillarComponent } from './pillar/pillar.component'; @Component({ selector: 'app-datatable-operationtable', templateUrl: './operationtable.component.html', styleUrls: ['./operationtable.component.less'], providers: [DatePipe] }) export class DatatableOperationtableComponent implements OnInit { @ViewChild('curve') private readonly curve!: OperationCurveComponent; @ViewChild('pillar') private readonly pillar!: OperationPillarComponent; @ViewChild('st') private readonly st!: STComponent; type = 1; mode = 'year'; date: any = null; defineDate = []; time: any = ['2022-01-01 00:00:00'] dateFormat = 'yyyy-MM-dd'; dateNext: any = null; modeNext = 'year'; timeNext: any = ['2022-01-01 00:00:00'] today = new Date(); enterpriseInfoId = '' interManlist: any = [] chartData: any = {} flag = false; columns: STColumn[] = [ { title: '运营主体', index: 'networkTransporterName', className: 'text-center' }, { title: '订单数', index: 'zsl', className: 'text-center' }, { title: '应收金额', index: 'yingsje', className: 'text-center' }, { title: '承运数', index: 'cys', className: 'text-center' }, { title: '应付运费', index: 'yingfyf', className: 'text-center' }, { title: '运量(吨)', index: 'yl', className: 'text-center' }, { title: '待接单数', index: 'djd', className: 'text-center' }, { title: '在途数', index: 'ysz', className: 'text-center' }, { title: '运输完成', index: 'yswc', className: 'text-center' }, { title: '已收金额', index: 'yisje', className: 'text-center' }, { title: '已付运费', index: 'yifyf', className: 'text-center' } ]; /** * 查询参数 */ get reqParams() { if (this.mode === 'year') { this.type = 1 } else if (this.mode === 'month') { this.type = 2 } else if (this.mode === 'date') { this.type = 3 } else { this.type = 4 } let params: any = { time: this.time, type: this.type }; delete params._$expand; return { ...params }; } constructor(public service: DataService, private datePipe: DatePipe) { } ngOnInit(): void { this.initData() this.initPillarData() } initPillarData(){ let type = 1 if(this.mode === 'year') { type = 1 } else if(this.mode === 'month') { type = 2 } const params: any = { time: this.timeNext, type, enterpriseInfoId: this.enterpriseInfoId }; this.flag = true this.service.request(this.service.$api_operationalReportHistogram, params).subscribe(res => { if (res) { this.chartData = res if(this.flag) { this.pillar.reRender() this.curve.reRender() } } }) } initData() { this.service.getNetworkFreightForwarder().subscribe(res => { this.interManlist = res this.enterpriseInfoId = res[0].value }) } 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'] } else if (this.mode === 'date') { this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00'] } else { this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00'] } this.st.reload({ ...this.reqParams }); } disabledDate = (current: Date): boolean => // Can not select days before today and today differenceInCalendarDays(current, this.today) > 0; exportFun() { } changeCurve(){ } changePie(){ } changeDataNext() { if(this.mode === 'year') { this.dateFormat = 'yyyy' } else if(this.mode === 'month') { this.dateFormat = 'yyyy-MM' } } onChangeNext(result: any) { if(this.mode === 'year') { this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy') + '-01-01 00:00:00'] } else if(this.mode === 'month') { this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00'] } } }