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

梦里梦外; 2022-06-07 12:41 150阅读 0赞

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

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

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 "全"; } }

[SouthEast]: /images/20220607/c4200fbbdea94251978f51940b128c93.png