<template>
    <div style="width: 100vw;height: 100%vh;background: rgb(247, 247, 247);">
        <div class="intellect">
            <div class="intellect-top">
                <div class="in-top-l">
                    <span>视频设备</span>
                    <div class="top-l">
                        <div class="topl active">
                            <span>出入口相机</span>
                            <img src="../../assets/img/live-fill.png" alt="" >
                        </div>
                        <div class="topl active">
                            <span>储罐区摄像机</span>
                            <img src="../../assets/img/live-fill.png" alt="" >
                        </div>
                        <div class="topl active">
                            <span>化工罐区摄像机</span>
                            <img src="../../assets/img/live-fill.png" alt="" >
                        </div>
                        <div class="topl active">
                            <span>危险作业区摄像机</span>
                            <img src="../../assets/img/live-fill.png" alt="" >
                        </div>
                        <div class="topl active">
                            <span>库区摄像机</span>
                            <img src="../../assets/img/live-fill.png" alt="" >
                        </div>
                        <div class="topl active">
                            <span>危险作业区摄像机</span>
                            <img src="../../assets/img/live-fill.png" alt="" >
                        </div>
                        <div class="topl active">
                            <span>中控值班室摄像机</span>
                            <img src="../../assets/img/live-fill.png" alt="" >
                        </div>
                        <div class="topl active">
                            <span>中控重点工位摄像机</span>
                            <img src="../../assets/img/live-fill.png" alt="" >
                        </div>
                        <div class="topl active">
                            <span>巡检点摄像机</span>
                            <img src="../../assets/img/live-fill.png" alt="" >
                        </div>
                    </div>
                    
                    
                </div>
                <div class="in-top-c">
                    <div style="height: 5%;padding: 6px;">
                        <el-dropdown  trigger="click">
                          <span class="el-dropdown-link">
                            <img src="@/assets/img/spilt.png" alt="spilt" style="width: 15px;height: 15px">
                            分屏设置
                          </span>
                          <el-dropdown-menu slot="dropdown" style="width:100px">
                            <el-dropdown-item command="1">1x1 </el-dropdown-item>
                            <el-dropdown-item command="4">2x2</el-dropdown-item>
                            <el-dropdown-item command="9">3x3</el-dropdown-item>
                            <el-dropdown-item command="16">4x4</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                    </div> 
                    <div style="height: 95%;width: 100%;" ref="playVideo" class="video">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                      </div>
                </div>
                <div class="in-top-r">
                    <div class="top-r-t">
                        <div class="ent-ru-in">
                            <div class="ru-in-l">
                                <img src="../../assets/img/zhan.png" alt="">
                            </div>
                            <div class="ru-in-r">
                                <span>最新预警</span>
                                <div>2022-10-22 20:20:20</div>
                            </div>
                        </div>
                        <div class="rt-b">
                            <span> 预警：</span>
                            <div>
                                储罐区有火焰从原料罐冒出，目前有溢出风险
                            </div>
                        </div>
                        <div class="intellect-btn">
                            <el-button class="but">查看实时视频</el-button>
                        </div>
                    </div>
                    <div class="top-r-b">
                        <div class="r-b-l">
                            <img src="../../assets/img/up.png" alt="" width="50px">
                            <div>预警统计</div>
                        </div>
                        <div class="ent-ruchang">
                            <div class="ent-ru-in">
                                <div class="ru-in-l">
                                    <img src="../../assets/img/down.png" alt="">
                                </div>
                                <div class="ru-in-r">
                                    <span>日累积预警</span>
                                    <div>0</div>
                                </div>
                            </div>
                            <div class="ent-ru-in">
                                <div class="ru-in-l">
                                    <img src="../../assets/img/down1.png" alt="">
                                </div>
                                <div class="ru-in-r">
                                    <span>月累积预警</span>
                                    <div>0</div>
                                </div>
                            </div>
                            <div class="ent-ru-in">
                                <div class="ru-in-l">
                                    <img src="../../assets/img/down2.png" alt="">
                                </div>
                                <div class="ru-in-r">
                                    <span>年累积预警</span>
                                    <div>0</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="intellect-bottom">
                <p>园区内车辆</p>
                <div class="ent-yuanqu">
                    <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="date"
                        label="预警信息">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="预警类型">
                    </el-table-column>
                    <el-table-column
                        prop="address1"
                        label="预警开始时间">
                    </el-table-column>
                    <el-table-column
                        prop="address2"
                        label="预警结束时间">
                    </el-table-column>
                    <el-table-column
                        prop="end"
                        label="结果">
                    </el-table-column>
                    <el-table-column
                        prop="video"
                        label="视频">
                        <template slot-scope="scope">
                                <img class="demo" :src="require(`../../assets/img/live-fill.png`)" />
                        </template>
                    </el-table-column>
                    </el-table>
                    <el-pagination
                        layout="prev, pager, next"
                        :total="1000">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import livefill from "../../assets/img/live-fill.png";
    export default {
        data() {
            return {
                tableData: [
                    { date: '储罐区有火焰产生',name: '火焰',address1: '2022-10-15 12:00:00',address2: '2022-10-15 12:00:00',end: '未处理',video:''},
                    { date: '进入人员未佩戴安全头盔',name: '未佩戴安全头盔',address1: '2022-10-15 12:00:00',address2: '2022-10-15 12:00:00',end: '未处理',video:''},
                    { date: '储罐区有设备预警',name: '设备预警',address1: '2022-10-15 12:00:00',address2: '2022-10-15 12:00:00',end: '未处理',video:''},
                    { date: '储罐区有设备预警',name: '设备预警',address1: '2022-10-15 12:00:00',address2: '2022-10-15 12:00:00',end: '未处理',video:''},
                ]
            }
        },
        computed:{
        },
    };
</script>
<style lang="scss" scoped>
.intellect{
    width: calc(100vw - 280px);
    height: calc(100vh - 50px);
    padding: 30px;
    .intellect-top{
        width: 100%;
        height: 60%;
        display: flex;
        justify-content: space-between;
        .in-top-l{
            width: 15%;
            height: 100%;
            background-color: #fff;
            border-radius: 15px;
            padding: 20px;
            .top-l{
                width: 100%;
                height: 95%;
                margin-top: 10px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-around;
                .topl{
                    width: 100%;
                    height: 40px;
                    line-height: 30px;
                    display: flex;
                    justify-content: space-between;
                    padding: 5px 10px;
                    border: 1px solid rgb(235, 232, 232);
                    border-radius: 10px;
                    background-color: #fff;
                    font-size: 14px;
                    img{
                        width: 20px;
                        height: 20px;
                        margin-top: 5px;
                    }
                }
            }
            
        }
        .in-top-c{
            width: 62%;
            height: 100%;
            .video{
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                flex-wrap: wrap;
                div{
                    width: 48%;
                    height: 48%;
                    background-color: rgb(69, 70, 70);
                }
            }
        }
        .in-top-r{
            width: 20%;
            height: 100%;
            .top-r-t{
                width: 100%;
                height: 36%;
                border-radius: 15px;
                background-color: #fff;
                padding: 10px 20px 0 20px;
                .ent-ru-in{
                    width: 100%;
                    /* height: 30%; */
                    display: flex;
                    .ru-in-l{
                        width: 45px;
                        height: 45px;
                        text-align: center;
                        margin-top: 10px;
                        img{
                            width: 100%;
                        }
                    }
                    .ru-in-r{
                        padding: 10px 0 0 10px;
                        span{
                            font-size: 15px;
                        }
                        div{
                            font-size: 12px;
                            margin-top: 7px;
                        }
                    }
                }
                .rt-b{
                    margin-left: 50px;
                    display: flex;
                    font-size: 13px;
                    margin-top: 10px;
                    div{
                        width: 75%;
                        height: auto;
                    }
                }
                .intellect-btn{
                    width: 100%;
                    text-align: center;
                    margin-top: 15px;
                    .but{
                        border-radius: 10px;
                        background-color: #51be5f;
                        color: #fff;
                    }
                }
            }
            .top-r-b{
                width: 100%;
                height: 60%;
                margin-top: 6%;
                background-color: #fff;
                border-radius: 15px;
                padding: 20px 20px 0 20px;
                .r-b-l{
                    width: 100%;
                    height: 50px;
                    display: flex;
                    div{
                        width: 150px;
                        height: 50px;
                        line-height: 50px;
                        margin-left: 10px;
                        font-size: 16px;
                    }
                    img{
                        width: 45px;
                        height: 45px;
                    }
                }
                .ent-ruchang{
                    width: 100%;
                    height: 80%;
                    padding-top: 10px;
                    .ent-ru-in{
                        width: 70%;
                        height: 30%;
                        display: flex;
                        margin-top: 2%;
                        margin-left: 20%;
                        .ru-in-l{
                            width: 50px;
                            height: 50px;
                            line-height: 55px;
                            text-align: center;
                            margin-top: 10px;
                            img{
                                width: 100%;
                            }
                        }
                        .ru-in-r{
                            padding: 7px 0 0 10px;
                            span{
                                font-size: 13px;
                            }
                            div{
                                font-size: 22px;
                                margin-top: 7px;
                            }
                        }
                    }
                }
            }
        }
    }
    .intellect-bottom{
        width: 100%;
        height: 38%;
        margin-top: 1.5%;
        background-color: #fff;
        border-radius: 15px;
        padding: 10px 20px 20px 20px;
        .ent-yuanqu{
                width: 100%;
                height: 95%;
                text-align: center;
            }
    }
}
::v-deep .el-table th > .cell {
    text-align: center;
}
::v-deep .el-table tr td .cell {
    text-align: center;
}
</style>