qimall/backend/modules/mall/views/census/components/header-time.php

<template id="header-time">
    <div flex style="padding: 0 10px;">
        <div flex>
            <div style="font-size: 38px;">{{ time }}</div>
            <div style="font-size: 16px;flex-direction: column;margin-left :10px " flex="main:center">
                <div style="width: 100%;">{{day}} {{timeSlot}}</div>
                <div>{{date}}</div>
            </div>
            <div class="right-top-button" @click="updateScreenType">
                {{fBtn?'退出':'全屏'}}
            </div>
            <div class="right-top-button" @click="ReturnPreviousStep" v-if="isDisplay != 1">
                <i class="el-icon-refresh-left" style="margin-right: 10px"></i>返回上一步
            </div>
        </div>
    </div>
</template>
<script>
    Vue.component('header-time', {
        name: "header-time",
        template: '#header-time',
        props: {
            isDisplay: {
                type: Number,
                default: null
            }
        },
        data() {
            return {
                time: "00:00",
                day: "星期几",
                timeSlot: "上午",
                date: "2021年7月23日",
                fBtn: 0,
            }
        },
        created(){

        },
        methods: {
            init() {
                this.time = this.formatTime()
                requestAnimationFrame(this.init)
            },
            ReturnPreviousStep() {
                window.history.back();
            },
            formatTime() {
                const time = new Date()
                const hours = time.getHours()
                const minutes = time.getMinutes()
                return `${this.supplement(hours)}:${this.supplement(minutes)}`
            },
            formatDay() {
                const xq = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
                const time = new Date()
                const day = time.getDay()
                return `${xq[day]}`
            },
            formatTimeSlot() {
                // 凌晨，上午，下午，晚上，半夜
                const formatObj = {
                    '24-5': '凌晨',
                    '6-9': '清晨',
                    '9-12': '上午',
                    '13-18': '下午',
                    '19-23': '晚上',
                }
                const time = new Date()
                const hours = time.getHours()
                let result = '上午'

                for (const key in formatObj) {
                    const min = key.split('-')[0]
                    const max = key.split('-')[1]
                    if (min <= hours && hours <= hours) {
                        result = formatObj[key]
                        continue
                    }
                }
                return `${result}`
            },
            formatDate() {
                const time = new Date()
                const year = time.getFullYear()
                const month = time.getMonth()
                const date = time.getDate()
                return `${year}年${this.supplement(month+1)}月${this.supplement(date)}日`
            },
            supplement(numebr) { // 一位的时候补充为0 - 只补充整数
                const str = String(numebr)
                return str.padStart(2, 0)
            },
            updateScreenType(){
                this.fBtn = this.fBtn?0:1;
                localStorage.setItem('fullScreen',this.fBtn);
                this.updateScreenDom();
            },
            updateScreenDom(){
                // document.getElementById("_aside").setAttribute("style","display: none;",)
                console.info(typeof this.fBtn);
                if(this.fBtn){
                    document.getElementById("_aside").style.display = 'none';
                    document.getElementById("_header").style.display = 'none';
                    document.getElementById("_aside_2").style.display = 'none';
                    // document.getElementById("_main").style.height = 'auto';
                } else {
                    document.getElementById("_aside").style.display = '';
                    document.getElementById("_header").style.display = '';
                    document.getElementById("_aside_2").style.display = '';
                }

                setTimeout(() => {
                    // 获取html可视区域高度：--这里需要按F5
                    let clientHeight = `${document.documentElement.clientHeight}`;
                    let mainHeight = clientHeight;
                    // 动态设置元素高度：
                    var main = document.getElementById('_main'); //获取元素存储在变量中
                    main.style.cssText = 'height: ' + mainHeight + 'px !important';
                }, 200);
                
            }
        },
        mounted() {
            // 下面三项不需要实时更新 - 第二天不更新问题
            this.day = this.formatDay()
            this.timeSlot = this.formatTimeSlot()
            this.date = this.formatDate()
            this.frameId = requestAnimationFrame(this.init)
            let typeData = localStorage.getItem('fullScreen');
            if(typeData){
                this.fBtn = Number(typeData);
            }
            this.updateScreenDom();
        },
        destroyed() {
            cancelAnimationFrame(this.frameId)
        },
    });

    window.addEventListener('resize', () => {
        setTimeout(() => {
            // 获取html可视区域高度：--这里需要按F5
            let clientHeight = `${document.documentElement.clientHeight}`;
            let mainHeight = clientHeight;
            // 动态设置元素高度：
            var main = document.getElementById('_main'); //获取元素存储在变量中
            main.style.cssText = 'height: ' + mainHeight + 'px !important';
        }, 50);
    });


</script>

<style>
    .right-top-button{
        border-radius: 12px;
        border: 2px solid #0034E4;
        font-size: 24px;
        color: #3865FC;
        padding: 9px 24px;
        margin-left: 18px;
    }
</style>