<template>
    <div class="BigRader">
        <div class="">
            <div class="sum-title">
                区域安全状态
            </div>
            <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 == 1 || RaderState == 0">
                <img src="../assets/img/bigRadar2/safe.png" height="47" width="40"/><span class="status">环境安全</span>
            </div>
            <div class="zoom9" v-else>
                <img src="../assets/img/main/waning.png" alt="">
                <span class="warning">发现可疑信号</span>
            </div>
            <!--<div class="zoom10" v-if="RaderState == 2">-->
                <!--<img src="../assets/img/main/danger.png" alt="">-->
                <!--<span class="warning">发现高危信号</span>-->
            <!--</div>-->
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                RaderState: 2,
                dotLists: [],
            }
        },
        props: ['totalRs'],
        mounted() {
            let that = this;
        },
        methods: {},
        watch: {
            totalRs: function (val) {
                let that = this;
                if (val) {
                    that.RaderState = val.Level;
                } else {
                    that.RaderState = 0
                }
            },
        },
    }
</script>

<style scoped>
    .BigRader {
        width: 100%;
        height: 230px;
        overflow: hidden;
        display: block;
    }

    .sum-title {
        width: 150px;
        height: 36px;
        font-size: 16px;
        line-height: 36px;
        color: #6DC1FF;
        margin: 0 auto;
        text-align: center;
        background: url("../assets/img/main/tit.png") top center no-repeat;
        background-size: 100%;
    }

    .histogram {
        position: relative;
        top: -40px;
    }

    .zoom1 {
        width: 205px;
        height: 205px;
        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: 205px;
        height: 205px;
        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: 205px;
        height: 205px;
        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: 205px;
        height: 205px;
        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: 205px;
        height: 205px;
        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: 205px;
        height: 205px;
        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: 205px;
        height: 205px;
        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: 205px;
        height: 205px;
        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: 205px;
        height: 205px;
        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: 205px;
        height: 205px;
        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: 205px;
        height: 205px;
        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: 205px;
        height: 205px;
        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: 205px;
        height: 205px;
        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: 205px;
        height: 205px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .zoom8 {
        position: relative;
        bottom: 175px;
        width: 200px;
        height: 200px;
        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% 100%;
        color: #72FF99;
        text-align: center;
        font-size: 14px;
    }

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

    .zoom8 .status {
        margin: 0 auto;
        font-size: 14px;
        text-align: center;
    }

    .zoom9 {
        position: relative;
        bottom: 175px;
        width: 200px;
        height: 200px;
        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% 100%;
        color: #FFE853;
        text-align: center;
        font-size: 14px;
    }

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

    .zoom9 .status {
        margin: 0 auto;
        font-size: 14px;
        text-align: center;
    }

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

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

    .zoom10 .status {
        margin: 0 auto;
        font-size: 14px;
        text-align: center;
    }

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


    @-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: 205px;
    }

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

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

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

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

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

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

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

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

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