flx：提交应急增加报警音频

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
+}

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,

src/views/commandScreen/dialogCompnnents/data-dialog.vue

@@ -95,7 +95,7 @@
 		</div>
 	</div>
 	<div v-else-if="showIndex == 10">
-		<div class="list-detail" v-for="ele in mapsDetail.filter((option: any) => option.show)" :key="ele.id">
+		<div class="list-detail" v-for="(ele, index) in mapsDetail.filter((option: any) => option.show)" :key="ele.id">
 			<div
 				:class="
 					postData.type == 1
@@ -116,9 +116,10 @@
 						<i>{{ ele.title }}</i>
 					</div>
 					<div class="title-time">
-						{{ timeOutUp(ele) }}
+						{{ timeOutUp(ele, index) }}
 					</div>
-					<div class="close-icon" @click.stop="closeDialog1(ele.id)">
+					<audio ref="audioElement" :src="getAssetsFile('alarm_music.mp3')" controls type="audio/mp3"></audio>
+					<div class="close-icon" @click.stop="closeDialog1(ele.id, index)">
 						<el-icon>
 							<Close />
 						</el-icon>
@@ -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 () => {});
 </script>
 
 <style lang="scss" scoped>
+audio {
+	display: inline-block !important;
+	opacity: 0 !important;
+}
 .warning-bg {
 	width: 200px;
 	height: 200px;