diff --git a/src/assets/images/alarm_music.mp3 b/src/assets/images/alarm_music.mp3 new file mode 100644 index 00000000..2dbb5051 Binary files /dev/null and b/src/assets/images/alarm_music.mp3 differ diff --git a/src/utils/util.ts b/src/utils/util.ts index 48a98fea..16369597 100644 --- a/src/utils/util.ts +++ b/src/utils/util.ts @@ -310,3 +310,8 @@ export function filterEnum( if (type == "tag") return filterData?.tagType ? filterData.tagType : ""; return filterData ? filterData[label] : "--"; } + +// 获取assets静态资源 +export const getAssetsFile = (url) => { + return new URL(`../assets/images/${url}`, import.meta.url).href +} diff --git a/src/views/commandScreen/commandCenter/index.vue b/src/views/commandScreen/commandCenter/index.vue index 6c9a7d45..83808fb5 100644 --- a/src/views/commandScreen/commandCenter/index.vue +++ b/src/views/commandScreen/commandCenter/index.vue @@ -138,39 +138,39 @@ function expand() { onMounted(() => { mqttMSG(); - // setTimeout(() => { - // openPeopleCountDialog({ - // index: 10, - // title: "人员呼叫", - // timeOut: 10, - // timeFlag: null, - // show: true, - // mapsDetail: { - // alarmPersonId: "1795271026055901186", - // alarmPersonName: "测试0528", - // alarmTime: "2024-06-03 19:19:23", - // departmentName: null, - // disposalReport: null, - // dispositionStatus: 1, - // emergencyDetail: null, - // emergencyTypeId: "-1", - // emergencyTypeName: "一键报警", - // enterpriseId: "1786223302337675266", - // enterpriseName: "测试企业1", - // id: "1797588887538925569", - // incidentClosedStatus: 1, - // incidentSite: "广东省深圳市宝安区福海路福永意库", - // latitude: 22.67405, - // livePicture: null, - // liveVideoSituation: null, - // longitude: 113.80984, - // projectSn: "BD3137498CB84BF0969979E0342CDBCA", - // situations: null, - // teamName: "司机-1", - // updateDate: "2024-06-03 19:19:30" - // } - // }); - // }, 3000); + setTimeout(() => { + openPeopleCountDialog({ + index: 10, + title: "人员呼叫", + timeOut: 10, + timeFlag: null, + show: true, + mapsDetail: { + alarmPersonId: "1795271026055901186", + alarmPersonName: "测试0528", + alarmTime: "2024-06-03 19:19:23", + departmentName: null, + disposalReport: null, + dispositionStatus: 1, + emergencyDetail: null, + emergencyTypeId: "-1", + emergencyTypeName: "一键报警", + enterpriseId: "1786223302337675266", + enterpriseName: "测试企业1", + id: "1797588887538925569", + incidentClosedStatus: 1, + incidentSite: "广东省深圳市宝安区福海路福永意库", + latitude: 22.67405, + livePicture: null, + liveVideoSituation: null, + longitude: 113.80984, + projectSn: "BD3137498CB84BF0969979E0342CDBCA", + situations: null, + teamName: "司机-1", + updateDate: "2024-06-03 19:19:30" + } + }); + }, 3000); // setTimeout(() => { // openPeopleCountDialog({ // index: 10, diff --git a/src/views/commandScreen/dialogCompnnents/data-dialog.vue b/src/views/commandScreen/dialogCompnnents/data-dialog.vue index f1b21988..5b086f35 100644 --- a/src/views/commandScreen/dialogCompnnents/data-dialog.vue +++ b/src/views/commandScreen/dialogCompnnents/data-dialog.vue @@ -95,7 +95,7 @@
-
+
- {{ timeOutUp(ele) }} + {{ timeOutUp(ele, index) }}
-
+ +
@@ -150,6 +151,7 @@ import radarMapList from "./radar-map-list.vue"; import memberAllShow from "./member-all-show.vue"; import memberMoreList from "./member-more-list.vue"; import monthSafeScoreDetail from "./month-safe-score-detail.vue"; +import { getAssetsFile } from "@/utils/util"; //兄弟组件传值 // import { GlobalStore } from "@/stores"; let showDialog = ref(false as any); @@ -188,13 +190,14 @@ const closeDialog = () => { showDialog.value = false; postData.value = {}; }; -const closeDialog1 = (id: string) => { +const closeDialog1 = (id: string, index: number) => { // const findIndex = mapsDetail.value.findIndex((item: any) => item.id == id); // if (findIndex > -1) { // mapsDetail.value.splice(findIndex, 1); // } const find = mapsDetail.value.find((item: any) => item.id == id); if (find) { + audioElement.value && audioElement.value[index].pause(); find.show = false; } if (mapsDetail.value.filter((item: any) => item.show).length == 0) { @@ -223,11 +226,12 @@ function openDialog(obj: any) { } showDialog.value = true; } - +// 音频播放实例 +const audioElement = ref(null as any); const timeOutUp = computed(() => { - return (ele: any) => { + return (ele: any, index: any) => { if (ele.timeOut <= 0) { - closeDialog1(ele.id); + closeDialog1(ele.id, index); return; } ele.timeFlag = setTimeout(() => { @@ -237,6 +241,8 @@ const timeOutUp = computed(() => { const find = mapsDetail.value.find((item: any) => item.id == ele.id); if (find) { find.timeOut--; + audioElement.value[index].play(); + console.log(2222, audioElement.value); } }, 1000); @@ -253,6 +259,10 @@ onMounted(async () => {});