lcw

src/components/common/TestDiv copy.vue

@@ -0,0 +1,240 @@
+<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 WebSoketClass from '@/utils/webSocket.js'
+import emitter from "@/utils/eventBus.js"; // 导入事件总线
+import Item from './item.vue'
+import { AudioPlayerClass } from '@/utils/audioPlayer.js'
+const webSoket = new WebSoketClass()
+const dataList = ref([])
+const timekeeping = ref(null)
+const countdown = ref(0) // 倒计时时间（秒）
+
+// 音频播放器实例映射
+const audioPlayers = ref({
+  '02': null, // 信息上报
+  '03': null, // 研判审批
+  '04': null, // 研判指令
+  '05': null  // 线索下发
+})
+
+// 音频文件路径映射
+const audioPaths = {
+  '02': require('@/assets/images/cjyp.mp3'),
+  '03': require('@/assets/images/ypbg.mp3'),
+  '04': require('@/assets/images/ypzl.mp3'),
+  '05': require('@/assets/images/xsyp.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 = (type) => {
+  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)
+}
+onMounted(() => {
+  // 初始化音频播放器
+  initAudioPlayers()
+
+  emitter.on('webSocketMessage', (newsDate) => {
+    if (newsDate) {
+        dataList.value.unshift({...newsDate.data,typeMasgeLx:newsDate.type})
+        // 根据消息类型播放音频
+        playAudioByType(newsDate.type)
+      resetCountdown()
+    }
+  })
+  // 组件挂载时执行的操作
+  webSoket.connect()
+  console.log('组件挂载时执行的操作')
+})
+onUnmounted(() => {
+  webSoket.closeConnection()
+  emitter.off('webSocketMessage')
+  if (timekeeping.value) {
+    clearInterval(timekeeping.value)
+  }
+  // 销毁所有音频播放器实例
+  Object.values(audioPlayers.value).forEach(player => {
+    if (player) {
+      player.destroy()
+    }
+  })
+  // 组件卸载时执行的操作
+  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>

src/components/common/TestDiv.vue

@@ -19,11 +19,11 @@
 // 测试div组件，用于在后台和大屏页面都显示
 import { ref, onMounted, onUnmounted } from 'vue'
 import { Close } from '@element-plus/icons-vue'
-import WebSoketClass from '@/utils/webSocket.js'
 import emitter from "@/utils/eventBus.js"; // 导入事件总线
+import { qcckGet } from '@/api/qcckApi'
 import Item from './item.vue'
 import { AudioPlayerClass } from '@/utils/audioPlayer.js'
-const webSoket = new WebSoketClass()
+import {getItem} from '@/utils/storage.js'
 const dataList = ref([])
 const timekeeping = ref(null)
 const countdown = ref(0) // 倒计时时间（秒）
@@ -90,24 +90,56 @@ const resetCountdown = () => {
     }
   }, 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.unshift({...newsDate.data,typeMasgeLx:newsDate.type})
+      dataList.value = newsDate
-        // 根据消息类型播放音频
+      // dataList.value.unshift({...newsDate.data,typeMasgeLx:newsDate.type})
-        playAudioByType(newsDate.type)
+      // 根据消息类型播放音频
+      playAudioByType(newsDate[0].typeMasgeLx)
       resetCountdown()
     }
   })
-  // 组件挂载时执行的操作
-  webSoket.connect()
-  console.log('组件挂载时执行的操作')
 })
+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); // 触发音频播放
+      } else {
+const data=res.filter(item=>item.sfzList.includes(idEntityCard.value))
+        const infoMasge =data.map(item => {
+          return {
+            ...item.obj,
+            typeMasgeLx: item.type
+          }
+        })
+        console.log(infoMasge);
+        emitter.emit('webSocketMessage', infoMasge)
+      }
+    }
+  })
+
+}
+
+// if (newsDate.type === '01') {
+//           // 触发音频播放
+//           console.log('触发音频播放');
+//           emitter.emit('openYp', newsDate.data); // 传递消息数据
+//         } else {
 onUnmounted(() => {
-  webSoket.closeConnection()
   emitter.off('webSocketMessage')
   if (timekeeping.value) {
     clearInterval(timekeeping.value)
@@ -118,6 +150,11 @@ onUnmounted(() => {
       player.destroy()
     }
   })
+  // 清除定时器
+  if (checkNews.value) {
+    clearInterval(checkNews.value)
+    checkNews.value = null
+  }
   // 组件卸载时执行的操作
   console.log('组件卸载时执行的操作')
 })
@@ -143,6 +180,7 @@ onUnmounted(() => {
       transform: translateX(100%);
       opacity: 0;
     }
+
     to {
       transform: translateX(0);
       opacity: 1;
@@ -180,11 +218,14 @@ onUnmounted(() => {
   }
 
   @keyframes pulse {
-    0%, 100% {
+
+    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);
@@ -230,11 +271,14 @@ onUnmounted(() => {
   max-height: 150px;
   overflow-y: auto;
   padding: 12px;
-  scrollbar-width: none; /* Firefox */
+  scrollbar-width: none;
-  -ms-overflow-style: none; /* IE and Edge */
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
 
   &::-webkit-scrollbar {
-    display: none; /* Chrome, Safari and Opera */
+    display: none;
+    /* Chrome, Safari and Opera */
   }
 }
 </style>

src/components/common/item.vue

@@ -49,6 +49,7 @@ const informationMap = {
   '04': '研判指令',
   '05': '线索下发',
 }
+const emit=defineEmits(['goDetail'])
 const goDetail = (id, lx) => {
   let path = ''
   switch (lx) {