Project_yhfu/src/views/forest.vue

<!--可视化公共模板 林业-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <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 h-80" style="padding-left: 1rem;">
              <el-collapse accordion>
                <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-l-text">
                        <h4 class="collapse-title">{{ item.name }}</h4>
                      </div>
                      <div class="d-l-l-count">{{ item.value }}</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>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" class="indexSupermapClass" :mapDiv="'forestMap'"
                :dynamicPlotting="false"
                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"
                @showEventDialog="showEventDialog"/>
      <!-- 右侧 -->
      <div class="rightbar rightbar-index" ref="right">
        <div class="right-item1">
        </div>
        <div class="right-item2">
          <!-- 日历 -->
          <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">
                <dateChoose @selectDay="selectDay"></dateChoose>
              </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-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>
                </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="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"/>
                  </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 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">
                        归档
                      </div>
                    </div>
                    <div class="bgt-info-name">{{ item.reportor }} {{ item.eventName }}</div>
                    <div class="bgt-info-place">
                      <ul>
                        <li>{{ item.createTime }}</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <!--分页-->
              <div class="paging">
                <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>
              </div>
            </dv-border-box-13>
          </div>
        </div>

      </div>
      <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>

    <firespread ref="firespread" :calendarDay="calendarDay" @getEventList="getEventList" @showEventDialog="showEventDialog"></firespread>

    <eventLocation ref="eventLocation"></eventLocation>
    <TVWall ref="TVWall"></TVWall>
  </div>
</template>

<script>
import dateChoose from '@/views/date.vue'//日历
/** ----------------------------------weosocket开始------------------------------------- */
import Cookies from 'js-cookie'
/** ----------------------------------weosocket结束------------------------------------- */

import {
  getEventList
} from '@/api/forest'
import {
  getNearEventByEventId
} from '@/api/event'
import {
  getEventByEventType
} from '@/api/village'
import supermap from '@/components/supermap' //超图
import supermapNotProcessed from '@/components/supermap' //超图
import supermapProcessed from '@/components/supermap' //超图
import vheader from '@/components/v-header.vue' //一体化共用头部
import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
import TVWall from '@/components/TVWall.vue' //电视墙弹窗
import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
import firespread from '@/views/firespread.vue' //事件详情弹窗

let echarts = require('echarts')
export default {
  components: {
    supermap,
    supermapNotProcessed,
    supermapProcessed,
    vheader,
    vBottomMenu,
    eventLocation,
    TVWall,
    dateChoose,
    eventdetailsdialog,
    firespread
  },
  created() {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog
    window.choseLayerSwitching = this.choseLayerSwitching
    window.choseLayerSwitchingList = this.choseLayerSwitchingList
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  },
  mounted() {
    this.getEventByEventType(this.getCurrentDataStr())
    this.getEventList(this.getCurrentDataStr(),this.bigEventTypeId,this.smallEventTypeId,this.pageSize,this.pageNum,'')
    this.getSupermap(this.getCurrentDataStr());
    /** ----------------------------------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);
      }
    }, 10000)
    this.bottomMenuList() //获取底部公共组件消息和任务
  },
  data() {
    return {
      //警报MP3文件
      audioSrc:require('@/assets/jingbao.mp3'),
      calendarDay: this.getCurrentDataStr(),
      //左侧部门事件数量
      villageTypeXlList: [],
      pageSize: 10,
      pageNum: 1,
      //右侧事件列表
      eventList: [],
      eventListnew: [],
      eventListAll: [],
      eventSearch: '',//事件列表搜索
      listCurrentIndex1: 0,
      bigEventTypeId: 0,
      smallEventTypeId: 0,
      /** ----------------------------------weosocket开始------------------------------------- */
      weosocket: false,
      websock: '',
      setIntervalWesocketPush: null,
      /** ----------------------------------weosocket结束------------------------------------- */
      /** ----------------------------------摄像头预览开始------------------------------------- */
      activePanel: 'key1',
      isLogin: false,
      cameraParams: [],
      ws: null,
      /** ----------------------------------摄像头预览结束------------------------------------- */
      markersList: [], //点位列表
      cameraList: [] //摄像头列表
    }
  },
  /** ----------------------------------weosocket开始------------------------------------- */
  destroyed() { //离开页面关闭Socket连接
    if (this.websock) {
      clearInterval(this.setIntervalWesocketPush)
      this.websock.close()
      this.websock = null
    }
  },
  /** ----------------------------------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 > 200) {
    //         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'
    //       }
    //       if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount > 0) {
    //         markersMap.click = 'showEventDialog'
    //         markersMap.icon = 'sj-icon-map-cuiban'
    //       } else if (this.eventList[i].eventStatusValue == 'forest_event_status_2') {
    //         markersMap.click = 'showEventDialog'
    //         markersMap.icon = 'sj-icon-map-qianshou'
    //         markersMap.isAggregation = false
    //       } else if (this.eventList[i].eventStatusValue == 'forest_event_status_5') {
    //         markersMap.click = 'showEventDialog'
    //         markersMap.icon = 'sj-icon-map-banjie'
    //         markersMap.isAggregation = false
    //       } 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].createTime + '</h4>' +
    //         '                </div>' +
    //         '                </div>' +
    //         '                </span>'
    //       if (this.eventList[i].picturePath != null && this.eventList[i].picturePath != '' && this.eventList[i].pictureType=='image') {
    //         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)
    },
    showEventDialog(eventCode) {
      //事件信息弹出
      this.$refs.eventdetailsdialog.showEventDialog(eventCode)
    },
    getFirespread(eventCode){
      this.$refs.firespread.showEventDialog(eventCode);
    },
    getCurrentDataStr() {
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    },
    selectDay(day) {//日历点击
      this.getEventByEventType(day)
      this.getEventList(day,0,0,10,1,'')
      this.getSupermap(day);
      this.calendarDay = day
    },

    getEventByEventType(day,loading) {
      let that = this
      //左侧获取事件部门数量
      getEventByEventType({ day: day },loading).then(res => {
        this.villageTypeXlList = res.data
      })
    },
    getSupermap(day, loading) {
      let that = this
      getNearEventByEventId(this.bigEventTypeId, this.smallEventTypeId, day, loading).then(res => {
        that.markersList = [];
        if (res.data != null && res.data.length > 0) {
          for (let i = 0; i < res.data.length; i++) {
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: 'marker',
              bindPopupHtml: '',
              click: '',
              parameter: '',
              keepBindPopup: false,
              isAggregation: false
            }
            if (res.data.length > 200) {
              markersMap.isAggregation = true
            }
            if (res.data[i].eventStatusValue == 'forest_event_status_1' && res.data[i].urgeCount == 0) {
              markersMap.click = 'showEventDialog'
              markersMap.icon = 'sj-icon-map-xinshangbao'
            }
            if (res.data[i].eventStatusValue == 'forest_event_status_1' && res.data[i].urgeCount > 0) {
              markersMap.click = 'showEventDialog'
              markersMap.icon = 'sj-icon-map-cuiban'
            } else if (res.data[i].eventStatusValue == 'forest_event_status_2') {
              markersMap.click = 'showEventDialog'
              markersMap.icon = 'sj-icon-map-qianshou'
              markersMap.isAggregation = false
            } else if (res.data[i].eventStatusValue == 'forest_event_status_5') {
              markersMap.click = 'showEventDialog'
              markersMap.icon = 'sj-icon-map-banjie'
              markersMap.isAggregation = false
            } else if (res.data[i].eventStatusValue == 'forest_event_status_6') {
              markersMap.click = 'showEventDialog'
              markersMap.icon = 'sj-icon-map-guidang'
            } else if (res.data[i].eventStatusValue == 'forest_event_status_7') {
              markersMap.click = 'showEventDialog'
              markersMap.icon = 'sj-icon-map-queren'
            }
            markersMap.parameter = res.data[i].eventCode
            markersMap.lng = res.data[i].longitude
            markersMap.lat = res.data[i].latitude
            markersMap.bindPopupHtml = '<div class="map-tip">' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>经纬度：' + res.data[i].longitude + ',' + res.data[i].latitude + '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>事件名称：' + res.data[i].eventName + '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>事件时间：' + res.data[i].createTime + '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>';
            if (res.data[i].pictureType == 'image' && res.data[i].picturePath != null && res.data[i].picturePath != '') {
              markersMap.bindPopupHtml += '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '<img src="' + res.data[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)
        }
      })
    },
    // getEventList(day,bigEventTypeId,smallEventTypeId,loading) {
    //   this.listCurrentIndex1=smallEventTypeId
    //   this.bigEventTypeId=bigEventTypeId
    //   this.smallEventTypeId=smallEventTypeId
    //   let that = this
    //   this.eventList = []
    //   this.eventListAll = []
    //   //右侧获取事件列表
    //   getEventList({
    //     day: day,
    //     eventTypeIdDl: [bigEventTypeId],
    //     eventTypeId: [smallEventTypeId]
    //   },loading).then(res => {
    //     this.eventList = res.data
    //     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,
    //           lat: 43.02,
    //           icon: 'marker',
    //           bindPopupHtml: '',
    //           click: '',
    //           parameter: '',
    //           keepBindPopup: false,
    //           isAggregation: false
    //         }
    //         if (this.eventList.length > 200) {
    //           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'
    //         }
    //         if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount > 0) {
    //           markersMap.click = 'showEventDialog'
    //           markersMap.icon = 'sj-icon-map-cuiban'
    //         } else if (this.eventList[i].eventStatusValue == 'forest_event_status_2') {
    //           markersMap.click = 'showEventDialog'
    //           markersMap.icon = 'sj-icon-map-qianshou'
    //           markersMap.isAggregation = false
    //         } else if (this.eventList[i].eventStatusValue == 'forest_event_status_5') {
    //           markersMap.click = 'showEventDialog'
    //           markersMap.icon = 'sj-icon-map-banjie'
    //           markersMap.isAggregation = false
    //         } 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].createTime + '</h4>' +
    //           '                </div>' +
    //           '                </div>' +
    //           '                </span>'
    //         if (this.eventList[i].picturePath != null && this.eventList[i].picturePath != '' && this.eventList[i].pictureType=='image') {
    //           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)
    //     }
    //   })
    // },

    getEventList(day, bigEventTypeId,smallEventTypeId, pageSize, pageNum, eventSearch, loading) {
      this.listCurrentIndex1=smallEventTypeId
      this.bigEventTypeId=bigEventTypeId
      this.smallEventTypeId=smallEventTypeId
      if (pageNum < 1) {
        this.$modal.msg('当前已是第一页')
        return;
      }
      this.pageSize = pageSize;
      this.pageNum = pageNum;
      let that = this
      this.eventList = []
      //右侧获取事件列表
      getEventList({day: day,
        eventTypeIdDl: [bigEventTypeId],
        eventTypeId: [smallEventTypeId],
        pageSize: pageSize, pageNum: pageNum, eventName: eventSearch}, loading).then(res => {
        this.eventList = res.data
        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();
          } else {
            that.$refs.bottomMenu.updateAlertFalse();
          }
        }
      })
    },



    stopAudio(){
      this.$refs.up.pause();//停止播放音乐
      this.$refs.up.currentTime = 0;
    },
    /** ----------------------------------weosocket开始------------------------------------- */
    initWebSocket() { //初始化weosocket
      const wsuri = 'wss://www.hmzzxc.com:10012/websocket/forest-' + Cookies.get('username')
      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连接成功')
      this.weosocket = true
      this.sendPing()
    },
    websocketonerror() { //连接建立失败重连
      this.initWebSocket()
    },
    websocketonmessage(e) { //数据接收
      console.log('接收数据', e.data)
    },
    websocketsend(Data) { //数据发送
      this.websock.send(Data)
    },
    websocketclose(e) { //关闭
      console.log('断开连接', e)
      // clearInterval(this.setIntervalWesocketPush)
      this.weosocket = false
    },
    /**发送心跳
     * @param {number} time 心跳间隔毫秒 默认5000
     * @param {string} ping 心跳名称 默认字符串ping
     */
    sendPing(time = 5000, 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))
        } else {
          this.initWebSocket()
        }
      }, time)
    },
    /** ----------------------------------weosocket结束------------------------------------- */

    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    bottomMenuList() {
      this.$refs.bottomMenu.selectTaskList()//获取任务列表
      this.$refs.bottomMenu.selectMessageList()//获取消息列表
    },
    showDialog(click) {
      if (click == 'eventLocation') {
        this.$refs.eventLocation.showEventLocation()
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showChild = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChangChild = false
      } else if (click == 'editableLayers') {
        this.$refs.bottomMenu.showChild = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChangChild = false
        if (!this.$refs.supermap.isEditableLayers) {
          this.$refs.supermap.isEditableLayers = true
        } else {
          this.$refs.supermap.isEditableLayers = false
        }
      } else if (click == 'layerSwitching') {
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChangChild = false
        if (!this.$refs.bottomMenu.showChild) {
          this.$refs.bottomMenu.showChild = true
        } else {
          this.$refs.bottomMenu.showChild = false
        }
      } else if (click == 'TVWall') {
        this.$refs.TVWall.showTVWall()
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showChild = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChangChild = false
      } else if (click == 'forestban') {
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showChild = false
        this.$refs.bottomMenu.showChangChild = false
        if (!this.$refs.bottomMenu.showBanChild) {
          this.$refs.bottomMenu.showBanChild = true
        } else {
          this.$refs.bottomMenu.showBanChild = false
        }
      } else if (click == 'forestchang') {
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChild = false
        if (!this.$refs.bottomMenu.showChangChild) {
          this.$refs.bottomMenu.showChangChild = true
        } else {
          this.$refs.bottomMenu.showChangChild = false
        }
      }

    },
    //选择图层
    choseLayerSwitching(url, isClear) {
      this.$refs.supermap.layerSwitching(url, isClear)
    },
    //选择图层(传递数组)
    choseLayerSwitchingList(urlList) {
      this.$refs.supermap.layerSwitchingList(urlList)
    },
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/assets/styles/base.scss';
.paging {
  padding: .5rem .3rem;
  display: flex;
  justify-content: center;
  align-content: center;

  span {
    color: #2bacf7;
    display: flex;
    align-items: center;
    padding: 0 1rem;
  }

  button {
    padding: 0 0.3rem;
    height: 1.5rem;
    background-color: #112543;
    color: #2bacf7;
    border: 1px solid #33467f;
  }
  button:hover {
    padding: 0 0.3rem;
    height: 1.5rem;
    background-color: #112543;
    color: #0ff7c5;
    border: 1px solid #1d657f;
  }
}
</style>