signal_web/src/components/signMap.vue

<template>
    <div class="signMap" id="signMap">
        <div class="sum-title">
            {{signList.title}}
        </div>
        <div class="compass">
            <img src="../assets/img/main/compass.png" height="30" width="30"/>
        </div>
        <div class="screen">
            <img src="../assets/img/headside/screen_max.png" v-if="!screen_full" height="18" width="19"
                 @click="full_screen"/>
            <img src="../assets/img/headside/screen_min.png" v-if="screen_full" height="18" width="19"
                 @click="cancle_screen"/>
        </div>
        <div :class="[{'signMapList':true},{'full_state':full_state}]">
            <div class="tips" v-if="scan == ''">
                <span>请开始扫描</span>
            </div>
            <div class="signMapListBg">
                <span v-for="s in scan"
                      :style="{ left: s.X*ruleX - errorX +'PX', top: s.Y *ruleY - errorY +'PX'}"
                >
                             <em class="types" @click="showToast(s.popover)" @mouseover="showToast(s.popover)">
                                 <img src="../assets/img/signMap/ydgsm.png" height="54" width="54"
                                      v-if="s.WirelessType == 1"/>
                                 <img src="../assets/img/signMap/ltgsm.png" height="54" width="54"
                                      v-if="s.WirelessType == 2"/>
                                 <img src="../assets/img/signMap/dxcdma.png" height="54" width="54"
                                      v-if="s.WirelessType == 3"/>
                                 <img src="../assets/img/signMap/yd3g.png" height="54" width="54"
                                      v-if="s.WirelessType == 4"/>
                                 <img src="../assets/img/signMap/lt3g.png" height="54" width="54"
                                      v-if="s.WirelessType == 5"/>
                                 <img src="../assets/img/signMap/yd4g.png" height="54" width="54"
                                      v-if="s.WirelessType == 6"/>
                                 <img src="../assets/img/signMap/lt4g.png" height="54" width="54"
                                      v-if="s.WirelessType == 7"/>
                                 <img src="../assets/img/signMap/dx4g.png" height="54" width="54"
                                      v-if="s.WirelessType == 8"/>
                                 <img src="../assets/img/signMap/433M.png" height="54" width="54"
                                      v-if="s.WirelessType == 9"/>
                                 <img src="../assets/img/signMap/wifi.png" height="54" width="54"
                                      v-if="s.WirelessType == 10"/>
                                 <img src="../assets/img/signMap/ism.png" height="54" width="54"
                                      v-if="s.WirelessType == 11"/>
                                 <img src="../assets/img/signMap/800M.png" height="54" width="54"
                                      v-if="s.WirelessType == 12"/>
                                <img src="../assets/img/main/unknow.png" height="54" width="54"
                                     v-if="s.WirelessType == 20"/>
                                <img src="../assets/img/main/cam.png" height="54" width="54"
                                     v-if="s.WirelessType == 21"/>
                                <img src="../assets/img/main/unknow_w.png" height="54" width="54"
                                     v-if="s.WirelessType == 22"/>
                                <img src="../assets/img/main/phone.png" height="54" width="54"
                                     v-if="s.WirelessType == 23"/>
                                <img src="../assets/img/main/wifi_w.png" height="54" width="54"
                                     v-if="s.WirelessType == 24"/>
                             </em>
                                <s :class="[
                                {'yd':s.WirelessType == 1 || s.WirelessType == 4 || s.WirelessType == 6},
                                {'lt':s.WirelessType == 2 || s.WirelessType == 5 || s.WirelessType == 7},
                                {'dx':s.WirelessType == 3 || s.WirelessType == 8 },
                                {'qt':s.WirelessType == 9 || s.WirelessType == 10 || s.WirelessType == 11|| s.WirelessType == 12},
                                ]"
                                >{{s.WirelessType | typeName}}</s>
                </span>
            </div>
            <div class="right_rule">
                <span>0</span>
                <span v-for="i in YMax" v-if="i %  yLimit == 0">{{i}}</span>
            </div>
            <div class="bottom_rule">
                <span>0</span>
                <span v-for="i in XMax" v-if="i % xLimit == 0">{{i}}</span>
            </div>
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
            >
                <span>{{dialogText}}</span>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" size="mini" type="primary">关闭</el-button>
  </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogVisible: false,
                screen_full: false,
                checked: true,
                full_state: false,
                scan: [],
                XMax: 56,
                YMax: 56,
                xLimit: 2,
                yLimit: 2,
                ruleX: 0.75,
                ruleY: 0.75,
                errorX: 20,
                errorY: 20,
                title: '扫描结果',
                dialogText: '',
            }
        },
        props: ['signList'],
        watch: {
            signList: {
                handler(newName, oldName) {
                    if (!newName.Rs) {
                        return false
                    }
                    this.scan = newName.Rs.Data;
                    this.XMax = newName.Rs.XMax;
                    this.YMax = newName.Rs.YMax;
                    this.xLimit = parseInt(this.XMax / 28);
                    this.yLimit = parseInt(this.YMax / 12);
                    let Oem = "未知";
                    let Ssid = "未知";
                    if (this.scan) {
                        this.scan.map(function (item) {
                            Oem = item.Oem == '' ? "未知" : item.Oem;
                            Ssid = item.Ssid == '' ? "未知" : item.Ssid;
                            item.popover = "品牌：" + Oem + " SSID：" + Ssid;
                            if (item.X < 0) {
                                item.X = 10
                            }
                            if (item.Y < 0) {
                                item.Y = 50
                            }
                            // + "X:" + item.X + " Y:" + item.Y
                        })
                    }
                },
                deep: true,
                immediate: true
            },
        },
        methods: {
            // 全屏
            full_screen() {
                let that = this;
                this.screen_full = true;
                let elem = document.getElementById("signMap");
                this.full_state = true;
                if (elem.webkitRequestFullScreen) {
                    elem.webkitRequestFullScreen();
                    that.full_rule();
                } else if (elem.mozRequestFullScreen) {
                    elem.mozRequestFullScreen();
                    that.full_rule();
                } else if (elem.requestFullScreen) {
                    elem.requestFullscreen();
                    that.full_rule();
                } else {
                    this.screen_full = false;
                    notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
                }
            },
            full_rule() {
                this.ruleX = 1.4;
                this.ruleY = 1.6;
                this.errorX = -20;
                this.errorY = -20;
            },
            cancle_full_rule() {
                this.ruleX = 0.75;
                this.ruleY = 0.75;
                this.errorX = 20;
                this.errorY = 20;
            },
            // 取消全屏
            cancle_screen() {
                let that = this;
                this.screen_full = false;
                this.full_state = false;
                var elem = document;
                if (elem.webkitCancelFullScreen) {
                    elem.webkitCancelFullScreen();
                    that.cancle_full_rule();
                } else if (elem.mozCancelFullScreen) {
                    elem.mozCancelFullScreen();
                    that.cancle_full_rule();
                } else if (elem.cancelFullScreen) {
                    elem.cancelFullScreen();
                    that.cancle_full_rule();
                } else if (elem.exitFullscreen) {
                    elem.exitFullscreen();
                    that.cancle_full_rule();
                } else {
                    this.screen_full = true;
                    notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
                }
            },
            showToast(text) {
                this.dialogVisible = true;
                this.dialogText = text;
            }
        },
        filters: {
            typeName: function (value) {
                return filterAllType(value)
            },
        },
    }
</script>

<style scoped>
    .signMap {
        width: 100%;
        height: 473px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 0px;
    }

    .signMapList {
        position: relative;
        width: 100%;
        height: 80%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 20px;
        color: #6DC1FF;
    }

    .sum-title {
        width: 150px;
        height: 36px;
        font-size: 16px;
        line-height: 36px;
        color: #6DC1FF;
        margin: 0 auto;
        text-align: center;
        background: url("../assets/img/main/tit.png") top center no-repeat;
        background-size: 100%;
    }

    .compass {
        position: relative;
        left: 3%;
        top: -20px;
        float: left;
    }

    .screen {
        position: relative;
        right: 3%;
        top: -20px;
        float: right;
        cursor: pointer;
    }

    .signMapListBg {
        width: 95%;
        /*height: 385px;*/
        height: 90%;
        float: left;
        background: url("../assets/img/main/grid.png");
        background-size: 100% 100%;
    }

    .right_rule {
        float: left;
        width: 30px;
        height: 90%;
    }

    .right_rule span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 8%;
        line-height: 100%;
        text-align: center;
        font-size: 12px;
    }

    .bottom_rule {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .bottom_rule span {
        width: 3.2%;
        text-align: center;
        float: left;
        font-size: 12px;
    }

    .tips {
        position: absolute;
        top: 10%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 306px;
        height: 306px;
        overflow: hidden;
        background: url("../assets/img/main/ready.png");
        background-size: 100% 100%;
        text-align: center;
        line-height: 306px;
        font-size: 30px;
        color: #fff;
    }

    .signMapListBg > span {
        position: absolute;
        float: left;
        overflow: hidden;
        cursor: pointer;
        width: 20%;
        height: 20%;
    }

    .signMapListBg em {
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .signMapListBg s {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 12px;
        text-decoration: none;
    }

    .signMapListBg img {
        -webkit-animation: twinkling 1s infinite ease-in-out;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

    .signMap s {
        color: #72FF99;
    }

    s.yd {
        color: #72FF99;
    }

    s.lt {
        color: #FFB06B;
    }

    s.dx {
        color: #00FEFF;
    }

    s.qt {
        color: #FFE853;
    }

    @-webkit-keyframes twinkling {
        0% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes twinkling {
        0% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }


</style>