云图页面警报刷新

src/components/vBottomMenu.vue

@@ -202,8 +202,14 @@
         </el-badge>
       </el-popover>
 
+      <!-- 警报铃 必须放在这,放在别处不好使 -->
+      <div class="bell" v-if="eventWarn" @click="updateAlert">
+        <div class="dot"></div>
+        <div class="pulse"></div>
+        <div class="pulse-big"></div>
+      </div>
       <el-badge type="primary">
-        <el-button size="small" icon="el-icon-bell">警报</el-button>
+        <el-button size="small" icon="el-icon-bell" @click="updateAlert">警报</el-button>
       </el-badge>
       <el-badge type="warning">
         <el-button size="small" icon="el-icon-refresh-right" @click="refresh">刷新</el-button>
@@ -498,7 +504,9 @@
         changCheckList: [], //林场
         searchFB: '',
         filterchang: '',//林场搜索
-        btmCurrent: ''
+        btmCurrent: '',
+
+        eventWarn: false, //webSocket事件问题警报标记
       }
     },
     created() {
@@ -735,6 +743,11 @@
         } else {
           this.filterchangList = this.filterchangListAll
         }
+      },
+      //标记警报
+      updateAlert() {
+        this.eventWarn = !this.eventWarn;
+        this.$emit('stopAudio');
       }
     }
   }

src/views/forest.vue

@@ -382,8 +382,9 @@
         </div>
 
       </div>
-      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+      <vBottomMenu ref="bottomMenu" @stopAudio="stopAudio" ></vBottomMenu>
     </div>
+    <audio id="resource" ref="up" :src="audioSrc" controls style="display: none;"></audio>
     <eventdetailsdialog ref="eventdetailsdialog" :calendarDay="calendarDay" @getEventList="getEventList"
                         @getTodayEvents="getTodayEvents" @getFirespread="getFirespread"></eventdetailsdialog>
 
@@ -467,9 +468,21 @@ export default {
     // this.initWebSocket()
     /** ----------------------------------weosocket结束------------------------------------- */
     // this.selectTaskList()//获取任务
+    setInterval(() => {
+      if(this.calendarDay == this.getCurrentDataStr()){
+        this.getTodayEvents(this.getCurrentDataStr(),true);
+        this.getDeptEventCount(this.getCurrentDataStr(),true);
+        this.getEventList(this.getCurrentDataStr(),true);
+        this.getEventByEventType(this.getCurrentDataStr(),true);
+        this.getEventByReportorOrder(this.getCurrentDataStr(),true);
+        // this.getExposureStage(this.getCurrentDataStr(),true);
+      }
+    }, 10000)
   },
   data() {
     return {
+      //警报MP3文件
+      audioSrc:require('@/assets/jingbao.mp3'),
       calendarDay: this.getCurrentDataStr(),
       //基本情况
       forestInfo: '', //基本情况
@@ -917,6 +930,10 @@ export default {
         this.eventListAll = res.data
         that.markersList = []
         if (this.eventList != null && this.eventList.length > 0) {
+          if(this.eventList[0].eventStatusValue == 'forest_event_status_1'){
+            that.$refs.bottomMenu.updateAlert();
+            that.$refs.up.play();
+          }
           for (let i = 0; i < this.eventList.length; i++) {
             let markersMap = {
               lng: 124.59,
@@ -1000,6 +1017,10 @@ export default {
         }
       })
     },
+    stopAudio(){
+      this.$refs.up.pause();//停止播放音乐
+      this.$refs.up.currentTime = 0;
+    },
     // 判断是否为图片
     isAssetTypeAnImage(filePath) {
       //获取最后一个.的位置