flyLong/v2tv/src/views/threepk.vue

<template>
  <div class="pages">
    <Headside></Headside>
    <div class="pageTitle">
      <em>
        {{ classInfo.endTime }}
      </em>
    </div>
    <div class="progressContainer">
      <div class="valueDisplay">
        <div class="lt">
            <span :style="{'left': Redflag+'%'}">
              <em>CK {{ redSum }}</em>
            </span>
        </div>
        <div class="md">
          <span :style="{'left': BlueFlag+'%'}">
              <em>CK {{ blueSum }}</em>
            </span>
        </div>
        <div class="rt">
              <span :style="{'left': yellowFlag+'%'}">
              <em>CK {{ yellowSum }}</em>
            </span>
        </div>
      </div>
      <div class="lineContianer">
        <div class="lt">
            <span :style="{'width':RedProgress+'%'}">
            </span>
          <em>红队{{ redPeron }}人</em>
        </div>
        <div class="md">
          <img class="vsIcon leftVs" src="../assets/imgs/pk/vs.png" alt="">
          <span :style="{'width':BlueProgress+'%'}">
            </span>
          <em>蓝队{{ bluePerson }}人</em>
          <img class="vsIcon rightVs" src="../assets/imgs/pk/vs.png" alt="">
        </div>
        <div class="rt">
              <span :style="{'width':yellowProgress+'%'}">
            </span>
          <em>黄队{{ yellowPerson }}人</em>
        </div>
      </div>
    </div>
    <div class="userPart">
      <div class="lt">
        <threestudent :students="students.redUnite"></threestudent>
        <div class="bottomLine redBottom"></div>
      </div>
      <div class="md">
        <threestudent :students="students.blueUnite"></threestudent>
        <div class="bottomLine blueBottom"></div>
      </div>
      <div class="rt">
        <threestudent :students="students.yellowUnite"></threestudent>
        <div class="bottomLine yellowBottom"></div>
      </div>
    </div>
    <div class="icons">
      <img src="../assets/imgs/pk/icons.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 threestudent from '@/components/threestudent'

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

import '../Global'

let qs = require('qs');
export default {
  data() {
    return {
      trueDate: true,//真实数据 true false
      studentsClassName: [
        {name: 'max'}
      ],
      students: {
        redUnite: [],
        blueUnite: [],
        yellowUnite: [],
      },
      thisClassName: '',
      redSum: 0,
      blueSum: 0,
      yellowSum: 0,
      redPeron: 0,
      bluePerson: 0,
      yellowPerson: 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: {},
      },
      studentInfo: {
        dialogVisible: false,
        Rs: [],
        percent: 0
      },
      Redflag: 0,
      BlueFlag: 0,
      yellowFlag: 0,
      RedProgress: 25,
      BlueProgress: 25,
      yellowProgress: 25,
    }
  },
  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);
          }
          if (item.GroupNo == 3) {
            that.students.yellowUnite.push(item);
          }
        })
      }
      that.giveClassName(that.students.redUnite, 1);
      that.giveClassName(that.students.blueUnite, 2);
      that.giveClassName(that.students.yellowUnite, 3);
      that.calcSumCK(that.students);
    },
    // 计算各队总分
    calcSumCK(Rs) {
      let that = this;
      let redSum = 0;
      let blueSum = 0;
      let yellowSum = 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));
      });
      Rs.yellowUnite.map(function (item, t) {
        yellowSum += parseFloat(item.Ck.toFixed(1));
      });

      that.redSum = redSum.toFixed(1);
      that.blueSum = blueSum.toFixed(1);
      that.yellowSum = yellowSum.toFixed(1);

      // 进度条 FormatCk
      let redFmtSum = 0;
      let blueFmtSum = 0;
      let yellowFmtSum = 0;
      let pkval = 0;
      Rs.redUnite.map(function (item, t) {
        redFmtSum += parseFloat(item.FormatCk);
      });
      Rs.blueUnite.map(function (item, t) {
        blueFmtSum += parseFloat(item.FormatCk);
      });
      Rs.yellowUnite.map(function (item, t) {
        yellowFmtSum += parseFloat(item.FormatCk);
      });

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

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

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

      }

      if (yellowFmtSum == 0) {
        that.yellowFlag = 0;
        that.yellowProgress = 28;
      } else {
        // 限制最大
        that.yellowFlag = parseInt((yellowFmtSum / sumMax) * 100) > 100 ? 100 : parseInt((blueFmtSum / sumMax) * 100);
        that.yellowProgress = that.yellowFlag + 28
        if (that.yellowProgress > 75) {
          that.yellowProgress = 75
        }
      }
    },
    // 获取上课学生信息
    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 = 'max';
            break;
          case  parseInt(res.length) == 2:
            numberClass = 'two';
            break;
          case   parseInt(res.length) > 2:
            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;
        that.redPeron = parseInt(res.length);
      } else if (type == 2) {
        // that.BluestudentsClassName = that.studentsClassName;
        that.bluePerson = parseInt(res.length)
      } else if (type == 3) {
        // that.BluestudentsClassName = that.studentsClassName;
        that.yellowPerson = 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) {
            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) {
        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, threestudent
  }
}
</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/three/threeBg.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;
    overflow: visible;

    em {
      position: relative;
      top: 0.2rem;
      left: 3.6rem;
      float: right;
      color: white;
      font-size: 0.3rem;
      font-style: normal;
    }
  }

  .progressContainer {
    .valueDisplay {
      @include cube;
      width: 98%;
      height: 2rem;
      overflow: hidden;
      margin-top: 0.4rem;

      .lt {
        width: 33.33%;
        float: left;

        span {
          background: url("../assets/imgs/three/redFlag.png");
          background-repeat: no-repeat;
          background-position: top center;
          background-size: 100%;
        }
      }

      .md {
        width: 33.33% !important;
        float: left;

        span {
          background: url("../assets/imgs/three/blueFlag.png");
          background-repeat: no-repeat;
          background-position: top center;
          background-size: 100%;
        }
      }

      .rt {
        width: 33.33%;
        float: left;

        span {
          background: url("../assets/imgs/three/yellowFlag.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;
        }
      }
    }
  }
}

.progressContainer {
  @include cube;
  height: 2.8rem;
}

.lineContianer {
  position: relative;
  @include cube;
  width: 98%;
  bottom: 1rem;
  z-index: 222;
  overflow: visible;

  .lt {
    width: 33.33%;
    float: left;

    span {
      width: 4rem;
      float: left;
      border-radius: 3px;
      background: linear-gradient(to left, #d11122 0%, rgba(209, 17, 34, 0.23) 100%);

    }

    em {
      position: relative;
      float: left;
      left: -1.9rem;
      width: 1.6rem;
      color: white;
      text-align: right;
      font-size: 0.3rem;
      font-style: normal;
    }
  }

  .md {
    width: 33.33%;
    float: left;
    overflow: visible;

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

    em {
      position: relative;
      float: left;
      left: -3.1rem;
      width: 1.6rem;
      color: white;
      text-align: right;
      font-size: 0.3rem;
      font-style: normal;
    }

    img {
      position: relative;
      width: 1.2rem;
      float: left;
      left: -0.6rem;
      overflow: visible;
      bottom: 0.2rem;

      &.rightVs {
        float: right;
        left: 0.7rem;
      }
    }

  }

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

    span {
      width: 4rem;
      float: left;
      border-radius: 3px;
      background: linear-gradient(to left, #fccd4c 0%, rgba(255, 228, 15, 0.26) 100%);
    }

    em {
      position: relative;
      float: left;
      left: -1.85rem;
      width: 1.6rem;
      color: white;
      text-align: right;
      font-size: 0.3rem;
      font-style: normal;
    }
  }

  span {
    height: 0.5rem;
  }
}

.userPart {
  @include cube;
  width: 100%;
  position: relative;
  bottom: 1rem;
  height: 6.8rem;
  padding-top: 0.1rem;

  .lt {
    @include cube;
    position: relative;
    width: 33.33%;
    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%);

    }
  }

  .md {
    @include cube;
    position: relative;
    width: 33.33%;
    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(0, 134, 232, 0.62) 100%);
    }
  }

  .rt {
    @include cube;
    position: relative;
    width: 33.33%;
    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(216, 191, 0, 0.9) 100%);
    }
  }
}

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

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

/*响应式调整*/
@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>