朔黄视频检索详情调整

hanbaoshan

2021-01-25 16a8e97d34dd90cf54f0607fcb9a3a27c12db319

朔黄视频检索详情调整

 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;

 src/assets/css/overried.scss

@@ -1,11 +1,11 @@
// 覆盖element-ui原生样式
.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;
@@ -92,15 +99,16 @@
}

.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{
@@ -108,7 +116,7 @@
  }
  .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;
}


 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,

 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>


 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">
@@ -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;

 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>
@@ -180,6 +191,7 @@
      guid: 1,
      labelDialogVisible: false,
      curVideo: {},
      isUnusual: 0,
      videoArrs: [],
      relativeVideos: [],
      labelCheckedList: [],
@@ -187,9 +199,20 @@
      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) {
        this.getVideos(newVal)
@@ -207,17 +230,15 @@
      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

      })
    },
@@ -259,6 +280,11 @@
      this.labelDialogVisible = false;
    },
    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,20 +295,27 @@

      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)
        }
@@ -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;
      }
    }
  }
}