WeChat applet - how to deal with the overlapping problem of the information part of the schedule (actual combat)

foreword

In many schools, there will be small program software for students to view the class schedule, but because different classes will appear at the same time in different weeks, resulting in stacking, and even the latter courses will completely cover the previous courses. In this case, the page is very unsightly, and some covered courses cannot be seen. At this time, you can use the stacking method to make the overlapping courses appear in a different style from other non-overlapping courses. Click the card When there are multiple sections of course information, this can make the overall page beautiful, and the function effect will be better!

1. Thinking Analysis

1. According to the data obtained from the educational administration system, analyze first (here we use some of the data we crawled for reference)

 

 The two red boxes are analyzed here are other courses and the main course. Here we only look at the next red box. First of all, the main basis for judging whether there is overlap is the data framed by the black box. The week and class time are determined. If the week It is the same as the class time, so there will be overlap. At this time, we need to do some processing on the data, let the two data merge into one data and add a style to it to distinguish it from others.

       2. Here you can see that for the week, it is good to judge and directly compare the two strings, but there will be problems with the number of courses, because the school's courses are not necessarily only in the first, second or third. Four quarters, there may be a problem of one to four quarters. When the overlapping position is four classes and two two classes, the time of four classes is the first to four classes, and the time of two two classes The class just happened to be completely covered by the four classes. At this time, in terms of judgment, we have to do some processing. It is best to compare the data after processing the data.

2. Practical code part

1.  First get the data. The first step is to use a regular expression to extract the number part of num, and then use a for loop to fill in the number (here, the cutting function is encapsulated into a function to facilitate code management and maintenance)

   /**
      * 切割出节数  9-12节 -> 9,10,11,12
      */
     getNum(all_table: { num: string }) {
       var num = all_table.num.split(",");
       var list = [];
       for (var j = 0; j < num.length; j++) {
         var day_num_item = num[j].match(/\d+(\.\d+)?/g)!;
         if (day_num_item.length == 2) {
           for (var k = parseInt(day_num_item[0]); k <= parseInt(day_num_item[1]); k++) {
             list.push(k);
           };
         };
       };
       return list;
     },

2.  After cutting, the course information of the data will become an array, which stores which courses are required for this course. At this time, it is necessary to compare courses with the same number of courses that do not have courses in the same week.

   getNowWeekData(classSchedule: { week: any; all_keshes?: any }, nowWeek: number) {
       var week = classSchedule.week;
       var nowWeekData = [{
         day: "星期日",
         item: []
       }, {
         day: "星期一",
         item: []
       }, {
         day: "星期二",
         item: []
       },
       {
         day: "星期三",
         item: []
       }, {
         day: "星期四",
         item: []
       }, {
         day: "星期五",
         item: []
       }, {
         day: "星期六",
         item: []
       }
       ] as any;
       try {
         for (var i = 0; i < week.length; i++) {
           // 优先显示本周的
           if (week[i].name == nowWeek) {
             for (var dataIdx = 0; dataIdx < week[i].data.length; dataIdx++) {
               var idx = nowWeekData.findIndex(function (v: { day: any; }) {
                 return v.day == week[i].data[dataIdx].day;
               });
               for (var itemIdx = 0; itemIdx < week[i].data[dataIdx].item.length; itemIdx++) {
                 week[i].data[dataIdx].item[itemIdx].zindex = 3;
                 week[i].data[dataIdx].item[itemIdx].double = false;
                 nowWeekData[idx].item.push((week[i].data[dataIdx].item[itemIdx]) as never);
               };
             };
           };
           // 其次显示大于本周的
           if (week[i].name > nowWeek) {
             for (var dataIdx = 0; dataIdx < week[i].data.length; dataIdx++) {
               var idx = nowWeekData.findIndex(function (v: { day: any; }) {
                 return v.day == week[i].data[dataIdx].day;
               })
               for (var itemIdx = 0; itemIdx < week[i].data[dataIdx].item.length; itemIdx++) {
                 // 根据起始判断是否重叠
                 var numSIdx = nowWeekData[idx].item.findIndex((v: any) => {
                   var itemNum = week[i].data[dataIdx].item[itemIdx].num;
                   if (v.num[0] == itemNum[0] || v.num[v.num.length - 1] == itemNum[itemNum.length - 1]) {
                     return true;
                   } else {
                     return false;
                   };
                 });
                 if (numSIdx == -1) {
                   week[i].data[dataIdx].item[itemIdx].zindex = 2;
                   nowWeekData[idx].item.push((week[i].data[dataIdx].item[itemIdx]) as never);
                 } else if (nowWeekData[idx].item[numSIdx].name != week[i].data[dataIdx].item[itemIdx].name) {
                   nowWeekData[idx].item[numSIdx].double = true;
                 };
                 // 根据末尾判断是否重叠
                 var numEIdx = nowWeekData[idx].item.findIndex((v: any) => {
                   var itemNum = week[i].data[dataIdx].item[itemIdx].num;
                   if (v.num[v.num.length - 1] == itemNum[itemNum.length - 1]) {
                     return true;
                   } else {
                     return false;
                   }
                 });
                 if (numEIdx == -1) {
                 } else if (nowWeekData[idx].item[numEIdx].name != week[i].data[dataIdx].item[itemIdx].name) {
                   nowWeekData[idx].item[numEIdx].double = true;
                 }
               }
             }
           }
         }
       } catch { };//防止没有课表缓存报错
       return nowWeekData;
     },

The functions related to this function are posted here. You can only check the code for judging whether the overlapping part is, and the other parts are only for understanding, because some defined variables are used. 

    3. After using these two functions, we found that if there is an overlap in this course, the dobule in the data of this course will be displayed as true, if not, it will be displayed as false, so next we are on the page When rendering, you can judge whether there is any overlap by judging the double value. If there is an overlap, use the template of the overlapping style. If there is no overlap, use the template of the non-overlapping style. Simple, prepare two sets of templates when rendering in the inner loop of wx.for, and use wx.if and wx.else to control which set of templates to display!

3. Rendering part

 The final rendering of the editor here is almost like this, adding a shadow layer to the overlapping part, so it looks pretty good! This distinguishes overlapping courses from non-overlapping courses!

4. Summary

The code snippets of ts are pasted here (ts and js are similarly written, and js is also available). These two snippets are two encapsulated functions. It is best for you to understand the logic between them when viewing. Then write another one by yourself so that you will remember it more firmly. This part of the code is not written by the editor himself, and the algorithm of the editor is still well improved. However, the editor imitated the code fragments, which can basically be realized. The same function, I hope you can try it! Looking forward to growing up with you!