<template>
|
<div style="height: 100%;">
|
<div class="monitoring-right" ref="videoRight">
|
<div class="monitoring-video" ref="monitorVideo">
|
<div class="monitoring-video-guid">
|
<span
|
:class="guid === 1 ? 'iconfont icon-gongge1 activegongge' : 'iconfont icon-gongge1'"
|
@click="setGuid(1)"
|
></span>
|
<span
|
:class="guid === 2 ? 'iconfont icon-gongge activegongge' : 'iconfont icon-gongge'"
|
@click="setGuid(2)"
|
></span>
|
<span
|
:class="guid === 3 ? 'iconfont icon-gongge2 activegongge' : 'iconfont icon-gongge2'"
|
@click="setGuid(3)"
|
></span>
|
</div>
|
<div
|
:class="guid === 1 ? 'video-main-box' : 'video-main-box-side'"
|
style="width: 100%; height: calc(100% - 52px);"
|
v-if="visibilityState"
|
>
|
<video-item
|
v-for="(item, index) in TreeDataPool.videoArr"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:videoItem="item"
|
:class="[TreeDataPool.activeVideoIndex === index ? 'activeItem' : '', guid === 1 ? 'onlyActiveItem' : '']"
|
@click="videoItemClick(index)"
|
></video-item>
|
</div>
|
</div>
|
<!-- <div class="monitoring-task" ref="monitorTask">
|
<video-task ref="taskview" @addToBase="toAdd"></video-task>
|
</div>
|
<div class="monitoring-photo">
|
<video-photo ref="photoview" @addToBase="toAdd"></video-photo>
|
</div> -->
|
</div>
|
<hsc-window-style-metal class="windown-model">
|
<hsc-window
|
v-for="(item, index) in CardList.addBaseList"
|
:closeButton="true"
|
@closebuttonclick="closeWindow(index)"
|
:key="index"
|
@update:height="resizeHeight"
|
@update:width="resizeWidth"
|
style="background:white; height:475px"
|
:left="center.x + index * 10"
|
:top="center.y + index * 10"
|
:resizable="true"
|
positionHint="center"
|
:isScrollable="true"
|
:minWidth="662"
|
:minHeight="479"
|
:maxWidth="10000"
|
:maxHeight="7000"
|
:height="defaultHeight"
|
:width="defaultWidth"
|
>
|
<div class="addToBase">
|
<div class="topLabel">加入底库</div>
|
<div class="items">
|
<div class="lable">
|
<p>黑名单 ></p>
|
</div>
|
<div class="baseList">
|
<el-checkbox-group v-model="VideoPhotoData.selectBlacks" @change="blackAngWhite">
|
<div class="base" v-for="(item, index) in VideoPhotoData.blackList" :key="index">
|
<el-checkbox :label="item.value" :title="item.title" :disabled="item.disabled">{{
|
item.title
|
}}</el-checkbox>
|
</div>
|
</el-checkbox-group>
|
</div>
|
</div>
|
<div class="items">
|
<div class="lable">
|
<p>白名单 ></p>
|
</div>
|
<div class="baseList">
|
<el-checkbox-group v-model="VideoPhotoData.selectWhites" @change="blackAngWhite">
|
<div class="base" v-for="(item, index) in VideoPhotoData.whiteList" :key="index">
|
<el-checkbox :label="item.value" :title="item.title" :disabled="item.disabled">{{
|
item.title
|
}}</el-checkbox>
|
</div>
|
</el-checkbox-group>
|
</div>
|
</div>
|
<div class="buttons">
|
<el-button type="primary" @click="saveAddBase(item, index)">保存</el-button>
|
<el-button type="default" @click="closeWindow(index)">取消</el-button>
|
</div>
|
</div>
|
</hsc-window>
|
</hsc-window-style-metal>
|
</div>
|
</template>
|
|
<script>
|
import VideoItem from "@/components/video/VideoItem"
|
// import VideoTask from "@/components/video/VideoTask"
|
// import VideoPhoto from "@/components/video/VideoPhoto"
|
import { getCameraPlayList } from "@/api/trackCamera"
|
|
export default {
|
name: "Video",
|
components: {
|
VideoItem
|
// VideoTask,
|
// VideoPhoto
|
},
|
data() {
|
return {
|
guid: 1,
|
center: "",
|
defaultHeight: 432,
|
defaultWidth: 600,
|
track: false,
|
traceCache: {},
|
traceTimer: null,
|
tracePubUrl: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/track`,
|
websocket: null,
|
visibilityState: true
|
}
|
},
|
created() {
|
this.TreeDataPool.clean()
|
this.guid = sessionStorage.guid ? Number(sessionStorage.guid) : this.guid
|
this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndex
|
? Number(sessionStorage.activeIndex)
|
: this.TreeDataPool.activeVideoIndex
|
this.getActiveIndex()
|
this.TreeDataPool.readonly = true
|
this.TreeDataPool.gbReadonly = true
|
this.TreeDataPool.multiple = false
|
},
|
mounted() {
|
document.addEventListener("visibilitychange", this.visibilitychange, false)
|
this.$nextTick(() => {
|
window.addEventListener("resize", this.getRightWidth)
|
this.getRightWidth()
|
})
|
this.getCenter()
|
this.blackAngWhite()
|
this.VideoPhotoData.queryTagList()
|
|
// 自动播放
|
let _this = this
|
setTimeout(() => {
|
_this.autoPlay()
|
}, 5000)
|
},
|
beforeDestroy() {
|
window.removeEventListener("resize", this.getRightWidth)
|
this.CardList.details = []
|
window.clearInterval(this.trackTimer)
|
if (this.websocket) {
|
this.websocket.close()
|
}
|
},
|
watch: {
|
"TreeDataPool.videoArr": function(newArry) {
|
// 20220810
|
// const cameras = this.filterNodes(newArry)
|
this.getActiveIndex()
|
// this.$refs.taskview.showTasks(cameras)
|
// this.$refs.photoview.showCapture(cameras)
|
},
|
"VideoPhotoData.selectBlacks": function(value) {
|
this.blackAngWhite()
|
},
|
"VideoPhotoData.selectWhites": function(value) {
|
this.blackAngWhite()
|
},
|
"TreeDataPool.showTreeBox"(value) {
|
this.getRightWidth()
|
}
|
},
|
methods: {
|
autoPlay() {
|
let sessionInfo = sessionStorage.getItem("autoplay")
|
if (sessionInfo) {
|
let cameraId = ""
|
let store = JSON.parse(sessionInfo)
|
if (store.cameraId) {
|
cameraId = store.cameraId
|
} else if (store.cameraIp) {
|
let camera = this.TreeDataPool.getCameraInfoByIp(store.cameraIp)
|
// console.log(camera)
|
if (camera) {
|
cameraId = camera.id
|
}
|
} else {
|
return
|
}
|
|
// console.log(cameraId);
|
this.newPlayerInViewBox(cameraId)
|
}
|
},
|
videoItemMonitor() {
|
this.websocket.send("ping")
|
|
let cache = this.traceCache
|
// 遍历当期播放的摄像机, 按秒递减摄像机人员存在时间，为0时删除，摄像机人员为空时关闭
|
for (var camera in cache) {
|
// console.log("camera:", camera)
|
// console.table(cache[camera])
|
|
if (Object.keys(cache[camera]).length > 0) {
|
for (var person in cache[camera]) {
|
cache[camera][person]--
|
if (cache[camera][person] < 0) {
|
delete cache[camera][person]
|
}
|
}
|
} else {
|
delete cache[camera]
|
this.closePlayer(camera)
|
}
|
}
|
},
|
websocketonopen() {
|
//连接建立之后执行send方法发送数据
|
this.websocket.send("sub")
|
},
|
newPlayerInViewBox(id) {
|
// 新增播放窗口
|
let camera = this.TreeDataPool.getCameraInfoById(id)
|
let emptyIndex = -1
|
let exist = false
|
for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
|
// eslint-disable-next-line
|
if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
|
if (emptyIndex === -1) {
|
emptyIndex = i
|
}
|
} else {
|
if (this.TreeDataPool.videoArr[i].id === camera.id) {
|
exist = true
|
}
|
}
|
}
|
if (!exist && emptyIndex !== -1) {
|
this.TreeDataPool.setVideoArr(emptyIndex, camera, this)
|
}
|
},
|
replacePlayer(id, oldCameraId) {
|
let camera = this.TreeDataPool.getCameraInfoById(id)
|
// console.log("update:", camera.name)
|
// 替换播放器
|
for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
|
// eslint-disable-next-line
|
if (
|
this.TreeDataPool.videoArr[i] &&
|
this.TreeDataPool.videoArr[i] !== undefined &&
|
this.TreeDataPool.videoArr[i] !== ""
|
) {
|
if (this.TreeDataPool.videoArr[i].id === oldCameraId) {
|
this.TreeDataPool.setVideoArr(i, camera, this)
|
return true
|
}
|
}
|
}
|
|
return false
|
},
|
closePlayer(id) {
|
for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
|
// eslint-disable-next-line
|
if (
|
this.TreeDataPool.videoArr[i] &&
|
this.TreeDataPool.videoArr[i] !== undefined &&
|
this.TreeDataPool.videoArr[i] !== ""
|
) {
|
if (this.TreeDataPool.videoArr[i].id === id) {
|
this.TreeDataPool.setVideoArr(i, undefined, this)
|
return true
|
}
|
}
|
}
|
},
|
visibilitychange() {
|
switch (document.visibilityState) {
|
case "hidden":
|
this.visibilityState = false
|
break
|
case "visible":
|
this.visibilityState = true
|
break
|
}
|
},
|
blackAngWhite() {
|
if (this.VideoPhotoData.selectBlacks.length > 0) {
|
for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
|
//this.VideoPhotoData.whiteList[i].disabled = true
|
this.$set(this.VideoPhotoData.whiteList[i], "disabled", true)
|
}
|
}
|
if (this.VideoPhotoData.selectBlacks.length == 0) {
|
for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
|
//this.VideoPhotoData.whiteList[i].disabled = false
|
this.$set(this.VideoPhotoData.whiteList[i], "disabled", false)
|
}
|
}
|
if (this.VideoPhotoData.selectWhites.length > 0) {
|
for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
|
// this.VideoPhotoData.blackList[i].disabled = true
|
this.$set(this.VideoPhotoData.blackList[i], "disabled", true)
|
}
|
}
|
if (this.VideoPhotoData.selectWhites.length == 0) {
|
for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
|
//this.VideoPhotoData.blackList[i].disabled = false
|
this.$set(this.VideoPhotoData.blackList[i], "disabled", false)
|
}
|
}
|
},
|
closeWindow(index) {
|
this.CardList.addBaseList.splice(index, 1)
|
},
|
getRightWidth() {
|
return 0
|
// 20220810
|
// let w = this.$refs.videoRight.offsetWidth
|
// console.log("w是：", w,this.$refs.monitorVideo.offsetWidth);
|
// this.$refs.monitorTask.style.width = w - this.$refs.monitorVideo.offsetWidth - 40 + "px"
|
// console.log("右侧任务的宽度：", this.$refs.monitorTask.style.width)
|
},
|
filterNodes(selectArry) {
|
let nodes = []
|
selectArry.forEach((i) => {
|
if (i && nodes.indexOf(i.id) < 0) {
|
nodes.push(i.id)
|
}
|
})
|
return nodes
|
},
|
videoItemClick(index) {
|
this.TreeDataPool.activeVideoIndex = index
|
this.TreeDataPool.activeForceChoose = true
|
},
|
toAdd(item) {
|
this.CardList.addBaseList.push(item)
|
},
|
getCenter() {
|
this.center = {
|
x: document.documentElement.clientWidth / 2 - 250,
|
y: document.documentElement.clientHeight / 2 - 200
|
}
|
},
|
resizeWidth(w) {
|
this.defaultWidth = w
|
},
|
resizeHeight(h) {
|
this.defaultHeight = h
|
},
|
saveAddBase(item, index) {
|
if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
|
this.$notify({
|
title: "注意",
|
message: "请选择要添加的底库",
|
type: "warning"
|
})
|
return
|
}
|
let res = this.VideoPhotoData.addBase(item)
|
res.then((data) => {
|
console.log("then", data)
|
if (data.success) {
|
this.$notify({
|
title: "成功",
|
message: data.data,
|
type: "success"
|
})
|
} else {
|
this.$notify({
|
title: "失败",
|
message: data.data,
|
type: "error"
|
})
|
}
|
this.CardList.addBaseList.splice(index, 1)
|
this.VideoPhotoData.selectBlacks = []
|
this.VideoPhotoData.selectWhites = []
|
})
|
},
|
getActiveIndex() {
|
this.TreeDataPool.videoArr.length = Math.pow(this.guid, 2)
|
let nullVideoIndex = ""
|
for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
|
// eslint-disable-next-line
|
if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
|
nullVideoIndex = i
|
} else {
|
nullVideoIndex = ""
|
}
|
}
|
if (
|
this.TreeDataPool.activeVideoIndex !== "" &&
|
this.TreeDataPool.activeVideoIndex < this.TreeDataPool.videoArr.length - 1
|
) {
|
return this.TreeDataPool.activeVideoIndex
|
} else {
|
if (nullVideoIndex === "") {
|
this.TreeDataPool.activeVideoIndex = this.TreeDataPool.videoArr.length - 1
|
} else {
|
this.TreeDataPool.activeVideoIndex = nullVideoIndex
|
}
|
}
|
},
|
setGuid(value) {
|
clearTimeout(this.trackTimer)
|
|
if (value < this.guid && this.TreeDataPool.activeVideoIndex > value) {
|
// eslint-disable-next-line
|
for (let i = this.TreeDataPool.activeVideoIndex - 1; i < this.TreeDataPool.videoArr.length; i++) {
|
// eslint-disable-next-line
|
if (this.TreeDataPool.videoArr[i] && this.TreeDataPool.videoArr[i]["isPlaying"]) {
|
this.TreeDataPool.videoArr[i]["isPlaying"] = false
|
}
|
}
|
}
|
this.guid = value
|
sessionStorage.guid = this.guid
|
sessionStorage.activeIndex = this.TreeDataPool.activeVideoIndex
|
this.getActiveIndex()
|
}
|
},
|
destroyed() {
|
window.removeEventListener("resize", this.getRightWidth)
|
this.CardList.details = []
|
this.CardList.addBaseList = []
|
this.VideoPhotoData.selectBlacks = []
|
this.VideoPhotoData.selectWhites = []
|
//this.TreeDataPool.treeActiveName = "camera";
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.monitoring-right {
|
width: 100%;
|
height: 100%;
|
float: right;
|
box-sizing: border-box;
|
padding: 10px;
|
background-color: #e9ebf2;
|
.monitoring-video {
|
width: 100%;
|
//min-width: 800px;
|
min-width: 740px;
|
max-width: 1440px;
|
height: 90%;
|
float: left;
|
padding: 0px, 10px 10px 10px;
|
box-sizing: border-box;
|
border: 1px solid #e4e7ed;
|
// box-shadow: #e4e7ed 0px 0px 9px inset;
|
border-radius: 5px;
|
.activeItem {
|
border: 3px solid #ff7733;
|
position: relative;
|
top: -1px;
|
left: -1px;
|
// width: calc(100% + 2px) !important;
|
// height: calc(100% + 2px) !important;
|
}
|
.onlyActiveItem {
|
width: calc(100% + 2px) !important;
|
height: calc(100% + 2px) !important;
|
}
|
.video-main-box {
|
background-color: #fff;
|
box-sizing: border-box;
|
border: 1px solid #cacaca;
|
}
|
.video-main-box-side {
|
border-top: 1px solid #cacaca;
|
border-left: 1px solid #cacaca;
|
box-sizing: border-box;
|
background-color: #fff;
|
}
|
.monitoring-video-guid {
|
text-align: right;
|
padding-bottom: 10px;
|
.activegongge {
|
color: #3d68e1;
|
}
|
span {
|
font-size: 20px;
|
color: #cacaca;
|
padding-left: 12px;
|
cursor: pointer;
|
}
|
}
|
}
|
.monitoring-task {
|
// @media screen and (max-width: 1700px){
|
|
// }
|
width: calc(29.5% - 10px);
|
//width: auto;
|
// width: 23%;
|
height: 73%;
|
background-color: #fff;
|
float: left;
|
margin: 0px 0px 0px 10px;
|
box-sizing: border-box;
|
border: 1px solid #e4e7ed;
|
// box-shadow: #e4e7ed 0px 0px 9px inset;
|
border-radius: 5px;
|
min-width: 200px;
|
}
|
|
.monitoring-photo {
|
width: 100%;
|
height: calc(25% + 10px);
|
background-color: #fff;
|
float: left;
|
padding: 10px;
|
margin-top: -10px;
|
box-sizing: border-box;
|
border: 1px solid #e4e7ed;
|
// box-shadow: #e4e7ed 0px 0px 9px inset;
|
border-radius: 5px;
|
}
|
}
|
</style>
|
