朔黄视频检索详情调整

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{
.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;
}


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

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