page: use aliplayer set progress markers. shuohuang

zhangzengfei

2021-01-21 1cc7750ae8f3fb5abb8d36636f0e9ebc05c61f7b

 src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue

@@ -237,161 +237,8 @@
            <span>播放视频</span>
          </div>
        </div>
        <div class="content">
          <div class="content-top">
            <div class="grid-check">
              <span
                :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
                @click="setGuid(1)"
              ></span>
              <span
                :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
                @click="setGuid(2)"
              ></span>
              <span
                :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
                @click="setGuid(3)"
              ></span>
            </div>
            <div class="video-area">
              <div class="info-list block">
                <p class="title-partment">相关视频</p>
                <!-- <div class="video-name" v-for="video in videoDetails.videoList" :key="video.id">
                  <i class="el-icon-film"></i>
                  <span>{{video.name}}</span>
                </div>-->
                <div
                  class="video-name"
                  :class="{'current':curVideo.ID==video.ID}"
                  @click="checkVideo(video,index)"
                  v-for="(video,index) in videoDetails.relativeVideos"
                  :key="video.ID"
                >
                  <i class="el-icon-film"></i>
                  <span>{{video.Event}}</span>
                </div>
              </div>
              <div class="players" ref="playerWrap">
                <template v-if="guid==1">
                  <div
                    class="video-item"
                    :ref="`gridVideoItem_${index}`"
                    v-for="(item,index) in videoWrapArr"
                    :key="index"
                  >
                    <div class="currentPlayer">
                      {{curVideo.ID}}
                      <img :src="CLIP+curVideo.VideoCover" style="width:100px" />
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div
                    class="video-item"
                    :ref="`gridVideoItem_${index}`"
                    v-for="(item,index) in videoWrapArr"
                    :key="index"
                  >
                    <template v-if="index<=videoArrs.length-1">
                      <div :class="{'currentPlayer':curVideo.ID==videoArrs[index].ID}">
                        {{videoArrs[index].ID}}
                        <img
                          :src="CLIP+videoArrs[index].VideoCover"
                          style="width:100px"
                        />
                      </div>
                    </template>
                  </div>
                </template>

                <!-- <div
                  class="video-item"
                  :class="{'active':item.ID==curVideo.ID}"
                  :ref="`gridVideoItem_${index}`"
                  v-for="(item,index) in videoWrapArr"
                  :key="index"
                >
                  
                </div>-->
              </div>
            </div>
          </div>
          <div class="content-bottom">
            <div class="bot-left block">
              <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-button
                  icon="el-icon-plus"
                  size="mini"
                  v-show="curVideo.IsUnusual==1"
                  type="primary"
                  @click="addLabel(curVideo)"
                >添加标注</el-button>
              </div>
              <div class="flex-box">
                <label>标注信息:</label>
                <div class="mark-list">
                  <div class="mark" v-for="mark in curVideo.LableLst" :key="mark.ID">
                    <div class="time" v-if="mark.length">
                      <span>{{mark[0].Time}}</span>
                      <i class="el-icon-edit" @click="editCurLabel(mark)"></i>
                      <i
                        class="el-icon-delete"
                        @click="removeCurLabel(mark[0].ParentID,mark[0].Time)"
                      ></i>
                    </div>
                    <div class="label-content">
                      <span
                        v-for="content in mark"
                        :key="content.ID"
                      >{{findLabelNameById(content.CodeID)}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bot-right block">
              <p class="title-partment">视频详情</p>
              <div class="base-info">
                <div>
                  <label>车号:</label>
                  <span>{{videoDetails.CarNumber}}</span>
                </div>
                <div>
                  <label>车次:</label>
                  <span>{{videoDetails.TrainNumber}}</span>
                </div>
                <div>
                  <label>时间:</label>
                  <span>{{videoDetails.VideoDate}}</span>
                </div>
                <div>
                  <label>司机|副司机:</label>
                  <span>{{videoDetails.Driver1}}|{{videoDetails.Driver2}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        class="label-dialog"
        :visible="labelDialogVisible"
        @close="labelDialogVisible=false"
        :append-to-body="false"
      >
        <div class="label-check">
          <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>
        </div>
        <div class="btns">
          <el-button @click="cancelLabelChecked" size="small">取消</el-button>
          <el-button @click="submitLabelChecked()" size="small" type="primary">确定</el-button>
        </div>
        <video-analyze :videoDetails="selectedVideo" />
      </el-dialog>
    </div>
  </div>
@@ -399,13 +246,18 @@

<script>
import { getlstInit, updateVideoAnalyze, getlst, getRelatedVideoInfo, getLabelMap, delLabel, editLabel } from '@/api/shuohuang';
import VideoAnalyze from "./videoAnalyze"

export default {
  name: "SearchMain",
  components: {
    VideoAnalyze
  },
  data () {
    return {
      CLIP: 'http://192.168.20.113/',
      keyword: '',
      searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 3).format("YYYY-MM-DD HH:mm:ss"), this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")],
      searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 5).format("YYYY-MM-DD HH:mm:ss"), this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")],
      curTabPage: 1,
      curTablePage: 1,
      tabPageSize: 8,
@@ -471,105 +323,23 @@
      ],

      videoDialogVisible: false,
      videoDetails: {},
      guid: 1,
      curVideo: {},
      videoArrs: [],
      videoWrapArr: [],
      hiddenDanger: 1,
      labelDialogVisible: false,
      labelOptions: [{ id: 'whh', name: '未呼唤、呼唤不标准' }, { id: 'jsbz', name: '精神不振、运行中睡觉' }, { id: 'xxsj', name: '学习司机未应答' }, { id: 'myhb', name: '没有后部瞭望、不按规定做防溜措施' }],
      labelCheckedList: [],
      selectedVideo: {}
    }
  },
  watch: {
    checkedConfigs: {
      handler (n, o) {
        // let filterQuerys = [];
        // n.forEach(config => {
        //   let checkedOpts = config.data.filter(option => option.isChecked);
        //   if (checkedOpts.length) {
        //     var linkOpts = checkedOpts.map(opt => opt.name);
        //     linkOpts = linkOpts.join(',');
        //     let obj = {};
        //     obj[config.NameEn] = linkOpts;
        //     filterQuerys.push(obj);
        //   }
        // })
        // console.log(filterQuerys)

        this.filterSearchData()
      },
      deep: true
    }
  },
  mounted () {
    // let mockConfigs = [
    //   { id: 'jch', isHighLevel: false, title: '机车号', data: [{ name: '全部', id: '' }, { name: 'K24', id: 'k24' }, { name: 'G172', id: 'g172' }, { name: 'K254', id: 'k254' }, { name: 'K264', id: 'k264' }, { name: 'G132', id: 'g132' }, { name: 'K257', id: 'k257' }, { name: 'K269', id: 'k269' }, { name: 'G176', id: 'g176' }, { name: 'G137', id: 'g137' }, { name: 'K297', id: 'k297' }, { name: 'K209', id: 'k209' }, { name: 'G777', id: 'g777' }, { name: 'G337', id: 'g337' }, { name: 'K277', id: 'k277' }, { name: 'K299', id: 'k299' }, { name: 'G866', id: 'g866' }, { name: 'K877', id: 'k877' }, { name: 'K699', id: 'k699' }, { name: 'G906', id: 'g906' }, { name: 'L677', id: 'l677' }, { name: 'M987', id: 'm987' }] },
    //   { id: 'cc', isHighLevel: false, title: '车次', data: [{ name: '全部', id: '' }, { name: 'SS344', id: 'SS344' }, { name: 'SS345', id: 'SS345' }, { name: 'SS765', id: 'SS765' }, { name: 'SS776', id: 'SS776' }, { name: 'SS676', id: 'SS676' }, { name: 'SS876', id: 'SS876' }, { name: 'SS779', id: 'k779' }, { name: 'SS976', id: 'SS976' },] },
    //   { id: 'sj', isHighLevel: true, title: '司机', data: [{ name: '张三', id: 'zs' }, { name: '李斯', id: "ls" }, { name: '李斯特', id: "lst" }] },
    //   { id: 'lk', isHighLevel: true, title: '路况', data: [{ name: '标示牌', id: 'bsp' }, { name: '信号机', id: "xhj" }, { name: '弯道', id: "wd" }] }
    // ];

    // mockConfigs.forEach(config => {
    //   this.$set(config, 'isShow', true);
    //   config.data.forEach(item => {
    //     this.$set(item, 'isChecked', false);
    //   })
    //   if (config.isHighLevel) {
    //     this.highLevelConfigs.push(config);
    //   } else {
    //     this.$set(config, 'isMultCheck', false);
    //     this.$set(config, 'showMore', false);
    //     this.optionalConfigs.push(config);
    //   }
    // })
    // this.$nextTick(() => {
    //   this.optionalConfigs.forEach(config => {
    //     if (this.$refs[`options${config.id}`][0].scrollHeight > this.fixedOneLineHeight) {
    //       config.showMore = true;
    //       this.$set(config, 'isShowMore', false);
    //     } else {
    //       config.showMore = false;
    //     }
    //   });
    //   console.log(this.optionalConfigs);
    // });
    this.init();
    this.renderLabelOpts();
  },
  methods: {
    editCurLabel (mark) {
      let arr = [];
      mark.forEach(label => {
        arr.push(label.CodeID)
      });
      this.labelCheckedList = arr;
      this.labelDialogVisible = true;
    },
    removeCurLabel (ParentID, Time) {
      delLabel({ ParentID, Time }).then(res => {

      })
    },
    renderLabelOpts () {
      let _this = this;
      getLabelMap().then(res => {
        _this.labelOptions = res.data
      })
    },
    findLabelNameById (id) {
      debugger
      let label = this.labelOptions.find(label => label.ID == id);
      return label.Name;
    },
    checkVideo (video, index) {
      this.curVideo = video;
      debugger
      if (index > 0 && this.guid == 1) {
        //this.videoWrapArr = 
      }
    },
    handleTabSizeChange (size) {
      debugger
      this.tabPageSize = size;
@@ -690,72 +460,16 @@
      });
    },

    cancelLabelChecked () {
      this.labelDialogVisible = false;
    },
    submitLabelChecked () {
      console.log(this.labelCheckedList)
      debugger
      //this.curVideo
      //this.curVideo.HotPoint[0].Time
      editLabel({ ParentID: this.curVideo.ID + '', Time: this.curVideo.HotPoint[0].Time, CodeID: this.labelCheckedList.join(',') }).then(res => {
        debugger

      })

    },
    addLabel (video) {
      this.labelDialogVisible = true;
    },
    setGuid (guid) {
      let _this = this;
      this.guid = guid;
      // for(var i = 0; i < Math.pow(guid,2); i++){
      //   if(i>this.videoArrs.length-1){
      //       this.videoWrapArr[i] = this.videoArrs[i]
      //     }else{
      //       this.videoWrapArr[i] = {}
      //     }
      // }
      this.videoWrapArr = Math.pow(guid, 2);

      this.$nextTick(() => {
        for (var i = 0; i < Math.pow(guid, 2); i++) {
          this.$refs[`gridVideoItem_${i}`][0].style.width = this.$refs['playerWrap'].offsetWidth / guid + 'px';
          this.$refs[`gridVideoItem_${i}`][0].style.height = this.$refs['playerWrap'].offsetHeight / guid + 'px';

        }
      })

    },
    checkVideoDetail (data) {
      this.videoDetails = data;
      let _this = this;
      getRelatedVideoInfo({ UniqeID: data.UniqeID }).then(res => {
        _this.videoDetails.relativeVideos = res.data;
        _this.curVideo = res.data[0];
        _this.videoArrs = res.data;
        // _this.videoWrapArr.push(res.data[0]);
        _this.setGuid(1)
      _this.selectedVideo = data;
        _this.videoDialogVisible = true;
      })
    },
    checkFollow () {

    },
    checkType (type) {
      this.showType = type;
      // let filterQuerys = [];
      // this.checkedConfigs.forEach(config => {
      //   let checkedOpts = config.data.filter(option => option.isChecked);
      //   if (checkedOpts.length) {
      //     var linkOpts = checkedOpts.map(opt => opt.name);
      //     linkOpts = linkOpts.join(',');
      //     let obj = {};
      //     obj[config.NameEn] = linkOpts;
      //     filterQuerys.push(obj);
      //   }
      // })
      this.filterSearchData()
    },
    clearCheckedConfigs () {
@@ -1102,115 +816,6 @@
      }
      .title {
        font-size: 18px;
      }
      .content {
        padding: 15px;
        text-align: left;
        .content-top {
          margin-bottom: 10px;
          .grid-check {
            text-align: right;
            margin-bottom: 6px;
            span {
              font-size: 20px;
              color: #cacaca;
              padding-left: 12px;
              cursor: pointer;
              &.activegongge {
                color: #3d68e1;
              }
            }
          }
          .video-area {
            display: flex;
            .info-list {
              width: 160px;
              margin-right: 10px;
              .video-name {
                cursor: pointer;
                color: #777;
                margin-bottom: 10px;
                &.current {
                  color: #409eff;
                }
                i {
                  padding-right: 4px;
                }
              }
            }
            .players {
              width: 960px;
              height: 540px;
              display: flex;
              flex-wrap: wrap;
              .video-item {
                background: black;
                border: 1px solid #fff;
                box-sizing: border-box;
                .currentPlayer {
                  border: 2px solid aqua;
                }
              }
            }
          }
        }
        .content-bottom {
          display: flex;
          .bot-left {
            flex: 1;
            .flex-box {
              align-items: baseline;
              label {
                padding-right: 10px;
              }
              .mark-list {
                .time {
                  cursor: pointer;
                  font-size: 15px;
                  font-weight: bold;
                  color: #409eff;
                  span {
                    padding-right: 5px;
                  }
                  i[class^='el-icon'] {
                    padding: 3px;
                  }
                }
                .label-content {
                  font-size: 13px;
                  padding: 4px 0;
                  color: #888;
                }
              }
            }
          }
          .bot-right {
            width: 210px;
            margin-left: 10px;
            label {
              color: #999;
              padding-right: 8px;
            }
          }
        }
      }
    }
    .label-dialog {
      .el-dialog {
        width: 700px;
        .label-check {
          min-height: 400px;
          margin-bottom: 20px;
          .el-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            > label {
              width: 50%;
              text-align: left;
              margin: 0;
            }
          }
        }
      }
    }
  }