<template>
    <div class="list-view">
        <div class="background-overlay"></div>
        <div class="container">
            <!-- 头栏 -->
            <div class="header">
                <div class="title-left">
                    <div small-bg>
                        <dv-decoration8 :reverse="true" style="width:28vw;height:60px;" />
                    </div>
                    <div small-bg>
                        <dv-decoration3 style="width:250px;height:30px;" />
                    </div>
                </div>

                <div class="line-title">
                    <div text-2xl pt10>
                        <div small-bg>
                            <dv-decoration-11 class="custom-decoration" style="width:25vw;height:70px;">
                                <div color-green font-700 bg="~ dark/0">
                                    <dv-decoration7 style="width:20vw;height:30px;">
                                        <div color-white font-400 >
                                            &nbsp;告警数据面板&nbsp;
                                        </div>
                                    </dv-decoration7>
                                </div>
                            </dv-decoration-11>
                        </div>
                    </div>
                    <div small-bg>
                        <dv-decoration5 :dur="2" style="width:25vw;height:80px;" />
                    </div>
                </div>

                <div class="title-right">
                    <div small-bg class="first-row">
                        <dv-decoration8 style="width:28vw;height:60px;" />
                    </div>
                    <div small-bg class="second-row">
                        <dv-decoration3 style="width:250px;height:30px;" />
                    </div>
                </div>
            </div>

            <div class="main-section">
                <!-- 左侧区域 -->
                <div class="left-section">
                    <!-- <div class="section top-left corner-style" >左上
                        <div class="section hiden"></div>
                    </div>
                    <div class="section middle-left corner-style">左中
                        <div class="section hiden"></div>
                    </div>
                    <div class="section bottom-left corner-style">左下
                        <div class="section hiden"></div>
                    </div> -->
                    <dv-border-box-13 title="告警数据概览（数据计算数字）" class="section top-left">
                        <LeftTop />
                    </dv-border-box-13>
                    <dv-border-box-13 title="点位告警数量（不同点位的数量）" class="section middle-left">不同点位告警的数量
                        <LeftMiddle/>
                    </dv-border-box-13>
                    <!-- <dv-border-box-13 title="今日告警列表（告警详情）" class="section bottom-left ">今日告警列表（告警详情）
                        
                    </dv-border-box-13> -->
                </div>

                <!-- 中部区域 -->
                <div class="center-section">
                    <dv-border-box8 class="center-top">
                        <CenterTop/>
                        <!-- <dv-border-box8 class="center-top-header">警戒画面</dv-border-box8>
                        <div class="center-top-grids">
                            <div class="grid-item">栅格左上</div>
                            <div class="grid-item">栅格右上</div>
                            <div class="grid-item">栅格左下</div>
                            <div class="grid-item">栅格右下</div>
                        </div> -->
                    </dv-border-box8>
                    <div class="center-bottom">
                        <!-- <dv-border-box-13 class="center-bottom-left">中下左</dv-border-box-13> -->
                        <dv-border-box-13 class="center-bottom-right">告警数量分布情况
                            <CenterBottom/>
                        </dv-border-box-13>
                    </div>
                </div>

                <!-- 右侧区域 -->
                <div class="right-section">
                    <dv-border-box-13 class="section top-right corner-style">时间段告警总数分布
                        <RightTop/>
                    </dv-border-box-13>
                    <!-- <dv-border-box-13 class="section middle-right corner-style">告警数量分布</dv-border-box-13> -->
                    <dv-border-box-13 class="section bottom-right corner-style">告警种类划分
                        <LeftBottom/>
                    </dv-border-box-13>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, computed } from 'vue';
import { BoxApi } from '@/utils/boxApi.ts';
import { VideoPlay, VideoPause, VideoCameraFilled } from '@element-plus/icons-vue';
import  LeftTop from '@/components/Max/LeftTop.vue';
import  LeftBottom from '@/components/Max/LeftBottom.vue';
import  LeftMiddle from '@/components/Max/LeftMiddle.vue';
import  RightTop from '@/components/Max/RightTop.vue';
import  CenterBottom from '@/components/Max/CenterBottom.vue';
import  CenterTop from '@/components/Max/CenterTop.vue';
// import '/src/assets/viewListStyle.css'

</script>

<style scoped>
.list-view {
    display: flex;
    justify-content: center;
    margin: 0;
    height: 100vh;
    width: 100vw;
    padding: 4vh 10vw 10vh 7vw;
    /* background-color: rgb(121, 184, 243); */
    background-color: #001529;
    /* background-image: url('/bg05.png');  */
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    /* background: radial-gradient(circle, rgb(24, 64, 197), rgb(0, 7, 60)); */
    position: relative;
    color: black;
    box-sizing: border-box;
}

.custom-decoration{
    color: #70e5fa;; 
    font-weight: bold;
    font-size: 25px;
}


/* .background-overlay {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/bg01.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    z-index: 0;

} */

.container {
    display: flex;
    flex-direction: column;
    width: 80vw;
    height: 100%;
    gap: 1vh;
    position: relative;
    /* 为了在背景下显示 */
    z-index: 1;
}

.header {
    height: 12vh;
    width: 81vw;
    /* background-color: #000080; */
    color: white;
    text-align: center;
    line-height: 12vh;
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}

.line-title {
    display: flex;
    flex-direction: column;
    /* gap: 2vh; */
}

.title-left {
    display: flex;
    flex-direction: column;
}

.title-right {
    display: flex;
    flex-direction: column; /* 设置为垂直布局 */
}

.first-row {
    display: flex;
    justify-content: flex-start; /* 第一行内容靠左 */
}

.second-row {
    display: flex;
    justify-content: flex-end; /* 第二行内容靠右 */

}

.main-section {
    height: 72vh;
    display: flex;
    flex-direction: row;
    gap: 1vw;
}

.left-section,
.right-section {
    display: flex;
    flex-direction: column;
    width: 22vw;
    height: 70vh;
    gap: 2vh;

}



.bottom-left,
.top-right,
/* .middle-right, */
.bottom-right {
    color: white;
    text-align: center;
    width: 22vw;
    height: 22vh;
    /* background-color: rgba(255, 255, 255, 0.1); */
    /* border: 3px solid rgba(0, 255, 255, 0.5); */
    /* box-shadow: 0 2px 5px rgba(221, 204, 204, 0.5); */
}

.top-left{
    position: relative;
    padding: 1vh 1vw;
    display: flex;
    justify-content: center;  
    align-items: center;  
    flex-grow: 1;
    width: 20vw; 
    height: 20vh;  
}

.middle-left{
    color: white;
    text-align: center;
    width: 22vw;
    height: 46vh;
    display: flex;
}

.top-right{
    width: 22vw;
    height: 46vh;
    display: flex;
    /* padding: 1.5vh; */
}

.bottom-left{
    /* color: white; */
    /* position: relative; */
    padding-left: 0.5vw;
    display: flex;
    /* justify-content: center;   */
    /* align-items: center;  */
    /* width: 20vw; */
    /* height: 20vh;   */
}

/* .top-left, .top-right {
    margin-bottom: 1vh; 
}


.bottom-left, .bottom-right {
    margin-top: 1vh;
} */

.center-section {
    display: flex;
    flex-direction: column;
    width: 35vw;
    height: 70vh;
    gap: 1vh;
}

.center-top {
    height: 47vh;
    /* background-color: #555; */
    color: white;
    display: flex;
    flex-direction: column;
}

/* .center-top-header {
    height: 3vh;
    width: 35vw;
    text-align: center;
    line-height: 3vh;
    margin-bottom: 1vh;
    border-radius: 3px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.center-top-grids {
    display: grid;
    grid-template-columns: 17vw 17vw;
    gap: 2vh 1vw;
}
.grid-item {
    width: 17vw;
    height: 20vh;
    background-color: #777;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
} */

.center-bottom {
    display: flex;
    gap: 1vw;
    flex-direction: row;
}

.center-bottom-left,
.center-bottom-right {
    width: 35vw;
    height: 22vh;
    /* background-color: #444; */
    color: white;
    text-align: center;
    /* margin-top: 1vh; */
}
</style>
