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
efd9504736
commit
f4cd300798
1 changed files with 110 additions and 101 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 211
      src/views/monitor/videos/index.vue

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

@ -22,101 +22,7 @@
</el-select> </el-select>
</el-form-item> --> </el-form-item> -->
</el-form> </el-form>
<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="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-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="备选项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-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>
<!-- 11 --> <!-- 11 -->
</div> </div>
@ -216,12 +122,107 @@
</el-checkbox-button> </el-checkbox-button>
</el-checkbox-group> --> </el-checkbox-group> -->
<el-checkbox-group v-model="departmentTypeArray"> <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="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="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="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-button label="4"><div @click="opendianziweilan()"><span class="iconfontyuan myiconfont blueziyuan icon-dianziweilan2"></span>电子围栏</div></el-checkbox-button>
</el-checkbox-group> </el-checkbox-group>
</div> </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="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-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="备选项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-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>
@ -755,11 +756,17 @@ export default {
padding: 10px; padding: 10px;
} }
.tab-header{background-color: #fff;} .tab-header{background-color: #fff;}
.shipinscons {height: 95%;text-align: center;overflow-y: auto; /* .shipinscons {height: 95%;text-align: center;overflow-y: auto;
margin: 20px auto 0; margin: 20px auto 0;
text-align: center;position: relative; text-align: center;position: relative;
padding: 20px 50px 20px 50px; padding: 20px 50px 20px 50px;
background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
} */
.shipinscons {height: 95%;text-align: center;overflow-y: auto;
margin: 20px auto 0;
text-align: center;position: relative;
padding: 20px 50px 20px 320px;
background-color: #fff;box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
} }
.shipinscon {width: 60%; .shipinscon {width: 60%;
margin: 20px auto 0; margin: 20px auto 0;
@ -857,7 +864,7 @@ export default {
.mores /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner { .mores /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
background-color: #e9f7fa;border: 1px solid #469efd;color: #000; background-color: #e9f7fa;border: 1px solid #469efd;color: #000;
} }
.moress{position: absolute;top: 15px;right: 20px;z-index: 9000; .moress{position: absolute;top: 100px;left: 20px;z-index: 9000;
padding: 0 0px; padding: 0 0px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -913,12 +920,14 @@ export default {
/* // 底部导航 */ /* // 底部导航 */
.tabhead { .tabhead {
position: fixed; /* position: fixed;
bottom: 50px; bottom: 50px;
left: 230px; left: 230px; */
position: absolute;
top: 30px;
left: 20px;
z-index: 900; z-index: 900;
/* background-color: rgba( #04154d, 0.8); */
/* box-shadow: 0px 0px 6px #0d27c2; */
} }
.iconfontyuan { .iconfontyuan {
font-size: 18px !important; font-size: 18px !important;

Write Preview
Loading…
Cancel
Save