From b23a2a35a14b010a3b97a1b61a02ec179dfab924 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期五, 04 九月 2020 17:25:14 +0800
Subject: [PATCH] feat: sort camera tree
---
src/pages/cameraVideo/index/Video.vue | 213 +++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 157 insertions(+), 56 deletions(-)
diff --git a/src/pages/cameraVideo/index/Video.vue b/src/pages/cameraVideo/index/Video.vue
index b8cf1a2..e4ebff0 100644
--- a/src/pages/cameraVideo/index/Video.vue
+++ b/src/pages/cameraVideo/index/Video.vue
@@ -1,53 +1,56 @@
<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-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"
+ >
+ <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>
- <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">
+ <video-task ref="taskview" @addToBase="toAdd"></video-task>
</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>
@@ -163,8 +166,9 @@
mounted() {
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();
@@ -422,6 +426,14 @@
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;
// console.log("w鏄細", w,this.$refs.monitorVideo.offsetWidth);
@@ -555,16 +567,22 @@
.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;
@@ -604,15 +622,22 @@
cursor: pointer;
}
}
+ .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 +650,91 @@
.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