课程表-星期和节次坐标定位

在开发课程表过程中遇到这样的需求,根据后端回显的数据,返回填充到对应的星期和节次中,就像这样:
这里写图片描述

那么在前端是如何实现的呢:
核心代码实现:

  wc: String[] = new Array(); //将课程表存放到数组wc里
  s: string; //学年学期
  w: number; //星期
  c: number; //节次
  o: string; //单双周

//从dataservice解析url数据,并存放到课程表里
  getData(semesterId:string,classId:string) {
    let urls = "http://192.168.22.202:8080/teachingManagement-web/teachSecretariesCurriculumSchedule/queryScheduleByClass/";
    urls = urls + semesterId +"/" + classId;
    console.log(urls);
    this.dataservice.getData(urls).then(res => {
      console.log(res);
      this.result = res.data;
      for (var i = 0; i < this.result.length; i++) {

        if(this.s == null)  
        {
          this.s = this.result[i] ["semesterName"];
        }

        this.w = this.ConvertCtoN(this.result[i]["weekName"]);//解析课程表星期并赋值给w
        this.c = this.ConvertCtoN(this.result[i]["cellTimeName"]); //解析节次并赋值给c
        this.o = this.ConvertOtoS(this.result[i]["oddWeekOrNot"]); //解析单双周并赋值给o
        let num:number = Number(this.w +"" +this.c);
        this.wc[num] = this.result[i]["courseName"] + "\n" + this.result[i]["teacherName"] + "\n" + this.result[i]["startWeek"] + "-" + this.result[i]["endWeek"] + this.ConvertOtoS(this.result[i]["oddWeekOrNot"]) + "\n" + this.result[i]["roomName"]; //根据星期和节次进行坐标定位,并将课程表赋值给wc 
      }
    }
    )
  }

  ConvertCtoN(Name){
    switch(Name){
        case "第一节" : return 1;
        case "第二节" : return 2;
        case "第三节" : return 3;
        case "第四节" : return 4;
        case "第五节" : return 5;

        case "星期一" : return 1;
        case "星期二" : return 2;
        case "星期三" : return 3;
        case "星期四" : return 4;
        case "星期五" : return 5;
    }    

  }

  ConvertOtoS(number){
    switch(number){
      case 0 : return "单";
      case 1 : return "双";
      case 2 : return "全";
    }
  }

猜你喜欢

转载自blog.csdn.net/hongwei15732623364/article/details/78305571