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