组件

src/components/BigRader.vue

@@ -1,15 +1,482 @@
 <template>
     <div class="BigRader">
-
+        <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>
+                <em class="state" v-if="state == 0">区域环境安全</em>
+                <em class="warning" v-else>
+                    <img src="../assets/img/main/waning.png" alt="">
+                    发现可疑信号</em>
+            </div>
+            <span id="circle1"></span>
+            <span id="circle2"></span>
+            <span id="circle3"></span>
+            <span id="circle4"></span>
+        </div>
+        <div class="timeShow">
+            {{timeShow}}
+        </div>
     </div>
 </template>
 
 <script>
     export default {
-        name: "BigRader"
+        data() {
+            return {
+                seconds: 0,
+                state: 0,
+                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>
+    .BigRader {
+        width: 439px;
+        height: 346px;
+        overflow: hidden;
+        display: block;
+        background: rgba(27, 86, 200, 0.14);
+        border: 1px solid #005EA2;
+    }
+
+    .bgCircle {
+        width: 300px;
+        height: 300px;
+        overflow: hidden;
+        margin: 0 auto;
+        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: 40px;
+        animation: ghostUpdown 5s infinite alternate;
+        -webkit-animation: ghostUpdown 5s infinite alternate;
+    }
+
+    #circle2 {
+        width: 10px;
+        height: 10px;
+        top: 90px;
+        left: 210px;
+
+    }
+
+    #circle3 {
+        width: 34px;
+        height: 34px;
+        top: 123px;
+        left: 212px;
+    }
+
+    #circle4 {
+        width: 14px;
+        height: 14px;
+        top: 255px;
+        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: 300px;
+        height: 300px;
+        position: absolute;
+        left: 230px;
+        top: 250px;
+        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: 100px;
+        top: 50px;
+        z-index: 3;
+    }
+
+    .animete-2 {
+        width: 5px;
+        height: 5px;
+        position: absolute;
+        left: 200px;
+        top: 110px;
+        z-index: 3;
+    }
+
+    .animete-3 {
+        width: 15px;
+        height: 15px;
+        position: absolute;
+        left: 140px;
+        top: 100px;
+        z-index: 3;
+    }
+
+    .animete-4 {
+        width: 10px;
+        height: 10px;
+        position: absolute;
+        left: 220px;
+        top: 210px;
+        z-index: 3;
+    }
+
+    .animete-5 {
+        position: absolute;
+        left: 250px;
+        top: 180px;
+        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;
+        border-top: 1px solid #005EA2;
+        line-height: 40px;
+        font-size: 33px;
+        color: #6DC1FF;
+        text-align: center;
+        background: rgba(27, 86, 200, 0.14);
+        font-family: UnidreamLED;
+    }
+
+    .state {
+        position: relative;
+        top: 130px;
+        width: 221px;
+        height: 48px;
+        margin: 0 auto;
+        display: block;
+        color: #CFEBFF;
+        font-size: 32px;
+        background: rgba(27, 86, 200, 0.51);
+        z-index: 6666;
+    }
+
+    .warning {
+        position: relative;
+        top: 120px;
+        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>

src/components/Console.vue

@@ -17,7 +17,7 @@
                         楼层
                     </div>
                     <el-row :gutter="21">
-                        <el-col :span="8" v-for="(loft,i) in loftList" >
+                        <el-col :span="8" v-for="(loft,i) in loftList">
                             <div :class="[{'active':loftIndex == i+1 }]" @click="ClickGetInfo(1,i)">
                                 <div class="grid-content bg-purple"> {{loft.name}}</div>
                             </div>
@@ -29,7 +29,7 @@
                         楼层管理区域
                     </div>
                     <el-row :gutter="21">
-                        <el-col :span="8" v-for="(manage,j) in manageList" >
+                        <el-col :span="8" v-for="(manage,j) in manageList">
                             <div :class="[{'active':manageIndex ==j+1 }]" @click="ClickGetInfo(2,j)">
                                 <div class="grid-content bg-purple">{{manage.name}}</div>
                             </div>
@@ -41,7 +41,7 @@
                         SignalDigger设备
                     </div>
                     <el-row :gutter="21">
-                        <el-col :span="8" v-for="(equip,t) in equipList" >
+                        <el-col :span="8" v-for="(equip,t) in equipList">
                             <div :class="[{'active':equipIndex == t+1 }]" @click="ClickGetInfo(3,t)">
                                 <div class="grid-content bg-purple"> {{equip.name}}</div>
                             </div>
@@ -120,7 +120,7 @@
 
     .other-people {
         width: 350px;
-        min-height: 706px;
+        min-height: 919px;
         margin-left: 0;
     }
 
@@ -165,7 +165,8 @@
         border-color: #6DC1FF;
         color: #6DC1FF
     }
+
     .bg-purple {
-        overflow:hidden;
+        overflow: hidden;
     }
 </style>

src/components/EquipInfo.vue

@@ -82,11 +82,17 @@
 <style scoped>
     .other-people {
         width: 439px;
-        height: 405px;
+        height: 422px;
         margin-left: 0;
         overflow: hidden;
         background: #000F2A;
     }
+    .equipinfo .image-border2 {
+        right: 0;
+    }
+    .equipinfo .image-border4 {
+        right: 0;
+    }
     ul,li {
         list-style: none;
         padding: 0;
@@ -98,14 +104,14 @@
         display: block;
         padding: 0 23px;
         margin: 0 auto;
-        margin-top: 40px;
+        margin-top: 60px;
     }
     .thisContent ul li {
         width: 120px;
         height: 110px;
         float: left;
         margin-right: 20px;
-        margin-bottom: 50px;
+        margin-bottom: 80px;
     }
     .thisContent ul li:nth-child(3){
         margin-right: 0;

src/components/Total.vue

@@ -8,12 +8,18 @@
             <div class="other-people-title">
                 实时监测
             </div>
-            <div class="totalContianer">
+            <div class="totalContianer" v-if="TotalPanel">
                 <div class="tlt">
                     <h5>正在监测</h5>
                     <BigRader></BigRader>
                 </div>
-                <div class="trt"></div>
+                <div class="trt">
+                    <h5>实时监测记录</h5>
+                    <Watching></Watching>
+                </div>
+            </div>
+            <div class="loftContainer">
+
             </div>
         </div>
     </div>
@@ -21,16 +27,22 @@
 
 <script>
     import BigRader from '@/components/BigRader.vue'
+    import Watching from '@/components/Watching.vue'
     export default {
+        data(){
+          return{
+              TotalPanel:false,
+          }
+        },
         components: {
-            BigRader
+            BigRader,Watching
         }
     }
 </script>
 
 <style scoped>
     .other-people {
-        width: 976px;
+        width: 963px;
         height: 481px;
         margin-left: 0;
         overflow: hidden;
@@ -49,12 +61,15 @@
         margin-top: 55px;
     }
     .totalContianer .tlt {
-        width: 50%;
+        width: 48%;
         float: left;
+        padding-left: 10px;
     }
     .totalContianer .trt {
-        width: 50%;
+        width: 48%;
         float: right;
+        padding-right: 20px;
+        overflow: hidden;
     }
     .totalContianer h5 {
         width: 126px;
@@ -63,9 +78,16 @@
         text-align: center;
         color: #6DC1FF;
         font-size: 14px;
-        margin: 0 auto;
+        margin: 0;
+        margin-left: 33%;
         margin-bottom: 19px;
         background: url("../assets/img/main/title.png")top center no-repeat;
         background-size: 100% 100%;
     }
+    .total .image-border2 {
+        right: 0px;
+    }
+    .total .image-border4 {
+        right: 0px;
+    }
 </style>

src/components/Watching.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="watching">
+        <ul>
+            <li v-for="i in 9">
+                <span>06-18 12:32:03 </span>
+                <em>Signal设备03检测完成，206会议室安全</em>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Watching"
+    }
+</script>
+
+<style scoped>
+    .watching {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+    .watching ul {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+    .watching li {
+        height: 34px;
+        line-height: 34px;
+        padding-left: 20px;
+        padding-right: 10px;
+        background: rgba(0,107,184,0.2);
+        font-size: 14px;
+        color: #6DC1FF;
+        text-align: left;
+        overflow: hidden;
+        margin-bottom: 5px;
+    }
+    .watching li span {
+        font-family: UnidreamLED;
+        font-size: 16px;
+        margin-right: 10px;
+    }
+</style>

src/views/Index.vue

@@ -104,8 +104,39 @@
         width: 100%;
         height: 100%;
         background: url("../assets/img/mainBg.png")top center no-repeat;
-        background-size: 100%;
+        background-size: 100% 100%;
+        overflow-y: scroll;
     }
+
+    .container::-webkit-scrollbar {/*滚动条整体样式*/
+
+        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
+
+        height: 1px;
+
+    }
+
+    .container::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+
+        border-radius: 10px;
+
+        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+
+        background: #01355B;
+
+    }
+
+    .container::-webkit-scrollbar-track {/*滚动条里面轨道*/
+
+        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+
+        border-radius: 10px;
+
+        background: none;
+
+    }
+
+
     .el-header {
         height: 60px!important;
         padding: 0 !important;

src/views/Main.vue

@@ -4,15 +4,18 @@
             <Console></Console>
         </div>
         <div class="center">
-            <Total></Total>
-            <br>
-            <WifiSign></WifiSign>
-            <br>
+            <div class="cube">
+                <Total></Total>
+            </div>
+            <div class="cube">
+                <WifiSign></WifiSign>
+            </div>
             <Scan></Scan>
         </div>
         <div class="rt">
+            <div class="cube">
             <HistoryRecord></HistoryRecord>
-            <br>
+            </div>
             <EquipInfo></EquipInfo>
         </div>
     </div>
@@ -25,29 +28,34 @@
     import HistoryRecord from '@/components/HistoryRecord.vue'
     import EquipInfo from '@/components/EquipInfo.vue'
     import Total from '@/components/Total.vue'
+
     export default {
         components: {
-            Console,WifiSign,Scan,HistoryRecord,EquipInfo,Total
+            Console, WifiSign, Scan, HistoryRecord, EquipInfo, Total
         }
     }
 </script>
 
 <style scoped>
     @import "../assets/css/cube.css";
-    ul,li {
+
+    ul, li {
         list-style: none;
         padding: 0;
         margin: 0;
     }
-    em,s,i {
+
+    em, s, i {
         font-style: normal;
     }
+
     .mainContainer {
         width: 100%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
     }
+
     .lt {
         width: 365px;
         /*height: 906px;*/
@@ -55,16 +63,26 @@
         overflow: hidden;
         margin-right: 10px;
     }
+
     .center {
         width: 976px;
         /*height: 906px;*/
         float: left;
         overflow: hidden;
     }
+
     .rt {
         width: 452px;
         float: right;
         overflow: hidden;
-        margin-right: 10px;
+        margin-right: 0px;
+    }
+
+    .cube {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-bottom: 5px;
     }
 </style>