TV2/src/views/pk.vue

<template>
  <div class="pages">
    <Headside></Headside>
    <div class="pageTitle">
    </div>
    <div class="progressContainer">
      <div class="valueDisplay">
        <div class="lt">
            <span :style="{'right': Redflag+'%'}">
              <em>CK {{ redSum }}</em>
            </span>
        </div>
        <div class="rt">
              <span :style="{'left': BlueFlag+'%'}">
              <em>CK {{ blueSum }}</em>
            </span>
        </div>
        <div class="md">
          <img src="../assets/imgs/pk/vs.png" alt="">
        </div>
      </div>
      <div class="lineContianer">
        <div class="lt">
            <span :style="{'width':RedProgress+'%'}">
            </span>
          <em>红队{{ redPeron }}人</em>
        </div>

        <div class="rt">
              <span :style="{'width':BlueProgress+'%'}">
            </span>
          <em>蓝队{{ bluePerson }}人</em>
        </div>
      </div>
    </div>
    <div class="userPart">
      <div class="lt">
        <pkstudent :students="students.redUnite"></pkstudent>
        <div class="bottomLine redBottom"></div>
      </div>
      <div class="md">
        {{ classInfo.endTime }}
      </div>
      <div class="rt">
        <pkstudent :students="students.blueUnite"></pkstudent>
        <div class="bottomLine blueBottom"></div>
      </div>
    </div>
    <div class="icons">
      <img src="../assets/imgs/pk/icons2.svg" alt="">
    </div>
    <!--    突破纪录-->
    <newRecord :toper-info="toperInfo"></newRecord>
    <!--    欢迎新同学-->
    <newStudent :student-info="studentInfo"></newStudent>
  </div>
</template>
<script>
import '../libs/rem';
import Headside from '@/components/Headside'
import newRecord from '@/components/newRecord'
import newStudent from '@/components/newStudent'
import pkstudent from '@/components/pkstudent'

import
{
  getHello,
  getClassStat,
  getRecordBreak,
  getNewUser
} from '@/api/getApiRes'

import '../Global'

let qs = require('qs');
export default {
  data() {
    return {
      ClassOn: 1,
      trueDate: true,//真实数据 true false
      studentsClassName: [
        {name: 'max'}
      ],
      students: {
        redUnite: [],
        blueUnite: [],
      },
      thisClassName: '',
      redSum: 0,
      blueSum: 0,
      redPeron: 0,
      bluePerson: 0,
      pkVal: '50%',
      RedstudentsClassName: [
        {name: 'max'}
      ],
      BluestudentsClassName: [
        {name: 'max'}
      ],
      PlanName: '',
      num: 0,
      Teacher: '',
      classInfo: {
        name: '竞技课程',
        num: '0',
        btTime: '2020-11-13 09:00:00',//时间戳
        endTime: '00:00:00',
        redSum: 0,
        blueSum: 0,
      },
      // totalTime: 30,
      // studentTime: 15,
      toperInfo: {
        dialogVisible: false,
        toper: {},
        totalTime: 30,
      },
      studentInfo: {
        dialogVisible: false,
        Rs: [],
        percent: 0,
        studentTime: 15
      },
      Redflag: 0,
      BlueFlag: 0,
      RedProgress: 25,
      BlueProgress: 25,
    }
  },
  mounted() {
    this.init();
  },
  watch: {
    '$route': function (val) {
      let that = this;
      if (val.path == '/pk') {
        this.init();
      } else {
        clearInterval(this.PkTimer);
        // clearInterval(this.PkEgg);
        clearInterval(this.timer2);
        clearInterval(this.timer3);
        this.PkTimer = null;
        // this.PkEgg = null;
        this.timer2 = null;
        this.timer3 = null;
      }
    }
  },
  beforeDestroy() {
      clearInterval(this.PkTimer);
      // clearInterval(this.PkEgg);
      clearInterval(this.timer2);
      clearInterval(this.timer3);
      this.PkTimer = null;
      // this.PkEgg = null;
      this.timer2 = null;
      this.timer3 = null;
  },
  methods: {
    init() {
      this.GetgetUserList();
      this.createEgg();
      this.createNewStudent();

      this.PkTimer = setInterval(() => {
        this.GetgetUserList();
        this.ClacClassTime();
        this.curgetClassStat();
      }, 1000);
      
      this.timer2 = setInterval(() => {
        this.createEgg();
      }, 25000);
      
      this.timer3 = setInterval(() => {
        this.createNewStudent();
      }, 20000);
    },
    // 启动一个成就彩蛋
    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) {
          console.log('破纪录了');
          that.OpenEgg(json.Rs);
        } 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('来新生了');
          that.OpenStudent(json.Rs);          
        } else {
          // 并没有人破记录
          if (json.Code == 999) return false;
          if (json.Code != 999) that.$message.error(json.Memo + '[ 错误码]' + json.Code);
        }
      })
    },
    OpenEgg(msg, reshowNum=0) {      
      let that = this;
      if (that.ClassOn == 0) {
        console.log('[破纪录] 已下课，取消弹窗 reshowNum: ' + reshowNum);
        return false;
      }
      if (that.studentInfo.dialogVisible == true || that.toperInfo.dialogVisible == true) {
        console.log('[破纪录] 弹出窗口尚未关闭，5秒后重试');
        setTimeout(() => {
          reshowNum++;
          that.OpenEgg(msg, reshowNum);
        }, 5000);
        return false;
      } 
      if (reshowNum > 0) {
        console.log('[破纪录] reshowNum: ' + reshowNum);
      }
      that.toperInfo.toper = msg;
      that.toperInfo.dialogVisible = true;
      // 倒计时20秒自动关闭
      that.toperInfo.totalTime = 20;
      let clock = window.setInterval(() => {
        that.toperInfo.totalTime--;
        if (parseInt(that.toperInfo.totalTime) <= 0) {
          that.toperInfo.dialogVisible = false;// 关闭 自动关闭彩蛋
          clearInterval(clock);
        }
      }, 1000)
    },
    OpenStudent(msg, reshowNum=0) {      
      let that = this;
      if (that.ClassOn == 0) {
        console.log('[欢迎新同学] 已下课，取消弹窗 reshowNum: ' + reshowNum);
        return false;
      }
      if (that.studentInfo.dialogVisible == true || that.toperInfo.dialogVisible == true) {
        console.log('[欢迎新同学] 弹出窗口尚未关闭，5秒后重试');
        setTimeout(() => {
          reshowNum++;
          that.OpenStudent(msg, reshowNum);
        }, 5000);
        return false;
      }
      if (reshowNum > 0) {
        console.log('[欢迎新同学] reshowNum: ' + reshowNum);
      }
      that.studentInfo.Rs = msg;
      that.studentInfo.dialogVisible = true;
      // 倒计时15秒自动关闭
      that.studentInfo.studentTime = 15;
      let clock = window.setInterval(() => {
        that.studentInfo.studentTime--;
        if (parseInt(that.studentInfo.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;
      let pkval = 0;
      Rs.redUnite.map(function (item, t) {
        redFmtSum += parseFloat(item.FormatCk);
      });
      Rs.blueUnite.map(function (item, t) {
        blueFmtSum += parseFloat(item.FormatCk);
      });

      let sumMax = 0;
      if (Rs.redUnite) {
        sumMax = (Rs.redUnite.length + Rs.blueUnite.length) * 1000;
      }

      // 当为0时均分
      if (redFmtSum == 0) {
        that.Redflag = 7;
        that.RedProgress = 25;
      } else {
        // 限制最大
        that.Redflag = parseInt((redFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((redFmtSum / sumMax) * 100);
        that.RedProgress = that.Redflag + 18;
        if (that.RedProgress > 90) {
          that.RedProgress = 90
        }
      }

      if (blueFmtSum == 0) {
        that.BlueFlag = 7;
        that.BlueProgress = 25;
      } else {
        // 限制最大
        that.BlueFlag = parseInt((blueFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((blueFmtSum / sumMax) * 100);
        that.BlueProgress = that.BlueFlag + 18;
        if (that.BlueProgress > 90) {
          that.BlueProgress = 90
        }
      }

    },
    // 获取上课学生信息
    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("[getHello] 已下课 " + json.Code);
          if (json.Code == '999') {
            // that.$router.push({path: '/2pkRank'});
          } else {
            // 已出错
            that.$message.error(json.Memo);
          }
        }
      })
    },
    giveClassName(res, type) {
      let that = this;
      if (type == 1) {
        that.redPeron = parseInt(res.length);
      } else {
        that.bluePerson = parseInt(res.length)
      }
    },
    // 计算团队竞技课持续时间
    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) {
            that.ClassOn = 0;
            if (that.studentInfo.dialogVisible == true || that.toperInfo.dialogVisible == true) {
              console.log('[getClassStat] 下课了，等待弹出窗口关闭');
              return false
            } 

            console.log("下课了");
            // 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) {
        return '--'
      } else {
        if (parseInt(val) < 0) return 0;
        if (parseInt(val) > 0) return val
      }
    },
    fmtFloat(val) {
      if (val == 0) {
        return '0.0'
      } else {
        return parseFloat(val).toFixed(1);
      }
    },
    fmtInt(val) {
      if (val == 0) {
        return '0'
      } else {
        return parseInt(val);
      }
    },
    max100(val) {
      if (val <= 100) {
        return val
      } else {
        return 100
      }
    }
  },
  components: {
    Headside, newRecord, newStudent, pkstudent
  }
}
</script>
<style lang="scss" scoped>

@mixin cube {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

@mixin bg {
  height: 100%;
  background-color: #333;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
}

.pages {
  background: url("../assets/imgs/pk/pkbg.png");
  @include bg;

  .pageTitle {
    background: url("../assets/imgs/pk/pageTitle.svg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    @include cube;
    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.6rem;
        }
      }

      .md {
        @include cube;
        width: 1.6rem;
        position: relative;
        bottom: 0.4rem;
        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(to right, #d11122 0%, rgba(209, 17, 34, 0.23) 100%);
    }

    em {
      position: absolute;
      float: left;
      left: 40%;
      width: 1.6rem;
      color: white;
      font-size: 0.3rem;
      font-style: normal;
      text-align: left;
      line-height: 0.5rem;
    }
  }

  .rt {
    width: 50%;
    float: right;

    span {
      width: 4rem;
      float: left;
      background: linear-gradient(to left, #4cbbfc 0%, rgba(0, 125, 198, 0.17) 100%);
      position: relative;
      top: 0.0rem;
      height: 0.485rem !important;
    }

    em {
      position: absolute;
      float: left;
      left: 54%;
      width: 1.6rem;
      color: white;
      font-size: 0.3rem;
      font-style: normal;
      text-align: left;
      line-height: 0.5rem;
    }
  }

  span {
    height: 0.48rem;
  }
}

.userPart {
  @include cube;
  width: 88%;
  position: relative;
  bottom: 1.1rem;
  height: 7.4rem;

  .lt {
    @include cube;
    position: relative;
    width: 45%;
    height: 100%;
    float: left;

    .bottomLine {
      position: absolute;
      bottom: 0;
      @include cube;
      height: 0.25rem;
      border-radius: 18px;
      opacity: 0.8;
      background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(209, 17, 34, 0.62) 100%);

    }
  }

  .rt {
    @include cube;
    position: relative;
    width: 45%;
    height: 100%;
    float: right;

    .bottomLine {
      position: absolute;
      bottom: 0;
      @include cube;
      height: 0.25rem;
      border-radius: 18px;
      opacity: 0.8;
      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: 18%;
  }
}

.icons {
  @include cube;
  position: absolute;
  bottom: 0.2rem;

  img {
    @include cube;
    // width: 40%;
    width: 18%;
  }
}

/*响应式调整*/
@media(min-width: 320px) and (max-width: 1025px) {
  .progressContainer {
    margin-top: 0.9rem;
  }
  .userPart {
    height: 10rem;
    overflow-y: scroll;
  }
  /deep/ .twentyFive .names {
    bottom: 0.4rem !important;
  }
}
</style>