flyLong/tv/src/views/Rank.vue

<template>
    <div :class="pageStyle">
        <Headside></Headside>
        <div class="rankContainer">
            <div class="lt">
                <div class="recordMain">
                    <el-carousel :interval="30000" height="370px">
                        <el-carousel-item v-for="rs in recordMain">
                            <h5>{{rs.Title}}</h5>
                            <div class="sumContainer">
                                <div class="sum">
                                    <s>{{rs.Result[0].Unite}}</s>
                                    <em>{{rs.Result[0].Values}}</em>
                                </div>
                                <span class="sumBg"></span>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="bottom">
                    <el-carousel :interval="15000" height="280px">
                        <el-carousel-item v-for="Rs in bottom">
                            <div class="topOne" v-if="Rs.Style == 'tops'">
                                <h5>{{Rs.Title}}</h5>
                                <ul>
                                    <li v-for="(tops,i) in Rs.Result">
                                        <div class="dgCenter">
                                            <div class="dghead">
                                                <img :id="'circle_'+i"
                                                     v-bind:src="tops.Head" alt="" v-if="tops.Head">
                                                <img :id="'circle_'+i"
                                                     v-bind:src="require('../static/img/people/flyhead.png')" alt=""
                                                     v-if="!tops.Head">
                                                <s>{{ tops.UserName }}</s>
                                            </div>
                                            <div class="score">
                                                <em>{{ tops.Values}}</em>
                                                <span>
                                                    {{tops.Message}}
                                                </span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="heros" v-if="Rs.Style == 'heros'">
                                <h5>{{Rs.Title}}</h5>
                                <ul>
                                    <li v-for="(hero,i) in Rs.Result">
                                        <img :id="'circle_'+i"
                                             v-bind:src="hero.Head" alt="" v-if="hero.Head">
                                        <img :id="'circle_'+i" v-bind:src="require('../static/img/people/flyhead.png')"
                                             alt="" v-if="!hero.Head">
                                        <img src="../static/img/rank/boy.png" class="sex" v-if="hero.Sex == 1"/>
                                        <img src="../static/img/rank/girl.png" class="sex" v-if="hero.Sex == 2"/>
                                        <div>
                                            <em :id="'red_'+i">No.{{i+1}}</em> {{ hero.UserName }}
                                        </div>
                                        <span>{{ hero.Values }} {{hero.Unite}}</span>
                                    </li>
                                </ul>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div class="rt">
                <el-carousel :interval="15000" height="610px">
                    <el-carousel-item v-for="Rs in rt">
                        <h5>{{Rs.Title}}</h5>
                        <ul>
                            <li v-for="s in Rs.Result">
                                <img :src="s.Head" alt="" v-if="s.Head">
                                <img v-bind:src="require('../static/img/people/flyhead.png')" alt="" v-if="!s.Head">
                                <em>{{s.UserName}}</em>
                                <s>{{s.Values}}</s>
                            </li>
                        </ul>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script>
    import Headside from '@/components/Headside'
    import {
        getHello,
        getClassStat,
        HerosRankingQuery,
        CalorieStatsQuery,
        UserRankingQuery
    } from '@/api/getApiRes'
    import '../libs/rem';
    import '../Global'

    let qs = require('qs');
    export default {
        data() {
            return {
                pageStyle: RandomBg(),
                trueDate: true,//真实数据 true false
                fakeNums: 8,//
                unite: '卡路里',
                topMsg: '',
                students: [],
                studentsLimit: [],
                showType: 2,//1 单人
                recordMain: [],
                bottom: {},
                rt: [],

            }
        },
        mounted() {
            if (this.trueDate) {
                this.timer = setInterval(() => {
                    // this.GetgetUserList();
                    this.curgetClassStat();
                    this.GetHerosRankingQuery();
                    this.GetCalorieStatsQuery();
                    this.GetUserRankingQuery();
                }, 1000);
            } else {
                this.students = this.fakeNews();
                this.studentsLimit = this.fakeNewsLimit();
                this.topMsg = this.students[0];
                this.bottom = [
                    {
                        "Title": "本周消耗卡路里英雄榜",
                        "Style": "heros",
                        "Result": [
                            {
                                "UserName": "段长鹏",
                                "Sex": 1,
                                "Head": "",
                                "Values": "4744",
                                "Unite": "千卡",
                                "Message": ""
                            },
                            {
                                "UserName": "贾雨奇",
                                "Sex": 1,
                                "Head": "http://192.168.0.2/jyq.png",
                                "Values": "4034",
                                "Unite": "千卡",
                                "Message": ""
                            },
                            {
                                "UserName": "郑伟",
                                "Sex": 1,
                                "Head": "http://192.168.0.2/zw.png",
                                "Values": "2290",
                                "Unite": "千卡",
                                "Message": ""
                            }
                        ]
                    },
                    {
                        "Title": "单次CK值(新个人记录)",
                        "Style": "tops",
                        "Result": [
                            {
                                "UserName": "郑伟",
                                "Sex": 1,
                                "Head": "",
                                "Values": "1022",
                                "Unite": "",
                                "Message": "打破了历史记录100000"
                            },
                            {
                                "UserName": "郑伟",
                                "Sex": 1,
                                "Head": "http://192.168.0.2/zw.png",
                                "Values": "1020",
                                "Unite": "",
                                "Message": "打破了历史记录100000"
                            }
                        ]
                    }
                ];
                this.rt = [
                    {
                        Title: '月度CK值排行',
                        Result: this.fakeNews(),
                    },
                    {
                        Title: '月度卡路里值排行',
                        Result: this.fakeNews(),
                    }
                ];
                this.recordMain = [
                    {
                        Title:'本周场馆卡路里总消耗',
                        Result: '1234',
                        Unite: '千卡'
                    }
                ]

            }
        },
        methods: {
            fakeNews() {
                let item = [];
                for (var i = 0; i < 7; i++) {
                    item.push(
                        {
                            "hubId": 0,
                            "deviceId": 22756,
                            "calorie": 96.5,
                            "heartRate": i * 5,
                            "step": i * 40,
                            "userName": "杨东艳",
                            "userNmae": "杨东艳",
                            "name": "杨东艳",
                            "updateTime": 1604568915582,
                            "activePercent": i * 5,
                            "ck": 115.9 - i,
                            "head": 'gc.png'
                        }
                    )
                }
                return item;
            },
            fakeNewsLimit() {
                let item = [];
                for (var i = 0; i < 3; i++) {
                    item.push(
                        {
                            "hubId": 0,
                            "deviceId": 22756,
                            "calorie": 999.5,
                            "heartRate": i * 5,
                            "step": i * 40,
                            "userName": "杨东艳",
                            "userNmae": "杨东艳",
                            "name": "杨东艳",
                            "updateTime": 1604568915582,
                            "activePercent": i * 5,
                            "ck": i + 115.1,
                            "sex": 1,
                            "head": 'gc.png'
                        }
                    )
                }
                return item;
            },
            GetgetUserList() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                getHello(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.topMsg = json.Rs[0];
                        that.students = json.Rs;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            GetHerosRankingQuery() {
                let that = this;
                let param = {
                    eqSn: '30:9C:23:0C:8B:1E',
                    dispNum: 3
                };
                let postdata = qs.stringify(param);
                HerosRankingQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.bottom = json.Rs;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            GetUserRankingQuery() {
                let that = this;
                let param = {
                    eqSn: '30:9C:23:0C:8B:1E',
                    dispNum: 7
                };
                let postdata = qs.stringify(param);
                UserRankingQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.rt = json.Rs;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            GetCalorieStatsQuery() {
                let that = this;
                let param = {
                    eqSn: '30:9C:23:0C:8B:1E',
                };
                let postdata = qs.stringify(param);
                CalorieStatsQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.recordMain = json.Rs;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            curgetClassStat() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                getClassStat(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        // 上课了
                        if (json.ClassOn) {
                            that.$router.push({path: '/'});
                        }
                    } else {
                        // that.$message.error(json.Memo);
                    }
                })
            },
        },
        watch: {
            '$route': function (val) {
                if (val.path == '/rank') {
                    if (this.trueDate) {
                        this.timer = setInterval(() => {
                            this.curgetClassStat();
                            this.GetHerosRankingQuery();
                            this.GetCalorieStatsQuery();
                            this.GetUserRankingQuery();
                        }, 1000);
                    } else {
                        this.students = this.fakeNews();
                        this.topMsg = this.students[0];
                    }
                } else {
                    clearInterval(this.timer);
                }
            }
        },
        components: {
            Headside
        }
    }
</script>

<style scoped>

    .pages {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .bgStyle1 {
        background-color: #028fe1;
        background: url("../static/img/bg/bg_1.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .bgStyle2 {
        background-color: #028fe1;
        background: url("../static/img/bg/bg_2.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .bgStyle3 {
        background-color: #028fe1;
        background: url("../static/img/bg/bg_3.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .bgStyle4 {
        background-color: #028fe1;
        background: url("../static/img/bg/bg_4.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }


    .rankContainer {
        width: 90%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .rankContainer .lt {
        width: 60%;
        height: 100%;
        float: left;
    }

    .rankContainer .rt {
        width: 40%;
        float: right;
    }

    .rankContainer .lt .recordMain h5 {
        font-family: Roboto;
        font-weight: normal;
        font-size: 0.6rem;
        text-align: left;
        color: #fff;
        margin: 5% auto;
    }

    .rankContainer .sum {
        position: relative;
        top: 0.4rem;
        width: 100%;
        height: 35%;
        overflow: visible;
        display: block;
        margin: 0 auto;
        text-align: center;
        z-index: 666;
    }

    .sumBg {
        position: relative;
        bottom: 0.8rem;
        width: 100%;
        height: 2rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../static/img/pingtai.png") bottom center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .sum em {
        width: 7.2rem;
        float: right;
        font-weight: 900;
        font-family: Roboto;
        font-weight: 900;
        font-size: 2rem;
        text-align: center;
        color: #fff;
        font-style: normal;
        text-shadow: #E85297 5px 0 0, #E85297 0 5px 0, #E85297 -5px 0 0, #E85297 0 -5px 0;
    }

    .sum s {
        position: relative;
        bottom: -2rem;
        width: 2rem;
        float: right;
        font-style: normal;
        font-family: Roboto;
        font-weight: normal;
        font-size: 44px;
        text-align: center;
        color: #fff;
        text-decoration: none;
    }

    .sumContainer {
        width: 100%;
        height: 4rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .topOne {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .topOne h5 {
        font-family: Roboto;
        font-weight: normal;
        font-size: 0.4rem;
        text-align: left;
        color: #fff;
        margin: 1% 0;
    }

    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .topOne ul {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-left: 2px;
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    }

    .topOne li {
        width: 33.3%;
        float: left;
    }

    .topOne .dgCenter {
        width: 93%;
        overflow: hidden;
        float: left;
        border-radius: 5px;
        background: rgba(0.0 .0 .0 .1);
        box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    }

    .dgCenter .dghead {
        width: 40%;
        float: left;
    }

    .dghead img {
        width: 1rem;
        height: 1rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding: 0;
        border-radius: 250px;
        border: 2px solid #fff;
    }

    .dghead s {
        width: 100%;
        overflow: hidden;
        display: block;
        font-weight: normal;
        font-size: 0.3rem;
        text-align: center;
        color: #fff;
        font-style: normal;
        text-decoration: none;
        margin-top: 0.2rem;
    }

    .score {
        width: 60%;
        float: right;
    }

    .score em {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-family: Roboto;
        font-weight: bold;
        font-size: 0.7rem;
        text-align: center;
        color: #fff;
        font-style: normal;
        height: 1.4rem;
        line-height: 1.4rem;
    }

    .score span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-family: Roboto;
        font-weight: normal;
        font-size: 0.2rem;
        color: #fff;
        text-align: center;
    }

    .rt {
        padding-top: 0.6rem;
    }

    .rt h5 {
        font-family: Roboto;
        font-weight: normal;
        font-size: 36px;
        text-align: center;
        color: #fff;
        margin: 0;
        margin-bottom: 0.6rem;
        text-indent: 0.2rem;
    }

    .rt ul {
        width: 80%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .rt li {
        width: 80%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 0.24rem;
        padding: 0.1rem 4%;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
    }

    .rt li img {
        width: 0.6rem;
        height: 0.6rem;
        filter: drop-shadow(0px 0px 6px #bf00ff);
        border: 2px solid #fff;
        float: left;
        border-radius: 250px;
        margin-right: 3%;
    }

    .rt li em {
        font-family: Roboto;
        font-weight: normal;
        font-size: 0.35rem;
        text-align: center;
        color: #fff;
        font-style: normal;
        float: left;
        height: 0.6rem;
        line-height: 0.6rem;
    }

    .rt li s {
        font-family: Roboto;
        font-weight: normal;
        font-size: 0.35rem;
        text-align: right;
        color: #fff;
        text-decoration: none;
        height: 0.6rem;
        line-height: 0.6rem;
        float: right;
    }

    .heros > h5 {
        font-family: Roboto;
        font-weight: normal;
        font-size: 0.35rem;
        text-align: left;
        color: #fff;
        margin: 1% 0;
    }

    .heros ul {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-left: 3px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .heros li {
        width: 2.5rem;
        height: 2.35rem;
        float: left;
        border-radius: 5px;
        background: rgba(0.0 .0 .0 .1);
        box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        color: #fff;
        font-size: 0.3rem;
        text-align: center;
        margin-right: 5%;
    }

    .heros li > img {
        width: 1.2rem;
        height: 1.2rem;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 0.2rem;
        border-radius: 100%;
        border: 2px solid #fff;
    }

    .heros li > img.sex {
        position: relative;
        top: -1.5rem;
        right: 0.55rem;
        width: 0.4rem;
        height: 0.4rem;
        overflow: hidden;
        float: right;
        border: none;

    }

    .heros li em {
        font-family: Roboto;
        font-weight: bold;
        font-size: 30px;
        text-align: center;
        font-style: normal;
    }

    .heros li em#red_0 {
        color: #FA5114;
    }

    .heros li em#red_1 {
        color: #FA981F;
    }

    .heros li em#red_2 {
        color: #FFE13C;
    }

    .heros li #circle_0 {
        border: 2px solid #FA5114;
    }

    .heros li #circle_1 {
        border: 2px solid #FA981F;

    }

    .heros li #circle_2 {
        border: 2px solid #FFE13C;

    }

    .heros li div {
        position: relative;
        top: -0.7rem;
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    .heros li span {
        position: relative;
        top: -0.67rem;
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .bottom {
        position: relative;
        width: 100%;
        padding-top: 0.1rem;
        bottom: 0.2rem;
    }

    /deep/ .el-carousel__indicators--horizontal {
        display: none;
    }
</style>