flyLong/v2tv/src/views/Main.vue

<template>
  <div :class="pageStyle">
    <Headside></Headside>
<!--    学生列表-->
    <div class="userList">
      <student :students="students" :students-class-name="studentsClassName"></student>
    </div>
    <!--图示-->
    <levelIcon></levelIcon>
    <!--    突破纪录-->
    <newRecord :toper-info="toperInfo"></newRecord>
    <!--    欢迎新同学-->
    <newStudent :student-info="studentInfo"></newStudent>
  </div>
</template>

<script>
import Headside from '@/components/Headside'
import newRecord from '@/components/newRecord'
import newStudent from '@/components/newStudent'
import levelIcon from '@/components/levelIcon'
import student from '@/components/student'
import
{
  getHello,
  getClassStat,
  getRecordBreak,
  getNewUser
} from '@/api/getApiRes'

import '../libs/rem';
import '../Global'

let qs = require('qs');

export default {
  data() {
    return {
      eqSn: '30:9C:23:0C:8B:1E',
      pageStyle: RandomBg(),
      trueDate: true,//真实数据 true false
      times: 1,
      thisClassName: '',
      studentsClassName: [],
      students: [],
      single: [],
      dialogVisible: false,
      serachBtnStatus: false,
      dialogMsg: '',
      imgsrc: '../static/img/people/',
      totalTime: 30,
      studentTime: 15,
      toperInfo: {
        dialogVisible: false,
        toper: {},
      },
      studentInfo: {
        dialogVisible: false,
        Rs: [],
        percent: 0
      },
      fakeEgg: {
        Rs: {
          "DuId": 37,
          "UserId": 0,
          "UserName": "郑伟",
          "Sex": 1,
          "Head": "https://img-operation.csdnimg.cn/csdn/silkroad/img/1604989753379.png",
          "Cle": 400,
          "CleTitle": "个人单次卡路里记录",
          "CleUnit": "千卡",
          "CkTitle": "个人单次CK记录",
          "Ck": 99.9,
          "CkUnit": "CK值",
        }
      },
      mainTimer: null,
      timer2: null,
    }
  },
  mounted() {
    // this.$router.push({path: '/2pkRank'});

    if (this.trueDate) {
      this.init();
    } else {
      // 彩蛋
      // this.OpenEgg(this.fakeEgg);
      // 1 2 4 6 9 10 13 16 21 24
      let Rs = fakeNews(33);
      this.giveClassName(Rs);
      this.students = Rs;
      // this.createNewStudent();
    }
  },
  watch: {
    '$route': function (val) {
      if (val.path == '/main') {
        if (this.trueDate) {
          this.init();
        } else {
          this.students = fakeNews(2);
          this.giveClassName(this.students);
          // this.createEgg(this.students[5]);
        }
      } else {
        clearInterval(this.mainTimer);
        clearInterval(this.timer2);
        clearInterval(this.timer3);
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.mainTimer);
    clearInterval(this.timer2);
    clearInterval(this.timer3);
    this.mainTimer = null;
    this.timer2 = null;
    this.timer3 = null;
  },
  methods: {
    init() {
      // console.log(headTest);
      this.GetgetUserList();
      this.createEgg();
      this.createNewStudent();
      this.curgetClassStat();

      this.mainTimer = setInterval(() => {
        // this.$router.push({path: '/'});
        this.GetgetUserList();
        this.curgetClassStat();
      }, 1000);

      this.timer2 = setInterval(() => {
        this.createEgg();
      }, 31000);

      this.timer3 = setInterval(() => {
        this.createNewStudent();
      }, 6000);
    },
    alertInfo(info) {
      alert(info);
    },
    // 启动一个成就彩蛋
    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 {
            console.log(json.Rs);
            that.OpenStudent(json.Rs);
            // OpenStudent(json.Rs,that);
          }
        } 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)
    },
    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) {
          that.students = json.Rs;
          that.giveClassName(json.Rs);
        } else {
          // 已下课
          if (json.Code == '999') {
            that.students = ""
          } else {
            // 已出错
            that.$message.error(json.Memo);
          }
        }
      })
    },
    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("下课了");
            // 0: 下课 团课/私教 排名
            // 1：团课/私教 todo
            // 2：竞技课2PK
            // 3：竞技课threepk
            switch (parseInt(json.dp)) {
              case 0:
                that.$router.push({path: '/rank'});
                break;
              case 1:
                that.$router.push({path: '/'});
                break;
              case 2:
                that.$router.push({path: '/pk'});
                break;
              case 3:
                that.$router.push({path: '/threepk'});
                break;
            }
          }
        } else {
          console.log("已上课");
        }
      })
    },
    // 给每一个数据加类名，一次遍历全部赋值
    giveClassName(res) {
      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) <= 4 && parseInt(res.length) > 2:
            numberClass = 'three';
            break;
          case  parseInt(res.length) <= 6 && parseInt(res.length) > 4:
            numberClass = 'six';
            break;
          case  parseInt(res.length) <= 9 && parseInt(res.length) > 6:
            numberClass = 'nine';
            break;
          case parseInt(res.length) <= 12 && parseInt(res.length) > 9:
            numberClass = 'ten';
            break;
          case parseInt(res.length) <= 15 && parseInt(res.length) > 12:
            numberClass = 'twelve';
            break;
          case parseInt(res.length) <= 20 && parseInt(res.length) > 15:
            numberClass = 'sixteen';
            break;
          case parseInt(res.length) <= 24 && parseInt(res.length) > 20:
            numberClass = 'twenty';
            break;
          case parseInt(res.length) <= 30 && parseInt(res.length) > 24:
            numberClass = 'twentyFour';
            break;
          case parseInt(res.length) >= 31:
            numberClass = 'twentyFour';
            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,
        }
      }
    },
  },
  components: {
    Headside, levelIcon, newRecord, newStudent, student
  }
}
</script>

<style lang="scss" scoped>
//@import "../assets/css/bg.css";
@import "../assets/css/bg.scss";

* {
  font-family: vista;
}

.pages {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  font-family: vista;
  overflow-y: scroll;
}

</style>