hi-ucs/front/src/views/home/videoSurveillance/components/CameraPopupOnMap.vue

<!--点击地图上单个点或者聚合点之后出现的操作弹窗autoplay -->
<template>
  <div class="pop-box">
    <div class="List-camera-pop">
        <a-carousel arrows>
              <template #prevArrow>
                <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                  <!-- <div style="background-color:red">11111111</div> -->
                  <div class="arrow-left" @click="handlePrev()"></div>
                </div>
              </template>
              <template #nextArrow>
                <div class="custom-slick-arrow" style="right: 10px">
                  <!-- <right-circle-outlined /> -->
                  <div class="arrow-right" @click="handleNext()"></div>
                </div>
              </template>
              <div
                v-for="url in cameraDataList"
                :width="800"
                :height="400"
                :key="url"
              >
              </div>
            </a-carousel>
          <div class="operation-content" style="position:ab">
              <div class="video-content">
              <h5-player :video-url="videoUrl"></h5-player> 
              </div>
              <div class="text-label">
                <span>{{defaultIndex}}</span>/<span>{{cameraDataList.length}}</span>
              </div>
              <div class="footer-button"> 
                <a-button type="primary" @click="applyNow(url)">立即申请</a-button>
                <a-button type="primary" style="margin-left:20px" @click="addIntoCart(url)">加入申购车</a-button>
                </div>
      </div>
    </div>
  </div>
</template>
<script>
  // import VideoPlay from '@/views/videoPlay/index.vue'
  // import 'viewerjs/dist/viewer.css'
  // import { directive as viewer } from "v-viewer"
    import {
    LeftCircleOutlined,
    RightCircleOutlined,
  } from '@ant-design/icons-vue'
  import H5Player from '@/views/home/components/H5Player.vue'
  import mybus from '@/myplugins/mybus'
  import { getStreamByChannelCode } from '@/api/videoSurveillance'
  export default {
    name: '',
    components: {
      // VideoPlay,
      H5Player,
      LeftCircleOutlined,
      RightCircleOutlined
    },
    props: {
      cameraDataList: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    mounted() {},
    // directives: {
    //     viewer: viewer({
    //         debug: true,
    //     }),
    // },
    data() {
      return {
        openVideo: false,
        videoStream: '',  
         videoUrl:'', //视频预览url
         defaultIndex:0//默认显示列表中的对一个
      }
    },
    methods: {
      openCurrentVideo(channelCode) {
        bus.$emit('openCurrentVideoSurveillance', channelCode)
      },
      show() {
        const viewer = this.$el.querySelector('.images').$viewer
        viewer.show()
      },
      //立即申请
      applyNow(item){
        console.log('applyNowapplyNow',item);
         mybus.emit('selectCamera', item)
      },
      //加入申购车
      addIntoCart(item){
         console.log('addIntoCartaddIntoCart',item);
          mybus.emit('selectCamera', item)
      },
      handlePrev(){
        let maxLength = this.cameraDataList.length-1;
        this.defaultIndex = this.defaultIndex - 1;
         console.log('opopopop',this.cameraDataList[maxLength]);
        if(this.defaultIndex === 0){
          console.log('opopopop',this.cameraDataList[maxLength]);
          //根据当前数据的channelId查询视频播放的url传递给H5组件调用接口
          //this.videoUrl =
        } else{
           console.log('uyutyuyopopopop',this.cameraDataList[this.defaultIndex]);
        }
       
      },
      handleNext(){
         this.defaultIndex = this.defaultIndex + 1;
          if(this.defaultIndex === this.cameraDataList.length){
          console.log('opopopop',this.cameraDataList[0]);
          }else{
               console.log('opopopop',this.cameraDataList[this.defaultIndex]); 
          }
       
      }
    },
  }
</script>
<style lang="less" scoped>
  .List-camera-pop {
    // width: 640px;
    // height: 320px;
    //background-color: #193059;
    font-size: 16px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    .content {
      // width: 280px;
      min-height: 100px;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      .green-cicle {
        width: 18px;
        height: 18px;
        background-color: rgba(0, 218, 128, 0.4);
        border-radius: 50%;
        position: relative;
        div {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #00da80;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -5px;
          margin-top: -5px;
        }
      }
      b {
        color: #fff;
      }
      p {
        color: #1eacd6;
      }
    }
    .images {
      width: 290px;
      height: 160px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .button {
      width: 80px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background-color: #2fe2ed;
      border-radius: 4px;
      margin: 8px auto 0;
      cursor: pointer;
    }
    .operation-content{
       position: absolute;
      z-index: 800;
      top: 0.1rem;
      //right: 0.1rem;
      left:0.8rem;
      .text-label{
      width:800px;
      height:30px;
      margin-top:10px;
      text-align:center;
      font-size: 18px;
      }
        .video-content{
     width: 750px;
     height:600px; 
     text-align: left; 
     padding: 5px;
    }
    .footer-button{
       width: 750px;
       //height:50px; 
       text-align: center; 
       padding-top:5px;
    }
    }
    .ant-carousel {
    width: 960px;
    //height: 700px;
    margin-left: 8px;
  }
  .ant-carousel :deep(.slick-slide) {
    text-align: center;
    height: 650px;
    line-height: 200px;
    //background: #ccc;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
    width: 50px;
    height: 50px;
    font-size: 50px;
    color: #fff;
    //background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.8;
    z-index: 1;
    .arrow-left{
      width:48px;
      height:48px;
      background-image: url('~@/assets/home/arrow-left.png');
    }
    .arrow-right{
      width:48px;
      height:48px;
      background-image: url('~@/assets/home/arrow-right.png');
    }
  }
  .ant-carousel :deep(.custom-slick-arrow:before) {
    display: none;
  }
  .ant-carousel :deep(.custom-slick-arrow:hover) {
    opacity: 1;
  }

  .ant-carousel :deep(.slick-slide h3) {
    color: #fff;
  }

  .ant-carousel :deep(.slick-dots) {
   display: none !important;
  }
   
  }
  // .current-video {
  //   width: 320px;
  //   height: 180px;
  // }
</style>