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