sgxt_web/src/components/common/TestDiv.vue

<template>
  <div class="test-div" v-if="dataList && dataList.length > 0">
    <div class="test-header">
      <span class="test-title">消息通知</span>
      <div class="header-right">
        <span class="test-countdown">{{ countdown }}s</span>
        <el-icon class="close-icon" @click="handleClose">
          <Close />
        </el-icon>
      </div>
    </div>
    <div class="test-content">
      <Item v-for="(item, index) in dataList" :key="index" :item="item" />
    </div>
  </div>
</template>

<script setup>
// 测试div组件，用于在后台和大屏页面都显示
import { ref, onMounted, onUnmounted } from 'vue'
import { Close } from '@element-plus/icons-vue'
import emitter from "@/utils/eventBus.js"; // 导入事件总线
import { qcckGet } from '@/api/qcckApi'
import Item from './item.vue'
import { AudioPlayerClass } from '@/utils/audioPlayer.js'
import { getItem } from '@/utils/storage.js'
const dataList = ref([])
const timekeeping = ref(null)
const countdown = ref(0) // 倒计时时间（秒）

// 音频播放器实例映射
const audioPlayers = ref({
  '01': null, // 预警信息
  '02': null, // 信息上报
  '03': null, // 研判审批
  '04': null, // 研判指令
  '05': null,  // 线索下发,
  '06': null, // 警情监测
  '07': null, // 线索处理
  '08': null, // 线索下发
  '09': null, // 线索处理
  '10': null, // 林安码
  '11': null, // 发布了新的线索
  '12': null, // 有新的研判指令
  '13': null, // 有新的研判约稿通知
  '14': null, // 有新的公文发布
  '15': null, // 有新的待审核工作（补发音效）
})

// 音频文件路径映射
const audioPaths = {
  '01': require('@/assets/images/01.mp3'),//高级预计信息前置
  '02': require('@/assets/images/02.mp3'),//一般预警信息前置
  '03': require('@/assets/images/03.mp3'),//信息前置
  '04': require('@/assets/images/04.mp3'),//红色预警
  '05': require('@/assets/images/05.mp3'),//新的重点人
  '06': require('@/assets/images/06.mp3'),//一级临控预警
  '07': require('@/assets/images/07.mp3'),//有新的布控预警情
  '08': require('@/assets/images/08.mp3'),//有新的标签预警
  '09': require('@/assets/images/09.mp3'),//信息汇聚系统有新信息
  '10': require('@/assets/images/10.mp3'),//林安码
  '11': require('@/assets/images/11.mp3'),//发布了新的线索
  '12': require('@/assets/images/12.mp3'),//有新的研判指令
  '13': require('@/assets/images/13.mp3'),//有新的研判约稿通知
  '14': require('@/assets/images/14.mp3'),//有新的公文发布
  '15': require('@/assets/images/16.mp3'),//有新的警情监测预警，请注意查收
}

// 初始化音频播放器
const initAudioPlayers = () => {
  Object.keys(audioPaths).forEach(type => {
    try {
      audioPlayers.value[type] = new AudioPlayerClass()
      audioPlayers.value[type].init(audioPaths[type], false)
    } catch (error) {
      console.error(`初始化类型${type}的音频播放器失败:`, error)
    }
  })
}

// 根据类型播放音频
const playAudioByType = (val) => {


  switch (val.typeMasgeLx) {
    case '01'://预警
      // 01 布控预警、02 七类重点人、03 政保
      switch (val.yjlb) {
        case '01':
          switch (val.yjJb) {
            case '01':
              audioPlayers.value['01'].play()
              audioPlayers.value['06'].play()
              break;
            default:
              audioPlayers.value['02'].play()
              audioPlayers.value['07'].play()
              break;
          }
          break
        case '02':
          switch (val.yjJb) {
            case '01':
              audioPlayers.value['01'].play()
              audioPlayers.value['04'].play()
              break;
            default:
              audioPlayers.value['02'].play()
              audioPlayers.value['05'].play()
              break;
          }
          break
        case '03':
          break
      }
      break
    case '02'://信息汇聚
      audioPlayers.value['03'].play()
      audioPlayers.value['09'].play()
      break
    case '03'://约稿
      audioPlayers.value['03'].play()
      audioPlayers.value['13'].play()
      break
    case '04'://指令
      audioPlayers.value['03'].play()
      audioPlayers.value['12'].play()
      break
    case '05'://新线索
      audioPlayers.value['03'].play()
      audioPlayers.value['11'].play()
      break
    case '06'://监测
      audioPlayers.value['02'].play()
      audioPlayers.value['15'].play()
      break
    // case '07':
    //   audioPlayers.value['07'].play()
    //   break
    case '08'://林安码
      audioPlayers.value['03'].play()
      audioPlayers.value['10'].play()
      break
    // case '10':
    //   audioPlayers.value['10'].play()
    //   break
    default:
      break
  }




  // if (audioPlayers.value[type]) {
  //   try {
  //     audioPlayers.value[type].play()
  //   } catch (error) {
  //     console.error(`播放类型${type}的音频失败:`, error)
  //   }
  // }
}
// 手动关闭
const handleClose = () => {
  if (timekeeping.value) {
    clearInterval(timekeeping.value)
    timekeeping.value = null
  }
  dataList.value = []
}

// 重置倒计时
const resetCountdown = () => {
  if (timekeeping.value) {
    clearInterval(timekeeping.value)
  }
  countdown.value = 15
  timekeeping.value = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timekeeping.value)
      dataList.value = []
      timekeeping.value = null
    }
  }, 1000)
}


// 做一个定时器15s一次
const checkNews = ref(null)
const checkNewsInterval = 15000 // 15秒
checkNews.value = setInterval(() => {
  dataModel()
}, checkNewsInterval)
onMounted(() => {
  // 初始化音频播放器
  initAudioPlayers()
  emitter.on('webSocketMessage', (newsDate) => {
    if (newsDate) {
      dataList.value = newsDate
      // dataList.value.unshift({...newsDate.data,typeMasgeLx:newsDate.type})
      // 根据消息类型播放音频
      playAudioByType(newsDate[0])
      resetCountdown()
    }
  })
})
const idEntityCard = ref(getItem('idEntityCard'))
const dataModel = () => {
  qcckGet({}, '/mosty-gsxt/dsjJbxx/message').then(res => {
    if (res) {
      // const yjmasg = res.filter(item => item.type === '01')
      // if (yjmasg.length > 0) {
      //   emitter.emit('openYp', yjmasg[0].obj); // 触发音频播放
      // }
      const data = res.filter(item => item.sfzList.includes(idEntityCard.value))
      const infoMasge = data.map(item => {
        return {
          ...item.obj,
          typeMasgeLx: item.type
        }
      })
      console.log(infoMasge, "xxxxxxxxxxxx");
      emitter.emit('webSocketMessage', infoMasge)
    }
  })

}

// if (newsDate.type === '01') {
//           // 触发音频播放
//           console.log('触发音频播放');
//           emitter.emit('openYp', newsDate.data); // 传递消息数据
//         } else {
onUnmounted(() => {
  emitter.off('webSocketMessage')
  if (timekeeping.value) {
    clearInterval(timekeeping.value)
  }
  // 销毁所有音频播放器实例
  Object.values(audioPlayers.value).forEach(player => {
    if (player) {
      player.destroy()
    }
  })
  // 清除定时器
  if (checkNews.value) {
    clearInterval(checkNews.value)
    checkNews.value = null
  }
  // 组件卸载时执行的操作
  console.log('组件卸载时执行的操作')
})
</script>

<style scoped lang="scss">
.test-div {
  width: 400px;
  max-height: 250px;
  position: fixed;
  bottom: 2%;
  right: 2%;
  z-index: 1999;
  background: linear-gradient(135deg, #0a3b6d 0%, #1a5a9e 100%);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 255, 255, 0.3), 0 0 20px rgba(0, 255, 255, 0.1);
  overflow: hidden;
  animation: slideIn 0.3s ease-out;

  @keyframes slideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
}

.test-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(0, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
}

.test-title {
  font-size: 16px;
  font-weight: bold;
  color: #00ffff;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);

  &::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #00ffff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    animation: pulse 1.5s ease-in-out infinite;
  }

  @keyframes pulse {

    0%,
    100% {
      opacity: 1;
      transform: scale(1);
      box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    }

    50% {
      opacity: 0.8;
      transform: scale(1.2);
      box-shadow: 0 0 20px rgba(0, 255, 255, 1);
    }
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.test-countdown {
  font-size: 14px;
  color: #00ffff;
  background: rgba(0, 255, 255, 0.1);
  padding: 4px 12px;
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 12px;
  font-weight: 500;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.close-icon {
  font-size: 18px;
  color: #00ffff;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 4px;
  border-radius: 4px;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);

  &:hover {
    background: rgba(0, 255, 255, 0.2);
    transform: rotate(90deg);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
  }
}

.test-content {
  max-height: 150px;
  overflow-y: auto;
  padding: 12px;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */

  &::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
  }
}
</style>