振兴乡村首页

src/assets/styles/base.scss

@@ -362,6 +362,10 @@ div::-webkit-scrollbar {
   height: 42vh !important;
 }
 
+.h-44 {
+  height: 44vh !important;
+}
+
 .h-45 {
   height: 45vh !important;
 }

src/views/eventdetailsdialog.vue

@@ -1543,7 +1543,6 @@ export default {
               this.cancelEventConfirm_send()
               this.showEventConfirm_gd = false
               this.$emit('getEventList', this.calendarDay)
-              this.$emit('getTodayEvents', this.calendarDay)
             }
           })
         } else {
@@ -1572,7 +1571,6 @@ export default {
               this.cancelEventConfirm_send()
               this.showEventConfirm = false
               this.$emit('getEventList', this.calendarDay)
-              this.$emit('getTodayEvents', this.calendarDay)
             }
           })
         }

src/views/forest.vue

@@ -7,11 +7,28 @@
     <div class="visual-body">
       <!-- 左侧 -->
       <div class="leftbar" ref="left">
+        <!-- 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;"/>
-            <div class="i-list-con small-bottom-margin h-30">
+            <div class="i-list-con h-80" style="padding-left: 1rem;">
+              <el-collapse accordion>
+                <el-collapse-item v-for="(item,index) in forestFarm" :key="index">
+                  <!-- deptId -->
+                  <template slot="title">
+                    <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"
+                         v-on:click="selectCameraByDeptId(item.deptId)">
+                      <div class="d-l-l-text">
+                        <h4 class="collapse-title">{{ item.deptName }}</h4>
+                      </div>
+                      <div class="d-l-l-count">{{ item.eventCount }}</div>
+                    </div>
+                  </template>
+                </el-collapse-item>
+              </el-collapse>
+              <div class="i-list-con small-bottom-margin h-30">
 
+              </div>
             </div>
           </dv-border-box-13>
         </div>
@@ -35,13 +52,91 @@
               </div>
             </dv-border-box-13>
           </div>
-
+          <!-- 事件列表 -->
+          <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;"/>
+              <div class="this-title">
+                <span>事件列表</span>
+                <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
+              </div>
+              <div class="i-list-con small-bottom-margin h-44">
+                <div class="event-list-search">
+                  <el-input
+                    placeholder="请输入内容"
+                    prefix-icon="el-icon-search"
+                    v-model="eventSearch" @change="searchEvent(eventSearch)">
+                  </el-input>
+                </div>
+                <div class="d-l-con padding-box nowrap" v-for="(item,index) in eventList"
+                     @click="dropLocation(item.latitude,item.longitude)">
+                  <div class="bgt-img">
+                    <img v-if="item.picturePath!=null&&item.picturePath!=''&& isAssetTypeAnImage(item.picturePath)"
+                         :src="item.picturePath"
+                         style="width: 93px;height: 64px"/>
+                    <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">
+                      <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">
+                      <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">
+                      <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">
+                      <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">
+                      <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">
+                      <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">
+                      <i class="el-icon-caret-left"></i>
+                      <div class="event-list-state-gd">
+                        归档
+                      </div>
+                    </div>
+                    <div class="bgt-info-name">{{ item.reportor }} {{ item.eventName }}</div>
+                    <div class="bgt-info-place">
+                      <ul>
+                        <li>{{ item.reportTime }}</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </dv-border-box-13>
+          </div>
         </div>
 
       </div>
       <vBottomMenu ref="bottomMenu"></vBottomMenu>
     </div>
-    <eventdetailsdialog ref="eventdetailsdialog" :calendarDay="calendarDay"></eventdetailsdialog>
+    <eventdetailsdialog ref="eventdetailsdialog" :calendarDay="calendarDay" @getEventList="getEventList" ></eventdetailsdialog>
     <eventLocation ref="eventLocation"></eventLocation>
     <TVWall ref="TVWall"></TVWall>
   </div>
@@ -54,7 +149,8 @@ import Cookies from 'js-cookie'
 /** ----------------------------------weosocket结束------------------------------------- */
 
 import {
-  // getExposureStage
+  getDeptEventCount,
+  getEventList,
 } from '@/api/forest'
 import supermap from '@/components/supermap' //超图
 import supermapNotProcessed from '@/components/supermap' //超图
@@ -99,6 +195,8 @@ export default {
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
   },
   mounted() {
+    this.getDeptEventCount(this.getCurrentDataStr())
+    this.getEventList(this.getCurrentDataStr())
     /** ----------------------------------weosocket开始------------------------------------- */
     // this.initWebSocket()
     /** ----------------------------------weosocket结束------------------------------------- */
@@ -107,7 +205,14 @@ export default {
   data() {
     return {
       calendarDay: this.getCurrentDataStr(),
-      total: '',
+      //左侧部门事件数量
+      forestFarm: [],
+      //右侧事件列表
+      eventList: [],
+      eventListnew: [],
+      eventListAll: [],
+      eventSearch: '',//事件列表搜索
+      listCurrentIndex1: '',
       /** ----------------------------------weosocket开始------------------------------------- */
       weosocket: false,
       websock: '',
@@ -133,6 +238,103 @@ export default {
   },
   /** ----------------------------------weosocket结束------------------------------------- */
   methods: {
+    searchEvent(eventSearch) {
+      let that = this
+      //事件列表搜索
+      this.eventListnew = []
+      if (eventSearch != null && eventSearch != '') {
+        for (var i = 0; i < this.eventListAll.length; i++) {
+          if (this.eventListAll[i].reportor.indexOf(eventSearch) > -1) {
+            this.eventListnew.push(this.eventListAll[i])
+          }
+        }
+        this.eventList = this.eventListnew
+      } else {
+        this.eventList = this.eventListAll
+      }
+      if (this.eventList != null && this.eventList.length > 0) {
+        for (let i = 0; i < this.eventList.length; i++) {
+          let markersMap = {
+            lng: 124.59,
+            lat: 43.02,
+            icon: 'marker',
+            bindPopupHtml: '',
+            click: '',
+            parameter: '',
+            keepBindPopup: false,
+            isAggregation: false
+          }
+          if (this.eventList.length > 50) {
+            markersMap.isAggregation = true
+          }
+          if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount == 0) {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-xinshangbao'
+            markersMap.isAggregation = false
+          }
+          if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount > 0) {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-cuiban'
+            markersMap.isAggregation = false
+          } else if (this.eventList[i].eventStatusValue == 'forest_event_status_2') {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-qianshou'
+          } else if (this.eventList[i].eventStatusValue == 'forest_event_status_5') {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-banjie'
+          } else if (this.eventList[i].eventStatusValue == 'forest_event_status_6') {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-guidang'
+          }
+          markersMap.parameter = this.eventList[i].eventCode
+          markersMap.lng = this.eventList[i].longitude
+          markersMap.lat = this.eventList[i].latitude
+          markersMap.bindPopupHtml = '<div class="map-tip">' +
+            '<span>' +
+            '                  <div class="d-l-con">' +
+            '                  <div class="d-l-l-text">' +
+            '                  <h4>经纬度：' + this.eventList[i].longitude + ',' + this.eventList[i].latitude + '</h4>' +
+            '                </div>' +
+            '                </div>' +
+            '                </span>' +
+            '<span>' +
+            '                  <div class="d-l-con">' +
+            '                  <div class="d-l-l-text">' +
+            '                  <h4>事件名称：' + this.eventList[i].eventName + '</h4>' +
+            '                </div>' +
+            '                </div>' +
+            '                </span>' +
+            '<span>' +
+            '                  <div class="d-l-con">' +
+            '                  <div class="d-l-l-text">' +
+            '                  <h4>事件时间：' + this.eventList[i].reportTime + '</h4>' +
+            '                </div>' +
+            '                </div>' +
+            '                </span>'
+          if (this.eventList[i].picturePath != null && this.eventList[i].picturePath != '' && this.isAssetTypeAnImage(this.eventList[i].picturePath)) {
+            markersMap.bindPopupHtml += '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '<img src="' + this.eventList[i].picturePath + '" style="width: 150px;height: 100px"/>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>'
+          }
+          markersMap.bindPopupHtml += '</div>'
+          that.markersList.push(markersMap)
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearM(false)
+          that.$refs.supermap.clearM(true)
+          that.$refs.supermap.setMarkers(that.markersList)
+        }, 2000)
+      } else {
+        setTimeout(() => {
+          that.$refs.supermap.clearM(false)
+          that.$refs.supermap.clearM(true)
+        }, 2000)
+      }
+    },
     dropLocation(lat, lng) {
       this.$refs.supermap.dropLocation(lat, lng)
     },
@@ -150,12 +352,115 @@ export default {
       return y + '-' + m + '-' + d
     },
     selectDay(day) {//日历点击
+      this.getDeptEventCount(day)
+      this.getEventList(day)
       this.calendarDay = day
     },
 
     selectTaskList() {
       this.$refs.bottomMenu.selectTaskList()
     },
+    getDeptEventCount(day) {
+      let that = this
+      //左侧获取事件部门数量
+      getDeptEventCount({ day: day }).then(res => {
+        this.forestFarm = res.data
+      })
+    },
+    getEventList(day) {
+      debugger
+      let that = this
+      this.eventList = []
+      this.eventListAll = []
+      //右侧获取事件列表
+      getEventList({ day: day }).then(res => {
+        this.eventList = res.data
+        this.eventListAll = res.data
+        that.markersList = []
+        if (this.eventList != null && this.eventList.length > 0) {
+          for (let i = 0; i < this.eventList.length; i++) {
+            let markersMap = {
+              lng: 124.59,
+              lat: 43.02,
+              icon: 'marker',
+              bindPopupHtml: '',
+              click: '',
+              parameter: '',
+              keepBindPopup: false,
+              isAggregation: false
+            }
+            if (this.eventList.length > 50) {
+              markersMap.isAggregation = true
+            }
+            if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount == 0) {
+              markersMap.click = 'showEventDialog'
+              markersMap.icon = 'sj-icon-map-xinshangbao'
+              markersMap.isAggregation = false
+            }
+            if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount > 0) {
+              markersMap.click = 'showEventDialog'
+              markersMap.icon = 'sj-icon-map-cuiban'
+              markersMap.isAggregation = false
+            } else if (this.eventList[i].eventStatusValue == 'forest_event_status_2') {
+              markersMap.click = 'showEventDialog'
+              markersMap.icon = 'sj-icon-map-qianshou'
+            } else if (this.eventList[i].eventStatusValue == 'forest_event_status_5') {
+              markersMap.click = 'showEventDialog'
+              markersMap.icon = 'sj-icon-map-banjie'
+            } else if (this.eventList[i].eventStatusValue == 'forest_event_status_6') {
+              markersMap.click = 'showEventDialog'
+              markersMap.icon = 'sj-icon-map-guidang'
+            }
+            markersMap.parameter = this.eventList[i].eventCode
+            markersMap.lng = this.eventList[i].longitude
+            markersMap.lat = this.eventList[i].latitude
+            markersMap.bindPopupHtml = '<div class="map-tip">' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>经纬度：' + this.eventList[i].longitude + ',' + this.eventList[i].latitude + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>事件名称：' + this.eventList[i].eventName + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>事件时间：' + this.eventList[i].reportTime + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>'
+            if (this.eventList[i].picturePath != null && this.eventList[i].picturePath != '' && this.isAssetTypeAnImage(this.eventList[i].picturePath)) {
+              markersMap.bindPopupHtml += '<span>' +
+                '                  <div class="d-l-con">' +
+                '                  <div class="d-l-l-text">' +
+                '<img src="' + this.eventList[i].picturePath + '" style="width: 150px;height: 100px"/>' +
+                '                </div>' +
+                '                </div>' +
+                '                </span>'
+            }
+            markersMap.bindPopupHtml += '</div>'
+            that.markersList.push(markersMap)
+          }
+          setTimeout(() => {
+            that.$refs.supermap.clearM(false)
+            that.$refs.supermap.clearM(true)
+            that.$refs.supermap.setMarkers(that.markersList)
+          }, 2000)
+        } else {
+          setTimeout(() => {
+            that.$refs.supermap.clearM(false)
+            that.$refs.supermap.clearM(true)
+          }, 2000)
+        }
+      })
+    },
     // 判断是否为图片
     isAssetTypeAnImage(filePath) {
       //获取最后一个.的位置
@@ -342,3 +647,4 @@ export default {
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import '@/assets/styles/base.scss';
 </style>
+