page: use aliplayer set progress markers. shuohuang

zhangzengfei

2021-01-21 1cc7750ae8f3fb5abb8d36636f0e9ebc05c61f7b

 src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue

@@ -210,7 +210,7 @@
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="operation">
                <i class="el-icon-star-off"  @click="toggleFollow(scope.row)"></i>
                <i class="el-icon-star-off" @click="toggleFollow(scope.row)"></i>
              </div>
            </template>
          </el-table-column>
@@ -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 {
  data () {
  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,
@@ -417,7 +269,7 @@
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setHours(0, 0, 0);
@@ -425,7 +277,7 @@
          }
        }, {
          text: '昨天',
          onClick (picker) {
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
@@ -436,7 +288,7 @@
          }
        }, {
          text: '近三天',
          onClick (picker) {
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
@@ -444,7 +296,7 @@
          }
        }, {
          text: '近一周',
          onClick (picker) {
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
@@ -471,119 +323,37 @@
      ],

      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)

      handler(n, o) {
        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);
    // });
  mounted() {
    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) {
    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,
@@ -617,7 +387,7 @@
      })
    },
    //一级查询
    init () {
    init() {
      let _this = this;
      let query = {
        KeyWord: this.keyword,
@@ -673,7 +443,7 @@

      })
    },
    toggleFollow (data) {
    toggleFollow(data) {
      data.IsFollow = !data.IsFollow;
      this.updataVideo(data);
      if (data.IsFollow) {
@@ -683,82 +453,26 @@
        });
      }
    },
    updataVideo (data) {
    updataVideo(data) {
      let _this = this;
      updateVideoAnalyze(data).then(res => {
        //二级查询
      });
    },

    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) {
    checkVideoDetail(data) {
      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';

        }
      })
      _this.selectedVideo = data;
      _this.videoDialogVisible = true;
    },
    checkFollow() {

    },
    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.videoDialogVisible = true;
      })
    },
    checkFollow () {

    },
    checkType (type) {
    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 () {
    clearCheckedConfigs() {
      this.checkedConfigs.forEach(config => {
        config.isShow = true;
        config.data.forEach(d => {
@@ -768,7 +482,7 @@
      this.checkedConfigs = [];
      this.showAdvance = true;
    },
    removeCheckedConfig (config) {
    removeCheckedConfig(config) {
      config.isShow = true;
      if (config.IsAdvanced) {
        this.showAdvance = true;
@@ -779,7 +493,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;
      }
@@ -796,20 +510,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) {
@@ -818,7 +532,7 @@
        conf.isMultCheck = false;
      })
    },
    dataSearch () {
    dataSearch() {
      console.log(this.checkedConfigs);
      this.$forceUpdate();
    },
@@ -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;
            }
          }
        }
      }
    }
  }