<template>
|
<el-container style="height: 100%">
|
<el-aside heigth="100%" width="200px ">
|
<department-aside @selectedDepartment="selectedDepartment" />
|
</el-aside>
|
|
<el-container class="point-container">
|
<el-header
|
style="
|
display: flex;
|
flex-direction: column;
|
height: 120px;
|
padding: 0 40px;
|
"
|
>
|
<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 class="video-main">
|
<div
|
v-for="item in videoData"
|
:key="item.id"
|
style="position: relative; height: 350px"
|
>
|
<div class="video-title">{{ item.name }}{{ item.community }}</div>
|
|
<video
|
:id="item.id"
|
class="video-js"
|
controls
|
preload="auto"
|
width="400px"
|
height="300px"
|
type="video/mp4"
|
></video>
|
<div class="button-div">
|
<div @click="loadVideo(item)">查看视频</div>
|
</div>
|
</div>
|
</el-main>
|
<el-footer>
|
<div style="margin-bottom: 0">
|
<el-pagination
|
:current-page="currentPage"
|
@current-change="current_change"
|
layout="prev, pager, next"
|
: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 {
|
name: "point",
|
components: { departmentAside },
|
created() {
|
this.hls = new Hls();
|
this.getVideoPointList();
|
},
|
data() {
|
return {
|
currentPage: 1,
|
totalNum: 10,
|
pageSize: 8,
|
videoData: [],
|
searchData: null,
|
hls: null,
|
videoList: [],
|
};
|
},
|
methods: {
|
async getVideoPointList(data) {
|
let communityId, streetId;
|
if (data) {
|
communityId = data.parentId;
|
streetId = data.id;
|
}
|
await 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));
|
},
|
loadVideo(item) {
|
if (item.code || item.platResourceId) {
|
if (Hls.isSupported()) {
|
var video = document.getElementById(item.id);
|
var hls = new Hls();
|
videoPoint
|
.getVideoPointUrl(item.code || item.platResourceId)
|
.then((res) => {
|
if (res.code === 0) {
|
hls.loadSource(res.data);
|
hls.attachMedia(video);
|
this.videoList.push(video);
|
// hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
// // video.play();
|
// document.body.addEventListener(
|
// "click",
|
// function () {
|
// video.play();
|
// },
|
// false
|
// );
|
// });
|
setTimeout(() => {
|
video.play();
|
}, 2000);
|
}
|
});
|
}
|
} else {
|
this.$message.error("暂无视频");
|
}
|
},
|
selectedDepartment(data) {
|
this.currentPage = 1;
|
data.parentId = data.id;
|
data.id = null;
|
this.searchData = data;
|
this.getVideoPointList(data);
|
},
|
current_change(e) {
|
this.currentPage = e;
|
this.getVideoPointList(this.searchData);
|
},
|
},
|
beforeDestroy() {
|
this.videoList.forEach((element) => {
|
element.push();
|
});
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.point-container {
|
margin-left: 5px;
|
border: 1px solid #ccc;
|
padding: 10px;
|
}
|
.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);
|
}
|
.title {
|
color: #333;
|
}
|
.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;
|
}
|
.video-main {
|
display: flex;
|
flex-wrap: wrap;
|
overflow-y: scroll;
|
margin-left: 20px;
|
}
|
.video-title {
|
color: rgb(75, 155, 183);
|
font-size: 11px;
|
line-height: 18px;
|
position: absolute;
|
z-index: 1;
|
|
left: 50px;
|
}
|
.button-div {
|
color: rgb(75, 155, 183);
|
position: absolute;
|
height: 30px;
|
line-height: 30px;
|
width: 100%;
|
margin-left: 20px;
|
cursor: pointer;
|
width: calc(100% - 20px);
|
border: 1px solid rgb(75, 155, 183);
|
}
|
|
.el-pagination {
|
// &::v-deep li,
|
// &::v-deep .btn-prev,
|
// &::v-deep .btn-next {
|
// background-color: #071f39;
|
// color: #4b9bb7;
|
// }
|
|
// &::v-deep .active {
|
// background-color: #409eff;
|
// color: #fff;
|
// }
|
}
|
|
.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;
|
}
|
|
video::-webkit-media-controls-timeline {
|
display: none;
|
}
|
|
video::-webkit-media-controls-current-time-display {
|
display: none;
|
}
|
|
video::-webkit-media-controls-time-remaining-display {
|
display: none;
|
}
|
|
video::-webkit-media-controls-mute-button {
|
display: none;
|
}
|
|
video::-webkit-media-controls-toggle-closed-captions-button {
|
display: none;
|
}
|
</style>
|
