添加报警音频

gassafety-web/src/views/enterprise/mapView/index.vue

 <template>
   <div>
+    <div class="audio" >
+      <audio ref="audio" :src="mp3Src"></audio>
+    </div>
     <div
       :style="{ height: `${boxHeight}px`, width: `${boxWidth}px` }"
       id="container"
@@ -355,6 +358,7 @@ export default {
   },
   data() {
     return {
+      mp3Src: require("@/assets/mp3/baojing.mp3"),
       lineColor,
       gaoMap: null,
       deviceType: false,
@@ -512,6 +516,13 @@ export default {
       }
     },
 
+    audio(){
+      console.log("this.$refs.audio.paused",this.$refs.audio.paused)
+      if (this.$refs.audio.paused) { 
+				// this.$refs.audio.paused = false;
+				this.$refs.audio.play(); 
+			}
+    },
     initMap() {
       let gaoMap = new gaodeMap(process.env.VUE_APP_MAP_CENTER);
       this.gaoMap = gaoMap;
@@ -672,6 +683,9 @@ export default {
     },
     // 遍历设备改变状态 polyLines markers
     statusChange(list) {
+      // 报警声音
+      this.audio();
+
       // 过滤报警管道
       const polyLineArr = list.filter((item) => {
         return item.deviceType == "0";
@@ -768,19 +782,21 @@ export default {
             device.setExtData(options);
 
             // 找到是列表里的哪个，改变它的状态，让列表里的这个设备变成红色
-            const myDevice = this.allList.filter((item) => {
-              for (let i = 0; i < item.length; i++) {
-                const iten = item[i];
-                // 不是隐患也不是值班人员
-                if (!iten.troubleId && !iten.userId) {
-                  if(iten.deviceId == device.getExtData().deviceId){
-                    return true
+            const myDevice = this.allList
+              .filter((item) => {
+                for (let i = 0; i < item.length; i++) {
+                  const iten = item[i];
+                  // 不是隐患也不是值班人员
+                  if (!iten.troubleId && !iten.userId) {
+                    if (iten.deviceId == device.getExtData().deviceId) {
+                      return true;
+                    }
                   }
                 }
-              }
-            })[0]?.filter(item=>{
-              return item.deviceId == device.getExtData().deviceId
-            })[0];
+              })[0]
+              ?.filter((item) => {
+                return item.deviceId == device.getExtData().deviceId;
+              })[0];
             // console.log("myDevice", myDevice);
             myDevice.alarmState = options.alarmState;
             // const imageName = device.getExtData()
@@ -1466,7 +1482,7 @@ export default {
     },
     // 搜索
     async search() {
-      this. Clear();
+      this.Clear();
       map.clearMap();
       this.gaoMap.placeSearch.clear();
       if (!(!this.gaoMap.searchSelectAdcode && !this.gaoMap.searchSelectName)) {