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
f4cd300798
commit
0ceb77bf6b
2 changed files with 126 additions and 110 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. 15
      src/views/index.vue
  2. 221
      src/views/monitor/videos/index.vue

15
src/views/index.vue
View File

@ -82,7 +82,7 @@
<div class="rightbars tops">
<!-- 第1个 -->
<div class="topboxs">
<!-- <div class="topboxs">
<div class="topbox">
<div class="toptitle">入侵报警</div>
<div class="mids">
@ -99,7 +99,7 @@
</div>
</div>
</div>
</div>
</div> -->
<!-- 第2个 -->
<div class="topboxs">
<div class="topbox">
@ -391,7 +391,7 @@
//margin: 20px 20 0 0 !important;
background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
padding: 10px;
padding: 20px 10px 21px 10px;
}
// .tops .topbox:last-of-type {
// margin: 0;
@ -408,7 +408,8 @@
flex-wrap: nowrap;
justify-content: flex-start;align-items: center;
margin: 0;
padding: 20px ;
padding: 35px 20px 38px 20px;
// padding: 20px ;
}
.topbox .mids .lefts{width: 100px;}
.topbox .mids .lefts .iconbox {
@ -496,7 +497,7 @@
}
.con {
padding: 20px 0;
padding: 10px 0 0 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@ -531,8 +532,8 @@
}
.news .content {
padding: 10px 0;
height:160px;
padding: 10px 0; height:120px;
// height:160px;
overflow: hidden;
}

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

@ -32,7 +32,7 @@
<div class="shipinstu">
<img src="/image/cangkutu.png"/>
<!-- 111入侵报警 -->
<div class="ruqinbaojingcss" style="z-index: 10;" v-if="showRuqinbaojing">
<!-- <div class="ruqinbaojingcss" style="z-index: 10;" v-if="showRuqinbaojing">
<div class="myiconfont bluezibg jingicon ruqin_zhengchang1" v-if="showRuqinbaojing_zhengchang" @click="openshipinRuqinbaojing()">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang2" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang3" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
@ -52,14 +52,13 @@
<div class="myiconfont redzibg jingicon ruqin_baojing2" v-if="showRuqinbaojing_baojing">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing3" v-if="showRuqinbaojing_baojing">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing4" v-if="showRuqinbaojing_baojing">&#xe608;</div>
<!-- 显示文字 -->
<div class="seencons ruqin_zhengchang1b" v-if="seenshipinRuqinbaojing">
<p @click="toMore()">布防</p>
<p @click="toMore()">撤防</p>
<p @click="toMore()">报警确认</p>
<p @click="toMore()">旁路</p>
</div>
</div>
</div> -->
<!-- 111end -->
<!-- 222视频监控 -->
<div class="ruqinbaojingcss" style="z-index: 20;" v-if="showShipinjiankong">
@ -114,115 +113,118 @@
</div>
</div>
<!-- 下部机构导航 -->
<div class="tabhead">
<!-- <el-checkbox-group v-model="departmentTypeArray" @change="getList">
<el-checkbox-button v-for="(item,index) in jigounavType" :key="index" :label="item.value" :value="item.value">
<span class="iconfontyuan myiconfont" :class="icontu[index]"></span>
{{item.label}}
</el-checkbox-button>
</el-checkbox-group> -->
<!-- <div class="tabhead">
<el-checkbox-group v-model="departmentTypeArray">
<el-checkbox-button label="1" checked><div @click="openruqinbaojing()"><span class="iconfontyuan myiconfont redziyuan icon-intruder-alarm"></span>入侵报警</div></el-checkbox-button>
<el-checkbox-button label="2"><div @click="openshipinjiankong()"><span class="iconfontyuan myiconfont greenziyuan icon-shipin1"></span>视频监控</div></el-checkbox-button>
<el-checkbox-button label="3"><div @click="openmenjinguanli()"><span class="iconfontyuan myiconfont yellowziyuan icon-menjin"></span>门禁管理</div></el-checkbox-button>
<el-checkbox-button label="4"><div @click="opendianziweilan()"><span class="iconfontyuan myiconfont blueziyuan icon-dianziweilan2"></span>电子围栏</div></el-checkbox-button>
</el-checkbox-group>
</div>
<div class="moress" >
<div class="mores">
<!-- 入侵报警 -->
<el-checkbox-group size="mini" v-model="btnRuqinbaojing" v-if="showRuqinbaojing" @change="openbtnRuqinbaojing">
<el-checkbox-button checked label="备选项1" border>
<div class="more" @click="openruqinbaojing_zhengchang()">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe608;</span><span class="numzi bluezi">216</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border>
<div class="more" @click="openruqinbaojing_lixian()">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe608;</span><span class="numzi huizi">23</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项3" border>
<div class="more" @click="openruqinbaojing_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe608;</span><span class="numzi redzi">38</span>
</div>
</el-checkbox-button>
</el-checkbox-group>
</div> -->
<div class="leftbars">
<div class="bartops">
<div class="libar bluezi">视频监控</div>
<div class="libar bluezi">门禁管理</div>
<div class="libar bluezi">电子围栏</div>
</div>
<div class="mores">
<!-- 视频监控按钮组 -->
<el-checkbox-group size="mini" v-model="btnShipinjiankong" v-if="showShipinjiankong">
<el-checkbox-button checked label="备选项1" border>
<div class="more" @click="openShipinjiankong_zhengchang()">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe644;</span><span class="numzi bluezi">216</span>
<div class="moress" >
<!-- 入侵报警 -->
<!-- <div class="mores">
<el-checkbox-group size="mini" v-model="btnRuqinbaojing" v-if="showRuqinbaojing" @change="openbtnRuqinbaojing">
<el-checkbox-button checked label="备选项1" border>
<div class="more" @click="openruqinbaojing_zhengchang()">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe608;</span><span class="numzi bluezi">216</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border>
<div class="more" @click="openruqinbaojing_lixian()">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe608;</span><span class="numzi huizi">23</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border>
<div class="more" @click="openShipinjiankong_lixian()">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe644;</span><span class="numzi huizi">23</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项3" border>
<div class="more" @click="openShipinjiankong_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe644;</span><span class="numzi redzi">38</span>
</el-checkbox-button>
<el-checkbox-button checked label="备选项3" border>
<div class="more" @click="openruqinbaojing_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe608;</span><span class="numzi redzi">38</span>
</div>
</el-checkbox-button>
</el-checkbox-group>
</div> -->
<div class="mores">
<!-- 视频监控按钮组 -->
<el-checkbox-group size="mini" v-model="btnShipinjiankong" v-if="showShipinjiankong">
<el-checkbox-button checked label="备选项1" border>
<div class="more" @click="openShipinjiankong_zhengchang()">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe644;</span><span class="numzi bluezi">216</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border>
<div class="more" @click="openShipinjiankong_lixian()">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe644;</span><span class="numzi huizi">23</span>
</div>
</el-checkbox-button>
</el-checkbox-group>
</div>
<div class="mores">
<!-- 门禁管理按钮组 -->
<el-checkbox-group size="mini" v-model="btnMenjinguanli" v-if="showMenjinguanli">
<el-checkbox-button checked label="备选项1" border>
<div class="more" @click="openMenjinguanli_zhengchang()">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe60b;</span><span class="numzi bluezi">216</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border>
<div class="more" @click="openMenjinguanli_lixian()">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe60b;</span><span class="numzi huizi">23</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项3" border>
<div class="more" @click="openMenjinguanli_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe60b;</span><span class="numzi redzi">38</span>
</div>
</el-checkbox-button>
</el-checkbox-group>
</div>
<div class="mores">
<!-- 电子围栏按钮组 -->
<el-checkbox-group size="mini" v-model="btnDianziweilan" v-if="showDianziweilan">
<el-checkbox-button checked label="备选项1" border>
<div class="more" @click="openDianziweilan_zhengchang()">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe6b8;</span><span class="numzi bluezi">216</span>
</el-checkbox-button>
<el-checkbox-button checked label="备选项3" border>
<div class="more" @click="openShipinjiankong_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe644;</span><span class="numzi redzi">38</span>
</div>
</el-checkbox-button>
</el-checkbox-group>
</div>
<div class="mores">
<!-- 门禁管理按钮组 -->
<el-checkbox-group size="mini" v-model="btnMenjinguanli" v-if="showMenjinguanli">
<el-checkbox-button checked label="备选项1" border>
<div class="more" @click="openMenjinguanli_zhengchang()">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe60b;</span><span class="numzi bluezi">216</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border>
<div class="more" @click="openMenjinguanli_lixian()">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe60b;</span><span class="numzi huizi">23</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border>
<div class="more" @click="openDianziweilan_lixian()">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe6b8;</span><span class="numzi huizi">23</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项3" border>
<div class="more" @click="openDianziweilan_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe6b8;</span><span class="numzi redzi">38</span>
</el-checkbox-button>
<el-checkbox-button checked label="备选项3" border>
<div class="more" @click="openMenjinguanli_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe60b;</span><span class="numzi redzi">38</span>
</div>
</el-checkbox-button>
</el-checkbox-group>
</div>
<div class="mores">
<!-- 电子围栏按钮组 -->
<el-checkbox-group size="mini" v-model="btnDianziweilan" v-if="showDianziweilan">
<el-checkbox-button checked label="备选项1" border>
<div class="more" @click="openDianziweilan_zhengchang()">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe6b8;</span><span class="numzi bluezi">216</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border>
<div class="more" @click="openDianziweilan_lixian()">
<p class="huizi">离线</p>
<span class="myiconfont iconbox huizibg">&#xe6b8;</span><span class="numzi huizi">23</span>
</div>
</el-checkbox-button>
</el-checkbox-group>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项3" border>
<div class="more" @click="openDianziweilan_baojing()">
<p class="redzi">报警</p>
<span class="myiconfont iconbox redzibg">&#xe6b8;</span><span class="numzi redzi">38</span>
</div>
</el-checkbox-button>
</el-checkbox-group>
</div>
</div>
</div>
<!-- 列表结束 -->
</div>
@ -382,9 +384,9 @@ export default {
seenshipinDianziweilan: false,
//
showRuqinbaojing: true,
showShipinjiankong: false,
showMenjinguanli: false,
showDianziweilan: false,
showShipinjiankong: true,
showMenjinguanli: true,
showDianziweilan: true,
//鼠标移入
seen_shubiaoShipinjiankong: false,
//上边的按钮入侵报警正常
@ -864,7 +866,8 @@ export default {
.mores /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
background-color: #e9f7fa;border: 1px solid #469efd;color: #000;
}
.moress{position: absolute;top: 100px;left: 20px;z-index: 9000;
.moress{
/* position: absolute;top: 100px;left: 20px;z-index: 9000; */
padding: 0 0px;
display: flex;
flex-direction: column;
@ -966,4 +969,16 @@ export default {
// width: calc((100% - 1px) / 4 );box-sizing: border-box;font-size:18px;}
// .tabhead .bar:last-of-type{border-right: 0px solid #eeeeee;width: calc((100% - 0px) / 4 );}
// .tabhead .barb {background-color: #fff;color: #0b5394;} */
.leftbars{ position: absolute;
top: 30px;
left: 20px;
z-index: 900;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: center;}
.leftbars .bartops{width: 120px;}
.leftbars .bartops .libar{margin: 0 0 20px 0;padding: 10px;
background-color: #ffffff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;}
.leftbars .moress{flex: 1;}
</style>

Write Preview
Loading…
Cancel
Save