<template>
    <div class="contents">
        <div class="contetn_left">
            <!--        <div class="pagetab">-->
            <!--            <dv-decoration-12 style="width:30px;height:30px;" />-->
            <!--            <div class="item">实时监测数据</div>-->
            <!--        </div>-->
            <ItemWrap class="contetn_left-top contetn_lr-item" title="设备实时状态">
                <LeftTop/>
            </ItemWrap>
            <ItemWrap class="contetn_left-center contetn_lr-item" title="24小时告警态势">
                <LeftCenter/>
            </ItemWrap>
            <ItemWrap class="contetn_left-bottom contetn_lr-item" title="历史告警分布【Top5】"
                      style="padding: 0 10px 16px 10px">
                <LeftBottom/>
            </ItemWrap>
        </div>
        <div class="contetn_center">
            <div style="height: 800px;">
                <CenterMap class="contetn_center_top"/>
            </div>
            <!-- <div class="button-container">
                <button class="button" @mouseover="hover = true" @mouseleave="hover = false" @click="changePage('home')">数据大屏</button>
                <button class="button" @mouseover="hover = true" @mouseleave="hover = false" @click="changePage('gjzx')">实时监控</button>
                <button class="button" @mouseover="hover = true" @mouseleave="hover = false" @click="changePage('ssjc')">告警中心</button>
                <button class="button" @mouseover="hover = true" @mouseleave="hover = false" @click="changePage('bbgl')">报表管理</button>
            </div> -->
        </div>
        <div class="contetn_right">
            <ItemWrap class="contetn_left-bottom contetn_lr-item" title="当天告警等级统计">
                <RightTop/>
            </ItemWrap>
            <ItemWrap class="contetn_left-bottom contetn_lr-item" title="告警处理状态" style="padding: 0 10px 16px 10px">
                <RightCenter/>
            </ItemWrap>
            <ItemWrap class="contetn_left-bottom contetn_lr-item" title="设备提醒 ">
                <RightBottom/>
            </ItemWrap>
        </div>
    </div>
</template>

<script>
import LeftTop from './left-top.vue';
import LeftCenter from './left-center.vue';
import LeftBottom from './left-bottom.vue';
import CenterMap from './center-map.vue';
import CenterBottom from './center-bottom.vue';
import RightTop from './right-top.vue';
import RightCenter from './right-center.vue';
import RightBottom from './right-bottom.vue';
import bottomImg from './bottom-img.vue';

export default {
    components: {
        LeftTop,
        LeftCenter,
        LeftBottom,
        CenterMap,
        RightTop,
        RightCenter,
        RightBottom,
        CenterBottom,
        bottomImg,
    },
    data() {
        return {};
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    created() {
    },

    mounted() {
    },
    methods: {
        changePage(pageName) {
            this.$router.push({
                path: '/Ping/bigScreen/' + pageName,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
// 内容
.contents {
    .contetn_left,
    .contetn_right {
        width: 500px;
        box-sizing: border-box;
    }

    .contetn_center {
        width: 800px;
    }

    //左右两侧 三个块
    .contetn_lr-item {
        height: 310px;
    }

    .contetn_center_top {
        width: 100%;
    }

    // 中间
    .contetn_center {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .contetn_center-bottom {
        height: 255px;
    }

    //左边 右边 结构一样
    .contetn_left,
    .contetn_right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;

    }
}

@keyframes rotating {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }

    50% {
        -webkit-transform: rotate(180deg) scale(1.1);
        transform: rotate(180deg) scale(1.1);
    }

    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}

.button-container {
    //margin-top: 200px;
    width: 800px;
    position: relative;
    bottom: 100px;
    display: flex;
    justify-content: space-between; /* 水平对齐 */
}

.button {
    width: 57px;
    height: 60px;
    background-color: transparent;
    background-image: url('../../../assets/bigScreen/img/底部tab未选择.png');
    background-position: 50% 25%;
    background-size: 100%, 100%; /* 使背景图片完全覆盖按钮，保持比例 */
    background-repeat: no-repeat; /* 背景图片不重复 */

    -ms-flex-negative: 0;
    flex-shrink: 0;
    border: none; /* 去掉边框 */
    color: #76F1FF; /* 默认字体颜色为蓝色 */
    padding: 10px 20px; /* 按钮内边距 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    transition: color 0.3s; /* 颜色变化过渡效果 */
}

.button:hover {
    background-image: url('../../../assets/bigScreen/img/按钮未选中.png');
    height: 50px;
    color: white; /* 鼠标悬停时字体颜色为白色 */
}


</style>
