[FE] 首页样式 视频监控布局

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

@@ -1,5 +1,5 @@
<template>
  <div class="index">
  <div class="index" style="overflow:hidden">
    <div :style="`background-image: url(${imgBg})`" class="top" >
      <img src="@/assets/images/brand.png" class="top-logo">
    </div>
@@ -40,27 +40,30 @@
          <span class="title-span">重点区域监控</span>
        </div>
        <!--        <video-player ref="videoPlayer" :options="videoOptions" :playsinline="true" class="vjs-custom-skin videoPlayer"></video-player>-->
        <videoPlayer
        <video-player v-if="videoOptions !== {}"
          ref="videoPlayer"
          :options="videoOptions"
          :playsinline="true"
          class="vjs-custom-skin videoPlayer"
        />
        ></video-player>
        <div class="videoPlayers">
          <div v-for="(item,index) in videoOptionsList" class="videoPlayer-sm" @click="videoSwitchover(item)">
          <div v-for="(item,index) in videoOptionsList" class="videoPlayer-sm" @click="videoSwitchover(item,index)">
            <!--            <video-player ref="videoPlayer"-->
            <!--                          :options="item.options"-->
            <!--                          :playsinline="true"-->
            <!--                          :style="`padding: 0 2.5% 2.5% 2%;border-radius: 5px;border: ${1-index}px solid #009bf3;`"-->
            <!--                          class="vjs-custom-skin videoPlayer">-->
            <!--            </video-player>-->
            <videoPlayer
            <video-player
              ref="videoPlayer"
              :options="videoOptions"
              :playsinline="true"
              :style="`padding: 0 2.5% 2.5% 2%;border-radius: 5px;border: ${1-index}px solid #009bf3;`"
              :playsinline="false"
              :events="events"
              :options="item.options"
              :style="`padding: 0 2.5% 2.5% 2%;border-radius: 5px;`"
              :class="{ 'checkedIndex': index == checkedIndex }"
              class="vjs-custom-skin videoPlayer"
            />
              @dblclick="handlefullscreenchange"
            ></video-player>
            <div style="color: white;text-align: center;">{{ item.name }}</div>
          </div>
        </div>
@@ -100,9 +103,13 @@ import dasapi from '@/api/dashboard'
import sysapi from '@/api/system'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
// import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
import VideoPlayer from '@/components/VideoPlayer'
import RtmpVideo from '../videoSurveillance/components/rtmpVideoPlay'
import videojs from 'video.js'
window.videojs = videojs
require('video.js/dist/lang/zh-CN.js')
require('video.js/dist/video-js.min.css')
export default {
  filters: {
@@ -137,40 +144,14 @@ export default {
    }
  },
  components: {
    VideoPlayer
    RtmpVideo
  },
  data() {
    return {
      checkedIndex: 0,
      events: ['fullscreenchange'],
      nowDate: new Date(),
      videoOptions: {
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        // 是否流体自适应容器宽高
        fluid: true,
        // // 设置视频播放器的显示宽度（以像素为单位）
        // width: '100px',
        // // 设置视频播放器的显示高度（以像素为单位）
        // height: '400px',
        sources: [{
          withCredentials: false,
          type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: 'http://10.19.90.34:1080/live/01.m3u8' // url地址
        }],
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: false // 全屏按钮
        }
      },
      videoOptions: {},
      videoOptionsList: [],
      imgBg: imgBg,
      titleImgBg: titleImgBg,
@@ -187,6 +168,9 @@ export default {
    }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer1.player
    }
  },
  mounted () {
    this.initVideo()
@@ -202,57 +186,107 @@ export default {
    }, 10000)
  },
  methods: {
    async createMyButton () {
      this.$nextTick(() => {
        const bars = document.querySelectorAll('.vjs-control-bar')
        let time = document.getElementsByClassName('vjs-current-time vjs-time-control vjs-control')
        let start = document.getElementsByClassName('vjs-play-control vjs-control vjs-button')
        let volume = document.getElementsByClassName('vjs-volume-panel vjs-control vjs-volume-panel-horizontal')
        let text = document.getElementsByClassName('vjs-live-control vjs-control')
        bars.forEach((item, index) => {
          time.forEach(item => {
            item.remove()
          })
          start.forEach(item => {
            item.remove()
          })
          volume.forEach(item => {
            item.remove()
          })
          text.forEach(item => {
            item.remove()
          })
        })
      })
    },
    handlefullscreenchange(val) {
      // 因为我是又封装了一个组件，打印val会有相应所需的属性，全屏状态为：isFullscreen_
      val.isFullscreen_ = !val.isFullscreen_
      // this.$emit('fullscreenchange', val)
    },
    initVideo() {
      sysapi.getTerminalRel(2).then(res => {
        // this.videoOptions = {
        //   live: true,
        //   autoplay: true,
        //   fluid: false,
        //   height: document.documentElement.clientHeight * 0.60,
        //   notSupportedMessage: '暂时无法播放',
        //   controlBar: {
        //     timeDivider: false,
        //     durationDisplay: false,
        //     remainingTimeDisplay: false,
        //     fullscreenToggle: true // 全屏按钮
        //   },
        //   techOrder: ['flash'],
        //   flash: {
        //     hls: { withCredentials: false },
        //     swf: 'static/video-js.swf' // 引入静态文件swf
        //   },
        //   sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
        //     type: 'rtmp/mp4',
        //     src: res.data.data[0].videoUrl
        //   }]
        // }
        this.videoOptions = {
          autoplay: true, // 如果true,浏览器准备好时开始回放。
          muted: true, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          // 是否流体自适应容器宽高
          fluid: true,
          // // 设置视频播放器的显示宽度（以像素为单位）
          // width: '100px',
          // // 设置视频播放器的显示高度（以像素为单位）
          // height: '300px',
          sources: [{
            withCredentials: false,
            type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: res.data.data[0].videoUrl // url地址
          }],
          flash: { hls: { withCredentials: false } },
          html5: { hls: { withCredentials: false } },
          notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: false,
            durationDisplay: false,
            remainingTimeDisplay: false,
            fullscreenToggle: true, // 全屏按钮,
            pictureInPictureToggle: false
          }
        }
        this.videoOptionsList = []
        res.data.data.forEach(e => {
          this.videoOptionsList.push({
            options: {
              live: true,
              autoplay: true,
              fluid: false,
              height: document.documentElement.clientHeight * 0.15,
              notSupportedMessage: '暂时无法播放',
              controls: false,
              techOrder: ['flash'],
              flash: {
                hls: { withCredentials: false },
                swf: 'static/video-js.swf' // 引入静态文件swf
              },
              sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
                type: 'rtmp/mp4',
                src: e.videoUrl
              }]
              autoplay: true, // 如果true,浏览器准备好时开始回放。
              muted: true, // 默认情况下将会消除任何音频。
              loop: false, // 导致视频一结束就重新开始。
              preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
              language: 'zh-CN',
              aspectRatio: '16:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
              // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
              // 是否流体自适应容器宽高
              fluid: true,
              // // 设置视频播放器的显示宽度（以像素为单位）
              // width: '100px',
              // // 设置视频播放器的显示高度（以像素为单位）
              // height: '400px',
              sources: [{
                withCredentials: false,
                type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: e.videoUrl // url地址
              }],
              flash: { hls: { withCredentials: false } },
              html5: { hls: { withCredentials: false } },
              notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
              controlBar: {
                timeDivider: false,
                durationDisplay: false,
                remainingTimeDisplay: false,
                fullscreenToggle: false // 全屏按钮
              }
            },
            name: e.resourceToolName
          })
          this.createMyButton()
        })
      })
    },
    videoSwitchover(itme) {
    videoSwitchover(itme,index) {
      this.videoOptions.sources = itme.options.sources
      this.checkedIndex = index
    },
    gotoSystem() {
      this.$router.push({name: 'videoSurveillance'})
@@ -297,38 +331,38 @@ export default {
    initRecognition() {
      dasapi.queryHomeLastInAndOutRecord({monitorSceneId: 3}).then(res => {
        var data = res.data.data
        if (data.length > 4){
          data = data.slice(0,4)
        if (data.length > 4) {
          data = data.slice(0, 4)
        }
        data.forEach(e => {
          e.simi = e.simi.split('.')[0] + '%'
          e.newImg = e.idenPictureUrl
          var loadTimer;
          var imgObject = new Image();
          imgObject.setAttribute('crossOrigin', 'anonymous');
          imgObject.src = e.idenPictureUrl;
          imgObject.onLoad = onImgLoaded();
          var loadTimer
          var imgObject = new Image()
          imgObject.setAttribute('crossOrigin', 'anonymous')
          imgObject.src = e.idenPictureUrl
          imgObject.onLoad = onImgLoaded()
          function onImgLoaded() {
            if (loadTimer != null) clearTimeout(loadTimer);
            if (loadTimer != null) clearTimeout(loadTimer)
            if (!imgObject.complete) {
              loadTimer = setTimeout(function() {
                onImgLoaded();
              }, 3);
                onImgLoaded()
              }, 3)
            } else {
              e.newImg = getImagePortion(imgObject, e.face_box[2] - e.face_box[0], e.face_box[3] - e.face_box[1], e.face_box[0], e.face_box[1]);
              e.newImg = getImagePortion(imgObject, e.face_box[2] - e.face_box[0], e.face_box[3] - e.face_box[1], e.face_box[0], e.face_box[1])
            }
          }
          function getImagePortion(imgObj, newWidth, newHeight, startX, startY){
            var tnCanvas = document.createElement('canvas');
            var tnCanvasContext = tnCanvas.getContext('2d');
            tnCanvas.width = newWidth; tnCanvas.height = newHeight;
            var bufferCanvas = document.createElement('canvas');
            var bufferContext = bufferCanvas.getContext('2d');
            bufferCanvas.width = imgObj.width;
            bufferCanvas.height = imgObj.height;
            bufferContext.drawImage(imgObj, 0, 0);
            tnCanvasContext.drawImage(bufferCanvas, startX,startY,newWidth, newHeight,0,0,newWidth,newHeight);
            return tnCanvas.toDataURL();
          function getImagePortion(imgObj, newWidth, newHeight, startX, startY) {
            var tnCanvas = document.createElement('canvas')
            var tnCanvasContext = tnCanvas.getContext('2d')
            tnCanvas.width = newWidth; tnCanvas.height = newHeight
            var bufferCanvas = document.createElement('canvas')
            var bufferContext = bufferCanvas.getContext('2d')
            bufferCanvas.width = imgObj.width
            bufferCanvas.height = imgObj.height
            bufferContext.drawImage(imgObj, 0, 0)
            tnCanvasContext.drawImage(bufferCanvas, startX, startY, newWidth, newHeight, 0, 0, newWidth, newHeight)
            return tnCanvas.toDataURL()
          }
        })
        this.distinguishData = data
@@ -724,5 +758,8 @@ export default {
  .vjs-progress-control{
    visibility:hidden
  }
  .checkedIndex{
    border: 1px solid #009bf3;
  }
}
</style>

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

@@ -15,12 +15,12 @@
    <div class="page-bottom grid-demo">
      <t-col v-for="(item,index) in videoList" :span="viewLayoutSpan" :key="index" :value="item.resourceToolId" style="margin-top:24px">
        <video-player
            :ref="'video'+index"
            :options="videoOptions[index]"
            :playsinline="false"
            :events="events"
            class="vjs-custom-skin videoPlayer"
            @dblclick="handlefullscreenchange"
          :ref="'video'+index"
          :options="videoOptions[index]"
          :playsinline="false"
          :events="events"
          class="vjs-custom-skin videoPlayer"
          @dblclick="handlefullscreenchange"
        ></video-player>
      </t-col>
      <!-- <rtmp-video :list="getVideoPlayList(item)" @goDistinguishRecord="goDistinguishRecord(item.resourceToolId)" @videoReplay="handleReview"></rtmp-video> -->
@@ -95,19 +95,19 @@ export default {
        let start = document.getElementsByClassName('vjs-play-control vjs-control vjs-button')
        let volume = document.getElementsByClassName('vjs-volume-panel vjs-control vjs-volume-panel-horizontal')
        let text = document.getElementsByClassName('vjs-live-control vjs-control')
        time.forEach(item => {
          item.remove()
        })
        start.forEach(item => {
          item.remove()
        })
        volume.forEach(item => {
          item.remove()
        })
        text.forEach(item => {
          item.remove()
        })
        bars.forEach((item, index) => {
          time.forEach(item => {
            item.remove()
          })
          start.forEach(item => {
            item.remove()
          })
          volume.forEach(item => {
            item.remove()
          })
          text.forEach(item => {
            item.remove()
          })
          let txt = document.createElement('span')
          txt.innerHTML = '集控室（人脸识别）'
          txt.style.marginLeft = '12px'
@@ -116,10 +116,9 @@ export default {
          btn.style.cursor = 'pointer'
          btn.style.marginLeft = 'auto'
          btn.className = 'aidicon aidicon-image-outline'
          btn.setAttribute('resourceToolId', item.value)
          btn.setAttribute('title', '识别记录')
          btn.addEventListener('click', () => {
            this.goDistinguishRecord()
          })
          btn.addEventListener('click', this.goDistinguishRecord)
          let btn1 = document.createElement('button')
          btn1.style.color = 'white'
          btn1.style.cursor = 'pointer'
@@ -249,7 +248,8 @@ export default {
      })
    },
    // 进入识别记录界面
    goDistinguishRecord (id) {
    goDistinguishRecord (e) {
      var id = e.target.getAttribute('resourceToolId')
      this.$router.push({ path: '/videoSurveillance/distinguishRecord', query: { videoId: id } })
    },
    // 风场大门分页