From 16a8e97d34dd90cf54f0607fcb9a3a27c12db319 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期一, 25 一月 2021 10:32:40 +0800
Subject: [PATCH] 朔黄视频检索详情调整
---
src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 129 ++++++++++++++++++++++++++++++++----------
1 files changed, 97 insertions(+), 32 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
index 623a094..33cca4f 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
@@ -92,17 +92,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 +150,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 +186,12 @@
type: Object
}
},
- data() {
+ data () {
return {
guid: 1,
labelDialogVisible: false,
curVideo: {},
+ isUnusual: 0,
videoArrs: [],
relativeVideos: [],
labelCheckedList: [],
@@ -187,54 +199,63 @@
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 () {
this.renderLabelOpts();
this.setGuid(1);
this.getVideos(this.videoDetails);
},
methods: {
- getVideos(video) {
+ 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;
+ debugger
})
},
- renderLabelOpts() {
+ renderLabelOpts () {
let _this = this;
getLabelMap().then(res => {
_this.labelOptions = res.data
})
},
- checkVideo(video, index) {
+ checkVideo (video, index) {
this.curVideo = video;
if (index > 0 && this.guid == 1) {
//this.videoWrapArr =
}
},
- setGuid(guid) {
+ setGuid (guid) {
let _this = this;
this.guid = guid;
// for(var i = 0; i < Math.pow(guid,2); i++){
@@ -255,10 +276,15 @@
})
},
- 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) {
@@ -266,29 +292,36 @@
}
}
})
-
+
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(',')
};
-
editLabel(query).then(rsp => {
if (rsp && rsp.success) {
- this.labelDialogVisible = false;
- this.curVideo.LableLst = rsp.data;
+ _this.labelDialogVisible = false;
+
+ _this.videoArrs.forEach(video=>{
+ video.LableLst = []
+ });
+ rsp.data.forEach(label=>{
+ let someVideo = _this.videoArrs.find(video=>video.ID === label.ParentID);
+ someVideo.LableLst.push(label);
+ })
+ _this.curVideo.LableLst = rsp.data;
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,12 +329,12 @@
// 淇濆瓨鐐瑰嚮鏍囨敞鐨勬椂闂�
this.setLabelTime = this.$refs[`player_${video.ID}`][0].getCurrentTime();
},
- editCurLabel(mark) {
+ editCurLabel (mark) {
this.selectedLabelId = mark.ID;
this.labelCheckedList = mark.Codes.split(",");
this.labelDialogVisible = true;
},
- removeCurLabel(mark) {
+ removeCurLabel (mark) {
delLabel({ ID: mark.ID, ParentID: this.curVideo.ID }).then(rsp => {
if (rsp && rsp.success) {
this.curVideo.LableLst = rsp.data;
@@ -313,7 +346,7 @@
}
})
},
- mergeMarks(videoInfo) {
+ mergeMarks (videoInfo) {
let marks = videoInfo.HotPoint.concat(videoInfo.LableLst).map(lable => {
return {
offset: lable.Time,
@@ -323,7 +356,7 @@
return marks;
},
- setMarks(video) {
+ setMarks (video) {
let marks = this.mergeMarks(video);
this.$refs[`player_${video.ID}`][0].setProgressMarkers(marks);
}
@@ -376,8 +409,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 +445,7 @@
span {
padding-right: 5px;
}
- i[class^="el-icon"] {
+ i[class^='el-icon'] {
padding: 3px;
}
}
@@ -411,6 +455,10 @@
color: #888;
}
}
+ }
+ .fixed-height-box{
+ height: 200px;
+ overflow-y: auto;
}
}
.bot-right {
@@ -425,8 +473,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 +495,15 @@
width: 50%;
text-align: left;
margin: 0;
+ margin-bottom: 4px;
}
}
}
+ .btns {
+ display: flex;
+ justify-content: center;
+ padding: 20px;
+ }
}
}
}
--
Gitblit v1.8.0