增加打分排名弹窗页面

v2tv/src/api/getApiRes.js

@@ -54,6 +54,12 @@ export function getRecordBreak(postdata) {
     return getApiBasic(url, postdata);
 }
 
+// 获取打分结果
+export function getActionScore(postdata) {
+    let url = headapi + 'getActionScore';
+    return getApiBasic(url, postdata);
+}
+
 // // 英雄榜和个人破纪录查询
 // export function HerosRankingQuery(postdata) {
 //     // let url = 'http://192.168.0.236:19096/v1/Sensors/HerosRankingQuery';

v2tv/src/components/actionScore.vue

@@ -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>

v2tv/src/router/index.js

@@ -84,6 +84,14 @@ const routes = [
                     title: "test",
                     clmid: "6",
                 }
+            },{
+                path: '/actionScore',
+                name: 'actionScore',
+                component: () => import('@/components/actionScore.vue'),
+                meta: {
+                    title: "test",
+                    clmid: "6",
+                }
             },
         ]
     }, {