云图页面警报刷新

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>
@@ -515,7 +521,8 @@ export default {
       changCheckList: [], //林场
       searchFB: '',
       filterchang: '',//林场搜索
-      btmCurrent: ''
+      btmCurrent: '',
+      eventWarn: false, //webSocket事件问题警报标记
     }
   },
   created() {
@@ -845,6 +852,11 @@ export default {
       } else {
         this.filterchangList = this.filterchangListAll
       }
+    },
+    //标记警报
+    updateAlert() {
+      this.eventWarn = !this.eventWarn;
+      this.$emit('stopAudio');
     }
   }
 }
@@ -1163,5 +1175,131 @@ export default {
 
 
 }
+//警铃
+.fire-tip {
+  text-align: center;
+  width: 100%;
+  font-size: 44px;
+  color: #ff0000;
+  text-shadow: 0 0 1px #ffffff;
+}
+
+.fire-address {
+  text-align: center;
+  width: 100%;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
+  margin-top: 44px;
+}
+
+.fire-handle {
+  display: block;
+  text-align: center;
+  background: #00BFF0;
+  color: #ffffff;
+  border-radius: 20px;
+  font-size: 14px;
+  width: 80px;
+  height: 40px;
+  line-height: 40px;
+  margin: 24px auto;
+  text-decoration: none
+}
+
+.fire-handle:hover {
+  background: #06a2ca;
+}
+
+.bell {
+  position: absolute;
+  right: 10px;
+  bottom:-20px;
+  width: 100%;
+  height: 320px;
+  z-index: 999;
+}
+
+.bell canvas {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: -9px;
+}
+
+/* 保持大小不变的小圆圈  */
+.dot {
+  position: absolute;
+  width: 96px;
+  height: 96px;
+  left: 160px;
+  top: 160px;
+  background: url('../assets/images/bell.gif') no-repeat;
+  // background: url(.) no-repeat;
+  background-size: 100%;
+  z-index: 200;
+}
+
+/* 产生动画（向外扩散变大）的圆圈  */
+.pulse,
+.pulse-big {
+  position: absolute;
+  width: 420px;
+  height: 420px;
+  border: 2px solid #EF2D02;
+  background: rgba(239, 45, 2, 0.8);
+  border-radius: 50%;
+  z-index: 100;
+  opacity: 0;
+}
+
+.pulse {
+  background: rgba(239, 45, 2, 0.6) !important;
+  -webkit-animation: warn 0.9s ease-out;
+  -moz-animation: warn 0.9s ease-out;
+  animation: warn 0.9s ease-out;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  box-shadow: 1px 1px 30px #EF2D02;
+}
+
+.pulse-big {
+  background: rgba(239, 45, 2, 0.6) !important;
+  -webkit-animation: warn1 0.9s ease-out;
+  -moz-animation: warn1 0.9s ease-out;
+  animation: warn1 0.9s ease-out;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  box-shadow: 1px 1px 30px #EF2D02;
+}
+
+@keyframes warn {
+  0% {
+    -moz-transform: scale(0);
+    transform: scale(0);
+    opacity: 1;
+  }
+
+  100% {
+    -moz-transform: scale(1);
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+@keyframes warn1 {
+  0% {
+    -o-transform: scale(0);
+    transform: scale(0);
+    opacity: 1;
+  }
+
+  100% {
+    -o-transform: scale(0.6);
+    transform: scale(0.6);
+    opacity: 0;
+  }
+}
 
 </style>

src/views/forest.vue

@@ -381,8 +381,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>
 
@@ -466,9 +467,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: '', //基本情况
@@ -915,6 +928,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,
@@ -998,6 +1015,10 @@ export default {
         }
       })
     },
+    stopAudio(){
+      this.$refs.up.pause();//停止播放音乐
+      this.$refs.up.currentTime = 0;
+    },
     getEventByEventType(day) {
       let that = this
       //右侧获取事件分类