<template>
    <div class="BigRader">
        <div class="circle">
            <div class="zoom1 bn "></div>
            <div class="zoom2 dn top"></div>
            <div class="zoom3 bn top1"></div>
            <div class="zoom31 cn top2"></div>
            <div class="zoom4 cn top3"></div>
            <div class="zoom5  dn top4"></div>
            <div class="zoom51 an top5"></div>
            <div class="zoom52 dn top6"></div>
            <div class="zoom6     top7"></div>
            <div class="zoom62 cn top8"></div>
            <div class="zoom7 dn top9"></div>
        </div>


        <div class="zoom8" v-if="RaderState == 0">
            <span class="status">环境安全</span>
        </div>
        <div class="zoom9" v-if="RaderState > 0">
            <img src="../assets/img/main/waning.png" alt="">
            <span class="warning">发现可疑信号</span>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                seconds: 0,
                RaderState: 0,
                timeShow: ' 00 : 00 : 00',
                dotLists: [],
            }
        },
        props: ['totalRs', 'pageLevel'],
        mounted() {
            let that = this;
        },
        methods: {},
        watch: {
            totalRs: function (val) {
                let that = this;
                that.RaderState = val.DetRs[0].WarnNum;
            },
        },
    }
</script>

<style scoped>
    .BigRader {
        width: 439px;
        height: 410px;
        overflow: hidden;
        display: block;
        /*background: rgba(27, 86, 200, 0.14);*/
        /*border: 1px solid #005EA2;*/
    }

    .zoom1 {
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/1.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%;
        opacity: 20%;
    }

    .zoom2 {
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/2.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%
    }

    .zoom3 {
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/3.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%
    }

    .zoom4 {
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/4.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%
    }

    .zoom5 {
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/5.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%
    }

    .zoom6 {
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/6.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%
    }


    .zoom21 {
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/2-1.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%
    }

    .zoom31 {
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/3-1.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%
    }

    .zoom32 {
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/3-2.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%
    }

    .zoom51 {
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/6-1.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%
    }

    .zoom52 {
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/6-2.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%
    }

    .zoom62 {
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/6-3.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%
    }

    .zoom7 {
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/7.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%
    }
    .circle {
        width: 100%;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .zoom8 {
        position: relative;
        bottom: 349px;
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/8.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%;
        color: #fff;
        text-align: center;
        font-size: 14px;
    }

    .zoom9 {
        position: relative;
        bottom: 349px;
        width: 349px;
        height: 349px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/bigRadar2/9.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%;
        color: #fff;
        text-align: center;
        font-size: 14px;
    }

    .status {
        width: 60px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 140px;
        font-size: 28px;
    }

    .zoom9 img {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 140px;
    }

    .zoom9 .warning {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #FFDD00;
        font-size: 14px;
    }

    @-webkit-keyframes rotation {

        from {
            -webkit-transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(360deg);
        }

    }

    @-webkit-keyframes rotation2 {

        from {
            -webkit-transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(-360deg);
        }

    }

    .an {

        -webkit-transform: rotate(360deg);

        animation: rotation 16s linear infinite;

        -moz-animation: rotation 16s linear infinite;

        -webkit-animation: rotation 16s linear infinite;

        -o-animation: rotation 16s linear infinite;

    }

    .cn {

        -webkit-transform: rotate(360deg);

        animation: rotation 22s linear infinite;

        -moz-animation: rotation 22s linear infinite;

        -webkit-animation: rotation 22s linear infinite;

        -o-animation: rotation 22s linear infinite;

    }

    .dn {

        -webkit-transform: rotate(360deg);

        animation: rotation 33s linear infinite;

        -moz-animation: rotation 33s linear infinite;

        -webkit-animation: rotation 33s linear infinite;

        -o-animation: rotation 33s linear infinite;

    }


    .bn {

        -webkit-transform: rotate(-360deg);

        animation: rotation2 33s linear infinite;

        -moz-animation: rotation2 33s linear infinite;

        -webkit-animation: rotation2 33s linear infinite;

        -o-animation: rotation2 33s linear infinite;

    }

    .top {
        position: relative;
        bottom: 349px;
    }

    .top1 {
        position: relative;
        bottom: 698px;
    }

    .top2 {
        position: relative;
        bottom: 1047px;
    }

    .top3 {
        position: relative;
        bottom: 1396px;
    }

    .top4 {
        position: relative;
        bottom: 1745px;
    }

    .top5 {
        position: relative;
        bottom: 2094px;
    }

    .top6 {
        position: relative;
        bottom: 2443px;
    }

    .top7 {
        position: relative;
        bottom: 2792px;
    }

    .top8 {
        position: relative;
        bottom: 3141px;
    }

    .top9 {
        position: relative;
        bottom: 349px;
    }
</style>
