TV2/src/views/Rank.vue

<template>
  <div class="content" :class="[{'bg1': pages == 1}, {'bg2': pages == 2}]">
    <Headside></Headside>
    <!-- 训练排名 -->
    <div class="pageXlpm" v-show="pages == 1">
      <div class="sumTitle">
        <div class="lt">
          <img src="../assets/imgs/rank/fire.svg" alt="">
          <h5>卡路里排名</h5>
        </div>
        <div class="rt">
          <img src="../assets/imgs/rank/ck.svg" alt="">
          <h5>CK排名</h5>
        </div>
        <div class="md">
          <span>本次训练排名</span>
        </div>
      </div>
      <div class="listContainer">
        <div class="lt">
          <ul>
            <div class="ltTitle">
              <span>排名</span>
              <span>成员</span>
              <span>卡路里</span>
            </div>
            <li v-for="(s,i) in students.CalSort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="Listate[i].state"
                :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
              <div class="gary">
                <em>{{ i + 1 }}</em>
                <div class="head">
                  <img :src="s.Head" alt="" v-if="s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
                  <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head"
                      :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
                </div>
                <span class="names">{{ s.Name }}</span>
                <span class="glory">
                  <img src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
                  <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
                  <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->
                </span>
                <span class="score">{{ s.Cle|fmtInt }}</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="rt">
          <ul>
            <div class="ltTitle">
              <span>排名</span>
              <span>成员</span>
              <span>CK</span>
            </div>
            <li v-for="(s,i) in students.CkSort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="Listate[i].state"
                :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
              <div class="gary">
                <em>{{ i + 1 }}</em>
                <div class="head">
                  <img :src="s.Head" alt="" v-if="s.Head" :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
                  <img src="../static/img/people/flyhead.png" alt="" v-if="!s.Head"
                      :class="[{'boy':s.Sex == 1},{'girl':s.Sex == 2}]">
                </div>
                <span class="names">{{ s.Name }}</span>
                <span class="glory">
                  <img src="../assets/imgs/rank/pb.png" v-if="s.IsBreaking == 1" alt="">
                  <!-- <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
                  <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt=""> -->
                </span>
                <span class="score">{{ s.Ck|fmtFloat }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="icons">
        <img src="../assets/imgs/rank/icons2.svg" alt="">
      </div>
    </div>
    <!-- 运动强度排名 -->
    <div class="pageYdqdpm" v-show="pages == 2">
      <div class="title">
        <span>运动强度排名</span>
      </div>
      <eiRank :students="students" :Listate="Listate"></eiRank>
    </div>
    <div v-show="totalTime > 0" class="countdown">{{totalTime}}</div>
  </div>
</template>

<script>
import Headside from '@/components/Headside'
import {ClassUserRank} from "@/api/getApiRes";
import eiRank from '@/components/eiRank'

let qs = require('qs');
export default {
  data() {
    return {
      pages: 1,
      eqSn: '30:9C:23:0C:8B:1E',
      pageStyle: RandomBg(),
      trueDate: true,//真实数据 true false
      autoJump: true,//开启自动跳走
      students: {
        CkSort: [],
        CalSort: [],
        EiSort: [],
        Ei0Sort: [],    //0-39% 激活放松
        Ei1Sort: [],    //40-54% 动态热身
        Ei2Sort: [],    //55-69% 脂肪燃烧
        Ei3Sort: [],    //70-79% 糖分消耗
        Ei4Sort: [],    //80-89% 心肺训练
        Ei5Sort: [],    //90-100% 峰值锻炼
      },
      rsCount: 0,       //获取到的记录数
      fakeCount: 0,     //记录不足，需要填充的记录数
      maxShowNum: 8,    //页面最大显示记录数
      rankTimer: null,
      totalTime: '',
      Listate: [
        {state: false},
        {state: false},
        {state: false},
        {state: false},
        {state: false},
        {state: false},
        {state: false},
        {state: false},
      ],
    }
  },
  mounted() {
    this.init();    
  },
  watch: {
    '$route': function (val) {
      if (val.path == '/rank') {
        if (this.trueDate) {
          this.init();
        } else {
          // this.rankTimer  = setInterval(() => {
          this.students.CkSort = fakeNews(5);
          this.students.CalSort = fakeNews(5);
          // }, 5000);
        }
      } else {
        clearInterval(this.autoJump);
        clearInterval(this.rankTimer);
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.rankTimer);
    this.rankTimer = null;
  },
  methods: {
    init() {
      this.getClassUserRank();
      this.cardPlay();
      this.pages = 1;
      // N秒后翻页
      this.rankTimer = setTimeout(() => {
        if (this.pages == 1) {
          this.pages = 2;                   
        }
        else {
          this.pages = 1;
        }
        this.cardPlay(); 
      }, 30000);
    },
    getClassUserRank() {
      let that = this;
      let param = {
        eqSn: localStorage.eqSn
      };
      let postdata = qs.stringify(param);
      ClassUserRank(postdata).then(res => {
        let json = res;
        // console.log(json);
        if (json.Code == 0) {
          let totalTime = 120;
          let Studenlength = 0;
          if (json.Rs) {
            Studenlength = json.Rs.length;
          }
          // 根据人数多少显示停留时间
          if (Studenlength > 3) {
            totalTime = 120
          } else {
            totalTime = 110
          }
          this.jumpWait(totalTime);

          let CkSort = json.Rs;
          let CalSort = deepClone(json.Rs);
          let EiSort = deepClone(json.Rs);
          this.computeAcMap(EiSort);
          let Rs = json.Rs;
          if (Rs != '') {
            // 排序
            that.students.CkSort = CkSort.sort(function (a, b) {
              return b.Ck - a.Ck;
            });

            that.students.CalSort = CalSort.sort(function (a, b) {
              return b.Cle - a.Cle;
            });

            that.students.EiSort = EiSort.sort(function (a, b) {
              return b.EI - a.EI;
            });
          }
        } else {
          this.students.CkSort = [];
          this.students.CalSort = [];
          this.students.EiSort = [];
          if (json.Code == '999') {
            // that.$router.push({path: '/'});
          } else {
            // 已出错
            that.$message.error(json.Memo);
          }
        }
      })
    },
    computeAcMap(Rs) {
      let that = this;
      let sumAcMap = 0;
      let Ei0Sort = [];    //0-39% 激活放松
      let Ei1Sort = [];    //40-54% 动态热身
      let Ei2Sort = [];    //55-69% 脂肪燃烧
      let Ei3Sort = [];    //70-79% 糖分消耗
      let Ei4Sort = [];    //80-89% 心肺训练
      let Ei5Sort = [];    //90-100% 峰值锻炼

      Rs.map(function (item, t) {
        sumAcMap = 0;
        for (var key in item.EiCalcBean.acMap) {
          // console.log("key = " + key);
          // console.log("value = " + item.EiCalcBean.acMap[key]);
          sumAcMap += parseFloat(item.EiCalcBean.acMap[key]);
        };
        // console.log("sumAcMap = " + sumAcMap);

        item.ei0Per = that.fmtEiPerValue(item.EiCalcBean.acMap[39] / sumAcMap);
        item.ei1Per = that.fmtEiPerValue(item.EiCalcBean.acMap[54] / sumAcMap);
        item.ei2Per = that.fmtEiPerValue(item.EiCalcBean.acMap[69] / sumAcMap);
        item.ei3Per = that.fmtEiPerValue(item.EiCalcBean.acMap[79] / sumAcMap);
        item.ei4Per = that.fmtEiPerValue(item.EiCalcBean.acMap[89] / sumAcMap);
        item.ei5Per = that.fmtEiPerValue(item.EiCalcBean.acMap[100] / sumAcMap);

        Ei0Sort.push(item);
      });
      // console.log(JSON.stringify(Ei0Sort));

      Ei1Sort = deepClone(Ei0Sort);
      Ei2Sort = deepClone(Ei0Sort);
      Ei3Sort = deepClone(Ei0Sort);
      Ei4Sort = deepClone(Ei0Sort);
      Ei5Sort = deepClone(Ei0Sort);

      that.students.Ei0Sort = Ei0Sort.sort(function (a, b) {
        return b.ei0Per - a.ei0Per;
      });
      that.students.Ei1Sort = Ei1Sort.sort(function (a, b) {
        return b.ei1Per - a.ei1Per;
      });
      that.students.Ei2Sort = Ei2Sort.sort(function (a, b) {
        return b.ei2Per - a.ei2Per;
      });
      that.students.Ei3Sort = Ei3Sort.sort(function (a, b) {
        return b.ei3Per - a.ei3Per;
      });
      that.students.Ei4Sort = Ei4Sort.sort(function (a, b) {
        return b.ei4Per - a.ei4Per;
      });
      that.students.Ei5Sort = Ei5Sort.sort(function (a, b) {
        return b.ei5Per - a.ei5Per;
      });
    },
    fmtEiPerValue(val) {
      let fmtval = (val*100).toFixed(0);
      // console.log("val: " + val);
      // console.log("fmtval: " + fmtval);
      return fmtval
    },
    jumpWait(totalTime) {      
      // 倒计时60秒自动关闭
      let that = this;
      clearInterval(clock);
      let clock = window.setInterval(() => {        
        that.totalTime = totalTime;
        if (parseInt(totalTime) <= 0) {
          // 前往等待页面
          that.$router.push({path: '/'});
          // 计时器回收
          clearInterval(clock);
        }
        totalTime--;
      }, 1000)
    },
    cardPlay() {
      let that = this;
      // 重置一下状态
      that.Listate.map(function (t) {
        t.state = false;
      })
      let timeScope = 100;  //400
      let timeLong;
      that.timer = setTimeout(() => {   //设置延迟执行
        for (let i = 0; i < 8; i++) {
          timeLong = parseInt(i * timeScope);
          that.timer = setTimeout(() => {   //设置延迟执行
            that.Listate[i].state = true;
          }, timeLong)
        }
      }, 60);
    },
  },
  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);
      }
    },
  },
  components: {
    Headside, eiRank
  }
}
</script>

<style lang="scss" scoped>

$font-color: white;
$yellow: #FFEB50;

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

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

.bg1 {
  background: url("../../src/assets/imgs/rank/Training.png");
  @include bg;
}

.bg2 {
  background: url("../../src/assets/imgs/rank/bg_ydqdpm.png");
  @include bg;
}

.content {  

  .pageXlpm {
    
    .sumTitle {
      @include cube;
      width: 80%;
      height: 0.75rem;
      margin-top: 0.7rem;
      overflow: visible;

      h5 {
        float: left;
        width: 80%;
        margin: 0;
        text-align: center;
        color: #fff;
        font-size: 0.5rem;
        font-weight: bold;
        line-height: 0.65rem;
      }

      .lt {
        width: 50%;
        height: 0.75rem;
        float: left;
        background: url("../../src/assets/imgs/rank/redTitel.png");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
        border-radius: 250rem;

        img {
          width: 0.51rem;
          float: left;
        }
      }

      .rt {
        width: 50%;
        height: 0.75rem;
        float: right;
        background: url("../../src/assets/imgs/rank/redTitel.png");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
        border-radius: 250rem;

        img {
          width: 0.8rem;
          float: right;
        }

        h5 {
          float: right;
        }
      }

      .md {
        position: relative;
        width: 3rem;
        height: 0.9rem;
        margin: 0 auto;
        bottom: 0.12rem;
        background: url("../../src/assets/imgs/rank/titleBg.png");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% 100%;
        line-height: 0.7rem;
        span {
          @include cube;
          position: relative;
          bottom: 0.65rem;
          color: #fff;
          text-align: center;
          font-size: 0.35rem;
          font-weight: bold;
        }
      }
    }
  
    .listContainer {
      @include cube;
      width: 80%;
      padding-top: 0.5rem;

      .lt {
        width: 47%;
        float: left;
      }

      .rt {
        width: 47%;
        float: right;
        .ltTitle span {
          margin-right: 0.3rem;
        }
      }

      .ltTitle {
        @include cube;

        span {
          float: left;
          color: #fff;
          font-size: 0.25rem;

          &:nth-child(1) {
            margin-right: 1.5rem;
          }

          &:last-child {
            float: right;
            margin-right: 0.2rem;
          }
        }
      }

      ul {
        @include cube;

        li {
          @include cube;
          height: 0.7rem;
          padding-top: 0.2rem;
          .gary {
            @include cube;
            height: 0.6rem;
            margin-bottom: 0.3rem;
            background: url("../assets/imgs/rank/row.png");
            background-repeat: no-repeat;
            background-position: top center;
            background-size: 100% 100%;
            overflow: visible;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 250px;
            border-left: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }

          em {
            width: 0.6rem;
            height: 0.6rem;
            float: left;
            background: url("../assets/imgs/rank/rowTitle.png");
            background-repeat: no-repeat;
            background-position: top center;
            background-size: 100% 100%;
            text-align: left;
            text-indent: 0.1rem;
            font-size: 0.3rem;
            font-weight: bold;
            text-decoration: none;
            font-style: normal;
            color: white;
            line-height: 0.6rem;
          }

          .head {
            position: relative;
            bottom: 0.5rem;
            float: left;
            margin-left: 0.3rem;

            img {
              width: 0.65rem;
              height: 0.65rem;
              border-radius: 250rem;

              &.girl {
                border: 1px solid #EA26EA;
              }

              &.boy {
                border: 1px solid #39B6FF;
              }
            }
          }

          .names {
            float: left;
            color: white;
            font-size: 0.3rem;
            line-height: 0.6rem;
            margin-left: 0.4rem;
            min-width: 1rem;
            text-align: left;
          }

          .glory {
            float: left;
            margin-left: 0.4rem;

            img {
              float: right;
              width: 0.6rem;
              margin-left: 0.2rem;
              margin-top: 0.1rem;
            }
          }

          .score {
            float: right;
            color: #FFE61F;
            font-size: 0.3rem;
            line-height: 0.6rem;
            font-family: Arial;
            font-weight: bold;
            font-style: italic;
            text-align: center;
            padding-right: 0.2rem;
          }
        }
      }
    }
  }

  .pageYdqdpm {
    
    .title {
      // position: relative;
      width: 3.6rem;
      height: 0.75rem;
      margin: 0 auto;
      margin-top: 0.03rem;
      bottom: 0.1rem;
      background: url("../../src/assets/imgs/rank/titleBg2.png");
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 100% 100%;
      line-height: 0.7rem;
      span {
        @include cube;
        // position: relative;
        bottom: 0.65rem;
        color: #fff;
        text-align: center;
        font-size: 0.35rem;
        font-weight: bold;
      }
    }
  }
}

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

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

.countdown {
  width: 1rem;
  position: absolute;
  font-size: 0.25rem;
  color: white;
  right: 0rem;
  bottom: 0.2rem;
}

</style>