[FE]：修改视频监控页面逻辑以及界面

security-protection-platform/package.json

@@ -78,6 +78,7 @@
    "vuedraggable": "2.19",
    "video.js": "7.10.2",
    "videojs-playlist": "4.3.1",
    "videojs-flash": "2.2.1",
    "echarts": "^4.9.0"
  }
}

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

@@ -4,12 +4,16 @@ const { $http, $default } = http
const api = {
  // 获取风场大门表格数据
  getVideoSurveillanceData (params) {
    return $http.get('/videoSurveillance/getVideoSurveillanceData', params)
    return $default.get('/sp/monitorSceneTerminal/queryMonitorSceneTerminalRel', params)
  },
  // 获取识别记录数据
  getDistinguishData (params) {
    return $http.get('/videoSurveillance/getDistinguishData', params)
  },
  // 获取监控场景列表
  getMonitorScene() {
    return $default.get('/sp/monitorSceneManagement/queryPageMonitorScene', 0)
  },
  // 视频回放
  getVideoPlayBack (id) {
    return $default.get(`/sp/uploadFile/getFileUrl?fileName=${id}`).catch((err) => { return err })

security-protection-platform/src/components/VideoPlayer/index.vue

@@ -32,9 +32,10 @@ const defaultPlayerOptions = {
      },
      {
        name: 'volumePanel', // 音量控制
        inline: false // 不使用水平方式
        inline: true // 不使用水平方式
      },
      {name: 'FullscreenToggle'} // 全屏
      {name: 'FullscreenToggle'}, // 全屏
      {name: 'FullscreenToggle'}
    ]
  }
}

security-protection-platform/src/modules/system/assignment/index.vue

@@ -4,7 +4,7 @@
      <div class="select-confidtion-box row">
        <div class="col-3">任务名称：
          <t-select v-model="taskName" width="200px">
            <t-option v-for="item in taskNameList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
            <t-option v-for="item in taskNameList" :key="item.id" :value="item.charSpecValueId">{{ item.description }}</t-option>
          </t-select>
        </div>
        <div class="col-3">匹配模型：
@@ -14,7 +14,7 @@
        </div>
        <div class="col-3">任务状态：
          <t-select v-model="taskStatus" width="200px">
            <t-option v-for="item in taskStatusList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
            <t-option v-for="item in taskStatusList" :key="item.id" :value="item.charSpecValueId">{{ item.description }}</t-option>
          </t-select>
        </div>
        <div class="col-2 offset-1 select-button-box" align="end">
@@ -110,8 +110,8 @@ export default {
  },
  methods: {
    getTaskName() {
      sysapi.getCharSpecList('TASK_STATUS').then(res => {
        console.log(res);
      sysapi.getCharSpecList('AI_TASK_STATUS').then(res => {
        this.taskStatusList = res.data
      })
    },
    getmatchingType() {

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

@@ -0,0 +1,166 @@
<template>
  <div class="replayer">
    <div class="replayer-video">
      <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"
      />
    </div>
  </div>
</template>
<script>
import VideoPlayer from '@/components/VideoPlayer'
export default {
  components: { VideoPlayer },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    visibled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentTab: null,
      loadVideo: false,
      videoList: [],
      $player: null
    }
  },
  computed: {
    visible: {
      get() { return this.visibled },
      set(val) {
        if (!val) this.$player.pause()
        this.$emit('update:visibled', val)
      }
    }
  },
  watch: {
    list: {
      handler(val) {
        console.warn(`list Change`)
        this.resetVideoList()
        if (val.length > 0) {
          this.currentTab = val[0].fileId
          // 手动触发第一个tab点击事件
          this.handleTabChange(null, 0)
        }
      },
      immediate: true
    }
  },
  methods: {
    handlePlayerInited(player) {
      this.$player = player
      window.player = this
    },
    async handleTabChange(name, index) {
      this.$player.pause()
      await this.preloadOriVideoUrl(index)
      this.play(index)
    },
    handlePlayerCurrentChange(e, item) {
      const { index, fileId } = item
      this.currentTab = fileId
      this.preloadOriVideoUrl(index)
    },
    resetVideoList() {
      const videoList = this.list.map((item, index) => {
        const { fileId, fileType } = item
        console.log(fileType)
        return {
          index,
          fileId,
          fileType,
          loaded: false
        }
      })
      this.videoList = videoList
    },
    play(index) {
      console.log(`播放:index=${index}`)
      // 调用额外的currentItem方法以避免currentItem在首次不生效
      // https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md
      this.$player.playlist.currentItem()
      this.$player.playlist.currentItem(index)
      this.$player.play()
    },
    /**
     *  从index开始预载videoList的视频地址
     *  此方法将在获取index对应的地址后就立即返回
     */
    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}`)
          const item = this.videoList[i]
          const task = item.loaded
            ? Promise.resolve()
            : this.getOriVideoUrl(item.fileId).then(resp => {
              console.log(`预载完成,更新播放源:index=${i}`)
              item.loaded = true
              item.sources = [{
                src: resp.url,
                type: item.fileType
              }]
            })
          if (i === index) {
            this.loadVideo = !item.loaded
            task.then(() => {
              resolve()
            }).finally(() => {
              this.loadVideo = false
            })
          }
        }
      })
    },
    /*
     * 获取真实视频地址
     */
    getOriVideoUrl(fileId) {
      console.log(`请求地址:${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'
          resolve({
            url
          })
        }, 1000)
      })
    }
  }
}
</script>
<style lang="scss">
.replayer {
  display: flex;
  &-list {
    margin-right: 20px;
    // width: 200px;
  }
  &-video {
    position: relative;
    flex: auto;
  }
}
</style>

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

@@ -1,17 +1,19 @@
<template>
  <div class="page-main">
    <t-button-group class="top-btn">
      <t-button :color="tabId === 1 ? 'primary' : 'secondary'" @click="tabClick(1)">风场大门</t-button>
      <t-button :color="tabId === 2 ? 'primary' : 'secondary'" @click="tabClick(2)">集控室</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>
      <t-select v-model="gateFieldData" clearable @change="getVideoSurveillanceData(true)">
        <t-option v-for="(item,index) in organizationList" :key="index" :value="item.id">{{ item.org }}</t-option>
      <t-select v-model="gateFieldData" clearable @change="getSceneList()">
        <t-option v-for="(item,index) in organizationList" :key="index" :value="item.organizationId">{{ item.monitorSceneTypeName }}</t-option>
      </t-select>
    </div>
    <div class="page-bottom">
      <div v-for="(item,index) in videoList" :key="index">
      <!-- <div v-for="(item,index) in videoList" :key="index">
        <t-card class="card-video">
          <img :src="item.url" class="card-image">
          <div slot="foot" class="bottom">
@@ -29,19 +31,58 @@
            </div>
          </div>
        </t-card>
      </div> -->
      <div style="width:400px;margin:24px 24px 0 0;">
        <!-- <video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered"
               controls autoplay preload="auto" width="640" height="360"
               data-setup="{ &quot;html5&quot; : { &quot;nativeTextTracks&quot; : false } }">
          <source src="rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1" type="rtmp/flv" />
        </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>
    <replay-dialog :list="replayList" :visibled.sync="showReplayDialog" />
    <replay-dialog :list="replayList" />
  </div>
</template>
<script>
import sysapi from '@/api/videoSurveillance'
import commonapi from '@/api/common'
import ReplayDialog from './components/ReplayDialog'
import ReplayDialog from './components/rtmpVideoPlay'
import VideoPlayer from '@/components/VideoPlayer'
import videojs from 'video.js'
window.videojs = videojs
require('videojs-flash')
require('videojs-playlist')
require('video.js/dist/lang/zh-CN.js')
require('video.js/dist/video-js.min.css')
const defaultPlayerOptions = {
  controls: true,
  autoplay: false,
  muted: false,
  language: 'zh-CN',
  fluid: true,
  // liveui: true,
  controlBar: {
    children: [
      {name: 'playToggle'}, // 播放按钮
      {name: 'currentTimeDisplay'}, // 当前已播放时间
      {name: 'progressControl'}, // 播放进度条
      {name: 'durationDisplay'}, // 总时间
      { // 倍数播放
        name: 'playbackRateMenuButton',
        playbackRates: [0.5, 1, 1.5, 2, 2.5]
      },
      {
        name: 'volumePanel', // 音量控制
        inline: false // 不使用水平方式
      },
      {name: 'FullscreenToggle'} // 全屏
    ]
  }
}
export default {
  components: { ReplayDialog },
  components: { ReplayDialog, VideoPlayer },
  filters: {
    handleText (value) {
      if (!value) return ''
@@ -52,7 +93,9 @@ export default {
    }
  },
  data () {
    const playerOptions = Object.assign({}, defaultPlayerOptions, this.options)
    return {
      playerOptions,
      videoCurrent: 1, // 大门分页数据
      videoPageSize: 10, // 大门分页数据
      videoTotal: 100, // 大门分页总数
@@ -61,22 +104,38 @@ export default {
        page: 0,
        limit: 10
      },
      departments: '',
      organizationList: [], // 风场数据
      gateFieldData: 101101,
      videoList: [],
      totalList: [],
      roomList: [],
      showReplayDialog: false,
      sceneList: [], // 场景列表
      totalList: [], // 所有风场数据列表
      selectedMonitorScene: '',
      showReplayDialog: true,
      replayList: []
    }
  },
  mounted () {
    // var myButton = videojs.player.controlBar.addChild('button', {
    //   text: 'Press me'
    //   // other options
    // })
    // myButton.addClass('html-classname')
    this.getWindFiledList() // 获取风场列表
    this.getVideoSurveillanceData() // 获取视频监控界面数据
    this.handleReview()
  },
  methods: {
    // 获取场景列表
    getSceneList() {
      this.sceneList = []
      for (let i = 0; i < this.totalList.length; i++) {
        if (this.totalList[i].organizationId === this.gateFieldData) {
          this.sceneList.push(this.totalList[i])
        }
      }
      const {a, b} = this.totalList[0]
      console.log(this.totalList[0]);
      console.log(a, b)
    },
    async handleReview (id) {
      // const res = await sysapi.getVideoPlayBack(id)
      // console.log(res)
@@ -116,54 +175,39 @@ export default {
          type: 'video/mp4'
        }]
      }]
      this.showReplayDialog = true
    },
    async tabClick (id) {
      this.selectedMonitorScene = id
      this.paramsObj.page = 0
      this.videoList = []
      this.tabId = id
      this.videoCurrent = 1
      this.getVideoSurveillanceData()
      this.getVideoSurveillanceData(id)
    },
    getWindFiledList () {
      commonapi.getDepartments().then(resp => {
        this.organizationList = []
        console.log(resp)
        this.organizationList = resp.data.map(item => {
          return {
            org: item.name,
            id: item.id
      sysapi.getMonitorScene().then(resp => {
        let arr = resp.data.data
        this.totalList = arr
        for (let i = 0; i < arr.length; i++) {
          for (let j = i + 1; j < arr.length; j++) {
            if (arr[i].monitorSceneTypeName === arr[j].monitorSceneTypeName) {
              ++i
            }
          }
        })
          this.organizationList.push(arr[i])
        }
        console.log(this.organizationList)
      }, err => {
        this.$Message.danger('获取风场列表失败！')
        console.log(err)
      })
    },
    // 获得风场大门数据
    getVideoSurveillanceData (isWind) {
      if (isWind) {
        this.videoList = []
      }
    getVideoSurveillanceData (id) {
      if (this.videoList.length <= 10) {
        this.paramsObj.page = this.videoCurrent
        sysapi.getVideoSurveillanceData({ params: this.paramsObj }).then(res => {
          this.departments = res.data.departments
          this.videoTotal = this.departments[this.tabId - 1].total
          res.data.data.forEach((element, index) => {
            if (element.departmentId === this.tabId) {
              this.videoList.push(element)
            }
          })
          this.videoList.forEach(element => {
            if (typeof (element.videoDetail) === 'object') {
              var txt = element.videoDetail.content
            } else { txt = element.videoDetail }
            element.videoDetail = {}
            element.videoDetail.content = txt
            element.videoDetail.placement = 'top'
          })
          this.getVideoSurveillanceData()
        sysapi.getVideoSurveillanceData({ params: {monitorSceneId: id} }).then(res => {
          console.log(res)
        })
      }
    },