erqi-web/src/views/business/alarm/monitor.vue

<template>
  <div class="monitor-container" @mousedown="drag">
    <div class="tab">
        <div v-for="(item,index) in tabs"
            :key="index"
            :class="['tab-item']"
            @click="handle(index)">{{item}}</div>
    </div>
    <div class="resize" :style="{ resize: 'both', overflow: 'auto' }"></div>
    <div class="flv-container"><FlvPlayerComponent v-if="videoUrl" :url="videoUrl"/></div>
  </div>
</template>
<script setup>
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
import { dragEvent, resizeEvent } from '@/utils/common'
import FlvPlayerComponent from '@/components/FlvPlayer/index.vue'
import { dsVideoList, cctvExport } from '@/api/device.js'
import useMapStore from '@/store/modules/map'
import { ElMessage } from 'element-plus'

const mapStore = useMapStore()
const videoData = computed(() => mapStore.locate.data)
const tabs = [
    '锁定轮询', '重新轮询', '巡检报告'
]
const data = ref([])
const lock = ref(false)
let timer = null
let monitorIndex = 0
const videoUrl = ref('')

const handle = (index) => {
  if(index === 0) {
    lock.value = true
    ElMessage.success('锁定成功')
  }else if(index === 1) {
    lock.value = false
    ElMessage.success('成功轮询')
  }else if(index === 2) { // 巡检报告下载
    cctvExport({}).then(res => {
      const blob = new Blob([ res ], { type: 'application/pdf' })
      const pdfUrl = URL.createObjectURL(blob)
      window.open(pdfUrl, '_blank')
    })
  }
}
const clearTimer = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}
const initIndex = () => {
  monitorIndex = 0
}
const init = () => {
  const params = {}
  videoUrl.value = ''
  dsVideoList(params).then(res => {
    data.value = res.data.filter(i => i.videoUrl).sort((a, b) => a.playIndex - b.playIndex)
    videoUrl.value = data.value[monitorIndex].videoUrl
    mapStore.updateLocate(data.value[monitorIndex])
    clearTimer()
    handlePolling(true) // 开始轮询
    timer = setInterval(() => {
      if(lock.value) {
        return false
      }
      videoUrl.value = ''
      nextTick(() => {
        if(monitorIndex >= data.value.length - 1) {
          handlePolling(false) // 轮询结束
          monitorIndex = 0
          handlePolling(true) // 开始轮询
        }else{
          monitorIndex++
        }
        videoUrl.value = data.value[monitorIndex].videoUrl
      })
      mapStore.updateLocate(data.value[monitorIndex])
    }, 60 * 1000 * 0.5)
  })
}
const handlePolling = (flag) => {
  console.log(flag + '---轮询')
}
/**
 * 拖拽事件
 * @param e
 *
 */
const drag = (e) => {
  if(e.target.className === 'resize') {
    resizeEvent(e, 'resize', (i) => {
      document.querySelector('.monitor-container').style.height = i.height + 'px'
      document.querySelector('.monitor-container').style.width = i.width + 'px'
    })
  }else{
    dragEvent(e, 'monitor-container', () => {
    })
  }
}
onMounted(() => {
  // // 查询当前轮询到第几个
  // initIndex()
  init()
})
onUnmounted(() => {
  clearTimer()
})
</script>
<style scoped lang="scss">

.monitor-container{
  position: fixed;
  right: 40px;
  bottom: 46px;

//   display: flex;
//   flex-direction: column;
//   gap: 20px;

  width: 524px;
  height: 386px;
  background: linear-gradient( 90deg, #0C1929 0%, rgba(12,25,41,0.6) 100%);
  border: 1px solid;
  border-image: linear-gradient(270deg, rgba(42, 159, 255, 0.2), rgba(42, 159, 255, 0.8)) 1 1;
  padding: 20px;
  .line{
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 20px;
  }
  .tab{
    display: flex;
    position: relative;
    z-index: 10;
    .tab-item{
        background: linear-gradient( 180deg, rgba(46,164,240,0.26) 0%, #2EA4F0 100%);
        box-shadow: inset 0px -1px 2px 0px rgba(83,203,255,0.22);
        color: #FFFFFF;
        font-size: 14px;
        width: 50%;
        height: 36px;
        text-align: center;
        line-height: 36px;
        box-sizing: border-box;
        cursor: pointer;
        &:active{
            background: linear-gradient( 180deg, #2EA4F0 0%, rgba(46,164,240,0.35) 100%);
            box-shadow: inset 0px 2px 4px 0px rgba(83,203,255,0.4);
            // border-radius: 2px 2px 0px 0px;
            border: 1px solid;
            border-image: linear-gradient(180deg, rgba(22, 213, 255, 1), rgba(22, 213, 255, 0)) 1 1;
            clip-path: inset(0 0 round 2px);
        }
    }
  }
  .flv-container{
    width: 100%;
    height: calc(100% - 50px);
    margin-top: 10px;
  }
  .resize{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 524px;
    height: 386px;
  }
}
</style>