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 | 152 ++++++++++++++++++++++++++++++-------------------- 1 files changed, 91 insertions(+), 61 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue index 90ab683..70c1652 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue @@ -17,7 +17,7 @@ v-for="(item, index) in popDownArr" :key="index" :command="item" - >{{ item.Camera }}</el-dropdown-item> + >{{ item.CameraPosition }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> @@ -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> @@ -97,7 +97,7 @@ <!-- --> <template v-if="index <= videoArrs.length - 1"> <div class="video-box-top"> - <b>{{ videoArrs[index].Camera }}</b> + <b>{{ videoArrs[index].CameraPosition }}</b> </div> <div :class="{ @@ -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, @@ -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) { @@ -517,24 +526,31 @@ }, handleCommand(cmd) { let _this = this; + _this.curVideo = cmd; + _this.curCamera = _this.curVideo.CameraPosition; - getCarVideos({ - TrainNumber: cmd.TrainNumber, - CarNumber: cmd.CarNumber, - Driver1: cmd.Driver1, - }).then((res) => { - _this.allCurVideos = res.data; - _this.curCamera = cmd.Camera; - _this.curRoomVideos = _this.allCurVideos.filter((item) => { - return item.Camera == cmd.Camera; - }); - _this.curVideo = _this.curRoomVideos.find((item) => { - return item.ID == cmd.ID; - }); - _this.$nextTick(() => { - _this.$refs[`player_${_this.curVideo.ID}`][0].init(); - }); + _this.$nextTick(() => { + _this.$refs[`player_${_this.curVideo.id}`][0].init(); }); + // let _this = this; + // console.log(cmd) + // getCarVideos({ + // TrainNumber: cmd.TrainNumber, + // CarNumber: cmd.CarNumber, + // Driver1: cmd.Driver1, + // }).then((res) => { + // _this.allCurVideos = res.data; + // _this.curCamera = cmd.CameraPosition; + // _this.curRoomVideos = _this.allCurVideos.filter((item) => { + // return item.CameraPosition == cmd.CameraPosition; + // }); + // _this.curVideo = _this.curRoomVideos.find((item) => { + // return item.ID == cmd.ID; + // }); + // _this.$nextTick(() => { + // _this.$refs[`player_${_this.curVideo.ID}`][0].init(); + // }); + // }); }, pad0(val) { @@ -553,10 +569,16 @@ CarNumber: v.CarNumber, Driver1: v.Driver1, }).then((res) => { + 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); @@ -564,21 +586,22 @@ _this.labelMarks.push(item); } }); + if (_this.guid == 1) { _this.maxVideoTime = _this.curVideo.VideoTime; } _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.Camera == "鍙告満瀹�"; + 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[0], - sec = +arr[1]; + let min = +arr[1], sec = +arr[2]; _this.maxSecond = min * 60 + sec; }); }); @@ -586,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].Camera; + _this.curCamera = _this.popDownArr[0].CameraPosition; } }); + _this.popDownArr }, renderLabelOpts() { let _this = this; @@ -603,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); @@ -618,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) { @@ -628,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(() => { @@ -654,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) { @@ -665,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) => { @@ -700,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; @@ -709,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) { @@ -759,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); }, }, }; @@ -876,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%); @@ -886,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