handwriting-board-admin/src/views/fileDetails/index.vue

<template>
  <div class="file-details">
    <div v-if="type === 'mp4'" class="video">
      <div ref="live1" :class="['live1', styleBig === 'live1' ? 'live-big' : styleBig === 'live2' ? 'live-small' : '']">
        <videoPlayer :video-src="path1" video-name="live1" @myFull="myFull"/>
      </div>
      <div ref="live2" :class="['live2', styleBig === 'live2' ? 'live-big' : styleBig === 'live1' ? 'live-small' : '']">
        <videoPlayer :video-src="path2" video-name="live2" @myFull="myFull"/>
      </div>
      <div v-if="styleBig" class="close" @click="close">
        <img :src="require(`@/assets/fileimg/cha.png`)">
      </div>
    </div>
    <div v-else class="photo">
      <el-carousel :autoplay="false" :loop="false" trigger="click" indicator-position="none" height="100%" @change="getImgInd">
        <el-carousel-item v-for="item in imgUrl" :key="item.id">
          <div :class="['photo1', styleBig === 'live1' ? 'photo-big' : styleBig === 'live2' ? 'photo-small' : '']" @click="change('live1')">
            <img :src="item[0].path" style="width: 100%; height: 100%;" >
          </div>
          <div :class="['photo2', styleBig === 'live2' ? 'photo-big' : styleBig === 'live1' ? 'photo-small' : '']" @click="change('live2')" >
            <img :src="item[1].path" style="width: 100%; height: 100%;" >
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="identification">{{ imgInd }}/{{ imgUrl.length }}</div>
      <div v-if="styleBig" class="close" @click="close">
        <img :src="require(`@/assets/fileimg/cha.png`)">
      </div>
    </div>
  </div>
</template>
<script>
import videoPlayer from '@/components/video/video.vue'
import 'video.js/dist/video-js.css'

// import { videoPlayer } from 'vue-video-player'
import { mapGetters } from 'vuex'
export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      styleBig: '',
      path1: '',
      path2: '',
      imgUrl: [],
      type: '',
      videoBigFlag: true,
      imgBigFlag: true,
      imgInd: 1
    }
  },
  computed: {
    ...mapGetters([
      'fileDetailsList'
    ])
  },
  created() {
    this.type = this.$route.query.type
    // this.$route.query.followUid,
    this.innitData(this.$route.query.ind)
  },
  mounted() {
    // 监听键盘按键事件
    const self = this
    this.$nextTick(function() {
      document.addEventListener('keyup', function(e) {
        // 此处填写你的业务逻辑即可
        if (e.keyCode === 27) {
          self.close()
        }
      })
    })
  },
  methods: {
    change(live) {
      console.log(live)
      this.styleBig = live
    },
    myFull(type) {
      this.change(type)
    },
    close() {
      this.styleBig = ''
    },
    innitData(ind) {
      console.log(this.fileDetailsList[ind])
      const data = this.fileDetailsList[ind]
      const imgArr = data.screenshot
      const videoArr = data.recordFile
      this.path1 = videoArr[0].path
      this.path2 = videoArr[1].path
      console.log(this.path1)
      this.imgUrl = this.arrTrans(imgArr, 2)
    },
    getImgInd(ind) {
      console.log(ind)
      this.imgInd = ind + 1
    },
    arrTrans(arr, num) {
      const newArr = []
      arr.forEach((item, index) => {
        const page = Math.floor(index / num) // 计算该元素为第几个素组内
        if (!newArr[page]) { // 判断是否存在
          newArr[page] = []
        }
        newArr[page].push(item)
      })
      return newArr
    }
  }
}
</script>
<style lang="scss" scope>
    .file-details {
        width: 100%;
        height: 100%;
        background: #6AA1F1;
        .video,
        .photo {
            width: 100%;
            height: 100%;
            position: relative;
            .live1 {
                width: 46%;
                height: 50%;
                position: absolute;
                left: 3%;
                top: 30%;
            }
            .live2 {
                width: 46%;
                height: 50%;
                position: absolute;
                left: 51%;
                top: 30%;
            }
            .live-big {
                position: absolute;
                left: 5%;
                top: 11%;
                width: 90%;
                height: 80%;
            }
            .live-small {
                 display: none;
                // position: absolute;
                // left: 75%;
                // top: 15%;
                // width: 15%;
                // height: 15%;
                // z-index: 1;
            }
            // 图片样式
            .photo1 {
                width: 45%;
                height: 50%;
                position: absolute;
                left: 4%;
                top: 30%;
                background: #fff;
            }
            .photo2 {
                width: 45%;
                height: 50%;
                position: absolute;
                left: 51%;
                top: 30%;
                background: #E1E1E1;
            }
            .photo-big {
                position: absolute;
                left: 5%;
                top: 11%;
                width: 90%;
                height: 80%;
            }
            .photo-small {
                display: none;
                // position: absolute;
                // left: 75%;
                // top: 15%;
                // width: 15%;
                // height: 15%;
                // z-index: 1;
            }
            .close {
                position: absolute;
                right: 6%;
                top: 12%;
                z-index: 2;
                width: 32px;
                height: 32px;
                text-align: center;
                line-height: 32px;
            }
            .identification {
              position: absolute;
              left: 50%;
              bottom: 12%;
              width: 30px;
              font-size: 20px;
            }
        }
    }
</style>
<style>
    .el-carousel {
        height: 100%;
    }
</style>