<template>
    <div class="container">
      <BoardTopNav nowMenu="2"></BoardTopNav>
        <div class="num1">30</div>
        <div class="num2">216</div>
        <div class="num3">0</div>
        <div class="num4">0</div>
        <div class="num5">0</div>
        <div class="num6">0</div>
        <div class="num7">0</div>
        <div class="num8">0</div>
        <div class="title1">监控单元</div>
        <div class="title2">传感器</div>
        <div class="title3">设备高温</div>
        <div class="title4">设备振动</div>
        <div class="title5">烟雾火情</div>
        <div class="title6">环境大风</div>
        <div class="title7">柜内温度</div>
        <div class="title8">柜内冰浸</div>
        <div class="title9">告警信息</div>
        <div class="title10">监控单元</div>

        <div class="table1">
            <div style="background-color: #094170">
                <div class="scrollTable" style="font-weight: bold;width: 8%">
                    告警编号
                </div>
                <div class="scrollTable" style="font-weight: bold;width: 8%">
                    告警类型
                </div>
                <div class="scrollTable" style="font-weight: bold;width: 15%">
                    告警单元
                </div>
                <div class="scrollTable" style="font-weight: bold;width: 30%">
                    告警信息
                </div>
                <div class="scrollTable" style="font-weight: bold;width: 11%">
                    告警位置
                </div>
                <div class="scrollTable" style="font-weight: bold;width: 20%">
                    告警时间
                </div>
                <div class="scrollTable" style="font-weight: bold;width: 8%">
                    处理情况
                </div>
            </div>
            <vue-seamless-scroll :class-option="chart1TableOption" :data="table1Data" class="case-item"
                style="height: calc(100% - 33px);overflow: hidden;">
                <div v-for="(item, index) in table1Data" :key="index">
                    <div :style='"background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'>
                        <div class="scrollTable" style="width: 8%">
                            {{ item.data1 }}
                        </div>
                        <div class="scrollTable" style="width: 8%">
                            {{ item.data2 }}
                        </div>
                        <div class="scrollTable" style="width: 15%">
                            {{ item.data3 }}
                        </div>
                        <div class="scrollTable" style="width: 30%">
                            {{ item.data4 }}
                        </div>
                        <div class="scrollTable" style="width: 11%">
                            {{ item.data5 }}
                        </div>
                        <div class="scrollTable" style="width: 20%">
                            {{ item.data6 }}
                        </div>
                        <div class="scrollTable" style="width: 8%">
                            <span style="color: #67C23A;">已处理</span>
                        </div>
                    </div>
                </div>
            </vue-seamless-scroll>
        </div>
        <div class="right">
            <el-row>
                <el-col :span="12">
                    <div class="item">
                        <div class="titleBg"></div>
                        <div class="title">
                            <span style="margin-right: 28px;"> 变压器 </span>
                            <el-tag type="success">正常</el-tag>
                        </div>
                        <div class="img"></div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="item">
                        <div class="titleBg"></div>
                        <div class="title">
                            <span style="margin-right: 28px;"> 变压器 </span>
                            <el-tag type="success">正常</el-tag>
                        </div>
                        <div class="img"></div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="item">
                        <div class="titleBg"></div>
                        <div class="title">
                            <span style="margin-right: 28px;"> 变压器 </span>
                            <el-tag type="success">正常</el-tag>
                        </div>
                        <div class="img"></div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="item">
                        <div class="titleBg"></div>
                        <div class="title">
                            <span style="margin-right: 28px;"> 变压器 </span>
                            <el-tag type="success">正常</el-tag>
                        </div>
                        <div class="img"></div>
                    </div>
                </el-col>
            </el-row>
            <div class="pagination">
                <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import BoardTopNav from '@/components/BoardTopNav'

export default {
    components: {
        vueSeamlessScroll,
      BoardTopNav
    },
    data() {
        return {
            table1Data: [
                {
                    data1: '001',
                    data2: '越限',
                    data3: '123123',
                    data4: '无线检测 检测值为 21° - 25°',
                    data5: '设备11233',
                    data6: '2021.01.01 00:00:00',
                },
                {
                    data1: '001',
                    data2: '越限',
                    data3: '123123',
                    data4: '无线检测 检测值为 21° - 25°',
                    data5: '设备11233',
                    data6: '2021.01.01 00:00:00',
                },
                {
                    data1: '001',
                    data2: '越限',
                    data3: '123123',
                    data4: '无线检测 检测值为 21° - 25°',
                    data5: '设备11233',
                    data6: '2021.01.01 00:00:00',
                },
                {
                    data1: '001',
                    data2: '越限',
                    data3: '123123',
                    data4: '无线检测 检测值为 21° - 25°',
                    data5: '设备11233',
                    data6: '2021.01.01 00:00:00',
                },
                {
                    data1: '001',
                    data2: '越限',
                    data3: '123123',
                    data4: '无线检测 检测值为 21° - 25°',
                    data5: '设备11233',
                    data6: '2021.01.01 00:00:00',
                },
                {
                    data1: '001',
                    data2: '越限',
                    data3: '123123',
                    data4: '无线检测 检测值为 21° - 25°',
                    data5: '设备11233',
                    data6: '2021.01.01 00:00:00',
                },
                {
                    data1: '001',
                    data2: '越限',
                    data3: '123123',
                    data4: '无线检测 检测值为 21° - 25°',
                    data5: '设备11233',
                    data6: '2021.01.01 00:00:00',
                },
                {
                    data1: '001',
                    data2: '越限',
                    data3: '123123',
                    data4: '无线检测 检测值为 21° - 25°',
                    data5: '设备11233',
                    data6: '2021.01.01 00:00:00',
                },
                {
                    data1: '001',
                    data2: '越限',
                    data3: '123123',
                    data4: '无线检测 检测值为 21° - 25°',
                    data5: '设备11233',
                    data6: '2021.01.01 00:00:00',
                },
                {
                    data1: '001',
                    data2: '越限',
                    data3: '123123',
                    data4: '无线检测 检测值为 21° - 25°',
                    data5: '设备11233',
                    data6: '2021.01.01 00:00:00',
                },
                {
                    data1: '001',
                    data2: '越限',
                    data3: '123123',
                    data4: '无线检测 检测值为 21° - 25°',
                    data5: '设备11233',
                    data6: '2021.01.01 00:00:00',
                },
            ]
        }
    },
    mounted() {
    },
    methods: {}
};
</script>
<style lang="less" scoped>
.container {
    background-image: url("~@/assets/board/smartScene/bg.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: calc(100vh);
    position: relative;
}

.menu {
    background-image: url("~@/assets/board/common/subheadClick1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    width: 8vw;
    height: 1.66vw;
    top: 3.8%;
    line-height: 1.66vw;
    font-size: 0.8vw;
    color: #d4d4d4;
    text-align: center;
}

.menu .el-dropdown {
    font-size: 0.8vw;
    color: #d4d4d4;
}

.menuClick {
    background-image: url("~@/assets/board/common/subheadClick.png");
    color: #f3f3f3;
}

.num1 {
    position: absolute;
    top: 21%;
    left: 18%;
    transform: translate(-50%, -50%);
    font-size: 3vw;
    color: #15d654;
}

.num2 {
    position: absolute;
    top: 21%;
    left: 33%;
    transform: translate(-50%, -50%);
    font-size: 3vw;
    color: #00fff0;
}

.num3 {
    position: absolute;
    top: 52%;
    left: 7.5%;
    transform: translate(-50%, -50%);
    font-size: 2vw;
    color: #d73827;
}

.num4 {
    position: absolute;
    top: 52%;
    left: 15%;
    transform: translate(-50%, -50%);
    font-size: 2vw;
    color: #1ef16d;
}

.num5 {
    position: absolute;
    top: 52%;
    left: 22.5%;
    transform: translate(-50%, -50%);
    font-size: 2vw;
    color: #f2711f;
}

.num6 {
    position: absolute;
    top: 52%;
    left: 30%;
    transform: translate(-50%, -50%);
    font-size: 2vw;
    color: #2a46f9;
}

.num7 {
    position: absolute;
    top: 52%;
    left: 37.5%;
    transform: translate(-50%, -50%);
    font-size: 2vw;
    color: #00a3fd;
}

.num8 {
    position: absolute;
    top: 52%;
    left: 45%;
    transform: translate(-50%, -50%);
    font-size: 2vw;
    color: #eff721;
}

.title1 {
    position: absolute;
    top: 28%;
    left: 18%;
    transform: translate(-50%, -50%);
    font-size: 2vw;
    color: #62bff2;
}

.title2 {
    position: absolute;
    top: 28%;
    left: 33%;
    transform: translate(-50%, -50%);
    font-size: 2vw;
    color: #62bff2;
}

.title3 {
    position: absolute;
    top: 48%;
    left: 7.5%;
    transform: translate(-50%, -50%);
    font-size: 1vw;
    color: #fff;
}

.title4 {
    position: absolute;
    top: 48%;
    left: 15%;
    transform: translate(-50%, -50%);
    font-size: 1vw;
    color: #fff;
}

.title5 {
    position: absolute;
    top: 48%;
    left: 22.5%;
    transform: translate(-50%, -50%);
    font-size: 1vw;
    color: #fff;
}

.title6 {
    position: absolute;
    top: 48%;
    left: 30%;
    transform: translate(-50%, -50%);
    font-size: 1vw;
    color: #fff;
}

.title7 {
    position: absolute;
    top: 48%;
    left: 37.5%;
    transform: translate(-50%, -50%);
    font-size: 1vw;
    color: #fff;
}

.title8 {
    position: absolute;
    top: 48%;
    left: 45%;
    transform: translate(-50%, -50%);
    font-size: 1vw;
    color: #fff;
}

.title9 {
    position: absolute;
    top: 61%;
    left: 26.1%;
    transform: translate(-50%, -50%);
    font-size: 1vw;
    color: #fff;
}

.title10 {
    position: absolute;
    top: 13%;
    left: 74.3%;
    transform: translate(-50%, -50%);
    font-size: 1vw;
    color: #fff;
}

.table1 {
    position: absolute;
    top: 63%;
    left: 3.5%;
    width: 45.4%;
    height: 32%;
}

.scrollTable {
    color: rgb(185, 186, 192);
    margin: auto 0px;
    padding: 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    display: inline-block;
}

.right {
    position: absolute;
    top: 16%;
    left: 52%;
    width: 44.8%;
    height: 80%;

    .item {
        width: 22vw;
        height: 37vh;
        position: relative;
        border: 1px solid #1ea6ec;
        margin-bottom: 12px;

        .titleBg {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 10%;
            background-color: #063b5a;
        }

        .title {
            position: absolute;
            top: 5%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff9f6;
            font-size: 0.9vw;

            .el-tag.el-tag--success {
                vertical-align: top !important;
            }
        }

        .img {
            background-image: url("~@/assets/board/smartScene/device.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            width: 100%;
            height: 90%;
            top: 10%;
        }

    }
    .pagination{
        position: relative;
        left: 50%;
        transform: translateX(-50%);
            display: inline-block;
        .el-pagination{
            display: inline-block;
        }
    }
}
</style>
