SD-party-school/src/components/AF-exhibition/footer/index.vue

<template>
  <el-row class="mainBox">
    <el-col v-for="(item,ind) in footerList" :key="ind">
      <!-- <img src="../../../assets/image-af/signal.png" alt="" class="signal"> -->
      <!-- <img src="../../../assets/image-af/electric.png" alt="" class="electric"> -->
      <span class="signal">{{item.signal}}</span>
      <span class="electric">{{item.battery}}</span>
      <span class="boxName">{{item.deviceName}}</span>
      <el-row class="contentInfo fontBox">
        <el-col v-html="item.status"></el-col>
      </el-row>
    </el-col>
    <el-col>
      <!-- <img src="../../../assets/image-af/test1.png" alt="" class="videoBox"> -->
      
      <video id="myVideo" class="video-js videoBox" controls preload="auto" data-setup='{}' style='width: 100%;height: 100%' v-if="resList[0]">
          <source id="source" :src="resList[0] && resList[0].url || ''" type="application/x-mpegURL"/>
      </video>
      <img src="../../../assets/image-af/red.png" alt="" class="redImage" v-else>
    </el-col>
    <el-col>
      <video id="myVideo2" class="video-js videoBox" controls preload="auto" data-setup='{}' style='width: 100%;height: 100%' v-if="resList[1]">
          <source id="source" :src="resList[1] && resList[1].url || ''" type="application/x-mpegURL"/>
      </video>
      <img src="../../../assets/image-af/red.png" alt="" class="redImage" v-else>
    </el-col>
  </el-row>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
export default {
  props:['footerList'],
  data(){
    return{
      myVideo:null,
      myVideo2:null,
      resList:[]
    }
  },
  mounted(){
    this.getData()
  },
  methods:{
    videoPlay(){
      // videojs 简单使用
      if(this.resList[0]){
        this.myVideo = videojs('myVideo', {
            bigPlayButton: false,
            textTrackDisplay: false,
            posterImage: false,
            errorDisplay: false,
        })
        console.log(this.myVideo)
        this.myVideo.play()// 视频播放
      }
      if(this.resList[1]){
        this.myVideo2 = videojs('myVideo2', {
            bigPlayButton: false,
            textTrackDisplay: false,
            posterImage: false,
            errorDisplay: false,
        })
        this.myVideo2.play()// 视频播放
      }
    },
     async getData(){
      let res = await this.$axios.get('/AFTop/querySystemUrl?'+this.$qs.stringify({
        type: 1
      }))
      if(res.success){
        this.resList = res.data.slice(0,2)
        this.$nextTick(()=>{
          this.videoPlay()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mainBox{
    display: flex;
    justify-content: space-between;
    &>.el-col{
      width: 10.5%;
      height: 100%;
      background: url('../../../assets/image-af/bg2.png') no-repeat;
      background-size: 100% 100%;
      position: relative;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .signal{
        position: absolute;
        left: 15px;
        top: 15px;
        width: 16px;
        height: 16px;
      }
      .electric{
        position: absolute;
        right: 15px;
        top: 15px;
        width: 23px;
        height: 14px;
      }
      .boxName{
        position: absolute;
        bottom: 10px;
        text-align: center;
        left: 0;
        right: 0;
      }
      .contentInfo{
        text-align: center;
        font-size: 22px;
        font-weight: 700;
        color: #24FF00;
      }
      .fontBox{
        font-size: 18px;
      }
      .videoBox{
        width: 100%;
        height: 100%;
      }
      .redImage{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        background: #ff000042;
      }
    }
}
</style>