【Angular2】Information组件设计

WEB前端 waitig 532℃ 百度已收录 0评论

引言

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()">&nbsp;&nbsp;&nbsp;交卷&nbsp;&nbsp;&nbsp;</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的错误处理;目前设计仅是监测,如果功能需要强化,还可以把出现问题的题目和答案再做处理,延迟再发或者保留本地


本文由【waitig】发表在等英博客
本文固定链接:【Angular2】Information组件设计
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)