del unuse file

src/App.vue

@@ -23,4 +23,24 @@
         color: #2c3e50;
         background-color: #01355B;
     }
+    .el-message-box__wrapper .el-message-box {
+        color: #015B9E;
+        background: #061B44;
+    }
+    .el-message-box__wrapper .el-input__inner {
+        color: #015B9E;
+        background-color: #061B44;
+        border: 1px solid #015B9E;
+    }
+    .el-message-box__wrapper .el-message-box__title {
+        color: #6DC1FF;
+    }
+    .el-message-box__wrapper .el-message-box__message {
+        color: #6DC1FF;
+    }
+    .el-message-box__wrapper .el-button {
+        background-color: #061B44;
+        color: #015B9E;
+        border: 1px solid #015B9E;
+    }
 </style>

src/Global.js

@@ -40,6 +40,13 @@ globalBt2 = function () {
     return [bt, et];
 };
 
+globalBt3 = function (days) {
+    const et = new Date();
+    const bt = new Date();
+    bt.setTime(bt.getTime() - 3600 * 1000 * 24 * days);
+    return [bt, et];
+};
+
 // 格式化时间
 globalfmtDate = function (datetime, length) {
     if ((datetime == '') || (datetime == undefined))

src/api/Navs.js

@@ -103,6 +103,20 @@ let navs = [{
             "grouplist": "2,5",
             "memo": null,
             "icon": "home_icon"
+        },{
+            "clmid": "33",
+            "spclmid": "0",
+            "ordno": "0",
+            "c_level": "2",
+            "clmcode": "front_index",
+            "clmname": "白名单",
+            "clmurl": "/white",
+            "prname": null,
+            "en": "1",
+            "show": "1",
+            "grouplist": "2,5",
+            "memo": null,
+            "icon": "home_icon"
         },
     ]
 },

src/api/getApiRes.js

@@ -331,3 +331,20 @@ export function Region06GInfolist(postdata) {
     return getApiBasic(url, postdata);
 }
 
+// 加入白名单
+export function WhiteListAdd(postdata) {
+    let url = headapi + 'v1/Detector/WhiteListAdd';
+    return getApiBasic(url, postdata);
+}
+
+// 白名单中移除设备
+export function RemoveFromWhiteList(postdata) {
+    let url = headapi + 'v1/Detector/RemoveFromWhiteList';
+    return getApiBasic(url, postdata);
+}
+
+// 白名单列表查询
+export function WhiteListQuery(postdata) {
+    let url = headapi + 'v1/Detector/WhiteListQuery';
+    return getApiBasic(url, postdata);
+}

src/components/BigRader.vue

@@ -1,23 +1,26 @@
 <template>
     <div class="BigRader">
-        <div class="bgCircle">
-            <div class="rader animete-box">
-                <div class="dotWarning animete-1 animated heartBeat" v-if="RaderState == 1"></div>
-                <em class="state" v-if="RaderState == 0">区域环境安全</em>
-                <em class="warning" v-else>
-                    <img src="../assets/img/main/waning.png" alt="">
-                    发现可疑信号</em>
-                <div v-for="dot in dotLists" 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 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     top7"></div>
+            <div class="zoom62 cn top8"></div>
+            <div class="zoom7 dn top9"></div>
         </div>
-        <div class="timeShow">
-            {{timeShow}}
+
+
+        <div class="zoom8" v-if="RaderState == 0">
+            <span class="status">环境安全</span>
+        </div>
+        <div class="zoom9" v-if="RaderState > 0">
+            <img src="../assets/img/main/waning.png" alt="">
+            <span class="warning">发现可疑信号</span>
         </div>
     </div>
 </template>
@@ -32,61 +35,15 @@
                 dotLists: [],
             }
         },
-        props: ['totalRs','pageLevel'],
+        props: ['totalRs', 'pageLevel'],
         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(50, 240),
-                        y: that.getRandomInt(10, 110),
-                        s: that.getRandomInt(3, 10),
-                    })
-                }
-            },
-            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 + ' ' + Hours + ':' + Minutes + ':' + Seconds;
-                this.timeShow = thisdata;
-            }
         },
+        methods: {},
         watch: {
             totalRs: function (val) {
                 let that = this;
-                that.createDots();
-                that.RaderState = val.BoolSafe;
+                that.RaderState = val.DetRs[0].WarnNum;
             },
         },
     }
@@ -95,460 +52,365 @@
 <style scoped>
     .BigRader {
         width: 439px;
-        height: 346px;
+        height: 410px;
         overflow: hidden;
         display: block;
-        background: rgba(27, 86, 200, 0.14);
-        border: 1px solid #005EA2;
+        /*background: rgba(27, 86, 200, 0.14);*/
+        /*border: 1px solid #005EA2;*/
     }
 
-    .bgCircle {
-        width: 300px;
-        height: 300px;
+    .zoom1 {
+        width: 349px;
+        height: 349px;
         overflow: hidden;
+        display: block;
         margin: 0 auto;
-        background: url("../assets/img/main/radar.png") top center no-repeat;
-        background-size: 100% 100%;
+        background: url("../assets/img/bigRadar2/1.png");
+        background-position: top center;
+        background-repeat: no-repeat;
+        background-size: 100%;
+        opacity: 20%;
     }
 
-    .bgCircle span {
-        position: relative;
-        background: rgba(109, 193, 255, 0.07);
-        border-radius: 250px;
+    .zoom2 {
+        width: 349px;
+        height: 349px;
+        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%
     }
 
-    .raderContianer {
-        width: 100%;
-        height: 100%;
+    .zoom3 {
+        width: 349px;
+        height: 349px;
         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%
     }
 
-    #circle1 {
-        width: 30px;
-        height: 30px;
-        top: 10px;
-        left: 40px;
-        animation: ghostUpdown 5s infinite alternate;
-        -webkit-animation: ghostUpdown 5s infinite alternate;
+    .zoom4 {
+        width: 349px;
+        height: 349px;
+        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%
     }
 
-    #circle2 {
-        width: 10px;
-        height: 10px;
-        top: 90px;
-        left: 210px;
+    .zoom5 {
+        width: 349px;
+        height: 349px;
+        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%
     }
 
-    #circle3 {
-        width: 34px;
-        height: 34px;
-        top: 123px;
-        left: 212px;
+    .zoom6 {
+        width: 349px;
+        height: 349px;
+        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%
     }
 
-    #circle4 {
-        width: 14px;
-        height: 14px;
-        top: 255px;
-        left: 163px;
-    }
 
-    @keyframes ghostUpdown {
-        from {
-            margin-top: 100px;
-            margin-left: 66px;
-        }
-        to {
-            margin-top: 70px;
-        }
+    .zoom21 {
+        width: 349px;
+        height: 349px;
+        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%
     }
 
-    @-webkit-keyframes ghostUpdown {
-        from {
-            margin-top: 100px;
-            margin-left: 66px;
-        }
-        to {
-            margin-top: 70px;
-        }
+    .zoom31 {
+        width: 349px;
+        height: 349px;
+        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%
     }
 
-    .animete-box {
-        width: 300px;
-        height: 300px;
-        position: absolute;
-        left: 230px;
-        top: 250px;
-        transform: translate(-50%, -50%);
-        border-radius: 50%;
+    .zoom32 {
+        width: 349px;
+        height: 349px;
+        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%
     }
 
-    /*css3波纹*/
-    .wrap__uc-waves {
+    .zoom51 {
+        width: 349px;
+        height: 349px;
         overflow: hidden;
-        height: 1rem;
-        width: 100%;
-        position: absolute;
-        bottom: 0;
+        display: block;
+        margin: 0 auto;
+        background: url("../assets/img/bigRadar2/6-1.png");
+        background-position: top center;
+        background-repeat: no-repeat;
+        background-size: 100%
     }
 
-    .wrap__uc-waves .wave {
-        width: 15rem;
-        transform-origin: center bottom;
-        position: absolute;
-        left: 0;
-        bottom: 0;
+    .zoom52 {
+        width: 349px;
+        height: 349px;
+        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%
     }
 
-    .wrap__uc-waves .w1 {
-        background-size: cover;
-        height: .5rem;
-        animation: anim_wave 5s linear infinite;
+    .zoom62 {
+        width: 349px;
+        height: 349px;
+        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%
     }
 
-    .wrap__uc-waves .w2 {
-        background-size: cover;
-        height: .7rem;
-        animation: anim_wave 6s linear infinite;
+    .zoom7 {
+        width: 349px;
+        height: 349px;
+        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%
     }
-
-    @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)
-        }
+    .circle {
+        width: 100%;
+        height: 349px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
     }
 
-
-    .animete-box:before {
-        content: ' ';
+    .zoom8 {
+        position: relative;
+        bottom: 349px;
+        width: 349px;
+        height: 349px;
+        overflow: hidden;
         display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
+        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;
     }
 
-    .animete-box:after {
-        content: ' ';
+    .zoom9 {
+        position: relative;
+        bottom: 349px;
+        width: 349px;
+        height: 349px;
+        overflow: hidden;
         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);
-        }
+        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;
     }
 
-    .dotWarning {
-        width: 5px;
-        height: 5px;
-        background: #FFDD00;
-        background-size: 50px 50px;
-        border-radius: 250px;
+    .status {
+        width: 60px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 140px;
+        font-size: 28px;
     }
 
-    .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;
+    .zoom9 img {
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 140px;
     }
 
-    .dotNormal::after {
-        z-index: -1;
-        transform: scale(1);
-        animation: blow 2s infinite ease-in-out;
+    .zoom9 .warning {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        color: #FFDD00;
+        font-size: 14px;
     }
 
-    @keyframes bulge {
-        50% {
-            transform: scale(1);
-        }
-    }
+    @-webkit-keyframes rotation {
 
-    @keyframes blow {
-        25% {
-            opacity: 0.5;
+        from {
+            -webkit-transform: rotate(0deg);
         }
-        50% {
-            opacity: 0.5;
+
+        to {
+            -webkit-transform: rotate(360deg);
         }
-        90% {
-            opacity: 0;
+
+    }
+
+    @-webkit-keyframes rotation2 {
+
+        from {
+            -webkit-transform: rotate(0deg);
         }
-        100% {
-            transform: scale(2);
-            opacity: 0;
+
+        to {
+            -webkit-transform: rotate(-360deg);
         }
-    }
 
-    .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;
-    }
+    .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;
 
-    .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;
+    .cn {
+
+        -webkit-transform: rotate(360deg);
+
+        animation: rotation 11s linear infinite;
+
+        -moz-animation: rotation 11s linear infinite;
+
+        -webkit-animation: rotation 11s linear infinite;
+
+        -o-animation: rotation 11s linear infinite;
+
     }
 
-    .animete-5 {
-        position: absolute;
-        left: 250px;
-        top: 180px;
-        z-index: 3;
+    .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;
+
     }
 
-    @keyframes heartBeat {
-        0% {
-            -webkit-transform: scale(1);
-            transform: scale(1);
-        }
 
-        14% {
-            -webkit-transform: scale(1.5);
-            transform: scale(1.5);
-        }
+    .bn {
 
-        22% {
-            -webkit-transform: scale(1.2);
-            transform: scale(1.2);
-        }
+        -webkit-transform: rotate(-360deg);
 
+        animation: rotation2 16s linear infinite;
 
-        28% {
-            -webkit-transform: scale(1);
-            transform: scale(1);
-        }
+        -moz-animation: rotation2 16s linear infinite;
 
-        42% {
-            -webkit-transform: scale(1.2);
-            transform: scale(1.2);
-        }
+        -webkit-animation: rotation2 16s linear infinite;
 
-        54% {
-            -webkit-transform: scale(1.0);
-            transform: scale(1.0);
-        }
+        -o-animation: rotation2 16s linear infinite;
 
-        60% {
-            -webkit-transform: scale(1.1);
-            transform: scale(1.1);
-        }
+    }
 
-        80% {
-            -webkit-transform: scale(1);
-            transform: scale(1);
-        }
+    .top {
+        position: relative;
+        bottom: 349px;
     }
 
-    .heartBeat {
-        -webkit-animation-name: heartBeat;
-        animation-name: heartBeat;
-        -webkit-animation-duration: 3s;
-        animation-duration: 3s;
-        -webkit-animation-timing-function: ease;
-        animation-timing-function: ease;
+    .top1 {
+        position: relative;
+        bottom: 698px;
     }
 
-    .animated {
-        -webkit-animation-duration: 1s;
-        animation-duration: 1s;
-        -webkit-animation-fill-mode: both;
-        animation-fill-mode: both;
+    .top2 {
+        position: relative;
+        bottom: 1047px;
     }
 
+    .top3 {
+        position: relative;
+        bottom: 1396px;
+    }
 
-    @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;
-        }
+    .top4 {
+        position: relative;
+        bottom: 1745px;
     }
 
-    /* 保持大小不变的小圆圈  */
-    .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 {
+    .top5 {
         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;
+        bottom: 2094px;
     }
 
-    .state {
+    .top6 {
         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;
+        bottom: 2443px;
     }
 
-    .warning {
+    .top7 {
         position: relative;
-        top: 120px;
-        left: 5px;
-        width: 100px;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        color: #FFDD00;
-        text-align: center;
-        font-size: 16px;
-        z-index: 6666;
+        bottom: 2792px;
     }
 
-    .warning img {
-        display: block;
-        margin: 0 auto;
+    .top8 {
+        position: relative;
+        bottom: 3141px;
+    }
+
+    .top9 {
+        position: relative;
+        bottom: 349px;
     }
 </style>

src/components/BigRader2.vue

@@ -0,0 +1,554 @@
+<template>
+    <div class="BigRader">
+        <div class="bgCircle">
+            <div class="rader animete-box">
+                <div class="dotWarning animete-1 animated heartBeat" v-if="RaderState == 1"></div>
+                <em class="state" v-if="RaderState == 0">区域环境安全</em>
+                <em class="warning" v-else>
+                    <img src="../assets/img/main/waning.png" alt="">
+                    发现可疑信号</em>
+                <div v-for="dot in dotLists" 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>
+    </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: {
+            createDots() {
+                let that = this;
+                this.dotLists = [];
+                for (var i = 0; i < 5; i++) {
+                    this.dotLists.push({
+                        x: that.getRandomInt(50, 240),
+                        y: that.getRandomInt(10, 110),
+                        s: that.getRandomInt(3, 10),
+                    })
+                }
+            },
+            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 + ' ' + Hours + ':' + Minutes + ':' + Seconds;
+                this.timeShow = thisdata;
+            }
+        },
+        watch: {
+            totalRs: function (val) {
+                let that = this;
+                that.createDots();
+                that.RaderState = val.BoolSafe;
+            },
+        },
+    }
+</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;
+    }
+
+    .raderContianer {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    #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 {
+        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;
+    }
+
+    @keyframes bulge {
+        50% {
+            transform: scale(1);
+        }
+    }
+
+    @keyframes blow {
+        25% {
+            opacity: 0.5;
+        }
+        50% {
+            opacity: 0.5;
+        }
+        90% {
+            opacity: 0;
+        }
+        100% {
+            transform: scale(2);
+            opacity: 0;
+        }
+    }
+
+    .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;
+        z-index: 6666;
+    }
+
+    .warning img {
+        display: block;
+        margin: 0 auto;
+    }
+</style>

src/components/EquipInfo.vue

@@ -42,15 +42,15 @@
                         <div class="ringCircle">
                             <Ring></Ring>
                         </div>
-                        <em>{{info.Warninglog_todaycount}}个</em>
-                        <span>当日报警数</span>
+                        <em>{{info.Warning_today_wifinum}}个</em>
+                        <span>当日wifi报警量</span>
                     </li>
                     <li>
                         <div class="ringCircle">
                             <Ring></Ring>
                         </div>
-                        <em>{{info.Warninglog_totalcount}}件</em>
-                        <span>可疑事件总数</span>
+                        <em>{{info.Warning_today_phonenum}}件</em>
+                        <span>当日手机报警量</span>
                     </li>
                 </ul>
             </div>
@@ -68,8 +68,8 @@
                     Detector_offlinenum: 0,
                     Detector_onlinenum: 0,
                     Detector_totalnum: 0,
-                    Warninglog_todaycount: 0,
-                    Warninglog_totalcount: 0,
+                    Warning_today_wifinum: 0,
+                    Warning_today_phonenum: 0,
                 }
             }
         },

src/components/HistoryRecord.vue

@@ -56,6 +56,7 @@
             <div v-show="allTableData.length != 0">
                 <el-pagination
                         background
+                        layout="prev, pager, next"
                         :total="pageination.total"
                         :page-size="pageination.pageItem"
                         @current-change="pageChange"

src/components/Loft.vue

@@ -7,8 +7,18 @@
             <div class="loftBg" :style="{backgroundImage:'url(' + loftMap + ')'}">
                 <ul>
                     <li :class="{'active':p.DetectorWarnNum  != 0}" v-for="p in loftPoints"
-                        :style="{ left: p.DetselfInfo.Width*0.4+'PX', top: p.DetselfInfo.Height+'PX'}" @click="seeDet(p)">
-                        <em><i></i>{{p.DetselfInfo.TagName}}</em></li>
+                        :style="{ left: p.DetselfInfo.Width*0.8+'PX', top: p.DetselfInfo.Height+'PX'}"
+                        @click="seeDet(p)">
+                        <em>
+                              <span v-if="p.DetselfInfo.Width > 500">
+                                 {{p.DetselfInfo.TagName}}
+                            </span>
+                            <i></i>
+                            <span v-if="p.DetselfInfo.Width <= 500">
+                                 {{p.DetselfInfo.TagName}}
+                            </span>
+                        </em>
+                    </li>
                 </ul>
             </div>
         </div>
@@ -100,6 +110,10 @@
         line-height: 22px;
     }
 
+    .loftBg li span {
+        float: left;
+    }
+
     .loftBg li i {
         width: 18px;
         height: 18px;

src/components/Navside.vue

@@ -106,7 +106,6 @@
     }
 </script>
 <style scoped>
-    /*注释*/
     .shortnav {
         position: absolute;
         width: 65px;

src/components/Room.vue

@@ -7,13 +7,18 @@
             <div class="RoomBg">
                 <ul>
                     <li :class="{'active':p.DetectorWarnNum != 0}" v-for="p in loftPoints"
-                        :style="{ left: p.DetselfInfo.Width*0.8+'PX', top: p.DetselfInfo.Height+'PX'}"
+                        :style="{ left: p.DetselfInfo.Width*0.7+'PX', top: p.DetselfInfo.Height+'PX'}"
                         @click="seeDet(p)">
-                        <em><i></i>
-                            <span>
+                        <em>
+                              <span v-if="p.DetselfInfo.Width > 500">
                                  {{p.DetselfInfo.TagName}}
                             </span>
-                        </em></li>
+                            <i></i>
+                            <span v-if="p.DetselfInfo.Width <= 500">
+                                 {{p.DetselfInfo.TagName}}
+                            </span>
+                        </em>
+                    </li>
                 </ul>
             </div>
         </div>
@@ -102,6 +107,9 @@
         float: left;
         line-height: 22px;
     }
+    .RoomBg li span {
+        float: left;
+    }
 
     .RoomBg li i {
         width: 14px;

src/components/SingleEquipInfo.vue

@@ -74,8 +74,7 @@
             totalRs: function (val) {
                 let that = this;
                 that.state = val.BoolSafe == 0 ? true : false;
-                // that.time = val.DetRs.Dettime;
-                that.dangerItem = val.DetRs.WarnNum;
+                that.dangerItem = val.DetRs[0].WarnNum;
             },
         },
         filters: {

src/components/SmallRader.vue

@@ -1,21 +1,30 @@
 <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 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>
-        <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>
 
@@ -24,13 +33,12 @@
         data() {
             return {
                 seconds: 0,
-                show: true,
                 RaderState: 0,
                 timeShow: ' 00 : 00 : 00',
                 dotLists: [],
             }
         },
-        props: ['totalRs'],
+        props: ['totalRs', 'pageLevel'],
         mounted() {
             let that = this;
             this.timer = setInterval(() => {
@@ -38,21 +46,6 @@
             }, 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();
@@ -84,393 +77,318 @@
         watch: {
             totalRs: function (val) {
                 let that = this;
-                that.createDots();
-                that.RaderState = val.BoolSafe;
+                console.log(val.DetRs[0].WarnNum);
+                that.RaderState = val.DetRs[0].WarnNum;
             },
         },
     }
 </script>
 
 <style scoped>
-    .smallRader {
-        width: 196px;
+    .smallRadar {
+        width: 242px;
         height: 382px;
         overflow: hidden;
         display: block;
-        background: rgba(27, 86, 200, 0.14);
-        border: 1px solid #005EA2;
-        margin-left: 30px;
+        /*background: rgba(27, 86, 200, 0.14);*/
+        /*border: 1px solid #005EA2;*/
     }
 
-    .bgCircle {
-        width: 163px;
-        height: 163px;
+    .zoom1 {
+        width: 196px;
+        height: 196px;
         overflow: hidden;
+        display: block;
         margin: 0 auto;
-        margin-top: 38px;
-        background: url("../assets/img/main/radar.png") top center no-repeat;
+        background: url("../assets/img/bigRadar2/1.png");
+        background-position: top center;
+        background-repeat: no-repeat;
         background-size: 100% 100%;
+        opacity: 20%;
     }
 
-    .bgCircle span {
-        position: relative;
-        background: rgba(109, 193, 255, 0.07);
-        border-radius: 250px;
+    .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%;
     }
 
-    #circle1 {
-        width: 30px;
-        height: 30px;
-        top: 10px;
-        left: 20px;
-        animation: ghostUpdown 5s infinite alternate;
-        -webkit-animation: ghostUpdown 5s infinite alternate;
+    .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%;
     }
 
-    #circle2 {
-        width: 10px;
-        height: 10px;
-        top: 90px;
-        left: 110px;
+    .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%;
     }
 
-    #circle3 {
-        width: 34px;
-        height: 34px;
-        top: 123px;
-        left: 112px;
+    .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%;
     }
 
-    #circle4 {
-        width: 14px;
-        height: 14px;
-        top: 155px;
-        left: 163px;
+
+    .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%;
     }
 
-    @keyframes ghostUpdown {
-        from {
-            margin-top: 100px;
-            margin-left: 66px;
-        }
-        to {
-            margin-top: 70px;
-        }
+    .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%;
     }
 
-    @-webkit-keyframes ghostUpdown {
-        from {
-            margin-top: 100px;
-            margin-left: 66px;
-        }
-        to {
-            margin-top: 70px;
-        }
+    .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%;
     }
 
-    .animete-box {
-        width: 160px;
-        height: 160px;
-        position: absolute;
-        left: 138px;
-        top: 200px;
-        transform: translate(-50%, -50%);
-        border-radius: 50%;
+    .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%;
     }
 
-    /*css3波纹*/
-    .wrap__uc-waves {
+    .zoom52 {
+        width: 196px;
+        height: 196px;
         overflow: hidden;
-        height: 1rem;
-        width: 100%;
-        position: absolute;
-        bottom: 0;
+        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%;
     }
 
-    .wrap__uc-waves .wave {
-        width: 15rem;
-        transform-origin: center bottom;
-        position: absolute;
-        left: 0;
-        bottom: 0;
+    .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%;
     }
 
-    .wrap__uc-waves .w1 {
-        background-size: cover;
-        height: .5rem;
-        animation: anim_wave 5s linear infinite;
+    .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%
     }
 
-    .wrap__uc-waves .w2 {
-        background-size: cover;
-        height: .7rem;
-        animation: anim_wave 6s linear infinite;
+    .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;
     }
 
-    @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)
-        }
+    .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;
+    }
 
-    .animete-box:before {
-        content: ' ';
+    .status img {
+        overflow: hidden;
         display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
+        margin: 0 auto;
+        /*margin-top: 140px;*/
     }
 
-    .animete-box:after {
-        content: ' ';
+    .status .warning {
+        width: 100%;
+        overflow: hidden;
         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);
-        }
+        margin: 0 auto;
+        margin-top: 10px;
+        color: #FFDD00;
+        font-size: 14px;
     }
 
-    .dotWarning {
-        width: 5px;
-        height: 5px;
-        background: #FFDD00;
-        background-size: 50px 50px;
-        border-radius: 250px;
+    .safe {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        color: #6DC1FF;
     }
 
-    .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);
-        }
+    @-webkit-keyframes rotation {
 
-        14% {
-            -webkit-transform: scale(1.5);
-            transform: scale(1.5);
+        from {
+            -webkit-transform: rotate(0deg);
         }
 
-        22% {
-            -webkit-transform: scale(1.2);
-            transform: scale(1.2);
+        to {
+            -webkit-transform: rotate(360deg);
         }
 
+    }
 
-        28% {
-            -webkit-transform: scale(1);
-            transform: scale(1);
-        }
-
-        42% {
-            -webkit-transform: scale(1.2);
-            transform: scale(1.2);
-        }
+    @-webkit-keyframes rotation2 {
 
-        54% {
-            -webkit-transform: scale(1.0);
-            transform: scale(1.0);
+        from {
+            -webkit-transform: rotate(0deg);
         }
 
-        60% {
-            -webkit-transform: scale(1.1);
-            transform: scale(1.1);
+        to {
+            -webkit-transform: rotate(-360deg);
         }
 
-        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;
-    }
+    .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;
 
-    .animated {
-        -webkit-animation-duration: 1s;
-        animation-duration: 1s;
-        -webkit-animation-fill-mode: both;
-        animation-fill-mode: both;
     }
 
+    .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;
 
-    @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');
+
+    .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;
-        bottom: -10px;
+        top: 30px;
         width: 100%;
         overflow: hidden;
         display: block;
@@ -483,34 +401,65 @@
         font-family: UnidreamLED;
     }
 
-    .state {
-        position: relative;
-        top: 40px;
-        height: 48px;
-        line-height: 48px;
-        margin: 0 auto;
+    .circle {
+        width: 100%;
+        height: 196px;
+        overflow: hidden;
         display: block;
-        color: #CFEBFF;
-        font-size: 24px;
-        background: rgba(27, 86, 200, 0.51);
-        z-index: 6666;
+        margin: 0 auto;
     }
 
-    .warning {
+    .top {
         position: relative;
-        top: 40px;
-        left: 5px;
-        width: 100px;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        color: #FFDD00;
-        text-align: center;
-        font-size: 16px;
+        bottom: 196px;
     }
 
-    .warning img {
-        display: block;
-        margin: 0 auto;
+    .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>

src/components/SmallRader2.vue

@@ -0,0 +1,516 @@
+<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>

src/components/Watching.vue

@@ -8,10 +8,9 @@
                 </em>
             </li>
             <li v-for="(l,index) in list" :class="{'yellow':l.WarnNum != 0}" :key="index">
-                <span> {{l.Dettime |fmtDate }}</span>
+                <span> {{l.Ctime |fmtDate }}</span>
                 <em>
-                    <i v-if="l.RegionName">{{l.RegionName}}</i>
-                    <i v-if="l.DectectorName">{{l.DectectorName}}</i>
+                    <i v-if="l.Name">{{l.Name}}</i>
                     {{l.WarnString}}</em>
             </li>
 
@@ -60,9 +59,9 @@
                 // 逐行显示
                 // 操作层级为4是单独设备
                 if (parseInt(this.pageLevel) != 4) {
-                    that.wordDisplay(val.RegionDetRs);
+                    that.wordDisplay(val.DetRs);
                 }else{
-                    that.wordDisplay([val.DetRs]);
+                    that.wordDisplay(val.DetRs);
                 }
             },
         },

src/components/runTimeRecord.vue

@@ -16,10 +16,9 @@
                     </em>
                 </li>
                 <li v-for="(l,index) in list" :class="{'yellow':l.WarnNum != 0}" :key="index">
-                    <span> {{l.Dettime |fmtDate }}</span>
+                    <span> {{l.Ctime |fmtDate }}</span>
                     <em>
-                        <i v-if="l.RegionName">{{l.RegionName}}</i>
-                        <i v-if="l.DectectorName">{{l.DectectorName}}</i>
+                        <i v-if="l.Name">{{l.Name}}</i>
                         {{l.WarnString}}</em>
                 </li>
 
@@ -52,9 +51,9 @@
                 // 逐行显示
                 // 操作层级为4是单独设备
                 if (parseInt(this.pageLevel) != 4) {
-                    that.wordDisplay(val.RegionDetRs);
+                    that.wordDisplay(val.DetRs);
                 }else{
-                    that.wordDisplay([val.DetRs]);
+                    that.wordDisplay(val.DetRs);
                 }
             },
         },

src/router/index.js

@@ -34,6 +34,13 @@ const routes = [
                 meta: {
                     title: "WiFi信号记录",
                 }
+            },{
+                path: '/white',
+                name: 'white',
+                component: () => import('@/views/white.vue'),
+                meta: {
+                    title: "白名单",
+                }
             },{
                 path: '/GSign',
                 name: 'GSign',
@@ -55,13 +62,6 @@ const routes = [
                 meta: {
                     title: "二维码管理",
                 }
-            },{
-                path: '/yhgl',
-                name: 'Yhgl',
-                component: () => import('@/views/Yhgl.vue'),
-                meta: {
-                    title: "用户管理",
-                }
             },{
                 path: '/record',
                 name: 'record',
@@ -69,20 +69,6 @@ const routes = [
                 meta: {
                     title: "监测记录",
                 }
-            },{
-                path: '/mockPage',
-                name: 'MockPage',
-                component: () => import('@/views/MockPage.vue'),
-                meta: {
-                    title: "用户管理",
-                }
-            },{
-                path: '/aboutUs',
-                name: 'AboutUs',
-                component: () => import('@/views/AboutUs.vue'),
-                meta: {
-                    title: "关于我们",
-                }
             },{
                 path: '/region',
                 name: 'Region',
@@ -170,7 +156,7 @@ const router = new VueRouter({
 });
 
 // 路由守卫
-router.beforeEach((to,from,next)=>{
+router.beforeEach((to,from,next)=> {
     NProgress.start();
     const isLogin = localStorage.token? true : false;
 

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/AboutUs.vue

@@ -1,71 +0,0 @@
-<template>
-            <div class="content">
-                <br>
-                <br>
-                <br>
-                <!--<img src="../../static/images/comm/logo.png" alt="">-->
-                <div class="text">
-                    <p>号码魔方融合通信平台用户使用协议</p>
-                    <span>
-                        欢迎使用号码魔方融合通信平台平台系统，本系统是由济南市佰意兴网络科技有限公司自行设计开发并拥有独立自主知识产权的移动客户关系管理平台，并集成了各类通信运营商的通信通道资源，通过web页面以及客户端等模式向客户提供服务。
-                        <br><br>
-                        其面向的使用对象是能够承担相应法律责任的公司或个人，若您不具备此资格，请不要使用我们提供的服务。
-                         <br><br>
-                        无论是否实际阅读本协议，您通过网络页面点击确认本协议或实际使用平台服务，均表示您与已就本协议达成一致并同意接受本协议的全部约定内容。
-                        如果您不同意本协议的任意内容，或者无法准确理解本协议条款的解释，请不要同意本协议或使用本协议项下的服务。
-                        否则，表示您已接受了以下所述的条款和条件，同意受本协议约束。
-                         <br><br>
-                        本协议由济南佰意兴网络科技有限公司（以下简称“佰意兴”）与您在山东省济南市签署。
-                    </span>
-                </div>
-            </div>
-</template>
-
-<script>
-export default {
-    data () {
-    return {
-    }
-    },
-    mounted() {
-
-    },
-    methods: {
-
-    },
-    components: {
-
-    }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-    .content img {
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-bottom: 44px;
-    }
-    .text {
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        background: #F8F8F8;
-        padding: 30px 70px;
-        font-size: 12px;
-    }
-    .text p {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-bottom: 44px;
-        text-align: center;
-        font-size: 18px;
-        color: #000000;
-    }
-    .text span {
-        font-size: 12px;
-    }
-</style>

src/views/Equip.vue

@@ -306,7 +306,7 @@
                         {value: 1, label: '进行中'},
                         {value: 2, label: '已完成'},
                     ],
-                    time1: globalBt2(),
+                    time1: globalBt3(2),
                 },
                 pageination: {
                     pageItem: 10,

src/views/GSign.vue

@@ -131,7 +131,7 @@
                         {value: 1, label: '进行中'},
                         {value: 2, label: '已完成'},
                     ],
-                    time1: globalBt2(),
+                    time1: globalBt3(2),
                 },
                 pageination: {
                     pageItem: 10,

src/views/Hardware.vue

@@ -264,7 +264,7 @@
                         {value: 1, label: '进行中'},
                         {value: 2, label: '已完成'},
                     ],
-                    time1: globalBt2(),
+                    time1: globalBt3(2),
                 },
                 pageination: {
                     pageItem: 10,

src/views/Main.vue

@@ -137,11 +137,7 @@
                 loftTitle: '',
                 consoleWidth: 0,
                 BoolSafe: 0,
-                autoTime: 2000,//定时刷新的时间间隔
-                // pageLevel: 1,//当前为楼层
-                // pageLevel: 2,//当前为楼层区域
-                // pageLevel: 3,//当前为房间
-                // pageLevel: 4,//当前为单个设备
+                autoTime: 3000,//定时刷新的时间间隔
             }
         },
         mounted() {
@@ -149,26 +145,16 @@
             that.loadingState = false;
 
             localStorage.Start = 0;
-            //
-            // if (!localStorage.Start) {
-            //     localStorage.Start = 0;
-            // } else {
-            //     // localStorage.Start = parseInt(localStorage.Start);
-            //     localStorage.Start = 0;
-            // }
-
             // 获取数据
             that.getDate();
             // 定时查询
-            that.timer = setInterval(() => {
+            that.timer = window.setInterval(() => {
                 that.getDate();
             }, that.autoTime);
         },
         destroyed() {
             //页面销毁时清除定时器
-            clearInterval(this.timer);
-            //页面销毁时清除添加条数动画的定时器
-            clearInterval(this.wordDisplay);
+            window.clearInterval(this.timer);
         },
         methods: {
             // 改编宽度
@@ -202,8 +188,8 @@
                         regionid: this.regionId,
                         supregionid: 0,
                         detidstr: 0,
-                        bt: globaltime2String(globalBt2()[0]) + ' 00:00:01',//开始时间
-                        et: globaltime2String(globalBt2()[1]) + ' 23:59:59',//结束时间
+                        bt: globaltime2String(globalBt3(2)[0]) + ' 00:00:01',//开始时间
+                        et: globaltime2String(globalBt3(2)[1]) + ' 23:59:59',//结束时间
                         start: 1,//
                         tableMax: 10,//
                         Start: localStorage.Start
@@ -231,8 +217,8 @@
                     let param = {
                         token: localStorage.token,
                         detectorId: this.detectorId,
-                        bt: globaltime2String(globalBt2()[0]) + ' 00:00:01',//开始时间
-                        et: globaltime2String(globalBt2()[1]) + ' 23:59:59',//结束时间
+                        bt: globaltime2String(globalBt3(2)[0]) + ' 00:00:01',//开始时间
+                        et: globaltime2String(globalBt3(2)[1]) + ' 23:59:59',//结束时间
                         start: 1,//
                         tableMax: 10,//
                         Start: localStorage.Start
@@ -359,14 +345,6 @@
                     }
                 })
             },
-            wordDisplay(word) {
-                let index = 0;
-                let that = this;
-                setTimeout(function () {
-                    that.list.unshift(word[index]);
-                    index = index + 1;
-                }, 300);
-            },
 
             // Wifi柱状图信息传入探测器Id
             getDetectorWifixyInfolist(postdata) {
@@ -621,6 +599,7 @@
     }
 
     .manageContainer .tlt {
+        width: 242px;
         float: left;
         padding-left: 10px;
         margin-top: 60px;

src/views/Main2.vue

@@ -1,127 +0,0 @@
-<template>
-    <div class="mainContainer">
-        <div class="lt">
-            <Console @refreshList="changPanel"></Console>
-        </div>
-        <div class="center">
-            <div class="cube">
-                <Total :post-title="pageLevel" :region-id="regionId"></Total>
-            </div>
-            <div class="cube">
-                <WifiSign></WifiSign>
-            </div>
-            <Scan></Scan>
-        </div>
-        <div class="rt">
-            <div class="cube" v-if="pageLevel == 0||pageLevel == 4">
-                <HistoryRecord></HistoryRecord>
-            </div>
-            <div class="cube" v-if="pageLevel == 1||pageLevel == 2||pageLevel == 3">
-                <runTimeRecord></runTimeRecord>
-            </div>
-            <div v-if="pageLevel != 4">
-                <EquipInfo></EquipInfo>
-            </div>
-            <!--单个设备情况-->
-            <div v-if="pageLevel == 4">
-                <SingleEquipInfo></SingleEquipInfo>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import Console from '@/components/Console.vue'
-    import WifiSign from '@/components/WifiSign.vue'
-    import Scan from '@/components/Scan.vue'
-    import HistoryRecord from '@/components/HistoryRecord.vue'
-    import EquipInfo from '@/components/EquipInfo.vue'
-    import SingleEquipInfo from '@/components/SingleEquipInfo.vue'
-    import Total from '@/components/Total.vue'
-    import runTimeRecord from '@/components/runTimeRecord.vue'
-
-    export default {
-        data() {
-            return {
-                loadingState: false,
-                pageLevel: 0,//默认查全部
-                regionId: 0,//默认查全部
-                // pageLevel: 1,//当前为楼层
-                // pageLevel: 2,//当前为楼层区域
-                // pageLevel: 3,//当前为房间
-                // pageLevel: 4,//当前为单个设备
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods: {
-            // 初始化
-            init() {
-                this.loadingState = false;
-            },
-            changPanel(level, btn) {
-                this.BtnId = btn.Id ? btn.Id : 0;
-                if (btn == 0) {
-                    // 首页单独处理
-                    this.pageLevel = 0
-                } else {
-                    this.pageLevel = parseInt(level);
-                }
-            },
-        },
-        components: {
-            Console, WifiSign, Scan, HistoryRecord, EquipInfo, Total, runTimeRecord, SingleEquipInfo
-        }
-    }
-</script>
-
-<style scoped>
-    @import "../assets/css/cube.css";
-
-    ul, li {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-
-    em, s, i {
-        font-style: normal;
-    }
-
-    .mainContainer {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .lt {
-        width: 365px;
-        float: left;
-        overflow: hidden;
-        margin-right: 10px;
-    }
-
-    .center {
-        width: 976px;
-        /*height: 906px;*/
-        float: left;
-        overflow: hidden;
-    }
-
-    .rt {
-        width: 452px;
-        float: right;
-        overflow: hidden;
-        margin-right: 0px;
-    }
-
-    .cube {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-bottom: 5px;
-    }
-</style>

src/views/MockPage.vue

@@ -1,45 +0,0 @@
-<template>
-    <div>
-        <h5>mock数据显示</h5>
-        <ul v-for="r in res">
-            <li>{{r.id}}</li>
-        </ul>
-    </div>
-</template>
-
-<script>
-    import global from '../Global.js'
-    import { worldDetail } from '../api/getApiRes.js'
-
-    export default {
-        data() {
-            return {
-                res: []
-            }
-        },
-        mounted() {
-            this.getInfo();
-        },
-        methods: {
-            getInfo() {
-                const that = this;
-                let param = {};
-                worldDetail(param).then(res => {
-                    if (res.Code == 0) {
-                        that.res = res.Rs;
-                    } else {
-                        console.log(123);
-                    }
-                })
-            }
-        }
-    }
-</script>
-
-<style scoped>
-    ul, li {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-</style>

src/views/PhoneSign.vue

@@ -109,8 +109,11 @@
                     width="120"
             >
                 <template slot-scope="scope">
-                    <span class="yellow" v-if="scope.row.DangerLevel == -1">危险</span>
-                    <span v-if="scope.row.DangerLevel != -1">安全</span>
+                    <span  v-if="scope.row.DangerLevel == -1">正常</span>
+                    <span v-if="scope.row.DangerLevel == 1">白名单</span>
+                    <span v-if="scope.row.DangerLevel == 2">已处理</span>
+                    <span class="yellow" v-if="scope.row.DangerLevel == 3">危险</span>
+                    <span class="yellow" v-if="scope.row.DangerLevel == 4">危险</span>
                 </template>
             </el-table-column>
         </el-table>
@@ -137,7 +140,7 @@
                 tabs: [
                     {name: '手机信号记录', url: 'phoneSign'},
                     {name: 'WiFi信号记录', url: 'wifiSign'},
-                    // {name: '0-6G扫描记录', url: 'GSign'},
+                    {name: '白名单', url: 'white'},
                 ],
                 // panel 配置项目
                 panel: {
@@ -162,7 +165,7 @@
                     ],
                     detOptions: [],
                     detidstr: 0,
-                    time1: globalBt2(),
+                    time1: globalBt3(2),
                 },
                 pageination: {
                     pageItem: 10,
@@ -229,7 +232,7 @@
                     bt: globaltime2String(that.panel.time1[0]) + ' 00:00:01',//开始时间
                     et: globaltime2String(that.panel.time1[1]) + ' 23:59:59',//结束时间
                     start: 1,//
-                    tableMax: 9999,//
+                    tableMax: 3000,//
                 };
                 let postdata = qs.stringify(param);
                 LogPhoneDetectedQueryByDetector(postdata).then(res => {
@@ -243,7 +246,6 @@
                             that.allTableData = [];
                             that.recordsTotal = 0;
                         }
-
                         // 设置分页数据
                         that.setPaginations();
                     } else {
@@ -319,7 +321,12 @@
     @import "../assets/css/panel.css";
 
     .tabs ul {
-        width: 400px;
+        width: 492px;
+        overflow: hidden;
+        display: block;
+        margin: 5px auto;
+        list-style: none;
+        padding-left: 0;
     }
 
     .content {

src/views/Police.vue

@@ -193,7 +193,7 @@
                         {value: 1, label: '进行中'},
                         {value: 2, label: '已完成'},
                     ],
-                    time1: globalBt2(),
+                    time1: globalBt3(2),
                 },
                 pageination: {
                     pageItem: 10,

src/views/Qrcodemanage.vue

@@ -275,7 +275,7 @@
                         {value: 1, label: '无期限'},
                         {value: 2, label: '有时限'},
                     ],
-                    time1: globalBt2(),
+                    time1: globalBt3(2),
                 },
                 dialog: {
                     shopID: 1,//One and always is one

src/views/WifiSign.vue

@@ -22,6 +22,17 @@
                                 </el-option>
                             </el-select>
                         </el-col>
+                        <el-col :span="4">
+                            <em>信号类型:</em>
+                            <el-select v-model="panel.detectedType">
+                                <el-option
+                                        v-for="item in panel.detectedoptions"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </el-col>
                         <el-col :span="4">
                             <em>被检Mac:</em>
                             <el-input v-model="panel.detectedmac" placeholder="请输入被检测设备Mac"></el-input>
@@ -58,12 +69,12 @@
                     sortable
             >
             </el-table-column>
-            <el-table-column
-                    prop="DetectorId"
-                    label="探测设备ID"
-                    width="120"
-            >
-            </el-table-column>
+            <!--<el-table-column-->
+            <!--prop="DetectorId"-->
+            <!--label="探测设备ID"-->
+            <!--width="120"-->
+            <!--&gt;-->
+            <!--</el-table-column>-->
             <el-table-column
                     prop="Macstr"
                     label="Mac地址"
@@ -74,13 +85,6 @@
                     prop="ProduceCom"
                     label="品牌"
             >
-                <!--<template slot-scope="scope">-->
-                <!--<el-tooltip class="item" effect="dark" :content="scope.row.ProduceCom" placement="top-start">-->
-                <!--<span>-->
-                <!--{{ scope.row.ProduceCom.length > 40 ?  scope.row.ProduceCom.substr(0,40)+'...' : scope.row.ProduceCom }}-->
-                <!--</span>-->
-                <!--</el-tooltip>-->
-                <!--</template>-->
             </el-table-column>
             <el-table-column
                     prop="Path"
@@ -110,17 +114,37 @@
                     {{scope.row.BeginTime|filterFmtDate}} --- {{scope.row.EndTime|filterFmtDate}}
                 </template>
             </el-table-column>
+            <el-table-column
+                    prop="DeviceType"
+                    label="信号类型"
+                    width="120"
+                    :formatter="filterDeviceType"
+            >
+            </el-table-column>
             <el-table-column
                     prop="DangerLevel"
                     label="危险等级"
                     width="120"
             >
                 <template slot-scope="scope">
-                    <span class="yellow" v-if="scope.row.DangerLevel == -1">危险</span>
-                    <span v-if="scope.row.DangerLevel != -1">安全</span>
+                    <span  v-if="scope.row.DangerLevel == -1">正常</span>
+                    <span v-if="scope.row.DangerLevel == 1">白名单</span>
+                    <span v-if="scope.row.DangerLevel == 2">已处理</span>
+                    <span class="yellow" v-if="scope.row.DangerLevel == 3">危险</span>
+                    <span class="yellow" v-if="scope.row.DangerLevel == 4">危险</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="Id"
+                    label="操作"
+                    width="120"
+            >
+                <template slot-scope="scope">
+                    <el-button size="small" type="primary" @click="addWhite(scope.row)" v-if="scope.row.DangerLevel != 1">
+                        加入白名单
+                    </el-button>
                 </template>
             </el-table-column>
-
         </el-table>
         <br>
         <el-pagination
@@ -135,7 +159,11 @@
 
 <script>
     import Global from '../Global.js'
-    import {LogWifiDetectedQueryByDetector, GetRegionAndDectorSelect} from '../api/getApiRes.js'
+    import {
+        LogWifiDetectedQueryByDetector,
+        GetRegionAndDectorSelect,
+        WhiteListAdd
+    } from '../api/getApiRes.js'
 
     let qs = require('qs');
     export default {
@@ -145,7 +173,7 @@
                 tabs: [
                     {name: '手机信号记录', url: 'phoneSign'},
                     {name: 'WiFi信号记录', url: 'wifiSign'},
-                    // {name: '0-6G扫描记录', url: 'GSign'},
+                    {name: '白名单', url: 'white'},
                 ],
                 // panel 配置项目
                 panel: {
@@ -154,6 +182,13 @@
                     compname: '',
                     keyword: '',
                     USERCODE: '',
+                    detectedType: 99,
+                    detectedoptions: [
+                        {value: 99, label: '全部'},
+                        {value: 1, label: '无线摄像头'},
+                        {value: 2, label: '无线热点'},
+                        {value: 0, label: '其他无线设备'},
+                    ],
                     detectedmac: '',
                     taskstatus: 99,
                     options: [
@@ -163,7 +198,7 @@
                     ],
                     detOptions: [],
                     detidstr: 0,
-                    time1: globalBt2(),
+                    time1: globalBt3(1),
                 },
                 pageination: {
                     pageItem: 10,
@@ -228,10 +263,11 @@
                     token: localStorage.token,
                     detectorId: that.panel.detidstr,//探测器id列表
                     detectedmac: that.panel.detectedmac,//被检测设备Mac
+                    detectedtype: that.panel.detectedType,//被检测设备类型
                     bt: globaltime2String(that.panel.time1[0]) + ' 00:00:01',//开始时间
                     et: globaltime2String(that.panel.time1[1]) + ' 23:59:59',//结束时间
                     start: 1,//
-                    tableMax: 9999,//
+                    tableMax: 5000,//
                 };
                 let postdata = qs.stringify(param);
                 LogWifiDetectedQueryByDetector(postdata).then(res => {
@@ -301,6 +337,62 @@
             filterSignal(val, row, column) {
                 //127信号是无效强度状态
                 return column = column == 127 ? '- -' : column;
+            },
+            filterDeviceType(val, row, column) {
+                switch (parseInt(column)) {
+                    case 0:
+                        return '其他无线设备';
+                        break;
+                    case 1:
+                        return '无线摄像头';
+                        break;
+                    case 2:
+                        return '无线热点';
+                        break;
+
+                }
+            },
+            // 加入白名单
+            addWhite(row) {
+                let that = this;
+                this.$prompt('请输入备注', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    inputPlaceholder: '备注内容',
+                    inputPattern: /[\u4e00-\u9fa5_a-zA-Z0-9_]{0,10}/,
+                    inputErrorMessage: '备注长度最多10个字'
+                }).then(({value}) => {
+                    let param = {
+                        token: localStorage.token,
+                        mac: row.Macstr,
+                        regionId: row.RegionId,
+                        dangerLevelUserOwn: 2,//危险类型 1：已处理 2：白名单
+                        deviceType: row.DeviceType,
+                        name: row.ProduceCom,
+                        memo: value,
+                    };
+                    let postdata = qs.stringify(param);
+                    WhiteListAdd(postdata).then(res => {
+                        let json = res;
+                        if (json.Code == 0) {
+                            this.getTableQuery();
+                            that.$message({
+                                showClose: true,
+                                type: 'success',
+                                message: '当前设备已加入白名单中'
+                            });
+                        } else {
+                            that.$message.error(json.Memo);
+                        }
+                    });
+                    return false
+                }).catch((e) => {
+                    console.log(e);
+                    that.$message({
+                        type: 'info',
+                        message: '取消加入白名单'
+                    });
+                });
             }
         },
         filters: {
@@ -316,7 +408,12 @@
     @import "../assets/css/panel.css";
 
     .tabs ul {
-        width: 400px;
+        width: 492px;
+        overflow: hidden;
+        display: block;
+        margin: 5px auto;
+        list-style: none;
+        padding-left: 0;
     }
 
     .content {
@@ -327,8 +424,4 @@
         padding-left: 20px;
     }
 
-    /deep/ .el-table__empty-text {
-        color: #015B9E;
-    }
-
 </style>

src/views/Yhgl.vue

@@ -1,237 +0,0 @@
-<template>
-    <div>
-        <el-card class="panel" shadow="always">
-            <div class="panel-body">
-                <div class="panel_control">
-                    <el-row :gutter="20">
-                        <el-col :span="4">
-                            <em>起始:</em>
-                            <el-date-picker
-                                    class="panel_data"
-                                    v-model="panel.time1[0]"
-                                    type="date"
-                                    placeholder="起始日期">
-                            </el-date-picker>
-                        </el-col>
-                        <el-col :span="4">
-                            <em>截止:</em>
-                            <el-date-picker
-                                    class="panel_data"
-                                    v-model="panel.time1[1]"
-                                    type="date"
-                                    placeholder="截止日期">
-                            </el-date-picker>
-                        </el-col>
-                        <el-col :span="4">
-                            <em>用户账号:</em>
-                            <el-input v-model="panel.USERCODE" placeholder="请输入用户账号"></el-input>
-                        </el-col>
-                        <el-col :span="4">
-                            <em>关键词:</em>
-                            <el-input v-model="panel.keyword" placeholder="请输入关键词"></el-input>
-                        </el-col>
-                        <el-col :span="4">
-                            <em>状态:</em>
-                            <el-select v-model="panel.taskstatus">
-                                <el-option
-                                        v-for="item in panel.options"
-                                        :key="item.value"
-                                        :label="item.label"
-                                        :value="item.value">
-                                </el-option>
-                            </el-select>
-                        </el-col>
-                        <el-col :span="4">
-                            <el-button size="small" type="primary" @click="query">查询</el-button>
-                        </el-col>
-                    </el-row>
-                </div>
-            </div>
-        </el-card>
-        <el-card class="table" shadow="always">
-             <span class="dataTables_length">
-            每页  <el-select v-model="pageination.pageItem" placeholder="请选择条数" @change="handleSizeChange">
-            <el-option
-                    v-for="item in pageination.pageoptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-            </el-option>
-        </el-select>
-            条记录
-        </span>
-            <el-table
-                    :data="tableData"
-                    border
-                    style="width: 100%">
-                <el-table-column
-                        prop="date"
-                        label="日期"
-                        width="180">
-                </el-table-column>
-                <el-table-column
-                        prop="name"
-                        label="姓名"
-                        width="180">
-                </el-table-column>
-                <el-table-column
-                        prop="address"
-                        label="地址">
-                </el-table-column>
-            </el-table>
-            <br>
-            <el-pagination :total="pageination.total" :page-size="pageination.pageItem"
-                           @current-change="pageChange"></el-pagination>
-        </el-card>
-    </div>
-
-</template>
-
-<script>
-    import Global from '../Global.js'
-    export default {
-        data() {
-            return {
-                // panel 配置项目
-                panel: {
-                    usercode: '',
-                    username: '',
-                    compname: '',
-                    keyword: '',
-                    USERCODE: '',
-                    taskstatus: 99,
-                    options: [
-                        {value: 99, label: '全部'},
-                        {value: 1, label: '进行中'},
-                        {value: 2, label: '已完成'},
-                    ],
-                    time1: globalBt(),
-                },
-                pageination: {
-                    pageItem: 100,
-                    pageoptions: pageOptions(),
-                    total: 100,
-                    pageIndex: 1,
-                },
-                tableData: [{
-                    date: '2016-05-02',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1518 弄'
-                }, {
-                    date: '2016-05-04',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1517 弄'
-                }, {
-                    date: '2016-05-01',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1519 弄'
-                }, {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1516 弄'
-                }]
-            }
-        },
-        mounted() {
-            this.getTableQuery();
-        },
-        methods: {
-            // 查询按钮
-            query() {
-                this.getTableQuery();
-                this.$message.success('查询完毕');
-            },
-            // 页面数据查询
-            getTableQuery() {
-                // let that = this;
-                // that.loading = true;
-                // let url = headapi + '?ctl=ajax&mod=dial&act=taskListQuery';//获取
-                // let param = {
-                //     'taskstatus': that.panel.taskstatus,
-                //     'bt': globaltime2String(that.panel.time1[0]),
-                //     'et': globaltime2String(that.panel.time1[1]),
-                //     'KEYWORD': that.panel.keyword,
-                //     'USERCODE': that.panel.USERCODE,
-                // };
-                // let JSON = '';
-                // let postdata = qs.stringify(param);
-                // axios.post(url, postdata)
-                //     .then(function (response) {
-                //         JSON = response.data;
-                //         that.loading = false;
-                //         that.allTableData = JSON.rs;
-                //         that.recordsTotal = JSON.rs.length;
-                //         // 设置分页数据
-                //         that.setPaginations();
-                //     })
-                //     .catch(function (error) {
-                //         console.log(error);
-                //     });
-            },
-            // 导出excel
-            btnExpAll() {
-                let that = this;
-                let url = headapi + '?ctl=ajax&mod=czgl&act=czcx_excel';//获取
-                let bt = globaltime2String(that.panel.time1[0]);
-                let et = globaltime2String(that.panel.time1[1]);
-                let usercode = that.panel.usercode;
-                window.location = url + '&bt=' + bt + '&et=' + et + '&usercode=' + usercode;
-            },
-            // 设置分页数据
-            setPaginations() {
-                // 分页属性
-                let that = this;
-                that.pageination.total = that.recordsTotal;
-                // 默认分页
-                that.tableData = that.allTableData.filter((item, index) => {
-                    return index < that.pageination.pageItem;
-                });
-            },
-            // 每页显示数量
-            handleSizeChange() {
-                let that = this;
-                that.tableData = that.allTableData.filter((item, index) => {
-                    return index < that.pageination.pageItem;
-                });
-                that.draw = that.pageination.pageItem;
-                that.getTableQuery();
-            },
-            // 翻页
-            pageChange(pageIndex) {
-                let that = this;
-                // 获取当前页
-                let index = that.pageination.pageItem * (pageIndex - 1);
-                // 数据总数
-                let nums = that.pageination.pageItem * pageIndex;
-                // 容器
-                let tables = [];
-                for (var i = index; i < nums; i++) {
-                    if (that.allTableData[i]) {
-                        tables.push(that.allTableData[i])
-                    }
-                    this.tableData = tables;
-                }
-                that.start = index * that.draw;
-                that.getTableQuery();
-            },
-            // 自动排序
-            sortChange(params) {
-                console.log(params)
-            },
-            // 过滤时间
-            filterFmtDate(value, row, column) {
-                let that = this;
-                return globalfmtDate(column, 11);
-            },
-            // 过滤金额
-            filterMoney(value, row, column) {
-                let that = this;
-                return parseFloat(column).toFixed(2);
-            },
-        },
-    }
-</script>
-
-<style scoped>
-    @import "../assets/css/panel.css";
-</style>

src/views/white.vue

@@ -0,0 +1,340 @@
+<template>
+    <div class="content">
+        <div class="tabs">
+            <ul>
+                <li v-for="(tab,i) in tabs" @click="goTab(tab.url)" :class="{'active':tabIndex == i}">
+                    {{tab.name}}
+                </li>
+            </ul>
+        </div>
+        <div class="panel">
+            <div class="panel-body">
+                <div class=" panel_control">
+                    <el-row :gutter="20">
+                        <el-col :span="4">
+                            <em>Mac:</em>
+                            <el-input class="macContianer" v-model="panel.detectedmac" placeholder="请输入白名单Mac"></el-input>
+                        </el-col>
+                        <el-col :span="4">
+                            <em>关键词:</em>
+                            <el-input v-model="panel.keywords" placeholder="请输入关键词"></el-input>
+                        </el-col>
+                        <el-col :span="6">
+                            <em>检测时间:</em>
+                            <el-date-picker
+                                    v-model="panel.time1"
+                                    type="daterange"
+                                    range-separator="至"
+                                    start-placeholder="开始日期"
+                                    end-placeholder="结束日期">
+                            </el-date-picker>
+                        </el-col>
+                        <el-col :span="4">
+                            <el-button size="small" type="primary" @click="query">查询</el-button>
+                        </el-col>
+                    </el-row>
+                </div>
+            </div>
+        </div>
+        <el-table
+                :data="tableData"
+                is-horizontal-resize
+                :default-sort="{prop: 'date', order: 'descending'}"
+                v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)"
+                class=""
+                stripe
+        >
+            <el-table-column
+                    type="index"
+                    label="序号"
+                    width="60"
+                    sortable
+            >
+            </el-table-column>
+            <el-table-column
+                    prop="Name"
+                    label="设备"
+                    width="420"
+            >
+            </el-table-column>
+            <el-table-column
+                    prop="Mac"
+                    label="Mac地址"
+                    width="160"
+            >
+            </el-table-column>
+
+            <el-table-column
+                    prop="Regionname"
+                    label="位置"
+                    width="260"
+            >
+            </el-table-column>
+            <el-table-column
+                    prop="CreateTime"
+                    label="标注时间"
+            >
+                <template slot-scope="scope">
+                    {{scope.row.CreateTime |fmtDate}}
+                </template>
+            </el-table-column>
+            <el-table-column
+                    prop="Usercode"
+                    label="标注者"
+            >
+            </el-table-column>
+            <el-table-column
+                    prop="Memo"
+                    label="备注"
+            >
+            </el-table-column>
+            <el-table-column
+                    prop="Id"
+                    label="操作"
+                    width="120"
+            >
+                <template slot-scope="scope">
+                    <el-button size="small" type="primary" @click="remevoWhite(scope.row.Id)">移出白名单</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <br>
+        <el-pagination
+                background
+                :total="pageination.total"
+                :page-size="pageination.pageItem"
+                @current-change="pageChange"
+        ></el-pagination>
+    </div>
+
+</template>
+
+<script>
+    import Global from '../Global.js'
+    import {
+        WhiteListQuery,
+        RemoveFromWhiteList
+    } from '../api/getApiRes.js'
+
+    let qs = require('qs');
+    export default {
+        data() {
+            return {
+                tabIndex: 2,
+                tabs: [
+                    {name: '手机信号记录', url: 'phoneSign'},
+                    {name: 'WiFi信号记录', url: 'wifiSign'},
+                    {name: '白名单', url: 'white'},
+                ],
+                // panel 配置项目
+                panel: {
+                    usercode: '',
+                    username: '',
+                    compname: '',
+                    keywords: '',
+                    USERCODE: '',
+                    detectedmac: '',
+                    taskstatus: 99,
+                    options: [
+                        {value: 99, label: '全部'},
+                        {value: 1, label: '进行中'},
+                        {value: 2, label: '已完成'},
+                    ],
+                    detOptions: [],
+                    detidstr: 0,
+                    time1: globalBt3(2),
+                },
+                pageination: {
+                    pageItem: 10,
+                    pageoptions: pageOptions(),
+                    total: 300,
+                    pageIndex: 1,
+                },
+                draw: 1,
+                start: 0,
+                recordsTotal: 0,
+                tableData: [],
+                allTableData: [],
+                limit: '10',
+                multipleSort: false,
+                loading: true,
+                fileList: [],
+                multipleSelection: [],
+                detectedmac: '',
+            }
+        },
+        mounted() {
+            this.getTableQuery();
+        },
+        methods: {
+            // 跳转tab页面
+            goTab(url) {
+                this.$router.push({path: url});
+            },
+            // 查询按钮
+            query() {
+                this.getTableQuery();
+                this.$message.success('查询完毕');
+            },
+            // 页面数据查询
+            getTableQuery() {
+                // 获取探测器列表
+                let that = this;
+                that.loading = true;
+                let param = {
+                    token: localStorage.token,
+                    detectedmac: that.panel.detectedmac,//被检测设备Mac
+                    keywords: that.panel.keywords,//关键字
+                    bt: globaltime2String(that.panel.time1[0]) + ' 00:00:01',//开始时间
+                    et: globaltime2String(that.panel.time1[1]) + ' 23:59:59',//结束时间
+                    start: 1,//
+                    tableMax: 9999,//
+                };
+                let postdata = qs.stringify(param);
+                WhiteListQuery(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.loading = false;
+                        if (json.Rs) {
+                            that.allTableData = json.Rs;
+                            that.recordsTotal = json.Rs.length;
+                        } else {
+                            that.allTableData = [];
+                            that.recordsTotal = 0;
+                        }
+
+                        // 设置分页数据
+                        that.setPaginations();
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                })
+            },
+            // 设置分页数据
+            setPaginations() {
+                // 分页属性
+                let that = this;
+                that.pageination.total = that.recordsTotal;
+                // 默认分页
+                that.tableData = that.allTableData.filter((item, index) => {
+                    return index < that.pageination.pageItem;
+                });
+            },
+            // 每页显示数量
+            handleSizeChange() {
+                let that = this;
+                that.tableData = that.allTableData.filter((item, index) => {
+                    return index < that.pageination.pageItem;
+                });
+                that.draw = that.pageination.pageItem;
+                that.getTableQuery();
+            },
+            // 翻页
+            pageChange(pageIndex) {
+                let that = this;
+                // 获取当前页
+                let index = that.pageination.pageItem * (pageIndex - 1);
+                // 数据总数
+                let nums = that.pageination.pageItem * pageIndex;
+                // 容器
+                let tables = [];
+                for (var i = index; i < nums; i++) {
+                    if (that.allTableData[i]) {
+                        tables.push(that.allTableData[i])
+                    }
+                    this.tableData = tables;
+                }
+                that.start = index * that.draw;
+                // that.getTableQuery();
+            },
+            // 自动排序
+            sortChange(params) {
+                console.log(params)
+            },
+            // 过滤金额
+            filterMoney(value, row, column) {
+                return parseFloat(column).toFixed(2);
+            },
+            filterSignal(val, row, column) {
+                //127信号是无效强度状态
+                return column = column == 127 ? '- -' : column;
+            },
+            remevoWhite(Id) {
+                let that = this;
+                this.$confirm('此操作将从白名单移出该设备, 是否继续?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    let param = {
+                        token: localStorage.token,
+                        knowndeviceid : Id,
+                    };
+                    let postdata = qs.stringify(param);
+                    RemoveFromWhiteList(postdata).then(res => {
+                        let json = res;
+                        if (json.Code == 0) {
+                            that.$message({
+                                showClose: true,
+                                message: '白名单移出成功！',
+                                type: 'success'
+                            });
+                            that.getTableQuery();
+                        } else {
+                            that.$message.error(json.Memo);
+                        }
+                    })
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消删除'
+                    });
+                });
+            }
+        },
+        filters: {
+            // 过滤时间
+            filterFmtDate(column) {
+                return nonTfmtDate(column, 16);
+            },
+            fmtDate: function (value) {
+                let res = '';
+                if (!value) {
+                    return '---';
+                } else {
+                    res = new Date(+new Date(value) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
+                    return res;
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    @import "../assets/css/panel.css";
+
+    .tabs ul {
+        width: 492px;
+        overflow: hidden;
+        display: block;
+        margin: 5px auto;
+        list-style: none;
+        padding-left: 0;
+    }
+
+    .content {
+        width: 98%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        padding-left: 20px;
+    }
+
+    /deep/ .el-table__empty-text {
+        color: #015B9E;
+    }
+    .panel /deep/ .macContianer .el-input__inner {
+        width: 170px;
+    }
+
+</style>