引言
Information组件是页面中侧边栏，用于显示一些相关信息，包括用户信息，时间信息，同时加入网络状态静默监测
功能要求
1.显示用户信息；
2.显示时间；
3.显示网络状态；
4.提供交卷功能；
代码说明
html code
<div id="sidebar_info"> <div class="sidebar_title">信息详情</div> <img src="../../../assets/images/default-avatar.png"> <div class="stu_info">学院：{{student?.institutionName}}</div> <div class="stu_info">专业：{{student?.professionName}}</div> <div class="stu_info">学号：{{student?.studentCode}}</div> <div class="stu_info">姓名：{{student?.name}}</div> <div class="reamin_time">{{hour}}:{{minute}}:{{second}}</div> <button type="button" class="btn btn-info btn-lg" (click)="submit()"> 交卷 </button> <div id="networkstate" class="breathe-green-btn"></div> </div>
html 说明
用户信息绑定到student实体中，时间信息绑定到hour、minute、second中；
id为networkstate的div是一个呼吸灯，用来显示网络状态；
ts code
@Input() examTimeLength: string; //考试时长
public student: StudentInformation; //用户信息
public networkState: number = 0;//网络连接状态 0-正常；1-警告；3-危险
private timer;//定时器
private hour: number = 0;//小时差
private minute: number = 0;//分钟差
private second: number = 0;//秒数差
private _diff: number = 0;//时间差
/* 组件初始化时获取数据 */
ngOnInit() {
this.getStudentInformation();
}
/* 组件输入值变化时改变时间差 */
ngOnChanges(changes: SimpleChanges) {
if (changes['examTimeLength'] && this.examTimeLength) {
this.diff = parseInt(this.examTimeLength) * 60;
this.startTimer();
}
}
/* 组件初始化后开始计时 */
ngAfterViewInit() {
this.startTimer();
}
/* 组件销毁时清除定时器 */
ngOnDestroy() {
if (this.timer) {
clearInterval(this.timer);
}
}
/* 得到学生个人信息方法 */
public getStudentInformation() {
let studentid: string = localStorage.getItem("userId");
let url = `basicInfo-web/student/findStudentById/${studentid}` + this.authGuardService.getTicket();
this.http.get(url).subscribe(
res => {
this.student = res.json().data;
localStorage.setItem("NetWorkState","0");
}
);
}
/* 判断是否可以交卷 */
submit() {
let undone: number = document.getElementsByClassName("card").length;
let done: number = document.getElementsByClassName("card_done").length;
if (undone > 0) {
this.display = true;
this.message = "您已经答题" + done + "道，还有" + undone + "道题目未答。\n 是否确认交卷"
} else {
this.submitToBackEnd();
}
}
/* 交卷到后端 */
submitToBackEnd() {
let studentcode: string = localStorage.getItem("studentCode");
let url = `examinationEvaluation-web/onlineExam/updateExamStateBySumit/${studentcode}` + this.authGuardService.getTicket();
let body = "";
this.http.post(url,body).subscribe(
res => {
if (res.json().code == "0000") {
this.display = false;
this.router.navigateByUrl('student-online-exam/hand-in-succeed');
} else {
alert("交卷出现异常，请联系管理员！");
}
}
);
}
//时间差
private get diff() {
return this._diff;
}
private set diff(val) {
this._diff = val;
this.hour = Math.floor(this._diff / 3600);
this.minute = Math.floor((this._diff % 3600) / 60);
this.second = (this._diff % 3600) % 60;
}
/* 开始计时 */
startTimer() {
this.timer = setInterval(() => {
this.diff = this.diff - 1;
if (this.diff == -3) { clearInterval(this.timer); }
//监测考试剩余时间
if (this.hour == 0 && this.minute == 0 && this.second <= 0) {
clearInterval(this.timer);
this.submitToBackEnd();//直接交卷
}
//监测网络连接状态
this.startMonitorNetworkStatus();
},1000);
}
/* 监测网络状态 */
startMonitorNetworkStatus() {
this.networkState = parseInt(localStorage.getItem("NetWorkState"));
let el: Element = document.getElementById("networkstate");
if (this.networkState == 1) {
el.setAttribute("class","breathe-yellow-btn");
} else if (this.networkState == 3) {
el.setAttribute("class","breathe-red-btn");
} else if (this.networkState > 3) {
this.display_error = true;
this.message = "网络连接异常，请立刻联系管理员！";
localStorage.setItem("NetWorkState","3");
}
}
ts 说明
开始的4个以ng开始的方法是在组件的不同声明周期做出相应的处理；
由于异步的缘故和子组件先与父组件出现，导致examTimeLength再渲染完页面后还没有值，所以在组件变化声明周期中重新操作；
在组件渲染完页面之后，再开始计时，防止一些莫名其妙的问题；
在组件销毁后要销毁timer，防止内存泄漏；
交卷功能的逻辑需要判断用户是否全部完成，如果没有则提示，用户选择提交则强制提交，同时倒计时结束也强制提交；
在倒计时功能中，每次倒计时调用监测网络状态方法，检查目前localStorage中NetWorkState的值是多少，0-正常；1-警告；3-危险，这个值增加方法是在每个题型组件中监测返回值来判断以及调用的service中的错误处理来判断；
小结
Information组件实现的就是信息展示和交卷功能，按理说交卷功能应该在ExamPaper组件中实现，但是原型图设计在这个区域，所以就放在这个组件中了
同时，网络监测的途径是两个，1是实时提交的返回值，2是service的错误处理；目前设计仅是监测，如果功能需要强化，还可以把出现问题的题目和答案再做处理，延迟再发或者保留本地
