lcw
This commit is contained in:
240
src/components/common/TestDiv.vue
Normal file
240
src/components/common/TestDiv.vue
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user