<template>
|
<div style="width: 100%; height: 100%">
|
<div class="monitoring-right" ref="videoRight">
|
<div class="main-top">
|
<div class="monitoring-video" ref="monitorVideo">
|
<!-- <div class="monitoring-video-guid">
|
<span
|
:class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
|
@click="setGuid(1)"
|
></span>
|
<span
|
:class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
|
@click="setGuid(2)"
|
></span>
|
<span
|
:class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
|
@click="setGuid(3)"
|
></span>
|
<el-tooltip v-if="TreeDataPool.selectedNode.id" :content="`${showArea?'隐藏区域':'查看区域'}`" placement="bottom" popper-class="atooltip">
|
<span :class="showArea?'activegongge':''" class="iconfont iconquyu" @click="toggleShowArea"></span>
|
</el-tooltip>
|
</div> -->
|
<div class="fixedRatioBox">
|
<div
|
class="video-main-box-side"
|
v-if="visibilityState && allVideoNum == 5"
|
>
|
<VideoItem
|
:videoGuid="guid"
|
:starW="`calc(66.66% - 4px)`"
|
:starH="`calc(66.66% - 4px)`"
|
:videoItem="centerVideo"
|
:showArea="showArea"
|
v-show="!showBackup"
|
class="activeItem"
|
></VideoItem>
|
<VideoItem
|
:videoGuid="guid"
|
:starW="`calc(66.66% - 4px)`"
|
:starH="`calc(66.66% - 4px)`"
|
:videoItem="BackupVideo"
|
:showArea="showArea"
|
v-show="showBackup"
|
class="activeItem"
|
></VideoItem>
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:videoItem="item"
|
:showArea="showArea"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
|
<div
|
class="video-main-box-side"
|
v-if="visibilityState && allVideoNum == 7"
|
>
|
<VideoItem
|
:videoGuid="guid"
|
:starW="`calc(74.99% - 4px)`"
|
:starH="`calc(74.99% - 4px)`"
|
:videoItem="centerVideo"
|
:showArea="showArea"
|
class="activeItem"
|
></VideoItem>
|
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:videoItem="item"
|
:showArea="showArea"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
|
<div
|
class="video-main-box-side"
|
v-if="visibilityState && allVideoNum == 12"
|
>
|
<div style="width: 100%; height: 25%">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(0, 4)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(24.99% - 4px)`"
|
:starH="`calc(100% - 4px)`"
|
:videoItem="item"
|
:showArea="showArea"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
<div style="width: 25%; height: 50%; float: left">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(4, 6)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(100% - 4px)`"
|
:starH="`calc(50% - 4px)`"
|
:videoItem="item"
|
:showArea="showArea"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
<VideoItem
|
:videoGuid="guid"
|
:starW="`calc(50% - 4px)`"
|
:starH="`calc(50% - 4px)`"
|
:videoItem="centerVideo"
|
:showArea="showArea"
|
:hasPoster="false"
|
></VideoItem>
|
<!-- <VideoItem
|
:videoGuid="guid"
|
:starW="`calc(50% - 4px)`"
|
:starH="`calc(50% - 4px)`"
|
:videoItem="centerVideo"
|
:showArea="showArea"
|
class="activeItem"
|
v-if="!showSub"
|
|
></VideoItem> -->
|
|
<div style="width: 25%; height: 50%; float: left">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(6, 8)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(100% - 4px)`"
|
:starH="`calc(50% - 4px)`"
|
:videoItem="item"
|
:showArea="showArea"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
<div style="width: 100%; height: 25%">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(8)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(24.99% - 4px)`"
|
:starH="`calc(100% - 4px)`"
|
:videoItem="item"
|
:showArea="showArea"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
</div>
|
|
<div
|
class="video-main-box-side"
|
v-if="visibilityState && allVideoNum == 16"
|
>
|
<div style="width: 100%; height: 20%">
|
<!-- :class="[
|
TreeDataPool.activeVideoIndex === index + 1
|
? 'activeItem'
|
: '',
|
guid === 1 ? 'onlyActiveItem' : '',
|
]" -->
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(0, 5)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(19.99% - 4px)`"
|
:starH="`calc(100% - 4px)`"
|
:videoItem="item"
|
:showArea="showArea"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
<div style="width: 20%; height: 60%; float: left">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(5, 8)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(100% - 4px)`"
|
:starH="`calc(33.33% - 4px)`"
|
:videoItem="item"
|
:showArea="showArea"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
<VideoItem
|
:videoGuid="guid"
|
:starW="`calc(60% - 4px)`"
|
:starH="`calc(60% - 4px)`"
|
:videoItem="centerVideo"
|
:showArea="showArea"
|
class="activeItem"
|
></VideoItem>
|
<div style="width: 20%; height: 60%; float: left">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(8, 11)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(100% - 4px)`"
|
:starH="`calc(33.33% - 4px)`"
|
:videoItem="item"
|
:showArea="showArea"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
<div style="width: 100%; height: 20%; float: left">
|
<VideoItem
|
v-for="(item, index) in TreeDataPool.videoArr.slice(11)"
|
:key="index"
|
:videoGuid="guid"
|
:videoIndex="index"
|
:starW="`calc(19.99% - 4px)`"
|
:starH="`calc(100% - 4px)`"
|
:videoItem="item"
|
:showArea="showArea"
|
@click="videoItemClick(index)"
|
></VideoItem>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import VideoItem from "../components/VideoItem";
|
import { getCameraPlayList, showAllCameras } from "@/api/trackCamera";
|
|
export default {
|
name: "Video",
|
components: {
|
VideoItem,
|
},
|
data() {
|
return {
|
guid: 3,
|
center: "",
|
defaultHeight: 432,
|
defaultWidth: 600,
|
track: false,
|
traceCache: {},
|
traceTimer: null,
|
tracePubUrl: `${location.protocol === "https" ? "wss" : "ws"}://${
|
location.host
|
}/track`,
|
websocket: null,
|
visibilityState: true,
|
showArea: false,
|
videoNum2Play: 0,
|
centerVideo: null,
|
BackupVideo: null,
|
list2TakeTurn: [],
|
timer: null,
|
reqTimer: null,
|
centerIndex: 0,
|
showBackup: false,
|
};
|
},
|
created() {
|
this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndex
|
? Number(sessionStorage.activeIndex)
|
: this.TreeDataPool.activeVideoIndex;
|
this.getActiveIndex();
|
this.TreeDataPool.readonly = true;
|
this.TreeDataPool.gbReadonly = true;
|
this.TreeDataPool.multiple = true;
|
},
|
mounted() {
|
document.addEventListener("visibilitychange", this.visibilitychange, false);
|
this.$nextTick(() => {
|
window.addEventListener("resize", this.resizeMonitorTask);
|
//this.getRightWidth();
|
this.resizeMonitorTask();
|
});
|
this.getCenter();
|
this.blackAngWhite();
|
this.VideoPhotoData.queryTagList();
|
// let
|
// this.TreeDataPool.getAllChildrenNodes()
|
showAllCameras()
|
.then((res) => {
|
this.videoNum2Play = res.data.length;
|
res.data.forEach((info, i) => {
|
let camera = this.TreeDataPool.getCameraInfoById(info.id);
|
this.TreeDataPool.setVideoArr(i, camera, this);
|
if (info.status >= 1) {
|
this.list2TakeTurn.push(info);
|
}
|
});
|
// debugger
|
if (this.list2TakeTurn.length == 0 && res.data.length) {
|
this.list2TakeTurn.push(res.data[0]);
|
}
|
this.centerPlay();
|
this.repeatRequest();
|
})
|
.catch((err) => {
|
// this.repeatRequest();
|
});
|
},
|
beforeDestroy() {
|
window.removeEventListener("resize", this.getRightWidth);
|
this.CardList.details = [];
|
window.clearInterval(this.trackTimer);
|
if (this.websocket) {
|
this.websocket.close();
|
}
|
},
|
watch: {
|
"TreeDataPool.videoArr": function (newArry) {
|
const cameras = this.filterNodes(newArry);
|
this.getActiveIndex();
|
},
|
"VideoPhotoData.selectBlacks": function (value) {
|
this.blackAngWhite();
|
},
|
"VideoPhotoData.selectWhites": function (value) {
|
this.blackAngWhite();
|
},
|
"TreeDataPool.showTreeBox"(value) {
|
this.getRightWidth();
|
},
|
"TreeDataPool.selectedNodes.length"(value) {
|
this.list2TakeTurn = [];
|
this.videoNum2Play = this.TreeDataPool.selectedNodes.length;
|
this.TreeDataPool.selectedNodes.forEach((id, i) => {
|
let camera = this.TreeDataPool.getCameraInfoById(id);
|
this.TreeDataPool.setVideoArr(i, camera, this);
|
|
if (camera.status >= 1) {
|
this.list2TakeTurn.push(camera);
|
}
|
});
|
},
|
},
|
methods: {
|
isSame(arr1, arr2) {
|
let _arr1 = [];
|
arr1.forEach((item) => {
|
_arr1.push(item.id);
|
});
|
for (const id of _arr1) {
|
if (!arr2.includes(id)) {
|
return false;
|
}
|
}
|
if (_arr1.length !== arr2.length) {
|
return false;
|
}
|
return true;
|
},
|
centerPlay(typ) {
|
if (this.list2TakeTurn.length == 1) {
|
this.centerVideo = this.list2TakeTurn[0];
|
return;
|
}
|
let that = this;
|
// if () {
|
|
// }
|
if (typ == 'change') {
|
this.showBackup = true;
|
}
|
that.centerVideo = that.list2TakeTurn[that.centerIndex];
|
that.centerIndex++;
|
if (that.centerIndex == that.list2TakeTurn.length) {
|
that.centerIndex = 0;
|
}
|
if (typ == 'change') {
|
setTimeout(() => {
|
this.showBackup = false;
|
that.BackupVideo = that.centerVideo;
|
}, 2000);
|
}else{
|
that.BackupVideo = that.centerVideo;
|
}
|
|
clearInterval(this.timer);
|
this.timer = setInterval(() => {
|
that.centerVideo = that.list2TakeTurn[that.centerIndex];
|
that.centerIndex++;
|
if (that.centerIndex == that.list2TakeTurn.length) {
|
that.centerIndex = 0;
|
}
|
}, 25 * 1000);
|
},
|
repeatRequest() {
|
this.reqTimer = setInterval(() => {
|
showAllCameras().then((res) => {
|
let newArr = [];
|
let newArr1 = [];
|
res.data.forEach((info, i) => {
|
if (info.status >= 1) {
|
newArr.push(info.id);
|
newArr1.push(info);
|
}
|
});
|
// if (newArr.length == 0 && res.data.length) {
|
// newArr.push(res.data[0].id);
|
// newArr1.push(res.data[0]);
|
// }
|
if (newArr.length != 0 && !this.isSame(this.list2TakeTurn, newArr)) {
|
this.list2TakeTurn = [...newArr1];
|
this.centerIndex = 0;
|
this.centerPlay('change');
|
}
|
});
|
}, 2500);
|
},
|
initTrackWebsocket() {
|
if (typeof WebSocket === "undefined") {
|
alert("您的浏览器不支持socket");
|
} else {
|
// 实例化socket
|
this.websocket = new WebSocket(this.tracePubUrl);
|
// 监听socket消息
|
this.websocket.onopen = this.websocketonopen;
|
this.websocket.onmessage = this.recvieTrackMessage;
|
}
|
},
|
websocketonopen() {
|
//连接建立之后执行send方法发送数据
|
this.websocket.send("sub");
|
},
|
tracking() {
|
getCameraPlayList().then((data) => {
|
if (data && data.length) {
|
data.forEach((ins) => {
|
let newCamera = this.TreeDataPool.getCameraInfoById(
|
ins.NewCameraId
|
);
|
if (!newCamera) {
|
console.log("未查找到摄像机：", ins.NewCameraId);
|
return;
|
}
|
if (ins.IsNew) {
|
this.newPlayerInViewBox(newCamera);
|
} else {
|
this.replacePlayer(newCamera, ins.OldCameraId);
|
}
|
});
|
}
|
});
|
},
|
recvieTrackMessage(e) {
|
let dataJson = JSON.parse(e.data);
|
let cache = this.traceCache;
|
let camera = dataJson.camera;
|
let person = dataJson.person;
|
let create = false;
|
|
// 如果是已经在播放的摄像机, 直接返回
|
if (cache[camera]) {
|
cache[camera][person] = 10;
|
return;
|
}
|
|
cache[camera] = {};
|
cache[camera][person] = 10;
|
|
// 查询播放该人的上一个摄像机
|
for (var cam in cache) {
|
if (cam === camera) {
|
continue;
|
}
|
|
if (cache[cam][person]) {
|
// 找到上一个摄像机, 判断摄像机里是否还有其他人, 有:新开播放器 没有:切换
|
console.log("last camera:", cam, Object.keys(cache[cam]).length);
|
if (Object.keys(cache[cam]).length > 2) {
|
delete cache[cam][person];
|
this.newPlayerInViewBox(camera);
|
return;
|
} else {
|
this.replacePlayer(camera, cam);
|
delete cache[cam];
|
return;
|
}
|
}
|
}
|
|
// 未发现播放记录
|
this.newPlayerInViewBox(camera);
|
},
|
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);
|
// 替换播放器
|
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.$set(this.VideoPhotoData.whiteList[i], "disabled", true);
|
}
|
}
|
if (this.VideoPhotoData.selectBlacks.length == 0) {
|
for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
|
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.$set(this.VideoPhotoData.blackList[i], "disabled", true);
|
}
|
}
|
if (this.VideoPhotoData.selectWhites.length == 0) {
|
for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
|
this.$set(this.VideoPhotoData.blackList[i], "disabled", false);
|
}
|
}
|
},
|
closeWindow(index) {
|
this.CardList.addBaseList.splice(index, 1);
|
},
|
getVideoHeight() {
|
let h = this.$refs.monitorVideo.offsetHeight;
|
// this.$refs.monitorTask.style.height = h + "px";
|
},
|
resizeMonitorTask() {
|
this.getRightWidth();
|
this.getVideoHeight();
|
},
|
getRightWidth() {
|
let w = this.$refs.videoRight.offsetWidth;
|
// this.$refs.monitorTask.style.width =w - this.$refs.monitorVideo.offsetWidth - 40 + "px";
|
},
|
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 = this.allVideoNum;
|
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();
|
},
|
toggleShowArea() {
|
this.showArea = !this.showArea;
|
},
|
},
|
destroyed() {
|
window.removeEventListener("resize", this.getRightWidth);
|
// this.CardList.details = [];
|
this.CardList.addBaseList = [];
|
this.VideoPhotoData.selectBlacks = [];
|
this.VideoPhotoData.selectWhites = [];
|
},
|
computed: {
|
allVideoNum() {
|
if (this.videoNum2Play <= 5) {
|
this.guid = 3;
|
return 5;
|
}
|
|
if (this.videoNum2Play <= 7) {
|
this.guid = 4;
|
return 7;
|
}
|
|
if (this.videoNum2Play <= 12) {
|
this.guid = 4;
|
return 12;
|
}
|
|
if (this.videoNum2Play <= 16) {
|
this.guid = 5;
|
return 16;
|
}
|
this.guid = 5;
|
return 16;
|
},
|
nextIndex() {
|
if (this.centerIndex == this.list2TakeTurn.length - 1) {
|
return 0;
|
}
|
return this.centerIndex + 1;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.monitoring-right {
|
width: 100%;
|
height: 100%;
|
// min-width: 981px;
|
//float: right;
|
box-sizing: border-box;
|
padding: 10px;
|
background-color: #e9ebf2;
|
.main-top {
|
margin-bottom: 14px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.monitoring-video {
|
width: 100%;
|
// min-width: 740px;
|
// max-width: 1208px;
|
// height: 98%;
|
//float: left;
|
box-sizing: border-box;
|
// 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;
|
}
|
.area-trigger {
|
font-size: 16px;
|
}
|
}
|
.fixedRatioBox {
|
padding-top: 55.3%;
|
box-sizing: border-box;
|
position: relative;
|
> div {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
}
|
}
|
}
|
}
|
</style>
|
