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/components/VideoItem.vue | 142 +++++++++++++++++++++++++++++++++--------------
1 files changed, 99 insertions(+), 43 deletions(-)
diff --git a/src/pages/changchunTrack/components/VideoItem.vue b/src/pages/changchunTrack/components/VideoItem.vue
index c6b9893..34df410 100644
--- a/src/pages/changchunTrack/components/VideoItem.vue
+++ b/src/pages/changchunTrack/components/VideoItem.vue
@@ -6,10 +6,7 @@
@mouseenter.stop.prevent="videoMouseEnter($event)"
@mouseleave="videoMouseLeave($event)"
>
- <div
- class="video-box-top"
- v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null"
- >
+ <div class="video-box-top" v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null">
<b>{{ videoItem.name }}</b>
<span @click="deleteVideo(videoIndex)">脳</span>
</div>
@@ -35,23 +32,34 @@
:isRunning="videoItem.isRunning"
:isGb="videoItem.cameraType === 1"
:showArea="showArea"
- :hasPoster="hasPoster"
- v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName==='camera'"
+ v-if="!quietSwitch && videoItem !== '' && videoItem !== undefined && videoItem !== null"
></camera-player>
-
- <video
- v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName==='dataStack'"
- :src="videoItem.rtsp"
- autoplay="autoplay"
- poster="/images/cameraVideo/video-poster.png"
- controls
- >鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆�</video>
+ <camera-player
+ :cameraName="qsVideoItem0.name"
+ :cameraID="qsVideoItem0.id"
+ :rtspUrl="qsVideoItem0.rtsp"
+ :isRunning="qsVideoItem0.isRunning"
+ :isGb="qsVideoItem0.cameraType === 1"
+ v-show="quietSwitch && workPlayer === 0"
+ ref="qsPlayer0"
+ v-if="qsVideoItem0 !== '' && qsVideoItem0 !== undefined && qsVideoItem0 !== null"
+ ></camera-player>
+ <camera-player
+ :cameraName="qsVideoItem1.name"
+ :cameraID="qsVideoItem1.id"
+ :rtspUrl="qsVideoItem1.rtsp"
+ :isRunning="qsVideoItem1.isRunning"
+ :isGb="qsVideoItem1.cameraType === 1"
+ v-show="quietSwitch && workPlayer === 1"
+ ref="qsPlayer1"
+ v-if="qsVideoItem1 !== '' && qsVideoItem1 !== undefined && qsVideoItem1 !== null"
+ ></camera-player>
</div>
</div>
</template>
<script>
-import { ptzControl } from "@/api/camera"
+import { ptzControl } from "@/api/camera";
import CameraPlayer from "@/components/player";
@@ -67,42 +75,92 @@
videoIndex: null,
starW: {
type: String,
- default: ''
+ default: ""
},
- starH:{
+ starH: {
type: String,
- default: ''
+ default: ""
},
videoItem: {
type: [Object, String],
default: null
},
- showArea: Boolean,
- hasPoster: Boolean,
+ showArea: {
+ type: Boolean,
+ default: false
+ },
+ quietSwitch: {
+ type: Boolean,
+ default: false
+ }
},
data() {
return {
- timer: '',
+ timer: "",
mouseDown: false,
- videoDataItem: null
- }
+ workPlayer: -1,
+ qsVideoItem0: null,
+ qsVideoItem1: null,
+ checkStatusTimer: 0
+ };
},
computed: {
vWidth() {
- if (this.starW!=0) {
- return this.starW
-
+ if (this.starW != 0) {
+ return this.starW;
}
let per = (1 / this.videoGuid) * 100 + "%";
return `calc(${per} - 4px)`;
},
-
+
vHeight() {
- if (this.starH!=0) {
- return this.starH
+ if (this.starH != 0) {
+ return this.starH;
}
let per = (1 / this.videoGuid) * 100 + "%";
return `calc(${per} - 4px)`;
+ }
+ },
+ watch: {
+ videoItem: function(newVal, oldVal) {
+ if (!this.quietSwitch) {
+ return;
+ }
+
+ console.log("new rtsp:", newVal);
+ console.log("this.workPlayer:", this.workPlayer);
+ // 棣栨
+ if (this.workPlayer < 0) {
+ this.workPlayer = 0;
+ this.qsVideoItem0 = newVal;
+ return;
+ }
+
+ let _this = this;
+ clearInterval(_this.checkStatusTimer);
+
+ if (_this.workPlayer == 0) {
+ _this.qsVideoItem1 = newVal;
+ _this.checkStatusTimer = setInterval(() => {
+ // console.log(_this.$refs.qsPlayer1.wfs.playerStatus);
+ if (_this.$refs.qsPlayer1.wfs.playerStatus == 1) {
+ _this.workPlayer = 1;
+ _this.qsVideoItem0 = null;
+ clearInterval(_this.checkStatusTimer);
+ }
+ }, 1000);
+ }
+
+ if (_this.workPlayer == 1) {
+ _this.qsVideoItem0 = newVal;
+ _this.checkStatusTimer = setInterval(() => {
+ if (_this.$refs.qsPlayer0.wfs.playerStatus == 1) {
+ _this.workPlayer = 0;
+ _this.qsVideoItem1 = null;
+ clearInterval(_this.checkStatusTimer);
+ }
+ }, 1000);
+ }
}
},
methods: {
@@ -113,42 +171,40 @@
// 褰撳墠鍙敮鎸佸浗鏍囨憚鍍忔満
// console.log(type, 'ptCtrl')
if (this.videoItem.cameraType != 1) {
- return
+ return;
}
this.mouseDown = true;
let params = {
cameraId: this.videoItem.id,
cameraType: this.videoItem.cameraType,
PTZType: type
- }
- ptzControl(params).then(rsp => {
+ };
+ ptzControl(params).then((rsp) => {
// console.log(rsp)
- })
- let that = this
+ });
+ let that = this;
this.timer = setTimeout(() => {
- that.ptStop()
- }, 5000)
+ that.ptStop();
+ }, 5000);
},
ptStop() {
// 褰撳墠鍙敮鎸佸浗鏍囨憚鍍忔満
if (this.videoItem.cameraType != 1) {
- return
+ return;
}
let params = {
cameraId: this.videoItem.id,
cameraType: this.videoItem.cameraType,
PTZType: "stop"
- }
+ };
if (this.mouseDown) {
- this.mouseDown = false
- ptzControl(params).then(rsp => {
+ this.mouseDown = false;
+ ptzControl(params).then((rsp) => {
// console.log(rsp)
- })
+ });
}
},
deleteVideo(index) {
- let video = this.TreeDataPool.videoArr;
- video[index].isPlaying = false;
this.TreeDataPool.setVideoArr(index, undefined, this);
},
videoMouseEnter(e) {
--
Gitblit v1.8.0