Bonus-AI-LargeScreen/src/views/largeScreen/onlineCount.vue

<template>
    <div class="largeScreenOnlineBox">
        <div class="largeScreenOnlineBox2">
            <div class="largeScreenOnlineCount ">
                实时在线人数
            </div>
            <img class="largeScreenOnlineCountBackImg" src="../../assets/images/upBorder.png" alt="error">
            <div class="largeScreenOnlineNum largeScreenOnlineNumFst">{{ realOnlineNum }} </div>
        </div>
        <div class="largeScreenOnlineBox2">
            <div class="largeScreenOnlineCount ">
                当前统计在线人数
            </div>
            <img class="largeScreenOnlineCountBackImg" src="../../assets/images/bottomBorder.png" alt="error">
            <div class="largeScreenOnlineNum largeScreenOnlineNumSec">{{ computeOnlineNum }}</div>
        </div>
    </div>
</template>

<script>

import { getOnlineNum } from "@/api/largeScreen/largeScreen.js"
export default {
    name: 'onlineCount',
    data() {
        return {
            realOnlineNum: 0,
            computeOnlineNum: 0,
            largeScreenOnlineReflesh:''
        }
    },
    created() {
        this.largeScreenOnlineReflesh = setInterval(() => {
            this.getOnlineNumLC();
        }, 1 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
    },
    methods: {
        getOnlineNumLC() {
            getOnlineNum.then(res => {
                if (res.code == 200) {
                    this.realOnlineNum = res.data.data.realOnlineNum
                    this.computeOnlineNum = res.data.data.computeOnlineNum
                }else{
                    this.$message({
                            message: '请检查网络情况',
                            type: 'error'
                        });
                }
            }).catch(error => {
                this.$message({
                            message: '系统失败，请联系管理员',
                            type: 'error'
                        });

            });
        }
    }

}
</script>

<style scoped>
.largeScreenOnlineBox {
    display: flex;
    flex-direction: column;

}

.largeScreenOnlineBox2 {
    height: 50%;
    position: relative;
}

.largeScreenOnlineCount {
    color: #ffffff;
    font-size: 1rem;
    padding-left: 2.5rem;
    padding-top: 1rem;
}

.largeScreenOnlineCountBackImg {
    position: absolute;
    bottom: 0.5rem;
    left: 2rem;
    opacity: .7;
}

.largeScreenOnlineNum {
    width: 90%;
    border-radius: .6rem;
    font-size: 3rem;
    margin-left: 5%;
    margin-top: 2%;
    height: 7rem;
    z-index: 1;
    text-align: center;
    padding-top: 1.5rem;
    position: relative;
    letter-spacing: 0.1rem;
    font-family: DIN-Bold;

}

.largeScreenOnlineNumFst {
    color: RGBA(103, 239, 255, 1);
}

.largeScreenOnlineNumSec {
    color: RGBA(101, 251, 181, 1);
}
</style>