<template>
|
<el-container style="height: 100%;">
|
<el-aside heigth="100%" width="200px ">
|
<department-aside @selectedDepartment="selectedDepartment" />
|
</el-aside>
|
|
<el-container>
|
<el-header style="display:flex;flex-direction: column;height: 120px;">
|
<div style="display:flex;justify-content: space-between;height: 80px;">
|
<span style="color:rgb(75, 155, 183);font-weight: 450;text-align: left; font-size: 16px;">当前共8个监控点位，最多配置100路视频监控，目前已经配置200路视频点</span>
|
</div>
|
<div style="height:60px;display: flex;justify-content: flex-start;">
|
</div>
|
</el-header>
|
|
<el-main style="display:flex;flex-wrap: wrap;overflow-y: scroll;">
|
<div v-for="item in videoData" style="height: 240px ;width: 210px; position: relative;margin-left:20px ;">
|
<div
|
style="color:rgb(75, 155, 183); font-size: 11px;line-height: 18px; position: absolute; z-index: 1;left: 50px;">
|
{{ item.name }}{{ item.community }}</div>
|
<video id="my-video" :src="item.urlAddress" class="video-js" controls preload="auto" width="210px" height="150px">
|
</video>
|
<div class="bottonOne" @click="">查看视频</div>
|
<div class="bottonTwo">视频上报</div>
|
<div class="bottonThird">对讲</div>
|
</div>
|
</el-main>
|
<el-footer>
|
<div style="margin-bottom:0;">
|
<el-pagination :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
|
:page-size="pageSize">
|
</el-pagination>
|
</div>
|
</el-footer>
|
</el-container>
|
</el-container>
|
</template>
|
<style lang="scss" scoped>
|
.button-one {
|
height: 40px;
|
width: 80px;
|
margin-left: 20px;
|
padding: 0;
|
background-color: #09152f;
|
color: rgb(75, 155, 183);
|
border: 1px solid rgb(75, 155, 183);
|
}
|
|
.button-two {
|
height: 40px;
|
width: 80px;
|
padding: 0;
|
background-color: #09152f;
|
color: rgb(75, 155, 183);
|
border: 1px solid rgb(75, 155, 183);
|
}
|
.el-button+.el-button{
|
margin: 0;
|
}
|
.button-third {
|
height: 40px;
|
width: 80px;
|
padding: 0;
|
background-color: #09152f;
|
color: rgb(75, 155, 183);
|
border: 1px solid rgb(75, 155, 183);
|
}
|
|
.video-js {
|
border: 1px solid rgb(75, 155, 183);
|
margin-left: 20px;
|
}
|
|
.bottonOne {
|
color: rgb(75, 155, 183);
|
font-size: 11px;
|
position: absolute;
|
height: 30px;
|
line-height: 30px;
|
margin-left: 20px;
|
width: 70px;
|
border: 1px solid rgb(75, 155, 183);
|
cursor: pointer;
|
}
|
|
.bottonTwo {
|
color: rgb(75, 155, 183);
|
font-size: 11px;
|
position: absolute;
|
height: 30px;
|
line-height: 30px;
|
width: 70px;
|
border: 1px solid rgb(75, 155, 183);
|
margin-left: 90px;
|
cursor: pointer;
|
}
|
.el-pagination{
|
line-height: 40px;
|
}
|
.bottonThird {
|
color: rgb(75, 155, 183);
|
font-size: 11px;
|
position: absolute;
|
height: 30px;
|
line-height: 30px;
|
width: 70px;
|
border: 1px solid rgb(75, 155, 183);
|
margin-left: 160px;
|
cursor: pointer;
|
}
|
|
::v-deep .el-header {
|
background-color: #09152f;
|
color: #000;
|
line-height: 60px;
|
}
|
|
::v-deep .el-aside {
|
background-color: #09152f;
|
}
|
|
::v-deep .el-menu {
|
background-color: #09152f;
|
}
|
|
::v-deep .el-main,
|
::v-deep .el-footer {
|
background-color: #09152f;
|
}
|
|
::v-deep .el-tree-node__label {
|
line-height: 30px;
|
font-size: 14px;
|
color: rgb(75, 155, 183);
|
}
|
</style>
|
<script>
|
import departmentAside from "@/views/operate/fivepack/threepack/components/aside";
|
import videoPoint from "@/api/system/videoPoint";
|
|
export default {
|
components: { departmentAside },
|
created() {
|
this.getVideoPointList();
|
},
|
data() {
|
return {
|
currentPage: 1,
|
totalNum: 10,
|
pageSize: 10,
|
videoData: [],
|
value:''
|
};
|
},
|
methods: {
|
getVideoPointList(data) {
|
let communityId, streetId;
|
if (data) {
|
communityId = data.parentId;
|
streetId = data.id;
|
}
|
videoPoint.getVideoPointList({ current: this.currentPage, size: this.pageSize, communityId, streetId })
|
.then(({ records, total }) => {
|
this.videoData = records;
|
this.totalNum = total;
|
})
|
.catch(err => this.$message.error(err))
|
},
|
selectedDepartment(data) {
|
if (!data.children) {
|
this.getVideoPointList(data);
|
}
|
}
|
}
|
};
|
</script>
|
