<template>
    <div class="smallRadar">
        <div class="circle">
            <div class="zoom1 bn "></div>
            <div class="zoom2  top"></div>
            <div class="zoom3 bn top1"></div>
            <div class="zoom31 bn 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   dn  top7"></div>
            <div class="zoom62 cn top8"></div>
            <div class="zoom7 dn top9"></div>
            <div class="zoom8 top10" v-if="parseInt(RaderState) == 0"></div>
            <div class="zoom9 top10" v-if="parseInt(RaderState) > 0"></div>
        </div>
        <div class="status">
            <span class="safe" v-if="RaderState == 0">环境安全</span>
            <img src="../assets/img/main/waning.png" alt="" v-if="RaderState > 0">
            <span class="warning" v-if="RaderState > 0">发现可疑信号</span>
        </div>

        <div class="timeShow">
            {{timeShow}}
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                seconds: 0,
                RaderState: 0,
                timeShow: ' 00 : 00 : 00',
                dotLists: [],
            }
        },
        props: ['totalRs', 'pageLevel'],
        mounted() {
            let that = this;
            this.timer = setInterval(() => {
                that.getTime();
            }, 1000);
        },
        methods: {
            getTime() {
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let strDate = date.getDate();
                let Hours = date.getHours();
                let Minutes = date.getMinutes();
                let Seconds = date.getSeconds();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                if (Hours >= 0 && Hours <= 9) {
                    Hours = "0" + Hours;
                }
                if (Minutes >= 0 && Minutes <= 9) {
                    Minutes = "0" + Minutes;
                }
                if (Seconds >= 0 && Seconds <= 9) {
                    Seconds = "0" + Seconds;
                }

                let thisdata = year + '-' + month + '-' + strDate;
                this.timeShow = thisdata;
            }
        },
        watch: {
            totalRs: function (val) {
                let that = this;
                console.log(val.DetRs[0].WarnNum);
                that.RaderState = val.DetRs[0].WarnNum;
            },
        },
    }
</script>

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

    .zoom1 {
        width: 196px;
        height: 196px;
        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% 100%;
        opacity: 20%;
    }

    .zoom2 {
        width: 196px;
        height: 196px;
        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% 100%;
    }

    .zoom3 {
        width: 196px;
        height: 196px;
        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% 100%;
    }

    .zoom4 {
        width: 196px;
        height: 196px;
        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% 100%;
    }

    .zoom5 {
        width: 196px;
        height: 196px;
        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% 100%;
    }

    .zoom6 {
        width: 196px;
        height: 196px;
        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% 100%;
    }


    .zoom21 {
        width: 196px;
        height: 196px;
        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% 100%;
    }

    .zoom31 {
        width: 196px;
        height: 196px;
        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% 100%;
    }

    .zoom32 {
        width: 196px;
        height: 196px;
        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% 100%;
    }

    .zoom51 {
        width: 196px;
        height: 196px;
        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% 100%;
    }

    .zoom52 {
        width: 196px;
        height: 196px;
        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% 100%;
    }

    .zoom62 {
        width: 196px;
        height: 196px;
        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% 100%;
    }

    .zoom7 {
        width: 196px;
        height: 196px;
        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%
    }

    .zoom8 {
        position: relative;
        width: 196px;
        height: 196px;
        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;
        width: 196px;
        height: 196px;
        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 {
        position: relative;
        top: 20px;
        width: 100%;
        overflow: visible;
        display: block;
        margin: 0 auto;
        font-size: 28px;
    }

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

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

    .safe {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #6DC1FF;
    }

    @-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 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 22s linear infinite;

        -moz-animation: rotation 22s linear infinite;

        -webkit-animation: rotation 22s linear infinite;

        -o-animation: rotation 22s linear infinite;

    }


    .bn {

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

        animation: rotation2 16s linear infinite;

        -moz-animation: rotation2 16s linear infinite;

        -webkit-animation: rotation2 16s linear infinite;

        -o-animation: rotation2 16s linear infinite;

    }

    .timeShow {
        position: relative;
        top: 30px;
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 40px;
        line-height: 40px;
        font-size: 33px;
        color: #6DC1FF;
        text-align: center;
        font-family: UnidreamLED;
    }

    .circle {
        width: 100%;
        height: 196px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

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

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

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

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

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

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

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

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

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

    .top9 {
        position: relative;
        bottom: 1960px;
    }
    .top10 {
        position: relative;
        bottom: 2156px;
    }
</style>
