From 17052a90ea9b3d23cab8325eee674aeeefa19e39 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期一, 08 二月 2021 13:55:05 +0800
Subject: [PATCH] 修复事件推送的多选菜单.
---
src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 173 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 132 insertions(+), 41 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
index 623a094..5cba441 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
@@ -58,6 +58,7 @@
:ref="`gridVideoItem_${index}`"
v-for="(item,index) in videoWrapArr"
:key="index"
+ @click="checkCurVideo(index)"
>
<template v-if="index<=videoArrs.length-1">
<div :class="{'currentPlayer':curVideo.ID==videoArrs[index].ID}">
@@ -92,17 +93,20 @@
<p class="title-partment">蹇�熸爣娉�</p>
<div class="flex-box" style="height:28px;">
<label style="padding-right:10px;">闅愭偅闂:</label>
- <el-radio v-model="curVideo.IsUnusual" label="0">鏃犲紓甯�</el-radio>
- <el-radio v-model="curVideo.IsUnusual" label="1">鏈夊紓甯�</el-radio>
+ <el-radio-group v-model="isUnusual">
+ <el-radio :label="0">鏃犲紓甯�</el-radio>
+ <el-radio :label="1">鏈夊紓甯�</el-radio>
+ </el-radio-group>
+
<el-button
icon="el-icon-plus"
size="mini"
- v-show="curVideo.IsUnusual==1"
+ v-show="isUnusual==1"
type="primary"
@click="addLabel(curVideo)"
>娣诲姞鏍囨敞</el-button>
</div>
- <div class="flex-box">
+ <div class="flex-box fixed-height-box">
<label>鏍囨敞淇℃伅:</label>
<div class="mark-list">
<div class="mark" v-for="mark in curVideo.LableLst" :key="mark.ID">
@@ -147,7 +151,15 @@
@close="labelDialogVisible=false"
:append-to-body="false"
>
+ <div class="label-radio">
+ <p class="label">閫夋嫨灏嗚鏍囨敞鐨勮棰�:</p>
+ <el-radio-group v-model="isCheckAllVideo">
+ <el-radio :label="1">鏍囨敞鍦ㄥ叏閮ㄤ綅缃殑瑙嗛娈�</el-radio>
+ <el-radio :label="0">浠呮爣娉ㄩ�変腑鐨勮棰戞</el-radio>
+ </el-radio-group>
+ </div>
<div class="label-check">
+ <p class="label">闅愭偅闂:</p>
<el-checkbox-group v-model="labelCheckedList">
<el-checkbox v-for="item in labelOptions" :key="item.ID" :label="item.ID">{{item.Name}}</el-checkbox>
</el-checkbox-group>
@@ -175,11 +187,12 @@
type: Object
}
},
- data() {
+ data () {
return {
guid: 1,
labelDialogVisible: false,
curVideo: {},
+ isUnusual: 0,
videoArrs: [],
relativeVideos: [],
labelCheckedList: [],
@@ -187,54 +200,84 @@
labelOptions: [],
selectedLabelId: '',
setLabelTime: 0,
+ isCheckAllVideo: 1,
}
},
watch: {
+ 'curVideo.LableLst': {
+ handler (n, o) {
+ if (n.length > 0) {
+ this.isUnusual = 1
+ } else {
+ this.isUnusual = 0
+ }
+ },
+ deep: true
+ },
videoDetails: {
- handler(newVal, oldVal) {
+ handler (newVal, oldVal) {
this.getVideos(newVal)
},
deep: true
},
},
- mounted() {
+ mounted () {
+ console.log('analyze mount')
this.renderLabelOpts();
this.setGuid(1);
this.getVideos(this.videoDetails);
},
methods: {
- getVideos(video) {
+ checkCurVideo (index) {
+ if (this.relativeVideos[index]) {
+ this.curVideo = this.relativeVideos[index];
+ this.refreshCurVideoLabel(this.curVideo);
+ }
+ },
+ getVideos (video) {
let _this = this;
getRelatedVideoInfo({ UniqeID: video.UniqeID }).then(res => {
console.log(res)
- _this.curVideo = res.data[0];
- _this.videoArrs = res.data;
- // _this.videoWrapArr.push(res.data[0]);
- // _this.setGuid(1)
-
res.data.forEach(element => {
element.marks = _this.mergeMarks(element)
console.log(element.marks)
});
-
+ _this.curVideo = res.data[0];
+ _this.videoArrs = res.data;
_this.relativeVideos = res.data;
+ this.$nextTick(() => {
+ _this.$refs[`player_${_this.curVideo.ID}`][0].init();
+ })
})
},
- renderLabelOpts() {
+ renderLabelOpts () {
let _this = this;
getLabelMap().then(res => {
_this.labelOptions = res.data
})
},
- checkVideo(video, index) {
+ refreshCurVideoLabel (video) {
+ getRelatedVideoInfo({ UniqeID: video.UniqeID }).then(res => {
+ res.data.forEach(d => {
+ if(d.ID === video.ID){
+ video.LableLst = d.LableLst
+ }
+ // let someVideo = _this.videoArrs.find(video => video.ID === d.ID);
+ // someVideo.LableLst = d.LableLst
+ })
+ })
+ },
+ checkVideo (video, index) {
+ this.refreshCurVideoLabel(video);
this.curVideo = video;
- if (index > 0 && this.guid == 1) {
- //this.videoWrapArr =
- }
+ this.$nextTick(() => {
+ this.$refs[`player_${this.curVideo.ID}`][0].init();
+ })
+
},
- setGuid(guid) {
+ setGuid (guid) {
let _this = this;
this.guid = guid;
// for(var i = 0; i < Math.pow(guid,2); i++){
@@ -245,20 +288,23 @@
// }
// }
this.videoWrapArr = Math.pow(guid, 2);
-
this.$nextTick(() => {
for (var i = 0; i < Math.pow(guid, 2); i++) {
this.$refs[`gridVideoItem_${i}`][0].style.width = this.$refs['playerWrap'].offsetWidth / guid + 'px';
this.$refs[`gridVideoItem_${i}`][0].style.height = this.$refs['playerWrap'].offsetHeight / guid + 'px';
-
}
})
},
- cancelLabelChecked() {
+ cancelLabelChecked () {
this.labelDialogVisible = false;
},
- submitLabelChecked() {
+ submitLabelChecked () {
+ let _this = this;
+ let tempArr = [];
+ if (this.isCheckAllVideo == 1) {
+ tempArr = this.videoArrs.map(video => video.ID)
+ }
let desc = this.labelCheckedList.map(lableId => {
for (let label of this.labelOptions) {
if (label.ID == lableId) {
@@ -269,26 +315,37 @@
let query = {
ID: this.selectedLabelId,
- ParentID: this.curVideo.ID + '',
+ ParentID: this.isCheckAllVideo ? tempArr.join(',') : this.curVideo.ID + '',
Time: Math.round(this.setLabelTime) + '',
Codes: this.labelCheckedList.join(','),
- Desc: desc.join(',')
+ Desc: desc.join('锛�')
};
-
editLabel(query).then(rsp => {
if (rsp && rsp.success) {
- this.labelDialogVisible = false;
- this.curVideo.LableLst = rsp.data;
- this.$message.success("娣诲姞鎴愬姛")
+ _this.labelDialogVisible = false;
+ this.$set(_this.curVideo,'LableLst',[]);
+ //_this.curVideo.LableLst = [];
+ rsp.data.forEach(label=>{
+ if(label.ParentID == _this.curVideo.ID){
+ _this.curVideo.LableLst.push(label)
+ }
+ })
+ // getRelatedVideoInfo({ UniqeID: _this.videoDetails.UniqeID }).then(res => {
+ // res.data.forEach(d => {
+ // let someVideo = _this.videoArrs.find(video => video.ID === d.ID);
+ // someVideo.LableLst = d.LableLst
+ // })
+ // })
+ this.$message.success("娣诲姞鎴愬姛")
// 鏍囨敞
- this.setMarks(this.curVideo)
+ _this.setMarks(this.curVideo)
} else {
this.$message.warning(rsp.msg)
}
})
},
- addLabel(video) {
+ addLabel (video) {
this.labelCheckedList = [];
this.selectedLabelId = '';
this.labelDialogVisible = true;
@@ -296,24 +353,26 @@
// 淇濆瓨鐐瑰嚮鏍囨敞鐨勬椂闂�
this.setLabelTime = this.$refs[`player_${video.ID}`][0].getCurrentTime();
},
- editCurLabel(mark) {
+ editCurLabel (mark) {
this.selectedLabelId = mark.ID;
- this.labelCheckedList = mark.Codes.split(",");
+ this.labelCheckedList = mark.Codes.split(" ,");
this.labelDialogVisible = true;
},
- removeCurLabel(mark) {
+ removeCurLabel (mark) {
+ let _this = this;
delLabel({ ID: mark.ID, ParentID: this.curVideo.ID }).then(rsp => {
if (rsp && rsp.success) {
- this.curVideo.LableLst = rsp.data;
+ _this.curVideo.LableLst = rsp.data;
this.$message.success("鍒犻櫎鎴愬姛")
// 鏍囨敞
- this.setMarks(this.curVideo)
+ debugger
+ _this.setMarks(_this.curVideo)
} else {
this.$message.warning(rsp.msg)
}
})
},
- mergeMarks(videoInfo) {
+ mergeMarks (videoInfo) {
let marks = videoInfo.HotPoint.concat(videoInfo.LableLst).map(lable => {
return {
offset: lable.Time,
@@ -323,7 +382,7 @@
return marks;
},
- setMarks(video) {
+ setMarks (video) {
let marks = this.mergeMarks(video);
this.$refs[`player_${video.ID}`][0].setProgressMarkers(marks);
}
@@ -376,8 +435,19 @@
background: black;
border: 1px solid #fff;
box-sizing: border-box;
+ & > div {
+ height: 100%;
+ & > div {
+ height: 100%;
+ }
+ }
.currentPlayer {
border: 2px solid aqua;
+ height: 100%;
+ box-sizing: border-box;
+ & > div {
+ height: 100%;
+ }
}
}
}
@@ -401,7 +471,7 @@
span {
padding-right: 5px;
}
- i[class^="el-icon"] {
+ i[class^='el-icon'] {
padding: 3px;
}
}
@@ -411,6 +481,10 @@
color: #888;
}
}
+ }
+ .fixed-height-box {
+ height: 200px;
+ overflow-y: auto;
}
}
.bot-right {
@@ -425,8 +499,19 @@
.label-dialog {
.el-dialog {
- width: 700px;
+ width: 700px !important;
+ height: 670px !important;
+ .el-dialog__header {
+ height: 20px;
+ }
+ p.label {
+ line-height: 36px;
+ }
+ .label-radio {
+ padding: 20px;
+ }
.label-check {
+ padding: 20px;
min-height: 400px;
margin-bottom: 20px;
.el-checkbox-group {
@@ -436,9 +521,15 @@
width: 50%;
text-align: left;
margin: 0;
+ margin-bottom: 4px;
}
}
}
+ .btns {
+ display: flex;
+ justify-content: center;
+ padding: 20px;
+ }
}
}
}
--
Gitblit v1.8.0