jianguan
/
supervise-monitor-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改视频中心页面仓库图代码

master
zyc@123456 2 years ago
parent
0fa7124dfc
commit
b740fed4ee
1 changed files with 109 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 192
      src/views/monitor/videos/index.vue

192
src/views/monitor/videos/index.vue
View File

@ -49,89 +49,92 @@
</div> -->
<!-- 11 -->
</div>
<div class="shipinscon">
<div class="shipinstu">
<!-- 111入侵报警 -->
<div class="ruqinbaojing" v-show="showRuqinbaojing">
<div class="myiconfont bluezibg jingicon ruqin_zhengchang1" @click="openshipinRuqinbaojing()">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang2">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang3" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang4" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang5" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang6" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang7" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang8" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang9" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang10" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang11" >&#xe608;</div>
<div class="myiconfont huizibg jingicon ruqin_lixian1" >&#xe608;</div>
<div class="myiconfont huizibg jingicon ruqin_lixian2" >&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing1">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing2">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing3">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing4">&#xe608;</div>
<!-- 显示文字 -->
<div class="seencons ruqin_zhengchang1b" v-show="seenshipinRuqinbaojing">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
<div class="shipinscons">
<div class="shipinscon">
<div class="shipinstu">
<img src="/image/cangkutu.png"/>
<!-- 111入侵报警 -->
<div class="ruqinbaojing" style="z-index: 10;" v-show="showRuqinbaojing">
<div class="myiconfont bluezibg jingicon ruqin_zhengchang1" @click="openshipinRuqinbaojing()">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang2">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang3" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang4" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang5" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang6" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang7" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang8" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang9" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang10" >&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang11" >&#xe608;</div>
<div class="myiconfont huizibg jingicon ruqin_lixian1" >&#xe608;</div>
<div class="myiconfont huizibg jingicon ruqin_lixian2" >&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing1">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing2">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing3">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing4">&#xe608;</div>
<!-- 显示文字 -->
<div class="seencons ruqin_zhengchang1b" v-show="seenshipinRuqinbaojing">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
</div>
</div>
</div>
<!-- 111end -->
<!-- 222视频监控 -->
<div class="ruqinbaojing" v-show="showShipinjiankong">
<div class="myiconfont bluezibg jingicon shipin_zhengchang1" @mouseover="enter" @mouseleave="leave" @click="openshipinShipinjiankong()">&#xe644;</div>
<div class="myiconfont huizibg jingicon shipin_lixian1" >&#xe644;</div>
<div class="myiconfont redzibg jingicon shipin_baojing1">&#xe644;</div>
<!-- 显示文字 -->
<div class="seencons shipin_zhengchang1b" v-show="seenshipinShipinjiankong">
<p @click="toMore()">实时视频</p>
<p @click="toMore()">回放视频</p>
</div>
<!-- 鼠标移入显示文字 -->
<div class="seenconsc shipin_zhengchang1c" v-show="seen_shubiaoShipinjiankong">
<p>设备名称：1号楼1F西侧走廊像机1</p>
<p>设备编号：HK023123</p>
<p>设备IP：192.168.1.2</p>
<!-- 111end -->
<!-- 222视频监控 -->
<div class="ruqinbaojing" style="z-index: 20;" v-show="showShipinjiankong">
<div class="myiconfont bluezibg jingicon shipin_zhengchang1" @mouseover="enter" @mouseleave="leave" @click="openshipinShipinjiankong()">&#xe644;</div>
<div class="myiconfont huizibg jingicon shipin_lixian1" >&#xe644;</div>
<div class="myiconfont redzibg jingicon shipin_baojing1">&#xe644;</div>
<!-- 显示文字 -->
<div class="seencons shipin_zhengchang1b" v-show="seenshipinShipinjiankong">
<p @click="toMore()">实时视频</p>
<p @click="toMore()">回放视频</p>
</div>
<!-- 鼠标移入显示文字 -->
<div class="seenconsc shipin_zhengchang1c" v-show="seen_shubiaoShipinjiankong">
<p>设备名称：1号楼1F西侧走廊像机1</p>
<p>设备编号：HK023123</p>
<p>设备IP：192.168.1.2</p>
</div>
</div>
</div>
<!-- 2222end -->
<!-- 333门禁管理 -->
<div class="ruqinbaojing" v-show="showMenjinguanli">
<div class="myiconfont bluezibg jingicon menjin_zhengchang1" @click="openshipinMenjinguanli()">&#xe60b;</div>
<div class="myiconfont huizibg jingicon menjin_lixian1" >&#xe60b;</div>
<div class="myiconfont redzibg jingicon menjin_baojing1">&#xe60b;</div>
<!-- 显示文字 -->
<div class="seencons menjin_zhengchang1b" v-show="seenshipinMenjinguanli">
<p @click="toMore()">开门</p>
<!-- 2222end -->
<!-- 333门禁管理 -->
<div class="ruqinbaojing" style="z-index: 30;" v-show="showMenjinguanli">
<div class="myiconfont bluezibg jingicon menjin_zhengchang1" @click="openshipinMenjinguanli()">&#xe60b;</div>
<div class="myiconfont huizibg jingicon menjin_lixian1" >&#xe60b;</div>
<div class="myiconfont redzibg jingicon menjin_baojing1">&#xe60b;</div>
<!-- 显示文字 -->
<div class="seencons menjin_zhengchang1b" v-show="seenshipinMenjinguanli">
<p @click="toMore()">开门</p>
</div>
</div>
</div>
<!-- 333end -->
<!--444门电子围栏-->
<div class="ruqinbaojing" v-show="showDianziweilan">
<div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang1" @click="openshipinDianziweilan()">&#xe6b8;</div>
<div class="myiconfont huizibg jingicon Dianziweilan_lixian1" >&#xe6b8;</div>
<div class="myiconfont redzibg jingicon Dianziweilan_baojing1">&#xe6b8;</div>
<!-- 显示文字 -->
<div class="seencons Dianziweilan_zhengchang1b" v-show="seenshipinDianziweilan">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
<!-- 333end -->
<!--444门电子围栏-->
<div class="ruqinbaojing" style="z-index: 40;" v-show="showDianziweilan">
<div class="myiconfont bluezibg jingicon Dianziweilan_zhengchang1" @click="openshipinDianziweilan()">&#xe6b8;</div>
<div class="myiconfont huizibg jingicon Dianziweilan_lixian1" >&#xe6b8;</div>
<div class="myiconfont redzibg jingicon Dianziweilan_baojing1">&#xe6b8;</div>
<!-- 显示文字 -->
<div class="seencons Dianziweilan_zhengchang1b" v-show="seenshipinDianziweilan">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
</div>
</div>
</div>
<!-- 444end -->
<!-- 444end -->
</div>
</div>
<!-- 下部机构导航 -->
<div class="tabhead">
@ -580,13 +583,36 @@ export default {
padding: 10px;
}
.tab-header{background-color: #fff;}
.shipinscon {margin: 20px 0 0 0;
padding: 20px 50px 20px 50px;background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
.shipinscons {height: 95%;text-align: center;
margin: 20px auto 0;
text-align: center;position: relative;
padding: 20px 50px 20px 50px;
background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
}
.shipinscon {width: 60%;
margin: 20px auto 0;
text-align: center;position: relative;
padding: 20px 50px 20px 50px;
}
.shipinstu {z-index: 0;
background: url("/image/cangkutu.png") center bottom no-repeat;
.shipinstu {
/* border:1px solid #0241c1; */
position:absolute;left: 0;
margin: 0 auto;text-align: center;
/* z-index: 0;
background: url("/image/cangkutu.png") center bottom no-repeat;
background-size: 100% 100%;min-height: 580px;
padding: 0 20px;position: relative;
padding: 0 20px;position: relative; */
}
.shipinstu img{margin: 0 auto;height: 550px;}
.shipinstu .ruqinbaojing{position:absolute;left: 0;top:0;
/* position:absolute; */
/* border: #e20202 solid 2px; */
width: 100%;
height: 100%;
/* float: left;
top:0; */
}
.shipinstu .jingicon {cursor: pointer;
font-size: 22px !important;

Write Preview
Loading…
Cancel
Save