Merge remote-tracking branch 'origin/visu_village' into visu_village

src/api/forest.js

@@ -1,5 +1,22 @@
 import request from '@/utils/request'
 
+
+// 获取绑定的事件类型
+export function getMenuEventType() {
+  return request({
+    url: '/center-village/VisuVillageCloudController/getMenuEventType',
+    method: 'get',
+  })
+}
+// 获取事件详情
+export function getEventPush(param) {
+  return request({
+    url: '/center-village/VisuVillageCloudController/getEventPush',
+    method: 'post',
+    data: param
+  })
+}
+
 // 右侧获取事件列表
 export function getEventList(param,loading) {
   return request({

src/components/vBottomMenu.vue

@@ -433,17 +433,17 @@
 						icon: 'iconfont sj-icon-clgj',
 						click: 'editableLayers'
 					},
-					{
-						name: '林班',
-						icon: 'iconfont sj-icon-lbzy',
-						click: 'forestban'
-					},
-
-					{
-						name: '林场',
-						icon: 'iconfont sj-icon-lczy',
-						click: 'forestchang'
-					},
+					// {
+					// 	name: '林班',
+					// 	icon: 'iconfont sj-icon-lbzy',
+					// 	click: 'forestban'
+					// },
+          //
+					// {
+					// 	name: '林场',
+					// 	icon: 'iconfont sj-icon-lczy',
+					// 	click: 'forestchang'
+					// },
 					{
 						name: '电视墙',
 						icon: 'el-icon-s-grid',

src/store/getters.js

@@ -6,6 +6,7 @@ const getters = {
   cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
+  userId: state => state.user.id,
   name: state => state.user.name,
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,

src/store/modules/user.js

@@ -4,6 +4,7 @@ import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
 const user = {
   state: {
     token: getToken(),
+    userId: '',
     name: '',
     avatar: '',
     roles: [],
@@ -28,6 +29,9 @@ const user = {
     },
     SET_PERMISSIONS: (state, permissions) => {
       state.permissions = permissions
+    },
+    SET_USERID: (state, userId) => {
+      state.userId = userId
     }
   },
 
@@ -65,6 +69,7 @@ const user = {
             commit('SET_ROLES', ['ROLE_DEFAULT'])
           }
           commit('SET_NAME', user.userName)
+          commit('SET_USERID', user.id)
           commit('SET_AVATAR', avatar)
           resolve(res)
         }).catch(error => {

src/views/forest.vue

@@ -10,13 +10,13 @@
         <!-- 3 组织机构 -->
         <div class="forthis">
           <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
+            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
             <div class="i-list-con h-80" style="padding-left: 1rem;">
               <el-collapse accordion>
-                <el-collapse-item v-for="(item,index) in villageTypeXlList" :key="index">
+                <el-collapse-item v-for="(item, index) in villageTypeXlList" :key="index">
                   <template slot="title">
-                    <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.id}"
-                         v-on:click="getEventList(calendarDay,item.parentId,item.id,10,1);getSupermap(calendarDay);">
+                    <div class="d-l-con sj-collapse" :class="{ on: listCurrentIndex1 == item.id }"
+                      v-on:click="getEventList(calendarDay, item.parentId, item.id, 10, 1); getSupermap(calendarDay);">
                       <div class="d-l-l-text">
                         <h4 class="collapse-title">{{ item.name }}</h4>
                       </div>
@@ -34,9 +34,8 @@
       </div>
       <!-- 地图 -->
       <supermap ref="supermap" style="width: 100%;height: 100vh;" class="indexSupermapClass" :mapDiv="'forestMap'"
-                :dynamicPlotting="false"
-                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"
-                @showEventDialog="showEventDialog"/>
+        :dynamicPlotting="false" :mapSite="{ doubleClickZoom: false }" :codes="['9fa5']" :isSideBySide="false"
+        @showEventDialog="showEventDialog" />
       <!-- 右侧 -->
       <div class="rightbar rightbar-index" ref="right">
         <div class="right-item1">
@@ -45,7 +44,7 @@
           <!-- 日历 -->
           <div class="forthis">
             <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-              <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
+              <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
               <div class="i-list-con small-bottom-margin h-30">
                 <dateChoose @selectDay="selectDay"></dateChoose>
               </div>
@@ -54,73 +53,70 @@
           <!-- 事件列表 -->
           <div class="forthis">
             <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
-              <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
+              <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
               <div class="this-title">
                 <span>事件列表</span>
-                <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
+                <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
               </div>
               <div class="i-list-con small-bottom-margin h-43">
                 <div class="event-list-search">
-                  <el-input
-                    placeholder="请输入内容"
-                    prefix-icon="el-icon-search"
-                    v-model="eventSearch"
-                    @change="getEventList(calendarDay,10,1,eventSearch)">
+                  <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="eventSearch"
+                    @change="getEventList(calendarDay, 10, 1, eventSearch)">
                   </el-input>
                 </div>
-                <div class="d-l-con padding-box nowrap" v-for="(item,index) in eventList"
-                     @click="dropLocation(item.latitude,item.longitude)" data-html2canvas-ignore>
+                <div class="d-l-con padding-box nowrap" v-for="(item, index) in eventList"
+                  @click="dropLocation(item.latitude, item.longitude)" data-html2canvas-ignore>
                   <div class="bgt-img">
-                    <img v-if="item.picturePath!=null&&item.picturePath!='' && item.pictureType=='image'"
-                         :src="item.picturePath"
-                         style="width: 93px;height: 64px" loading="lazy"/>
-                    <img v-else src="../assets/images/integrated/event-img-sub.png" style="width: 93px;height: 64px"/>
+                    <img v-if="item.picturePath != null && item.picturePath != '' && item.pictureType == 'image'"
+                      :src="item.picturePath" style="width: 93px;height: 64px" loading="lazy" />
+                    <img v-else src="../assets/images/integrated/event-img-sub.png" style="width: 93px;height: 64px" />
                   </div>
                   <div class="bgt-info">
-                    <div v-if="item.eventStatusValue=='forest_event_status_1'&&item.urgeCount==0"
-                         class="event-state-sb">
+                    <div v-if="item.eventStatusValue == 'forest_event_status_1' && item.urgeCount == 0"
+                      class="event-state-sb">
                       <i class="el-icon-caret-left"></i>
                       <div class="event-list-state-sb">
                         新上报
                       </div>
                     </div>
-                    <div v-if="item.eventStatusValue=='forest_event_status_1'&&item.urgeCount>0" class="event-state-cb">
+                    <div v-if="item.eventStatusValue == 'forest_event_status_1' && item.urgeCount > 0"
+                      class="event-state-cb">
                       <i class="el-icon-caret-left"></i>
                       <div class="event-list-state-cb">
                         催办
                       </div>
                     </div>
-                    <div v-if="item.eventStatusValue=='forest_event_status_2'" class="event-state-qs">
+                    <div v-if="item.eventStatusValue == 'forest_event_status_2'" class="event-state-qs">
                       <i class="el-icon-caret-left"></i>
                       <div class="event-list-state-qs">
                         签收
                       </div>
                     </div>
-                    <div v-if="item.eventStatusValue=='forest_event_status_3'" class="event-state-wb">
+                    <div v-if="item.eventStatusValue == 'forest_event_status_3'" class="event-state-wb">
                       <i class="el-icon-caret-left"></i>
                       <div class="event-list-state-wb">
                         误报
                       </div>
                     </div>
-                    <div v-if="item.eventStatusValue=='forest_event_status_4'" class="event-state-cf">
+                    <div v-if="item.eventStatusValue == 'forest_event_status_4'" class="event-state-cf">
                       <i class="el-icon-caret-left"></i>
                       <div class="event-list-state-cf">
                         重复
                       </div>
                     </div>
-                    <div v-if="item.eventStatusValue=='forest_event_status_5'" class="event-state-bj">
+                    <div v-if="item.eventStatusValue == 'forest_event_status_5'" class="event-state-bj">
                       <i class="el-icon-caret-left"></i>
                       <div class="event-list-state-bj">
                         办结
                       </div>
                     </div>
-                    <div v-if="item.eventStatusValue=='forest_event_status_6'" class="event-state-gd">
+                    <div v-if="item.eventStatusValue == 'forest_event_status_6'" class="event-state-gd">
                       <i class="el-icon-caret-left"></i>
                       <div class="event-list-state-gd">
                         归档
                       </div>
                     </div>
-                    <div v-if="item.eventStatusValue=='forest_event_status_7'" class="event-state-qr">
+                    <div v-if="item.eventStatusValue == 'forest_event_status_7'" class="event-state-qr">
                       <i class="el-icon-caret-left"></i>
                       <div class="event-list-state-qr">
                         归档
@@ -137,10 +133,12 @@
               </div>
               <!--分页-->
               <div class="paging">
-                <el-button type="button" @click="getEventList(calendarDay,bigEventTypeId,smallEventTypeId,pageSize,pageNum-1)">上一页
+                <el-button type="button"
+                  @click="getEventList(calendarDay, bigEventTypeId, smallEventTypeId, pageSize, pageNum - 1)">上一页
                 </el-button>
                 <!-- <span>第0页</span> -->
-                <el-button type="button" @click="getEventList(calendarDay,bigEventTypeId,smallEventTypeId,pageSize,pageNum+1)">下一页
+                <el-button type="button"
+                  @click="getEventList(calendarDay, bigEventTypeId, smallEventTypeId, pageSize, pageNum + 1)">下一页
                 </el-button>
               </div>
             </dv-border-box-13>
@@ -148,14 +146,14 @@
         </div>
 
       </div>
-      <vBottomMenu ref="bottomMenu" @stopAudio="stopAudio" ></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"
-                        :bigEventTypeId="bigEventTypeId" :smallEventTypeId="smallEventTypeId"
-                        @getEventList="getEventList"></eventdetailsdialog>
+    <eventdetailsdialog ref="eventdetailsdialog" :calendarDay="calendarDay" :bigEventTypeId="bigEventTypeId"
+      :smallEventTypeId="smallEventTypeId" @getEventList="getEventList"></eventdetailsdialog>
 
-    <firespread ref="firespread" :calendarDay="calendarDay" @getEventList="getEventList" @showEventDialog="showEventDialog"></firespread>
+    <firespread ref="firespread" :calendarDay="calendarDay" @getEventList="getEventList"
+      @showEventDialog="showEventDialog"></firespread>
 
     <eventLocation ref="eventLocation"></eventLocation>
     <TVWall ref="TVWall"></TVWall>
@@ -169,6 +167,8 @@ import Cookies from 'js-cookie'
 /** ----------------------------------weosocket结束------------------------------------- */
 
 import {
+  getMenuEventType,
+  getEventPush,
   getEventList
 } from '@/api/forest'
 import {
@@ -210,23 +210,24 @@ export default {
   },
   mounted() {
     this.getEventByEventType(this.getCurrentDataStr())
-    this.getEventList(this.getCurrentDataStr(),this.bigEventTypeId,this.smallEventTypeId,this.pageSize,this.pageNum,'')
+    this.getEventList(this.getCurrentDataStr(), this.bigEventTypeId, this.smallEventTypeId, this.pageSize, this.pageNum, '')
     this.getSupermap(this.getCurrentDataStr());
+    this.getMenuEventType()
     /** ----------------------------------weosocket开始------------------------------------- */
     // this.initWebSocket()
     /** ----------------------------------weosocket结束------------------------------------- */
     setInterval(() => {
-      if(this.calendarDay == this.getCurrentDataStr()){
-        this.getEventList(this.getCurrentDataStr(),this.bigEventTypeId,this.smallEventTypeId,this.pageSize,this.pageNum,this.eventSearch,true);//day, bigEventTypeId,smallEventTypeId, pageSize, pageNum, eventSearch, loading
-        this.getEventByEventType(this.getCurrentDataStr(),true);
+      if (this.calendarDay == this.getCurrentDataStr()) {
+        // this.getEventList(this.getCurrentDataStr(),this.bigEventTypeId,this.smallEventTypeId,this.pageSize,this.pageNum,this.eventSearch,true);//day, bigEventTypeId,smallEventTypeId, pageSize, pageNum, eventSearch, loading
+        this.getEventByEventType(this.getCurrentDataStr(), true);
       }
-    }, 10000)
+    }, 3000)
     this.bottomMenuList() //获取底部公共组件消息和任务
   },
   data() {
     return {
       //警报MP3文件
-      audioSrc:require('@/assets/jingbao.mp3'),
+      audioSrc: require('@/assets/jingbao.mp3'),
       calendarDay: this.getCurrentDataStr(),
       //左侧部门事件数量
       villageTypeXlList: [],
@@ -244,6 +245,11 @@ export default {
       weosocket: false,
       websock: '',
       setIntervalWesocketPush: null,
+      websockSid: {
+        userId: '',
+        eventTypeDl: '',
+        eventType: '',
+      },
       /** ----------------------------------weosocket结束------------------------------------- */
       /** ----------------------------------摄像头预览开始------------------------------------- */
       activePanel: 'key1',
@@ -265,6 +271,16 @@ export default {
   },
   /** ----------------------------------weosocket结束------------------------------------- */
   methods: {
+    getMenuEventType() {
+      let that = this
+      getMenuEventType().then(res => {
+        that.websockSid.userId = Cookies.get('userId')
+        that.websockSid.eventTypeDl = res.data.eventTypeDl
+        that.websockSid.eventType = res.data.eventType
+        that.initWebSocket(that.websockSid.userId, that.websockSid.eventTypeDl, that.websockSid.eventType)
+        console.log(that.websockSid)
+      })
+    },
     // searchEvent(eventSearch) {
     //   let that = this
     //   //事件列表搜索
@@ -369,7 +385,7 @@ export default {
       //事件信息弹出
       this.$refs.eventdetailsdialog.showEventDialog(eventCode)
     },
-    getFirespread(eventCode){
+    getFirespread(eventCode) {
       this.$refs.firespread.showEventDialog(eventCode);
     },
     getCurrentDataStr() {
@@ -383,15 +399,15 @@ export default {
     },
     selectDay(day) {//日历点击
       this.getEventByEventType(day)
-      this.getEventList(day,0,0,10,1,'')
+      this.getEventList(day, 0, 0, 10, 1, '')
       this.getSupermap(day);
       this.calendarDay = day
     },
 
-    getEventByEventType(day,loading) {
+    getEventByEventType(day, loading) {
       let that = this
       //左侧获取事件部门数量
-      getEventByEventType({ day: day },loading).then(res => {
+      getEventByEventType({ day: day }, loading).then(res => {
         this.villageTypeXlList = res.data
       })
     },
@@ -591,10 +607,10 @@ export default {
     //   })
     // },
 
-    getEventList(day, bigEventTypeId,smallEventTypeId, pageSize, pageNum, eventSearch, loading) {
-      this.listCurrentIndex1=smallEventTypeId
-      this.bigEventTypeId=bigEventTypeId
-      this.smallEventTypeId=smallEventTypeId
+    getEventList(day, bigEventTypeId, smallEventTypeId, pageSize, pageNum, eventSearch, loading) {
+      this.listCurrentIndex1 = smallEventTypeId
+      this.bigEventTypeId = bigEventTypeId
+      this.smallEventTypeId = smallEventTypeId
       if (pageNum < 1) {
         this.$modal.msg('当前已是第一页')
         return;
@@ -603,10 +619,12 @@ export default {
       this.pageNum = pageNum;
       let that = this
       //右侧获取事件列表
-      getEventList({day: day,
+      getEventList({
+        day: day,
         eventTypeIdDl: [bigEventTypeId],
         eventTypeId: [smallEventTypeId],
-        pageSize: pageSize, pageNum: pageNum, eventName: eventSearch}, loading).then(res => {
+        pageSize: pageSize, pageNum: pageNum, eventName: eventSearch
+      }, loading).then(res => {
         this.eventList = []
         this.eventList = res.data
         if (this.eventList != null && this.eventList.length > 0) {
@@ -619,16 +637,90 @@ export default {
         }
       })
     },
-
-
-
-    stopAudio(){
+    stopAudio() {
       this.$refs.up.pause();//停止播放音乐
       this.$refs.up.currentTime = 0;
     },
+    getWebSocketEvent(data) {
+      let that = this
+      const event = 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'
+      } else if (event.eventStatusValue == 'forest_event_status_7') {
+        markersMap.click = 'showEventDialog'
+        markersMap.icon = 'sj-icon-map-queren'
+      }
+      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)
+    },
     /** ----------------------------------weosocket开始------------------------------------- */
-    initWebSocket() { //初始化weosocket
-      const wsuri = 'wss://www.hmzzxc.com:10012/websocket/forest-' + Cookies.get('username')
+    initWebSocket(userId, eventTypeDl, eventType) {        //初始化weosocket
+      const wsuri = 'ws://127.0.0.1:10003/eventPush/' + userId + '/' + eventTypeDl + '/' + eventType
       this.websock = new WebSocket(wsuri)
       console.log('建立websocket连接')
       this.websock.onopen = this.websocketonopen
@@ -643,10 +735,49 @@ export default {
       this.sendPing()
     },
     websocketonerror() { //连接建立失败重连
-      this.initWebSocket()
+      this.initWebSocket(this.websockSid.userId, this.websockSid.eventTypeDl, this.websockSid.eventType,)
     },
     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.handleWebSoceketEvent(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();//停止播放音乐
+      }
+    },
+    // 处理WebSocket事件
+    handleWebSoceketEvent(val) {
+      let that = this
+      let data = JSON.parse(val)
+      /**
+       * that.markersList.filter( item => data.eventCode == item.parameter).length == 0 如果地图中不存在当前事件则添加
+       * eventPush: 事件列表消息
+       * */
+      if (data.tag == "eventPush" && that.markersList.filter(item => data.eventCode == item.parameter).length == 0) {
+        getEventPush({ eventCode: data.eventCode }).then((res) => {
+          if (res.data != undefined) {
+            //插入到第一条
+            this.eventList.unshift(res.data)
+            // 插入后删除最后一条 保证列表中为10条数据
+            if (this.eventList.length > 9)
+              this.eventList.splice(10, 1)
+            // 将收到的数据在地图上添加
+            this.getWebSocketEvent(res.data)
+          }
+        })
+      }
+      console.log(that.eventList[0])
     },
     websocketsend(Data) { //数据发送
       this.websock.send(Data)
@@ -671,7 +802,7 @@ export default {
         if (this.weosocket) {
           this.websock.send(JSON.stringify(ping))
         } else {
-          this.initWebSocket()
+          // this.initWebSocket()
         }
       }, time)
     },
@@ -749,6 +880,7 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import '@/assets/styles/base.scss';
+
 .paging {
   padding: .5rem .3rem;
   display: flex;
@@ -769,6 +901,7 @@ export default {
     color: #2bacf7;
     border: 1px solid #33467f;
   }
+
   button:hover {
     padding: 0 0.3rem;
     height: 1.5rem;