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

<template id="header-time">
    <div flex style="padding: 0 10px;">
        <div flex>
            <div class="right-top-button" @click="cockpitUrl.router">
                总裁驾驶舱
            </div>
        </div>
    </div>
</template>
<script>
    Vue.component('header-time', {
        name: "header-time",
        template: '#header-time',
        props: {
            display: {
                type: Number,
                default: null
            }
        },
        data() {
            return {
                time: "00:00",
                day: "星期几",
                timeSlot: "上午",
                localValue: this.display,
                date: "2021年7月23日",
                fBtn: 0,
                cockpitUrl: {
                    router: () => {
                        this.$navigate({r: "mall/data-census/driving-window",is_display: 2})
                    }
                }
            }
        },
        created(){
            
        },
        methods: {
            init() {
                this.time = this.formatTime()
                requestAnimationFrame(this.init)
            },
            jumpCockpit() {// 跳转驾驶舱
            },
            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;",)
                if(this.fBtn && this.display === 2){
                    document.getElementById("_aside").style.display = 'none';
                    document.getElementById("_header").style.display = 'none';
                    document.getElementById("_aside_2").style.display = 'none'
                    this.$emit('update:display',1)
                    // document.getElementById("_main").style.height = 'auto';
                } else {
                    document.getElementById("_aside").style.display = '';
                    document.getElementById("_header").style.display = '';
                    document.getElementById("_aside_2").style.display = ''
                    this.$emit('update:display',2)
                }
                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>