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