|
|
@@ -3,7 +3,7 @@
|
|
|
<!-- 序号 -->
|
|
|
<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 }]">
|
|
|
+ <li v-for="(s,i) in Rs.EiSort.slice(0, maxShowNum)" v-show="ctrlShow(i)" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
|
|
|
<div class="num">{{ i + 1 }}</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
@@ -15,7 +15,7 @@
|
|
|
<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"
|
|
|
+ <li v-for="(s,i) in Rs.Ei0Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
|
|
|
<div>
|
|
|
<span class="names">{{ s.Name }}</span>
|
|
|
@@ -23,7 +23,7 @@
|
|
|
<span class="score" v-else>- -</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
|
|
|
+ <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
|
|
|
<div>
|
|
|
<span class="names"> </span>
|
|
|
@@ -41,7 +41,7 @@
|
|
|
<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"
|
|
|
+ <li v-for="(s,i) in Rs.Ei1Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
|
|
|
<div>
|
|
|
<span class="names">{{ s.Name }}</span>
|
|
|
@@ -49,7 +49,7 @@
|
|
|
<span class="score" v-else>- -</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
|
|
|
+ <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
|
|
|
<div>
|
|
|
<span class="names"> </span>
|
|
|
@@ -67,7 +67,7 @@
|
|
|
<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"
|
|
|
+ <li v-for="(s,i) in Rs.Ei2Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
|
|
|
<div>
|
|
|
<span class="names">{{ s.Name }}</span>
|
|
|
@@ -75,7 +75,7 @@
|
|
|
<span class="score" v-else>- -</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
|
|
|
+ <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
|
|
|
<div>
|
|
|
<span class="names"> </span>
|
|
|
@@ -93,7 +93,7 @@
|
|
|
<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"
|
|
|
+ <li v-for="(s,i) in Rs.Ei3Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
|
|
|
<div>
|
|
|
<span class="names">{{ s.Name }}</span>
|
|
|
@@ -101,7 +101,7 @@
|
|
|
<span class="score" v-else>- -</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
|
|
|
+ <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
|
|
|
<div>
|
|
|
<span class="names"> </span>
|
|
|
@@ -119,7 +119,7 @@
|
|
|
<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"
|
|
|
+ <li v-for="(s,i) in Rs.Ei4Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
|
|
|
<div>
|
|
|
<span class="names">{{ s.Name }}</span>
|
|
|
@@ -127,7 +127,7 @@
|
|
|
<span class="score" v-else>- -</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
|
|
|
+ <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
|
|
|
<div>
|
|
|
<span class="names"> </span>
|
|
|
@@ -145,7 +145,7 @@
|
|
|
<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"
|
|
|
+ <li v-for="(s,i) in Rs.Ei5Sort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
|
|
|
<div>
|
|
|
<span class="names">{{ s.Name }}</span>
|
|
|
@@ -153,7 +153,7 @@
|
|
|
<span class="score" v-else>- -</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
|
|
|
+ <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
|
|
|
<div>
|
|
|
<span class="names"> </span>
|
|
|
@@ -171,7 +171,7 @@
|
|
|
<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"
|
|
|
+ <li v-for="(s,i) in Rs.EiSort.slice(0, maxShowNum)" v-if="i <= maxShowNum-1" v-show="ctrlShow(i)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
|
|
|
<div>
|
|
|
<span class="names">{{ s.Name }}</span>
|
|
|
@@ -179,7 +179,7 @@
|
|
|
<span class="score" v-else>- -</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li v-for="j in fakeCount" v-show="Listate[j+rsCount-1].state"
|
|
|
+ <li v-for="j in fakeCount" v-show="ctrlFakeShow(j)"
|
|
|
:class="[{ 'box animate__animated animate__flipInX': Listate[j+rsCount-1].state }]">
|
|
|
<div>
|
|
|
<span class="names"> </span>
|
|
|
@@ -199,22 +199,72 @@ export default {
|
|
|
return {
|
|
|
rsCount: 0, //获取到的记录数
|
|
|
fakeCount: 0, //记录不足，需要填充的记录数
|
|
|
- maxShowNum: 8, //页面最大显示记录数
|
|
|
+ maxShowNumPerPage: 8, //单页最大显示记录数
|
|
|
+ maxShowNum: 8, //最大显示记录数
|
|
|
+ pageCount: 0, //总页数
|
|
|
+ curPage: 0, //当前页码 从0开始
|
|
|
+ showTimePerPage: 30000, //每页显示时长 毫秒
|
|
|
+ pageRpeatNum: 1, //每页重复显示次数
|
|
|
+ showTimeTotal: 0, //总显示时长 毫秒
|
|
|
+ pageTimer: null,
|
|
|
+ Rs: {
|
|
|
+ EiSort: [],
|
|
|
+ Ei0Sort: [], //0-39% 激活放松
|
|
|
+ Ei1Sort: [], //40-54% 动态热身
|
|
|
+ Ei2Sort: [], //55-69% 脂肪燃烧
|
|
|
+ Ei3Sort: [], //70-79% 糖分消耗
|
|
|
+ Ei4Sort: [], //80-89% 心肺训练
|
|
|
+ Ei5Sort: [], //90-100% 峰值锻炼
|
|
|
+ },
|
|
|
+ Listate: [
|
|
|
+ {state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},
|
|
|
+ {state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},
|
|
|
+ {state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},{state: false},
|
|
|
+ ],
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
// console.log("eiRank mounted");
|
|
|
- // console.log(JSON.stringify(this.students.Ei1Sort));
|
|
|
+ // console.log(JSON.stringify(this.Rs.Ei1Sort));
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ console.log("eiRank beforeDestroy");
|
|
|
+ clearInterval(this.pageTimer);
|
|
|
},
|
|
|
- props: ['students', 'Listate'],
|
|
|
+ props: ['students'],
|
|
|
watch: {
|
|
|
'students': {
|
|
|
handler(newName, oldName) {
|
|
|
let that = this;
|
|
|
if (!newName) {
|
|
|
console.log('没有传入数据');
|
|
|
+ return;
|
|
|
}
|
|
|
+
|
|
|
+ that.computeAcMap(newName.EiSort);
|
|
|
+
|
|
|
let Studenlength = newName.EiSort.length;
|
|
|
+ if (Studenlength > that.Listate.length)
|
|
|
+ Studenlength = that.Listate.length;
|
|
|
+
|
|
|
+ that.pageCount = Math.ceil(Studenlength / that.maxShowNumPerPage);
|
|
|
+ if (that.pageCount == 1)
|
|
|
+ that.pageRpeatNum = 4;
|
|
|
+ else if (that.pageCount == 2)
|
|
|
+ that.pageRpeatNum = 3;
|
|
|
+ else if (that.pageCount >= 3)
|
|
|
+ that.pageRpeatNum = 2;
|
|
|
+ that.showTimeTotal = that.pageCount * that.showTimePerPage * that.pageRpeatNum;
|
|
|
+
|
|
|
+ that.maxShowNum = that.pageCount * that.maxShowNumPerPage;
|
|
|
+ if (that.maxShowNum > that.Listate.length)
|
|
|
+ that.maxShowNum = that.Listate.length;
|
|
|
+
|
|
|
+ console.log("pageCount:" + that.pageCount);
|
|
|
+ console.log("showTimeTotal:" + that.showTimeTotal);
|
|
|
+ console.log("maxShowNum:" + that.maxShowNum);
|
|
|
+
|
|
|
+
|
|
|
if (Studenlength < that.maxShowNum) {
|
|
|
that.rsCount = Studenlength
|
|
|
that.fakeCount = that.maxShowNum - that.rsCount;
|
|
|
@@ -230,6 +280,160 @@ export default {
|
|
|
immediate: true
|
|
|
}
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ ctrlShow(i) {
|
|
|
+ let cmpPage = Math.ceil((i+1) / this.maxShowNumPerPage) - 1;
|
|
|
+ return this.Listate[i].state && cmpPage == this.curPage;
|
|
|
+ },
|
|
|
+ ctrlFakeShow(i) {
|
|
|
+ return this.Listate[i+this.rsCount-1].state && this.curPage == this.pageCount - 1;
|
|
|
+ },
|
|
|
+ // cardPlay() {
|
|
|
+ // let that = this;
|
|
|
+ // // 重置一下状态
|
|
|
+ // that.Listate.map(function (t) {
|
|
|
+ // t.state = false;
|
|
|
+ // })
|
|
|
+ // let timeScope = 100; //400
|
|
|
+ // let timeLong;
|
|
|
+ // that.timer = setTimeout(() => { //设置延迟执行
|
|
|
+ // let count = that.Listate.length;
|
|
|
+ // for (let i = 0; i < count; i++) {
|
|
|
+ // timeLong = parseInt(i * timeScope);
|
|
|
+ // that.timer = setTimeout(() => { //设置延迟执行
|
|
|
+ // that.Listate[i].state = true;
|
|
|
+ // }, timeLong)
|
|
|
+ // }
|
|
|
+ // }, 60);
|
|
|
+ // },
|
|
|
+ cardPlay(showPage) {
|
|
|
+ let that = this;
|
|
|
+ that.curPage = showPage;
|
|
|
+ let first = showPage * that.maxShowNumPerPage;
|
|
|
+ let last = first + that.maxShowNumPerPage;
|
|
|
+ console.log("[cardPlay] first: "+ first + " last: " + last);
|
|
|
+ if (last > that.Listate.length)
|
|
|
+ last = that.Listate.length;
|
|
|
+
|
|
|
+ // 重置一下状态
|
|
|
+ that.Listate.map(function (t) {
|
|
|
+ t.state = false;
|
|
|
+ })
|
|
|
+ let timeScope = 100; //400
|
|
|
+ let timeLong;
|
|
|
+ let t = 0;
|
|
|
+ that.timer = setTimeout(() => { //设置延迟执行
|
|
|
+ for (let i = first; i < last; i++) {
|
|
|
+ timeLong = parseInt(t * timeScope);
|
|
|
+ that.timer = setTimeout(() => { //设置延迟执行
|
|
|
+ that.Listate[i].state = true;
|
|
|
+ }, timeLong)
|
|
|
+ t++;
|
|
|
+ }
|
|
|
+ }, 60);
|
|
|
+ },
|
|
|
+ pagePlay() {
|
|
|
+ let that = this;
|
|
|
+ let showPage = 0;
|
|
|
+
|
|
|
+ that.cardPlay(showPage);
|
|
|
+ showPage++;
|
|
|
+
|
|
|
+ let showTimeTotal = that.showTimeTotal;
|
|
|
+ that.pageTimer = setInterval(() => {
|
|
|
+ showTimeTotal -= that.showTimePerPage;
|
|
|
+ if (showTimeTotal > 0) {
|
|
|
+ if (showPage >= that.pageCount) {
|
|
|
+ showPage = 0;
|
|
|
+ }
|
|
|
+ that.cardPlay(showPage);
|
|
|
+ showPage++;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ console.log("[pagePlay] clearInterval showTimeTotal:" + showTimeTotal);
|
|
|
+ clearInterval(that.pageTimer);
|
|
|
+ that.pageTimer = null;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // if (showPage < that.pageCount) {
|
|
|
+ // that.cardPlay(showPage);
|
|
|
+ // showPage++;
|
|
|
+ // }
|
|
|
+ // else {
|
|
|
+ // clearInterval(that.pageTimer);
|
|
|
+ // that.pageTimer = null;
|
|
|
+ // }
|
|
|
+ }, that.showTimePerPage);
|
|
|
+ },
|
|
|
+ computeAcMap(Rs) {
|
|
|
+ let that = this;
|
|
|
+ let sumAcMap = 0;
|
|
|
+ let EiSort = [];
|
|
|
+ let Ei0Sort = []; //0-39% 激活放松
|
|
|
+ let Ei1Sort = []; //40-54% 动态热身
|
|
|
+ let Ei2Sort = []; //55-69% 脂肪燃烧
|
|
|
+ let Ei3Sort = []; //70-79% 糖分消耗
|
|
|
+ let Ei4Sort = []; //80-89% 心肺训练
|
|
|
+ let Ei5Sort = []; //90-100% 峰值锻炼
|
|
|
+
|
|
|
+ EiSort = deepClone(Rs);
|
|
|
+ that.Rs.EiSort = EiSort.sort(function (a, b) {
|
|
|
+ return b.EI - a.EI;
|
|
|
+ });
|
|
|
+
|
|
|
+ that.Rs.EiSort.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.Rs.Ei0Sort = Ei0Sort.sort(function (a, b) {
|
|
|
+ return b.ei0Per - a.ei0Per;
|
|
|
+ });
|
|
|
+ that.Rs.Ei1Sort = Ei1Sort.sort(function (a, b) {
|
|
|
+ return b.ei1Per - a.ei1Per;
|
|
|
+ });
|
|
|
+ that.Rs.Ei2Sort = Ei2Sort.sort(function (a, b) {
|
|
|
+ return b.ei2Per - a.ei2Per;
|
|
|
+ });
|
|
|
+ that.Rs.Ei3Sort = Ei3Sort.sort(function (a, b) {
|
|
|
+ return b.ei3Per - a.ei3Per;
|
|
|
+ });
|
|
|
+ that.Rs.Ei4Sort = Ei4Sort.sort(function (a, b) {
|
|
|
+ return b.ei4Per - a.ei4Per;
|
|
|
+ });
|
|
|
+ that.Rs.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
|
|
|
+ },
|
|
|
+ },
|
|
|
filters: {
|
|
|
fmtNum(val) {
|
|
|
if (val == 0) {
|
|
|
@@ -361,24 +565,28 @@ $yellow: #FFEB50;
|
|
|
ul {
|
|
|
|
|
|
li {
|
|
|
- background: url("");
|
|
|
+ // background: url("");
|
|
|
+ background: url("../assets/imgs/wait/litr.svg");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: left center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
margin-top: 0rem;
|
|
|
margin-bottom: 0.244rem;
|
|
|
|
|
|
.num {
|
|
|
position: relative;
|
|
|
- left: -0.1rem;
|
|
|
- width: 0.9rem;
|
|
|
+ left: 0rem;
|
|
|
+ width: 0.58rem;
|
|
|
height: 0.65rem;
|
|
|
float: left;
|
|
|
- background: url("../assets/imgs/wait/litr.svg");
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: left center;
|
|
|
+ // 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;
|
|
|
+ text-align: center;
|
|
|
+ // text-indent: 0.2rem;
|
|
|
font-style: normal;
|
|
|
color: #fff;
|
|
|
text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.47);
|
