[FE]:修改视频监控页面逻辑

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

@@ -141,7 +141,7 @@ export default {
      // fake
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          const url = 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1'
          const url = fileId || 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1'
          resolve({
            url
          })

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

@@ -13,11 +13,8 @@
      </t-select>
    </div>
    <div class="page-bottom">
      <!-- <div v-for="(item,index) in videoList" :key="index" :value="item.id" style="width:400px;margin:24px 0px 0 24px;">
        <rtmp-video :list="replayList" @videoReplay="handleReview"></rtmp-video>
      </div> -->
      <div style="width:400px;margin:24px 0px 0 24px;">
        <rtmp-video :list="replayList" @videoReplay="handleReview"></rtmp-video>
      <div v-for="(item,index) in videoList" :key="index" :value="item.id" style="width:400px;margin:24px 0px 0 24px;">
        <rtmp-video :list="getVideoPlayList(item)" @videoReplay="handleReview"></rtmp-video>
      </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>
@@ -71,81 +68,13 @@ export default {
  },
  mounted () {
    this.getWindFiledList() // 获取风场列表
    this.getdata()
  },
  methods: {
    getdata() {
      this.replayList = [{
        fileName: '12月14 16:55',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:56',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:57',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:58',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:59',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 17:00',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }]
      this.replayList = [{
        sources: [{
          src: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
          type: 'rtmp/flv'
        }]
      }, {
        sources: [{
          src: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
          type: 'rtmp/flv'
        }]
      }]
      this.videoPlayList = [{
        fileName: '12月14 16:55',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:56',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:57',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165528.mp4',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:58',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165529.mp4',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:59',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165530.mp4',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 17:00',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165531.mp4',
        fileType: 'rtmp/flv'
      }]
      this.videoPlayList = [{
        sources: [{
          src: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
          type: 'rtmp/flv'
        }]
      }, {
        sources: [{
          src: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
          type: 'rtmp/flv'
        }]
    getVideoPlayList(item) {
      return [{
        fileId: item.videoUrl,
        fileType: 'rtmp/flv',
        id: item.resourceToolId
      }]
    },
    // 获取场景列表
@@ -158,44 +87,6 @@ export default {
      }
    },
    async handleReview (id) {
      // const res = await sysapi.getVideoPlayBack(id)
      // console.log(res)
      this.replayList = [{
        fileName: '12月14 16:55',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:56',
        fileId: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:57',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165528.mp4',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:58',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165529.mp4',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 16:59',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165530.mp4',
        fileType: 'rtmp/flv'
      }, {
        fileName: '12月14 17:00',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165531.mp4',
        fileType: 'rtmp/flv'
      }]
      this.replayList = [{
        sources: [{
          src: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
          type: 'rtmp/flv'
        }]
      }, {
        sources: [{
          src: 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1',
          type: 'rtmp/flv'
        }]
      }]
      this.showReplayDialog = true
    },
    // 切换场景
@@ -220,7 +111,6 @@ export default {
          }
          this.organizationList.push(arr[i])
        }
        console.log(this.organizationList)
      }, err => {
        this.$Message.danger('获取风场列表失败！')
        console.log(err)
@@ -230,7 +120,7 @@ export default {
    getVideoSurveillanceData (id) {
      this.paramsObj.page = this.videoCurrent
      sysapi.getVideoSurveillanceData({ params: {monitorSceneId: id} }).then(res => {
        this.videoList.push(res.data.data[0])
        this.videoList = res.data.data
      })
    },
    // 进入识别记录界面