dvcp_v2_webapp/packages/IntelligentSecurity/components/AiSlwVideo.vue

<template>
  <div class="slw" :id="videoId">
    <div class="slw-title">
      <h2>{{ name }}</h2>
      <div class="slw-title__close" @click="removeMonitor">
        <i class="el-icon-circle-close"></i>
        <span>关闭视频</span>
      </div>
    </div>
    <iframe
      v-if="isShow"
      :id="id"
      allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency key="" allowusermedia frameBorder="no"
      style="width: 100%; height: 100%;"
      :src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`">
    </iframe>
    <div class="action-bar">
      <div class="left">
        <div class="left-btns">
          <span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">实时</span>
          <span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">历史</span>
        </div>
        <div
          class="volume"
          @mouseleave.stop="isShowVolume = false">
          <img 
            @mouseenter.stop="isShowVolume = true"
            src="https://cdn.cunwuyun.cn/slw2.0/images/sound.png">
          <div class="volume-slider" :class="[isShowVolume ? 'active' : '']">
            <el-slider
              input-size="mini"
              v-model="volume"
              vertical
              @change="onVolume"
              height="80px">
            </el-slider>
          </div>
        </div>
      </div>
      <div class="right">
        <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png" @click="isShowDate = true">
        <img src="https://cdn.cunwuyun.cn/slw2.0/images/screenshots.png" title="截屏" @click="screenshots">
        <img src="https://cdn.cunwuyun.cn/slw2.0/images/full-screen.png" :title="isFullscreen ? '退出全屏' : '全屏'" @click="fullscreen">
      </div>
    </div>
    <ai-dialog
      title="选择日期"
      :visible.sync="isShowDate"
      width="520px"
      @onConfirm="onConfirm">
      <el-form class="ai-form" ref="form" :model="form" label-width="80px" size="small">
        <el-form-item label="选择日期" prop="date" :rules="[{ required: true, message: '请选择日期', trigger: 'change' }]">
          <el-date-picker
            value-format="yyyy-MM-DD"
            v-model="form.date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </div>
</template>

<script>
  export default {
    props: ['src', 'name'],

    name: 'slwVideo',

    data () {
      return {
        currIndex: 0,
        isShowDate: false,
        isShowPlayBtn: false,
        isShow: true,
        isShowVolume: false,
        form: {
          date: ''
        },
        volume: 100,
        videoId: `slwvideo-${new Date().getTime()}`,
        id: `video-${new Date().getTime()}`,
        isFullscreen: false
      }
    },

    watch: {
      src: {
        handler (val) {
          if (val) {
            this.isShow = false

            this.$nextTick(() => {
              this.isShow = true
            })
          }
        },
        immediate: true,
        deep: true
      }
    },

    mounted () {
    },

    methods: {
      exitFullscreen () {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen()
        }
      },

      onConfirm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
          }
        })
      },

      onVolume (e) {
        const v = (e / 100).toFixed(1)
        const subPage = document.querySelector(`#${this.id}`).contentWindow
        subPage.postMessage({
          type: 'volume',
          value: Number(v)
        }, '*')
      },

      fullscreen () {
        if (this.isFullscreen) {
          this.exitFullscreen()
        } else {
          this.requestFullScreen(document.querySelector(`#${this.videoId}`))
        }

        this.isFullscreen = !this.isFullscreen
      },

      screenshots () {
        const subPage = document.querySelector(`#${this.id}`).contentWindow
        subPage.postMessage({
          type: 'screenshot'
        }, '*')
      },

      removeMonitor () {
        this.$emit('close')
      },

      requestFullScreen (element) {
        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
        if (requestMethod) {
          requestMethod.call(element);
        } else if (typeof window.ActiveXObject !== 'undefined') {
          var wscript = new ActiveXObject('WScript.Shell')
          if (wscript !== null) {
            wscript.SendKeys('{F11}')
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .slw {
    position: relative;
    width: 100%;
    height: 100%;

    iframe {
      border: none;
    }

    .slw-title {
      display: flex;
      position: absolute;
      align-items: center;
      justify-content: space-between;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      background: rgba(0, 0, 0, 0.8);

      h2 {
        font-size: 16px;
        color: #fff;
        font-weight: normal;
      }

      .slw-title__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 84px;
        height: 32px;
        background: linear-gradient(180deg, #2E3447 0%, #151825 100%);
        border-radius: 2px;
        cursor: pointer;
        font-size: 12px;
        color: #fff;

        &:hover {
          opacity: 0.9;
        }

        span {
          margin-left: 4px;
        }

        i {
          position: relative;
          font-size: 16px;
        }
      }
    }

    .action-bar {
      display: flex;
      position: absolute;
      align-items: center;
      justify-content: space-between;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 40px;
      padding: 0 16px;
      background: rgba(0, 0, 0, 0.8);

      .left {
        .volume {
          position: relative;
          height: 100%;

          .volume-slider {
            display: none;
            position: absolute;
            bottom: 20px;
            left: 50%;
            z-index: -1;
            opacity: 0;
            padding: 20px 0 10px;
            background-color: rgba(0, 0,0,.8);
            transform: translate(-50%, 0);
            transition: all ease 0.3s;

            &.active {
              display: block;
              z-index: 1;
              opacity: 1;
            }
          }
        }

        img {
          cursor: pointer;
        }

        .left-btns {
          display: flex;
          align-items: center;
          width: 96px;
          height: 24px;
          margin-right: 10px;
          background: #222838;
          border-radius: 100px;
          text-align: center;
          overflow: hidden;

          span {
            flex: 1;
            height: 100%;
            line-height: 24px;
            background: #222838;
            color: #c9c9c9;
            font-size: 12px;
            cursor: pointer;

            &.active {
              color: #fff;
              background: linear-gradient(180deg, #28B2EB 0%, #193D91 100%);
            }
          }
        }
      }

      .right {
        color: #c9c9c9;
        font-size: 12px;

        span {
          margin-right: 32px;
          cursor: pointer;

          &:hover {
            opacity: 0.6;
          }
        }

        img {
          margin-right: 16px;
          cursor: pointer;

          &:last-child {
            margin-right: 0;
          }

          &:hover {
            opacity: 0.6;
          }
        }
      }

      & > div {
        display: flex;
        align-items: center;
      }
    }
  }
</style>