v2.2.9

src/Mock/index.js

@@ -133,6 +133,24 @@ let testStudent = function (num, team, mustbeTeamOne) {
             // Ck: "@float(0,0,0,0)",
             Cle: "@float(1,1500,0,1)",
             EI: "@float(1,3000,0,1)",
+            EiCalcBean: {
+                "acWeight":{
+                    "100":100,
+                    "39":10,
+                    "54":20,
+                    "69":40,
+                    "79":60,
+                    "89":80
+                },
+                "acMap":{
+                    "100": "@integer(0, 33187)",
+                    "39": "@integer(0, 73716)",
+                    "54": "@integer(0, 70110)",
+                    "69": "@integer(0, 65563)",
+                    "79": "@integer(0, 55906)",
+                    "89": "@integer(0, 50048)"
+                }
+            },
             DuId: 119,
             EndTime: 0,
             GroupNo: group,
@@ -327,15 +345,15 @@ let testHerosRankingQuery = function (num) {
                     "Unite": "千卡",
                     "Message": ""
                 },
-                {
-                    "UserName": "@cname",
-                    // UserName: "赵沂",
-                    "Sex": 1,
-                    "Head": require('../static/img/testhead.png'),
-                    "Values": "2290",
-                    "Unite": "千卡",
-                    "Message": ""
-                }
+                // {
+                //     "UserName": "@cname",
+                //     // UserName: "赵沂",
+                //     "Sex": 1,
+                //     "Head": require('../static/img/testhead.png'),
+                //     "Values": "2290",
+                //     "Unite": "千卡",
+                //     "Message": ""
+                // }
             ]
         },
         {
@@ -411,7 +429,7 @@ if (t == 1) {
     // }
 
     // 0: 下课 团课/私教/PK 的排名
-    let LessonClass = 2;
+    let LessonClass = 0;
     let LessonDp = 0;
     // 1：团课/私教
     // 2：竞技课2PK
@@ -445,8 +463,8 @@ if (t == 1) {
             Mock.mock(Mockapi + 'UserListInfo', 'post', testStudent(15, 1)); //
             Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(0, 0));
             Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(0, 0));
-            Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(16, 2));
-            Mock.mock(Mockapi + 'ClassUserRank', 'post', testStudent(16, 2));
+            Mock.mock(curheadapi + 'ClassUserRank', 'post', testStudent(7, 2));
+            Mock.mock(Mockapi + 'ClassUserRank', 'post', testStudent(3, 2));
         } else if (LessonDp == 1) {
             Mock.mock(curheadapi + 'ClassStatQuery', 'post', getClassStat(0, 1));
             Mock.mock(Mockapi + 'ClassStatQuery', 'post', getClassStat(0, 1));

src/assets/imgs/rank/litr.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="56.555" height="59"
+     viewBox="0 0 56.555 59">
+    <defs>
+        <linearGradient id="linear-gradient" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox">
+            <stop offset="0" stop-color="#fff" stop-opacity="0.588"/>
+            <stop offset="0.246" stop-color="#fff" stop-opacity="0.396"/>
+            <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+    <g id="路径_152" data-name="路径 152" transform="translate(-22.445)" fill="url(#linear-gradient)">
+        <path d="M22.445,0H49.5C65.792,0,79,29.5,79,29.5S65.792,59,49.5,59H22.445Z" stroke="none"/>
+        <path d="M 23.444580078125 1 L 23.444580078125 58 L 49.5 58 C 52.98337936401367 58 56.63510131835938 56.52402114868164 60.35372924804688 53.61305999755859 C 63.40036010742188 51.2281494140625 66.48796081542969 47.88941955566406 69.53079223632813 43.68962097167969 C 74.04706573486328 37.45610809326172 77.12688446044922 31.14069938659668 77.898193359375 29.4998836517334 C 77.12876892089844 27.86222839355469 74.060546875 21.56817245483398 69.54959869384766 15.33636093139648 C 66.50479888916016 11.13000869750977 63.41497039794922 7.785758972167969 60.36592864990234 5.396499633789063 C 56.64303970336914 2.479198455810547 52.98720932006836 1 49.5 1 L 23.444580078125 1 M 22.444580078125 0 L 49.5 0 C 65.79240417480469 0 79 29.5 79 29.5 C 79 29.5 65.79240417480469 59 49.5 59 L 22.444580078125 59 L 22.444580078125 0 Z"
+              stroke="none" fill="rgba(255,255,255,0.18)"/>
+    </g>
+</svg>

src/components/eiRank.vue

@@ -0,0 +1,447 @@
+<template>
+  <div class="main">
+    <!-- 序号 -->
+    <div class="sn">
+      <ul>
+        <li v-for="(s,i) in students.EiSort.slice(0, maxShowNum)" v-show="Listate[i].state" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+          <div class="num">{{ i + 1 }}</div>
+        </li>
+      </ul>
+    </div>
+    <!-- 激活放松 -->
+    <div class="listContainer jhfs">
+      <ul>
+        <div class="listTitle">
+          <img src="../assets/imgs/rank/titile_jhfs.png" alt="">
+        </div>
+        <div class="listBody">
+          <li v-for="(s,i) in students.Ei0Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="Listate[i].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+            <div>
+              <span class="names">{{ s.Name }}</span>
+              <span class="score" v-if="s.ei0Per > 0">{{ s.ei0Per|fmtInt }}%</span>
+              <span class="score" v-else>- -</span>
+            </div>
+          </li>
+          <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
+            <div>
+              <span class="names">&nbsp;</span>
+              <span class="score">&nbsp;</span>
+            </div>
+          </li>
+        </div>
+      </ul>
+    </div>
+    
+    <!-- 动态热身 -->
+    <div class="listContainer dtrs">
+      <ul>
+        <div class="listTitle">
+          <img src="../assets/imgs/rank/titile_dtrs.png" alt="">
+        </div>
+        <div class="listBody">
+          <li v-for="(s,i) in students.Ei1Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="Listate[i].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+            <div>
+              <span class="names">{{ s.Name }}</span>
+              <span class="score" v-if="s.ei1Per > 0">{{ s.ei1Per|fmtInt }}%</span>
+              <span class="score" v-else>- -</span>
+            </div>
+          </li>
+          <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
+            <div>
+              <span class="names">&nbsp;</span>
+              <span class="score">&nbsp;</span>
+            </div>
+          </li>
+        </div>
+      </ul>
+    </div>
+    
+    <!-- 脂肪燃烧 -->
+    <div class="listContainer zfrs">
+      <ul>
+        <div class="listTitle">
+          <img src="../assets/imgs/rank/titile_zfrs.png" alt="">
+        </div>
+        <div class="listBody">
+          <li v-for="(s,i) in students.Ei2Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="Listate[i].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+            <div>
+              <span class="names">{{ s.Name }}</span>
+              <span class="score" v-if="s.ei2Per > 0">{{ s.ei2Per|fmtInt }}%</span>
+              <span class="score" v-else>- -</span>
+            </div>
+          </li>
+          <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
+            <div>
+              <span class="names">&nbsp;</span>
+              <span class="score">&nbsp;</span>
+            </div>
+          </li>
+        </div>
+      </ul>
+    </div>
+    
+    <!-- 糖分消耗 -->
+    <div class="listContainer tfxh">
+      <ul>
+        <div class="listTitle">
+          <img src="../assets/imgs/rank/titile_tfxh.png" alt="">
+        </div>
+        <div class="listBody">
+          <li v-for="(s,i) in students.Ei3Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="Listate[i].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+            <div>
+              <span class="names">{{ s.Name }}</span>
+              <span class="score" v-if="s.ei3Per > 0">{{ s.ei3Per|fmtInt }}%</span>
+              <span class="score" v-else>- -</span>
+            </div>
+          </li>
+          <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
+            <div>
+              <span class="names">&nbsp;</span>
+              <span class="score">&nbsp;</span>
+            </div>
+          </li>
+        </div>
+      </ul>
+    </div>
+    
+    <!-- 心肺训练 -->
+    <div class="listContainer xfxl">
+      <ul>
+        <div class="listTitle">
+          <img src="../assets/imgs/rank/titile_xfxl.png" alt="">
+        </div>
+        <div class="listBody">
+          <li v-for="(s,i) in students.Ei4Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="Listate[i].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+            <div>
+              <span class="names">{{ s.Name }}</span>
+              <span class="score" v-if="s.ei4Per > 0">{{ s.ei4Per|fmtInt }}%</span>
+              <span class="score" v-else>- -</span>
+            </div>
+          </li>
+          <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
+            <div>
+              <span class="names">&nbsp;</span>
+              <span class="score">&nbsp;</span>
+            </div>
+          </li>
+        </div>
+      </ul>
+    </div>
+    
+    <!-- 峰值锻炼 -->
+    <div class="listContainer fzdl">
+      <ul>
+        <div class="listTitle">
+          <img src="../assets/imgs/rank/titile_fzdl.png" alt="">
+        </div>
+        <div class="listBody">
+          <li v-for="(s,i) in students.Ei5Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="Listate[i].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+            <div>
+              <span class="names">{{ s.Name }}</span>
+              <span class="score" v-if="s.ei5Per > 0">{{ s.ei5Per|fmtInt }}%</span>
+              <span class="score" v-else>- -</span>
+            </div>
+          </li>
+          <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
+            <div>
+              <span class="names">&nbsp;</span>
+              <span class="score">&nbsp;</span>
+            </div>
+          </li>
+        </div>
+      </ul>
+    </div>
+    
+    <!-- 运动强度 -->
+    <div class="listContainer ydqd">
+      <ul>
+        <div class="listTitle">
+          <img src="../assets/imgs/rank/titile_ydqd.png" alt="">
+        </div>
+        <div class="listBody">
+          <li v-for="(s,i) in students.EiSort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="Listate[i].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+            <div>
+              <span class="names">{{ s.Name }}</span>
+              <span class="score" v-if="s.EI > 0">{{ s.EI|fmtInt }}</span>
+              <span class="score" v-else>- -</span>
+            </div>
+          </li>
+          <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
+            :class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
+            <div>
+              <span class="names">&nbsp;</span>
+              <span class="score">&nbsp;</span>
+            </div>
+          </li>
+        </div>
+      </ul>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      rsCount: 0,       //获取到的记录数      
+      fakeCount: 0,     //记录不足，需要填充的记录数
+      maxShowNum: 8,    //页面最大显示记录数       
+    }
+  },
+  mounted() {
+    // console.log("eiRank mounted");
+    // console.log(JSON.stringify(this.students.Ei1Sort));
+  },
+  props: ['students', 'Listate'],
+  watch: {
+    'students': {
+      handler(newName, oldName) {
+        let that = this;
+        if (!newName) {
+          console.log('没有传入数据');
+        }
+        let Studenlength = newName.EiSort.length;
+        if (Studenlength < that.maxShowNum) {
+          that.rsCount = Studenlength
+          that.fakeCount = that.maxShowNum - that.rsCount;
+        }
+        else {
+          that.rsCount = that.maxShowNum
+          that.fakeCount = 0;
+        }
+        console.log("rsCount:" + that.rsCount);
+        console.log("fakeCount:" + that.fakeCount);
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  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 parseFloat(val).toFixed(2);
+        return parseInt(val);
+      }
+    }
+  }
+}
+</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;
+}
+
+.main {      
+  @include cube;
+  width: 100%;
+  margin-top: 0.4rem;
+  overflow: visible;
+
+  .listContainer {
+    width: 2.5rem;
+    float: left;
+    margin-left: 0.05rem;
+    margin-right: 0.13rem;
+  }
+
+  ul {
+    @include cube;
+
+    .listTitle {
+      height: 1.0rem;
+      margin-top: 0rem;
+      margin: 0 auto;
+      margin-bottom: 0.2rem;
+
+      img {
+      width: 2.5rem;
+      }
+    }
+
+    .listBody {
+      padding-top: 0.3rem;
+      padding-bottom: 0.3rem;
+      background-repeat: no-repeat;
+      background-position: top center;
+      // background-color: red;
+      min-height: 7rem;
+      // opacity:0.8;
+    }
+
+    li {
+      @include cube;
+      margin-bottom: 0.3rem;
+      width: 100%;
+      background: url("../assets/imgs/rank/bg_cell.png");
+      // background-color: blue;
+      background-size: 100% 100%;
+      background-position: left center;
+
+      &:last-child {
+        margin-bottom: 0rem;
+      }
+
+      .names {
+        float: left;
+        color: white;
+        font-size: 0.28rem;
+        line-height: 0.56rem;
+        margin-left: 0.3rem;
+        min-width: 1rem;
+        text-align: left;
+      }
+
+      .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.3rem;
+      }
+    }
+  }
+}
+
+.sn {
+  width: 0.7rem;
+  padding-top: 1.476rem;
+  float: left;
+
+  ul {
+
+    li {
+      background: url("");
+      margin-top: 0rem;
+      margin-bottom: 0.244rem;
+
+      .num {
+        position: relative;
+        left: -0.1rem;
+        width: 0.9rem;
+        height: 0.65rem;
+        float: left;
+        background: url("../assets/imgs/wait/litr.svg");
+        background-size: 100% 100%;
+        background-position: left center;
+        line-height: 0.65rem;
+        font-size: 0.35rem;
+        font-weight: bold;
+        text-align: left;
+        text-indent: 0.2rem;
+        font-style: normal;
+        color: #fff;
+        text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.47);
+      }
+    }
+  }
+}
+
+.jhfs {      
+  ul {
+    .listBody {
+      background: url("../../src/assets/imgs/rank/bg_jhfs.png");
+    }
+  }
+}
+
+.dtrs {      
+  ul {
+    .listBody {
+      background: url("../../src/assets/imgs/rank/bg_dtrs.png");
+    }
+  }
+}
+
+.zfrs {      
+  ul {
+    .listBody {
+      background: url("../../src/assets/imgs/rank/bg_zfrs.png");
+    }
+  }
+}
+
+.tfxh {      
+  ul {
+    .listBody {
+      background: url("../../src/assets/imgs/rank/bg_tfxh.png");
+    }
+  }
+}
+
+.xfxl {      
+  ul {
+    .listBody {
+      background: url("../../src/assets/imgs/rank/bg_xfxl.png");
+    }
+  }
+}
+
+.fzdl {      
+  ul {
+    .listBody {
+      background: url("../../src/assets/imgs/rank/bg_fzdl.png");
+    }
+  }
+}
+
+.ydqd {
+  margin-left: 0.36rem !important;
+
+  ul {
+    .listBody {
+      background: url("../../src/assets/imgs/rank/bg_ydqd.png");
+    }
+  }
+}
+</style>

src/components/student.vue

@@ -85,42 +85,6 @@ export default {
   },
   props: ['students', 'studentsClassName'],
   watch: {
-    // 'studentsClassName': {
-    //   // 自动计算补全空白处
-    //   handler(newName, oldName) {
-    //     if (!newName) {
-    //       console.log('没有传入className');
-    //       // return false
-    //     }
-    //     let sum = 0;
-    //     let that = this;
-    //     sum = newName.length;
-    //     if (sum == 3) {
-    //       that.studentsFake = 1;
-    //     }
-    //     if (sum >= 5 && sum < 9) {
-    //       that.studentsFake = 9 - sum;
-    //     }
-    //     if (sum >= 10 && sum < 12) {
-    //       that.studentsFake = 12 - sum;
-    //     }
-    //     if (sum >= 13 && sum < 16) {
-    //       that.studentsFake = 16 - sum;
-    //     }
-    //     if (sum >= 16 && sum < 26) {
-    //       that.studentsFake = 25 - sum;
-    //     }
-    //     if (sum >= 26 && sum < 30) {
-    //       that.studentsFake = 30 - sum;
-    //     }
-    //     if (sum >= 30) {
-    //       that.studentsFake = 0
-    //     }
-    //     console.log('studentsFake',that.studentsFake);
-    //   },
-    //   deep: true,
-    //   immediate: true
-    // }
     'students': {
       // 自动计算补全空白处
       handler(newName, oldName) {

src/views/Rank.vue

@@ -1,114 +1,87 @@
 <template>
-  <div class="content">
+  <div class="content" :class="[{'bg1': pages == 1}, {'bg2': pages == 2}]">
     <Headside></Headside>
-    <div class="title">
-      <span>本次训练排名</span>
-    </div>
-    <div class="sumTitle">
-      <div class="lt">
-        <img src="../assets/imgs/rank/fire.svg" alt="">
-        <h5>卡路里排名</h5>
-      </div>
-      <div class="md">
-        <img src="../assets/imgs/rank/ck.svg" alt="">
-        <h5>CK 排名</h5>
-      </div>
-      <div class="rt">
-        <img src="../assets/imgs/rank/ei.svg" alt="">
-        <h5>Ei 排名</h5>
+    <!-- 训练排名 -->
+    <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>
-    <div class="listContainer">
-      <div class="lt">
-        <ul>
-          <div class="ltTitle">
-            <span>排名</span>
-            <span>成员</span>
-            <span class="titleCle">卡路里</span>
-          </div>
-          <li v-for="(s,i) in students.CalSort" v-if="i <= 7" 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 class="listContainer">
+        <div class="lt">
+          <ul>
+            <div class="ltTitle">
+              <span>排名</span>
+              <span>成员</span>
+              <span>卡路里</span>
             </div>
-          </li>
-        </ul>
-      </div>
-      <div class="md">
-        <ul>
-          <div class="ltTitle">
-            <span>排名</span>
-            <span>成员</span>
-            <span class="titleCK">CK</span>
-          </div>
-          <li v-for="(s,i) in students.CkSort" v-if="i <= 7" 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}]">
+            <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>
-              <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>
+            </li>
+          </ul>
+        </div>
+        <div class="rt">
+          <ul>
+            <div class="ltTitle">
+              <span>排名</span>
+              <span>成员</span>
+              <span>CK</span>
             </div>
-          </li>
-        </ul>
-      </div>
-      <div class="rt">
-        <ul>
-          <div class="ltTitle">
-            <span>排名</span>
-            <span>成员</span>
-            <span class="titleEI">Ei</span>
-          </div>
-          <li v-for="(s,i) in students.EiSort" v-if="i <= 7" 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}]">
+            <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>
-              <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.EI|fmtInt }}
-              </span>
-            </div>
-          </li>
-        </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="icons">
+        <img src="../assets/imgs/rank/icons2.svg" alt="">
       </div>
     </div>
-    <div class="icons">
-      <img src="../assets/imgs/rank/icons2.svg" alt="">
+    <!-- 运动强度排名 -->
+    <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>
@@ -117,11 +90,13 @@
 <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
@@ -130,7 +105,16 @@ export default {
         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: [
@@ -146,9 +130,7 @@ export default {
     }
   },
   mounted() {
-    // console.log("[Rank] mounted");
-    this.init();
-    this.cardPlay();
+    this.init();    
   },
   watch: {
     '$route': function (val) {
@@ -159,7 +141,6 @@ export default {
           // this.rankTimer  = setInterval(() => {
           this.students.CkSort = fakeNews(5);
           this.students.CalSort = fakeNews(5);
-          this.students.EiSort = fakeNews(5);
           // }, 5000);
         }
       } else {
@@ -175,9 +156,20 @@ export default {
   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() {
-      // console.log("getClassUserRank");
       let that = this;
       let param = {
         eqSn: localStorage.eqSn
@@ -185,24 +177,25 @@ export default {
       let postdata = qs.stringify(param);
       ClassUserRank(postdata).then(res => {
         let json = res;
-        // console.log("ClassUserRank: " + JSON.stringify(json));
+        // console.log(json);
         if (json.Code == 0) {
-          let totalTime = 40;
+          let totalTime = 120;
           let Studenlength = 0;
           if (json.Rs) {
             Studenlength = json.Rs.length;
           }
           // 根据人数多少显示停留时间
           if (Studenlength > 3) {
-            totalTime = 40 
+            totalTime = 120
           } else {
-            totalTime = 30
+            totalTime = 110
           }
-          this.jumpWait(totalTime);  //tmp del 调试时关闭跳走
+          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 != '') {
             // 排序
@@ -213,7 +206,7 @@ export default {
             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;
             });
@@ -231,6 +224,67 @@ export default {
         }
       })
     },
+    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;
@@ -289,12 +343,16 @@ export default {
     },
   },
   components: {
-    Headside
+    Headside, eiRank
   }
 }
 </script>
 
 <style lang="scss" scoped>
+
+$font-color: white;
+$yellow: #FFEB50;
+
 @mixin bg {
   height: 100%;
   background-color: #333;
@@ -310,257 +368,256 @@ export default {
   margin: 0 auto;
 }
 
-.content {
-  background: url("../../src/assets/imgs/rank/pageBg.png");
+.bg1 {
+  background: url("../../src/assets/imgs/rank/Training.png");
   @include bg;
+}
 
-  .title {
-    // position: relative;
-    width: 3rem;
-    height: 0.75rem;
-    margin: 0 auto;
-    margin-top: -0.38rem;
-    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;
-    }
-  }
-  
-  .sumTitle {
-    @include cube;
-    width: 92%;
-    height: 0.75rem;
-    margin-top: 0.3rem;
-    overflow: visible;
+.bg2 {
+  background: url("../../src/assets/imgs/rank/bg_ydqdpm.png");
+  @include bg;
+}
 
-    h5 {
-      float: left;
-      width: 80%;
-      margin: 0;
-      margin-top: 0.04rem;
-      text-align: center;
-      color: #fff;
-      font-size: 0.46rem;
-      font-weight: bold;
-    }
+.content {  
 
-    .lt {
-      width: 32%;
+  .pageXlpm {
+    
+    .sumTitle {
+      @include cube;
+      width: 80%;
       height: 0.75rem;
-      float: left;
-      background: url("../../src/assets/imgs/rank/redTitel2.png");
-      background-repeat: no-repeat;
-      background-position: top center;
-      background-size: 100%;
-      border-radius: 250rem;
+      margin-top: 0.7rem;
+      overflow: visible;
 
-      img {
-        width: 0.70rem;
+      h5 {
         float: left;
+        width: 80%;
+        margin: 0;
+        text-align: center;
+        color: #fff;
+        font-size: 0.5rem;
+        font-weight: bold;
+        line-height: 0.65rem;
       }
-    }
 
-    .md {
-      width: 32%;
-      height: 0.75rem;
-      float: left;
-      margin-left: 0.35rem;
-      background: url("../../src/assets/imgs/rank/redTitel2.png");
-      background-repeat: no-repeat;
-      background-position: top center;
-      background-size: 100%;
-      border-radius: 250rem;
-
-      img {
-        width: 0.95rem;
+      .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;
 
-      h5 {
-        margin-left: -0.3rem;
+        img {
+          width: 0.51rem;
+          float: left;
+        }
       }
-    }
 
-    .rt {
-      width: 32%;
-      height: 0.75rem;
-      float: right;
-      background: url("../../src/assets/imgs/rank/redTitel2.png");
-      background-repeat: no-repeat;
-      background-position: top center;
-      background-size: 100%;
-      border-radius: 250rem;
+      .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.95rem;
-        float: left;
+        img {
+          width: 0.8rem;
+          float: right;
+        }
+
+        h5 {
+          float: right;
+        }
       }
-      
-      h5 {
-        margin-left: -0.3rem;
+
+      .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: 92%;
-  padding-top: 0.5rem;
-
-  .lt {
-    width: 30%;
-    float: left;
-  }
-
-  .md {
-    width: 30%;
-    float: left;
-    margin-left: 0.92rem;
-  }
-
-  .rt {
-    width: 30%;
-    float: right;
-    // .ltTitle span {
-    //   margin-right: 0.3rem;
-    // }
-  }
-
-  .ltTitle {
-    @include cube;
-
-    span {
-      float: left;
-      color: #fff;
-      font-size: 0.25rem;
+  
+    .listContainer {
+      @include cube;
+      width: 80%;
+      padding-top: 0.5rem;
 
-      &:nth-child(1) {
-        margin-right: 1.5rem;
+      .lt {
+        width: 47%;
+        float: left;
       }
 
-      &:last-child {
+      .rt {
+        width: 47%;
         float: right;
-        // margin-right: 0.2rem;
+        .ltTitle span {
+          margin-right: 0.3rem;
+        }
       }
-    }
 
-    .titleCle {
-      margin-right: 0.2rem;
-    }
-    .titleCK {
-      margin-right: 0.3rem;
-    }
-    .titleEI {
-      margin-right: 0.5rem;
-    }
-  }
+      .ltTitle {
+        @include cube;
 
-  ul {
-    @include cube;
+        span {
+          float: left;
+          color: #fff;
+          font-size: 0.25rem;
 
-    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;
-      }
+          &:nth-child(1) {
+            margin-right: 1.5rem;
+          }
 
-      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;
+          &:last-child {
+            float: right;
+            margin-right: 0.2rem;
+          }
+        }
       }
 
-      .head {
-        position: relative;
-        bottom: 0.5rem;
-        float: left;
-        margin-left: 0.3rem;
+      ul {
+        @include cube;
 
-        img {
-          width: 0.65rem;
-          height: 0.65rem;
-          border-radius: 250rem;
+        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;
+          }
 
-          &.girl {
-            border: 1px solid #EA26EA;
+          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;
           }
 
-          &.boy {
-            border: 1px solid #39B6FF;
+          .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;
-      }
+          .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;
+          .glory {
+            float: left;
+            margin-left: 0.4rem;
 
-        img {
-          float: right;
-          width: 0.6rem;
-          margin-left: 0.2rem;
-          margin-top: 0.1rem;
+            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;
+          }
         }
       }
+    }
+  }
 
-      .score {
-        float: right;
-        color: #FFE61F;
-        font-size: 0.3rem;
-        line-height: 0.6rem;
-        font-family: Arial;
-        font-weight: bold;
-        font-style: italic;
+  .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;
-        padding-right: 0.2rem;
+        font-size: 0.35rem;
+        font-weight: bold;
       }
     }
   }

src/views/Rank_old.vue → src/views/Rank2.vue

@@ -1,17 +1,21 @@
 <template>
   <div class="content">
     <Headside></Headside>
+    <div class="title">
+      <span>本次训练排名</span>
+    </div>
     <div class="sumTitle">
       <div class="lt">
         <img src="../assets/imgs/rank/fire.svg" alt="">
         <h5>卡路里排名</h5>
       </div>
-      <div class="rt">
+      <div class="md">
         <img src="../assets/imgs/rank/ck.svg" alt="">
-        <h5>CK排名</h5>
+        <h5>CK 排名</h5>
       </div>
-      <div class="md">
-        <span>本次训练排名</span>
+      <div class="rt">
+        <img src="../assets/imgs/rank/ei.svg" alt="">
+        <h5>Ei 排名</h5>
       </div>
     </div>
     <div class="listContainer">
@@ -20,9 +24,9 @@
           <div class="ltTitle">
             <span>排名</span>
             <span>成员</span>
-            <span>卡路里</span>
+            <span class="titleCle">卡路里</span>
           </div>
-          <li v-for="(s,i) in students.CalSort" v-if="i <= 7"
+          <li v-for="(s,i) in students.CalSort" v-if="i <= 7" v-show="Listate[i].state"
               :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
             <div class="gary">
               <em>{{ i + 1 }}</em>
@@ -33,13 +37,41 @@
               </div>
               <span class="names">{{ s.Name }}</span>
               <span class="glory">
-                <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
-                <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt="">
-                <img src="../assets/imgs/rank/pb.png" v-if="i == 2" alt="">
+                <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 }}
-                <!--                  {{ s.Ck|fmtFloat }}-->
+                  {{ s.Cle|fmtInt }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="md">
+        <ul>
+          <div class="ltTitle">
+            <span>排名</span>
+            <span>成员</span>
+            <span class="titleCK">CK</span>
+          </div>
+          <li v-for="(s,i) in students.CkSort" v-if="i <= 7" 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>
@@ -50,9 +82,9 @@
           <div class="ltTitle">
             <span>排名</span>
             <span>成员</span>
-            <span>CK</span>
+            <span class="titleEI">Ei</span>
           </div>
-          <li v-for="(s,i) in students.CkSort" v-if="i <= 7"
+          <li v-for="(s,i) in students.EiSort" v-if="i <= 7" v-show="Listate[i].state"
               :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
             <div class="gary">
               <em>{{ i + 1 }}</em>
@@ -63,12 +95,12 @@
               </div>
               <span class="names">{{ s.Name }}</span>
               <span class="glory">
-               <img src="../assets/imgs/rank/cr.png" v-if="i == 0" alt="">
-                <img src="../assets/imgs/rank/mr.png" v-if="i == 1" alt="">
-                <img src="../assets/imgs/rank/pb.png" v-if="i == 2" alt="">
+                <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 }}
+                  {{ s.EI|fmtInt }}
               </span>
             </div>
           </li>
@@ -78,6 +110,7 @@
     <div class="icons">
       <img src="../assets/imgs/rank/icons2.svg" alt="">
     </div>
+    <div v-show="totalTime > 0" class="countdown">{{totalTime}}</div>
   </div>
 </template>
 
@@ -96,6 +129,7 @@ export default {
       students: {
         CkSort: [],
         CalSort: [],
+        EiSort: [],
       },
       rankTimer: null,
       totalTime: '',
@@ -112,8 +146,8 @@ export default {
     }
   },
   mounted() {
+    // console.log("[Rank] mounted");
     this.init();
-    this.cardPlay();
   },
   watch: {
     '$route': function (val) {
@@ -124,6 +158,7 @@ export default {
           // this.rankTimer  = setInterval(() => {
           this.students.CkSort = fakeNews(5);
           this.students.CalSort = fakeNews(5);
+          this.students.EiSort = fakeNews(5);
           // }, 5000);
         }
       } else {
@@ -139,8 +174,10 @@ export default {
   methods: {
     init() {
       this.getClassUserRank();
+      this.cardPlay();
     },
     getClassUserRank() {
+      // console.log("getClassUserRank");
       let that = this;
       let param = {
         eqSn: localStorage.eqSn
@@ -148,7 +185,7 @@ export default {
       let postdata = qs.stringify(param);
       ClassUserRank(postdata).then(res => {
         let json = res;
-        console.log(json);
+        // console.log("ClassUserRank: " + JSON.stringify(json));
         if (json.Code == 0) {
           let totalTime = 40;
           let Studenlength = 0;
@@ -157,13 +194,15 @@ export default {
           }
           // 根据人数多少显示停留时间
           if (Studenlength > 3) {
-            totalTime = 60
+            totalTime = 40 
           } else {
-            totalTime = 40
+            totalTime = 30
           }
-          this.jumpWait(totalTime);
+          this.jumpWait(totalTime);  //tmp del 调试时关闭跳走
+
           let CkSort = json.Rs;
           let CalSort = deepClone(json.Rs);
+          let EiSort = deepClone(json.Rs);
           let Rs = json.Rs;
           if (Rs != '') {
             // 排序
@@ -174,10 +213,15 @@ export default {
             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 {
@@ -187,19 +231,19 @@ export default {
         }
       })
     },
-    jumpWait(totalTime) {
+    jumpWait(totalTime) {      
       // 倒计时60秒自动关闭
       let that = this;
       clearInterval(clock);
-      let clock = window.setInterval(() => {
-        totalTime--;
+      let clock = window.setInterval(() => {        
         that.totalTime = totalTime;
         if (parseInt(totalTime) <= 0) {
           // 前往等待页面
-          that.$router.push({path: '/'}); //todo 调试时关闭跳走
+          that.$router.push({path: '/'});
           // 计时器回收
           clearInterval(clock);
         }
+        totalTime--;
       }, 1000)
     },
     cardPlay() {
@@ -210,13 +254,14 @@ export default {
       })
       let timeScope = 100;  //400
       let timeLong;
-      let row;
-      for (let i = 0; i < 8; i++) {
-        timeLong = parseInt(i * timeScope);
-        that.timer = setTimeout(() => {   //设置延迟执行
-          that.Listate[i].state = true;
-        }, 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: {
@@ -266,81 +311,104 @@ export default {
 }
 
 .content {
-  background: url("../../src/assets/imgs/rank/Training.png");
+  background: url("../../src/assets/imgs/rank/pageBg.png");
   @include bg;
+
+  .title {
+    // position: relative;
+    width: 3rem;
+    height: 0.75rem;
+    margin: 0 auto;
+    margin-top: -0.38rem;
+    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;
+    }
+  }
+  
   .sumTitle {
     @include cube;
-    width: 80%;
+    width: 92%;
     height: 0.75rem;
-    margin-top: 0.7rem;
+    margin-top: 0.3rem;
     overflow: visible;
 
     h5 {
       float: left;
       width: 80%;
       margin: 0;
+      margin-top: 0.04rem;
       text-align: center;
       color: #fff;
-      font-size: 0.5rem;
+      font-size: 0.46rem;
       font-weight: bold;
-
     }
 
     .lt {
-      width: 50%;
+      width: 32%;
       height: 0.75rem;
       float: left;
-      background: url("../../src/assets/imgs/rank/redTitel.png");
+      background: url("../../src/assets/imgs/rank/redTitel2.png");
       background-repeat: no-repeat;
       background-position: top center;
       background-size: 100%;
       border-radius: 250rem;
 
       img {
-        width: 0.51rem;
+        width: 0.70rem;
         float: left;
       }
     }
 
-    .rt {
-      width: 50%;
+    .md {
+      width: 32%;
       height: 0.75rem;
-      float: right;
-      background: url("../../src/assets/imgs/rank/redTitel.png");
+      float: left;
+      margin-left: 0.35rem;
+      background: url("../../src/assets/imgs/rank/redTitel2.png");
       background-repeat: no-repeat;
       background-position: top center;
       background-size: 100%;
       border-radius: 250rem;
 
       img {
-        width: 0.8rem;
-        float: right;
+        width: 0.95rem;
+        float: left;
       }
 
       h5 {
-        float: right;
+        margin-left: -0.3rem;
       }
     }
 
-    .md {
-      position: relative;
-      width: 3rem;
-      height: 0.9rem;
-      margin: 0 auto;
-      bottom: 0.1rem;
-      background: url("../../src/assets/imgs/rank/titleBg.png");
+    .rt {
+      width: 32%;
+      height: 0.75rem;
+      float: right;
+      background: url("../../src/assets/imgs/rank/redTitel2.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;
+      background-size: 100%;
+      border-radius: 250rem;
+
+      img {
+        width: 0.95rem;
+        float: left;
+      }
+      
+      h5 {
+        margin-left: -0.3rem;
       }
     }
   }
@@ -348,20 +416,26 @@ export default {
 
 .listContainer {
   @include cube;
-  width: 80%;
+  width: 92%;
   padding-top: 0.5rem;
 
   .lt {
-    width: 47%;
+    width: 30%;
     float: left;
   }
 
+  .md {
+    width: 30%;
+    float: left;
+    margin-left: 0.92rem;
+  }
+
   .rt {
-    width: 47%;
+    width: 30%;
     float: right;
-    .ltTitle span {
-      margin-right: 0.3rem;
-    }
+    // .ltTitle span {
+    //   margin-right: 0.3rem;
+    // }
   }
 
   .ltTitle {
@@ -378,9 +452,19 @@ export default {
 
       &:last-child {
         float: right;
-        margin-right: 0.2rem;
+        // margin-right: 0.2rem;
       }
     }
+
+    .titleCle {
+      margin-right: 0.2rem;
+    }
+    .titleCK {
+      margin-right: 0.3rem;
+    }
+    .titleEI {
+      margin-right: 0.5rem;
+    }
   }
 
   ul {
@@ -493,4 +577,14 @@ export default {
     width: 18%;
   }
 }
+
+.countdown {
+  width: 1rem;
+  position: absolute;
+  font-size: 0.25rem;
+  color: white;
+  right: 0rem;
+  bottom: 0.2rem;
+}
+
 </style>

src/views/Wait.vue

@@ -690,7 +690,8 @@ $yellow: #FFEB50;
         width: 70%;
         font-size: 0.2rem;
         color: white;
-        text-align: left;
+        // text-align: left;
+        text-align: center;
       }
 
       ul {
@@ -704,8 +705,10 @@ $yellow: #FFEB50;
         bottom: 0.1rem;
 
         li {
-          width: 1.8rem;
+          width: 1.5rem;
           overflow: hidden;
+          padding-left: 0.2rem;
+          padding-right: 0.2rem;
 
           i {
             position: relative;
@@ -731,6 +734,7 @@ $yellow: #FFEB50;
             background-position: top center;
             background-repeat: no-repeat;
             background-size: 100% 100%;
+            // padding: 0 auto;
             padding-top: 0.5rem;
 
             .headImg {