tv2.0 等待页

pc/src/views/demoDevice.vue

@@ -749,8 +749,12 @@ export default {
 
 /*ipad only*/
 @media only screen and (max-width: 1366px) {
-    .panel /deep/ .el-date-editor--daterange {
-        width: 100%;
-    }
+  .panel /deep/ .el-date-editor--daterange {
+    width: 100%;
+  }
+
+  /deep/ .el-popper {
+    padding-bottom: 60px;
+  }
 }
 </style>

v2tv/package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "core-js": "^3.6.5",
     "default-passive-events": "^2.0.0",
     "echarts": "^4.8.0",

v2tv/src/Mock/index.js

@@ -235,11 +235,11 @@ let CalorieStatsQuery = function () {
     let Rs = [
         {
             Title: '本<s>周</s>场馆卡路里总消耗',
-            Result: [{'Values': "@integer(1, 999999)", Unite: '千卡'}],
+            Result: [{'Values': "123456", Unite: '千卡'}],
         },
         {
-            Title: '本<s>周</s>场馆卡路里总消耗',
-            Result: [{'Values': "@integer(1, 888888)", Unite: '千卡'}],
+            Title: '本<s>月</s>场馆卡路里总消耗',
+            Result: [{'Values': "654321", Unite: '千卡'}],
         }
     ];
     return {
@@ -257,6 +257,7 @@ let UserRankingQuery = function (num) {
             // "UserName": "@cname",
             UserName: "西门吹雪",
             "Values": "@integer(1, 9999)",
+            "head": ''
         })
     }
     for (var i = 0; i < num; i++) {
@@ -264,6 +265,7 @@ let UserRankingQuery = function (num) {
             // "UserName": "@cname",
             UserName: "西门吹雪",
             "Values": "@float(1,9999,0,1)",
+            "head": ''
         })
     }
     let Rs = [

v2tv/src/assets/imgs/wait/besSign.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="47.525" height="55.387"
+     viewBox="0 0 47.525 55.387">
+    <defs>
+        <linearGradient id="linear-gradient" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox">
+            <stop offset="0" stop-color="#fff" stop-opacity="0.435"/>
+            <stop offset="1" stop-color="#fff" stop-opacity="0.071"/>
+        </linearGradient>
+    </defs>
+    <g id="路径_164" data-name="路径 164" transform="translate(47.525) rotate(90)" fill="url(#linear-gradient)">
+        <path d="M0,0H34.7C46.127,0,55.387,23.763,55.387,23.763S46.127,47.525,34.7,47.525H0Z" stroke="none"/>
+        <path d="M 0.9999961853027344 1 L 0.9999961853027344 46.52529907226563 L 34.70424652099609 46.52529907226563 C 40.14240646362305 46.52529907226563 45.19046783447266 40.33116149902344 48.46765899658203 35.13491821289063 C 51.6001091003418 30.16814804077148 53.7457275390625 25.13409614562988 54.30828475952148 23.76264381408691 C 53.74568939208984 22.39111137390137 51.6001091003418 17.35715103149414 48.46765899658203 12.390380859375 C 45.19046783447266 7.194141387939453 40.14240646362305 1 34.70424652099609 1 L 0.9999961853027344 1 M -3.814697265625e-06 0 L 34.70424652099609 0 C 46.12677764892578 0 55.38657760620117 23.76264953613281 55.38657760620117 23.76264953613281 C 55.38657760620117 23.76264953613281 46.12677764892578 47.52529907226563 34.70424652099609 47.52529907226563 L -3.814697265625e-06 47.52529907226563 L -3.814697265625e-06 0 Z"
+              stroke="none" fill="rgba(255,255,255,0.18)"/>
+    </g>
+</svg>

v2tv/src/assets/imgs/wait/calcIcon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26">
+    <path id="排除_11" data-name="排除 11"
+          d="M21,26H5a5.006,5.006,0,0,1-5-5V5A5.006,5.006,0,0,1,5,0H21a5.006,5.006,0,0,1,5,5V21A5.006,5.006,0,0,1,21,26ZM6.6,9.776h0a12.272,12.272,0,0,0-1.155,2.558A9.838,9.838,0,0,0,5.2,18.029a7.282,7.282,0,0,0,2.681,4,5.282,5.282,0,0,0,1.775.867l0-.006a7.712,7.712,0,0,1,0-3.735,12.3,12.3,0,0,1,2.118-3.769,11.186,11.186,0,0,0,.715,2.5,5.444,5.444,0,0,0,1.184,1.652,4.082,4.082,0,0,1,1.156,1.32,3.771,3.771,0,0,1,.275,1.651h.011a5.542,5.542,0,0,0,2.512-.72,6.911,6.911,0,0,0,3.253-4.81,7.227,7.227,0,0,0-1.135-6.107,7.114,7.114,0,0,0-2.083-1.9.024.024,0,0,1,0,.009,4.1,4.1,0,0,1-.467,1.284,3.758,3.758,0,0,1-.935.963,7.5,7.5,0,0,0-1.321-5.31,9.5,9.5,0,0,0-4.676-3.081l0,.006a8.763,8.763,0,0,1,.189,4.478,10.025,10.025,0,0,1-2.778,4.044,2.341,2.341,0,0,1-.44-.522C6.967,10.458,6.613,9.8,6.6,9.776Z"
+          fill="#ffeb50"/>
+</svg>

v2tv/src/assets/imgs/wait/icons.svg

@@ -0,0 +1,69 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="709" height="37"
+     viewBox="0 0 709 37">
+    <defs>
+        <clipPath id="clip-path">
+            <rect width="53" height="37" fill="none"/>
+        </clipPath>
+    </defs>
+    <g id="组_730" data-name="组 730" transform="translate(-606 -1026)">
+        <g id="重复网格_3" data-name="重复网格 3" transform="translate(606 1026)" clip-path="url(#clip-path)">
+            <g id="组_738" data-name="组 738" transform="translate(-606 -1026)">
+                <g id="矩形_243" data-name="矩形 243" transform="translate(606 1026)" fill="rgba(255,255,255,0.27)"
+                   stroke="#707070" stroke-width="1">
+                    <rect width="53" height="37" rx="8" stroke="none"/>
+                    <rect x="0.5" y="0.5" width="52" height="36" rx="7.5" fill="none"/>
+                </g>
+                <text id="CR" transform="translate(632 1053)" font-size="25"
+                      font-family="PingFangSC-Regular, PingFang SC">
+                    <tspan x="-17.375" y="0">CR</tspan>
+                </text>
+            </g>
+        </g>
+        <text id="场馆纪录" transform="translate(710 1053)" fill="#585858" font-size="22"
+              font-family="PingFangSC-Regular, PingFang SC">
+            <tspan x="-44" y="0">场馆纪录</tspan>
+        </text>
+        <g id="组_740" data-name="组 740">
+            <g id="矩形_243-2" data-name="矩形 243" transform="translate(980 1026)" fill="rgba(255,255,255,0.27)"
+               stroke="#707070" stroke-width="1">
+                <rect width="53" height="37" rx="8" stroke="none"/>
+                <rect x="0.5" y="0.5" width="52" height="36" rx="7.5" fill="none"/>
+            </g>
+            <text id="CB" transform="translate(1006 1053)" font-size="25" font-family="PingFangSC-Regular, PingFang SC">
+                <tspan x="-17.438" y="0">CB</tspan>
+            </text>
+        </g>
+        <text id="场馆最佳" transform="translate(1084 1053)" fill="#585858" font-size="22"
+              font-family="PingFangSC-Regular, PingFang SC">
+            <tspan x="-44" y="0">场馆最佳</tspan>
+        </text>
+        <g id="组_741" data-name="组 741">
+            <g id="矩形_243-3" data-name="矩形 243" transform="translate(1167 1026)" fill="rgba(255,255,255,0.27)"
+               stroke="#707070" stroke-width="1">
+                <rect width="53" height="37" rx="8" stroke="none"/>
+                <rect x="0.5" y="0.5" width="52" height="36" rx="7.5" fill="none"/>
+            </g>
+            <text id="PB" transform="translate(1193 1053)" font-size="25" font-family="PingFangSC-Regular, PingFang SC">
+                <tspan x="-16.3" y="0">PB</tspan>
+            </text>
+        </g>
+        <text id="个人最佳" transform="translate(1271 1053)" fill="#585858" font-size="22"
+              font-family="PingFangSC-Regular, PingFang SC">
+            <tspan x="-44" y="0">个人最佳</tspan>
+        </text>
+        <g id="组_739" data-name="组 739">
+            <g id="矩形_243-4" data-name="矩形 243" transform="translate(793 1026)" fill="rgba(255,255,255,0.27)"
+               stroke="#707070" stroke-width="1">
+                <rect width="53" height="37" rx="8" stroke="none"/>
+                <rect x="0.5" y="0.5" width="52" height="36" rx="7.5" fill="none"/>
+            </g>
+            <text id="MR" transform="translate(819 1053)" font-size="25" font-family="PingFangSC-Regular, PingFang SC">
+                <tspan x="-19.175" y="0">MR</tspan>
+            </text>
+        </g>
+        <text id="竞技纪录" transform="translate(897 1053)" fill="#585858" font-size="22"
+              font-family="PingFangSC-Regular, PingFang SC">
+            <tspan x="-44" y="0">竞技纪录</tspan>
+        </text>
+    </g>
+</svg>

v2tv/src/assets/imgs/wait/newIcon.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="56" height="28"
+     viewBox="0 0 56 28">
+    <defs>
+        <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+            <stop offset="0" stop-color="#d11122"/>
+            <stop offset="1" stop-color="#ff4b5a"/>
+        </linearGradient>
+    </defs>
+    <g id="组_723" data-name="组 723" transform="translate(1.262 -1)">
+        <rect id="矩形_190" data-name="矩形 190" width="56" height="28" rx="7" transform="translate(-1.262 1)"
+              opacity="0.853" fill="url(#linear-gradient)"/>
+        <text id="NEW" transform="translate(26.738 23)" fill="#fff" font-size="19"
+              font-family="PingFangSC-Regular, PingFang SC">
+            <tspan x="-21.499" y="0">NEW</tspan>
+        </text>
+    </g>
+</svg>

v2tv/src/assets/imgs/wait/person.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="178" height="199" viewBox="0 0 178 199">
+    <g id="矩形_201" data-name="矩形 201" fill="rgba(255,255,255,0.16)" stroke="rgba(112,112,112,0.6)" stroke-width="1">
+        <rect width="178" height="199" rx="12" stroke="none"/>
+        <rect x="0.5" y="0.5" width="177" height="198" rx="11.5" fill="none"/>
+    </g>
+</svg>

v2tv/src/main.js

@@ -9,6 +9,7 @@ import 'element-ui/lib/theme-chalk/index.css';
 import axios from 'axios'
 
 import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
+import animated from 'animate.css'
 
 if (process.env.NODE_ENV === 'development') {
     // 显示控制台
@@ -23,7 +24,7 @@ if (process.env.NODE_ENV === 'development') {
 
 Vue.config.productionTip = false;
 Vue.use(ElementUI);
-
+Vue.use(animated);
 
 // store,
 new Vue({

v2tv/src/views/Wait.vue

@@ -1,73 +1,171 @@
 <template>
   <div :class="pageStyle">
     <Headside></Headside>
-    <el-carousel :interval="300000000" height="100%">
-      <el-carousel-item>
-        <div class="container">
-          <div class="lt lists">
-            <div class="partTitle">
-              卡路里排名
-            </div>
-            <div class="listTitle">
-              <span>排名</span>
-              <span>成员</span>
-              <span>卡路里</span>
-            </div>
-            <ul>
-              <li v-for="(s,i) in 8">
-                <div class="num">{{ i + 1 }}</div>
+    <div class="container" v-show="page">
+      <div class="lt lists">
+        <div class="partTitle">
+          卡路里排名
+        </div>
+        <div class="listTitle">
+          <span>排名</span>
+          <span>成员</span>
+          <span>卡路里</span>
+        </div>
+        <ul>
+          <li v-for="(s,i) in rt[2].Result" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+            <div class="num">{{ i + 1 }}</div>
+            <img :src="s.Head" alt="" v-if="s.Head">
+            <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
+            <span>{{ s.UserName }}</span>
+            <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
+            <em>{{ s.Values }}</em>
+          </li>
+          <li v-if="rt[2].Result == ''">
+            <i>还没有排行记录哟~</i>
+          </li>
+        </ul>
+      </div>
+      <div class="md">
+        <h5 :class="[{'timeTitle weeksTitle':true},{ ' box animate__animated animate__flipInX': Listate[0].state }]">
+          本日
+        </h5>
+        <span class="sub">
+              场馆卡路里总消耗
+            </span>
+        <div class="sumCalc">
+          <h5 :class="[{ 'box animate__animated animate__flipInX': Listate[3].state }]">
+            {{ recordMain[0].Result[0].Values }}</h5>
+          <em>Kcal</em>
+        </div>
+        <div class="persons">
+          <!--               hero 英雄榜-->
+          <h5>英雄榜</h5>
+          <ul>
+            <li v-for="(s,i) in 3">
+              <div class="person">
                 <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像">
-                <span>王仪涵</span>
-                <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
-                <em>23.1</em>
-              </li>
-            </ul>
-          </div>
-          <div class="md">
-            <h5 class="timeTitle weeksTitle">
-              本周
-            </h5>
-            <span class="sub">
+                <span class="name">欧阳小枫</span>
+                <div class="calcHero">
+                  <img src="../assets/imgs/wait/calcIcon.svg" alt="">
+                  <em>3920</em>
+                </div>
+              </div>
+              <span class="sign">
+                      <img src="../assets/imgs/wait/newIcon.svg" alt="new">
+                      <em>场馆新纪录</em>
+                    </span>
+            </li>
+            <li v-if="rt == ''">
+              <i>还没有排行记录哟~</i>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="rt lists">
+        <div class="partTitle">
+          CK排名
+        </div>
+        <div class="listTitle">
+          <span>排名</span>
+          <span>成员</span>
+          <span>CK</span>
+        </div>
+        <ul>
+          <li v-for="(s,i) in rt[3].Result" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+            <div class="num">{{ i + 1 }}</div>
+            <img :src="s.Head" alt="" v-if="s.Head">
+            <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
+            <span>{{ s.UserName }}</span>
+            <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
+            <em>{{ s.Values }}</em>
+          </li>
+          <li v-if="rt[3].Result == ''">
+            <i>还没有排行记录哟~</i>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="container" v-show="!page">
+      <div class="lt lists">
+        <div class="partTitle">
+          卡路里排名
+        </div>
+        <div class="listTitle">
+          <span>排名</span>
+          <span>成员</span>
+          <span>卡路里</span>
+        </div>
+        <ul>
+          <li v-for="(s,i) in rt[0].Result" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+            <div class="num">{{ i + 1 }}</div>
+            <img :src="s.Head" alt="" v-if="s.Head">
+            <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
+            <span>{{ s.UserName }}</span>
+            <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
+            <em>{{ s.Values }}</em>
+          </li>
+          <li v-if="rt[0].Result == ''">
+            <i>还没有排行记录哟~</i>
+          </li>
+        </ul>
+      </div>
+      <div class="md">
+        <h5 :class="[{'timeTitle monsTitle':true},{ ' box animate__animated animate__flipInX': Listate[0].state }]">
+          本月
+        </h5>
+        <span class="sub">
               场馆卡路里总消耗
             </span>
-            <div class="sumCalc">
-              <h5>123456</h5>
-              <em>Kcal</em>
-            </div>
-            <div class="person">
-              <!--               hero-->
-              <!--               best-->
-            </div>
-          </div>
-          <div class="rt lists">
-            <div class="partTitle">
-              CK排名
-            </div>
-            <div class="listTitle">
-              <span>排名</span>
-              <span>成员</span>
-              <span>CK</span>
-            </div>
-            <ul>
-              <li v-for="(s,i) in 8">
-                <div class="num">{{ i + 1 }}</div>
+        <div class="sumCalc">
+          <h5 :class="[{ 'box animate__animated animate__flipInX': Listate[3].state }]">
+            {{ recordMain[1].Result[0].Values }}</h5>
+          <em>Kcal</em>
+        </div>
+        <div class="persons">
+          <!--               最佳会员-->
+          <h5>最佳会员</h5>
+          <ul>
+            <li v-for="(h,index) in 3">
+              <div class="person">
                 <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像">
-                <span>王仪涵</span>
-                <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
-                <em>23.1</em>
-              </li>
-            </ul>
-          </div>
+                <span class="name">欧阳小枫</span>
+                <div class="calcHero">
+                  <img src="../assets/imgs/wait/calcIcon.svg" alt="">
+                  <em>3920</em>
+                </div>
+                <i>{{ index + 1 }}</i>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="rt lists">
+        <div class="partTitle">
+          CK排名
+        </div>
+        <div class="listTitle">
+          <span>排名</span>
+          <span>成员</span>
+          <span>CK</span>
         </div>
-      </el-carousel-item>
-      <!--      <el-carousel-item>-->
-      <!--        <div class="container">-->
-      <!--          <div class="lt"></div>-->
-      <!--          <div class="md"></div>-->
-      <!--          <div class="rt"></div>-->
-      <!--        </div>-->
-      <!--      </el-carousel-item>-->
-    </el-carousel>
+        <ul>
+          <li v-for="(s,i) in rt[1].Result" :class="[{ 'box animate__animated animate__flipInX': Listate[i].state }]">
+            <div class="num">{{ i + 1 }}</div>
+            <img :src="s.Head" alt="" v-if="s.Head">
+            <img class="headImg" v-bind:src="require('../static/img/people/flyhead.png')" alt="学生头像" v-if="!s.Head">
+            <span>{{ s.UserName }}</span>
+            <img class="crIcon" v-bind:src="require('../assets/imgs/wait/CR.svg')" alt="">
+            <em>{{ s.Values }}</em>
+          </li>
+          <li v-if="rt[1].Result == ''">
+            <i>还没有排行记录哟~</i>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="icons">
+      <img src="../assets/imgs/wait/icons.svg" alt="">
+    </div>
   </div>
 </template>
 
@@ -83,13 +181,198 @@ import {
   UserRankingQuery
 } from '@/api/getApiRes'
 
+let qs = require('qs');
 export default {
   data() {
     return {
       eqSn: '30:9C:23:0C:8B:1E',
       pageStyle: RandomBg2(),
+      page: true,
+      pageTimer: null,
+      waitTimer: null,
+      Listate: [
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+        {state: false},
+      ],
+      recordMain: [
+        {
+          Title: '本<s>周</s>场馆卡路里总消耗',
+          Result: [{'Values': 0, Unite: '千卡'}],
+        },
+        {
+          Title: '本<s>周</s>场馆卡路里总消耗',
+          Result: [{'Values': 0, Unite: '千卡'}],
+        }
+      ],
+      rt: [],
+    }
+  },
+  mounted() {
+    this.init();
+    if (this.pageTimer) {
+      clearInterval(this.pageTimer);
+    } else {
+      this.timer = setInterval(() => {
+        this.page = !this.page;
+        this.cardPlay();
+      }, 10000)
+    }
+    this.cardPlay();
+  },
+  destroyed() {
+    clearInterval(this.pageTimer);//页面销毁时清除定时器
+    clearInterval(this.waitTimer);//页面销毁时清除定时器
+  },
+  watch: {
+    '$route': function (val) {
+      let that = this;
+      if (val.path == '/') {
+        that.init();
+      } else {
+        clearInterval(this.pageTimer);
+        clearInterval(this.waitTimer);
+      }
     }
   },
+  methods: {
+    init() {
+      this.curgetClassStat();
+      this.GetHerosRankingQuery();
+      this.GetCalorieStatsQuery();
+      this.GetUserRankingQuery();
+
+      this.waitTimer = setInterval(() => {
+        this.curgetClassStat();
+        this.GetHerosRankingQuery();
+        this.GetCalorieStatsQuery();
+        this.GetUserRankingQuery();
+      }, 5000);
+    },
+    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)
+      }
+    },
+    curgetClassStat() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        eqSn: localStorage.eqSn
+      };
+      let postdata = qs.stringify(param);
+      getClassStat(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 上课了
+          if (json.ClassOn == 1) {
+            // 0: 下课 团课/私教 排名
+            // 1：团课/私教 todo
+            // 2：竞技课2PK
+            // 3：竞技课threepk
+            switch (parseInt(json.dp)) {
+              case 0:
+                that.$router.push({path: '/rank'});
+                break;
+              case 1:
+                that.$router.push({path: '/main'});
+                break;
+              case 2:
+                that.$router.push({path: '/pk'});
+                break;
+              case 3:
+                that.$router.push({path: '/threepk'});
+                break;
+            }
+          }
+        }
+      })
+    },
+    GetHerosRankingQuery() {
+      let that = this;
+      let param = {
+        eqSn: localStorage.eqSn,
+        dispNum: 3
+      };
+      let postdata = qs.stringify(param);
+      HerosRankingQuery(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.bottom = json.Rs;
+        } else {
+          if (json.Code == 4002) {
+          } else {
+            that.$message.error(json.Memo);
+          }
+        }
+      })
+    },
+    GetCalorieStatsQuery() {
+      let that = this;
+      let param = {
+        eqSn: localStorage.eqSn,
+      };
+      let postdata = qs.stringify(param);
+      CalorieStatsQuery(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.recordMain = json.Rs;
+        } else {
+          that.recordMain = [
+            {
+              Title: '',
+              Result: [{'Values': '', Unite: ''}],
+            },
+            {
+              Title: '',
+              Result: [{'Values': '', Unite: ''}],
+            }
+          ];
+          if (json.Code == 4002) {
+            that.dialogVisible = true;
+            that.dialogText = json.Memo;
+          } else {
+            that.$message.error(json.Memo);
+          }
+        }
+      })
+    },
+    GetUserRankingQuery() {
+      let that = this;
+      let param = {
+        eqSn: localStorage.eqSn,
+        dispNum: 8
+      };
+      let postdata = qs.stringify(param);
+      UserRankingQuery(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.rt = json.Rs;
+        } else {
+          if (json.Code == 4002) {
+          } else {
+            that.$message.error(json.Memo);
+          }
+        }
+      })
+    },
+  },
   components: {
     Headside
   }
@@ -99,12 +382,19 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/css/bg.scss";
 
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 @font-face {
   font-family: Artifakt;
   src: url('../assets/font/Artifakt.ttf');
 }
 
 $font-color: white;
+$yellow: #FFEB50;
 @mixin cube {
   width: 100%;
   overflow: hidden;
@@ -154,6 +444,7 @@ $font-color: white;
         font-size: 0.3rem;
         color: $font-color;
         overflow: visible;
+        border: 1px solid rgba(0, 0, 0, 0.7);
 
         .num {
           position: relative;
@@ -169,6 +460,9 @@ $font-color: white;
           font-weight: bold;
           text-align: left;
           text-indent: 0.2rem;
+          font-style: italic;
+          color: #fff;
+          text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.47);
         }
 
         .headImg {
@@ -202,7 +496,7 @@ $font-color: white;
           text-align: right;
           font-style: normal;
           font-weight: bold;
-          color: #FFE61F;
+          color: $yellow;
           line-height: 0.65rem;
           margin-right: 0.2rem;
         }
@@ -232,6 +526,13 @@ $font-color: white;
       background-size: 100%;
     }
 
+    .monsTitle {
+      background: url("../assets/imgs/wait/monthsTitleBg.svg");
+      background-repeat: no-repeat;
+      background-position: top center;
+      background-size: 100%;
+    }
+
     .sub {
       @include cube;
       color: $font-color;
@@ -267,6 +568,125 @@ $font-color: white;
         margin-right: 0.3rem;
       }
     }
+
+    .persons {
+      @include cube;
+
+      h5 {
+        @include cube;
+        width: 70%;
+        font-size: 0.2rem;
+        color: white;
+        text-align: left;
+      }
+
+      ul {
+        @include cube;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-grow: 1;
+        height: 100%;
+
+        li {
+          width: 1.8rem;
+          overflow: hidden;
+
+          i {
+            position: relative;
+            bottom: 1.6rem;
+            left: 0.1rem;
+            width: 0.3rem;
+            height: 0.4rem;
+            float: left;
+            color: white;
+            text-align: center;
+            font-size: 0.2rem;
+            background: url("../assets/imgs/wait/besSign.svg");
+            background-repeat: no-repeat;
+            background-position: top center;
+            background-size: 100%;
+            font-style: normal;
+          }
+
+          div.person {
+            width: 1.5rem;
+            height: 1.5rem;
+            background-image: url("../assets/imgs/wait/person.svg");
+            background-position: top center;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            padding-top: 0.5rem;
+
+            .headImg {
+              width: 0.7rem;
+              height: 0.7rem;
+              display: block;
+              margin: 0 auto;
+              border-radius: 250px;
+              border: 2px solid #39B6FF;
+            }
+
+            .girl {
+              border: 2px solid #EA26EA;
+            }
+
+            .name {
+              @include cube;
+              position: relative;
+              top: -0.2rem;
+              width: 80%;
+              text-align: center;
+              font-size: 0.2rem;
+              color: white;
+              background: rgba(0, 0, 0, 0.62);
+              border-radius: 250px;
+            }
+
+            .calcHero {
+              position: relative;
+              top: -0.1rem;
+              width: 60%;
+              margin: 0 auto;
+              height: 0.25rem;
+
+              img {
+                width: 0.25rem;
+                height: 0.25rem;
+                float: left;
+              }
+
+              em {
+                float: right;
+                text-align: left;
+                font-size: 0.2rem;
+                color: $yellow;
+                font-style: normal;
+              }
+            }
+          }
+        }
+
+        .sign {
+          @include cube;
+          width: 90%;
+          float: left;
+
+          img {
+            width: 0.5rem;
+            float: left;
+          }
+
+          em {
+            font-size: 0.2rem;
+            color: white;
+            float: right;
+            font-style: normal;
+            text-align: left
+          }
+        }
+      }
+    }
   }
 
   .rt {
@@ -310,7 +730,16 @@ $font-color: white;
       }
     }
   }
+}
 
+.icons {
+  @include cube;
+  width: 7rem;
+  font-size: 0.3rem;
+
+  img {
+    width: 100%;
+  }
 }
 
 </style>