<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: 500;text-align: left; font-size: 16px;">整体趋势</span>
|
<el-date-picker v-model="value" type="date" placeholder="选择日期">
|
</el-date-picker>
|
</div>
|
<div style="height:60px;display: flex;justify-content: flex-start;">
|
<el-button class="button-one">
|
视频预览
|
</el-button>
|
<el-button class="button-two">
|
视频巡查
|
</el-button>
|
<el-button class="button-third">
|
图片巡查
|
</el-button>
|
</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" class="video-js" controls preload="auto" width="210px" height="150px" :src="item.urlAddress" type="video/mp4">
|
</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 layout="prev, pager, next" @current-change="currentPageChange" :total="totalNum" :page-size="pageSize"></el-pagination>
|
</div>
|
</el-footer>
|
</el-container>
|
</el-container>
|
</template>
|
<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: 7,
|
pageSize: 10,
|
videoData: [],
|
value: null
|
};
|
},
|
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) {
|
this.getVideoPointList(data);
|
},
|
currentPageChange(page) {
|
this.currentPage = page;
|
this.getVideoPointList();
|
}
|
}
|
};
|
</script>
|
<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>
|
