dvcp_v2_webapp/packages/device/IntelligentSecurity/components/AiSlwVideo.vue

<template>
  <div class="slw" :id="videoId" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.6)">
    <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="iframeId" 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="slw-bottom" v-if="isShowBar">
      <Timeline class="Timeline" v-if="times.length" :times="times" @replay="onReplay" :isLiveing="isLiveing" :width="width" ref="timeline" :style="{width: width}"></Timeline>
      <div class="action-bar">
        <div class="left">
          <div class="left-btns">
            <el-tooltip effect="dark" :content="isPause ? '播放' : '暂停'" placement="top">
              <img :src="isPause ? 'https://cdn.cunwuyun.cn/slw2.0/images/play.png' : 'https://cdn.cunwuyun.cn/slw2.0/images/pause.png'" @click="changePlayStatus">
            </el-tooltip>
          </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 class="play-status">
            <div class="live">
              <span class="label" v-if="isLiveing"></span>
              <i v-if="isLiveing">直播中</i>
              <em>{{ date }}</em>
            </div>
            <div v-if="!isLiveing" class="back-btn" @click="backLiveing">回到直播</div>
          </div>
        </div>
        <div class="right">
          <el-tooltip effect="dark" content="选择日期" placement="top">
            <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png" @click="isShowDate = true">
          </el-tooltip>
          <el-tooltip effect="dark" content="截屏" placement="top">
            <img src="https://cdn.cunwuyun.cn/slw2.0/images/screenshots.png" @click="screenshots">
          </el-tooltip>
          <el-tooltip effect="dark" :content="isFullscreen ? '退出全屏' : '全屏'" placement="top">
            <img src="https://cdn.cunwuyun.cn/slw2.0/images/full-screen.png" @click="fullscreen">
          </el-tooltip>
        </div>
      </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" :picker-options="pickerOptions" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </div>
</template>

<script>
  import Timeline from './Timeline'

  export default {
    props: ['name', 'isShowBar', 'instance', 'id', 'playbackUrls'],

    name: 'slwVideo',

    components: {
      Timeline
    },

    data () {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        currIndex: 0,
        isShowDate: false,
        isShowPlayBtn: false,
        isShow: true,
        isShowVolume: false,
        isLiveing: true,
        form: {
          date: ''
        },
        isLoading: false,
        times: [],
        date: '',
        isPause: false,
        width: '',
        volume: 100,
        videoId: `slwvideo-${new Date().getTime()}`,
        iframeId: `video-${new Date().getTime()}`,
        isFullscreen: false,
        replayUrl: '',
        liveingUrl: ''
      }
    },

    computed: {
      src () {
        if (this.playbackUrls.length) {
          const arr =  this.playbackUrls.filter(v => v.id === this.id)
          return arr.length ? arr[0].playbackUrl : []
        }

        if (this.isLiveing) {
          return this.liveingUrl
        }

        return this.replayUrl
      }
    },

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

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

    mounted () {
      this.date = this.$moment(new Date()).format('YYYY-MM-DD')
      this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
      this.$nextTick(() => {
        this.width = document.querySelector(`#${this.videoId}`).offsetWidth + 'px'

        document.addEventListener('fullscreenchange', this.fullScreenChange)
      })

      this.getSlwPlaybackTime()

      if (this.id) {
        this.getLiveingUrl()
      }
    },

    methods: {
      destroyed () {
        document.removeEventListener('fullscreenchange', this.fullScreenChange)
      },

      backLiveing () {
        this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
        this.date = this.$moment(new Date()).format('YYYY-MM-DD')
        this.getLiveingUrl()
        this.getSlwPlaybackTime()
      },

      getLiveingUrl () {
        this.isLoading = true
        this.instance.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${this.id}`).then(res => {
          if (res.data) {
            this.liveingUrl = res.data
            this.isLiveing = true
          }

          this.isLoading = false
        }).catch(() => {
          this.isLoading = false
        })
      },

      onReplay (e) {
        this.isLoading = true
        this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
          params: {
            ids: this.id,
            startTime: `${this.form.date} ${e}`,
            endTime: this.form.date + ` ${Number(e.substr(0, 2)) + 6 > 9 ? Number(e.substr(0, 2)) + 6 : '0' + (Number(e.substr(0, 2)) + 6)}:00:00`,
            nvrCodes: ''
          }
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length) {
              this.replayUrl = res.data[0].playbackUrl
              this.isLiveing = false
            }
            this.isLoading = false
          }
        }).catch(() => {
          this.isLoading = false
        })
      },

      getSlwPlaybackTime () {
        this.isLoading = true
        this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackTime`, null, {
          params: {
            ids: this.id,
            startTime: this.date + ' 00:00:00',
            endTime: this.date + ' 23:59:59',
          }
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length) {
              const times = res.data[0].times

              this.times = times.map(item => {
                const startTime = (item.startTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
                const endTime = (item.endTime - new Date(this.date + ' 00:00:00').getTime()) / 1000

                return {
                  startTime: Number(startTime.toFixed(0)),
                  endTime: Number(endTime.toFixed(0))
                }
              }).sort((a, b) => {
                return a.startTime - b.startTime
              })
            }

            this.isLoading = false
          }
        }).catch(() => {
          this.isLoading = false
        })
      },

      fullScreenChange () {
        if (document.fullscreenElement) {
          this.reset()
        } else {
          this.reset()
        }
      },
      exitFullscreen () {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen()
        } else if (document.msExitFullscreen) {
          window.top.document.msExitFullscreen()
        }
      },

      changePlayStatus () {
        const subPage = document.querySelector(`#${this.iframeId}`).contentWindow
        subPage.postMessage({
          type: 'play',
          value: this.isPause
        }, '*')
        
        this.isPause = !this.isPause
      },

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

      onVolume (e) {
        const v = (e / 100).toFixed(1)
        const subPage = document.querySelector(`#${this.iframeId}`).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
        this.reset()
      },

      reset () {
        setTimeout(() => {
          this.width = document.querySelector(`#${this.videoId}`).offsetWidth + 'px'
          this.$nextTick(() => {
            this.$refs.timeline && this.$refs.timeline.init()
          })
        }, 100)
      },

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

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

      requestFullScreen (elem) {
        if (elem.requestFullscreen) {
          elem.requestFullscreen()
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen()
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen()
        } else if (elem.msRequestFullscreen) {
          elem = window.top.document.body
          elem.msRequestFullscreen()
        }
      }
    }
  }
</script>

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

    iframe {
      border: none;
    }

    .slw-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      transition: all ease-in-out 0.5s;
      transform: translateY(100%);
    }

    &:hover {
      .slw-title {
        transform: translateY(0%);
      }
      .slw-bottom {
        transform: translateY(0%);
      }
    }

    .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);
      transition: all ease 0.5s;
      transform: translateY(-100%);

      h2 {
        max-width: 70%;
        font-size: 16px;
        color: #fff;
        font-weight: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;  
      }

      .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;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 40px;
      padding: 0 16px;
      background: rgba(0, 0, 0, 0.8);

      .left {
        display: flex;
        align-items: center;

        .play-status {
          display: flex;
          align-items: center;
          margin-left: 12px;

          em {
            margin-left: 12px;
            font-style: normal;
            color: #fff;
            font-size: 12px;
          }

          .back-btn {
            padding: 4px 10px;
            border-radius: 6px;
            color: #ddd;
            font-size: 12px;
            cursor: pointer;
            background: #343747;

            &:hover {
              opacity: 0.6;
            }
          }

          .live {
            display: flex;
            align-items: center;
            line-height: 1;
            padding: 2px 5px;
            color: rgba(0,255,0,.8);

            i {
              font-size: 12px;
              font-style: normal;
            }

            .label {
              width: 6px;
              height: 6px;
              margin-right: 12px;
              background: rgba(0,255,0,.8);
              border-radius: 50%;
              position: relative;

              &:after {
                content: "";
                width: 12px;
                height: 12px;
                position: absolute;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
                border-radius: 50%;
                border: 4px solid rgba(0,255,0,.2);
              }
            }
          }
        }

        .volume {
          display: flex;
          align-items: center;
          position: relative;
          height: 100%;

          .volume-slider {
            display: none;
            position: absolute;
            bottom: 15px;
            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;
          margin-right: 10px;

          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>