|
|
@@ -1,12 +1,48 @@
|
|
|
<template>
|
|
|
- <div class="signMap">
|
|
|
+ <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="signMapList">
|
|
|
+ <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/main/cam.png" height="54" width="54" v-if="s.type == 1"/>
|
|
|
+ </em>
|
|
|
+ <s>{{s.name}} {{s.type | typeName}}</s>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="right_rule">
|
|
|
+ <span>0</span>
|
|
|
+ <span v-for="i in 24" v-if="i % 2 == 0">{{i}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="bottom_rule">
|
|
|
+ <span>0</span>
|
|
|
+ <span v-for="i in 56" v-if="i % 2 == 0">{{i}}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -15,20 +51,77 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ screen_full: false,
|
|
|
checked: true,
|
|
|
- scan: {
|
|
|
- tactics: 0,
|
|
|
- },
|
|
|
+ full_state: false,
|
|
|
+ scan: [
|
|
|
+ {name: '小米', type: 1, x: 10, y: 120, level: 3},
|
|
|
+ {name: '小米', type: 1, x: 23, y: 133, level: 3},
|
|
|
+ {name: '小米', type: 1, x: 144, y: 12, level: 3},
|
|
|
+ {name: '小米', type: 1, x: 31, y: 141, level: 3},
|
|
|
+ ],
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
- watch: {
|
|
|
- },
|
|
|
+ watch: {},
|
|
|
mounted() {
|
|
|
this.init()
|
|
|
},
|
|
|
methods: {
|
|
|
init() {
|
|
|
},
|
|
|
+ // 全屏
|
|
|
+ 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) {
|
|
|
+ switch (parseInt(value)) {
|
|
|
+ case 0:
|
|
|
+ return "其他设备";
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ return "摄像头";
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ return "路由器";
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ return "手机";
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -43,13 +136,16 @@
|
|
|
}
|
|
|
|
|
|
.signMapList {
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
+ /*height: 420px;*/
|
|
|
overflow: hidden;
|
|
|
display: block;
|
|
|
margin: 0 auto;
|
|
|
margin-top: 20px;
|
|
|
color: #6DC1FF;
|
|
|
}
|
|
|
+
|
|
|
.sum-title {
|
|
|
width: 150px;
|
|
|
height: 36px;
|
|
|
@@ -62,5 +158,125 @@
|
|
|
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: 883px;
|
|
|
+ height: 385px;
|
|
|
+ float: left;
|
|
|
+ background: url("../assets/img/main/grid.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right_rule {
|
|
|
+ float: left;
|
|
|
+ width: 30px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right_rule span {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom_rule {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom_rule span {
|
|
|
+ width: 30px;
|
|
|
+ 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
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes twinkling {
|
|
|
+ 0% {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes twinkling {
|
|
|
+ 0% {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
</style>
|
