|
|
@@ -0,0 +1,476 @@
|
|
|
+<template>
|
|
|
+ <div class="smallRader">
|
|
|
+ <div class="bgCircle">
|
|
|
+ <div class="rader animete-box">
|
|
|
+ <div class="dotWarning animete-1 animated heartBeat"></div>
|
|
|
+ <div class="dotNormal animete-2 heartBeat"></div>
|
|
|
+ <div class="dotNormal animete-3 heartBeat"></div>
|
|
|
+ <div class="dotNormal animete-4 heartBeat"></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="state == 0">区域环境安全</em>
|
|
|
+ <em class="warning" v-else>
|
|
|
+ <img src="../assets/img/main/waning.png" alt="">
|
|
|
+ 发现可疑信号</em>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ seconds: 0,
|
|
|
+ state: 1,
|
|
|
+ timeShow: ' 00 : 00 : 00'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.timeRun();
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.timeRun();
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 显示设备持续时间
|
|
|
+ timeRun() {
|
|
|
+ let seconds = this.seconds;
|
|
|
+ let hour = parseInt(seconds / 3600);
|
|
|
+ let r = parseInt(seconds % 3600);
|
|
|
+ let m = parseInt(r / 60);
|
|
|
+ let s = parseInt(r % 60);
|
|
|
+ hour = hour > 9 ? hour : '0' + hour;
|
|
|
+ m = m > 9 ? m : '0' + m;
|
|
|
+ s = s > 9 ? s : '0' + s;
|
|
|
+ let res = hour + " : " + m + " : " + s;
|
|
|
+ this.timeShow = res;
|
|
|
+ this.seconds += 1;
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</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 {
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ background: #6DC1FF;
|
|
|
+ background-size: 50px 50px;
|
|
|
+ border-radius: 250px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|
