From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 20 七月 2022 15:05:58 +0800
Subject: [PATCH] 修复国标配置的bug
---
src/pages/cameraVideo/index/Video.vue | 530 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 280 insertions(+), 250 deletions(-)
diff --git a/src/pages/cameraVideo/index/Video.vue b/src/pages/cameraVideo/index/Video.vue
index b8cf1a2..9f4f0f3 100644
--- a/src/pages/cameraVideo/index/Video.vue
+++ b/src/pages/cameraVideo/index/Video.vue
@@ -1,128 +1,80 @@
<template>
<div style="width:100%; height: 100%;">
<div class="monitoring-right" ref="videoRight">
- <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-show="true"
- :content="`${track ? '鍏抽棴杩借釜': '寮�鍚拷韪�'}`"
- placement="bottom"
- popper-class="atooltip"
- >
+ <div class="main-top">
+ <div class="monitoring-video" ref="monitorVideo">
+ <div class="monitoring-video-guid">
<span
- :class="track ? 'iconfont iconintruder-alarm activegongge':'iconfont iconintruder-alarm'"
- @click="handleTrack"
+ :class="guid === 1 ? 'iconfont icongongge1 activegongge' : 'iconfont icongongge1'"
+ @click="setGuid(1)"
></span>
- </el-tooltip>
+ <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>
+ <!-- <span
+ v-if="TreeDataPool.selectedNode.id"
+ class="area-trigger"
+ @click="toggleShowArea"
+ >{{showArea?'闅愯棌鍖哄煙':'鏌ョ湅鍖哄煙'}}</span> -->
+ <!-- <el-tooltip
+ v-show="true"
+ :content="`${track ? '鍏抽棴杩借釜': '寮�鍚拷韪�'}`"
+ placement="bottom"
+ popper-class="atooltip"
+ >
+ <span
+ :class="track ? 'iconfont iconintruder-alarm activegongge':'iconfont iconintruder-alarm'"
+ @click="handleTrack"
+ ></span>
+ </el-tooltip>-->
+ </div>
+ <div class="fixedRatioBox">
+ <div :class="guid === 1 ? 'video-main-box' : 'video-main-box-side'" v-if="visibilityState">
+ <VideoItem
+ v-for="(item, index) in TreeDataPool.videoArr"
+ :key="index"
+ :videoGuid="guid"
+ :videoIndex="index"
+ :videoItem="item"
+ :showArea="showArea"
+ :class="[
+ TreeDataPool.activeVideoIndex === index ? 'activeItem' : '',
+ guid === 1 ? 'onlyActiveItem' : ''
+ ]"
+ @click="videoItemClick(index)"
+ ></VideoItem>
+ </div>
+ </div>
</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 class="monitoring-task" ref="monitorTask">
+ <VideoTask ref="taskview" @addToBase="toAdd"></VideoTask>
</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/VideoItem";
-import VideoTask from "../components/VideoTask";
-import VideoPhoto from "../components/VideoPhoto";
-import { getCameraPlayList } from "@/api/trackCamera";
+import VideoItem from "../components/VideoItem"
+import VideoTask from "../components/VideoTask"
+import VideoPhoto from "../components/VideoPhoto"
+import { getCameraPlayList } from "@/api/trackCamera"
export default {
name: "Video",
@@ -142,73 +94,63 @@
traceTimer: null,
tracePubUrl: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/track`,
websocket: null,
- visibilityState: true
- };
+ visibilityState: true,
+ showArea: false
+ }
},
created() {
- console.log("befor created")
- // this.TreeDataPool.clean();
- // this.TreeDataPool.fetchTreeData();
- // 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;
-
- console.log("created")
+ : this.TreeDataPool.activeVideoIndex
+ this.getActiveIndex()
+ this.TreeDataPool.readonly = true
+ this.TreeDataPool.gbReadonly = true
+ this.TreeDataPool.multiple = false
},
mounted() {
- document.addEventListener("visibilitychange", this.visibilitychange, false);
+ document.addEventListener("visibilitychange", this.visibilitychange, false)
this.$nextTick(() => {
- window.addEventListener("resize", this.getRightWidth);
- this.getRightWidth();
+ window.addEventListener("resize", this.resizeMonitorTask)
+ //this.getRightWidth();
+ this.resizeMonitorTask()
})
- this.getCenter();
- this.blackAngWhite();
- this.VideoPhotoData.queryTagList();
-
- let list = this.TreeDataPool.localVedioList.filter(i => {
- return i.progress == 100;
- })
- // console.log(list, '宸插畬鎴愮殑鏈湴瑙嗛', this.TreeDataPool.localVedioList)
- this.TreeDataPool.localVedioList = list;
+ this.getCenter()
+ this.blackAngWhite()
+ this.VideoPhotoData.queryTagList()
},
beforeDestroy() {
- window.removeEventListener("resize", this.getRightWidth);
- this.CardList.details = [];
- window.clearInterval(this.trackTimer);
+ window.removeEventListener("resize", this.getRightWidth)
+ this.CardList.details = []
+ window.clearInterval(this.trackTimer)
if (this.websocket) {
- this.websocket.close();
+ this.websocket.close()
}
},
watch: {
- "TreeDataPool.videoArr": function (newArry) {
- console.log('newArry',newArry)
- const cameras = this.filterNodes(newArry);
- this.getActiveIndex();
- this.$refs.taskview.showTasks(cameras);
- this.$refs.photoview.showCapture(cameras);
+ "TreeDataPool.videoArr": function(newArry) {
+ console.log("newArry", newArry)
+ const cameras = this.filterNodes(newArry)
+ this.getActiveIndex()
+ this.$refs.taskview.showTasks(cameras)
+ this.$refs.photoview.showCapture(cameras)
},
- "VideoPhotoData.selectBlacks": function (value) {
- this.blackAngWhite();
+ "VideoPhotoData.selectBlacks": function(value) {
+ this.blackAngWhite()
},
- "VideoPhotoData.selectWhites": function (value) {
- this.blackAngWhite();
+ "VideoPhotoData.selectWhites": function(value) {
+ this.blackAngWhite()
},
"TreeDataPool.showTreeBox"(value) {
- this.getRightWidth();
+ this.getRightWidth()
}
},
methods: {
handleTrack() {
- this.track = !this.track;
+ this.track = !this.track
if (!this.track) {
- window.clearInterval(this.trackTimer);
- this.websocket.close();
- return;
+ window.clearInterval(this.trackTimer)
+ this.websocket.close()
+ return
}
this.$notify({
@@ -222,16 +164,16 @@
if (!useWebSocket) {
this.trackTimer = window.setInterval(() => {
_this.tracking()
- }, 5 * 1000);
+ }, 5 * 1000)
} else {
this.initTrackWebsocket()
this.trackTimer = window.setInterval(() => {
_this.videoItemMonitor()
- }, 1 * 1000);
+ }, 1 * 1000)
}
},
videoItemMonitor() {
- this.websocket.send("ping");
+ this.websocket.send("ping")
let cache = this.traceCache
// 閬嶅巻褰撴湡鎾斁鐨勬憚鍍忔満, 鎸夌閫掑噺鎽勫儚鏈轰汉鍛樺瓨鍦ㄦ椂闂达紝涓�0鏃跺垹闄わ紝鎽勫儚鏈轰汉鍛樹负绌烘椂鍏抽棴
@@ -243,18 +185,17 @@
for (var person in cache[camera]) {
cache[camera][person]--
if (cache[camera][person] < 0) {
- delete (cache[camera][person])
+ delete cache[camera][person]
}
}
-
} else {
- delete (cache[camera])
+ delete cache[camera]
this.closePlayer(camera)
}
}
},
initTrackWebsocket() {
- if (typeof (WebSocket) === "undefined") {
+ if (typeof WebSocket === "undefined") {
alert("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔socket")
} else {
// 瀹炰緥鍖杝ocket
@@ -264,21 +205,21 @@
this.websocket.onmessage = this.recvieTrackMessage
}
},
- websocketonopen() { //杩炴帴寤虹珛涔嬪悗鎵цsend鏂规硶鍙戦�佹暟鎹�
+ websocketonopen() {
+ //杩炴帴寤虹珛涔嬪悗鎵цsend鏂规硶鍙戦�佹暟鎹�
this.websocket.send("sub")
},
tracking() {
- getCameraPlayList().then(data => {
+ getCameraPlayList().then((data) => {
if (data && data.length) {
- data.forEach(ins => {
+ data.forEach((ins) => {
let newCamera = this.TreeDataPool.getCameraInfoById(ins.NewCameraId)
if (!newCamera) {
- console.log("鏈煡鎵惧埌鎽勫儚鏈猴細", ins.NewCameraId);
+ console.log("鏈煡鎵惧埌鎽勫儚鏈猴細", ins.NewCameraId)
return
}
if (ins.IsNew) {
this.newPlayerInViewBox(newCamera)
-
} else {
this.replacePlayer(newCamera, ins.OldCameraId)
}
@@ -312,12 +253,12 @@
// 鎵惧埌涓婁竴涓憚鍍忔満, 鍒ゆ柇鎽勫儚鏈洪噷鏄惁杩樻湁鍏朵粬浜�, 鏈�:鏂板紑鎾斁鍣� 娌℃湁:鍒囨崲
console.log("last camera:", cam, Object.keys(cache[cam]).length)
if (Object.keys(cache[cam]).length > 2) {
- delete (cache[cam][person])
+ delete cache[cam][person]
this.newPlayerInViewBox(camera)
return
} else {
this.replacePlayer(camera, cam)
- delete (cache[cam])
+ delete cache[cam]
return
}
}
@@ -329,16 +270,13 @@
newPlayerInViewBox(id) {
// 鏂板鎾斁绐楀彛
let camera = this.TreeDataPool.getCameraInfoById(id)
- let emptyIndex = -1;
- let exist = false;
+ 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 (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
if (emptyIndex === -1) {
- emptyIndex = i;
+ emptyIndex = i
}
} else {
if (this.TreeDataPool.videoArr[i].id === camera.id) {
@@ -347,7 +285,7 @@
}
}
if (!exist && emptyIndex !== -1) {
- this.TreeDataPool.setVideoArr(emptyIndex, camera, this);
+ this.TreeDataPool.setVideoArr(emptyIndex, camera, this)
}
},
replacePlayer(id, oldCameraId) {
@@ -359,9 +297,10 @@
if (
this.TreeDataPool.videoArr[i] &&
this.TreeDataPool.videoArr[i] !== undefined &&
- this.TreeDataPool.videoArr[i] !== "") {
+ this.TreeDataPool.videoArr[i] !== ""
+ ) {
if (this.TreeDataPool.videoArr[i].id === oldCameraId) {
- this.TreeDataPool.setVideoArr(i, camera, this);
+ this.TreeDataPool.setVideoArr(i, camera, this)
return true
}
}
@@ -375,9 +314,10 @@
if (
this.TreeDataPool.videoArr[i] &&
this.TreeDataPool.videoArr[i] !== undefined &&
- this.TreeDataPool.videoArr[i] !== "") {
+ this.TreeDataPool.videoArr[i] !== ""
+ ) {
if (this.TreeDataPool.videoArr[i].id === id) {
- this.TreeDataPool.setVideoArr(i, undefined, this);
+ this.TreeDataPool.setVideoArr(i, undefined, this)
return true
}
}
@@ -386,60 +326,68 @@
visibilitychange() {
switch (document.visibilityState) {
case "hidden":
- this.visibilityState = false;
- break;
+ this.visibilityState = false
+ break
case "visible":
- this.visibilityState = true;
- break;
+ 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)
+ 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)
+ 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)
+ // 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)
+ //this.VideoPhotoData.blackList[i].disabled = false
+ this.$set(this.VideoPhotoData.blackList[i], "disabled", false)
}
}
},
closeWindow(index) {
- this.CardList.addBaseList.splice(index, 1);
+ 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;
+ 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'
+ 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 => {
+ let nodes = []
+ selectArry.forEach((i) => {
if (i && nodes.indexOf(i.id) < 0) {
- nodes.push(i.id);
+ nodes.push(i.id)
}
- });
- return nodes;
+ })
+ return nodes
},
videoItemClick(index) {
- this.TreeDataPool.activeVideoIndex = index;
- this.TreeDataPool.activeForceChoose = true;
+ this.TreeDataPool.activeVideoIndex = index
+ this.TreeDataPool.activeForceChoose = true
},
toAdd(item) {
this.CardList.addBaseList.push(item)
@@ -448,13 +396,13 @@
this.center = {
x: document.documentElement.clientWidth / 2 - 250,
y: document.documentElement.clientHeight / 2 - 200
- };
+ }
},
resizeWidth(w) {
- this.defaultWidth = w;
+ this.defaultWidth = w
},
resizeHeight(h) {
- this.defaultHeight = h;
+ this.defaultHeight = h
},
saveAddBase(item, index) {
if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
@@ -466,7 +414,7 @@
return
}
let res = this.VideoPhotoData.addBase(item)
- res.then(data => {
+ res.then((data) => {
console.log("then", data)
if (data.success) {
this.$notify({
@@ -481,90 +429,87 @@
type: "error"
})
}
- this.CardList.addBaseList.splice(index, 1);
+ this.CardList.addBaseList.splice(index, 1)
this.VideoPhotoData.selectBlacks = []
this.VideoPhotoData.selectWhites = []
})
},
getActiveIndex() {
- this.TreeDataPool.videoArr.length = Math.pow(this.guid, 2);
- let nullVideoIndex = "";
+ 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;
+ if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
+ nullVideoIndex = i
} else {
- nullVideoIndex = "";
+ nullVideoIndex = ""
}
}
if (
this.TreeDataPool.activeVideoIndex !== "" &&
- this.TreeDataPool.activeVideoIndex <
- this.TreeDataPool.videoArr.length - 1
+ this.TreeDataPool.activeVideoIndex < this.TreeDataPool.videoArr.length - 1
) {
- return this.TreeDataPool.activeVideoIndex;
+ return this.TreeDataPool.activeVideoIndex
} else {
if (nullVideoIndex === "") {
- this.TreeDataPool.activeVideoIndex =
- this.TreeDataPool.videoArr.length - 1;
+ this.TreeDataPool.activeVideoIndex = this.TreeDataPool.videoArr.length - 1
} else {
- this.TreeDataPool.activeVideoIndex = nullVideoIndex;
+ this.TreeDataPool.activeVideoIndex = nullVideoIndex
}
}
},
setGuid(value) {
- clearTimeout(this.trackTimer);
+ 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++
- ) {
+ 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;
+ 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();
+ 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 = [];
+ 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;
+ 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: 70.5%;
min-width: 740px;
max-width: 1208px;
- height: 75%;
- float: left;
+ height: 98%;
+ //float: left;
box-sizing: border-box;
// box-shadow: #e4e7ed 0px 0px 9px inset;
border-radius: 5px;
@@ -603,16 +548,26 @@
padding-left: 12px;
cursor: pointer;
}
+ .area-trigger {
+ font-size: 16px;
+ }
+ }
+ .fixedRatioBox {
+ padding-top: 56.3%;
+ box-sizing: border-box;
+ position: relative;
+ > div {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ }
}
}
.monitoring-task {
- // @media screen and (max-width: 1700px){
-
- // }
- width: calc(29.5% - 10px);
+ //width: calc(29.5% - 10px);
+ width: calc(34% - 10px);
//width: auto;
- // width: 23%;
- height: 73%;
background-color: #fff;
float: left;
margin: 0px 0px 0px 10px;
@@ -625,15 +580,90 @@
.monitoring-photo {
width: 100%;
- height: calc(25% + 10px);
+ height: calc(25% + 32px);
background-color: #fff;
float: left;
padding: 10px;
- margin-top: -10px;
+ //margin-top: -10px;
box-sizing: border-box;
border: 1px solid #e4e7ed;
// box-shadow: #e4e7ed 0px 0px 9px inset;
border-radius: 5px;
}
}
+.titlebar {
+ height: 10px !important;
+ background: #fff !important;
+ .button {
+ position: absolute;
+ font-size: 25px !important;
+ right: 10px;
+ top: 10px;
+ z-index: 3;
+ }
+}
+.addToBase {
+ width: 98%;
+ height: 430px;
+ position: relative;
+ .topLabel {
+ margin-top: 20px;
+ height: 40px;
+ border-bottom: 1px solid #eee;
+ font-family: PingFangSC-Medium;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 1rem;
+ color: #222222;
+ text-align: left;
+ margin-left: 15px;
+ }
+ .items {
+ width: 100%;
+ height: auto;
+ max-height: 35%;
+ overflow-y: auto;
+ margin: 20px 0px;
+ .lable {
+ width: 15%;
+ margin-top: 10px;
+ float: left;
+ //font-family: PingFangSC-Medium;
+ font-size: 14px;
+ font-weight: 600;
+ }
+ .baseList {
+ width: 85%;
+ height: 100%;
+ float: left;
+
+ // display: flex;
+ // justify-content: flex-start;
+ .base {
+ //flex-wrap: wrap;
+ width: calc(33% - 10px);
+ padding: 0px 5px;
+ line-height: 30px;
+ float: left;
+ text-align: left;
+ font-size: 12px !important;
+ .el-checkbox {
+ width: 100%;
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ .el-checkbox__label {
+ display: inline !important;
+ }
+ }
+ }
+ }
+ }
+ .buttons {
+ position: absolute;
+ right: 0px;
+ bottom: 15px;
+ }
+}
</style>
--
Gitblit v1.8.0