qrcode poster

src/api/getApiRes.js

@@ -272,6 +272,18 @@ export function QrCodeAdd(postdata) {
     let url = headapi + 'v1/Detector/QrCodeAdd';
     return getApiBasic(url, postdata);
 }
+// 修改二维码
+export function QrCodeEdit(postdata) {
+    // 修改二维码
+    let url = headapi + 'v1/Detector/QrCodeEdit';
+    return getApiBasic(url, postdata);
+}
+// 修改二维码状态
+export function QrcodeEditStatus(postdata) {
+    // 修改二维码状态
+    let url = headapi + 'v1/Detector/QrcodeEditStatus';
+    return getApiBasic(url, postdata);
+}
 // 某二维码下实时探测情况
 export function DeviceInfoByQrCodeId(postdata) {
     // 某二维码下实时探测情况

src/views/Createmeetingqrcode.vue

@@ -7,7 +7,8 @@
                 <p>{{qrname}} 房间</p>
                 <span>检测房间安全请您扫描二维码</span>
             </div>
-            <el-button v-print="'#printMer'"   id="coryCode" type="primary" @click="printQrcode">打印二维码</el-button>
+            <el-button v-print="'#printMer'" id="coryCode" type="primary" @click="printQrcode">打印二维码</el-button>
+            <el-button id="goback" type="primary" @click="goback">返回列表</el-button>
         </div>
         <div id="printMer" class="posterPart " v-show="posterPart">
             <div class="poster">
@@ -29,6 +30,7 @@
 <script>
     import QRCode from 'qrcodejs2'
     import md5 from 'js-md5';
+
     let Base64 = require('js-base64').Base64;
     import Print from 'vue-print-nb'
 
@@ -53,15 +55,15 @@
                 this.getVfcode = this.$route.query.getVfcode;
                 let webSite = "http://sd.tickdig.com:85/#/";
                 let times = Base64.encode(new Date());
-                let url = "/poster?q=" +  Base64.encode(this.qrcodeId)+"&c="+Base64.encode(1) + '&t=' + times + '&v=' + Base64.encode(this.getVfcode);
-                this.writeQrcode(webSite+url);
+                let url = "/poster?q=" + Base64.encode(this.qrcodeId) + "&c=" + Base64.encode(1) + '&t=' + times + '&v=' + Base64.encode(this.getVfcode);
+                this.writeQrcode(webSite + url);
                 let testSite = "http://192.168.0.162:8080" + url;
                 console.log(testSite);
                 console.log(webSite + url);
             },
-            writeQrcode(url){
-                this.$refs.box.innerHTML="";
-                this.$refs.box2.innerHTML="";
+            writeQrcode(url) {
+                this.$refs.box.innerHTML = "";
+                this.$refs.box2.innerHTML = "";
                 let qrcode = new QRCode('qrcode', {
                     width: 220,
                     height: 220, // 高度
@@ -77,8 +79,11 @@
                     foreground: '#ffffff'
                 });
             },
-            printQrcode(){
+            printQrcode() {
                 this.posterPart = true;
+            },
+            goback() {
+                this.$router.push({path: '/qrcodemanage'});
             }
         },
 
@@ -282,4 +287,10 @@
         margin: 0 auto;
     }
 
+    #goback {
+        display: block;
+        margin-left: 0;
+        margin: 0 auto;
+        margin-top: 40px;
+    }
 </style>

src/views/PhoneSign.vue

@@ -39,7 +39,7 @@
                                         v-for="item in panel.OperatorOptions"
                                         :key="item.Id"
                                         :label="item.Name"
-                                        :value="item.Name">
+                                        :value="item.value">
                                 </el-option>
                             </el-select>
                         </el-col>

src/views/Poster.vue

@@ -1,1916 +1,1900 @@
-    <template>
-        <div id="content" class="container">
-            <div class="topImg">
-                <!--默认头图-->
-                <img src="../assets/img/poster/head.png" alt="" v-if="!imgSrc">
-                <!--加载的头图-->
-                <img :src="imgSrc" alt="" v-else>
-            </div>
-            <div class="search">
-                <div class="status">
-                    <div v-if="DangerCamMacArr == 0">
-                        <div class="Scan Safe_circle thisCircle"></div>
-                        <div class="Scan_s Safe_circle  thisCircle"></div>
-                        <div class="thisCircle Safe_circle">
-                            <span id="roomName">{{roomName}}</span>
-                            <span id="statusText">{{statusText}}</span>
-                        </div>
-                    </div>
-                    <div v-else>
-                        <div class="Scan Danger_circle thisCircle"></div>
-                        <div class="Scan_s  Danger_circle thisCircle"></div>
-                        <div class="thisCircle Danger_circle">
-                            <span id="roomName">{{roomName}}</span>
-                            <span id="statusText">{{statusText}}</span>
-                        </div>
+<template>
+    <div id="content" class="container">
+        <div class="topImg">
+            <!--默认头图-->
+            <img src="../assets/img/poster/head.png" alt="" v-if="!imgSrc">
+            <!--加载的头图-->
+            <img :src="imgSrc" alt="" v-else>
+        </div>
+        <div class="search">
+            <div class="status">
+                <div v-if="DangerCamMacArr == 0">
+                    <div class="Scan Safe_circle thisCircle"></div>
+                    <div class="Scan_s Safe_circle  thisCircle"></div>
+                    <div class="thisCircle Safe_circle">
+                        <span id="roomName">{{roomName}}</span>
+                        <span id="statusText">{{statusText}}</span>
                     </div>
                 </div>
-                <s class="nowStatus">{{nowStatus}}</s>
-                <div class="resultNum">
-                    <ul>
-                        <li>
-                            <em>摄像头</em>
-                            <s :class="[{'green': DangerCamMacArr == 0},{'red':DangerCamMacArr > 0}]">{{DangerCamMacArr}}</s>
-                        </li>
-                        <li>
-                            <em>路由器 <i>/AP</i></em>
-                            <s class="DangerWifiMacArr">{{DangerWifiMacArr}}</s>
-                        </li>
-                        <li>
-                            <em>其他设备</em>
-                            <s class="WifiMacArr">{{WifiMacArr}}</s>
-                        </li>
-                    </ul>
-                </div>
-                <div class="resultDetail" v-if="resultDetail">
-                    <div class="resultSafe" v-if="resultState">
-                        当前房间十分安全，请放心使用！
-                    </div>
-                    <div class="resultDanger" v-if="!resultState">
-                        <ul>
-                            <div v-for="(item,i) in lists">
-                                <li @click="showTel(i)">
-                                    <img src="../assets/img/poster/other.png" alt="" v-if="item.DeviceType == 0">
-                                    <img src="../assets/img/poster/redcam.png" alt=""
-                                         v-if="item.DeviceType == 1 && item.DangerLevel == 4">
-                                    <img src="../assets/img/poster/warnCam.png" alt=""
-                                         v-if="item.DeviceType == 1 && item.DangerLevel == 3">
-                                    <img src="../assets/img/poster/cam.png" alt=""
-                                         v-if="item.DeviceType == 1 && item.DangerLevel != 3 && item.DangerLevel != 4">
-                                    <img src="../assets/img/poster/ly.png" alt="" v-if="item.DeviceType ==2">
-                                    <span class="eqname green"
-                                          v-if="item.DangerLevel == 0">{{item.DeviceType| filterEqName}}</span>
-                                    <span class="eqname yellow"
-                                          v-if="item.DangerLevel ==3">{{item.DeviceType| filterEqName}}</span>
-                                    <span class="eqname red"
-                                          v-if="item.DangerLevel ==4">{{item.DeviceType| filterEqName}}</span>
-                                    <span class="eqname black"
-                                          v-if="item.DangerLevel == -1">{{item.DeviceType| filterEqName}}</span>
-                                    <div class="liDetail">
-                                        <span>MAC:{{item.Mac}}</span>
-                                        <span>品牌:{{item.MacCom |filterMacCom}}</span>
-                                    </div>
-                                    <i class="liStatus liSafe" v-if="item.DangerLevel == 0">正常</i>
-                                    <i class="liStatus liwarn" v-if="item.DangerLevel == 3">可疑</i>
-                                    <i class="liStatus liDanger" v-if="item.DangerLevel == 4">危险</i>
-                                    <i class="liStatus liOther" v-if="item.DangerLevel == -1">正常</i>
-                                    <em class="detectorInfo">
-                                        <img src="../assets/img/poster/wifi1.png" alt="" v-if="item.SignalIntensity <= -60">
-                                        <img src="../assets/img/poster/wifi2.png" alt=""
-                                             v-if="item.SignalIntensity  <= -30 && item.SignalIntensity > -60">
-                                        <img src="../assets/img/poster/wifi3.png" alt="" v-if="item.SignalIntensity > -30">
-                                        <s>{{item.DetectorNum}}</s>
-                                    </em>
-                                </li>
-                                <a :href="'tel:'+tel" class="telButton" v-if="telState == i">
-                                    <em>点击拨打前台电话</em>
-                                    <span>{{tel}}</span>
-                                </a>
-                            </div>
-                        </ul>
+                <div v-else>
+                    <div class="Scan Danger_circle thisCircle"></div>
+                    <div class="Scan_s  Danger_circle thisCircle"></div>
+                    <div class="thisCircle Danger_circle">
+                        <span id="roomName">{{roomName}}</span>
+                        <span id="statusText">{{statusText}}</span>
                     </div>
                 </div>
-                <p class="tips">
-                    * 右端数字为捕获到该设备的探测器数量，图标表示所探测到的强度，距离越近探测强度越高。
-                </p>
-                <div class="btImg">
-                    <a href="" target="_blank">
-                        <img src="../assets/img/poster/thisImg.png" alt="">
-                    </a>
+            </div>
+            <s class="nowStatus">{{nowStatus}}</s>
+            <div class="resultNum">
+                <ul>
+                    <li>
+                        <em>摄像头</em>
+                        <s :class="[{'green': DangerCamMacArr == 0},{'red':DangerCamMacArr > 0}]">{{DangerCamMacArr}}</s>
+                    </li>
+                    <li>
+                        <em>路由器 <i>/AP</i></em>
+                        <s class="DangerWifiMacArr">{{DangerWifiMacArr}}</s>
+                    </li>
+                    <li>
+                        <em>其他设备</em>
+                        <s class="WifiMacArr">{{WifiMacArr}}</s>
+                    </li>
+                </ul>
+            </div>
+            <div class="resultDetail" v-if="resultDetail">
+                <div class="resultSafe" v-if="resultState">
+                    当前房间十分安全，请放心使用！
                 </div>
-                <div class="copyrights">
-                    版权 © 济南佰意兴
+                <div class="resultDanger" v-if="!resultState">
+                    <ul>
+                        <div v-for="(item,i) in lists">
+                            <li @click="showTel(i)">
+                                <img src="../assets/img/poster/other.png" alt="" v-if="item.DeviceType == 0">
+                                <img src="../assets/img/poster/redcam.png" alt=""
+                                     v-if="item.DeviceType == 1 && item.DangerLevel == 4">
+                                <img src="../assets/img/poster/warnCam.png" alt=""
+                                     v-if="item.DeviceType == 1 && item.DangerLevel == 3">
+                                <img src="../assets/img/poster/cam.png" alt=""
+                                     v-if="item.DeviceType == 1 && item.DangerLevel != 3 && item.DangerLevel != 4">
+                                <img src="../assets/img/poster/ly.png" alt="" v-if="item.DeviceType ==2">
+                                <span class="eqname green"
+                                      v-if="item.DangerLevel == 0">{{item.DeviceType| filterEqName}}</span>
+                                <span class="eqname yellow"
+                                      v-if="item.DangerLevel ==3">{{item.DeviceType| filterEqName}}</span>
+                                <span class="eqname red"
+                                      v-if="item.DangerLevel ==4">{{item.DeviceType| filterEqName}}</span>
+                                <span class="eqname black"
+                                      v-if="item.DangerLevel == -1">{{item.DeviceType| filterEqName}}</span>
+                                <div class="liDetail">
+                                    <span>MAC:{{item.Mac}}</span>
+                                    <span>品牌:{{item.MacCom |filterMacCom}}</span>
+                                </div>
+                                <i class="liStatus liSafe" v-if="item.DangerLevel == 0">正常</i>
+                                <i class="liStatus liwarn" v-if="item.DangerLevel == 3">可疑</i>
+                                <i class="liStatus liDanger" v-if="item.DangerLevel == 4">危险</i>
+                                <i class="liStatus liOther" v-if="item.DangerLevel == -1">正常</i>
+                                <em class="detectorInfo">
+                                    <img src="../assets/img/poster/wifi1.png" alt="" v-if="item.SignalIntensity <= -60">
+                                    <img src="../assets/img/poster/wifi2.png" alt=""
+                                         v-if="item.SignalIntensity  <= -30 && item.SignalIntensity > -60">
+                                    <img src="../assets/img/poster/wifi3.png" alt="" v-if="item.SignalIntensity > -30">
+                                    <s>{{item.DetectorNum}}</s>
+                                </em>
+                            </li>
+                            <a :href="'tel:'+tel" class="telButton" v-if="telState == i">
+                                <em>点击拨打前台电话</em>
+                                <span>{{tel}}</span>
+                            </a>
+                        </div>
+                    </ul>
                 </div>
             </div>
-            <div id="alertMute" time="0"></div>
+            <p class="tips">
+                * 右端数字为捕获到该设备的探测器数量，图标表示所探测到的强度，距离越近探测强度越高。
+            </p>
+            <div class="btImg">
+                <a href="" target="_blank">
+                    <img src="../assets/img/poster/thisImg.png" alt="">
+                </a>
+            </div>
+            <div class="copyrights">
+                版权 © 济南佰意兴
+            </div>
         </div>
-    </template>
-
-    <script>
-        import {
-            DeviceInfoByQrCodeId,
-            QrcodePictureGet,
-        } from '../api/getApiRes.js'
-
-        let qs = require('qs');
-        export default {
-            data() {
-                return {
-                    autoTime: 5000,
-                    resultDetail: false,//结果部分
-                    resultState: true, //结果安全与否
-                    roomName: '0000', //
-                    statusText: '扫描中...', //
-                    imgSrc: '', //
-                    nowStatus: '正在扫描中，请稍后', //
-                    lists: [], //
-                    DangerCamMacArr: 0, //
-                    DangerWifiMacArr: 0, //
-                    WifiMacArr: 0, //
-                    telState: -1, //
-                    tel: '', //
-                }
-            },
-            mounted() {
+        <div id="alertMute" time="0"></div>
+    </div>
+</template>
+
+<script>
+    import {
+        DeviceInfoByQrCodeId,
+    } from '../api/getApiRes.js'
+
+    let qs = require('qs');
+    export default {
+        data() {
+            return {
+                autoTime: 5000,
+                resultDetail: false,//结果部分
+                resultState: true, //结果安全与否
+                roomName: '0000', //
+                statusText: '扫描中...', //
+                imgSrc: '', //
+                nowStatus: '正在扫描中，请稍后', //
+                lists: [], //
+                DangerCamMacArr: 0, //
+                DangerWifiMacArr: 0, //
+                WifiMacArr: 0, //
+                telState: -1, //
+                tel: '', //
+            }
+        },
+        mounted() {
+            let that = this;
+            // 获取数据
+            that.getDate(1);
+            // 定时查询
+            that.timer = setInterval(() => {
+                that.getDate(2);
+            }, that.autoTime);
+        },
+        destroyed() {
+            //页面销毁时清除定时器
+            clearInterval(this.timer);
+        },
+        methods: {
+            // 查询按钮
+            getDate(qtype) {
                 let that = this;
-                // 获取数据
-                that.getDate(1);
-                // 定时查询
-                that.timer = setInterval(() => {
-                    that.getDate(2);
-                }, that.autoTime);
-            },
-            destroyed() {
-                //页面销毁时清除定时器
-                clearInterval(this.timer);
-            },
-            methods: {
-                // 查询按钮
-                getDate(qtype) {
-                    let that = this;
-                    let param = {
-                        token: localStorage.token,
-                        comid: 1,
-                        qrid: this.$route.query.qrcodeId,
-                        vfcode: this.$route.query.vfcode,
-                        qtype: qtype,
-
-                    };
-                    let postdata = qs.stringify(param);
-                    DeviceInfoByQrCodeId(postdata).then(res => {
-                        let json = res;
-
-                        // test
-                        json2 = {
-                            "Code": 0,
-                            "Memo": "执行成功",
-                            "QrcodeRs": {
-                                "QrId": 3,
-                                "ComId": 7,
-                                "ComName": "一瓦科技",
-                                "Tel": "15253135699",
-                                "QrName": "会议室",
-                                "DetIdStr": "29,30,31",
-                                "PicPath": "8e51ac9d6bcad2c296e7b26f1f88949f",
-                                "Memo": "线上展示，请勿删改",
-                                "State": 1,
-                                "Frequency": 60000,
-                                "ExpTime": "2020-08-14T02:27:32.161505+08:00",
-                                "Vfcode": "d6caec11e8fb88b519614c6096622a50",
-                                "CreateTime": "2020-07-03T09:54:44.728978+08:00"
-                            },
-                            "DetectedRs": [{
-                                "Mac": "56:a7:03:4b:04:ac",
-                                "ComId": 7,
-                                "MacCom": "",
-                                "SignalIntensity": -90,
-                                "DangerLevel": 4,
-                                "DeviceType": 1,
-                                "DetectorNum": 1
-                            }, {
-                                "Mac": "70:3e:ac:0c:0f:d7",
-                                "ComId": 7,
-                                "MacCom": "Apple, Inc.",
-                                "SignalIntensity": 127,
-                                "DangerLevel": -1,
-                                "DeviceType": 0,
-                                "DetectorNum": 1
-                            }, {
-                                "Mac": "9c:e3:3f:6e:30:a9",
-                                "ComId": 7,
-                                "MacCom": "Apple, Inc.",
-                                "SignalIntensity": 127,
-                                "DangerLevel": -1,
-                                "DeviceType": 0,
-                                "DetectorNum": 2
-                            }, {
-                                "Mac": "3c:cd:5d:79:8d:72",
-                                "ComId": 7,
-                                "MacCom": "HUAWEI TECHNOLOGIES CO.,LTD",
-                                "SignalIntensity": 127,
-                                "DangerLevel": -1,
-                                "DeviceType": 0,
-                                "DetectorNum": 2
-                            }, {
-                                "Mac": "a2:5a:2f:d1:5d:bd",
-                                "ComId": 7,
-                                "MacCom": "",
-                                "SignalIntensity": 127,
-                                "DangerLevel": -1,
-                                "DeviceType": 0,
-                                "DetectorNum": 1
-                            }, {
-                                "Mac": "10:44:00:cc:d1:3c",
-                                "ComId": 7,
-                                "MacCom": "HUAWEI TECHNOLOGIES CO.,LTD",
-                                "SignalIntensity": 127,
-                                "DangerLevel": -1,
-                                "DeviceType": 0,
-                                "DetectorNum": 2
-                            }, {
-                                "Mac": "24:0a:c4:2c:99:8c",
-                                "ComId": 7,
-                                "MacCom": "Espressif Inc.",
-                                "SignalIntensity": 127,
-                                "DangerLevel": -1,
-                                "DeviceType": 0,
-                                "DetectorNum": 1
-                            }, {
-                                "Mac": "a0:04:60:78:b1:58",
-                                "ComId": 7,
-                                "MacCom": "NETGEAR",
-                                "SignalIntensity": 127,
-                                "DangerLevel": -1,
-                                "DeviceType": 2,
-                                "DetectorNum": 1
-                            }, {
-                                "Mac": "48:8a:d2:88:fa:d5",
-                                "ComId": 7,
-                                "MacCom": "MERCURY COMMUNICATION TECHNOLOGIES CO.,LTD.",
-                                "SignalIntensity": 127,
-                                "DangerLevel": -1,
-                                "DeviceType": 0,
-                                "DetectorNum": 3
-                            }, {
-                                "Mac": "f0:a3:5a:53:08:37",
-                                "ComId": 7,
-                                "MacCom": "Apple, Inc.",
-                                "SignalIntensity": 127,
-                                "DangerLevel": -1,
-                                "DeviceType": 0,
-                                "DetectorNum": 3
-                            }, {
-                                "Mac": "9c:a5:25:a1:d6:ee",
-                                "ComId": 7,
-                                "MacCom": "Shandong USR IOT Technology Limited",
-                                "SignalIntensity": 127,
-                                "DangerLevel": -1,
-                                "DeviceType": 0,
-                                "DetectorNum": 2
-                            }, {
-                                "Mac": "9c:a6:15:b2:3a:a8",
-                                "ComId": 7,
-                                "MacCom": "TP-LINK TECHNOLOGIES CO.,LTD.",
-                                "SignalIntensity": -85,
-                                "DangerLevel": -1,
-                                "DeviceType": 2,
-                                "DetectorNum": 1
-                            },]
-                        }
+                let param = {
+                    token: localStorage.token,
+                    comid: 1,
+                    qrid: this.$route.query.qrcodeId,
+                    vfcode: this.$route.query.vfcode,
+                    qtype: qtype,
+
+                };
+                let postdata = qs.stringify(param);
+                DeviceInfoByQrCodeId(postdata).then(res => {
+                    let json = res;
+
+                    // test
+                    let json2 = {
+                        "Code": 0,
+                        "Memo": "执行成功",
+                        "QrcodeRs": {
+                            "QrId": 3,
+                            "ComId": 7,
+                            "ComName": "一瓦科技",
+                            "Tel": "15253135699",
+                            "QrName": "会议室",
+                            "DetIdStr": "29,30,31",
+                            "PicPath": "8e51ac9d6bcad2c296e7b26f1f88949f",
+                            "Memo": "线上展示，请勿删改",
+                            "State": 1,
+                            "Frequency": 60000,
+                            "ExpTime": "2020-08-14T02:27:32.161505+08:00",
+                            "Vfcode": "d6caec11e8fb88b519614c6096622a50",
+                            "CreateTime": "2020-07-03T09:54:44.728978+08:00"
+                        },
+                        "DetectedRs": [{
+                            "Mac": "56:a7:03:4b:04:ac",
+                            "ComId": 7,
+                            "MacCom": "",
+                            "SignalIntensity": -90,
+                            "DangerLevel": 4,
+                            "DeviceType": 1,
+                            "DetectorNum": 1
+                        }, {
+                            "Mac": "70:3e:ac:0c:0f:d7",
+                            "ComId": 7,
+                            "MacCom": "Apple, Inc.",
+                            "SignalIntensity": 127,
+                            "DangerLevel": -1,
+                            "DeviceType": 0,
+                            "DetectorNum": 1
+                        }, {
+                            "Mac": "9c:e3:3f:6e:30:a9",
+                            "ComId": 7,
+                            "MacCom": "Apple, Inc.",
+                            "SignalIntensity": 127,
+                            "DangerLevel": -1,
+                            "DeviceType": 0,
+                            "DetectorNum": 2
+                        }, {
+                            "Mac": "3c:cd:5d:79:8d:72",
+                            "ComId": 7,
+                            "MacCom": "HUAWEI TECHNOLOGIES CO.,LTD",
+                            "SignalIntensity": 127,
+                            "DangerLevel": -1,
+                            "DeviceType": 0,
+                            "DetectorNum": 2
+                        }, {
+                            "Mac": "a2:5a:2f:d1:5d:bd",
+                            "ComId": 7,
+                            "MacCom": "",
+                            "SignalIntensity": 127,
+                            "DangerLevel": -1,
+                            "DeviceType": 0,
+                            "DetectorNum": 1
+                        }, {
+                            "Mac": "10:44:00:cc:d1:3c",
+                            "ComId": 7,
+                            "MacCom": "HUAWEI TECHNOLOGIES CO.,LTD",
+                            "SignalIntensity": 127,
+                            "DangerLevel": -1,
+                            "DeviceType": 0,
+                            "DetectorNum": 2
+                        }, {
+                            "Mac": "24:0a:c4:2c:99:8c",
+                            "ComId": 7,
+                            "MacCom": "Espressif Inc.",
+                            "SignalIntensity": 127,
+                            "DangerLevel": -1,
+                            "DeviceType": 0,
+                            "DetectorNum": 1
+                        }, {
+                            "Mac": "a0:04:60:78:b1:58",
+                            "ComId": 7,
+                            "MacCom": "NETGEAR",
+                            "SignalIntensity": 127,
+                            "DangerLevel": -1,
+                            "DeviceType": 2,
+                            "DetectorNum": 1
+                        }, {
+                            "Mac": "48:8a:d2:88:fa:d5",
+                            "ComId": 7,
+                            "MacCom": "MERCURY COMMUNICATION TECHNOLOGIES CO.,LTD.",
+                            "SignalIntensity": 127,
+                            "DangerLevel": -1,
+                            "DeviceType": 0,
+                            "DetectorNum": 3
+                        }, {
+                            "Mac": "f0:a3:5a:53:08:37",
+                            "ComId": 7,
+                            "MacCom": "Apple, Inc.",
+                            "SignalIntensity": 127,
+                            "DangerLevel": -1,
+                            "DeviceType": 0,
+                            "DetectorNum": 3
+                        }, {
+                            "Mac": "9c:a5:25:a1:d6:ee",
+                            "ComId": 7,
+                            "MacCom": "Shandong USR IOT Technology Limited",
+                            "SignalIntensity": 127,
+                            "DangerLevel": -1,
+                            "DeviceType": 0,
+                            "DetectorNum": 2
+                        }, {
+                            "Mac": "9c:a6:15:b2:3a:a8",
+                            "ComId": 7,
+                            "MacCom": "TP-LINK TECHNOLOGIES CO.,LTD.",
+                            "SignalIntensity": -85,
+                            "DangerLevel": -1,
+                            "DeviceType": 2,
+                            "DetectorNum": 1
+                        },]
+                    }
 
-                        // test
+                    // test
 
 
-                        if (json.Code == 0) {
-                            // 首次加载
-                            if (qtype == 1) {
-                                that.roomName = json.QrcodeRs.ComName;
-                                that.statusText = json.QrcodeRs.QrName;
-                                that.writeImg(json);
-                                that.writePoster(json);
-                            } else {
-                                // 数据变化时重新渲染
-                                if (localStorage.result != JSON.stringify(json)) {
-                                    that.writePoster(json)
-                                }
-                                localStorage.result = JSON.stringify(json);
-                            }
+                    if (json.Code == 0) {
+                        // 首次加载
+                        if (qtype == 1) {
+                            that.roomName = json.QrcodeRs.ComName;
+                            that.statusText = json.QrcodeRs.QrName;
+                            that.writeImg(json);
+                            that.writePoster(json);
                         } else {
-                            that.$message.error(json.Memo);
-                        }
-                    })
-                },
-                // 拨打前台电话
-                callServe(row) {
-                    // 显示当前part todo
-                    window.location.href = row.tel;
-                },
-                showTel(i) {
-                    this.telState = i;
-                },
-                // 渲染图片
-                writeImg(result) {
-                    let that = this;
-                    let PicPath = result.QrcodeRs.PicPath;
-                    let param = {
-                        rowKey: PicPath
-                    };
-                    let postdata = qs.stringify(param);
-                    QrcodePictureGet(postdata).then(res => {
-                        let json = res;
-                        if (json.Code == 0) {
-                            if (result.EncodeString) {
-                                that.imgSrc = result.EncodeString
+                            // 数据变化时重新渲染
+                            if (localStorage.result != JSON.stringify(json)) {
+                                that.writePoster(json)
                             }
-                        } else {
-                            that.$message.error(json.Memo);
+                            localStorage.result = JSON.stringify(json);
                         }
-                    })
-                },
-                // 绘制页面数据
-                writePoster(result) {
-                    let that = this;
-                    that.tel = result.QrcodeRs.Tel;
-                    let location = result.QrcodeRs.ComName + result.QrcodeRs.QrName + '房间';
-                    if (!result.DetectedRs) {
-                        that.nowStatus = location + '或周边共检测出 0 台设备';
-                        that.resultDetail = true;
-                        that.resultState = false;
-                        return false
                     } else {
-                        let camNum = 0;
-                        let APNum = 0;
-                        let otherNum = 0;
-                        result.DetectedRs.map(function (k, v, ary) {
-                            // $.each(result.DetectedRs, function (k, v) {
-                            //0其他1摄像头2路由器3手机
-                            console.log(k);
-                            switch (parseInt(k.DeviceType)) {
-                                case 1:
-                                    camNum++;
-                                    break;
-                                case 2:
-                                    APNum++;
-                                    break;
-                                case 0:
-                                    otherNum++;
-                                    break;
-                            }
-                            that.DangerCamMacArr = camNum;
-                            that.DangerWifiMacArr = APNum;
-                            that.WifiMacArr = otherNum;
-                            let sum = parseInt(camNum) + parseInt(APNum) + parseInt(otherNum);
-                            that.nowStatus = location + '或周边共检测出 ' + sum + ' 台设备';
-                        });
-                        that.resultDetail = true;
-                        that.resultState = false;
-                        that.writeList(result.DetectedRs);
-                    }
-                },
-                writeList(row) {
-                    if (!row) {
-                        return false
+                        that.$message.error(json.Memo);
                     }
-
-                    this.lists = row;
-                },
-                writeList2(row) {
-                    var item = '';
-                    if (!row) {
-                        return false
-                    }
-                    var imgs = '';
-                    var imgsSrc = '';
-                    var equipType = '';
-                    var MacName = '';
-                    var DangerName = '';
-                    var DangerNum = '';
-                    var btnStyle = '';
-                    var fontColor = '';
-                    var eqName = '';
-                    for (var i = 0; i < row.length; i++) {
-                        imgs = row[i].DeviceType;
-                        switch (parseInt(imgs)) {
-                            case 0:
-                                imgsSrc = 'other';//0其他1摄像头2路由器3手机
-                                equipType = '其他';
-                                eqName = '其他';
-                                break;
+                })
+            },
+            // 拨打前台电话
+            callServe(row) {
+                // 显示当前part todo
+                window.location.href = row.tel;
+            },
+            showTel(i) {
+                this.telState = i;
+            },
+            // 渲染图片
+            writeImg(result) {
+                this.imgSrc = 'data:image/png;base64,' + result.QrcodeRs.PicData;
+            },
+            // 绘制页面数据
+            writePoster(result) {
+                let that = this;
+                that.tel = result.QrcodeRs.Tel;
+                let location = result.QrcodeRs.ComName + result.QrcodeRs.QrName + '房间';
+                if (!result.DetectedRs) {
+                    that.nowStatus = location + '或周边共检测出 0 台设备';
+                    that.resultDetail = true;
+                    that.resultState = false;
+                    return false
+                } else {
+                    let camNum = 0;
+                    let APNum = 0;
+                    let otherNum = 0;
+                    result.DetectedRs.map(function (k, v, ary) {
+                        // $.each(result.DetectedRs, function (k, v) {
+                        //0其他1摄像头2路由器3手机
+                        console.log(k);
+                        switch (parseInt(k.DeviceType)) {
                             case 1:
-                                if (row[i].DangerLevel == 4) {
-                                    imgsSrc = 'redcam';
-                                }
-                                if (row[i].DangerLevel == 3) {
-                                    imgsSrc = 'warnCam';
-                                } else {
-                                    imgsSrc = 'cam';
-                                }
-                                equipType = '摄像头';
-                                eqName = '摄像头';
+                                camNum++;
                                 break;
                             case 2:
-                                imgsSrc = 'ly';
-                                equipType = '路由器';
-                                eqName = '路由器';
+                                APNum++;
                                 break;
-                            default:
-                                imgsSrc = 'other';
-                                equipType = '其他';
-                                eqName = '其他设备';
-                                break
-                        }
-                        DangerNum = row[i].DangerLevel;
-                        // 4高危3低危2已处理0白名单-1其他wifi设备
-                        switch (parseInt(row[i].DangerLevel)) {
                             case 0:
-                                DangerName = '正常';//2危险1可疑0正常摄像头-1正常其他wifi设备
-                                btnStyle = 'liSafe';
-                                fontColor = 'green';
-                                break;
-                            case 3:
-                                DangerName = '可疑';
-                                btnStyle = 'liwarn';
-                                fontColor = 'yellow';
-                                break;
-                            case 4:
-                                DangerName = '危险';
-                                btnStyle = 'liDanger';
-                                fontColor = 'red';
+                                otherNum++;
                                 break;
-                            case -1:
-                                DangerName = '正常';
-                                btnStyle = 'liOther';
-                                fontColor = 'black';
-                            default:
-                                DangerName = '正常';
-                                btnStyle = 'liOther';
-                                fontColor = 'black';
-                                break
-                        }
-
-                        if (!row[i].MacCom) {
-                            MacName = '未知'
-                        } else {
-                            if (row[i].MacCom.length > 12) {
-                                MacName = row[i].MacCom.substr(0, 12) + '...';
-                            } else {
-                                MacName = row[i].MacCom
-                            }
                         }
+                        that.DangerCamMacArr = camNum;
+                        that.DangerWifiMacArr = APNum;
+                        that.WifiMacArr = otherNum;
+                        let sum = parseInt(camNum) + parseInt(APNum) + parseInt(otherNum);
+                        that.nowStatus = location + '或周边共检测出 ' + sum + ' 台设备';
+                    });
+                    that.resultDetail = true;
+                    that.resultState = false;
+                    that.writeList(result.DetectedRs);
+                }
+            },
+            writeList(row) {
+                if (!row) {
+                    return false
+                }
 
-                        var SignalIntensity = row[i].SignalIntensity;
-                        var wifiInte = 0;
-                        if (SignalIntensity <= -60) {
-                            wifiInte = "../img/poster/wifi1.png";
-                        }
-                        if (SignalIntensity <= -30 && SignalIntensity > -60) {
-                            wifiInte = "../img/poster/wifi2.png";
-                        }
-                        if (SignalIntensity > -30) {
-                            wifiInte = "../img/poster/wifi3.png";
-                        }
-                        if (!SignalIntensity) {
-                            wifiInte = "../img/poster/wifi3.png";
-                        }
-                        item += '<li>\n' +
-                            '<img src="img/poster/' + imgsSrc + '.png" alt="">\n' +
-                            '<span class="eqname ' + fontColor + '">' + eqName + '</span>\n' +
-                            '<div class="liDetail">\n' +
-                            '<span>MAC：' + row[i].Mac + '</span>\n' +
-                            '<span>品牌：' + MacName + '</span>\n' +
-                            '</div>\n' +
-                            '<i class="liStatus ' + btnStyle + '">' + DangerName + '</i>\n' +
-                            '<em class="detectorInfo"><img src="' + wifiInte + '" alt=""><s>' + parseInt(row[i].DetectorNum) + '</s></em>\n' +
-                            '</li>';
-                    }
-                    $('.resultDanger ul').empty().append(item);
+                this.lists = row;
+            },
+            writeList2(row) {
+                var item = '';
+                if (!row) {
+                    return false
                 }
-            }
-            ,
-            filters: {
-                filterEqName(value) {
-                    switch (parseInt(value)) {
+                var imgs = '';
+                var imgsSrc = '';
+                var equipType = '';
+                var MacName = '';
+                var DangerName = '';
+                var DangerNum = '';
+                var btnStyle = '';
+                var fontColor = '';
+                var eqName = '';
+                for (var i = 0; i < row.length; i++) {
+                    imgs = row[i].DeviceType;
+                    switch (parseInt(imgs)) {
                         case 0:
-                            return '其他';
+                            imgsSrc = 'other';//0其他1摄像头2路由器3手机
+                            equipType = '其他';
+                            eqName = '其他';
                             break;
                         case 1:
-                            return '摄像头';
+                            if (row[i].DangerLevel == 4) {
+                                imgsSrc = 'redcam';
+                            }
+                            if (row[i].DangerLevel == 3) {
+                                imgsSrc = 'warnCam';
+                            } else {
+                                imgsSrc = 'cam';
+                            }
+                            equipType = '摄像头';
+                            eqName = '摄像头';
                             break;
                         case 2:
-                            return '路由器';
+                            imgsSrc = 'ly';
+                            equipType = '路由器';
+                            eqName = '路由器';
+                            break;
+                        default:
+                            imgsSrc = 'other';
+                            equipType = '其他';
+                            eqName = '其他设备';
+                            break
+                    }
+                    DangerNum = row[i].DangerLevel;
+                    // 4高危3低危2已处理0白名单-1其他wifi设备
+                    switch (parseInt(row[i].DangerLevel)) {
+                        case 0:
+                            DangerName = '正常';//2危险1可疑0正常摄像头-1正常其他wifi设备
+                            btnStyle = 'liSafe';
+                            fontColor = 'green';
+                            break;
+                        case 3:
+                            DangerName = '可疑';
+                            btnStyle = 'liwarn';
+                            fontColor = 'yellow';
                             break;
+                        case 4:
+                            DangerName = '危险';
+                            btnStyle = 'liDanger';
+                            fontColor = 'red';
+                            break;
+                        case -1:
+                            DangerName = '正常';
+                            btnStyle = 'liOther';
+                            fontColor = 'black';
                         default:
-                            return '其他设备';
+                            DangerName = '正常';
+                            btnStyle = 'liOther';
+                            fontColor = 'black';
                             break
                     }
-                },
-                filterMacCom(value) {
-                    return value.length > 9 ? value.substr(0, 9) + '...' : value;
+
+                    if (!row[i].MacCom) {
+                        MacName = '未知'
+                    } else {
+                        if (row[i].MacCom.length > 12) {
+                            MacName = row[i].MacCom.substr(0, 12) + '...';
+                        } else {
+                            MacName = row[i].MacCom
+                        }
+                    }
+
+                    var SignalIntensity = row[i].SignalIntensity;
+                    var wifiInte = 0;
+                    if (SignalIntensity <= -60) {
+                        wifiInte = "../img/poster/wifi1.png";
+                    }
+                    if (SignalIntensity <= -30 && SignalIntensity > -60) {
+                        wifiInte = "../img/poster/wifi2.png";
+                    }
+                    if (SignalIntensity > -30) {
+                        wifiInte = "../img/poster/wifi3.png";
+                    }
+                    if (!SignalIntensity) {
+                        wifiInte = "../img/poster/wifi3.png";
+                    }
+                    item += '<li>\n' +
+                        '<img src="img/poster/' + imgsSrc + '.png" alt="">\n' +
+                        '<span class="eqname ' + fontColor + '">' + eqName + '</span>\n' +
+                        '<div class="liDetail">\n' +
+                        '<span>MAC：' + row[i].Mac + '</span>\n' +
+                        '<span>品牌：' + MacName + '</span>\n' +
+                        '</div>\n' +
+                        '<i class="liStatus ' + btnStyle + '">' + DangerName + '</i>\n' +
+                        '<em class="detectorInfo"><img src="' + wifiInte + '" alt=""><s>' + parseInt(row[i].DetectorNum) + '</s></em>\n' +
+                        '</li>';
+                }
+                $('.resultDanger ul').empty().append(item);
+            }
+        }
+        ,
+        filters: {
+            filterEqName(value) {
+                switch (parseInt(value)) {
+                    case 0:
+                        return '其他';
+                        break;
+                    case 1:
+                        return '摄像头';
+                        break;
+                    case 2:
+                        return '路由器';
+                        break;
+                    default:
+                        return '其他设备';
+                        break
                 }
             },
-            components: {}
+            filterMacCom(value) {
+                return value.length > 9 ? value.substr(0, 9) + '...' : value;
+            }
+        },
+        components: {}
+    }
+</script>
+
+<style scoped>
+    body {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    #content {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        overflow-y: scroll;
+        background: #fff;
+    }
+
+    .container::-webkit-scrollbar-thumb {
+        background: none;
+    }
+
+    .container::-webkit-scrollbar {
+        width: 0px;
+    }
+
+    ul, li {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    em, s, i {
+        text-decoration: none;
+        font-style: normal;
+    }
+
+    .topImg {
+        width: 100%;
+        max-height: 254px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .topImg img {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .search {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .status em span {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        font-size: 20px;
+        text-align: center;
+        line-height: 24px;
+    }
+
+    .status {
+        width: 100%;
+        height: 120px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        padding-top: 0px;
+    }
+
+    .nowStatus {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+        font-size: 12px;
+        color: #818181;
+        margin-bottom: 19px;
+    }
+
+    .resultNum {
+        width: 94%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-bottom: 15px;
+    }
+
+    .resultNum ul {
+        width: 98%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        padding-top: 3px;
+        padding-bottom: 3px;
+        padding-left: 1px;
+        padding-right: 3px;
+    }
+
+    .resultNum li {
+        width: 25%;
+        height: 42px;
+        line-height: 42px;
+        overflow: hidden;
+        float: left;
+        box-shadow: 0px 0px 3px #999;
+        margin-right: 3%;
+        padding-left: 10px;
+        padding-right: 10px;
+        color: #4C4C4C;
+    }
+
+    .resultNum li:nth-child(3) {
+        float: right;
+        margin-right: 0;
+    }
+
+    .resultNum li s {
+        float: right;
+        text-align: right;
+        color: #C9C9C9;
+    }
+
+    .resultNum li i {
+        font-size: 12px;
+        color: #C9C9C9;
+    }
+
+    .resultNum .green {
+        color: #44D7B6;
+    }
+
+    .bottomAd {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .bottomAd img {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .copyrights {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        color: #575757;
+        font-size: 12px;
+        text-align: center;
+        margin-top: 30px;
+        margin-bottom: 11px;
+    }
+
+    .circle {
+        width: 142px;
+        height: 142px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .status em {
+        position: relative;
+        top: 0px;
+        width: 80px;
+        height: 80px;
+        display: block;
+        margin: 0 auto;
+        border-radius: 250px;
+        color: #fff;
+        overflow: hidden;
+        background-color: rgba(68, 215, 182, 0.8);
+        z-index: 9999;
+    }
+
+    .green_point {
+        position: relative;
+        top: -98px;
+        height: 118px;
+        width: 118px;
+        border-radius: 50% !important;
+        transform: scale(0.5);
+        animation: bulge 2s infinite ease-in-out;
+        animation-delay: 0s;
+        margin: 0 auto;
+        float: none;
+        display: block;
+        background-color: rgba(68, 215, 182, 0.45);
+    }
+
+    .green_point::after {
+        position: absolute;
+        display: inline-block;
+        content: '';
+        height: 100%;
+        width: 100%;
+        border-radius: 50%;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        transform: scale(1);
+        animation: blow 2s infinite ease-in-out;
+    }
+
+    .green_point2 {
+        position: relative;
+        top: -227px;
+        height: 140px;
+        width: 140px;
+        border-radius: 50% !important;
+        transform: scale(0.5);
+        animation: bulge 2s infinite ease-in-out;
+        background-color: rgba(68, 215, 182, 0.12);
+        animation-delay: 0s;
+        margin: 0 auto;
+        float: none;
+        display: block;
+    }
+
+    .green_point2::after {
+        position: absolute;
+        display: inline-block;
+        content: '';
+        height: 100%;
+        width: 100%;
+        border-radius: 50%;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        transform: scale(1);
+        animation: blow 2s infinite ease-in-out;
+    }
+
+    .red_point {
+        margin: 16px;
+        height: 16px;
+        width: 16px;
+        border-radius: 50% !important;
+        display: inline-block;
+        transform: scale(0.5);
+        animation: bulge 2s infinite ease-in-out;
+        background-color: #ff0000;
+        animation-delay: 0s;
+    }
+
+    .resultNum li s.yellow {
+        color: #F7B500;
+    }
+
+    .yellow {
+        color: #F7B500;
+    }
+
+    .resultNum li s.red {
+        color: #ff0000;
+    }
+
+    .red {
+        color: #ff0000;
+    }
+
+    .green {
+        color: #44D7B6;
+    }
+
+    .red_point::after {
+        position: absolute;
+        display: inline-block;
+        content: '';
+        height: 100%;
+        width: 100%;
+        border-radius: 50%;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        transform: scale(1);
+        animation: blow 2s infinite ease-in-out;
+    }
+
+    .resultSafe {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 60px;
+        margin-bottom: 60px;
+        color: #44D7B6;
+        font-size: 19px;
+        text-align: center;
+    }
+
+    .resultDanger ul {
+        width: 94%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        padding: 1px;
+    }
+
+    .resultDanger li {
+        padding: 19px 9px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-bottom: 10px;
+        box-shadow: 0px 0px 3px #999;
+
+    }
+
+    .resultDanger li > img {
+        width: 26px;
+        height: 26px;
+        float: left;
+        margin-right: 6px;
+    }
+
+    .resultDanger li > span {
+        float: left;
+        font-size: 14px;
+        line-height: 28px;
+        margin-right: 6px;
+    }
+
+    .resultDanger .liDetail {
+        width: 54%;
+        float: left;
+        font-size: 12px;
+        color: #9A9A9A;
+        overflow: hidden;
+        text-align: left;
+    }
+
+    .liDetail span {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        font-size: 12px;
+        text-align: left;
+    }
+
+    .resultDanger li i.liStatus {
+        width: 33px;
+        height: 16px;
+        float: left;
+        border-radius: 250px;
+        color: #fff;
+        font-size: 12px;
+        text-align: center;
+        margin-top: 8px;
+        line-height: 16px;
+    }
+
+    .detectorInfo {
+        width: 26px;
+        float: right;
+        margin-left: 8px;
+    }
+
+    .detectorInfo img {
+        width: 26px;
+        /*height: 19px;*/
+        overflow: hidden;
+        margin: 0 auto;
+        float: left;
+    }
+
+    .detectorInfo s {
+        position: relative;
+        bottom: 4px;
+        left: -5px;
+        width: 16px;
+        height: 16px;
+        background: #F7B500;
+        overflow: hidden;
+        float: right;
+        margin: 0 auto;
+        color: #fff;
+        border-radius: 250px;
+        text-align: center;
+        line-height: 16px;
+    }
+
+    .resultDanger .liSafe {
+        background: #44D7B6;
+    }
+
+    .resultDanger .liDanger {
+        background: #E02020;
+    }
+
+    .resultDanger .liwarn {
+        background: #F7B500;
+    }
+
+    .resultDanger .liOther {
+        background: #44D7B6;
+    }
+
+    .telButton {
+        width: 238px;
+        height: 42px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        color: #fff;
+        font-size: 12px;
+        background: #F7B500;
+        border-radius: 21px;
+        text-align: center;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        text-decoration: none;
+    }
+
+    .telButton em {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 2px;
+    }
+
+    #roomName {
+        width: 100%;
+        height: 24px;
+        line-height: 24px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+        margin-top: 18px;
+        color: #fff;
+        font-size: 14px;
+    }
+
+    #statusText {
+        width: 100%;
+        height: 18px;
+        line-height: 18px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        font-size: 12px;
+    }
+
+    .telButton span {
+        font-size: 18px;
+    }
+
+    .Safe_circle {
+        height: 80px;
+        width: 80px;
+        top: 38%;
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+        background-color: #44D7B6;
+        border-radius: 100px;
+        position: absolute;
+        color: #FFF;
+        line-height: 80px;
+        font-size: 18px;
+        text-align: center;
+    }
+
+    .Sus_circle {
+        height: 80px;
+        width: 80px;
+        top: 38%;
+        left: 500px;
+        background-color: #F7B500;
+        border-radius: 100px;
+        position: fixed;
+        color: #FFF;
+        line-height: 80px;
+        font-size: 18px;
+        text-align: center;
+    }
+
+    .Danger_circle {
+        height: 80px;
+        width: 80px;
+        top: 38%;
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+        background-color: #E02020;
+        border-radius: 100px;
+        position: absolute;
+        color: #FFF;
+        line-height: 80px;
+        font-size: 18px;
+        text-align: center;
+    }
+
+    .Scan {
+        animation-name: Scan-keyframes;
+        animation-duration: 1500ms;
+        animation-delay: 0ms;
+        animation-fill-mode: forwards;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+    }
+
+    .btImg {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .btImg img {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .tips {
+        width: 90%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        font-size: 12px;
+        color: #666;
+    }
+
+    .eqname {
+        width: 50px;
+    }
+
+    @keyframes Scan-keyframes {
+        0% {
+            opacity: 0.5;
+            transform: scale(1);
         }
-    </script>
-
-    <style scoped>
-        body {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
+        1.11% {
+            opacity: 0.49388603570555145;
+            transform: scale(1.011111111111111);
         }
-
-        #content {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            overflow-y: scroll;
-            background: #fff;
+        2.22% {
+            opacity: 0.48777207141110296;
+            transform: scale(1.0222222222222221);
         }
-
-        .container::-webkit-scrollbar-thumb {
-            background: none;
+        3.33% {
+            opacity: 0.48165810711665447;
+            transform: scale(1.0333333333333334);
         }
-
-        .container::-webkit-scrollbar {
-            width: 0px;
+        4.44% {
+            opacity: 0.4755441428222059;
+            transform: scale(1.0444444444444445);
         }
-
-        ul, li {
-            list-style: none;
-            padding: 0;
-            margin: 0;
+        5.56% {
+            opacity: 0.4694301785277574;
+            transform: scale(1.0555555555555556);
         }
-
-        em, s, i {
-            text-decoration: none;
-            font-style: normal;
+        6.67% {
+            opacity: 0.4633162142333089;
+            transform: scale(1.0666666666666667);
         }
-
-        .topImg {
-            width: 100%;
-            max-height: 254px;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
+        7.78% {
+            opacity: 0.4572022499388604;
+            transform: scale(1.0777777777777777);
         }
-
-        .topImg img {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
+        8.89% {
+            opacity: 0.45108828564441183;
+            transform: scale(1.0888888888888888);
         }
-
-        .search {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
+        10% {
+            opacity: 0.4449743213499633;
+            transform: scale(1.1);
         }
-
-        .status em span {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            font-size: 20px;
-            text-align: center;
-            line-height: 24px;
+        11.11% {
+            opacity: 0.4388603570555148;
+            transform: scale(1.1111111111111112);
         }
-
-        .status {
-            width: 100%;
-            height: 120px;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            padding-top: 0px;
+        12.22% {
+            opacity: 0.4327463927610663;
+            transform: scale(1.1222222222222222);
         }
-
-        .nowStatus {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            text-align: center;
-            font-size: 12px;
-            color: #818181;
-            margin-bottom: 19px;
+        13.33% {
+            opacity: 0.42663242846661775;
+            transform: scale(1.1333333333333333);
         }
-
-        .resultNum {
-            width: 94%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            margin-bottom: 15px;
+        14.44% {
+            opacity: 0.4205184641721692;
+            transform: scale(1.1444444444444444);
         }
-
-        .resultNum ul {
-            width: 98%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            padding-top: 3px;
-            padding-bottom: 3px;
-            padding-left: 1px;
-            padding-right: 3px;
+        15.56% {
+            opacity: 0.4144044998777207;
+            transform: scale(1.1555555555555554);
         }
-
-        .resultNum li {
-            width: 25%;
-            height: 42px;
-            line-height: 42px;
-            overflow: hidden;
-            float: left;
-            box-shadow: 0px 0px 3px #999;
-            margin-right: 3%;
-            padding-left: 10px;
-            padding-right: 10px;
-            color: #4C4C4C;
-        }
-
-        .resultNum li:nth-child(3) {
-            float: right;
-            margin-right: 0;
-        }
-
-        .resultNum li s {
-            float: right;
-            text-align: right;
-            color: #C9C9C9;
-        }
-
-        .resultNum li i {
-            font-size: 12px;
-            color: #C9C9C9;
-        }
-
-        .resultNum .green {
-            color: #44D7B6;
-        }
-
-        .bottomAd {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-        }
-
-        .bottomAd img {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-        }
-
-        .copyrights {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            color: #575757;
-            font-size: 12px;
-            text-align: center;
-            margin-top: 30px;
-            margin-bottom: 11px;
-        }
-
-        .circle {
-            width: 142px;
-            height: 142px;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-        }
-
-        .status em {
-            position: relative;
-            top: 0px;
-            width: 80px;
-            height: 80px;
-            display: block;
-            margin: 0 auto;
-            border-radius: 250px;
-            color: #fff;
-            overflow: hidden;
-            background-color: rgba(68, 215, 182, 0.8);
-            z-index: 9999;
-        }
-
-        .green_point {
-            position: relative;
-            top: -98px;
-            height: 118px;
-            width: 118px;
-            border-radius: 50% !important;
-            transform: scale(0.5);
-            animation: bulge 2s infinite ease-in-out;
-            animation-delay: 0s;
-            margin: 0 auto;
-            float: none;
-            display: block;
-            background-color: rgba(68, 215, 182, 0.45);
-        }
-
-        .green_point::after {
-            position: absolute;
-            display: inline-block;
-            content: '';
-            height: 100%;
-            width: 100%;
-            border-radius: 50%;
-            background-color: inherit;
-            top: 0;
-            left: 0;
-            z-index: -1;
+        16.67% {
+            opacity: 0.40829053558327216;
+            transform: scale(1.1666666666666667);
+        }
+        17.78% {
+            opacity: 0.40217657128882367;
+            transform: scale(1.1777777777777778);
+        }
+        18.89% {
+            opacity: 0.3960626069943752;
+            transform: scale(1.1888888888888889);
+        }
+        20% {
+            opacity: 0.38994864269992663;
+            transform: scale(1.2);
+        }
+        21.11% {
+            opacity: 0.38383467840547814;
+            transform: scale(1.211111111111111);
+        }
+        22.22% {
+            opacity: 0.3777207141110296;
+            transform: scale(1.2222222222222223);
+        }
+        23.33% {
+            opacity: 0.37160674981658104;
+            transform: scale(1.2333333333333334);
+        }
+        24.44% {
+            opacity: 0.36549278552213255;
+            transform: scale(1.2444444444444445);
+        }
+        25.56% {
+            opacity: 0.35937882122768405;
+            transform: scale(1.2555555555555555);
+        }
+        26.67% {
+            opacity: 0.3532648569332355;
+            transform: scale(1.2666666666666666);
+        }
+        27.78% {
+            opacity: 0.34715089263878696;
+            transform: scale(1.2777777777777777);
+        }
+        28.89% {
+            opacity: 0.34103692834433846;
+            transform: scale(1.288888888888889);
+        }
+        30% {
+            opacity: 0.33492296404988997;
+            transform: scale(1.3);
+        }
+        31.11% {
+            opacity: 0.3288089997554414;
+            transform: scale(1.3111111111111111);
+        }
+        32.22% {
+            opacity: 0.32269503546099293;
+            transform: scale(1.3222222222222222);
+        }
+        33.33% {
+            opacity: 0.3165810711665443;
+            transform: scale(1.3333333333333335);
+        }
+        34.44% {
+            opacity: 0.3104671068720959;
+            transform: scale(1.3444444444444446);
+        }
+        35.56% {
+            opacity: 0.30435314257764734;
+            transform: scale(1.3555555555555556);
+        }
+        36.67% {
+            opacity: 0.2982391782831988;
+            transform: scale(1.3666666666666667);
+        }
+        37.78% {
+            opacity: 0.29212521398875035;
+            transform: scale(1.3777777777777778);
+        }
+        38.89% {
+            opacity: 0.2860112496943018;
+            transform: scale(1.3888888888888888);
+        }
+        40% {
+            opacity: 0.27989728539985326;
+            transform: scale(1.4);
+        }
+        41.11% {
+            opacity: 0.2737833211054047;
+            transform: scale(1.4111111111111112);
+        }
+        42.22% {
+            opacity: 0.2676693568109562;
+            transform: scale(1.4222222222222223);
+        }
+        43.33% {
+            opacity: 0.2615553925165077;
+            transform: scale(1.4333333333333333);
+        }
+        44.44% {
+            opacity: 0.2554414282220592;
+            transform: scale(1.4444444444444444);
+        }
+        45.56% {
+            opacity: 0.24932746392761063;
+            transform: scale(1.4555555555555557);
+        }
+        46.67% {
+            opacity: 0.24321349963316208;
+            transform: scale(1.4666666666666668);
+        }
+        47.78% {
+            opacity: 0.23709953533871359;
+            transform: scale(1.4777777777777779);
+        }
+        48.89% {
+            opacity: 0.2309855710442651;
+            transform: scale(1.488888888888889);
+        }
+        50% {
+            opacity: 0.2248716067498166;
+            transform: scale(1.5);
+        }
+        51.11% {
+            opacity: 0.21875764245536805;
+            transform: scale(1.511111111111111);
+        }
+        52.22% {
+            opacity: 0.2126436781609195;
+            transform: scale(1.5222222222222221);
+        }
+        53.33% {
+            opacity: 0.206529713866471;
+            transform: scale(1.5333333333333332);
+        }
+        54.44% {
+            opacity: 0.20041574957202246;
+            transform: scale(1.5444444444444445);
+        }
+        55.56% {
+            opacity: 0.19430178527757397;
+            transform: scale(1.5555555555555556);
+        }
+        56.67% {
+            opacity: 0.18818782098312542;
+            transform: scale(1.5666666666666669);
+        }
+        57.78% {
+            opacity: 0.18207385668867693;
+            transform: scale(1.577777777777778);
+        }
+        58.89% {
+            opacity: 0.17595989239422838;
+            transform: scale(1.588888888888889);
+        }
+        60% {
+            opacity: 0.16984592809977989;
+            transform: scale(1.6);
+        }
+        61.11% {
+            opacity: 0.16373196380533134;
+            transform: scale(1.6111111111111112);
+        }
+        62.22% {
+            opacity: 0.15761799951088284;
+            transform: scale(1.6222222222222222);
+        }
+        63.33% {
+            opacity: 0.15150403521643435;
+            transform: scale(1.6333333333333333);
+        }
+        64.44% {
+            opacity: 0.14539007092198586;
+            transform: scale(1.6444444444444444);
+        }
+        65.56% {
+            opacity: 0.13927610662753726;
+            transform: scale(1.6555555555555554);
+        }
+        66.67% {
+            opacity: 0.1331621423330887;
+            transform: scale(1.6666666666666667);
+        }
+        67.78% {
+            opacity: 0.1270481780386402;
+            transform: scale(1.6777777777777778);
+        }
+        68.89% {
+            opacity: 0.12093421374419178;
+            transform: scale(1.6888888888888889);
+        }
+        70% {
+            opacity: 0.11482024944974323;
+            transform: scale(1.7);
+        }
+        71.11% {
+            opacity: 0.10870628515529468;
+            transform: scale(1.7111111111111112);
+        }
+        72.22% {
+            opacity: 0.10259232086084613;
+            transform: scale(1.7222222222222223);
+        }
+        73.33% {
+            opacity: 0.09647835656639764;
+            transform: scale(1.7333333333333334);
+        }
+        74.44% {
+            opacity: 0.09036439227194909;
+            transform: scale(1.7444444444444445);
+        }
+        75.56% {
+            opacity: 0.08425042797750065;
+            transform: scale(1.7555555555555555);
+        }
+        76.67% {
+            opacity: 0.0781364636830521;
+            transform: scale(1.7666666666666666);
+        }
+        77.78% {
+            opacity: 0.07202249938860356;
+            transform: scale(1.7777777777777777);
+        }
+        78.89% {
+            opacity: 0.06590853509415506;
+            transform: scale(1.7888888888888888);
+        }
+        80% {
+            opacity: 0.059794570799706515;
+            transform: scale(1.8);
+        }
+        81.11% {
+            opacity: 0.053680606505257966;
+            transform: scale(1.8111111111111111);
+        }
+        82.22% {
+            opacity: 0.04756664221080942;
+            transform: scale(1.8222222222222224);
+        }
+        83.33% {
+            opacity: 0.04145267791636087;
+            transform: scale(1.8333333333333335);
+        }
+        84.44% {
+            opacity: 0.03533871362191243;
+            transform: scale(1.8444444444444446);
+        }
+        85.56% {
+            opacity: 0.029224749327463884;
+            transform: scale(1.8555555555555556);
+        }
+        86.67% {
+            opacity: 0.02311078503301539;
+            transform: scale(1.8666666666666667);
+        }
+        87.78% {
+            opacity: 0.016996820738566842;
+            transform: scale(1.8777777777777778);
+        }
+        88.89% {
+            opacity: 0.010882856444118405;
+            transform: scale(1.8888888888888888);
+        }
+        90% {
+            opacity: 0.004768892149669857;
+            transform: scale(1.9);
+        }
+        91.11% {
+            opacity: 0;
+            transform: scale(1.9111111111111112);
+        }
+        92.22% {
+            opacity: 0;
+            transform: scale(1.9222222222222223);
+        }
+        93.33% {
+            opacity: 0;
+            transform: scale(1.9333333333333336);
+        }
+        94.44% {
+            opacity: 0;
+            transform: scale(1.9444444444444446);
+        }
+        95.56% {
+            opacity: 0;
+            transform: scale(1.9555555555555557);
+        }
+        96.67% {
+            opacity: 0;
+            transform: scale(1.9666666666666668);
+        }
+        97.78% {
+            opacity: 0;
+            transform: scale(1.9777777777777779);
+        }
+        98.89% {
+            opacity: 0;
+            transform: scale(1.988888888888889);
+        }
+        100% {
+            opacity: 0;
+            transform: scale(2);
+        }
+    }
+
+    .Scan_s {
+        animation-name: Scan_s-keyframes;
+        animation-duration: 1380ms;
+        animation-delay: 120ms;
+        animation-fill-mode: forwards;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+    }
+
+    @keyframes Scan_s-keyframes {
+        0% {
+            opacity: 0.5;
             transform: scale(1);
-            animation: blow 2s infinite ease-in-out;
-        }
-
-        .green_point2 {
-            position: relative;
-            top: -227px;
-            height: 140px;
-            width: 140px;
-            border-radius: 50% !important;
-            transform: scale(0.5);
-            animation: bulge 2s infinite ease-in-out;
-            background-color: rgba(68, 215, 182, 0.12);
-            animation-delay: 0s;
-            margin: 0 auto;
-            float: none;
-            display: block;
-        }
-
-        .green_point2::after {
-            position: absolute;
-            display: inline-block;
-            content: '';
-            height: 100%;
-            width: 100%;
-            border-radius: 50%;
-            background-color: inherit;
-            top: 0;
-            left: 0;
-            z-index: -1;
+        }
+        1.11% {
+            opacity: 0.5;
             transform: scale(1);
-            animation: blow 2s infinite ease-in-out;
         }
-
-        .red_point {
-            margin: 16px;
-            height: 16px;
-            width: 16px;
-            border-radius: 50% !important;
-            display: inline-block;
-            transform: scale(0.5);
-            animation: bulge 2s infinite ease-in-out;
-            background-color: #ff0000;
-            animation-delay: 0s;
+        2.22% {
+            opacity: 0.5;
+            transform: scale(1);
         }
-
-        .resultNum li s.yellow {
-            color: #F7B500;
+        3.33% {
+            opacity: 0.5;
+            transform: scale(1);
         }
-
-        .yellow {
-            color: #F7B500;
+        4.44% {
+            opacity: 0.5;
+            transform: scale(1);
         }
-
-        .resultNum li s.red {
-            color: #ff0000;
+        5.56% {
+            opacity: 0.5;
+            transform: scale(1);
         }
-
-        .red {
-            color: #ff0000;
+        6.67% {
+            opacity: 0.5;
+            transform: scale(1);
         }
-
-        .green {
-            color: #44D7B6;
+        7.78% {
+            opacity: 0.5;
+            transform: scale(1);
         }
-
-        .red_point::after {
-            position: absolute;
-            display: inline-block;
-            content: '';
-            height: 100%;
-            width: 100%;
-            border-radius: 50%;
-            background-color: inherit;
-            top: 0;
-            left: 0;
-            z-index: -1;
+        8.89% {
+            opacity: 0.4990338164251208;
             transform: scale(1);
-            animation: blow 2s infinite ease-in-out;
         }
-
-        .resultSafe {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            margin-top: 60px;
-            margin-bottom: 60px;
-            color: #44D7B6;
-            font-size: 19px;
-            text-align: center;
+        10% {
+            opacity: 0.4934782608695652;
+            transform: scale(1);
         }
-
-        .resultDanger ul {
-            width: 94%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            padding: 1px;
+        11.11% {
+            opacity: 0.48792270531400966;
+            transform: scale(1);
+        }
+        12.22% {
+            opacity: 0.4823671497584541;
+            transform: scale(1);
+        }
+        13.33% {
+            opacity: 0.47681159420289854;
+            transform: scale(1);
+        }
+        14.44% {
+            opacity: 0.471256038647343;
+            transform: scale(1);
+        }
+        15.56% {
+            opacity: 0.46570048309178746;
+            transform: scale(1);
+        }
+        16.67% {
+            opacity: 0.4601449275362319;
+            transform: scale(1);
+        }
+        17.78% {
+            opacity: 0.45458937198067634;
+            transform: scale(1);
+        }
+        18.89% {
+            opacity: 0.44903381642512075;
+            transform: scale(1);
+        }
+        20% {
+            opacity: 0.4434782608695652;
+            transform: scale(1);
+        }
+        21.11% {
+            opacity: 0.4379227053140097;
+            transform: scale(1);
+        }
+        22.22% {
+            opacity: 0.43236714975845414;
+            transform: scale(1);
+        }
+        23.33% {
+            opacity: 0.42681159420289855;
+            transform: scale(1);
+        }
+        24.44% {
+            opacity: 0.42125603864734296;
+            transform: scale(1.0033854166666667);
+        }
+        25.56% {
+            opacity: 0.4157004830917874;
+            transform: scale(1.0153645833333333);
+        }
+        26.67% {
+            opacity: 0.4101449275362319;
+            transform: scale(1.02734375);
+        }
+        27.78% {
+            opacity: 0.40458937198067635;
+            transform: scale(1.0393229166666667);
+        }
+        28.89% {
+            opacity: 0.39903381642512076;
+            transform: scale(1.0513020833333333);
+        }
+        30% {
+            opacity: 0.3934782608695652;
+            transform: scale(1.06328125);
+        }
+        31.11% {
+            opacity: 0.3879227053140097;
+            transform: scale(1.0752604166666666);
+        }
+        32.22% {
+            opacity: 0.3823671497584541;
+            transform: scale(1.0872395833333333);
+        }
+        33.33% {
+            opacity: 0.37681159420289856;
+            transform: scale(1.0992187500000001);
+        }
+        34.44% {
+            opacity: 0.371256038647343;
+            transform: scale(1.1111979166666666);
+        }
+        35.56% {
+            opacity: 0.36570048309178743;
+            transform: scale(1.1231770833333334);
+        }
+        36.67% {
+            opacity: 0.36014492753623184;
+            transform: scale(1.13515625);
+        }
+        37.78% {
+            opacity: 0.3545893719806763;
+            transform: scale(1.1471354166666667);
+        }
+        38.89% {
+            opacity: 0.34903381642512077;
+            transform: scale(1.1591145833333334);
+        }
+        40% {
+            opacity: 0.34347826086956523;
+            transform: scale(1.17109375);
+        }
+        41.11% {
+            opacity: 0.33792270531400964;
+            transform: scale(1.1830729166666667);
+        }
+        42.22% {
+            opacity: 0.33236714975845416;
+            transform: scale(1.1950520833333333);
+        }
+        43.33% {
+            opacity: 0.3268115942028985;
+            transform: scale(1.20703125);
+        }
+        44.44% {
+            opacity: 0.32125603864734303;
+            transform: scale(1.2190104166666667);
+        }
+        45.56% {
+            opacity: 0.31570048309178744;
+            transform: scale(1.2309895833333333);
+        }
+        46.67% {
+            opacity: 0.31014492753623185;
+            transform: scale(1.2429687500000002);
+        }
+        47.78% {
+            opacity: 0.3045893719806763;
+            transform: scale(1.2549479166666666);
+        }
+        48.89% {
+            opacity: 0.2990338164251207;
+            transform: scale(1.2669270833333335);
+        }
+        50% {
+            opacity: 0.2934782608695652;
+            transform: scale(1.27890625);
+        }
+        51.11% {
+            opacity: 0.2879227053140096;
+            transform: scale(1.2908854166666668);
+        }
+        52.22% {
+            opacity: 0.2823671497584541;
+            transform: scale(1.3028645833333334);
+        }
+        53.33% {
+            opacity: 0.2768115942028986;
+            transform: scale(1.31484375);
+        }
+        54.44% {
+            opacity: 0.271256038647343;
+            transform: scale(1.3268229166666667);
+        }
+        55.56% {
+            opacity: 0.2657004830917874;
+            transform: scale(1.3388020833333334);
+        }
+        56.67% {
+            opacity: 0.26014492753623186;
+            transform: scale(1.35078125);
+        }
+        57.78% {
+            opacity: 0.2545893719806763;
+            transform: scale(1.3627604166666667);
+        }
+        58.89% {
+            opacity: 0.24903381642512074;
+            transform: scale(1.3747395833333333);
+        }
+        60% {
+            opacity: 0.2434782608695652;
+            transform: scale(1.38671875);
+        }
+        61.11% {
+            opacity: 0.23792270531400966;
+            transform: scale(1.3986979166666667);
+        }
+        62.22% {
+            opacity: 0.23236714975845413;
+            transform: scale(1.4106770833333333);
+        }
+        63.33% {
+            opacity: 0.22681159420289854;
+            transform: scale(1.42265625);
+        }
+        64.44% {
+            opacity: 0.221256038647343;
+            transform: scale(1.4346354166666666);
+        }
+        65.56% {
+            opacity: 0.21570048309178746;
+            transform: scale(1.4466145833333333);
+        }
+        66.67% {
+            opacity: 0.21014492753623182;
+            transform: scale(1.4585937500000001);
+        }
+        67.78% {
+            opacity: 0.20458937198067634;
+            transform: scale(1.4705729166666668);
+        }
+        68.89% {
+            opacity: 0.1990338164251208;
+            transform: scale(1.4825520833333332);
+        }
+        70% {
+            opacity: 0.19347826086956527;
+            transform: scale(1.4945312499999999);
+        }
+        71.11% {
+            opacity: 0.18792270531400967;
+            transform: scale(1.5065104166666667);
+        }
+        72.22% {
+            opacity: 0.18236714975845403;
+            transform: scale(1.5184895833333334);
+        }
+        73.33% {
+            opacity: 0.1768115942028985;
+            transform: scale(1.5304687500000003);
+        }
+        74.44% {
+            opacity: 0.171256038647343;
+            transform: scale(1.5424479166666667);
         }
+        75.56% {
+            opacity: 0.16570048309178742;
+            transform: scale(1.5544270833333336);
+        }
+        76.67% {
+            opacity: 0.16014492753623188;
+            transform: scale(1.56640625);
+        }
+        77.78% {
+            opacity: 0.1545893719806763;
+            transform: scale(1.5783854166666669);
+        }
+        78.89% {
+            opacity: 0.14903381642512076;
+            transform: scale(1.5903645833333333);
+        }
+        80% {
+            opacity: 0.14347826086956522;
+            transform: scale(1.6023437500000002);
+        }
+        81.11% {
+            opacity: 0.13792270531400969;
+            transform: scale(1.6143229166666666);
+        }
+        82.22% {
+            opacity: 0.1323671497584541;
+            transform: scale(1.6263020833333335);
+        }
+        83.33% {
+            opacity: 0.12681159420289845;
+            transform: scale(1.6382812500000004);
+        }
+        84.44% {
+            opacity: 0.12125603864734302;
+            transform: scale(1.6502604166666668);
+        }
+        85.56% {
+            opacity: 0.11570048309178743;
+            transform: scale(1.6622395833333334);
+        }
+        86.67% {
+            opacity: 0.1101449275362319;
+            transform: scale(1.67421875);
+        }
+        87.78% {
+            opacity: 0.10458937198067625;
+            transform: scale(1.686197916666667);
+        }
+        88.89% {
+            opacity: 0.09903381642512082;
+            transform: scale(1.6981770833333334);
+        }
+        90% {
+            opacity: 0.09347826086956523;
+            transform: scale(1.71015625);
+        }
+        91.11% {
+            opacity: 0.0879227053140097;
+            transform: scale(1.7221354166666667);
+        }
+        92.22% {
+            opacity: 0.0823671497584541;
+            transform: scale(1.7341145833333336);
+        }
+        93.33% {
+            opacity: 0.07681159420289846;
+            transform: scale(1.7460937500000002);
+        }
+        94.44% {
+            opacity: 0.07125603864734303;
+            transform: scale(1.7580729166666667);
+        }
+        95.56% {
+            opacity: 0.06570048309178739;
+            transform: scale(1.7700520833333333);
+        }
+        96.67% {
+            opacity: 0.06014492753623191;
+            transform: scale(1.7820312500000002);
+        }
+        97.78% {
+            opacity: 0.05458937198067626;
+            transform: scale(1.7940104166666668);
+        }
+        98.89% {
+            opacity: 0.04903381642512067;
+            transform: scale(1.8);
+        }
+        100% {
+            opacity: 0.043478260869565244;
+            transform: scale(1.8);
+        }
+    }
 
-        .resultDanger li {
-            padding: 19px 9px;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            margin-bottom: 10px;
-            box-shadow: 0px 0px 3px #999;
 
+    /*响应式调整*/
+    @media only screen and (max-width: 320px) {
+        .resultDanger li {
+            padding: 11px 2px;
         }
 
-        .resultDanger li > img {
-            width: 26px;
-            height: 26px;
-            float: left;
-            margin-right: 6px;
+        .resultNum li {
+            margin-right: 2%;
         }
 
-        .resultDanger li > span {
-            float: left;
-            font-size: 14px;
-            line-height: 28px;
-            margin-right: 6px;
+        .liDetail {
+            width: 46% !important;
         }
 
-        .resultDanger .liDetail {
-            width: 54%;
-            float: left;
-            font-size: 12px;
-            color: #9A9A9A;
-            overflow: hidden;
-            text-align: left;
+        .detectorInfo {
+            margin-left: 3px;
         }
 
-        .liDetail span {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            font-size: 12px;
-            text-align: left;
+        .resultDanger li > span {
+            margin-right: 6px;
         }
+    }
 
-        .resultDanger li i.liStatus {
-            width: 33px;
-            height: 16px;
-            float: left;
-            border-radius: 250px;
-            color: #fff;
-            font-size: 12px;
-            text-align: center;
-            margin-top: 8px;
-            line-height: 16px;
+    @media (min-width: 240px) and (max-width: 320px) {
+        .liDetail {
+            width: 50% !important;
         }
 
         .detectorInfo {
-            width: 26px;
-            float: right;
-            margin-left: 8px;
-        }
-
-        .detectorInfo img {
-            width: 26px;
-            /*height: 19px;*/
-            overflow: hidden;
-            margin: 0 auto;
-            float: left;
-        }
-
-        .detectorInfo s {
-            position: relative;
-            bottom: 4px;
-            left: -5px;
-            width: 16px;
-            height: 16px;
-            background: #F7B500;
-            overflow: hidden;
-            float: right;
-            margin: 0 auto;
-            color: #fff;
-            border-radius: 250px;
-            text-align: center;
-            line-height: 16px;
-        }
-
-        .resultDanger .liSafe {
-            background: #44D7B6;
-        }
-
-        .resultDanger .liDanger {
-            background: #E02020;
-        }
-
-        .resultDanger .liwarn {
-            background: #F7B500;
-        }
-
-        .resultDanger .liOther {
-            background: #44D7B6;
-        }
-
-        .telButton {
-            width: 238px;
-            height: 42px;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            color: #fff;
-            font-size: 12px;
-            background: #F7B500;
-            border-radius: 21px;
-            text-align: center;
-            margin-top: 10px;
-            margin-bottom: 10px;
-            text-decoration: none;
-        }
-
-        .telButton em {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            margin-top: 2px;
-        }
-
-        #roomName {
-            width: 100%;
-            height: 24px;
-            line-height: 24px;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            text-align: center;
-            margin-top: 18px;
-            color: #fff;
-            font-size: 14px;
-        }
-
-        #statusText {
-            width: 100%;
-            height: 18px;
-            line-height: 18px;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            font-size: 12px;
-        }
-
-        .telButton span {
-            font-size: 18px;
-        }
-
-        .Safe_circle {
-            height: 80px;
-            width: 80px;
-            top: 38%;
-            left: 0;
-            right: 0;
-            margin: 0 auto;
-            background-color: #44D7B6;
-            border-radius: 100px;
-            position: absolute;
-            color: #FFF;
-            line-height: 80px;
-            font-size: 18px;
-            text-align: center;
-        }
-
-        .Sus_circle {
-            height: 80px;
-            width: 80px;
-            top: 38%;
-            left: 500px;
-            background-color: #F7B500;
-            border-radius: 100px;
-            position: fixed;
-            color: #FFF;
-            line-height: 80px;
-            font-size: 18px;
-            text-align: center;
-        }
-
-        .Danger_circle {
-            height: 80px;
-            width: 80px;
-            top: 38%;
-            left: 0;
-            right: 0;
-            margin: 0 auto;
-            background-color: #E02020;
-            border-radius: 100px;
-            position: absolute;
-            color: #FFF;
-            line-height: 80px;
-            font-size: 18px;
-            text-align: center;
-        }
-
-        .Scan {
-            animation-name: Scan-keyframes;
-            animation-duration: 1500ms;
-            animation-delay: 0ms;
-            animation-fill-mode: forwards;
-            animation-timing-function: linear;
-            animation-iteration-count: infinite;
-        }
-
-        .btImg {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-        }
-
-        .btImg img {
-            width: 100%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-        }
-
-        .tips {
-            width: 90%;
-            overflow: hidden;
-            display: block;
-            margin: 0 auto;
-            font-size: 12px;
-            color: #666;
-        }
-
-        .eqname {
-            width: 50px;
-        }
-
-        @keyframes Scan-keyframes {
-            0% {
-                opacity: 0.5;
-                transform: scale(1);
-            }
-            1.11% {
-                opacity: 0.49388603570555145;
-                transform: scale(1.011111111111111);
-            }
-            2.22% {
-                opacity: 0.48777207141110296;
-                transform: scale(1.0222222222222221);
-            }
-            3.33% {
-                opacity: 0.48165810711665447;
-                transform: scale(1.0333333333333334);
-            }
-            4.44% {
-                opacity: 0.4755441428222059;
-                transform: scale(1.0444444444444445);
-            }
-            5.56% {
-                opacity: 0.4694301785277574;
-                transform: scale(1.0555555555555556);
-            }
-            6.67% {
-                opacity: 0.4633162142333089;
-                transform: scale(1.0666666666666667);
-            }
-            7.78% {
-                opacity: 0.4572022499388604;
-                transform: scale(1.0777777777777777);
-            }
-            8.89% {
-                opacity: 0.45108828564441183;
-                transform: scale(1.0888888888888888);
-            }
-            10% {
-                opacity: 0.4449743213499633;
-                transform: scale(1.1);
-            }
-            11.11% {
-                opacity: 0.4388603570555148;
-                transform: scale(1.1111111111111112);
-            }
-            12.22% {
-                opacity: 0.4327463927610663;
-                transform: scale(1.1222222222222222);
-            }
-            13.33% {
-                opacity: 0.42663242846661775;
-                transform: scale(1.1333333333333333);
-            }
-            14.44% {
-                opacity: 0.4205184641721692;
-                transform: scale(1.1444444444444444);
-            }
-            15.56% {
-                opacity: 0.4144044998777207;
-                transform: scale(1.1555555555555554);
-            }
-            16.67% {
-                opacity: 0.40829053558327216;
-                transform: scale(1.1666666666666667);
-            }
-            17.78% {
-                opacity: 0.40217657128882367;
-                transform: scale(1.1777777777777778);
-            }
-            18.89% {
-                opacity: 0.3960626069943752;
-                transform: scale(1.1888888888888889);
-            }
-            20% {
-                opacity: 0.38994864269992663;
-                transform: scale(1.2);
-            }
-            21.11% {
-                opacity: 0.38383467840547814;
-                transform: scale(1.211111111111111);
-            }
-            22.22% {
-                opacity: 0.3777207141110296;
-                transform: scale(1.2222222222222223);
-            }
-            23.33% {
-                opacity: 0.37160674981658104;
-                transform: scale(1.2333333333333334);
-            }
-            24.44% {
-                opacity: 0.36549278552213255;
-                transform: scale(1.2444444444444445);
-            }
-            25.56% {
-                opacity: 0.35937882122768405;
-                transform: scale(1.2555555555555555);
-            }
-            26.67% {
-                opacity: 0.3532648569332355;
-                transform: scale(1.2666666666666666);
-            }
-            27.78% {
-                opacity: 0.34715089263878696;
-                transform: scale(1.2777777777777777);
-            }
-            28.89% {
-                opacity: 0.34103692834433846;
-                transform: scale(1.288888888888889);
-            }
-            30% {
-                opacity: 0.33492296404988997;
-                transform: scale(1.3);
-            }
-            31.11% {
-                opacity: 0.3288089997554414;
-                transform: scale(1.3111111111111111);
-            }
-            32.22% {
-                opacity: 0.32269503546099293;
-                transform: scale(1.3222222222222222);
-            }
-            33.33% {
-                opacity: 0.3165810711665443;
-                transform: scale(1.3333333333333335);
-            }
-            34.44% {
-                opacity: 0.3104671068720959;
-                transform: scale(1.3444444444444446);
-            }
-            35.56% {
-                opacity: 0.30435314257764734;
-                transform: scale(1.3555555555555556);
-            }
-            36.67% {
-                opacity: 0.2982391782831988;
-                transform: scale(1.3666666666666667);
-            }
-            37.78% {
-                opacity: 0.29212521398875035;
-                transform: scale(1.3777777777777778);
-            }
-            38.89% {
-                opacity: 0.2860112496943018;
-                transform: scale(1.3888888888888888);
-            }
-            40% {
-                opacity: 0.27989728539985326;
-                transform: scale(1.4);
-            }
-            41.11% {
-                opacity: 0.2737833211054047;
-                transform: scale(1.4111111111111112);
-            }
-            42.22% {
-                opacity: 0.2676693568109562;
-                transform: scale(1.4222222222222223);
-            }
-            43.33% {
-                opacity: 0.2615553925165077;
-                transform: scale(1.4333333333333333);
-            }
-            44.44% {
-                opacity: 0.2554414282220592;
-                transform: scale(1.4444444444444444);
-            }
-            45.56% {
-                opacity: 0.24932746392761063;
-                transform: scale(1.4555555555555557);
-            }
-            46.67% {
-                opacity: 0.24321349963316208;
-                transform: scale(1.4666666666666668);
-            }
-            47.78% {
-                opacity: 0.23709953533871359;
-                transform: scale(1.4777777777777779);
-            }
-            48.89% {
-                opacity: 0.2309855710442651;
-                transform: scale(1.488888888888889);
-            }
-            50% {
-                opacity: 0.2248716067498166;
-                transform: scale(1.5);
-            }
-            51.11% {
-                opacity: 0.21875764245536805;
-                transform: scale(1.511111111111111);
-            }
-            52.22% {
-                opacity: 0.2126436781609195;
-                transform: scale(1.5222222222222221);
-            }
-            53.33% {
-                opacity: 0.206529713866471;
-                transform: scale(1.5333333333333332);
-            }
-            54.44% {
-                opacity: 0.20041574957202246;
-                transform: scale(1.5444444444444445);
-            }
-            55.56% {
-                opacity: 0.19430178527757397;
-                transform: scale(1.5555555555555556);
-            }
-            56.67% {
-                opacity: 0.18818782098312542;
-                transform: scale(1.5666666666666669);
-            }
-            57.78% {
-                opacity: 0.18207385668867693;
-                transform: scale(1.577777777777778);
-            }
-            58.89% {
-                opacity: 0.17595989239422838;
-                transform: scale(1.588888888888889);
-            }
-            60% {
-                opacity: 0.16984592809977989;
-                transform: scale(1.6);
-            }
-            61.11% {
-                opacity: 0.16373196380533134;
-                transform: scale(1.6111111111111112);
-            }
-            62.22% {
-                opacity: 0.15761799951088284;
-                transform: scale(1.6222222222222222);
-            }
-            63.33% {
-                opacity: 0.15150403521643435;
-                transform: scale(1.6333333333333333);
-            }
-            64.44% {
-                opacity: 0.14539007092198586;
-                transform: scale(1.6444444444444444);
-            }
-            65.56% {
-                opacity: 0.13927610662753726;
-                transform: scale(1.6555555555555554);
-            }
-            66.67% {
-                opacity: 0.1331621423330887;
-                transform: scale(1.6666666666666667);
-            }
-            67.78% {
-                opacity: 0.1270481780386402;
-                transform: scale(1.6777777777777778);
-            }
-            68.89% {
-                opacity: 0.12093421374419178;
-                transform: scale(1.6888888888888889);
-            }
-            70% {
-                opacity: 0.11482024944974323;
-                transform: scale(1.7);
-            }
-            71.11% {
-                opacity: 0.10870628515529468;
-                transform: scale(1.7111111111111112);
-            }
-            72.22% {
-                opacity: 0.10259232086084613;
-                transform: scale(1.7222222222222223);
-            }
-            73.33% {
-                opacity: 0.09647835656639764;
-                transform: scale(1.7333333333333334);
-            }
-            74.44% {
-                opacity: 0.09036439227194909;
-                transform: scale(1.7444444444444445);
-            }
-            75.56% {
-                opacity: 0.08425042797750065;
-                transform: scale(1.7555555555555555);
-            }
-            76.67% {
-                opacity: 0.0781364636830521;
-                transform: scale(1.7666666666666666);
-            }
-            77.78% {
-                opacity: 0.07202249938860356;
-                transform: scale(1.7777777777777777);
-            }
-            78.89% {
-                opacity: 0.06590853509415506;
-                transform: scale(1.7888888888888888);
-            }
-            80% {
-                opacity: 0.059794570799706515;
-                transform: scale(1.8);
-            }
-            81.11% {
-                opacity: 0.053680606505257966;
-                transform: scale(1.8111111111111111);
-            }
-            82.22% {
-                opacity: 0.04756664221080942;
-                transform: scale(1.8222222222222224);
-            }
-            83.33% {
-                opacity: 0.04145267791636087;
-                transform: scale(1.8333333333333335);
-            }
-            84.44% {
-                opacity: 0.03533871362191243;
-                transform: scale(1.8444444444444446);
-            }
-            85.56% {
-                opacity: 0.029224749327463884;
-                transform: scale(1.8555555555555556);
-            }
-            86.67% {
-                opacity: 0.02311078503301539;
-                transform: scale(1.8666666666666667);
-            }
-            87.78% {
-                opacity: 0.016996820738566842;
-                transform: scale(1.8777777777777778);
-            }
-            88.89% {
-                opacity: 0.010882856444118405;
-                transform: scale(1.8888888888888888);
-            }
-            90% {
-                opacity: 0.004768892149669857;
-                transform: scale(1.9);
-            }
-            91.11% {
-                opacity: 0;
-                transform: scale(1.9111111111111112);
-            }
-            92.22% {
-                opacity: 0;
-                transform: scale(1.9222222222222223);
-            }
-            93.33% {
-                opacity: 0;
-                transform: scale(1.9333333333333336);
-            }
-            94.44% {
-                opacity: 0;
-                transform: scale(1.9444444444444446);
-            }
-            95.56% {
-                opacity: 0;
-                transform: scale(1.9555555555555557);
-            }
-            96.67% {
-                opacity: 0;
-                transform: scale(1.9666666666666668);
-            }
-            97.78% {
-                opacity: 0;
-                transform: scale(1.9777777777777779);
-            }
-            98.89% {
-                opacity: 0;
-                transform: scale(1.988888888888889);
-            }
-            100% {
-                opacity: 0;
-                transform: scale(2);
-            }
+            margin-left: 3px;
         }
 
-        .Scan_s {
-            animation-name: Scan_s-keyframes;
-            animation-duration: 1380ms;
-            animation-delay: 120ms;
-            animation-fill-mode: forwards;
-            animation-timing-function: linear;
-            animation-iteration-count: infinite;
+        .Safe_circle, .Sus_circle, .Danger_circle {
+            top: 220px;
         }
+    }
 
-        @keyframes Scan_s-keyframes {
-            0% {
-                opacity: 0.5;
-                transform: scale(1);
-            }
-            1.11% {
-                opacity: 0.5;
-                transform: scale(1);
-            }
-            2.22% {
-                opacity: 0.5;
-                transform: scale(1);
-            }
-            3.33% {
-                opacity: 0.5;
-                transform: scale(1);
-            }
-            4.44% {
-                opacity: 0.5;
-                transform: scale(1);
-            }
-            5.56% {
-                opacity: 0.5;
-                transform: scale(1);
-            }
-            6.67% {
-                opacity: 0.5;
-                transform: scale(1);
-            }
-            7.78% {
-                opacity: 0.5;
-                transform: scale(1);
-            }
-            8.89% {
-                opacity: 0.4990338164251208;
-                transform: scale(1);
-            }
-            10% {
-                opacity: 0.4934782608695652;
-                transform: scale(1);
-            }
-            11.11% {
-                opacity: 0.48792270531400966;
-                transform: scale(1);
-            }
-            12.22% {
-                opacity: 0.4823671497584541;
-                transform: scale(1);
-            }
-            13.33% {
-                opacity: 0.47681159420289854;
-                transform: scale(1);
-            }
-            14.44% {
-                opacity: 0.471256038647343;
-                transform: scale(1);
-            }
-            15.56% {
-                opacity: 0.46570048309178746;
-                transform: scale(1);
-            }
-            16.67% {
-                opacity: 0.4601449275362319;
-                transform: scale(1);
-            }
-            17.78% {
-                opacity: 0.45458937198067634;
-                transform: scale(1);
-            }
-            18.89% {
-                opacity: 0.44903381642512075;
-                transform: scale(1);
-            }
-            20% {
-                opacity: 0.4434782608695652;
-                transform: scale(1);
-            }
-            21.11% {
-                opacity: 0.4379227053140097;
-                transform: scale(1);
-            }
-            22.22% {
-                opacity: 0.43236714975845414;
-                transform: scale(1);
-            }
-            23.33% {
-                opacity: 0.42681159420289855;
-                transform: scale(1);
-            }
-            24.44% {
-                opacity: 0.42125603864734296;
-                transform: scale(1.0033854166666667);
-            }
-            25.56% {
-                opacity: 0.4157004830917874;
-                transform: scale(1.0153645833333333);
-            }
-            26.67% {
-                opacity: 0.4101449275362319;
-                transform: scale(1.02734375);
-            }
-            27.78% {
-                opacity: 0.40458937198067635;
-                transform: scale(1.0393229166666667);
-            }
-            28.89% {
-                opacity: 0.39903381642512076;
-                transform: scale(1.0513020833333333);
-            }
-            30% {
-                opacity: 0.3934782608695652;
-                transform: scale(1.06328125);
-            }
-            31.11% {
-                opacity: 0.3879227053140097;
-                transform: scale(1.0752604166666666);
-            }
-            32.22% {
-                opacity: 0.3823671497584541;
-                transform: scale(1.0872395833333333);
-            }
-            33.33% {
-                opacity: 0.37681159420289856;
-                transform: scale(1.0992187500000001);
-            }
-            34.44% {
-                opacity: 0.371256038647343;
-                transform: scale(1.1111979166666666);
-            }
-            35.56% {
-                opacity: 0.36570048309178743;
-                transform: scale(1.1231770833333334);
-            }
-            36.67% {
-                opacity: 0.36014492753623184;
-                transform: scale(1.13515625);
-            }
-            37.78% {
-                opacity: 0.3545893719806763;
-                transform: scale(1.1471354166666667);
-            }
-            38.89% {
-                opacity: 0.34903381642512077;
-                transform: scale(1.1591145833333334);
-            }
-            40% {
-                opacity: 0.34347826086956523;
-                transform: scale(1.17109375);
-            }
-            41.11% {
-                opacity: 0.33792270531400964;
-                transform: scale(1.1830729166666667);
-            }
-            42.22% {
-                opacity: 0.33236714975845416;
-                transform: scale(1.1950520833333333);
-            }
-            43.33% {
-                opacity: 0.3268115942028985;
-                transform: scale(1.20703125);
-            }
-            44.44% {
-                opacity: 0.32125603864734303;
-                transform: scale(1.2190104166666667);
-            }
-            45.56% {
-                opacity: 0.31570048309178744;
-                transform: scale(1.2309895833333333);
-            }
-            46.67% {
-                opacity: 0.31014492753623185;
-                transform: scale(1.2429687500000002);
-            }
-            47.78% {
-                opacity: 0.3045893719806763;
-                transform: scale(1.2549479166666666);
-            }
-            48.89% {
-                opacity: 0.2990338164251207;
-                transform: scale(1.2669270833333335);
-            }
-            50% {
-                opacity: 0.2934782608695652;
-                transform: scale(1.27890625);
-            }
-            51.11% {
-                opacity: 0.2879227053140096;
-                transform: scale(1.2908854166666668);
-            }
-            52.22% {
-                opacity: 0.2823671497584541;
-                transform: scale(1.3028645833333334);
-            }
-            53.33% {
-                opacity: 0.2768115942028986;
-                transform: scale(1.31484375);
-            }
-            54.44% {
-                opacity: 0.271256038647343;
-                transform: scale(1.3268229166666667);
-            }
-            55.56% {
-                opacity: 0.2657004830917874;
-                transform: scale(1.3388020833333334);
-            }
-            56.67% {
-                opacity: 0.26014492753623186;
-                transform: scale(1.35078125);
-            }
-            57.78% {
-                opacity: 0.2545893719806763;
-                transform: scale(1.3627604166666667);
-            }
-            58.89% {
-                opacity: 0.24903381642512074;
-                transform: scale(1.3747395833333333);
-            }
-            60% {
-                opacity: 0.2434782608695652;
-                transform: scale(1.38671875);
-            }
-            61.11% {
-                opacity: 0.23792270531400966;
-                transform: scale(1.3986979166666667);
-            }
-            62.22% {
-                opacity: 0.23236714975845413;
-                transform: scale(1.4106770833333333);
-            }
-            63.33% {
-                opacity: 0.22681159420289854;
-                transform: scale(1.42265625);
-            }
-            64.44% {
-                opacity: 0.221256038647343;
-                transform: scale(1.4346354166666666);
-            }
-            65.56% {
-                opacity: 0.21570048309178746;
-                transform: scale(1.4466145833333333);
-            }
-            66.67% {
-                opacity: 0.21014492753623182;
-                transform: scale(1.4585937500000001);
-            }
-            67.78% {
-                opacity: 0.20458937198067634;
-                transform: scale(1.4705729166666668);
-            }
-            68.89% {
-                opacity: 0.1990338164251208;
-                transform: scale(1.4825520833333332);
-            }
-            70% {
-                opacity: 0.19347826086956527;
-                transform: scale(1.4945312499999999);
-            }
-            71.11% {
-                opacity: 0.18792270531400967;
-                transform: scale(1.5065104166666667);
-            }
-            72.22% {
-                opacity: 0.18236714975845403;
-                transform: scale(1.5184895833333334);
-            }
-            73.33% {
-                opacity: 0.1768115942028985;
-                transform: scale(1.5304687500000003);
-            }
-            74.44% {
-                opacity: 0.171256038647343;
-                transform: scale(1.5424479166666667);
-            }
-            75.56% {
-                opacity: 0.16570048309178742;
-                transform: scale(1.5544270833333336);
-            }
-            76.67% {
-                opacity: 0.16014492753623188;
-                transform: scale(1.56640625);
-            }
-            77.78% {
-                opacity: 0.1545893719806763;
-                transform: scale(1.5783854166666669);
-            }
-            78.89% {
-                opacity: 0.14903381642512076;
-                transform: scale(1.5903645833333333);
-            }
-            80% {
-                opacity: 0.14347826086956522;
-                transform: scale(1.6023437500000002);
-            }
-            81.11% {
-                opacity: 0.13792270531400969;
-                transform: scale(1.6143229166666666);
-            }
-            82.22% {
-                opacity: 0.1323671497584541;
-                transform: scale(1.6263020833333335);
-            }
-            83.33% {
-                opacity: 0.12681159420289845;
-                transform: scale(1.6382812500000004);
-            }
-            84.44% {
-                opacity: 0.12125603864734302;
-                transform: scale(1.6502604166666668);
-            }
-            85.56% {
-                opacity: 0.11570048309178743;
-                transform: scale(1.6622395833333334);
-            }
-            86.67% {
-                opacity: 0.1101449275362319;
-                transform: scale(1.67421875);
-            }
-            87.78% {
-                opacity: 0.10458937198067625;
-                transform: scale(1.686197916666667);
-            }
-            88.89% {
-                opacity: 0.09903381642512082;
-                transform: scale(1.6981770833333334);
-            }
-            90% {
-                opacity: 0.09347826086956523;
-                transform: scale(1.71015625);
-            }
-            91.11% {
-                opacity: 0.0879227053140097;
-                transform: scale(1.7221354166666667);
-            }
-            92.22% {
-                opacity: 0.0823671497584541;
-                transform: scale(1.7341145833333336);
-            }
-            93.33% {
-                opacity: 0.07681159420289846;
-                transform: scale(1.7460937500000002);
-            }
-            94.44% {
-                opacity: 0.07125603864734303;
-                transform: scale(1.7580729166666667);
-            }
-            95.56% {
-                opacity: 0.06570048309178739;
-                transform: scale(1.7700520833333333);
-            }
-            96.67% {
-                opacity: 0.06014492753623191;
-                transform: scale(1.7820312500000002);
-            }
-            97.78% {
-                opacity: 0.05458937198067626;
-                transform: scale(1.7940104166666668);
-            }
-            98.89% {
-                opacity: 0.04903381642512067;
-                transform: scale(1.8);
-            }
-            100% {
-                opacity: 0.043478260869565244;
-                transform: scale(1.8);
-            }
+    @media (min-width: 321px) and (max-width: 344px) {
+        .liDetail {
+            width: 50% !important;
         }
 
-
-        /*响应式调整*/
-        @media only screen and (max-width: 320px) {
-            .resultDanger li {
-                padding: 11px 2px;
-            }
-
-            .resultNum li {
-                margin-right: 2%;
-            }
-
-            .liDetail {
-                width: 46% !important;
-            }
-
-            .detectorInfo {
-                margin-left: 3px;
-            }
-
-            .resultDanger li > span {
-                margin-right: 6px;
-            }
+        .detectorInfo {
+            margin-left: 3px;
         }
 
-        @media (min-width: 240px) and (max-width: 320px) {
-            .liDetail {
-                width: 50% !important;
-            }
-
-            .detectorInfo {
-                margin-left: 3px;
-            }
-
-            .Safe_circle, .Sus_circle, .Danger_circle {
-                top: 220px;
-            }
+        .Safe_circle, .Sus_circle, .Danger_circle {
+            top: 220px;
         }
+    }
 
-        @media (min-width: 321px) and (max-width: 344px) {
-            .liDetail {
-                width: 50% !important;
-            }
-
-            .detectorInfo {
-                margin-left: 3px;
-            }
-
-            .Safe_circle, .Sus_circle, .Danger_circle {
-                top: 220px;
-            }
+    @media (min-width: 345px) and (max-width: 360px) {
+        .liDetail {
+            width: 50% !important;
         }
 
-        @media (min-width: 345px) and (max-width: 360px) {
-            .liDetail {
-                width: 50% !important;
-            }
-
-            .detectorInfo {
-                margin-left: 3px;
-            }
+        .detectorInfo {
+            margin-left: 3px;
+        }
 
-            .Safe_circle, .Sus_circle, .Danger_circle {
-                top: 250px;
-            }
+        .Safe_circle, .Sus_circle, .Danger_circle {
+            top: 250px;
         }
+    }
 
-        @media (min-width: 361px) and (max-width: 375px) {
-            .liDetail {
-                width: 50% !important;
-            }
+    @media (min-width: 361px) and (max-width: 375px) {
+        .liDetail {
+            width: 50% !important;
+        }
 
-            .detectorInfo {
-                margin-left: 3px;
-            }
+        .detectorInfo {
+            margin-left: 3px;
+        }
 
-            .Safe_circle, .Sus_circle, .Danger_circle {
-                top: 260px;
-            }
+        .Safe_circle, .Sus_circle, .Danger_circle {
+            top: 260px;
         }
+    }
 
-        @media (min-width: 376px) and (max-width: 396px) {
-            .Safe_circle, .Sus_circle, .Danger_circle {
-                top: 260px;
-            }
+    @media (min-width: 376px) and (max-width: 396px) {
+        .Safe_circle, .Sus_circle, .Danger_circle {
+            top: 260px;
         }
+    }
 
-        @media (min-width: 397px) and (max-width: 414px) {
-            .resultNum li {
-                margin-right: 4%;
-            }
+    @media (min-width: 397px) and (max-width: 414px) {
+        .resultNum li {
+            margin-right: 4%;
+        }
 
-            .Safe_circle, .Sus_circle, .Danger_circle {
-                top: 280px;
-            }
+        .Safe_circle, .Sus_circle, .Danger_circle {
+            top: 280px;
         }
+    }
 
-        @media (min-width: 415px) and (max-width: 480px) {
+    @media (min-width: 415px) and (max-width: 480px) {
 
-        }
+    }
 
-        @media (min-width: 481px) and (max-width: 640px) {
+    @media (min-width: 481px) and (max-width: 640px) {
 
-        }
+    }
 
-    </style>
+</style>

src/views/Qrcodemanage.vue

@@ -45,8 +45,8 @@
         </div>
         <div class="contorl">
             <el-button size="small" type="primary" @click="addList">添加</el-button>
-            <el-button size="small" type="primary" @click="delList">删除</el-button>
             <el-button size="small" type="primary" @click="changeList">修改</el-button>
+            <el-button size="small" type="primary" @click="delList">删除</el-button>
         </div>
         <el-table
                 :data="tableData"
@@ -181,9 +181,47 @@
                     </el-col>
                     <el-col :span="10">
                         <label>
-                            单位形象图 * todo
+                            单位形象图
                         </label>
-                        <!--todo-->
+                        <el-upload
+                                action="/api/v1/Detector/QrCodeUpload"
+                                ref="upload"
+                                list-type="picture-card"
+                                :data="dialog"
+                                :on-success="handleImgSuccess"
+                                :before-upload="handleImgbefore"
+                                :auto-upload="true">
+                            <i slot="default" class="el-icon-plus"></i>
+                            <div slot="file" slot-scope="{file}">
+                                <img
+                                        class="el-upload-list__item-thumbnail"
+                                        :src="file.url" alt=""
+                                >
+                                <span class="el-upload-list__item-actions">
+        <span
+                class="el-upload-list__item-preview"
+                @click="handlePictureCardPreview(file)"
+        >
+          <i class="el-icon-zoom-in"></i>
+        </span>
+        <span
+                v-if="!disabled"
+                class="el-upload-list__item-delete"
+                @click="handleDownload(file)"
+        >
+          <i class="el-icon-download"></i>
+        </span>
+      </span>
+                            </div>
+                        </el-upload>
+                        <img
+                                v-if="dialog.imgSrc"
+                                class="editImg"
+                                :src="dialog.imgSrc" alt=""
+                        >
+                        <el-dialog :visible.sync="dialogVisible">
+                            <img width="100%" :src="dialogImageUrl" alt="">
+                        </el-dialog>
                     </el-col>
                 </el-row>
             </div>
@@ -198,6 +236,8 @@
         GetRegionAndDectorSelect,
         GetQrcodeList,
         QrCodeAdd,
+        QrCodeEdit,
+        QrcodeEditStatus,
     } from '../api/getApiRes.js'
 
     let qs = require('qs');
@@ -224,6 +264,10 @@
                     time1: globalBt2(),
                 },
                 dialog: {
+                    shopID: 1,//One and always is one
+                    comID: 1,//One and always is one
+                    qrcodeid: 0,//One and always is one
+                    token: localStorage.token,
                     comname: '',
                     tel: '',
                     qrname: '',
@@ -232,7 +276,8 @@
                     frequency: '',
                     timeType: '1',
                     memo: '',
-                    imagekey: '123',
+                    imagekey: '',
+                    imgSrc: '',
                     validType: 0,
                     detOptions: [],
                     checkList: [],
@@ -253,32 +298,21 @@
                 draw: 1,
                 start: 0,
                 recordsTotal: 0,
-                tableData: [
-                    {
-                        "QrId":3,
-                        "ComId":7,
-                        "ComName":"一瓦科技",
-                        "Tel":"15253135699",
-                        "QrName":"会议室",
-                        "DetIdStr":"29,30,31",
-                        "PicPath":"8e51ac9d6bcad2c296e7b26f1f88949f",
-                        "Memo":"线上展示，请勿删改",
-                        "State":1,
-                        "Frequency":60000,
-                        "ExpTime":"2020-08-14T02:27:32.161505+08:00",
-                        "Vfcode":"d6caec11e8fb88b519614c6096622a50",
-                        "CreateTime":"2020-07-03T09:54:44.728978+08:00",
-                        "TagnameStr":"会议室3,会议室2,会议室1",
-                        "LocationStr":"------会议室,------会议室,------会议室"
-                    }
-                ],
+                tableData: [],
                 allTableData: [],
                 limit: '10',
                 multipleSort: false,
                 loading: true,
                 fileList: [],
+                dialogVisible: false,
+                disabled: false,
+                plateTitle: '',
+                plateImg: false,
+                loftListState: false,
                 multipleSelection: [],
                 detectedmac: '',
+                plateImgSrc: '',
+                dialogImageUrl: '',
             }
         },
         mounted() {
@@ -295,6 +329,18 @@
                 this.getTableQuery();
                 this.$message.success('查询完毕');
             },
+            handleImgbefore(file) {
+                this.dialog.image = file;
+                this.dialog.imgSrc = '';
+            },
+            handleImgSuccess(res, file) {
+                let that = this;
+                if (res.Code == 0) {
+                    that.dialog.imagekey = res.Key
+                } else {
+                    that.$message.error(res.Memo);
+                }
+            },
             handleSelectionChange(val) {
                 this.multipleSelection = val;
                 console.log(val);
@@ -318,7 +364,7 @@
                 that.loading = true;
                 let param = {
                     token: localStorage.token,
-                    comid: 1,
+                    comid: 0,
                     qrcodename: that.panel.qrcodename,
                     timeLimit: that.panel.timeLimit,
                     cdtbt: globaltime2String(that.panel.time1[0]) + ' 00:00:01',//开始时间
@@ -414,17 +460,40 @@
                     return false
                 }
                 let qrcodeid = that.multipleSelection[0].QrId;
-                console.log(qrcodeid);
-                // ajax todo
-                // ok
-                that.dialog_state = false;
-                that.$message({
-                    message: '选中的二维码已删除',
-                    type: 'success'
-                });
-                // 重载列表
-                that.getTableQuery();
 
+                let param = {
+                    token: localStorage.token,
+                    qrcodeid: qrcodeid,
+                    status: 9,//0禁用1启用9删除
+                };
+                let postdata = qs.stringify(param);
+
+                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    QrcodeEditStatus(postdata).then(res => {
+                        let json = res;
+                        if (json.Code == 0) {
+                            that.$message({
+                                showClose: true,
+                                message: '选中的二维码已删除！',
+                                type: 'success'
+                            });
+                            // 重载列表
+                            that.getTableQuery();
+                            that.dialog_state = false;
+                        } else {
+                            that.$message.error(json.Memo);
+                        }
+                    });
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消删除'
+                    });
+                });
             },
             changeList() {
                 let that = this;
@@ -450,6 +519,7 @@
                 that.dialog_type = 2;
                 let row = this.multipleSelection[0];
                 this.dialog.comname = row.ComName;
+                this.dialog.qrcodeid = row.QrId;
                 this.dialog.tel = row.Tel;
                 this.dialog.qrname = row.QrName;
                 this.dialog.memo = row.Memo;
@@ -458,9 +528,9 @@
                 // 获取时限类型
                 let timeType = parseInt(row.Frequency);
                 if (timeType == 0) {
-                    that.dialog.timeType = 1;
+                    that.dialog.timeType = "1";
                 } else {
-                    that.dialog.timeType = 2;
+                    that.dialog.timeType = "2";
                 }
             },
             // 探测记录
@@ -473,6 +543,7 @@
                 that.dialog_state = false;
             },
             dialog_ok() {
+                console.log(this.dialog_type);
                 if (this.dialog_type == 1) {
                     this.confirmAddQrcode();
                 } else {
@@ -492,7 +563,6 @@
                     this.$message.error('错了哦，区域名称不能超过20个字符');
                     return false
                 }
-                console.log(that.dialog.qrname);
                 if (!that.dialog.qrname) {
                     this.$message.error('错了哦，二维码名称不能空');
                     return false
@@ -512,7 +582,7 @@
                     return false
                 }
                 let extime = 0;
-                if ( that.dialog.timeType == 0) {
+                if (that.dialog.timeType == 0) {
                     extime = 0;//无限时
                 } else {
                     switch (parseInt(that.dialog.validType)) {
@@ -523,10 +593,10 @@
                             extime = that.dialog.frequency * 60;
                             break;
                         case 2://天
-                            extime = that.dialog.frequency * 60 * 24 ;
+                            extime = that.dialog.frequency * 60 * 24;
                             break;
                         case 3://月
-                            extime = that.dialog.frequency * 60 * 24 * 30 ;
+                            extime = that.dialog.frequency * 60 * 24 * 30;
                             break;
                         case 4://年
                             extime = that.dialog.frequency * 60 * 24 * 30 * 12;
@@ -536,12 +606,12 @@
 
                 let param = {
                     token: localStorage.token,
-                    comname:that.dialog.comname,
+                    comname: that.dialog.comname,
                     comid: 1,
                     qrname: that.dialog.qrname,
                     tel: that.dialog.tel,
                     memo: that.dialog.memo,
-                    detidstr: detidstr,
+                    detidstr: detidstr.join(',') + ',',
                     frequency: extime,
                     imagekey: that.dialog.imagekey,
                 };
@@ -556,12 +626,17 @@
                         });
 
                         // 二维码页面 页面跳转
-                        that.$router.push({path:'/createmeetingqrcode',
+                        that.$router.push({
+                            path: '/createmeetingqrcode',
                             query: {
                                 shopname: that.dialog.comname,
                                 qrname: that.dialog.qrname,
                                 qrcodeId: json.Id,
-                        }});
+                            }
+                        });
+
+                        // 重载列表
+                        that.getTableQuery()
 
                     } else {
                         that.$message.error(json.Memo);
@@ -569,14 +644,104 @@
                 });
 
                 that.dialog_state = false;
-                that.$message({
-                    message: '主建筑已添加',
-                    type: 'success'
-                });
 
             },
             // 确认修改旧的二维码
             confirmEditQrcode() {
+                // checkVal
+                let that = this;
+                // checkVal
+                if (!that.dialog.comname) {
+                    this.$message.error('错了哦，区域名称不能空');
+                    return false
+                }
+                if (that.dialog.comname.length > 20) {
+                    this.$message.error('错了哦，区域名称不能超过20个字符');
+                    return false
+                }
+                if (!that.dialog.qrname) {
+                    this.$message.error('错了哦，二维码名称不能空');
+                    return false
+                }
+                if (that.dialog.qrname.length > 20) {
+                    this.$message.error('错了哦，二维码名称不能超过20个字符');
+                    return false
+                }
+                if (!that.dialog.tel) {
+                    this.$message.error('错了哦，电话名称不能空');
+                    return false
+                }
+
+                let detidstr = that.dialog.checkList;
+                if (!detidstr) {
+                    this.$message.error('错了哦，至少勾选一个探测器');
+                    return false
+                }
+                let extime = 0;
+                if (that.dialog.timeType == 0) {
+                    extime = 0;//无限时
+                } else {
+                    switch (parseInt(that.dialog.validType)) {
+                        case 0://分钟
+                            extime = that.dialog.frequency * 1;
+                            break;
+                        case 1://小时
+                            extime = that.dialog.frequency * 60;
+                            break;
+                        case 2://天
+                            extime = that.dialog.frequency * 60 * 24;
+                            break;
+                        case 3://月
+                            extime = that.dialog.frequency * 60 * 24 * 30;
+                            break;
+                        case 4://年
+                            extime = that.dialog.frequency * 60 * 24 * 30 * 12;
+                            break;
+                    }
+                }
+
+                let param = {
+                    token: localStorage.token,
+                    comname: that.dialog.comname,
+                    comid: 1,
+                    qrname: that.dialog.qrname,
+                    tel: that.dialog.tel,
+                    memo: that.dialog.memo,
+                    detidstr: detidstr.join(',') + ',',
+                    frequency: extime,
+                    imagekey: that.dialog.imagekey,
+                    qrcodeid: that.dialog.qrcodeid,
+                };
+                let postdata = qs.stringify(param);
+                QrCodeEdit(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.$message({
+                            showClose: true,
+                            message: '创建成功,前往二维码页面进行查看！',
+                            type: 'success'
+                        });
+
+                        // 二维码页面 页面跳转
+                        that.$router.push({
+                            path: '/createmeetingqrcode',
+                            query: {
+                                shopname: that.dialog.comname,
+                                qrname: that.dialog.qrname,
+                                qrcodeId: json.Id,
+                            }
+                        });
+
+                        // 重载列表
+                        that.getTableQuery()
+
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                });
+
+                that.dialog_state = false;
+
             },
             // 禁用二维码
             pauseQrcode(row) {
@@ -720,4 +885,33 @@
     .red {
         color: red !important;
     }
+
+    /deep/ .modal-body {
+        width: 100%;
+        height: 400px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-bottom: 40px;
+    }
+
+    /*upload*/
+    /deep/ .el-upload--picture-card {
+        float: left;
+        background: none;
+        border: 1px solid #005EA2;
+        color: #005EA2;
+    }
+
+    /deep/ .el-upload--picture-card i {
+        color: #005EA2;
+    }
+
+    .editImg {
+        width: 140px;
+        height: 140px;
+        float: left;
+        margin-left: 30px;
+    }
+
 </style>

src/views/Region.vue

@@ -96,6 +96,7 @@
                         </label>
                         <el-upload
                                 action="/api/v1/Company/RegionPictureUpload"
+                                ref="upload"
                                 list-type="picture-card"
                                 :data="dialog"
                                 :on-success="handleImgSuccess"
@@ -121,16 +122,15 @@
         >
           <i class="el-icon-download"></i>
         </span>
-        <span
-                v-if="!disabled"
-                class="el-upload-list__item-delete"
-                @click="handleRemove(file)"
-        >
-          <i class="el-icon-delete"></i>
-        </span>
       </span>
                             </div>
                         </el-upload>
+
+                        <img
+                                v-if="dialog.imgSrc"
+                                class="editImg"
+                                :src="dialog.imgSrc" alt=""
+                        >
                         <el-dialog :visible.sync="dialogVisible">
                             <img width="100%" :src="dialogImageUrl" alt="">
                         </el-dialog>
@@ -150,7 +150,8 @@
         RegionAdd,
         GetRegiononeinfo,
         RegionPictureGetByRegionId,
-        GetChildRegionSelect
+        GetChildRegionSelect,
+        RegionEdit,
     }
         from '../api/getApiRes.js'
 
@@ -174,6 +175,7 @@
                     memo: '',
                     Key: '',
                     image: '',
+                    imgSrc: '',
                 },
                 dialogImageUrl: '',
                 plateImgSrc: '',
@@ -197,6 +199,10 @@
         methods: {
             // 获取建筑树列表
             getDate() {
+                // 右侧先初始化
+                this.loftListState = true;
+                this.plateImg = false;
+
                 let param = {
                     token: localStorage.token,
                 };
@@ -243,6 +249,8 @@
                 that.dialog.Key = '';
                 that.dialog.image = '';
                 that.dialog.regionId = 0;
+                // 清除已上传的
+                that.$refs.upload.clearFiles()
             },
             // 添加主建筑
             addMain() {
@@ -253,7 +261,6 @@
                 that.dialog_level = 1;//类型，1是楼（有图不显示），2是楼层（有图），3是会议室（有图）
                 // clear dialog
                 that.clearDialog();
-
             },
             // 修改建筑 弹窗
             editLoft(node) {
@@ -265,6 +272,7 @@
                 that.dialog.name = node.data.Name;
                 that.dialog.regionId = node.data.Id;
                 that.getGetRegiononeinfo(node.data.Id); //读取Description
+                that.diglogRegionPictureGetByRegionId(node.data.Id); //读取Description
             },
             // 删除楼层
             delLoft(node) {
@@ -291,6 +299,7 @@
                                 type: 'success',
                                 message: `删除成功`
                             });
+                            // 重载
                             that.getDate();
                         } else {
                             that.$message.error(json.Memo);
@@ -359,7 +368,38 @@
                     return false
                 }
 
-                // ajax todo
+                let param = {
+                    token: localStorage.token,
+                    regionid : that.dialog.regionId,
+                    regionname: that.dialog.name,
+                    comid: 1,
+                    superiorid: that.dialog.superiorid,
+                    description: that.dialog.description,
+                    longitude: 0,
+                    latitude: 0,
+                    width: 400,
+                    height: 300,
+                    picMemo: 300,
+                    picType: that.dialog_level, //图片类型,1:主图 2:平面图
+                    picKey: that.dialog.Key,
+                };
+                let postdata = qs.stringify(param);
+                RegionEdit(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.$message({
+                            showClose: true,
+                            message: '区域内容修改成功！',
+                            type: 'success'
+                        });
+                        // 重载tree
+                        that.getDate();
+
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                });
+
                 // ok
                 that.dialog_state = false;
                 that.$message({
@@ -385,11 +425,10 @@
                 } else {
                     that.$message.error(res.Memo);
                 }
-                console.log(res);
             },
             handleImgbefore(file) {
-                console.log(file);
                 this.dialog.image = file;
+                this.dialog.imgSrc = '';
             },
             handleCheckChange(data, checked, indeterminate) {
                 console.log(data, checked, indeterminate);
@@ -443,9 +482,6 @@
                     that.confirmEdit();
                 }
             },
-            handleRemove(file) {
-                console.log(file);
-            },
             handlePictureCardPreview(file) {
                 this.dialogImageUrl = file.url;
                 this.dialogVisible = true;
@@ -486,14 +522,10 @@
                     regionid: regionid,
                 };
                 let postdata = qs.stringify(param);
-                editbasicinfo(postdata).then(res => {
+                GetRegiononeinfo(postdata).then(res => {
                     let json = res;
                     if (json.Code == 0) {
-                        that.$message({
-                            showClose: true,
-                            message: '接口修改成功！',
-                            type: 'success'
-                        });
+                        that.dialog.description = json.Rs.Description
                     } else {
                         that.$message.error(json.Memo);
                     }
@@ -515,6 +547,23 @@
                         that.$message.error(json.Memo);
                     }
                 })
+            },
+            // 给弹窗渲染已上传的图片
+            diglogRegionPictureGetByRegionId(regionID) {
+                let that = this;
+                let param = {
+                    token: localStorage.token,
+                    regionID: regionID,
+                };
+                let postdata = qs.stringify(param);
+                RegionPictureGetByRegionId(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.dialog.imgSrc = json.EncodeString;
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                })
             }
         }
         ,
@@ -733,6 +782,12 @@
     }
 
     /deep/ .modal-body textarea {
-        color: #005EA2;
+        color: #6DC1FF;
+    }
+    .editImg {
+        width: 140px;
+        height: 140px;
+        float: left;
+        margin-left: 30px;
     }
 </style>

src/views/WifiSign.vue

@@ -71,11 +71,25 @@
                     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 > 11 ?  scope.row.ProduceCom.substr(0,11)+'...' : scope.row.ProduceCom }}
+                            </span>
+                    </el-tooltip>
+                </template>
             </el-table-column>
             <el-table-column
                     prop="Path"
                     label="位置"
             >
+                <template slot-scope="scope">
+                    <el-tooltip class="item" effect="dark" :content="scope.row.Path" placement="top-start">
+                            <span>
+                                    {{ scope.row.Path.length > 17 ?  scope.row.Path.substr(0,17)+'...' : scope.row.Path }}
+                            </span>
+                    </el-tooltip>
+                </template>
             </el-table-column>
             <el-table-column
                     prop="SignalIntensity"
@@ -294,9 +308,11 @@
 
 <style scoped>
     @import "../assets/css/panel.css";
+
     .tabs ul {
         width: 400px;
     }
+
     .content {
         width: 100%;
         overflow: hidden;