PK课

v2tv/src/Mock/index.js

@@ -120,7 +120,7 @@ let getUserList = function () {
 let testStudent = function (num, team, mustbeTeamOne) {
     let item = [];
     let group = team == 2 ? "@integer(1, 2)" : "@integer(1, 3)";
-    // group = 1;
+    group = 1;
     if (mustbeTeamOne) {
         group = mustbeTeamOne;
     }
@@ -393,7 +393,7 @@ if (t == 1) {
     // }
 
     // 0: 下课 团课/私教/PK 的排名
-    let LessonClass = 1;
+    let LessonClass = 2;
     let LessonDp = 2;
     // 1：团课/私教
     // 2：竞技课2PK
@@ -408,8 +408,8 @@ if (t == 1) {
         // 上2队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 2));
         Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(1, 2));
-        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(8, 2,));
-        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(8, 2,));
+        Mock.mock(curheadapi + 'UserListInfo', 'post', testStudent(2, 1,));
+        Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(2, 1,));
     } else if (LessonClass == 3) {
         // 上3队PK课
         Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(1, 3));

v2tv/src/components/student.vue

@@ -81,6 +81,10 @@ export default {
     'studentsClassName': {
       // 自动计算补全空白处
       handler(newName, oldName) {
+        if (!newName) {
+          console.log('没有传入className');
+          // return false
+        }
         let sum = 0;
         let that = this;
         sum = newName.length;

v2tv/src/views/pk.vue

@@ -27,13 +27,14 @@
         </div>
         <div class="rt">
              <span>
-              <em>蓝队队8人</em>
+              <em>蓝队8人</em>
             </span>
         </div>
       </div>
     </div>
     <div class="userPart">
       <div class="lt">
+        <student :students="students.redUnite" :students-class-name="RedstudentsClassName"></student>
         <div class="bottomLine redBottom"></div>
       </div>
       <div class="md">
@@ -53,17 +54,31 @@ import '../libs/rem';
 import Headside from '@/components/Headside'
 import newRecord from '@/components/newRecord'
 import newStudent from '@/components/newStudent'
+import student from '@/components/student'
+
+import
+{
+  getHello,
+  getClassStat,
+  getRecordBreak,
+  getNewUser
+} from '@/api/getApiRes'
+
+import '../Global'
 
 let qs = require('qs');
 export default {
   data() {
     return {
       trueDate: true,//真实数据 true false
-      studentsClassName: [],
+      studentsClassName: [
+        {name: 'max'}
+      ],
       students: {
         redUnite: [],
         blueUnite: [],
       },
+      thisClassName: '',
       redSum: 0,
       blueSum: 0,
       pkVal: '50%',
@@ -93,6 +108,360 @@ export default {
       },
     }
   },
+  watch: {
+    '$route': function (val) {
+      let that = this;
+      if (val.path == '/pk') {
+        this.init();
+      }
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.GetgetUserList();
+      this.createEgg();
+      this.createNewStudent();
+
+      // todo
+      // this.PkTimer = setInterval(() => {
+      //   this.GetgetUserList();
+      //   this.ClacClassTime();
+      //   this.curgetClassStat();
+      // }, 1000);
+      //
+      // this.timer2 = setInterval(() => {
+      //   this.createEgg();
+      // }, 31000);
+      //
+      // this.timer3 = setInterval(() => {
+      //   this.createNewStudent();
+      // }, 6000);
+    },
+    // 启动一个成就彩蛋
+    createEgg() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getRecordBreak(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 欢迎新学生时不显示彩蛋
+          if (that.studentInfo.dialogVisible == true) {
+            console.log('正在显示新学生');
+            return false
+          } else {
+            this.OpenEgg(json);
+          }
+        } else {
+          // 并没有人破记录
+          if (json.Code == 999) return false;
+          if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
+        }
+      })
+    },
+    // 欢迎新同学
+    createNewStudent() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getNewUser(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          console.log('来新生了');
+          // 显示彩蛋时不欢迎新学生
+          if (that.toperInfo.dialogVisible == true) {
+            console.log('正在显示彩蛋');
+            return false
+          } else {
+            that.OpenStudent(json.Rs);
+          }
+        } else {
+          // 并没有人破记录
+          if (json.Code == 999) return false;
+          if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
+        }
+      })
+    },
+    OpenEgg(msg) {
+      this.toperInfo.toper = msg.Rs;
+      this.toperInfo.dialogVisible = true;
+      // 倒计时5秒自动关闭
+      let that = this;
+      this.totalTime = 30;
+      let clock = window.setInterval(() => {
+        this.totalTime--;
+        if (parseInt(this.totalTime) < 0) {
+          that.toperInfo.dialogVisible = false;
+          clearInterval(clock);
+        }
+      }, 1000)
+    },
+    OpenStudent(msg) {
+      let that = this;
+      that.studentInfo.Rs = msg;
+      that.studentInfo.dialogVisible = true;
+      this.studentInfo.percent = 0;
+      // 倒计时5秒自动关闭
+      this.studentTime = 15;
+      let clock = window.setInterval(() => {
+        this.studentTime--;
+        let num = (15 - this.studentTime) / 15 * 100;
+        this.studentInfo.percent = parseInt(num) > 100 ? 100 : num;
+        console.log('num' + num);
+        if (parseInt(this.studentTime) <= 0) {
+          that.studentInfo.dialogVisible = false;
+          clearInterval(clock);
+        }
+      }, 1000)
+    },
+    // 载入课程信息
+    ReadLessonInfo(Dp) {
+      this.PlanName = Dp.PlanName;
+      this.BeginTime = Dp.BeginTime;
+      this.Teacher = Dp.Teacher;
+    },
+    // 分队展示
+    UniteBreak(Rs) {
+      let that = this;
+      that.students.redUnite = [];
+      that.students.blueUnite = [];
+      if (!Rs) {
+        that.students.redUnite = [];
+        that.students.blueUnite = [];
+      } else {
+        Rs.map(function (item, t) {
+          item.sportLevel = sportLevel(item.ActivePercent);
+          if (item.GroupNo == 1) {
+            that.students.redUnite.push(item);
+          }
+          if (item.GroupNo == 2) {
+            that.students.blueUnite.push(item);
+          }
+        })
+      }
+      that.giveClassName(that.students.redUnite, 1);
+      that.giveClassName(that.students.blueUnite, 2);
+      that.calcSumCK(that.students);
+    },
+    // 计算各队总分
+    calcSumCK(Rs) {
+      let that = this;
+      let redSum = 0;
+      let blueSum = 0;
+
+      // that.redSum
+      Rs.redUnite.map(function (item, t) {
+        redSum += parseFloat(item.Ck.toFixed(1));
+      });
+      Rs.blueUnite.map(function (item, t) {
+        blueSum += parseFloat(item.Ck.toFixed(1));
+      });
+      that.redSum = redSum.toFixed(1);
+      that.blueSum = blueSum.toFixed(1);
+
+
+      // 进度条 FormatCk
+      let redFmtSum = 0;
+      let blueFmtSum = 0;
+      Rs.redUnite.map(function (item, t) {
+        redFmtSum += parseFloat(item.FormatCk);
+      });
+      Rs.blueUnite.map(function (item, t) {
+        blueFmtSum += parseFloat(item.FormatCk);
+      });
+
+      // pkVal
+      let sumMax = parseFloat(redFmtSum) + parseFloat(blueFmtSum);
+
+      // 当为0时均分
+      if (sumMax == 0) {
+        that.pkVal = '50%';
+      } else {
+        // 限制最大
+        let pkval = parseInt((redFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((redFmtSum / sumMax) * 100);
+        console.log(pkval);
+        that.pkVal = pkval + '%';
+      }
+
+      // // 获取人数 计算人均CK
+      // let redHuman = 0;
+      // let blueHuman = 0;
+      // if (Rs.redUnite != '') {
+      //     redHuman = Rs.redUnite.length;
+      //     that.redSum = parseFloat(redSum / redHuman).toFixed(1);
+      // } else {
+      //     that.redSum = 0
+      // }
+      // if (Rs.blueUnite != '') {
+      //     blueHuman = Rs.blueUnite.length;
+      //     that.blueSum = parseFloat(blueSum / blueHuman).toFixed(1);
+      // } else {
+      //     that.blueSum = 0
+      // }
+      // that.redSum = redSum;
+      // that.blueSum = blueSum;
+
+      // // pkVal ***进度条对比按照人均显示
+      // let sumMax = parseFloat(that.redSum) + parseFloat(that.blueSum);
+      // // 当为0时均分
+      // if (sumMax == 0) {
+      //     that.pkVal = '50%';
+      // } else {
+      //     // 限制最大
+      //     let pkval = parseInt((that.redSum / sumMax) * 100) > 100 ? 100 : parseInt((that.redSum / sumMax) * 100);
+      //     that.pkVal = pkval + '%';
+      // }
+    },
+    // 获取上课学生信息
+    GetgetUserList() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getHello(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          if (!json.Dp) {
+            // that.$message.error('没有获取到课程信息');
+            return false
+          } else {
+            that.ReadLessonInfo(json.Dp);
+          }
+          // 学生分队展示
+          that.UniteBreak(json.Rs);
+          // 人口总数
+          that.num = json.Rs.length ? json.Rs.length : 0;
+          this.ClacClassTime();
+        } else {
+          // 已下课
+          console.log(json.Code);
+          if (json.Code == '999') {
+            // that.$router.push({path: '/2pkRank'});
+          } else {
+            // 已出错
+            that.$message.error(json.Memo);
+          }
+        }
+      })
+    },
+    giveClassName(res, type) {
+      let that = this;
+      let numberClass = '';
+      let colorClass = '';
+      for (let i = 0; i < parseInt(res.length); i++) {
+        switch (true) {
+          case  parseInt(res.length) == 1:
+            numberClass = 'twentyFive';
+            break;
+          case  parseInt(res.length) == 2:
+            numberClass = 'two';
+            break;
+          case  parseInt(res.length) <= 4 && parseInt(res.length) > 2:
+            numberClass = 'three';
+            break;
+          case  parseInt(res.length) <= 9 && parseInt(res.length) > 4:
+            numberClass = 'five';
+            break;
+          case  parseInt(res.length) <= 9 && parseInt(res.length) > 6:
+            numberClass = 'nine';
+            break;
+          case parseInt(res.length) <= 16 && parseInt(res.length) > 9:
+            numberClass = 'sixteen';
+            break;
+          case parseInt(res.length) <= 25 && parseInt(res.length) > 16:
+            numberClass = 'twentyFive';
+            break;
+          case parseInt(res.length) >= 26:
+            numberClass = 'twentyFive';
+            break;
+        }
+        let per = parseInt(res[i].ActivePercent);
+        switch (true) {
+          case per >= 90:
+            colorClass = 'red';
+            break;
+          case per <= 89 && per > 79:
+            colorClass = 'brown';
+            break;
+          case per <= 79 && per > 69:
+            colorClass = 'yellow';
+            break;
+          case per <= 69 && per > 54:
+            colorClass = 'green';
+            break;
+          case per <= 54 && per > 39:
+            colorClass = 'violet';
+            break;
+          case per <= 39:
+            colorClass = 'blue';
+            break
+        }
+
+        that.studentsClassName[i] = {
+          name: numberClass + ' ' + colorClass,
+        }
+
+        if (type == 1) {
+          that.RedstudentsClassName = that.studentsClassName;
+        } else {
+          that.BluestudentsClassName = that.studentsClassName;
+        }
+
+      }
+    },
+    // 计算团队竞技课持续时间
+    ClacClassTime() {
+      let BeginTime = new Date(globalcurrent() + ' ' + this.BeginTime);//结束时间
+      let nowDate = new Date();
+      let date = new Date(nowDate - BeginTime - 8 * 60 * 60 * 1000);//减掉东八区时区问题
+
+      let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
+      let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
+      let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+      this.classInfo.endTime = h + m + s;
+    },
+    // 当前课程状态
+    curgetClassStat() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getClassStat(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 没开课
+          if (json.ClassOn == 0) {
+            console.log("xiakele ");
+            // 0: 下课 团课/私教 排名
+            // 1：团课/私教 todo
+            // 2：竞技课2PK
+            // 3：竞技课3PK
+            that.$router.push({path: '/2pkRank'});
+            switch (parseInt(json.dp)) {
+              case 2:
+                that.$router.push({path: '/2pkRank'});
+                break;
+            }
+          }
+        } else {
+          // that.$message.error(json.Memo);
+        }
+      })
+    },
+  },
   filters: {
     fmtNum(val) {
       if (val == 0) {
@@ -125,7 +494,7 @@ export default {
     }
   },
   components: {
-    Headside, newRecord, newStudent
+    Headside, newRecord, newStudent, student
   }
 }
 </script>
@@ -159,6 +528,160 @@ export default {
     width: 2rem;
     height: 1rem;
   }
+
+  .progressContainer {
+    .valueDisplay {
+      @include cube;
+      height: 2rem;
+      overflow: hidden;
+
+      .lt {
+        width: 50%;
+        float: left;
+
+        span {
+          float: right;
+          background: url("../assets/imgs/pk/redFlag.png");
+          background-repeat: no-repeat;
+          background-position: top center;
+          background-size: 100%;
+        }
+      }
+
+      .rt {
+        width: 50%;
+        float: right;
+
+        span {
+          background: url("../assets/imgs/pk/blueFlag.png");
+          background-repeat: no-repeat;
+          background-position: top center;
+          background-size: 100%;
+        }
+      }
+
+      span {
+        position: relative;
+        top: 0.1rem;
+        width: 1.9rem;
+        height: 0.9rem;
+        float: left;
+
+        em {
+          @include cube;
+          font-size: 0.3rem;
+          color: white;
+          text-align: center;
+          font-style: normal;
+          line-height: 0.5rem;
+        }
+      }
+
+      .md {
+        @include cube;
+        width: 1.6rem;
+        position: relative;
+        bottom: 0.2rem;
+        z-index: 444;
+
+        img {
+          @include cube;
+        }
+      }
+    }
+  }
+}
+
+.lineContianer {
+  position: relative;
+  @include cube;
+  bottom: 1.2rem;
+  z-index: 222;
+
+  .lt {
+    width: 50%;
+    float: left;
+
+    span {
+      width: 4rem;
+      float: right;
+      background: linear-gradient(#d11122 0%, rgba(209, 17, 34, 0.23) 100%);
+
+      em {
+        float: right;
+        text-align: right;
+        margin-right: 1rem;
+      }
+    }
+  }
+
+  .rt {
+    width: 50%;
+    float: right;
+
+    span {
+      width: 4rem;
+      float: left;
+      background: linear-gradient(#4cbbfc 0%, rgba(0, 125, 198, 0.17) 100%);
+
+      em {
+        float: left;
+        text-align: left;
+        margin-left: 1rem;
+      }
+    }
+  }
+
+  span {
+    height: 0.5rem;
+
+    em {
+      color: white;
+      font-size: 0.3rem;
+      font-style: normal;
+    }
+  }
+}
+
+.userPart {
+  @include cube;
+  width: 88%;
+
+  .lt {
+    width: 45%;
+    min-height: 6rem;
+    float: left;
+
+    .bottomLine {
+      background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(209, 17, 34, 0.62) 100%);
+    }
+  }
+
+  .rt {
+    width: 45%;
+    min-height: 6rem;
+    float: right;
+
+    .bottomLine {
+      background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 134, 232, 0.62) 100%);
+    }
+  }
+
+  .md {
+    width: 10%;
+    float: left;
+    color: white;
+    text-align: center;
+    font-size: 0.4rem;
+    padding-top: 11%;
+  }
+
+  .bottomLine {
+    @include cube;
+    height: 0.75rem;
+    border-radius: 18px;
+    opacity: 0.8;
+  }
 }
 
 .icons {