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="text-label">
                <span>{{defaultIndex+1}}</span>/<span>{{cameraDataList.length}}</span>
              </div>
              <div class="video-content">
              <h5-player :video-url="videoUrl" :stop-flag="selectedFlag"></h5-player>
              </div>
              <div class="text-label des-label">
                <span>通道名称: {{cameraDataList[defaultIndex].channelName}}</span>
                <span>通道编码: {{cameraDataList[defaultIndex].channelId}}</span>
              </div>
              <div class="footer-button" v-if="showFlag">
                <a-button type="primary" @click="applyNow(cameraDataList[defaultIndex])">立即申请</a-button>
                <a-button type="primary" style="margin-left:20px" @click="addIntoCart(cameraDataList[defaultIndex])">加入申请列表</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 { getUserInfo, getRole } from '@/api/user'
  // import { useRouter } from 'vue-router'
  import H5Player from '@/views/home/components/H5Player.vue'
  import mybus from '@/myplugins/mybus'
  import { message } from 'ant-design-vue'
  import { getStreamByChannelCode } from '@/api/videoSurveillance'
  import {getCameraLiveStream} from '@/api/file'
  import {willApplyCameraSelect,
    getApplyCameraListXha,
  } from '@/api/home'
  export default {
    name: '',
    components: {
      // VideoPlay,
      H5Player,
      LeftCircleOutlined,
      RightCircleOutlined
    },
    props: {
      cameraDataList: {
        type: Object,
        default: () => {
          return {}
        },
      },
      resetFlag:{
         type: Boolean,
        default: false
      }
    },
    mounted() {
      this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
      getUserInfo().then((res) => {
        if (res.data.data.superAdmin == '1') {
          this.showFlag = true
        } else {
          res.data.data.roleIdList.map((val) => {
            getRole(val).then((role) => {
              if (role.data.data.name === '视频管理员') {
                this.showFlag = true
              }
            })
          })
        }
      })
    },
    // directives: {
    //     viewer: viewer({
    //         debug: true,
    //     }),
    // },
    watch: {
      resetFlag: {
        // 关闭弹窗刷新底部个数显示数值
        handler(newVal, oldVal) {
          if (newVal) {
           this.defaultIndex = 0;
          }
        },
        // 立即处理 进入页面就触发
        immediate: true,
      },
    },
    data() {
      return {
        openVideo: false,
        videoStream: '',
         videoUrl:'', //视频预览url
         defaultIndex:0,//默认显示列表中的对一个
         selectedFlag:true,
         showFlag:false
        //  router:useRouter()
      }
    },
    methods: {
      openCurrentVideo(channelCode) {
        bus.$emit('openCurrentVideoSurveillance', channelCode)
      },
      show() {
        const viewer = this.$el.querySelector('.images').$viewer
        viewer.show()
      },
      //立即申请
      applyNow(item){
        getApplyCameraListXha().then(res => {
          let flag = true
          if (res.data.code == 0) {
            if(res.data.data.length >=10 ){
              message.warning('最多只能申请10个感知资源！')
              return
            }else{
              res.data.data.map((val) => {
                val.cameraInfo = JSON.parse(val.cameraInfo)
                console.log('applyNowapplyNow',val.cameraInfo);
                if(flag && val.cameraInfo.channelId == item.channelId){
                  flag = false
                }
              })
            }
            if(flag){
              willApplyCameraSelect().then(res1 => {
                if (res1.data.code == 0) {
                  if(res.data.data.length+res1.data.data.length>=10){
                    message.warning('最多只能申请10个感知资源！')
                    return
                  }
                  res1.data.data.map(val => {
                    if(item.channelId == val.channelId){
                      item.id = val.id
                    }
                  })
                }
                let obj = {
                  arr: [
                    {
                      checked: true,
                      delFlag: 0,
                      id: '1593084734789996545',
                      idtCameraChannel: '790582098133127168',
                      loading: false,
                      note1: '',
                      resourceId: '1522550195055828996',
                      resourceName: '摄像头列表',
                      type: '基础设施',
                    },
                  ],
                  deptName: '西海岸新区工业和信息化局',
                  deptId: '732560225344761856',
                }
                item.type = '基础设施'
                item.delFlag = 0
                item.resourceId = item.channelId
                item.resourceName = item.channelName
                obj.arr[0].note1 = JSON.stringify([item])
                if (obj.arr.length > 0) {
                  localStorage.setItem('applyList', JSON.stringify([obj]))
                  console.log('applyNowapplyNowobj',obj);
                  this.$router.push({
                    path: '/apply',
                  })
                }
              })
            }else{
              message.warning('该感知资源已申请！')
            }
          }
        })
      },
      //加入申购车
      addIntoCart(item){
         console.log('addIntoCartaddIntoCart',item);
          mybus.emit('selectCamera', item)
      },
      //获取视频控件所需播放地址
      getVideoUrl(data){
      let param = data;
      getCameraLiveStream(param).then((res) => {
      //console.log('555555rrrrr',res)
      if(res.data.data){
        this.videoUrl = res.data.data.url;
      }
      //visible.value = true
      //options.src = res.data.data
      //options.src ="wss://10.134.135.45:6014/proxy/10.10.20.15:559/openUrl/0kIF7La"
      })
      },
      //查看前一个
      handlePrev(){
        let maxLength = this.cameraDataList.length-1;
         console.log('opopopop',this.cameraDataList[maxLength]);
        if(this.defaultIndex === 0){
          this.defaultIndex = maxLength;
          console.log('opopopop',this.cameraDataList[maxLength]);
          //根据当前数据的channelId查询视频播放的url传递给H5组件调用接口
          //this.videoUrl =
            this.getVideoUrl(this.cameraDataList[maxLength]);
        } else{
           this.defaultIndex = this.defaultIndex - 1;
           console.log('uyutyuyopopopop',this.cameraDataList[this.defaultIndex]);
            this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
        }

      },
      //查看下一个
      handleNext(){
        let lastIndex =  this.cameraDataList.length-1;
          if(this.defaultIndex === Number(lastIndex)){
            this.defaultIndex = 0;
            console.log('opopopop',this.cameraDataList[0]);
            this.getVideoUrl(this.cameraDataList[0]);
          }else{
            this.defaultIndex = this.defaultIndex + 1;
               console.log('opopopop',this.cameraDataList[this.defaultIndex]);
                  this.getVideoUrl(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:-20px;
      text-align:center;
      font-size: 18px;
      // color: #1eacd6;
      }
      .des-label {
        color: #000;
        margin-top:10px;
        display: flex;
        justify-content: space-around;
      }
        .video-content{
     width: 750px;
     height:600px;
     text-align: left;
     padding: 5px;
    }
    .footer-button{
      display: flex;
      justify-content: center;
      // 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>