From 9bdcb80343a2ead489c48e54014846ed23fa366b Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期三, 23 六月 2021 11:44:28 +0800 Subject: [PATCH] README --- src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 115 ++++++++++++++++++++++++++++++++------------------------- 1 files changed, 65 insertions(+), 50 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue index a8a282d..70c1652 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue @@ -52,10 +52,10 @@ <div class="v-name-block"> <div class="video-name" - :class="{ current: curVideo.ID == video.ID }" + :class="{ current: curVideo.id == video.id }" @click="checkVideo(video, index)" v-for="(video, index) in curRoomVideos" - :key="video.ID" + :key="video.id" > <i class="el-icon-film"></i> <span>{{ video.VideoDate }}</span> @@ -76,9 +76,9 @@ @pause="isStop = true" @play="isStop = false" @timeupdate="timeUpdate" - :source="curVideo.VideoPath" + :source="curVideo.VideoPath | fixPath" :markers="curVideo.marks" - :ref="`player_${curVideo.ID}`" + :ref="`player_${curVideo.id}`" /> </div> </div> @@ -106,11 +106,11 @@ > <ali-player @timeupdate="timeUpdate(e, index)" - :source="videoArrs[index].VideoPath" + :source="videoArrs[index].VideoPath | fixPath" :markers="videoArrs[index].marks" @pause="isStop = true" @play="isStop = false" - :ref="`player_${videoArrs[index].ID}`" + :ref="`player_${videoArrs[index].id}`" /> </div> </template> @@ -329,6 +329,15 @@ type: Object, }, }, + filters: { + fixPath(str) { + if (!str || str == undefined) { + return "" + } + + return str.replace("/opt/vasystem", "") + } + }, data() { return { guid: 1, @@ -387,7 +396,7 @@ this.renderLabelOpts(); this.setGuid(1); this.getCurVideos(this.videoDetails); - // this.getRelatedVideos(this.videoDetails); + this.getRelatedVideos(this.videoDetails); }, destroyed() { this.videoArrs.length = 0; @@ -422,23 +431,23 @@ playAll() { this.showPlayBtn = false; if (this.guid == 1) { - this.$refs[`player_${this.curVideo.ID}`][0].play(); + this.$refs[`player_${this.curVideo.id}`][0].play(); this.maxDuration = this.$refs[ - `player_${this.curVideo.ID}` + `player_${this.curVideo.id}` ][0].getDuration(); } else { this.videoArrs.forEach((v) => { - this.$refs[`player_${v.ID}`][0].play(); + this.$refs[`player_${v.id}`][0].play(); }); } }, pauseAll() { this.showPlayBtn = true; if (this.guid == 1) { - this.$refs[`player_${this.curVideo.ID}`][0].pause(); + this.$refs[`player_${this.curVideo.id}`][0].pause(); } else { this.videoArrs.forEach((v) => { - this.$refs[`player_${v.ID}`][0].pause(); + this.$refs[`player_${v.id}`][0].pause(); }); } }, @@ -450,8 +459,8 @@ this.showPlayBtn = false; let that = this; if (this.guid == 1) { - this.$refs[`player_${this.curVideo.ID}`][0].pause(); - this.$refs[`player_${this.curVideo.ID}`][0].seek(val); + this.$refs[`player_${this.curVideo.id}`][0].pause(); + this.$refs[`player_${this.curVideo.id}`][0].seek(val); // this.$refs[`player_${this.curVideo.ID}`][0].play(); setTimeout(() => { let curT = that.$refs[ @@ -460,10 +469,10 @@ }, 600); } else { this.videoArrs.forEach((v, i) => { - this.$refs[`player_${v.ID}`][0].seek(val); + this.$refs[`player_${v.id}`][0].seek(val); // this.$refs[`player_${v.ID}`][0].play(); if (i == 0) { - let curT = this.$refs[`player_${v.ID}`][0].getCurrentTime(); + let curT = this.$refs[`player_${v.id}`][0].getCurrentTime(); } }); } @@ -480,11 +489,11 @@ let curT; if (this.guid == 1) { curT = Math.floor( - this.$refs[`player_${this.curVideo.ID}`][0].getCurrentTime() + this.$refs[`player_${this.curVideo.id}`][0].getCurrentTime() ); } else { curT = Math.floor( - this.$refs[`player_${this.videoArrs[index].ID}`][0].getCurrentTime() + this.$refs[`player_${this.videoArrs[index].id}`][0].getCurrentTime() ); } if (curT <= this.curTime) { @@ -518,9 +527,10 @@ handleCommand(cmd) { let _this = this; _this.curVideo = cmd; + _this.curCamera = _this.curVideo.CameraPosition; _this.$nextTick(() => { - _this.$refs[`player_${_this.curVideo.ID}`][0].init(); + _this.$refs[`player_${_this.curVideo.id}`][0].init(); }); // let _this = this; // console.log(cmd) @@ -559,19 +569,16 @@ CarNumber: v.CarNumber, Driver1: v.Driver1, }).then((res) => { - // 濉厖鍗曠獥鍙g殑涓嬫媺鑿滃崟 - res.data.forEach((item) => { - _this.popDownArr.push(item); - }); - if (_this.popDownArr.length) { - _this.curCamera = _this.popDownArr[0].CameraPosition; - } - + res.data.forEach((item) => { item.marks = _this.mergeMarks(item); }); - _this.curVideo = res.data.find((item) => item.ID == v.ID); + _this.curVideo = res.data.find((item) => item.id == v.id); + + // 璁剧疆涓嬫媺鑿滃崟閫変腑椤� + _this.curCamera = _this.curVideo.CameraPosition; + _this.curVideo.marks.forEach((item) => { if (item.type == 0) { _this.eventMarks.push(item); @@ -586,12 +593,13 @@ _this.videoArrs = res.data.filter((item) => v.GroupID == item.GroupID); _this.allCurVideos = res.data; + console.log(_this.allCurVideos); _this.curRoomVideos = _this.allCurVideos.filter((item) => { - return item.CameraPosition.indexOf("鍙告満瀹�") >= 0; + return item.IsCab == "0"; }); _this.$nextTick(() => { - _this.$refs[`player_${_this.curVideo.ID}`][0].init(); + _this.$refs[`player_${_this.curVideo.id}`][0].init(); let arr = _this.maxVideoTime.split(":"); let min = +arr[1], sec = +arr[2]; _this.maxSecond = min * 60 + sec; @@ -601,15 +609,15 @@ getRelatedVideos(video) { let _this = this; getRelatedVideoInfo({ GroupID: video.GroupID }).then((res) => { - let arr = []; - let map = {}; res.data.forEach((item) => { _this.popDownArr.push(item); }); + // _this.popDownArr = res.data if (_this.popDownArr.length) { _this.curCamera = _this.popDownArr[0].CameraPosition; } }); + _this.popDownArr }, renderLabelOpts() { let _this = this; @@ -618,13 +626,22 @@ }); }, refreshCurVideoLabel(video) { + let _this = this; + _this.popDownArr = [] getRelatedVideoInfo({ GroupID: video.GroupID }).then((res) => { - res.data.forEach((d) => { - if (d.ID === video.ID) { - video.LableLst = d.LableLst; + res.data.forEach((item) => { + _this.popDownArr.push(item); + if (item.ID === video.ID) { + video.LableLst = item.LableLst; } }); + // res.data.forEach((d) => { + // if (item.ID === video.ID) { + // video.LableLst = item.LableLst; + // } + // }); }); + _this.popDownArr }, checkVideo(video, index) { this.refreshCurVideoLabel(video); @@ -633,7 +650,7 @@ (item) => video.GroupID == item.GroupID ); this.$nextTick(() => { - this.$refs[`player_${this.curVideo.ID}`][0].init(); + this.$refs[`player_${this.curVideo.id}`][0].init(); }); }, setGuid(guid) { @@ -643,8 +660,8 @@ this.showLocChoise = true; } else { this.showLocChoise = false; - this.$refs[`player_${this.curVideo.ID}`][0].pause(); - this.$refs[`player_${this.curVideo.ID}`][0].seek(0); + this.$refs[`player_${this.curVideo.id}`][0].pause(); + this.$refs[`player_${this.curVideo.id}`][0].seek(0); } this.videoWrapArr = Math.pow(guid, 2); this.$nextTick(() => { @@ -669,7 +686,7 @@ submitLabelChecked() { let _this = this; let tempArr = []; - tempArr = this.videoArrs.map((video) => video.ID); + tempArr = this.videoArrs.map((video) => video.id); let desc = this.labelCheckedList.map((lableId) => { for (let label of this.labelOptions) { if (label.ID == lableId) { @@ -680,11 +697,10 @@ let query = { ID: this.selectedLabelId, - ParentID: tempArr.join(","), - ParentUniqID: this.curVideo.GroupID + "", + VideoIds: tempArr.join(","), Time: Math.round(this.setLabelTime) + "", Codes: this.labelCheckedList.join(","), - Desc: desc.join("锛�"), + Desc: desc.join(","), }; editLabel(query).then((rsp) => { @@ -715,7 +731,7 @@ this.selectedLabelId = ""; this.labelDialogVisible = true; // 淇濆瓨鐐瑰嚮鏍囨敞鐨勬椂闂� - this.setLabelTime = this.$refs[`player_${video.ID}`][0].getCurrentTime(); + this.setLabelTime = this.$refs[`player_${video.id}`][0].getCurrentTime(); }, editCurLabel(mark) { this.selectedLabelId = mark.ID; @@ -724,11 +740,10 @@ }, removeCurLabel(mark) { let _this = this; + debugger let obj = { - Desc: mark.Desc, - ParentUniqID: mark.ParentUniqID, - Time: mark.Time, - ParentID: mark.ParentID + ID: mark.ID, + VideoIds: mark.VideoIds }; delLabel(obj).then((rsp) => { if (rsp && rsp.success) { @@ -774,7 +789,7 @@ }, setMarks(video) { let marks = this.mergeMarks(video); - this.$refs[`player_${video.ID}`][0].setProgressMarkers(marks); + this.$refs[`player_${video.id}`][0].setProgressMarkers(marks); }, }, }; @@ -891,7 +906,7 @@ height: 8px; width: 6px; z-index: 1; - background-color: lightcoral; + background-color:yellowgreen ; cursor: pointer; -webkit-transform: translateX(-50%); transform: translateX(-50%); @@ -901,7 +916,7 @@ height: 8px; width: 6px; z-index: 1; - background-color: yellowgreen; + background-color: lightcoral; cursor: pointer; -webkit-transform: translateX(-50%); transform: translateX(-50%); -- Gitblit v1.8.0