signal_web/src/components/SmallRader2.vue

<template>
    <div class="smallRader">
        <div class="bgCircle">
            <div class="rader animete-box">
                <div class="dotWarning animete-1 animated heartBeat" v-if="RaderState == 1"></div>
                <div v-show="dotLists" v-for="dot in dotLists" :key="dot.id" class="dotNormal  heartBeat"
                     :style="{left:dot.x+'px',top:dot.y+'px',width:dot.s+'px',height:dot.s+'px'}"></div>
            </div>
            <span id="circle1"></span>
            <span id="circle2"></span>
            <span id="circle3"></span>
            <span id="circle4"></span>
        </div>
        <div class="timeShow">
            {{timeShow}}
        </div>
        <em class="state" v-if="RaderState == 0">区域环境安全</em>
        <em class="warning" v-if="RaderState != 0"><img src="../assets/img/main/waning.png" alt="">发现可疑信号</em>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                seconds: 0,
                show: true,
                RaderState: 0,
                timeShow: ' 00 : 00 : 00',
                dotLists: [],
            }
        },
        props: ['totalRs'],
        mounted() {
            let that = this;
            this.timer = setInterval(() => {
                that.getTime();
            }, 1000);
        },
        methods: {
            createDots() {
                let that = this;
                this.dotLists = [];
                for (var i = 0; i < 5; i++) {
                    this.dotLists.push({
                        x: that.getRandomInt(20, 120),
                        y: that.getRandomInt(10, 110),
                        s: that.getRandomInt(3, 10),
                        id: i,
                    })
                }
            },
            getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            },
            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;
                that.createDots();
                that.RaderState = val.BoolSafe;
            },
        },
    }
</script>

<style scoped>
    .smallRader {
        width: 196px;
        height: 382px;
        overflow: hidden;
        display: block;
        background: rgba(27, 86, 200, 0.14);
        border: 1px solid #005EA2;
        margin-left: 30px;
    }

    .bgCircle {
        width: 163px;
        height: 163px;
        overflow: hidden;
        margin: 0 auto;
        margin-top: 38px;
        background: url("../assets/img/main/radar.png") top center no-repeat;
        background-size: 100% 100%;
    }

    .bgCircle span {
        position: relative;
        background: rgba(109, 193, 255, 0.07);
        border-radius: 250px;
        display: block;
    }

    #circle1 {
        width: 30px;
        height: 30px;
        top: 10px;
        left: 20px;
        animation: ghostUpdown 5s infinite alternate;
        -webkit-animation: ghostUpdown 5s infinite alternate;
    }

    #circle2 {
        width: 10px;
        height: 10px;
        top: 90px;
        left: 110px;

    }

    #circle3 {
        width: 34px;
        height: 34px;
        top: 123px;
        left: 112px;
    }

    #circle4 {
        width: 14px;
        height: 14px;
        top: 155px;
        left: 163px;
    }

    @keyframes ghostUpdown {
        from {
            margin-top: 100px;
            margin-left: 66px;
        }
        to {
            margin-top: 70px;
        }
    }

    @-webkit-keyframes ghostUpdown {
        from {
            margin-top: 100px;
            margin-left: 66px;
        }
        to {
            margin-top: 70px;
        }
    }

    .animete-box {
        width: 160px;
        height: 160px;
        position: absolute;
        left: 138px;
        top: 200px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }

    /*css3波纹*/
    .wrap__uc-waves {
        overflow: hidden;
        height: 1rem;
        width: 100%;
        position: absolute;
        bottom: 0;
    }

    .wrap__uc-waves .wave {
        width: 15rem;
        transform-origin: center bottom;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .wrap__uc-waves .w1 {
        background-size: cover;
        height: .5rem;
        animation: anim_wave 5s linear infinite;
    }

    .wrap__uc-waves .w2 {
        background-size: cover;
        height: .7rem;
        animation: anim_wave 6s linear infinite;
    }

    @keyframes anim_wave {
        0% {
            transform: translateX(0) translateZ(0) scaleY(1)
        }
        50% {
            transform: translateX(-25%) translateZ(0) scaleY(0.55)
        }
        100% {
            transform: translateX(-50%) translateZ(0) scaleY(1)
        }
    }


    .animete-box:before {
        content: ' ';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .animete-box:after {
        content: ' ';
        display: block;
        background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #6DC1FF 100%);
        width: 50%;
        height: 50%;
        position: absolute;
        top: 5px;
        left: 5px;
        animation: radar-beam 5s infinite;
        animation-timing-function: linear;
        transform-origin: bottom right;
        border-radius: 100% 0 0 0;
    }


    @keyframes radar-beam {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .dotWarning {
        width: 5px;
        height: 5px;
        background: #FFDD00;
        background-size: 50px 50px;
        border-radius: 250px;
    }

    .dotNormal {
        position: relative;
        width: 5px;
        height: 5px;
        background: #6DC1FF;
        background-size: 50px 50px;
        border-radius: 250px;
        transform: scale(0.5);
        animation: bulge 2s infinite ease-in-out;
    }

    .dotNormal::after {
        z-index: -1;
        transform: scale(1);
        animation: blow 2s infinite ease-in-out;
    }

    .animete-1 {
        position: absolute;
        left: 30px;
        top: 120px;
        z-index: 3;
    }

    .animete-2 {
        width: 5px;
        height: 5px;
        position: absolute;
        left: 100px;
        top: 160px;
        z-index: 3;
    }

    .animete-3 {
        width: 15px;
        height: 15px;
        position: absolute;
        left: 110px;
        top: 90px;
        z-index: 3;
    }

    .animete-4 {
        width: 10px;
        height: 10px;
        position: absolute;
        left: 120px;
        top: 110px;
        z-index: 3;
    }

    @keyframes heartBeat {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }

        14% {
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }

        22% {
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
        }


        28% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }

        42% {
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
        }

        54% {
            -webkit-transform: scale(1.0);
            transform: scale(1.0);
        }

        60% {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }

        80% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    .heartBeat {
        -webkit-animation-name: heartBeat;
        animation-name: heartBeat;
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
    }

    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }


    @keyframes warn {
        0% {
            transform: scale(0);
            opacity: 0.0;
        }
        25% {
            transform: scale(0.25);
            opacity: 0.1;
        }
        50% {
            transform: scale(0.5);
            opacity: 0.3;
        }
        75% {
            transform: scale(0.75);
            opacity: 0.5;
        }
        100% {
            transform: scale(1);
            opacity: 0.0;
        }
    }

    /* 保持大小不变的小圆圈  */
    .dot {
        position: absolute;
        width: 5px;
        height: 5px;
        left: 50%;
        top: 50%;
        border-radius: 10px;
        z-index: 2;
    }

    /* 产生动画（向外扩散变大）的圆圈  */
    .pulse {
        position: absolute;
        width: 200px;
        height: 200px;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border: 3px solid #6DC1FF;
        box-shadow: 0px 0px 20px #6DC1FF inset;
        border-radius: 150px;
        z-index: 1;
        opacity: 0;
        animation: warn 1.8s linear;
        animation-iteration-count: infinite !important;
    }

    .pulse2 {
        position: absolute;
        width: 200px;
        height: 200px;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border: 3px solid #6DC1FF;
        box-shadow: 0px 0px 20px #6DC1FF inset;
        border-radius: 150px;
        z-index: 1;
        opacity: 0;
        animation: warn 1.8s linear;
        animation-delay: 0.6s;
        animation-iteration-count: infinite !important;
    }

    .pulse3 {
        position: absolute;
        width: 200px;
        height: 200px;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border: 3px solid #6DC1FF;
        box-shadow: 0px 0px 20px #6DC1FF inset;
        border-radius: 150px;
        z-index: 1;
        opacity: 0;
        animation: warn 1.8s linear;
        animation-delay: 0.3s;
        animation-iteration-count: infinite !important;
    }

    @font-face {
        font-family: UnidreamLED;
        src: url('../assets/font/UnidreamLED.ttf');
    }

    .timeShow {
        position: relative;
        bottom: -10px;
        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;
    }

    .state {
        position: relative;
        top: 40px;
        height: 48px;
        line-height: 48px;
        margin: 0 auto;
        display: block;
        color: #CFEBFF;
        font-size: 24px;
        background: rgba(27, 86, 200, 0.51);
        z-index: 6666;
    }

    .warning {
        position: relative;
        top: 40px;
        left: 5px;
        width: 100px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #FFDD00;
        text-align: center;
        font-size: 16px;
    }

    .warning img {
        display: block;
        margin: 0 auto;
    }
</style>