[FE]视频回放接口联调完成

security-protection-platform/src/api/videoSurveillance/index.js

@@ -16,7 +16,7 @@ const api = {
    return $http.get('/videoSurveillance/getDistinguishData', params)
  },
  // 获取监控场景列表
  getMonitorScene() {
  getMonitorScene () {
    return $default.get('/sp/monitorSceneManagement/queryPageMonitorScene', 0)
  },
  // 视频回放
@@ -25,6 +25,12 @@ const api = {
      resp.data = keysMappingReverse(resp.data, videoMapping)
      return resp
    }).catch((err) => { return err })
  },
  // 根据视频id/图片id查询地址
  getFileUrl (id) {
    return $default.get(`/sp/uploadFile/getFileUrl?fileName=${id}`).then(resp => {
      return resp
    }).catch((err) => { return err })
  }
}
export default api

security-protection-platform/src/modules/videoSurveillance/components/ReplayDialog/index.vue

@@ -15,7 +15,7 @@
          </div>
        </div>
        <t-tabs v-model="currentTab" mode="scrollY" orientation="vertical" width="100%" @change="handleTabChange">
          <t-tab-panel v-for="item in list" :key="item.monitorVideoLogId" :label="item.fileName|formatDateTime" :panel-id="item.fileId" />
          <t-tab-panel v-for="item in list" :key="item.monitorVideoLogId" :label="item.fileName" :panel-id="item.fileId" />
        </t-tabs>
      </div>
@@ -40,9 +40,12 @@ export default {
  },
  components: { VideoPlayer },
  props: {
    replayId: {
      type: String
    // 视频列表
    list: {
      type: Array,
      default: () => []
    },
    // 是否显示对话框
    visibled: {
      type: Boolean,
      default: false
@@ -50,15 +53,17 @@ export default {
  },
  data () {
    return {
      // 当前的tab标签
      currentTab: null,
      loadVideo: false,
      list: [],
      // 视频列表
      videoList: [],
      // 视频播放器对象
      $player: null,
      // beginDay: formatDateTime(new Date(+new Date() - 10 * 60 * 1000), 'yyyy-MM-dd hh:mm:ss'),
      // endDay: formatDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss')
      beginDay: '2020-12-18 17:19:00',
      endDay: '2020-12-18 17:19:59'
      // 开始时间
      beginDay: '2020-12-19 20:14:00',
      // 结束时间
      endDay: '2020-12-19 20:14:59'
    }
  },
  computed: {
@@ -71,10 +76,6 @@ export default {
    }
  },
  watch: {
    replayId (val) {
      this.replayId = val
      this.getData()
    },
    list: {
      handler (val) {
        this.list = val
@@ -89,34 +90,8 @@ export default {
      immediate: true
    }
  },
  mounted () {
    // this.list = [{
    //   fileName: '12月14日 16:55',
    //   fileId: 'ai-video_5A02296PAKA885B-video20201214165526.mp4',
    //   fileType: 'video/mp4'
    // }, {
    //   fileName: '12月14日 16:56',
    //   fileId: 'ai-video_5A02296PAKA885B-video20201214165527.mp4',
    //   fileType: 'video/mp4'
    // }, {
    //   fileName: '12月14日 16:57',
    //   fileId: 'ai-video_5A02296PAKA885B-video20201214165528.mp4',
    //   fileType: 'video/mp4'
    // }, {
    //   fileName: '12月14日 16:58',
    //   fileId: 'ai-video_5A02296PAKA885B-video20201214165529.mp4',
    //   fileType: 'video/mp4'
    // }, {
    //   fileName: '12月14日 16:59',
    //   fileId: 'ai-video_5A02296PAKA885B-video20201214165530.mp4',
    //   fileType: 'video/mp4'
    // }, {
    //   fileName: '12月14日 17:00',
    //   fileId: 'ai-video_5A02296PAKA885B-video20201214165531.mp4',
    //   fileType: 'video/mp4'
    // }]
  },
  methods: {
    // 初始化视频
    handlePlayerInited (player) {
      this.$player = player
      window.player = this
@@ -133,7 +108,8 @@ export default {
    },
    resetVideoList () {
      const videoList = this.list.map((item, index) => {
        const { fileId, fileType } = item
        const { fileId } = item
        const fileType = 'video/' + item.fileType
        return {
          index,
          fileId,
@@ -185,32 +161,25 @@ export default {
    /*
   * 获取真实视频地址
   */
    getOriVideoUrl (fileId) {
      console.log(`请求地址:${fileId}`)
    async getOriVideoUrl (fileId) {
      const res = await sysapi.getFileUrl(fileId)
      // fake
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          const x = Math.random()
          const url = x > 0.5
            ? 'http://10.19.90.34:19000/tool-image/tool-image_7d359725fac4464fb248284caf321993.mp4'
            : 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4'
          const url = res.data.data.fileUrl
          resolve({
            url
          })
        }, 1000)
      })
    },
    async getData () {
      const res = await sysapi.queryMonitorVideoLog({ params: { id: this.replayId, beginDay: this.beginDay, endDay: this.endDay } })
      if (res.status === 200) {
        this.list = res.data.data
      } else {
        this.$Message.danger('视频列表数据获取失败！')
      }
    getData () {
      this.$emit('get-list', { beginDay: this.beginDay, endDay: this.endDay })
    },
    resetData () {
      this.beginDay = formatDateTime(new Date(+new Date() - 10 * 60 * 1000), 'yyyy-MM-dd hh:mm:ss')
      this.endDay = formatDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss')
      // this.getData()
    }
  }
}

security-protection-platform/src/modules/videoSurveillance/components/rtmpVideoPlay/index.vue

@@ -4,13 +4,7 @@
      <t-loading v-model="loadVideo">
        <span class="text-md text-info">获取视频资源...</span>
      </t-loading>
      <video-player
        :sources="videoList"
        :autoadvance="0"
        :style="{opacity: loadVideo ? 0: 1}"
        @player-inited="handlePlayerInited"
        @playlistitem="handlePlayerCurrentChange"
      />
      <video-player :sources="videoList" :autoadvance="0" :style="{opacity: loadVideo ? 0: 1}" @player-inited="handlePlayerInited" @playlistitem="handlePlayerCurrentChange" />
    </div>
  </div>
</template>
@@ -30,7 +24,7 @@ export default {
      default: false
    }
  },
  data() {
  data () {
    return {
      currentTab: null,
      loadVideo: false,
@@ -40,8 +34,8 @@ export default {
  },
  computed: {
    visible: {
      get() { return this.visibled },
      set(val) {
      get () { return this.visibled },
      set (val) {
        if (!val) this.$player.pause()
        this.$emit('update:visibled', val)
      }
@@ -49,7 +43,7 @@ export default {
  },
  watch: {
    list: {
      handler(val) {
      handler (val) {
        console.warn(`list Change`)
        this.resetVideoList()
        if (val.length > 0) {
@@ -63,26 +57,26 @@ export default {
  },
  methods: {
    // 初始化
    handlePlayerInited(player) {
    handlePlayerInited (player) {
      this.$player = player
      window.player = this
      var myButton = player.controlBar.addChild('button')
      myButton.addClass('vjs-play-control')
      myButton.on('click', () => {
        this.$emit('videoReplay')
        this.$emit('videoReplay', this.list[0].id)
      })
    },
    async handleTabChange(name, index) {
    async handleTabChange (name, index) {
      this.$player.pause()
      await this.preloadOriVideoUrl(index)
      this.play(index)
    },
    handlePlayerCurrentChange(e, item) {
    handlePlayerCurrentChange (e, item) {
      const { index, fileId } = item
      this.currentTab = fileId
      this.preloadOriVideoUrl(index)
    },
    resetVideoList() {
    resetVideoList () {
      const videoList = this.list.map((item, index) => {
        const { fileId, fileType } = item
        return {
@@ -95,7 +89,7 @@ export default {
      this.videoList = videoList
    },
    play(index) {
    play (index) {
      console.log(`播放:index=${index}`)
      // 调用额外的currentItem方法以避免currentItem在首次不生效
      // https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md
@@ -107,7 +101,7 @@ export default {
     *  从index开始预载videoList的视频地址
     *  此方法将在获取index对应的地址后就立即返回
     */
    preloadOriVideoUrl(index = 0, maxLength = 5) {
    preloadOriVideoUrl (index = 0, maxLength = 5) {
      return new Promise((resolve, reject) => {
        for (let i = index; i in this.videoList && i - index < maxLength; i++) {
          console.log(`预载地址:index=${i}`)
@@ -136,7 +130,7 @@ export default {
    /*
     * 获取真实视频地址
     */
    getOriVideoUrl(fileId) {
    getOriVideoUrl (fileId) {
      console.log(`请求地址:${fileId}`)
      // fake
      return new Promise((resolve, reject) => {

security-protection-platform/src/modules/videoSurveillance/index.vue

@@ -1,10 +1,7 @@
<template>
  <div class="page-main">
    <t-button-group class="top-btn">
      <t-button v-for="(item,index) in sceneList" :key="index"
                :value="item.monitorSceneId"
                :color="item.monitorSceneId === selectedMonitorScene ? 'primary' : 'secondary'"
                @click="tabClick(item.monitorSceneId)">{{ item.monitorSceneName }}</t-button>
      <t-button v-for="(item,index) in sceneList" :key="index" :value="item.monitorSceneId" :color="item.monitorSceneId === selectedMonitorScene ? 'primary' : 'secondary'" @click="tabClick(item.monitorSceneId)">{{ item.monitorSceneName }}</t-button>
    </t-button-group>
    <div class="page-top">
      <span>风场:</span>
@@ -18,7 +15,7 @@
      </div>
    </div>
    <t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
    <replay-dialog :list="replayList" :visibled.sync="showReplayDialog"/>
    <replay-dialog :list="replayList" :visibled.sync="showReplayDialog" @get-list="queryMonitorVideoLog" />
  </div>
</template>
<script>
@@ -26,6 +23,7 @@ import sysapi from '@/api/videoSurveillance'
import RtmpVideo from './components/rtmpVideoPlay'
import ReplayDialog from './components/ReplayDialog'
import VideoPlayer from '@/components/VideoPlayer'
import formatDateTime from '@/utils/formatDateTime.js'
import videojs from 'video.js'
window.videojs = videojs
@@ -63,14 +61,18 @@ export default {
      selectedMonitorScene: '', // 当前选择场景
      videoPlayList: [],
      showReplayDialog: false,
      replayList: []
      replayList: [],
      beginDay: formatDateTime(new Date(+new Date() - 10 * 60 * 1000), 'yyyy-MM-dd hh:mm:ss'),
      endDay: formatDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss')
      // beginDay: '2020-12-19 20:14:00',
      // endDay: '2020-12-19 20:14:00'
    }
  },
  mounted () {
    this.getWindFiledList() // 获取风场列表
  },
  methods: {
    getVideoPlayList(item) {
    getVideoPlayList (item) {
      return [{
        fileId: item.videoUrl,
        fileType: 'rtmp/flv',
@@ -78,7 +80,7 @@ export default {
      }]
    },
    // 获取场景列表
    getSceneList() {
    getSceneList () {
      this.sceneList = []
      for (let i = 0; i < this.totalList.length; i++) {
        if (this.totalList[i].organizationId === this.gateFieldData) {
@@ -86,7 +88,25 @@ export default {
        }
      }
    },
    async handleReview (id) {
    // 向服务器发送请求获取视频回放数据
    async queryMonitorVideoLog (data) {
      let res = []
      // console.log(this.beginDay, this.endDay)
      if (data) {
        res = await sysapi.queryMonitorVideoLog({ params: { id: this.replayId, ...data } })
      } else {
        res = await sysapi.queryMonitorVideoLog({ params: { id: this.replayId, beginDay: this.beginDay, endDay: this.endDay } })
      }
      if (res.status === 200) {
        this.replayList = res.data.data
      } else {
        this.$Message.danger('视频列表数据获取失败！')
      }
    },
    // 显示视频回放对话框
    handleReview (id) {
      this.replayId = id
      this.queryMonitorVideoLog()
      this.showReplayDialog = true
    },
    // 切换场景
@@ -119,7 +139,7 @@ export default {
    // 获得风场大门数据
    getVideoSurveillanceData (id) {
      this.paramsObj.page = this.videoCurrent
      sysapi.getVideoSurveillanceData({ params: {monitorSceneId: id} }).then(res => {
      sysapi.getVideoSurveillanceData({ params: { monitorSceneId: id } }).then(res => {
        this.videoList = res.data.data
      })
    },