<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>
                </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>
            </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>
        <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;
                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


                    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);
                        }
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            // 拨打前台电话
            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:
                                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
                }

                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;
                        case 1:
                            if (row[i].DangerLevel == 4) {
                                imgsSrc = 'redcam';
                            }
                            if (row[i].DangerLevel == 3) {
                                imgsSrc = 'warnCam';
                            } else {
                                imgsSrc = 'cam';
                            }
                            equipType = '摄像头';
                            eqName = '摄像头';
                            break;
                        case 2:
                            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:
                            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
                        }
                    }

                    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
                }
            },
            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);
        }
        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);
        }
    }

    .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);
        }
        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 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;
        }
    }

    @media (min-width: 240px) and (max-width: 320px) {
        .liDetail {
            width: 50% !important;
        }

        .detectorInfo {
            margin-left: 3px;
        }

        .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;
        }

        .detectorInfo {
            margin-left: 3px;
        }

        .Safe_circle, .Sus_circle, .Danger_circle {
            top: 250px;
        }
    }

    @media (min-width: 361px) and (max-width: 375px) {
        .liDetail {
            width: 50% !important;
        }

        .detectorInfo {
            margin-left: 3px;
        }

        .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%;
        }

        .Safe_circle, .Sus_circle, .Danger_circle {
            top: 280px;
        }
    }

    @media (min-width: 415px) and (max-width: 480px) {

    }

    @media (min-width: 481px) and (max-width: 640px) {

    }

</style>
