zy-pc/src/app/views/new-statistics/components/custom-change-date/custom-change-date.component.ts

import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { differenceInCalendarDays, endOfMonth, endOfYear, startOfDay, format, endOfDay, startOfMonth, startOfYear } from "date-fns";
import { DateService } from 'src/app/services/date.service';
import { ActivatedRoute, Router, NavigationEnd  } from '@angular/router';
import { debounceTime, filter } from 'rxjs/operators';

@Component({
  selector: 'app-custom-change-date',
  templateUrl: './custom-change-date.component.html',
  styleUrls: ['./custom-change-date.component.less']
})
export class CustomChangeDateComponent implements OnInit, OnDestroy {
  @Input() isShowType: boolean = true;
	// @Input() dateData1: any;
	// @Input() dateData2: any;
  @Input() name: string = '建单时间';
  constructor(
    private dateService: DateService,
		private router: Router,
  ) { }

  dateType: string = "day"; //选中时间维度
  dateTypes: any = [
    {
      label: "按天",
      value: "day",
    },
    {
      label: "按月",
      value: "month",
    },
    {
      label: "按年",
      value: "year",
    },
  ]; //时间维度
  defRange = 6; //默认上月
  defRanges = [
    {
      label: "昨日",
      id: 1,
    },
    {
      label: "本周",
      id: 2,
    },
    {
      label: "本月",
      id: 3,
    },
    {
      label: "本年",
      id: 4,
    },
    {
      label: "上周",
      id: 5,
    },
    {
      label: "上月",
      id: 6,
    },
    {
      label: "上年",
      id: 7,
    },
  ]; //时间默认区间

  dateRange: any = []; //发起时间区间 天
  monthRangeStart: any; //发起时间 月 起
  monthRangeEnd: any; //发起时间 月 止
  yearRangeStart: any; //发起时间 年 起
  yearRangeEnd: any; //发起时间 年 止

  ngOnInit() {
		this.resetByDate();
		// this.router.events
		//   .pipe(filter(event => event instanceof NavigationEnd))
		//   .subscribe((event: NavigationEnd) => {
		//     if(event.urlAfterRedirects.endsWith('/incidentList')){
		// 			this.resetByDate();
		//     }
		//   });
  }

	ngOnDestroy(){
		// this.dateData1 = null
		// this.dateData2 = null
	}

  // 根据时间区间重置
  resetByDate(){
    let newStatistics = JSON.parse(sessionStorage.getItem('newStatistics'));
		this.initByDate(newStatistics.defaultDate)
  }

  // 根据时间区间初始化
  initByDate(dateRange:any[], dateNum:any = null){
    setTimeout(() => {
      this.dateType = 'day';
      this.dateRange = dateRange;
      this.changeDateType(this.dateType, dateNum);
    }, 0)
  }

  // 修改时间展示维度
  changeDateType(res, defRange) {
    console.log(res, this.dateType);
    this.dateType = res;
    switch (res) {
      case "day":
        this.defRanges = [
          {
            label: "昨日",
            id: 1,
          },
          {
            label: "本周",
            id: 2,
          },
          {
            label: "本月",
            id: 3,
          },
          {
            label: "上周",
            id: 5,
          },
          {
            label: "上月",
            id: 6,
          },
          {
            label: "上年",
            id: 7,
          },
        ]; //时间默认区间
        this.defRange = defRange === undefined ? this.defRanges[0].id : defRange;
        this.changeDateRange(defRange === undefined ? this.defRanges[0].id : defRange);
        break;
      case "month":
        this.defRanges = [
          {
            label: "本月",
            id: 3,
          },
          {
            label: "上月",
            id: 6,
          },
          {
            label: "上年",
            id: 7,
          },
        ]; //时间默认区间
        this.defRange = defRange === undefined ? this.defRanges[0].id : defRange;
        this.changeDateRange(defRange === undefined ? this.defRanges[0].id : defRange);
        break;
      case "year":
        this.defRanges = [
          {
            label: "本年",
            id: 4,
          },
          {
            label: "上年",
            id: 7,
          },
        ]; //时间默认区间
        this.defRange = defRange === undefined ? this.defRanges[0].id : defRange;
        this.changeDateRange(defRange === undefined ? this.defRanges[0].id : defRange);
        break;
    }
  }

  // 禁选日期
  disabledDate = (current: Date): boolean => {
    // Can not select days before today and today
    return false;
  };

  // 禁选月份开始
  disabledMonthStart = (current: Date): boolean => {
    // Can not select days before today and today
    let cur = differenceInCalendarDays(current, endOfMonth(this.today)) > 0;
    let staEnd = differenceInCalendarDays(current, this.monthRangeEnd) > 0;
    return cur || staEnd;
  };
  // 禁选月份结束
  disabledMonthEnd = (current: Date): boolean => {
    // Can not select days before today and today
    let staEnd = differenceInCalendarDays(this.monthRangeStart, current) > 0;
    return staEnd;
  };

  // 禁选年份开始
  disabledYearStart = (current: Date): boolean => {
    // Can not select days before today and today
    let cur = differenceInCalendarDays(current, endOfYear(this.today)) > 0;
    let staEnd = differenceInCalendarDays(current, this.yearRangeEnd) > 0;
    return cur || staEnd;
  };

  // 禁选年份结束
  disabledYearEnd = (current: Date): boolean => {
    // Can not select days before today and today
    let staEnd = differenceInCalendarDays(this.yearRangeStart, current) > 0;
    return staEnd;
  };

  // 日期选择 日
  startDate: string; //发起时间开始
  endDate: string; //发起时间结束
  changeDate(result): void {
    this.dateRange = result;
    if (!this.quick) {
      // 不是快捷选择
      this.defRange = null;
    }
    if (!result || !result.length) {
      this.startDate = this.endDate = "";
      return;
    }
    this.startDate = format(startOfDay(result[0]), "yyyy-MM-dd HH:mm:ss");
    this.endDate = format(endOfDay(result[1]), "yyyy-MM-dd HH:mm:ss");
  }

  // 月份选择
  changeMonthStart(result) {
    console.log(result);
    this.monthRangeStart = result;
    if (!this.quick) {
      // 不是快捷选择
      this.defRange = null;
    }
    if (!result) {
      this.startDate = this.endDate = "";
      return;
    }
    this.startDate = format(startOfMonth(result), 'yyyy-MM-dd HH:mm:ss');
  }
  changeMonthEnd(result) {
    console.log(result);
    this.monthRangeEnd = result;
    if (!this.quick) {
      // 不是快捷选择
      this.defRange = null;
    }
    if (!result) {
      this.startDate = this.endDate = "";
      return;
    }
    this.endDate = format(endOfMonth(result), 'yyyy-MM-dd HH:mm:ss');
  }
  // 年份选择
  changeYearStart(result) {
    console.log(result);
    this.yearRangeStart = result;
    if (!this.quick) {
      // 不是快捷选择
      this.defRange = null;
    }
    if (!result) {
      this.startDate = this.endDate = "";
      return;
    }
    this.startDate = format(startOfYear(result), 'yyyy-MM-dd HH:mm:ss');
  }
  changeYearEnd(result) {
    console.log(result);
    this.yearRangeEnd = result;
    if (!this.quick) {
      // 不是快捷选择
      this.defRange = null;
    }
    if (!result) {
      this.startDate = this.endDate = "";
      return;
    }
    this.endDate = format(endOfYear(result), 'yyyy-MM-dd HH:mm:ss');
  }

  // 日期选择 快速修改时间区间
  today = new Date();
  quick: boolean = false;
  changeDateRange(res) {
    console.log(res);
    this.quick = true;
    switch (res) {
      case 1:
        // 昨日
        let yesterdaystartdate = this.dateService.date().yesterdayStartDate;
        let yesterdayenddate = this.dateService.date().yesterdayEndDate;
        console.log(yesterdaystartdate, yesterdayenddate);
        this.changeDate([yesterdaystartdate, yesterdayenddate]);
        break;
      case 2:
        // 本周
        let thisweekstartdate = this.dateService.date().thisWeekStartDate;
        let thisweekenddate = this.dateService.date().thisWeekEndDate;
        console.log(thisweekstartdate, thisweekenddate);
        this.changeDate([thisweekstartdate, thisweekenddate]);
        break;
      case 3:
        // 本月
        let thismonthstartdate = this.dateService.date().thisMonthStartDate;
        let thismonthenddate = this.dateService.date().thisMonthEndDate;
        console.log(thismonthstartdate, thismonthenddate);
        this.changeDate([thismonthstartdate, thismonthenddate]);
        this.changeMonthStart(thismonthstartdate);
        this.changeMonthEnd(thismonthenddate);
        break;
      case 4:
        // 本年
        let thisyearstartdate = this.dateService.date().thisYearStartDate;
        let thisyearenddate = this.dateService.date().thisYearEndDate;
        console.log(thisyearstartdate, thisyearenddate);
        this.changeDate([thisyearstartdate, thisyearenddate]);
        this.changeMonthStart(thisyearstartdate);
        this.changeMonthEnd(thisyearenddate);
        this.changeYearStart(thisyearstartdate);
        this.changeYearEnd(thisyearenddate);
        break;
      case 5:
        // 上周
        let lastweekstartdate = this.dateService.date().lastWeekStartDate;
        let lastweekenddate = this.dateService.date().lastWeekEndDate;
        console.log(lastweekstartdate, lastweekenddate);
        this.changeDate([lastweekstartdate, lastweekenddate]);
        break;
      case 6:
        // 上月
        let lastmonthstartdate = this.dateService.date().lastMonthStartDate;
        let lastmonthenddate = this.dateService.date().lastMonthEndDate;
        console.log(lastmonthstartdate, lastmonthenddate);
        this.changeDate([lastmonthstartdate, lastmonthenddate]);
        this.changeMonthStart(lastmonthstartdate);
        this.changeMonthEnd(lastmonthenddate);
        break;
      case 7:
        // 上年
        let lastyearstartdate = this.dateService.date().lastYearStartDate;
        let lastyearenddate = this.dateService.date().lastYearEndDate;
        console.log(lastyearstartdate, lastyearenddate);
        this.changeDate([lastyearstartdate, lastyearenddate]);
        this.changeMonthStart(lastyearstartdate);
        this.changeMonthEnd(lastyearenddate);
        this.changeYearStart(lastyearstartdate);
        this.changeYearEnd(lastyearenddate);
        break;
      default:
        // 回显initByDate
        this.changeDate([new Date(this.dateRange[0]), new Date(this.dateRange[1])]);
        break;
    }
    this.quick = false;
  }
}