signal_web/src/components/signMap.vue

<template>
    <div class="signMap" id="signMap">
        <div class="sum-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*0.8+'PX', top: s.Y+'PX'}"
                >
                      <el-popover
                              placement="top-start"
                              title="标题"
                              width="200"
                              trigger="hover"
                              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                        <div slot="reference">
                             <em class="types">
                                 <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"/>
                                        </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>
                        </div>
                     </el-popover>
                </span>
            </div>
            <div class="right_rule">
                <span>0</span>
                <span v-for="i in XMax" v-if="i % xLimit == 0">{{i}}</span>
            </div>
            <div class="bottom_rule">
                <span>0</span>
                <span v-for="i in YMax" v-if="i % yLimit == 0">{{i}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                screen_full: false,
                checked: true,
                full_state: false,
                scan: [],
                XMax: 24,
                YMax: 56,
                xLimit: 2,
                yLimit: 2,
            }
        },
        props: ['signList'],
        watch: {
            signList: function (val) {
                // console.log(val);
                this.scan = val.Rs.Data;
                this.XMax = val.Rs.XMax;
                this.YMax = val.Rs.YMax;
                this.xLimit = parseInt(this.XMax / 12);
                this.yLimit = parseInt(this.YMax / 28);
            },
        },
        methods: {
            // 全屏
            full_screen() {
                this.screen_full = true;
                let elem = document.getElementById("signMap");
                this.full_state = true;
                if (elem.webkitRequestFullScreen) {
                    elem.webkitRequestFullScreen();
                } else if (elem.mozRequestFullScreen) {
                    elem.mozRequestFullScreen();
                } else if (elem.requestFullScreen) {
                    elem.requestFullscreen();
                } else {
                    this.screen_full = false;
                    notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
                }
            },
            // 取消全屏
            cancle_screen() {
                this.screen_full = false;
                this.full_state = false;
                var elem = document;
                if (elem.webkitCancelFullScreen) {
                    elem.webkitCancelFullScreen();
                } else if (elem.mozCancelFullScreen) {
                    elem.mozCancelFullScreen();
                } else if (elem.cancelFullScreen) {
                    elem.cancelFullScreen();
                } else if (elem.exitFullscreen) {
                    elem.exitFullscreen();
                } else {
                    this.screen_full = true;
                    notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);
                }
            },
        },
        filters: {
            typeName: function (value) {
                return filterWirelessType(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: relative;
        float: left;
        overflow: hidden;
        cursor: pointer;
    }

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