examSystem-Anxin/src/app/ui/learning-record-details/learning-record-details.component.ts

import { Component, OnInit ,ViewChild} from '@angular/core';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MatDatepicker} from '@angular/material/datepicker';
import {FormControl} from '@angular/forms';
import {HttpClient} from '@angular/common/http';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { MatPaginator } from '@angular/material/paginator';
import { PageEvent } from '@angular/material/paginator';
import { Router,ActivatedRoute } from '@angular/router'
@Component({
  selector: 'app-learning-record-details',
  templateUrl: './learning-record-details.component.html',
  styleUrls: ['./learning-record-details.component.scss']
})
export class LearningRecordDetailsComponent implements OnInit {
  startdate:any //开始时间
  enddate:any //结束时间
  constructor(private adapter: DateAdapter<any>,private http:HttpClient,public snackBar: MatSnackBar,private router:Router,private route:ActivatedRoute) { }

  lastdate:any //上个月日期

  startTime:any //开始时间查询条件
  endTime:any //结束时间查询条件

  Catalog:any = this.route.snapshot.queryParams.Catalog || "" //目录

  PageNumber:any  = 1//当前页数
  id:any = this.route.snapshot.queryParams.id//身份证
  PostName:any = this.route.snapshot.queryParams.PostName || "" //传过来的职务名称

  recordList:any = false//渲染的100条列表
  oneMonthDate:number = 30*24*60*60*1000; //一个月的时间戳


  noRecord:boolean 
  //分页
  @ViewChild(MatPaginator, {static: true}) 
  pageEvent: PageEvent;
  paginator: MatPaginator;
  length:any; //共多少条数据
  pageSize:any; //每页条数
  // pageSizeOptions: number[] = [10] //设置每页条数
  pageNumber:number = 1; //第几页

  ngOnInit(): void {
    this.adapter.setLocale('CH');

    let nowdate = new Date().toLocaleDateString() //本月日期   2020/07/11  形式
    this.lastdate = new Date(new Date().getTime()-this.oneMonthDate).toLocaleDateString() //上个月日期   2020/06/11  形式

    this.startdate = new FormControl(new Date(this.lastdate)); //日历开始时间显示
    this.enddate = new FormControl(new Date()); //日历结束时间显示

    this.startTime = this.getTIme(new Date(this.lastdate)) 
    this.endTime = this.getTIme(new Date())

    this.getAllStudyRecords()
  }


  //分页切换
  chagePage (e) {
    this.pageNumber = e.pageIndex+1
    let date:any = new Date()
    let data = {
      Name : this.id,
      StartTime : this.startTime,
      EndTime : this.endTime,
      Catalog : this.Catalog,
      PageNumber : String(this.pageNumber),
      PageSize:"100",
      PostName : this.PostName
    }
    this.http.get("/api/StudyRecords",{params:data}).subscribe((data:any) => {
      this.recordList = data.items
      if(data.items.length == 0){
        this.noRecord = true
      }else{
        this.noRecord = false
      }
      this.recordList.forEach((item) => {
        item.time = item.creationTime.substring(0,10)
        item.time2 = item.creationTime.substring(11,16)
      })
      this.length = data.totalCount
      this.pageSize = data.pageSize
    })
  }

  //传入 new Date()格式  将日期变为  年月日时分秒
  getTIme(date){
    let year = date.getFullYear(); //年
    let month = date.getMonth() + 1; //月
    let day = date.getDate(); //日
    let hour = date.getHours() //时
    let min = date.getMinutes(); //分
    let seconds = date.getSeconds(); //秒
    return year+'-'+month+'-'+ day + " "+ hour +':'+ min  +':'+ seconds;
  } 

  //初始获得所有学习记录
  getAllStudyRecords(){
    let date:any = new Date()
    let data = {
      Name : this.id,
      Catalog : this.Catalog || "",
      PageNumber : this.PageNumber,
      PageSize:"100",
      PostName:this.PostName
    }
    this.http.get("/api/StudyRecords",{params:data}).subscribe((data:any) => {
      this.recordList = data.items
      if(data.items.length == 0){
        this.noRecord = true
      }else{
        this.noRecord = false
      }
      this.recordList.forEach((item) => {
        item.time = item.creationTime.substring(0,10)
        item.time2 = item.creationTime.substring(11,16)
      })
      this.length = data.totalCount
      this.pageSize = data.pageSize
      this.pageEvent.pageIndex = 0
    })
  }

  //返回上一页
  backtop(){
    history.go(-1)
  }
  //带查询时间获得所有学习记录
  getAllStudyRecords2(){
    let date:any = new Date()
    let data = {
      Name : this.id,
      StartTime : this.startTime,
      EndTime : this.endTime,
      Catalog : this.Catalog || "",
      PageNumber : this.PageNumber,
      PageSize:"100",
      PostName:this.PostName
    }
    this.http.get("/api/StudyRecords",{params:data}).subscribe((data:any) => {
      this.recordList = data.items
      if(data.items.length == 0){
        this.noRecord = true
      }else{
        this.noRecord = false
      }
      this.recordList.forEach((item) => {
        item.time = item.creationTime.substring(0,10)
        item.time2 = item.creationTime.substring(11,16)
      })
      this.length = data.totalCount
      this.pageSize = data.pageSize
      this.pageEvent.pageIndex = 0
    })
  }

  //
  //查询
  onSubmit(){
    if(this.startdate.value > this.enddate.value){
      const config = new MatSnackBarConfig();
      config.verticalPosition = 'top';
      config.duration = 3000
      this.snackBar.open('起始时间大于结束时间','确定',config);
    }
    if(this.enddate.value.toLocaleDateString() == new Date().toLocaleDateString() || this.enddate.value > new Date()){
      this.enddate.value = new Date()
    }
    if(this.enddate.value < new Date() && this.enddate.value.toLocaleDateString() != new Date().toLocaleDateString()){
      this.enddate.value = new Date(this.enddate.value.getTime() + 24*60*60*1000)
    }
    this.startTime = this.getTIme(this.startdate.value)
    this.endTime = this.getTIme(this.enddate.value)
    this.getAllStudyRecords2()
  }
  //重置
  reset(){
    this.startdate = new FormControl(new Date(this.lastdate)); //日历开始时间显示
    this.enddate = new FormControl(new Date()); //日历结束时间显示
    this.startTime = this.getTIme(this.startdate.value)
    this.endTime = this.getTIme(this.enddate.value)
    this.getAllStudyRecords()
  }
}