页面轮询刷新问题增加警报

src/api/forest.js

@@ -8,19 +8,25 @@ export function getBaseInfo() {
   })
 }
 // 左侧获取事件信息统计
-export function getTodayEvents(param) {
+export function getTodayEvents(param,loading) {
   return request({
     url: '/center-fire/VisuForestCloudMapController/getTodayEvents',
     method: 'post',
-    data: param
+    data: param,
+    headers: {
+      loading: loading
+    },
   })
 }
 // 左侧获取事件部门数量
-export function getDeptEventCount(param) {
+export function getDeptEventCount(param,loading) {
   return request({
     url: '/center-fire/VisuForestCloudMapController/getDeptEventCount',
     method: 'post',
-    data: param
+    data: param,
+    headers: {
+      loading: loading
+    },
   })
 }
 // 右侧获取天气
@@ -34,19 +40,25 @@ export function getWeather(param) {
 
 
 // 右侧获取事件列表
-export function getEventList(param) {
+export function getEventList(param,loading) {
   return request({
     url: '/center-fire/VisuForestCloudMapController/getEventList',
     method: 'post',
-    data: param
+    data: param,
+    headers: {
+      loading: loading
+    },
   })
 }
 // 右侧获取曝光台列表
-export function getExposureStage(param) {
+export function getExposureStage(param,loading) {
   return request({
     url: 'center-fire/VisuForestCloudMapController/getExposureStage',
     method: 'post',
-    data: param
+    data: param,
+    headers: {
+      loading: loading
+    },
   })
 }
 
@@ -67,19 +79,25 @@ export function getEventByCalendar(param) {
   })
 }
 // 获取事件分类
-export function getEventByEventType(param) {
+export function getEventByEventType(param,loading) {
   return request({
     url: '/center-fire/VisuForestCloudMapController/getEventByEventType',
     method: 'post',
-    data: param
+    data: param,
+    headers: {
+      loading: loading
+    },
   })
 }
 // 获取上报排名
-export function getEventByReportorOrder(param) {
+export function getEventByReportorOrder(param,loading) {
   return request({
     url: '/center-fire/VisuForestCloudMapController/getEventByReportorOrder',
     method: 'post',
-    data: param
+    data: param,
+    headers: {
+      loading: loading
+    },
   })
 }
 // 日志文件上传

src/components/vBottomMenu.vue

@@ -203,7 +203,8 @@
       </el-popover>
 
       <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>
+        <i :class="eventWarn ? 'dotClass redClass':'dotClass'"></i>
       </el-badge>
       <el-badge type="warning">
         <el-button size="small" icon="el-icon-refresh-right" @click="refresh">刷新</el-button>
@@ -514,7 +515,9 @@ export default {
       changCheckList: [], //林场
       searchFB: '',
       filterchang: '',//林场搜索
-      btmCurrent: ''
+      btmCurrent: '',
+
+      eventWarn:false,  //webSocket事件问题警报标记
     }
   },
   created() {
@@ -751,6 +754,12 @@ export default {
       } else {
         this.filterchangList = this.filterchangListAll
       }
+    },
+
+    //标记警报
+    updateAlert(){
+      this.eventWarn = !this.eventWarn;
+      this.$emit('stopAudio');
     }
   }
 }
@@ -759,6 +768,21 @@ export default {
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import '@/assets/styles/base.scss';
 
+.dotClass {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: block;
+  margin: -5px;
+}
+.redClass{
+  background-color: red ;
+  width:10px;
+  height:10px;
+  border-radius: 50%;
+  display: block;
+}
+
 .btm-box {
   width: 100%;
   height: auto;

src/utils/request.js

@@ -25,7 +25,9 @@ const service = axios.create({
 
 // request拦截器
 service.interceptors.request.use(config => {
-  downloadLoadingInstance = Loading.service({ text: "请稍候...", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
+  if(config.headers.loading == undefined){
+    downloadLoadingInstance = Loading.service({ text: "请稍候...", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
+  }
   // 是否需要设置 token
   const isToken = (config.headers || {}).isToken === false
   // 是否需要防止数据重复提交

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>
 
@@ -424,7 +425,7 @@ import firespread from '@/views/firespread.vue' //事件详情弹窗
 import {
   getDahuaVideoServer
 } from '@/api/dahua/dahua'
-import DHWs from '@/dahua/lib/DHWs'
+// import DHWs from '@/dahua/lib/DHWs'
 import Firespread from "./firespread";
 
 /** ----------------------------------摄像头预览结束------------------------------------- */
@@ -446,8 +447,8 @@ export default {
   },
   created() {
     /** ----------------------------------摄像头预览开始------------------------------------- */
-    const DHWsInstance = DHWs.getInstance()
-    this.ws = DHWsInstance
+    // const DHWsInstance = DHWs.getInstance()
+    // this.ws = DHWsInstance
     /** ----------------------------------摄像头预览结束------------------------------------- */
 
     /** ----------------------------------底部按钮公用组件开始------------------------------------- */
@@ -469,9 +470,22 @@ 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: '', //基本情况
@@ -858,10 +872,10 @@ export default {
         }
       })
     },
-    getTodayEvents(day) {
+    getTodayEvents(day,loading) {
       let that = this
       //左侧获取事件信息统计
-      getTodayEvents({ day: day }).then(res => {
+      getTodayEvents({ day: day },loading).then(res => {
         this.aiTotal = res.data.aiTotal
         this.aiTotal_pre = res.data.aiTotal_pre
         this.newReport = res.data.newReport
@@ -877,10 +891,10 @@ export default {
         this.eventChartAi(this.aiTotal_pre, this.otherTotal_pre)
       })
     },
-    getDeptEventCount(day) {
+    getDeptEventCount(day,loading) {
       let that = this
       //左侧获取事件部门数量
-      getDeptEventCount({ day: day }).then(res => {
+      getDeptEventCount({ day: day },loading).then(res => {
         this.forestFarm = res.data
       })
     },
@@ -908,16 +922,21 @@ export default {
         }
       })
     },
-    getEventList(day) {
+    getEventList(day,loading) {
       let that = this
       this.eventList = []
       this.eventListAll = []
       //右侧获取事件列表
-      getEventList({ day: day }).then(res => {
+      getEventList({ day: day },loading).then(res => {
         this.eventList = res.data
         this.eventListAll = res.data
-        that.markersList = []
+        that.markersList = [];
         if (this.eventList != null && this.eventList.length > 0) {
+          // if(this.eventList[0].eventStatusValue == 'forest_event_status_1'){
+          //   that.$refs.up.pause();
+          //   that.$refs.up.currentTime = 0;
+          //   that.$refs.up.play();
+          // }
           for (let i = 0; i < this.eventList.length; i++) {
             let markersMap = {
               lng: 124.59,
@@ -1001,10 +1020,10 @@ export default {
         }
       })
     },
-    getEventByEventType(day) {
+    getEventByEventType(day,loading) {
       let that = this
       //右侧获取事件分类
-      getEventByEventType({ day: day }).then(res => {
+      getEventByEventType({ day: day },loading).then(res => {
         if (res.data != null && res.data.length > 0) {
           this.showEventKind = true
           this.eventKind.data = res.data
@@ -1018,10 +1037,10 @@ export default {
         }
       })
     },
-    getEventByReportorOrder(day) {
+    getEventByReportorOrder(day,loading) {
       let that = this
       //右侧获取上报排名
-      getEventByReportorOrder({ day: day }).then(res => {
+      getEventByReportorOrder({ day: day },loading).then(res => {
         if (res.data != null && res.data.length > 0) {
           this.reportList.data = res.data
           this.reportList = { ...this.reportList }
@@ -1031,23 +1050,105 @@ export default {
         }
       })
     },
-    getExposureStage(day) {
+    getEventListNew() {
+      this.eventList = []
+      this.eventListAll = []
+      //右侧获取事件列表
+      getEventList({ day: this.getCurrentDataStr() }).then(res => {
+        this.eventList = res.data
+        this.eventListAll = res.data
+      })
+    },
+    getWebSocketEvent(data) {
+      let that = this
+      const event = JSON.parse(data);
+      //右侧获取事件列表
+        that.markersList = []
+          let markersMap = {
+            lng: 124.59,
+            lat: 43.02,
+            icon: 'marker',
+            bindPopupHtml: '',
+            click: '',
+            parameter: '',
+            keepBindPopup: false,
+            isAggregation: false
+          }
+          if (event.eventStatusValue == 'forest_event_status_1' && event.urgeCount == 0) {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-xinshangbao'
+          }
+          if (event.eventStatusValue == 'forest_event_status_1' && event.urgeCount > 0) {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-cuiban'
+          } else if (event.eventStatusValue == 'forest_event_status_2') {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-qianshou'
+            markersMap.isAggregation = false
+          } else if (event.eventStatusValue == 'forest_event_status_5') {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-banjie'
+            markersMap.isAggregation = false
+          } else if (event.eventStatusValue == 'forest_event_status_6') {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-guidang'
+          }
+          markersMap.parameter = event.eventCode
+          markersMap.lng = event.longitude
+          markersMap.lat = event.latitude
+          markersMap.bindPopupHtml = '<div class="map-tip">' +
+            '<span>' +
+            '                  <div class="d-l-con">' +
+            '                  <div class="d-l-l-text">' +
+            '                  <h4>经纬度：' + event.longitude + ',' + event.latitude + '</h4>' +
+            '                </div>' +
+            '                </div>' +
+            '                </span>' +
+            '<span>' +
+            '                  <div class="d-l-con">' +
+            '                  <div class="d-l-l-text">' +
+            '                  <h4>事件名称：' + event.eventName + '</h4>' +
+            '                </div>' +
+            '                </div>' +
+            '                </span>' +
+            '<span>' +
+            '                  <div class="d-l-con">' +
+            '                  <div class="d-l-l-text">' +
+            '                  <h4>事件时间：' + event.createTime + '</h4>' +
+            '                </div>' +
+            '                </div>' +
+            '                </span>';
+          if(event.pictureType=='image'&&event.picturePath != null && event.picturePath != ''){
+            markersMap.bindPopupHtml += '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '<img src="' + event.picturePath + '" style="width: 150px;height: 100px"/>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>'
+          }
+          markersMap.bindPopupHtml += '</div>'
+          that.markersList.push(markersMap)
+          setTimeout(() => {
+            that.$refs.supermap.setMarkers(that.markersList)
+          }, 1000)
+    },
+    getExposureStage(day,loading) {
       let that = this
       //右侧获取曝光台
-      getExposureStage({ day: day }).then(res => {
+      getExposureStage({ day: day },loading).then(res => {
         this.exposureStageList = res.data
       })
     },
     /** ----------------------------------weosocket开始------------------------------------- */
     initWebSocket() { //初始化weosocket
-      const wsuri = 'wss://www.hmzzxc.com:10012/websocket/forest-' + Cookies.get('username')
+      // const wsuri = 'ws://127.0.0.1:10003/webSocket/' + Cookies.get('username')
+      const wsuri = 'ws://127.0.0.1:10003/webSocket/admin'
       this.websock = new WebSocket(wsuri)
       console.log('建立websocket连接')
       this.websock.onopen = this.websocketonopen
       this.websock.onmessage = this.websocketonmessage
       this.websock.onerror = this.websocketonerror
-      this.websock.onclose = this.websocketclose
-      this.websock.onclose = this.websocketclose
     },
     websocketonopen() { //连接建立之后执行send方法发送数据
       console.log('websocket连接成功')
@@ -1059,6 +1160,21 @@ export default {
     },
     websocketonmessage(e) { //数据接收
       console.log('接收数据', e.data)
+      // let data = "{\"fromId\":\"forest\",\"fromUserId\":\""+Cookies.get('username')+"\",\"toUserId\":\""+Cookies.get('username')+"\"}";
+      let data = "{\"fromId\":\"forest\",\"fromUserId\":\"admin\",\"toUserId\":\"admin\"}";
+      if(this.calendarDay == this.getCurrentDataStr() && data != e.data){
+        this.getWebSocketEvent(e.data);
+
+        // this.getEventListNew();
+        // this.getTodayEvents(this.getCurrentDataStr());
+        // this.getDeptEventCount(this.getCurrentDataStr());
+        // this.getEventByEventType(this.getCurrentDataStr());
+        // this.getEventByReportorOrder(this.getCurrentDataStr());
+
+        // this.$refs.bottomMenu.updateAlert();
+        // this.$refs.up.play();
+        // thes.$refs.up.pause();//停止播放音乐
+      }
     },
     websocketsend(Data) { //数据发送
       this.websock.send(Data)
@@ -1072,13 +1188,12 @@ export default {
      * @param {number} time 心跳间隔毫秒 默认5000
      * @param {string} ping 心跳名称 默认字符串ping
      */
-    sendPing(time = 5000, ping = {
+    sendPing(time = 60000, ping = {
       'fromId': 'forest',
       'fromUserId': Cookies.get('username'),
       'toUserId': Cookies.get('username')
     }) {
       clearInterval(this.setIntervalWesocketPush)
-      this.websock.send(JSON.stringify(ping))
       this.setIntervalWesocketPush = setInterval(() => {
         if (this.weosocket) {
           this.websock.send(JSON.stringify(ping))
@@ -1087,6 +1202,10 @@ export default {
         }
       }, time)
     },
+    stopAudio(){
+      this.$refs.up.pause();//停止播放音乐
+      // this.$refs.up.currentTime = 0;
+    },
     /** ----------------------------------weosocket结束------------------------------------- */
 
     /** ----------------------------------底部按钮公用组件开始------------------------------------- */