zhangzengfei
2021-06-22 ae504cf3ec136ef53b4625d1755ce838b2585a52
src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue
@@ -1,7 +1,7 @@
<template>
  <div class="event-video-content">
    <div class="video-player">
      <video :src="curVideo.ClipPath" controls></video>
      <video :src="videoUrl" controls autoplay></video>
    </div>
    <div class="more-videos">
      <div class="top">
@@ -20,7 +20,7 @@
          :key="item.ID"
          @click="checkVideo(item)"
        >
          <img :src="item.Cover" alt />
          <img :src="`/httpImage/` + item.Cover" alt />
          <div class="time">{{item.EventTime}}</div>
        </div>
      </div>
@@ -29,6 +29,8 @@
</template>
<script>
import { getVideoUrl } from "@/api/shuohuang"
export default {
  props: {
    eventVideoArr: {
@@ -39,15 +41,10 @@
  data () {
    return {
      curVideo: {},
      videoUrl: ""
    }
  },
  watch: {
    eventVideoArr (n, o) {
      if (n.length) {
        this.curVideo = n[0]
      }
    }
  },
  mounted () {
    //this.eventVideoArr.length && (this.curVideo = this.eventVideoArr[0]);
    //this.curVideo = this.eventVideoArr[0];
@@ -56,8 +53,13 @@
    })
  },
  methods: {
    checkVideo (data) {
      this.curVideo = data;
    checkVideo(item) {
      this.curVideo = item;
      getVideoUrl({ id: item.ID }).then(rsp => {
        if (rsp && rsp.success) {
          this.videoUrl = "/httpImage/" + rsp.data.videoUrl;
        }
      })
    }
  }
}
@@ -107,6 +109,7 @@
        padding: 10px;
        border: 1px solid #eee;
        border-radius: 3px;
        cursor: pointer;
        &.act {
          border-color: #0096fa;
        }