This commit is contained in:
lcw
2026-04-07 11:12:09 +08:00
parent 582b8677fc
commit ef3c23a03a
13 changed files with 1206 additions and 763 deletions

View File

@ -17,140 +17,137 @@
<script setup>
// 测试div组件用于在后台和大屏页面都显示
import { ref, onMounted, onUnmounted } from 'vue'
import { Close } from '@element-plus/icons-vue'
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) // 倒计时时间(秒)
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, // 有新的待审核工作(补发音效)
})
"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'),//有新的警情监测预警,请注意查收
}
"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/15.mp3"), //有新的警情监测预警,请注意查收
"16": require("@/assets/images/16.mp3") //有新的一级临控预警,请及时签收处理!
};
// 初始化音频播放器
const initAudioPlayers = () => {
Object.keys(audioPaths).forEach(type => {
Object.keys(audioPaths).forEach((type) => {
try {
audioPlayers.value[type] = new AudioPlayerClass()
audioPlayers.value[type].init(audioPaths[type], false)
audioPlayers.value[type] = new AudioPlayerClass();
audioPlayers.value[type].init(audioPaths[type], false);
} catch (error) {
console.error(`初始化类型${type}的音频播放器失败:`, error)
console.error(`初始化类型${type}的音频播放器失败:`, error);
}
})
}
});
};
// 根据类型播放音频
const playAudioByType = (val) => {
switch (val.typeMasgeLx) {
case '01'://预警
case "01": //预警
// 01 布控预警、02 七类重点人、03 政保
switch (val.yjlb) {
case '01':
case "01":
switch (val.yjJb) {
case '01':
audioPlayers.value['01'].play()
audioPlayers.value['06'].play()
case "01":
audioPlayers.value["01"].play();
audioPlayers.value["06"].play();
break;
default:
audioPlayers.value['02'].play()
audioPlayers.value['07'].play()
audioPlayers.value["02"].play();
audioPlayers.value["07"].play();
break;
}
break
case '02':
break;
case "02":
switch (val.yjJb) {
case '01':
audioPlayers.value['01'].play()
audioPlayers.value['04'].play()
case "01":
audioPlayers.value["01"].play();
audioPlayers.value["04"].play();
break;
default:
audioPlayers.value['02'].play()
audioPlayers.value['05'].play()
audioPlayers.value["02"].play();
audioPlayers.value["05"].play();
break;
}
break
case '03':
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
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
case "08": //林安码
audioPlayers.value["03"].play();
audioPlayers.value["10"].play();
break;
case "11":
audioPlayers.value["03"].play();
audioPlayers.value["16"].play();
break;
default:
break
break;
}
// if (audioPlayers.value[type]) {
// try {
// audioPlayers.value[type].play()
@ -158,73 +155,73 @@ const playAudioByType = (val) => {
// console.error(`播放类型${type}的音频失败:`, error)
// }
// }
}
};
// 手动关闭
const handleClose = () => {
if (timekeeping.value) {
clearInterval(timekeeping.value)
timekeeping.value = null
clearInterval(timekeeping.value);
timekeeping.value = null;
}
dataList.value = []
}
dataList.value = [];
};
// 重置倒计时
const resetCountdown = () => {
if (timekeeping.value) {
clearInterval(timekeeping.value)
clearInterval(timekeeping.value);
}
countdown.value = 15
countdown.value = 15;
timekeeping.value = setInterval(() => {
countdown.value--
countdown.value--;
if (countdown.value <= 0) {
clearInterval(timekeeping.value)
dataList.value = []
timekeeping.value = null
clearInterval(timekeeping.value);
dataList.value = [];
timekeeping.value = null;
}
}, 1000)
}
}, 1000);
};
// 做一个定时器15s一次
const checkNews = ref(null)
const checkNewsInterval = 15000 // 15秒
const checkNews = ref(null);
const checkNewsInterval = 15000; // 15秒
checkNews.value = setInterval(() => {
dataModel()
}, checkNewsInterval)
dataModel();
}, checkNewsInterval);
onMounted(() => {
// 初始化音频播放器
initAudioPlayers()
emitter.on('webSocketMessage', (newsDate) => {
initAudioPlayers();
emitter.on("webSocketMessage", (newsDate) => {
if (newsDate) {
dataList.value = newsDate
dataList.value = newsDate;
// dataList.value.unshift({...newsDate.data,typeMasgeLx:newsDate.type})
// 根据消息类型播放音频
playAudioByType(newsDate[0])
resetCountdown()
playAudioByType(newsDate[0]);
resetCountdown();
}
})
})
const idEntityCard = ref(getItem('idEntityCard'))
});
});
const idEntityCard = ref(getItem("idEntityCard"));
const dataModel = () => {
qcckGet({}, '/mosty-gsxt/dsjJbxx/message').then(res => {
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 => {
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)
emitter.emit("webSocketMessage", infoMasge);
}
})
}
});
};
// if (newsDate.type === '01') {
// // 触发音频播放
@ -232,24 +229,24 @@ const dataModel = () => {
// emitter.emit('openYp', newsDate.data); // 传递消息数据
// } else {
onUnmounted(() => {
emitter.off('webSocketMessage')
emitter.off("webSocketMessage");
if (timekeeping.value) {
clearInterval(timekeeping.value)
clearInterval(timekeeping.value);
}
// 销毁所有音频播放器实例
Object.values(audioPlayers.value).forEach(player => {
Object.values(audioPlayers.value).forEach((player) => {
if (player) {
player.destroy()
player.destroy();
}
})
});
// 清除定时器
if (checkNews.value) {
clearInterval(checkNews.value)
checkNews.value = null
clearInterval(checkNews.value);
checkNews.value = null;
}
// 组件卸载时执行的操作
console.log('组件卸载时执行的操作')
})
console.log("组件卸载时执行的操作");
});
</script>
<style scoped lang="scss">
@ -299,7 +296,7 @@ onUnmounted(() => {
text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
&::before {
content: '';
content: "";
display: inline-block;
width: 8px;
height: 8px;
@ -310,7 +307,6 @@ onUnmounted(() => {
}
@keyframes pulse {
0%,
100% {
opacity: 1;

View File

@ -1,105 +1,141 @@
<template>
<div class="test-item" v-if="item.typeMasgeLx == '01'" @click="goDetail(item.id, item.typeMasgeLx, item)">
<div
class="test-item"
v-if="item.typeMasgeLx == '01' || item.typeMasgeLx == '11'"
@click="goDetail(item.id, item.typeMasgeLx, item)"
>
<div class="item-header">
<div class="item-title">{{ item.yjBt || '' }}</div>
<div class="item-type">{{ item.yjlb == '01' ? '布控预警' : item.yjlb == '02' ? '七类重点人' : '政保' }}</div>
<div class="item-title">{{ item.yjBt || "" }}</div>
<div class="item-type">
{{
item.yjlb == "01"
? "布控预警"
: item.yjlb == "02"
? "七类重点人"
: "政保"
}}
</div>
</div>
<div class="item-message">{{ item.yjNr }}</div>
<div class="item-time">{{ item.yjSj || '' }}</div>
<div class="item-time">{{ item.yjSj || "" }}</div>
</div>
<div class="test-item" v-if="item.typeMasgeLx == '02'" @click="goDetail(item.id, item.typeMasgeLx)">
<div
class="test-item"
v-if="item.typeMasgeLx == '02'"
@click="goDetail(item.id, item.typeMasgeLx)"
>
<div class="item-header">
<div class="item-title">{{ item.qbmc || '' }}</div>
<div class="item-title">{{ item.qbmc || "" }}</div>
<div class="item-type">{{ informationMap[item.typeMasgeLx] }}</div>
</div>
<div class="item-message">{{ item.qbnr }}</div>
<div class="item-time">{{ item.xtCjsj || '' }}</div>
<div class="item-time">{{ item.xtCjsj || "" }}</div>
</div>
<div class="test-item" v-if="item.typeMasgeLx == '03'" @click="goDetail(item.id, item.typeMasgeLx)">
<div
class="test-item"
v-if="item.typeMasgeLx == '03'"
@click="goDetail(item.id, item.typeMasgeLx)"
>
<div class="item-header">
<div class="item-title">{{ item.ypyt || '' }}</div>
<div class="item-title">{{ item.ypyt || "" }}</div>
<div class="item-type">{{ informationMap[item.typeMasgeLx] }}</div>
</div>
<div class="item-message">{{ item.ssbm }}</div>
<div class="item-time">{{ item.ypsj || '' }}</div>
<div class="item-time">{{ item.ypsj || "" }}</div>
</div>
<div class="test-item" v-if="item.typeMasgeLx == '04'" @click="goDetail(item.id, item.typeMasgeLx)">
<div
class="test-item"
v-if="item.typeMasgeLx == '04'"
@click="goDetail(item.id, item.typeMasgeLx)"
>
<div class="item-header">
<div class="item-title">{{ item.zlbt || '' }}</div>
<div class="item-title">{{ item.zlbt || "" }}</div>
<div class="item-type">{{ informationMap[item.typeMasgeLx] }}</div>
</div>
<div class="item-message" v-html="item.zlnr"></div>
<div class="item-time">{{ item.xtCjsj || '' }}</div>
<div class="item-time">{{ item.xtCjsj || "" }}</div>
</div>
<div class="test-item" v-if="item.typeMasgeLx == '05'" @click="goDetail(item.id, item.typeMasgeLx)">
<div
class="test-item"
v-if="item.typeMasgeLx == '05'"
@click="goDetail(item.id, item.typeMasgeLx)"
>
<div class="item-header">
<div class="item-title">{{ item.zlbt || '' }}</div>
<div class="item-title">{{ item.zlbt || "" }}</div>
<div class="item-type">{{ informationMap[item.typeMasgeLx] }}</div>
</div>
<div class="item-message" v-html="item.zlnr"></div>
<div class="item-time">{{ item.xtCjsj || '' }}</div>
<div class="item-time">{{ item.xtCjsj || "" }}</div>
</div>
<div class="test-item" v-if="item.typeMasgeLx == '06'" @click="goDetail(item.id, item.typeMasgeLx)">
<div
class="test-item"
v-if="item.typeMasgeLx == '06'"
@click="goDetail(item.id, item.typeMasgeLx)"
>
<div class="item-header">
<div class="item-title">{{ item.gxdwmc || '' }}</div>
<div class="item-title">{{ item.gxdwmc || "" }}</div>
<div class="item-type">{{ informationMap[item.typeMasgeLx] }}</div>
</div>
<div class="item-message">{{ item.bcjjnr }}</div>
<div class="item-time">{{ item.bjsj || '' }}</div>
<div class="item-time">{{ item.bjsj || "" }}</div>
</div>
<div class="test-item" v-if="item.typeMasgeLx == '08'" @click="goDetail(item.id, item.typeMasgeLx)">
<div
class="test-item"
v-if="item.typeMasgeLx == '08'"
@click="goDetail(item.id, item.typeMasgeLx)"
>
<div class="item-header">
<div class="item-title">{{ item.qbmc || '' }}</div>
<div class="item-title">{{ item.qbmc || "" }}</div>
<div class="item-type">{{ informationMap[item.typeMasgeLx] }}</div>
</div>
<div class="item-message">{{ item.qbnr }}</div>
<div class="item-time">{{ item.sxsbsj || '' }}</div>
<div class="item-time">{{ item.sxsbsj || "" }}</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { useRouter } from "vue-router";
import emitter from "@/utils/eventBus.js"; // 导入
const router = useRouter()
const router = useRouter();
const props = defineProps({
item: {
type: Object,
default: () => ({})
}
})
});
const informationMap = {
'01': '预警信息',
'02': '信息上报',
'03': '研判约稿',
'04': '研判指令',
'05': '线索下发',
'06': '警情监测',
'08': '林安码信息',
}
const emit = defineEmits(['goDetail'])
"01": "预警信息",
"02": "信息上报",
"03": "研判约稿",
"04": "研判指令",
"05": "线索下发",
"06": "警情监测",
"08": "林安码信息"
};
const emit = defineEmits(["goDetail"]);
const goDetail = (id, lx, val) => {
let path = ''
let path = "";
switch (lx) {
case '01':
emitter.emit('openYp', val);
case "01":
case "11":
emitter.emit("openYp", val);
break;
case '02':
path = '/InfoCollection'
case "02":
path = "/InfoCollection";
break;
case '03':
path = '/dataReduction'
case "03":
path = "/dataReduction";
break;
case '04':
path = '/judgmentCommand'
case "04":
path = "/judgmentCommand";
break;
case '05':
path = '/InstructionInformation'
case "05":
path = "/InstructionInformation";
break;
case '06':
path = '/policeReport'
case "06":
path = "/policeReport";
break;
case '08':
path = '/lamXs'
case "08":
path = "/lamXs";
break;
}
router.push({
@ -107,8 +143,8 @@ const goDetail = (id, lx, val) => {
query: {
id: id
}
})
}
});
};
</script>
<style lang="scss" scoped>
.test-item {