From 16a8e97d34dd90cf54f0607fcb9a3a27c12db319 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期一, 25 一月 2021 10:32:40 +0800
Subject: [PATCH] 朔黄视频检索详情调整
---
public/index.html | 7 +
src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 9 +
src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue | 1
src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 58 ++++++-----
src/assets/css/overried.scss | 82 +++++++++-------
src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 129 +++++++++++++++++++------
6 files changed, 185 insertions(+), 101 deletions(-)
diff --git a/public/index.html b/public/index.html
index 41e80bc..e9f8271 100644
--- a/public/index.html
+++ b/public/index.html
@@ -408,6 +408,13 @@
visibility: hidden;
}
+ /* 鍨傜洿鏂瑰悜灞呬腑dialog妗� */
+ .el-dialog {
+ margin: 0 auto !important;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
.form-tip {
color: #999;
position: relative;
diff --git a/src/assets/css/overried.scss b/src/assets/css/overried.scss
index 120ed22..4c426d3 100644
--- a/src/assets/css/overried.scss
+++ b/src/assets/css/overried.scss
@@ -1,11 +1,11 @@
// 瑕嗙洊element-ui鍘熺敓鏍峰紡
-.el-dropdown-menu{
+.el-dropdown-menu {
li:hover {
- background: #F0F0F0 !important;
+ background: #f0f0f0 !important;
color: #222222 !important;
}
}
-.el-popper[x-placement^=bottom] {
+.el-popper[x-placement^='bottom'] {
margin-top: -5px;
}
@@ -17,17 +17,20 @@
}
.el-select-dropdown__item.selected {
- color: #3D68E1;
+ color: #3d68e1;
font-weight: 700;
}
-.el-select, .el-input, .is-focus, .el-input__inner {
- border-color: #3D68E1;
+.el-select,
+.el-input,
+.is-focus,
+.el-input__inner {
+ border-color: #3d68e1;
border-radius: 2px;
}
.el-input__inner:focus {
- border-color: #3D68E1;
+ border-color: #3d68e1;
outline: 0;
}
@@ -43,21 +46,25 @@
border-radius: 2px;
}
-.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
- background-color: #F0F0F0;
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+ background-color: #f0f0f0;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
- color: #3D68E1;
- background-color: #FFF;
+ color: #3d68e1;
+ background-color: #fff;
}
-.el-date-table td.end-date span, .el-date-table td.start-date span {
- background-color: #3D68E1;
+.el-date-table td.end-date span,
+.el-date-table td.start-date span {
+ background-color: #3d68e1;
}
-.el-date-table td.end-date span, .el-date-table td.start-date span {
- background-color: #3D68E1;
+.el-date-table td.end-date span,
+.el-date-table td.start-date span {
+ background-color: #3d68e1;
}
-.el-range-editor.is-active, .el-range-editor.is-active:hover {
- border-color: #3D68E1;
+.el-range-editor.is-active,
+.el-range-editor.is-active:hover {
+ border-color: #3d68e1;
}
.el-range-editor {
padding: 2px 10px;
@@ -67,12 +74,12 @@
width: 331px;
padding-bottom: 10px;
vertical-align: middle;
- background-color: #FFF;
+ background-color: #fff;
border-radius: 4px;
- border: 1px solid #EBEEF5;
+ border: 1px solid #ebeef5;
font-size: 18px;
- -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
- box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+ -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
text-align: left;
overflow: hidden;
-webkit-backface-visibility: hidden;
@@ -81,7 +88,7 @@
.el-message-box--center {
padding-bottom: 24px;
.el-message-box__message {
- font-size:13px;
+ font-size: 13px;
}
}
.el-message-box__content {
@@ -92,23 +99,24 @@
}
.el-table .descending .sort-caret.descending {
- border-top-color: #3D68E1;
+ border-top-color: #3d68e1;
}
.el-table .ascending .sort-caret.ascending {
- border-bottom-color: #3D68E1;
+ border-bottom-color: #3d68e1;
}
-.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
- background-color: #3D68E1;
- border-color: #3D68E1;
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+ background-color: #3d68e1;
+ border-color: #3d68e1;
}
-.el-message-box{
- .el-message-box__headerbtn{
+.el-message-box {
+ .el-message-box__headerbtn {
top: 10px;
}
- .el-message-box__btns{
+ .el-message-box__btns {
.el-button--primary {
- color: #FFFFFF;
+ color: #ffffff;
background-color: #f53d3d;
border-color: #f53d3d;
}
@@ -120,15 +128,15 @@
}
}
.el-button--primary:active {
- background: #3F6BE9 !important;
- border-color: #3F6BE9 !important;
- color: #FFFFFF;
+ background: #3f6be9 !important;
+ border-color: #3f6be9 !important;
+ color: #ffffff;
outline: none;
}
.el-button--danger:active {
- background: #F82323 !important;
- border-color: #F82323 !important;
- color: #FFFFFF;
+ background: #f82323 !important;
+ border-color: #f82323 !important;
+ color: #ffffff;
outline: none;
}
diff --git a/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue b/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue
index 41a9a11..d9705db 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue
@@ -25,6 +25,7 @@
config: {
id: null, //鎾斁鍣ㄧ殑ID
width: '100%',
+ height: '100%',
autoplay: false,
// skinLayout: false,
progressMarkers: false,
diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index e39e5bd..05e7537 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
@@ -41,7 +41,7 @@
</div>
<div class="val">{{$numberFormat(8846)}}</div>
<div class="trend">
- <line-chart :options="optionsOfWeekAnalyze" style="height:40px"></line-chart>
+ <line-chart :options="optionsOfWeekAnalyze" style="height:50px"></line-chart>
</div>
<div class="devide"></div>
<div class="detail">
@@ -352,6 +352,7 @@
left: 0,
right: 0,
bottom: 10,
+ //containLabel: true
},
tooltip: {
trigger: 'axis',
@@ -508,6 +509,7 @@
top: 0,
left: 0,
bottom: 10,
+ containLabel: true
},
tooltip: {
trigger: 'axis',
@@ -553,6 +555,7 @@
top: 0,
left: 0,
bottom: 10,
+ containLabel: true
},
tooltip: {
trigger: 'axis',
@@ -755,9 +758,7 @@
}
},
- mounted(){
- debugger
- }
+
}
</script>
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index 033f1e5..f1556b5 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -169,8 +169,8 @@
</div>
</div>
<div class="mark-info">
- <div class="abnormal" v-if="data.IsUnusual==='1'">
- <span v-for="(mark,index) in data.marks" :key="index">{{mark}}</span>
+ <div class="abnormal" v-if="data.LableLst&&data.LableLst.length">
+ <span v-for="(label,index) in data.LableLst" :key="index">{{label.Desc}}</span>
</div>
<div v-else>
<span>鏃犲紓甯�</span>
@@ -229,7 +229,6 @@
class="dialog-video"
:visible="videoDialogVisible"
@close="videoDialogVisible=false"
- :append-to-body="false"
>
<div slot="title" class="title">
<div class="center">
@@ -253,7 +252,7 @@
components: {
VideoAnalyze
},
- data() {
+ data () {
return {
CLIP: 'http://192.168.20.113/',
keyword: '',
@@ -269,7 +268,7 @@
pickerOptions: {
shortcuts: [{
text: '浠婂ぉ',
- onClick(picker) {
+ onClick (picker) {
const end = new Date();
const start = new Date();
start.setHours(0, 0, 0);
@@ -277,7 +276,7 @@
}
}, {
text: '鏄ㄥぉ',
- onClick(picker) {
+ onClick (picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24);
@@ -288,7 +287,7 @@
}
}, {
text: '杩戜笁澶�',
- onClick(picker) {
+ onClick (picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
@@ -296,7 +295,7 @@
}
}, {
text: '杩戜竴鍛�',
- onClick(picker) {
+ onClick (picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
@@ -330,30 +329,30 @@
},
watch: {
checkedConfigs: {
- handler(n, o) {
+ handler (n, o) {
this.filterSearchData()
},
deep: true
}
},
- mounted() {
+ mounted () {
this.init();
},
methods: {
- handleTabSizeChange(size) {
+ handleTabSizeChange (size) {
debugger
this.tabPageSize = size;
this.filterSearchData()
},
- handleTableSizeChange(size) {
+ handleTableSizeChange (size) {
this.tablePageSize = size;
this.filterSearchData()
},
- handleCurrentChange() {
+ handleCurrentChange () {
this.filterSearchData()
},
//浜岀骇鏌ヨ
- filterSearchData() {
+ filterSearchData () {
let _this = this;
let query = {
KeyWord: this.keyword,
@@ -387,7 +386,7 @@
})
},
//涓�绾ф煡璇�
- init() {
+ init () {
let _this = this;
let query = {
KeyWord: this.keyword,
@@ -443,7 +442,7 @@
})
},
- toggleFollow(data) {
+ toggleFollow (data) {
data.IsFollow = !data.IsFollow;
this.updataVideo(data);
if (data.IsFollow) {
@@ -453,26 +452,26 @@
});
}
},
- updataVideo(data) {
+ updataVideo (data) {
let _this = this;
updateVideoAnalyze(data).then(res => {
//浜岀骇鏌ヨ
});
},
- checkVideoDetail(data) {
+ checkVideoDetail (data) {
let _this = this;
_this.selectedVideo = data;
_this.videoDialogVisible = true;
},
- checkFollow() {
+ checkFollow () {
},
- checkType(type) {
+ checkType (type) {
this.showType = type;
this.filterSearchData()
},
- clearCheckedConfigs() {
+ clearCheckedConfigs () {
this.checkedConfigs.forEach(config => {
config.isShow = true;
config.data.forEach(d => {
@@ -482,7 +481,7 @@
this.checkedConfigs = [];
this.showAdvance = true;
},
- removeCheckedConfig(config) {
+ removeCheckedConfig (config) {
config.isShow = true;
if (config.IsAdvanced) {
this.showAdvance = true;
@@ -493,7 +492,7 @@
let index = this.checkedConfigs.findIndex(one => one.id == config.id);
this.checkedConfigs.splice(index, 1);
},
- checkOption(config, option) {
+ checkOption (config, option) {
if (option) {
option.isChecked = true;
}
@@ -510,20 +509,20 @@
},
- cancleMultCheck(config) {
+ cancleMultCheck (config) {
config.isMultCheck = false;
config.data.forEach(opt => {
opt.isChecked = false;
});
},
- handleSelect(key, keyPath) {
+ handleSelect (key, keyPath) {
},
- showMore(config) {
+ showMore (config) {
config.isShowMore = !config.isShowMore;
this.$refs[`options${config.id}`][0].style.height = config.isShowMore ? this.$refs[`options${config.id}`][0].scrollHeight + 'px' : this.fixedOneLineHeight + 'px';
},
- toggleMultCheck(config) {
+ toggleMultCheck (config) {
config.isMultCheck = !config.isMultCheck;
this.optionalConfigs.forEach(conf => {
if (conf.id == config.id) {
@@ -532,7 +531,7 @@
conf.isMultCheck = false;
})
},
- dataSearch() {
+ dataSearch () {
console.log(this.checkedConfigs);
this.$forceUpdate();
},
@@ -732,6 +731,7 @@
text-align: left;
border: 1px solid #dedede;
border-radius: 5px;
+ height: 350px;
.video-wrap {
background: aliceblue;
border-radius: 3px;
@@ -792,8 +792,10 @@
}
}
.dialog-video {
+ z-index: 2096 !important;
.el-dialog {
width: 1180px;
+ height: 918px;
}
.el-dialog__body {
background: #f5f5f5;
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