|
|
@@ -0,0 +1,425 @@
|
|
|
+<template>
|
|
|
+ <div class="content">
|
|
|
+ <Headside></Headside>
|
|
|
+ <div class="sumTitle">
|
|
|
+ <div class="md">
|
|
|
+ <span>动作评分</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="listContainer">
|
|
|
+ <div class="lt">
|
|
|
+ <ul>
|
|
|
+ <div class="ltTitle">
|
|
|
+ <span v-for="item in actionList">{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ <li v-for="(item,index) in memberList" v-if="index <= 7"
|
|
|
+ :class="[{ 'box animate__animated animate__flipInX': Listate[index].state }]">
|
|
|
+ <div class="gary">
|
|
|
+ <em>{{ index + 1 }}</em>
|
|
|
+ <div class="head">
|
|
|
+ <img :src="item.Head" alt="" v-if="item.Head" :class="[{'boy':item.Sex == 1},{'girl':item.Sex == 2}]">
|
|
|
+ <img src="../static/img/people/flyhead.png" alt="" v-if="!item.Head"
|
|
|
+ :class="[{'boy':item.Sex == 1},{'girl':item.Sex == 2}]">
|
|
|
+ </div>
|
|
|
+ <span class="names">{{ item.Name }}</span>
|
|
|
+ <span class="score" v-for="item in item.DetailScore">
|
|
|
+ <span class="glory">
|
|
|
+ <img src="../assets/imgs/rank/champion.png" v-if="item > 50">
|
|
|
+ </span>
|
|
|
+ {{ item }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Headside from '@/components/Headside'
|
|
|
+import {ClassUserRank} from "@/api/getApiRes";
|
|
|
+
|
|
|
+let qs = require('qs');
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ actionList: [
|
|
|
+ {
|
|
|
+ "name": "排名",
|
|
|
+ "id": "-2",
|
|
|
+ }, {
|
|
|
+ "name": "成员",
|
|
|
+ "id": "-1",
|
|
|
+ }, {
|
|
|
+ "name": "反向卷腹",
|
|
|
+ "id": "1",
|
|
|
+ }, {
|
|
|
+ "name": "仰卧起坐",
|
|
|
+ "id": "2",
|
|
|
+ }, {
|
|
|
+ "name": "卧姿提踵",
|
|
|
+ "id": "3",
|
|
|
+ }, {
|
|
|
+ "name": "仰卧推举",
|
|
|
+ "id": "4",
|
|
|
+ }, {
|
|
|
+ "name": "向前箭步",
|
|
|
+ "id": "5",
|
|
|
+ }, {
|
|
|
+ "name": "向前箭步",
|
|
|
+ "id": "5",
|
|
|
+ }, {
|
|
|
+ "name": "向前箭步",
|
|
|
+ "id": "5",
|
|
|
+ }, {
|
|
|
+ "name": "向前箭步",
|
|
|
+ "id": "5",
|
|
|
+ },{
|
|
|
+ "name": "总分",
|
|
|
+ "id": "7",
|
|
|
+ }],
|
|
|
+ memberList: [],
|
|
|
+ pageStyle: RandomBg(),
|
|
|
+ trueDate: true,//真实数据 true false
|
|
|
+ autoJump: true,//开启自动跳走
|
|
|
+
|
|
|
+ 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 == '/actionScore') {
|
|
|
+ if (this.trueDate) {
|
|
|
+ this.init();
|
|
|
+ } else {
|
|
|
+ // this.rankTimer = setInterval(() => {
|
|
|
+ this.memberList = 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();
|
|
|
+ },
|
|
|
+ getClassUserRank() {
|
|
|
+ let that = this;
|
|
|
+ let param = {
|
|
|
+ eqSn: localStorage.eqSn
|
|
|
+ };
|
|
|
+ let postdata = qs.stringify(param);
|
|
|
+ ClassUserRank(postdata).then(res => {
|
|
|
+ let json = res;
|
|
|
+ console.log(json);
|
|
|
+ let jsonString = "{\"Code\":0,\"Memo\":\"执行成功\",\"Rs\":[{\"CsId\":154,\"AgdId\":49,\"Sex\":2,\"Name\":\"王甜羽\",\"Head\":\"img/testhead.d6e4566c.png\",\"ToTalScore\":2221,\"DetailScore\":{\"1\":12,\"2\":64,\"3\":57,\"4\":43,\"5\":31,\"6\":67,\"7\":8,\"8\":31,\"9\":67}},{\"CsId\":155,\"AgdId\":49,\"Sex\":1,\"Name\":\"孙舒涵\",\"Head\":\"img/testhead.d6e4566c.png\",\"ToTalScore\":212,\"DetailScore\":{\"1\":23,\"2\":53,\"3\":57,\"4\":64,\"5\":71,\"6\":37,\"7\":8,\"8\":31,\"9\":67}},\n" +
|
|
|
+ "{\"CsId\":156,\"AgdId\":49,\"Sex\":2,\"Name\":\"张咏葳\",\"Head\":\"img/testhead.d6e4566c.png\",\"ToTalScore\":232,\"DetailScore\":{\"1\":22,\"2\":74,\"3\":27,\"4\":13,\"5\":41,\"6\":97,\"7\":8,\"8\":31,\"9\":67}}]}";
|
|
|
+ json = JSON.parse(jsonString);
|
|
|
+ if (json.Code == 0) {
|
|
|
+ let CkSort = json.Rs;
|
|
|
+ let CalSort = deepClone(json.Rs);
|
|
|
+ let Rs = json.Rs;
|
|
|
+ if (Rs != '') {
|
|
|
+ // 排序
|
|
|
+ that.memberList = json.Rs;
|
|
|
+ that.cardPlay();
|
|
|
+ console.log(that.memberList);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.memberList = [];
|
|
|
+ if (json.Code == '999') {
|
|
|
+ } else {
|
|
|
+ // 已出错
|
|
|
+ that.$message.error(json.Memo);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cardPlay() {
|
|
|
+ let that = this;
|
|
|
+ // 重置一下状态
|
|
|
+ that.Listate.map(function (t) {
|
|
|
+ t.state = false;
|
|
|
+ })
|
|
|
+ let timeScope = 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)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@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;
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ background: url("../../src/assets/imgs/rank/Training.png");
|
|
|
+ margin: auto;
|
|
|
+
|
|
|
+ @include bg;
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .md {
|
|
|
+ position: relative;
|
|
|
+ width: 3rem;
|
|
|
+ height: 0.9rem;
|
|
|
+ margin: 0 auto;
|
|
|
+ bottom: 0.1rem;
|
|
|
+ background: url("../../src/assets/imgs/rank/titleBg.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ line-height: 0.9rem;
|
|
|
+
|
|
|
+ span {
|
|
|
+ @include cube;
|
|
|
+ position: relative;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 0.35rem;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.listContainer {
|
|
|
+ @include cube;
|
|
|
+ width: 95%;
|
|
|
+ padding-top: 0.5rem;
|
|
|
+ margin: 0 auto;
|
|
|
+ align-content: center;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .lt {
|
|
|
+ display: inline-block;
|
|
|
+ margin: auto;
|
|
|
+ //float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ltTitle {
|
|
|
+ @include cube;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ float: left;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 0.25rem;
|
|
|
+ padding-left: 0.2rem;
|
|
|
+
|
|
|
+
|
|
|
+ &:nth-child(1) { //第一个元素
|
|
|
+ margin-left: -0.1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin-left: 1.6rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child { //最后一个元素
|
|
|
+ //float: right;
|
|
|
+ margin-left: 0.2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ @include cube;
|
|
|
+ margin: 0 auto;
|
|
|
+ //width: 9rem;
|
|
|
+
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .glory {
|
|
|
+ float: left;
|
|
|
+ //margin-left: 0.4rem;
|
|
|
+
|
|
|
+ img {
|
|
|
+ float: right;
|
|
|
+ width: 0.4rem;
|
|
|
+ //margin-left: 0.2rem;
|
|
|
+ margin-right: -0.4rem;
|
|
|
+ margin-top: 0.1rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .score {
|
|
|
+ width: 1rem;
|
|
|
+ float: left;
|
|
|
+ padding-left: 0.2rem;
|
|
|
+ //float: right;
|
|
|
+ //padding-right: 0.2rem;
|
|
|
+ color: #FFE61F;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ line-height: 0.6rem;
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: bold;
|
|
|
+ font-style: italic;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.icons {
|
|
|
+ @include cube;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0.2rem;
|
|
|
+
|
|
|
+ img {
|
|
|
+ @include cube;
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
