From 3e2fcc570f8192aabdcc4721e521ee1341c73aa7 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期二, 12 十月 2021 13:59:18 +0800
Subject: [PATCH] 优化长春跟踪切换功能
---
src/pages/changchunTrack/index/Video.vue | 517 +++++++--------------------------------------------------
1 files changed, 66 insertions(+), 451 deletions(-)
diff --git a/src/pages/changchunTrack/index/Video.vue b/src/pages/changchunTrack/index/Video.vue
index 11bba5b..1f1b84a 100644
--- a/src/pages/changchunTrack/index/Video.vue
+++ b/src/pages/changchunTrack/index/Video.vue
@@ -3,44 +3,13 @@
<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"
- >
+ <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"
+ quietSwitch
class="activeItem"
></VideoItem>
<VideoItem
@@ -49,21 +18,17 @@
:videoGuid="guid"
:videoIndex="index"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
- <div
- class="video-main-box-side"
- v-if="visibilityState && allVideoNum == 7"
- >
+ <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"
+ quietSwitch
class="activeItem"
></VideoItem>
@@ -73,15 +38,11 @@
: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 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)"
@@ -91,7 +52,6 @@
:starW="`calc(24.99% - 4px)`"
:starH="`calc(100% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -104,7 +64,6 @@
:starW="`calc(100% - 4px)`"
:starH="`calc(50% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -113,19 +72,8 @@
:starW="`calc(50% - 4px)`"
:starH="`calc(50% - 4px)`"
:videoItem="centerVideo"
- :showArea="showArea"
- :hasPoster="false"
+ quietSwitch
></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
@@ -136,7 +84,6 @@
:starW="`calc(100% - 4px)`"
:starH="`calc(50% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -149,16 +96,12 @@
: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 class="video-main-box-side" v-if="visibilityState && allVideoNum == 16">
<div style="width: 100%; height: 20%">
<!-- :class="[
TreeDataPool.activeVideoIndex === index + 1
@@ -174,7 +117,6 @@
:starW="`calc(19.99% - 4px)`"
:starH="`calc(100% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -187,7 +129,6 @@
:starW="`calc(100% - 4px)`"
:starH="`calc(33.33% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -196,7 +137,7 @@
:starW="`calc(60% - 4px)`"
:starH="`calc(60% - 4px)`"
:videoItem="centerVideo"
- :showArea="showArea"
+ quietSwitch
class="activeItem"
></VideoItem>
<div style="width: 20%; height: 60%; float: left">
@@ -208,7 +149,6 @@
:starW="`calc(100% - 4px)`"
:starH="`calc(33.33% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -221,7 +161,6 @@
:starW="`calc(19.99% - 4px)`"
:starH="`calc(100% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -235,42 +174,34 @@
<script>
import VideoItem from "../components/VideoItem";
-import { getCameraPlayList, showAllCameras } from "@/api/trackCamera";
+import { showAllCameras } from "@/api/trackCamera";
export default {
name: "Video",
components: {
- VideoItem,
+ VideoItem
+ },
+ computed: {
+ nextIndex() {
+ if (this.centerIndex == this.list2TakeTurn.length - 1) {
+ return 0;
+ }
+ return this.centerIndex + 1;
+ }
},
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,
+ allVideoNum: 5,
centerVideo: null,
- BackupVideo: null,
list2TakeTurn: [],
timer: null,
reqTimer: null,
- centerIndex: 0,
- showBackup: false,
+ centerIndex: 0
};
},
created() {
- this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndex
- ? Number(sessionStorage.activeIndex)
- : this.TreeDataPool.activeVideoIndex;
this.getActiveIndex();
this.TreeDataPool.readonly = true;
this.TreeDataPool.gbReadonly = true;
@@ -278,19 +209,9 @@
},
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;
+ this.setAllVideoNum(res.data.length);
res.data.forEach((info, i) => {
let camera = this.TreeDataPool.getCameraInfoById(info.id);
this.TreeDataPool.setVideoArr(i, camera, this);
@@ -311,40 +232,52 @@
},
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);
+ "TreeDataPool.videoArr"(value) {
this.getActiveIndex();
- },
- "VideoPhotoData.selectBlacks": function (value) {
- this.blackAngWhite();
- },
- "VideoPhotoData.selectWhites": function (value) {
- this.blackAngWhite();
},
"TreeDataPool.showTreeBox"(value) {
this.getRightWidth();
},
"TreeDataPool.selectedNodes.length"(value) {
+ this.getActiveIndex();
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);
+ this.setAllVideoNum(this.TreeDataPool.selectedNodes.length);
+ this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, this.TreeDataPool.selectedNode, this);
- if (camera.status >= 1) {
- this.list2TakeTurn.push(camera);
- }
- });
- },
+ // 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);
+ // }
+ // });
+
+ this.centerVideo = { ...this.TreeDataPool.selectedNode };
+ }
},
methods: {
+ setAllVideoNum(videoCount) {
+ if (videoCount <= 5) {
+ this.guid = 3;
+ this.allVideoNum = 5;
+ } else if (videoCount <= 7) {
+ this.guid = 4;
+ this.allVideoNum = 7;
+ } else if (videoCount <= 12) {
+ this.guid = 4;
+ this.allVideoNum = 12;
+ } else if (videoCount <= 16) {
+ this.guid = 5;
+ this.allVideoNum = 16;
+ } else {
+ this.guid = 5;
+ this.allVideoNum = 16;
+ }
+ },
isSame(arr1, arr2) {
let _arr1 = [];
arr1.forEach((item) => {
@@ -360,35 +293,21 @@
}
return true;
},
- centerPlay(typ) {
+ centerPlay() {
if (this.list2TakeTurn.length == 1) {
- this.centerVideo = this.list2TakeTurn[0];
+ this.centerVideo = { ...this.list2TakeTurn[0] };
return;
}
let that = this;
- // if () {
-
- // }
- if (typ == 'change') {
- this.showBackup = true;
- }
- that.centerVideo = that.list2TakeTurn[that.centerIndex];
+ 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.centerVideo = { ...that.list2TakeTurn[that.centerIndex] };
that.centerIndex++;
if (that.centerIndex == that.list2TakeTurn.length) {
that.centerIndex = 0;
@@ -413,143 +332,10 @@
if (newArr.length != 0 && !this.isSame(this.list2TakeTurn, newArr)) {
this.list2TakeTurn = [...newArr1];
this.centerIndex = 0;
- this.centerPlay('change');
+ this.centerPlay("change");
}
});
}, 2500);
- },
- initTrackWebsocket() {
- if (typeof WebSocket === "undefined") {
- alert("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔socket");
- } else {
- // 瀹炰緥鍖杝ocket
- 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) {
@@ -561,198 +347,27 @@
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
- ) {
+ if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
nullVideoIndex = i;
- } else {
- nullVideoIndex = "";
+ break;
}
}
- if (
- this.TreeDataPool.activeVideoIndex !== "" &&
- this.TreeDataPool.activeVideoIndex <
- this.TreeDataPool.videoArr.length - 1
- ) {
- return this.TreeDataPool.activeVideoIndex;
+ if (nullVideoIndex === "") {
+ this.TreeDataPool.activeVideoIndex = this.TreeDataPool.videoArr.length - 1;
} else {
- if (nullVideoIndex === "") {
- this.TreeDataPool.activeVideoIndex =
- this.TreeDataPool.videoArr.length - 1;
- } else {
- this.TreeDataPool.activeVideoIndex = nullVideoIndex;
- }
+ 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>
--
Gitblit v1.8.0