<template>
    <div class="container">
        <!-- 数据大屏内容展示区 -->
        <div class="screen">
            <!-- 数据大屏顶部 -->
            <div class="top">
                <screenTop />
            </div>
            <div class="bottom">
                <div class="left">
                    <leftChartOne class="leftChartOne"/>
                    <!-- <leftChartcenter class="leftChartcenter"/> -->
                    <rightChartcenter class="leftChartcenter"/>
                    <leftChartBottom class="leftChartBottom"/>
                </div>
                <div class="center">
                    <centerChartTop/>
                    <!-- <rightChartcenter class="centerChartTop"/> -->
                    <centerChartBottom/>
                </div>
                <div class="right">
                    <Tourist class="tourist"/>
                    <!-- <rightChartcenter class="rightChartcenter"/> -->
                    <rightChartcentertwo class="rightChartcenter"/>
                    <!-- <Tourist class="tourist"/> -->
                    <rightChartTop class="rightChartTop"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import screenTop from './dataScreen/screenTop.vue'
import Tourist from './dataScreen/Tourist.vue'
import rightChartcenter from './dataScreen/rightChartcenter.vue'
import leftChartOne from './dataScreen/leftChartOne.vue'
import centerChartBottom from './dataScreen/centerChartBottom.vue'
import rightChartTop from './dataScreen/rightChartTop.vue'
import leftChartBottom from './dataScreen/leftChartBottom.vue'
import leftChartcenter from './dataScreen/leftChartcenter.vue'
import centerChartTop from './dataScreen/centerChartTop.vue'
import rightChartcentertwo from './dataScreen/rightChartcentertwo.vue'
export default {
    name: 'Datascreen',
    components: { screenTop, Tourist, leftChartOne, rightChartcenter, centerChartBottom, rightChartTop, leftChartBottom, leftChartcenter, centerChartTop, rightChartcentertwo },
    data() {
        return {

        }
    },
    created() {
        // if (document.documentElement.clientWidth < 1080) {
        //     this.colNumOne = 24
        //     this.colNum = 24
        // } else {
        //     this.colNumOne = 12
        //     this.colNum = 8
        // }
    },
    methods: {

    },
    mounted() {
        // let full = document.fullscreenElement;
        // //切换为全屏模式
        // if (!full) {
        //     //文档根节点的方法requestFullscreen,实现全屏模式
        //     document.documentElement.requestFullscreen();
        // }
        // window.onresize = () => {
        //     return (() => {
        //         if (document.documentElement.clientWidth < 1080) {
        //             this.colNumOne = 24
        //             this.colNum = 24
        //         } else {
        //             this.colNumOne = 12
        //             this.colNum = 8
        //         }
        //     })()
        // }
    }
}
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    /* width: 100vw;
    height: 100vh; */
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    border: none;
    /* background-color: rgb(231 238 241); */
    background: url('../assets/img/beijingtu24.jpg') no-repeat;
    background-size: cover;
}

.screen {
    width: 100%;
    margin: 0 auto;
}

.top {
    width: 100%;
    height: 50px;
    margin: 10px auto;
}

.bottom {
    display: flex;
}

.left {
    flex: 1;
    display: flex;
    /* height: 844px; */
    flex-direction: column;
}
.center{
    flex: 1.5;
    padding: 0 10px 50px 10px;
    display: flex;
    flex-direction: column;
}
.right{
    flex: 1;
    display: flex;
    /* height: 844px; */
    padding-top: 10px;
    flex-direction: column;
}
.rightChartcenter{
    flex: 1;
}
.leftChartcenter{
    flex: 1;
}
.centerChartTop{
    flex: 1;
}
/* .leftChartOne,.leftChartBottom{
    flex: 1.5;
} */
</style>