14 changed files with 305 additions and 32 deletions
@ -0,0 +1,49 @@
|
||||
|
||||
<div style="height: 100%; width: 100%;"> |
||||
<div class="topbox"> |
||||
<div class="backtop"> |
||||
<button type="button" mat-raised-button color="primary">返回</button> |
||||
</div> |
||||
<div class="datasearch"> |
||||
<div class="starttime"> |
||||
<span>开始时间 :</span> |
||||
<mat-form-field> |
||||
<input matInput [matDatepicker]="dp" disabled [formControl]="startdate"> |
||||
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle> |
||||
<mat-datepicker #dp disabled="false"></mat-datepicker> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="endtime"> |
||||
<span>结束时间 :</span> |
||||
<mat-form-field> |
||||
<input matInput [matDatepicker]="dp2" disabled [formControl]="enddate"> |
||||
<mat-datepicker-toggle matSuffix [for]="dp2"></mat-datepicker-toggle> |
||||
<mat-datepicker #dp2 disabled="false"></mat-datepicker> |
||||
</mat-form-field> |
||||
</div> |
||||
</div> |
||||
<div class="btnbox"> |
||||
<button type="button" mat-raised-button color="primary" (click)="onSubmit()">查询</button> |
||||
<button type="button" mat-raised-button (click)="reset()">重置</button> |
||||
</div> |
||||
</div> |
||||
<mat-divider></mat-divider> |
||||
<div class="listbox"> |
||||
<ul> |
||||
<li *ngFor="let item of recordList;let key = index"> |
||||
<p class="timeTitle" *ngIf="key ==0 || item.time != recordList[key - 1].time">{{item.time}}</p> |
||||
<span class="listitem"> |
||||
<span style="margin-right: 5px;">{{item.time2}}</span> |
||||
{{item.operation}} : {{item.target | name3}} |
||||
</span> |
||||
|
||||
</li> |
||||
</ul> |
||||
<mat-paginator |
||||
[length]="length" |
||||
[pageSize]="pageSize" |
||||
(page)="chagePage($event)"> |
||||
</mat-paginator> |
||||
|
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,43 @@
|
||||
.topbox{ |
||||
display: flex; |
||||
width: 100%; |
||||
height:7%; |
||||
line-height: 66px; |
||||
// border-bottom: 1px solid gray; |
||||
justify-content: space-around; |
||||
.datasearch{ |
||||
display: flex; |
||||
div{ |
||||
margin: 0 10px; |
||||
span{ |
||||
margin-right: 5px; |
||||
} |
||||
mat-form-field{ |
||||
input{ |
||||
padding-left: 3px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
.btnbox{ |
||||
button{ |
||||
margin: 0 10px; |
||||
} |
||||
} |
||||
} |
||||
.listbox{ |
||||
margin-top: 18px; |
||||
margin-left: 26%; |
||||
height: 82%; |
||||
overflow-y: auto; |
||||
.timeTitle{ |
||||
font-weight: 800; |
||||
font-size: 18px; |
||||
} |
||||
.listitem{ |
||||
margin-left: 80px; |
||||
font-size: 16px; |
||||
line-height: 30px; |
||||
} |
||||
} |
||||
@ -0,0 +1,143 @@
|
||||
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//身份证
|
||||
|
||||
|
||||
recordList:any//渲染的100条列表
|
||||
oneMonthDate:number = 30*24*60*60*1000; //一个月的时间戳
|
||||
|
||||
|
||||
//分页
|
||||
@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" |
||||
} |
||||
this.http.get("/api/StudyRecords",{params:data}).subscribe((data:any) => { |
||||
this.recordList = data.items |
||||
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, |
||||
StartTime : this.startTime, |
||||
EndTime : this.endTime, |
||||
Catalog : this.Catalog || "", |
||||
PageNumber : this.PageNumber, |
||||
PageSize:"100" |
||||
} |
||||
this.http.get("/api/StudyRecords",{params:data}).subscribe((data:any) => { |
||||
this.recordList = data.items |
||||
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.getAllStudyRecords() |
||||
} |
||||
//重置
|
||||
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() |
||||
} |
||||
} |
||||
Loading…
Reference in new issue