jili2-screen/src/apps/home/components/screen-tem11.vue

<template>
    <div class="page">
        <div class="header">
            <div class="header-box">
                <div class="header-left">
                    <span>{{day}}</span>
                    <span>{{time}}</span>
                    <span>{{week}}</span>
                </div>
                <div class="title">{{data.title}}</div>
                <div class="header-right">
                    系统已运行{{yxDay}}天
                </div>

            </div>

        </div>
        <div class="main">
            <div class="main-box main-box1">
                <div class="one">
                    <screen-module :data="data" style="width: 100%;height: 100%;" :cid="1"  />
                </div>
                <div class="two">
                    <screen-module :data="data" :cid="2"  />
                </div>
            </div>
            <div class="main-box main-box2">
                <div class="there">
                    <screen-module :data="data" :cid="3"  />
                </div>
                <div class="fore">
                    <screen-module :data="data" :cid="4"  />
                </div>
            </div>
            <div class="main-box main-box3">
                <div class="five">
                    <screen-module :data="data" :cid="5"  />
                </div>
                <div class="six">
                    <screen-module :data="data" :cid="6"  />
                </div>
            </div>
            <div class="main-box main-box4">
                <screen-module :data="data" :cid="7"  />
            </div>
            <div class="main-box main-box5">
                <screen-module :data="data" :cid="8"  />
            </div>
            <div class="main-box main-box6">
                <screen-module :data="data" :cid="9"  />
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import ScreenModule from '@/apps/home/components/screen-module.vue';

@Component({
    props: {
        data: {
            type: Object,
            default: null,
        },
    },
    components: {
        ScreenModule,
    },
})
export default class Echarts extends Vue {
    week = '';

    day = '';

    time = '';

    yxDay = '';

    created() {
        this.realSysTime();
        setInterval(() => {
            this.realSysTime();
        }, 1000);
    }

    realSysTime() {
        const now = new Date();
        const year = now.getFullYear(); // 获取年份
        let month = now.getMonth(); // 获取月份
        let date = now.getDate(); // 获取日期
        const day = now.getDay(); // 获取星期
        let hour = now.getHours(); // 获取小时
        let minute = now.getMinutes(); // 获取分钟
        let seconds = now.getSeconds(); // 获取秒
        month += 1;
        const arrWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        this.week = arrWeek[day];
        if (month < 10) {
            month = `0${month}`;
        }
        if (date < 10) {
            date = `0${date}`;
        }
        if (hour < 10) {
            hour = `0${hour}`;
        }
        if (minute < 10) {
            minute = `0${minute}`;
        }
        if (seconds < 10) {
            seconds = `0${seconds}`;
        }
        this.day = `${year}年${month}月${date}日`;
        this.time = `${hour}:${minute}:${seconds}`;

        const dateTime = '2024-06-01'; // 系统运行开始日期
        const curDateTime = `${year}-${month}-${date}`;

        const curDay = (new Date(curDateTime).getTime() - new Date(dateTime).getTime()) / 86400 / 1000;
        this.yxDay = curDay.toFixed(0);
    }
}
</script>

<style scoped lang="scss">
    .page{
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #14111f;
        overflow: hidden;
        background-image: url(../images/screen-tem11/bg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
    }
    .header{
        width: 100%;
        height: 7.2vh;
        position: relative;
        color: #ffffff;
        background-image: url(../images/screen-tem11/header.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .header-box{
        height: 7.2vh;
        line-height: 7.2vh;
        font-size: 22px;
    }
    .header-box .header-left{
        width: 27.6vw;
        height: 7.2vh;
        line-height: 7.2vh;
        display: inline-block;
        text-align: right;
    }
    .header-box .header-left span{
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        margin-left: 1vw;
    }
    .header-box .title{
        width: 44.8vw;
        height: 7.2vh;
        line-height: 7.2vh;
        display: inline-block;
        text-align: center;
        font-size: 32px;
        font-family: Source Han Sans CN;
        font-weight: 800;
        color: #FFFFFF;
    }
    .header-right{
        width: 27.6vw;
        height: 7.2vh;
        line-height: 7.2vh;
        display: inline-block;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
    }
    .main{
        height: 90vh;
        margin-top: 1.8vh;
    }
    .main .main-box{
        display: inline-block;
        float: left;
        position: relative;
    }
    .main .main-box1{
        width: 29.7vw;
        height: 53vh;
        margin: 0 1vw;
    }
    .main .main-box1 .one{
        width: 100%;
        height: 49%;
        background-image: url(../images/screen-tem11/one.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 2%;
        position: relative;
    }
    .main .main-box1 .two{
        width: 100%;
        height: 49%;
        background-image: url(../images/screen-tem11/one.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .main .main-box2{
        width: 36.4vw;
        height: 53vh;
    }

    .main .main-box2 .there{
        width: 100%;
        height: 22.5%;
        background-image: url(../images/screen-tem11/there.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 2%;
        position: relative;
    }
    .main .main-box2 .fore{
        width: 100%;
        height: 75.5%;
        position: relative;
        /* background-image: url(../images/screen-tem11/one.png);
        background-repeat: no-repeat;
        background-size: 100% 100%; */
    }

    .main .main-box3{
        width: 29.7vw;
        height: 53vh;
        margin: 0 1vw;
    }
    .main .main-box3 .five{
        width: 100%;
        height: 49%;
        background-image: url(../images/screen-tem11/one.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 2%;
        position: relative;
    }
    .main .main-box3 .six{
        width: 100%;
        height: 49%;
        background-image: url(../images/screen-tem11/one.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .main-box4{
        width: 23.7vw;
        height: 34.5vh;
        background-image: url(../images/screen-tem11/seven.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0 0.2vw 0 1vw;
        margin-top: 1.5vh;
    }

    .main-box5{
        width: 47.5vw;
        height: 34.5vh;
        background-image: url(../images/screen-tem11/eight.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 1.5vh;
    }

    .main-box6{
        // width: 25.7vw;
        width: 26.3vw;
        height: 34.5vh;
        background-image: url(../images/screen-tem11/nine.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0 1vw 0 0.2vw;
        margin-top: 1.5vh;
    }
</style>