Project_yhfu/src/views/forest.vue

<!--可视化公共模板 林业-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar" ref="left">
        <!-- 1 基本情况 -->
        <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 h-14">
              <div class="d-l-con no_hover">
                <div class="d-l-l-text w-100p no-weight">
                  <h4 class="line-h-1 w-100p" v-html="forestInfo">{{ forestInfo }}</h4>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
        <!-- 2 事件统计-->
        <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-29-5">
              <div class="d-l-con no_hover">
                <div class="event-count">
                  <div class="count-number">{{ totalStr.charAt(0) }}</div>
                  <div class="count-number">{{ totalStr.charAt(1) }}</div>
                  <div class="count-number">{{ totalStr.charAt(2) }}</div>
                  <div class="count-number">{{ totalStr.charAt(3) }}</div>
                  <div class="count-number">{{ totalStr.charAt(4) }}</div>
                  <div class="count-number">{{ totalStr.charAt(5) }}</div>
                  <dv-decoration-5
                    style="width:81%;height:15px;position: absolute; top:4.2rem;z-index: 0; "/>
                </div>
              </div>
              <div class="d-l-con-icon">
                <div class="icon-con w-33 flex-d t-a-center">
                  <dv-decoration-9
                    style="width: 5.5rem;height: 5.5rem; color:#16e29e;font-size: 1rem;font-weight: bolder;">
                    {{ newReport_pre }}%
                  </dv-decoration-9>
                  <div class="e-state"
                       :style="{'background-image':`url(${require('@/assets/images/integrated/state-bg.png')})`}">
                    <span>新上报</span> <span>{{ newReport }}</span>
                  </div>
                </div>
                <div class="icon-con w-33 flex-d t-a-center">
                  <dv-decoration-9
                    style="width: 5.5rem;height: 5.5rem; color:#f18425;font-size: 1rem;font-weight: bolder;">
                    {{ readySure_pre }}%
                  </dv-decoration-9>
                  <div class="e-state"
                       :style="{'background-image':`url(${require('@/assets/images/integrated/state-bg.png')})`}">
                    <span>处理中</span> <span>{{ readySure }}</span>
                  </div>
                </div>
                <div class="icon-con w-33 flex-d t-a-center">
                  <dv-decoration-9
                    style="width: 5.5rem;height: 5.5rem; color:#9179f1;font-size: 1rem;font-weight: bolder;">
                    {{ readyFinish_pre }}%
                  </dv-decoration-9>
                  <div class="e-state"
                       :style="{'background-image':`url(${require('@/assets/images/integrated/state-bg.png')})`}">
                    <span>已完成</span> <span>{{ readyFinish }}</span>
                  </div>
                </div>
              </div>
              <div class="d-l-con no_hover">
                <div id="chart-event-ai" style="width: 100%;height:6vh;"></div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
        <!-- 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-27" 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>
          </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"></supermap>
      <!-- 右侧 -->
      <div class="rightbar rightbar-index" ref="right">
        <div class="right-item1">
          <!-- 天气 -->
          <div class="forthis">
            <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)">
              <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
              <div class="i-list-con small-bottom-margin h-18">
                <el-row :gutter="20" v-if="todatWeather">
                  <el-col :span="9">
                    <div class="weather-img">
                      <img v-if="weatherinformationWeather==1"
                           src="../assets/images/integrated/weather/qing-1.png">
                      <img v-if="weatherinformationWeather==2"
                           src="../assets/images/integrated/weather/duoyun-2.png">
                      <img v-if="weatherinformationWeather==3"
                           src="../assets/images/integrated/weather/yin-3.png">
                      <img v-if="weatherinformationWeather==4"
                           src="../assets/images/integrated/weather/zhenyu-4.png">
                      <img v-if="weatherinformationWeather==5"
                           src="../assets/images/integrated/weather/leizhenyu-5.png">
                      <img v-if="weatherinformationWeather==6"
                           src="../assets/images/integrated/weather/leizhenyubingbao-6.png">
                      <img v-if="weatherinformationWeather==7"
                           src="../assets/images/integrated/weather/yujiaxue-7.png">
                      <img v-if="weatherinformationWeather==8"
                           src="../assets/images/integrated/weather/xiaoyu-8.png">
                      <img v-if="weatherinformationWeather==9||weatherinformationWeather==22"
                           src="../assets/images/integrated/weather/zhongyu-9.png">
                      <img v-if="weatherinformationWeather==10||weatherinformationWeather==23"
                           src="../assets/images/integrated/weather/dayu-10.png">
                      <img v-if="weatherinformationWeather==11||weatherinformationWeather==24"
                           src="../assets/images/integrated/weather/baoyu-11.png">
                      <img v-if="weatherinformationWeather==12||weatherinformationWeather==25"
                           src="../assets/images/integrated/weather/dabaoyu-12.png">
                      <img v-if="weatherinformationWeather==13||weatherinformationWeather==26"
                           src="../assets/images/integrated/weather/tedabaoyu-13.png">
                      <img v-if="weatherinformationWeather==14"
                           src="../assets/images/integrated/weather/zhenxue-14.png">
                      <img v-if="weatherinformationWeather==15"
                           src="../assets/images/integrated/weather/xiaoxue-15.png">
                      <img v-if="weatherinformationWeather==16||weatherinformationWeather==27"
                           src="../assets/images/integrated/weather/zhongxue-16.png">
                      <img v-if="weatherinformationWeather==17||weatherinformationWeather==28"
                           src="../assets/images/integrated/weather/daxue-17.png">
                      <img v-if="weatherinformationWeather==18||weatherinformationWeather==29"
                           src="../assets/images/integrated/weather/baoxue-18.png">
                      <img v-if="weatherinformationWeather==19"
                           src="../assets/images/integrated/weather/wu-19.png">
                      <img v-if="weatherinformationWeather==20"
                           src="../assets/images/integrated/weather/dongyu-20.png">
                      <img v-if="weatherinformationWeather==21"
                           src="../assets/images/integrated/weather/shachenbao-21.png">
                      <img v-if="weatherinformationWeather==30"
                           src="../assets/images/integrated/weather/fuchen-30.png">
                      <img v-if="weatherinformationWeather==31"
                           src="../assets/images/integrated/weather/yangsha-31.png">
                      <img v-if="weatherinformationWeather==32"
                           src="../assets/images/integrated/weather/qiangshachenbao-32.png">
                      <span v-if="weatherinformationWeather==1">晴</span>
                      <span v-if="weatherinformationWeather==2">多云</span>
                      <span v-if="weatherinformationWeather==3">阴</span>
                      <span v-if="weatherinformationWeather==4">阵雨</span>
                      <span v-if="weatherinformationWeather==5">雷阵雨</span>
                      <span v-if="weatherinformationWeather==6">雷阵雨伴有冰雹</span>
                      <span v-if="weatherinformationWeather==7">雨夹雪</span>
                      <span v-if="weatherinformationWeather==8">小雨</span>
                      <span v-if="weatherinformationWeather==9">中雨</span>
                      <span v-if="weatherinformationWeather==10">大雨</span>
                      <span v-if="weatherinformationWeather==11">暴雨</span>
                      <span v-if="weatherinformationWeather==12">大暴雨</span>
                      <span v-if="weatherinformationWeather==13">特大暴雨</span>
                      <span v-if="weatherinformationWeather==14">阵雪</span>
                      <span v-if="weatherinformationWeather==15">小雪</span>
                      <span v-if="weatherinformationWeather==16">中雪</span>
                      <span v-if="weatherinformationWeather==17">大雪</span>
                      <span v-if="weatherinformationWeather==18">暴雪</span>
                      <span v-if="weatherinformationWeather==19">雾</span>
                      <span v-if="weatherinformationWeather==20">冻雨</span>
                      <span v-if="weatherinformationWeather==21">沙尘暴</span>
                      <span v-if="weatherinformationWeather==22">小雨—中雨</span>
                      <span v-if="weatherinformationWeather==23">中雨—大雨</span>
                      <span v-if="weatherinformationWeather==24">大雨—暴雨</span>
                      <span v-if="weatherinformationWeather==25">暴雨—大暴雨</span>
                      <span v-if="weatherinformationWeather==26">大暴雨—特大暴雨</span>
                      <span v-if="weatherinformationWeather==27">小雪—中雪</span>
                      <span v-if="weatherinformationWeather==28">中雪—大雪</span>
                      <span v-if="weatherinformationWeather==29">大雪—暴雪</span>
                      <span v-if="weatherinformationWeather==30">浮尘</span>
                      <span v-if="weatherinformationWeather==31">扬沙</span>
                      <span v-if="weatherinformationWeather==32">强沙尘暴</span>
                    </div>
                  </el-col>
                  <el-col :span="15">
                    <div class="weather-info">
                      <ul>
                        <li>风力：{{ weatherinformationPower }}级</li>
                        <li>低温：{{ weatherinformationLow }}℃</li>
                        <li v-if="weatherinformationDirection==1">风向：东风</li>
                        <li v-if="weatherinformationDirection==2">风向：东南风</li>
                        <li v-if="weatherinformationDirection==3">风向：南风</li>
                        <li v-if="weatherinformationDirection==4">风向：西南风</li>
                        <li v-if="weatherinformationDirection==5">风向：西风</li>
                        <li v-if="weatherinformationDirection==6">风向：西北风</li>
                        <li v-if="weatherinformationDirection==7">风向：北风</li>
                        <li v-if="weatherinformationDirection==8">风向：东北风</li>
                        <li>高温：{{ weatherinformationHigh }}℃</li>
                        <li>火险：{{ weatherinformationLevelValue }}
                        </li>
                        <li>湿度：{{ weatherinformationTemperature }}</li>
                      </ul>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20" v-else>
                  <el-col :span="24">
                    <div class="weather-img">
                      暂无天气信息！
                    </div>
                  </el-col>
                </el-row>
                <div class="firestate" v-if="todatWeather">
                  <div
                    :class="weatherinformationLevel=='forest_weatherinformation_level_1'? 'state-block1 state-on':'state-block1'">
                  </div>
                  <div
                    :class="weatherinformationLevel=='forest_weatherinformation_level_2'? 'state-block2 state-on':'state-block2'">
                  </div>
                  <div
                    :class="weatherinformationLevel=='forest_weatherinformation_level_3'? 'state-block3 state-on':'state-block3'">
                  </div>
                  <div
                    :class="weatherinformationLevel=='forest_weatherinformation_level_4'? 'state-block4 state-on':'state-block4'">
                  </div>
                  <div
                    :class="weatherinformationLevel=='forest_weatherinformation_level_5'? 'state-block5 state-on':'state-block5'">
                  </div>
                </div>
              </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-18">
                <div class="d-l-con padding-box nowrap" v-for="(item,index) in exposureStageList">
                  <div class="bgt-state">
                    <div class="bgt-state-frequency">{{ item.urgeCount }}</div>
                    <div class="bgt-state-minute">{{ item.timeDiff }}分钟</div>
                  </div>
                  <div class="bgt-info">
                    <div class="bgt-info-name">{{ item.eventName }}</div>
                    <div class="bgt-info-place">
                      <ul>
                        <li>{{ item.deptNames }}</li>
                      </ul>
                    </div>
                  </div>
                </div>

              </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" style="height: 30vh;">
                <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,item.eventCode)" 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,10,pageNum-1)">上一页
                </el-button>
                <!-- <span>第0页</span> -->
                <el-button type="button" @click="getEventList(calendarDay,10,pageNum+1)">下一页
                </el-button>
              </div>
            </dv-border-box-13>
          </div>
        </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" style="cursor: pointer"
                   @click="setEventTypeId({eventTypeIdDl: [], eventTypeId: []})">
                <span>事件分类</span>
                <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
              </div>
              <div class="i-list-con small-bottom-margin h-19">
                <chart v-if="showEventKind" :config="eventKind" @setEventTypeId="setEventTypeId"
                       style="width: 90%;height: 18vh; padding:.5rem 1rem"/>
              </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-19">
                <dv-scroll-ranking-board :config="reportList"
                                         style="width: 100%;height: 300px; padding:.5rem 1rem"/>
              </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" @getEventList="getEventList"
                        @getTodayEvents="getTodayEvents" @getFirespread="getFirespread"
                        @getSupermap="getSupermap"></eventdetailsdialog>

    <firespread ref="firespread" :calendarDay="calendarDay" @getEventList="getEventList"
                @getTodayEvents="getTodayEvents" @showEventDialog="showEventDialog"
                @getSupermap="getSupermap" @showDialog="showDialog"></firespread>
    <eventLocation ref="eventLocation"></eventLocation>
    <TVWall ref="TVWall"></TVWall>
    <wrj ref="wrj"></wrj>
  </div>
</template>

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

import {
  getMenuEventType,
  getBaseInfo,
  getTodayEvents,
  getEventPush,
  getDeptEventCount,
  getWeather,
  getEventList,
  getEventByEventType,
  getEventByReportorOrder,
  getExposureStage
} from '@/api/forest'
import {
  getNearEvent
} from '@/api/event'
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 wrj from '@/components/wrj.vue' //无人机
import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
import firespread from '@/views/firespread.vue' //事件详情弹窗
import chart from './from/dvCapsuleChart.vue'

  /** ----------------------------------摄像头预览开始------------------------------------- */
  import { getDahuaVideoServer } from '@/api/dahua/dahua'
  import DHWs from '@/dahua/lib/DHWs'
  import Firespread from "./firespread";

/** ----------------------------------摄像头预览结束------------------------------------- */

let echarts = require('echarts')
export default {
  components: {
    Firespread,
    chart,
    supermap,
    // supermapNotProcessed,
    // supermapProcessed,
    vheader,
    vBottomMenu,
    eventLocation,
    TVWall,
    wrj,
    dateChoose,
    eventdetailsdialog,
    firespread
  },
  created() {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog
    window.choseLayerSwitching = this.choseLayerSwitching
    window.choseLayerSwitchingList = this.choseLayerSwitchingList
    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    const DHWsInstance = DHWs.getInstance();
    this.ws = DHWsInstance;
  },
  mounted() {
    this.getBaseInfo()
    this.getTodayEvents(this.getCurrentDataStr())
    this.getDeptEventCount(this.getCurrentDataStr())
    this.getWeather(this.getCurrentDataStr())
    this.getEventList(this.getCurrentDataStr(), this.pageSize, this.pageNum)
    this.getEventByEventType(this.getCurrentDataStr())
    this.getEventByReportorOrder(this.getCurrentDataStr())
    this.getExposureStage(this.getCurrentDataStr())
    this.getSupermap(this.getCurrentDataStr())
    this.getMenuEventType()
    /** ----------------------------------weosocket开始------------------------------------- */
    // this.initWebSocket()
    /** ----------------------------------weosocket结束------------------------------------- */
    this.bottomMenuList() //获取底部公共组件消息和任务
  },
  data() {
    return {
      //警报MP3文件
      audioSrc: require('@/assets/jingbao.mp3'),
      calendarDay: this.getCurrentDataStr(),
      //基本情况
      forestInfo: '', //基本情况
      //左侧获取事件信息统计
      totalStr: '000000',
      aiTotal: '',
      newReport: '',
      otherTotal: '',
      readyFinish: '',
      readySure: '',
      total: '',
      aiTotal_pre: '',
      newReport_pre: '',
      otherTotal_pre: '',
      readyFinish_pre: '',
      readySure_pre: '',
      //左侧部门事件数量
      forestFarm: [],
      //右侧天气
      todatWeather: false,
      weatherinformationDirection: '',
      weatherinformationHigh: '',
      weatherinformationLevel: '',
      weatherinformationLevelValue: '', //火险登记中文
      weatherinformationLow: '',
      weatherinformationPower: '',
      weatherinformationTemperature: '',
      weatherinformationTime: '',
      weatherinformationWeather: '',
      //右侧曝光台
      exposureStageList: [],
      //右侧事件列表
      eventList: [],
      pageSize: 10,
      pageNum: 1,
      eventTypeIdDl: [],
      eventTypeId: [],
      eventListnew: [],
      eventListAll: [],
      eventSearch: '', //事件列表搜索
      listCurrentIndex1: '',
      // ----------------------------------事件分类柱状----------------------------------------
      eventKind: {},
      showEventKind: false,
      // ----------------------------------上报排行----------------------------------------
      reportList: {
        data: []
      },
      /** ----------------------------------weosocket开始------------------------------------- */
      weosocket: false,
      websock: '',
      setIntervalWesocketPush: null,
      websockSid: {
        userId: '',
        eventTypeDl: '',
        eventType: '',
      },
      /** ----------------------------------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: {
    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)
      })
    },
    setEventTypeId(data) {
      // let data = {eventTypeIdDl: [], eventTypeId: []}
      // let data = {eventTypeIdDl: that.eventTypeIdDl, eventTypeId: that.eventTypeId}
      let that = this
      that.eventTypeIdDl = data.eventTypeIdDl
      that.eventTypeId = data.eventTypeId
      that.getSupermap(that.calendarDay, false)
      that.getTodayEvents(that.calendarDay, false)
      that.getEventByEventType(that.calendarDay, false)
      that.getExposureStage(that.calendarDay, false)
      that.getEventByReportorOrder(that.calendarDay, false)
      that.getDeptEventCount(that.calendarDay, false)
      that.getEventList(that.calendarDay, that.pageSize, that.pageNum, '', false)
    },
    // searchEvent(pageSize,pageNum,eventSearch) {
    //   this.pageSize = pageSize;
    //   this.pageNum = pageNum;
    //   let that = this
    //   //事件列表搜索
    //   this.eventList = []
    //   //右侧获取事件列表
    //   getEventList({ day: that.calendarDay,pageSize:pageSize,pageNum: pageNum ,eventName:eventSearch}).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();
    //       }
    //     }
    //   })
    // },
    dropLocation(lat, lng,eventCode) {
      this.$refs.supermap.dropLocation(lat, lng,18)
      this.showEventDialog(eventCode)
    },
    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.getTodayEvents(day)
      this.getDeptEventCount(day)
      this.getWeather(day)
      this.getEventList(day, 10, 1)
      this.getEventByEventType(day)
      this.getEventByReportorOrder(day)
      this.getExposureStage(day)
      this.getSupermap(day);
      this.calendarDay = day
    },

    //事件数量统计chart 样例地址http://192.144.199.210:8080/editor/index.html?chart_id=jTXf0Rv4A3oiBONB
    eventChartAi(aiTotal_pre, otherTotal_pre) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('chart-event-ai'))
      myChart.setOption({
        tooltip: {
          trigger: 'none'
        },
        grid: {
          top: '65%',
          left: '5%',
          right: '5%'
        },
        yAxis: {
          data: ['百分比'],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        xAxis: {
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        legend: {
          data: ['AI', '其他'],
          bottom: '5%',
          textStyle: {
            color: '#1FC3CE',
            fontSize: 14
          }
        },
        series: [{
          // name: '最上层立体圆',
          type: 'pictorialBar',
          symbolSize: [10, 20],
          symbolOffset: [2, 0],
          z: 12,
          itemStyle: {
            normal: {
              color: '#293CA0'
            }
          },
          data: [{
            value: 100,
            symbolPosition: 'end'
          }]
        }, {
          // name: '中间立体圆',
          type: 'pictorialBar',
          symbolSize: [10, 20],
          symbolOffset: [2, 0],
          z: 12,
          itemStyle: {
            normal: {
              color: '#45ac8d'
            }
          },
          data: [{
            value: aiTotal_pre,
            symbolPosition: 'end'
          }]
        }, {
          // name: '最底部立体圆',
          type: 'pictorialBar',
          symbolSize: [10, 20],
          symbolOffset: [-4, 0],
          z: 12,
          itemStyle: {
            normal: {
              color: '#196d59'
            }
          },
          data: [otherTotal_pre]
        }, {
          name: 'AI',
          //底部立体柱
          stack: '1',
          type: 'bar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#29ac8f'
              }, {
                offset: 1,
                color: '#0a3f3f'
              }])
            }
          },
          label: {
            normal: {
              show: true,
              position: 'inside',
              offset: [0, 1],
              formatter: function (obj) {
                return (obj.value).toLocaleString() + '%'
              },
              textStyle: {
                align: 'center',
                baseline: 'middle',
                fontSize: 14,
                fontWeight: '400',
                color: '#fff',
                textShadowColor: '#000',
                textShadowBlur: '0',
                textShadowOffsetX: 1,
                textShadowOffsetY: 1
              }
            }
          },

          silent: true,
          barWidth: 20,
          barGap: '-100%', // Make series be overlap
          data: [aiTotal_pre]
        }, {
          name: '其他',
          //上部立体柱
          stack: '1',
          type: 'bar',
          itemStyle: {
            normal: {
              color: '#14257B',
              opacity: .7
            }
          },
          silent: true,
          barWidth: 20,
          barGap: '-100%', // Make series be overlap
          data: [otherTotal_pre],
          // itemStyle: {
          //     normal: {
          //         color: 'rgba(29,67,243,1)',
          //     }
          // },
          label: {
            normal: {
              show: true,
              position: 'inside',
              offset: [0, 1],
              formatter: function (obj) {
                return (obj.value).toLocaleString() + '%'
              },
              textStyle: {
                align: 'center',
                baseline: 'middle',
                fontSize: 14,
                fontWeight: '400',
                color: '#fff',
                textShadowColor: '#000',
                textShadowBlur: '0',
                textShadowOffsetX: 1,
                textShadowOffsetY: 1
              }
            }
          }
        }]
      })
    },
    getBaseInfo() {
      //左侧获取部门信息
      getBaseInfo().then(res => {
        if (res.code == 200) {
          if (res.msg == '未找到部门信息') {
            this.forestInfo = '未找到部门信息!'
          } else {
            this.forestInfo = res.data.baseinfo //基本情况
          }
        }
      })
    },
    getTodayEvents(day, loading) {
      let that = this
      //左侧获取事件信息统计
      getTodayEvents({eventTypeIdDl: that.eventTypeIdDl,eventTypeId: that.eventTypeId,day: day}, loading).then(res => {
        this.aiTotal = res.data.aiTotal
        this.aiTotal_pre = res.data.aiTotal_pre
        this.newReport = res.data.newReport
        this.newReport_pre = res.data.newReport_pre
        this.otherTotal = res.data.otherTotal
        this.otherTotal_pre = res.data.otherTotal_pre
        this.readyFinish = res.data.readyFinish
        this.readyFinish_pre = res.data.readyFinish_pre
        this.readySure = res.data.readySure
        this.readySure_pre = res.data.readySure_pre
        this.totalStr = res.data.totalStr
        this.total = res.data.total
        this.eventChartAi(this.aiTotal_pre, this.otherTotal_pre)
      })
    },
    getDeptEventCount(day, loading) {
      let that = this
      //左侧获取事件部门数量
      getDeptEventCount({eventTypeIdDl: that.eventTypeIdDl,eventTypeId: that.eventTypeId,day: day}, loading).then(res => {
        this.forestFarm = res.data
      })
    },
    getWeather(day) {
      let that = this
      //右侧获取天气信息
      getWeather({day: day}).then(res => {
        if (res.code == 200) {
          if (res.msg == '天气未添加') {
            this.todatWeather = false
          } else {
            this.todatWeather = true
            this.weatherinformationDirection = res.data.weatherinformationDirection
            this.weatherinformationHigh = res.data.weatherinformationHigh
            this.weatherinformationLevel = res.data.weatherinformationLevel
            this.weatherinformationLevelValue = res.data.weatherinformationLevelValue
            this.weatherinformationLow = res.data.weatherinformationLow
            this.weatherinformationPower = res.data.weatherinformationPower
            this.weatherinformationTemperature = res.data.weatherinformationTemperature
            this.weatherinformationTime = res.data.weatherinformationTime
            this.weatherinformationWeather = res.data.weatherinformationWeather
          }
        } else {
          this.todatWeather = false
        }
      })
    },
    getSupermap(day, loading) {
      let that = this
      getNearEvent('', '', day, loading, that.eventTypeIdDl, that.eventTypeId).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: true
            }
            // 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, pageSize, pageNum, eventSearch, loading) {
      if (pageNum < 1) {
        this.$modal.msg('当前已是第一页')
        return;
      }
      this.pageSize = pageSize;
      this.pageNum = pageNum;
      let that = this
      this.eventList = []
      //右侧获取事件列表
      getEventList({eventTypeIdDl: that.eventTypeIdDl,eventTypeId: that.eventTypeId, day: day, 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();
          }
        }
      })
    },
    getEventByEventType(day, loading) {
      let that = this
      //右侧获取事件分类
      getEventByEventType({eventTypeIdDl: that.eventTypeIdDl,eventTypeId: that.eventTypeId, day: day}, loading).then(res => {
        if (res.data != null && res.data.length > 0) {
          this.showEventKind = true
          this.eventKind.data = res.data
          this.eventKind.colors = ['#1ce0a9', '#d6333b', '#e68d3f', '#32c5e9', '#2abc65']
          this.eventKind.showValue = true
          this.eventKind = {...this.eventKind}
        } else {
          this.showEventKind = false
          this.eventKind = {}
          this.eventKind = {...this.eventKind}
        }
      })
    },
    getEventByReportorOrder(day, loading) {
      let that = this
      //右侧获取上报排名
      getEventByReportorOrder({eventTypeIdDl: that.eventTypeIdDl,eventTypeId: that.eventTypeId,day: day}, loading).then(res => {
        if (res.data != null && res.data.length > 0) {
          this.reportList.data = res.data
          this.reportList = {...this.reportList}
        } else {
          this.reportList.data = []
          this.reportList = {...this.reportList}
        }
      })
    },
    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: true
      }
      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)
    },
    getExposureStage(day, loading) {
      let that = this
      //右侧获取曝光台
      getExposureStage({eventTypeIdDl: that.eventTypeIdDl,eventTypeId: that.eventTypeId,day: day}, loading).then(res => {
        this.exposureStageList = res.data
      })
    },
    /** ----------------------------------weosocket开始------------------------------------- */
    initWebSocket(userId, eventTypeDl, eventType) {        //初始化weosocket
      selectConfigKey('KSH_SOCKET').then(res => {
        const wsuri = res.data + userId + '/' + eventTypeDl + '/' + eventType
        this.websock = new WebSocket(wsuri)
        console.log('建立websocket连接')
        this.websock.onopen = this.websocketonopen
        this.websock.onmessage = this.websocketonmessage
        this.websock.onerror = this.websocketonerror
      })
    },
    websocketonopen() { //连接建立之后执行send方法发送数据
      console.log('websocket连接成功')
      this.weosocket = true
      this.sendPing()
    },
    websocketonerror() { //连接建立失败重连
      this.initWebSocket(this.websockSid.userId, this.websockSid.eventTypeDl, this.websockSid.eventType,)
    },
    websocketonmessage(e) { //数据接收
      console.log('接收数据', e.data)
      let data = "{\"fromId\":\"forest\"}";
      if (this.calendarDay == this.getCurrentDataStr() && data != e.data) {
        // 处理收到的消息
        this.handleWebSoceketEvent(e.data)


        this.getTodayEvents(this.getCurrentDataStr(), true);
        this.getDeptEventCount(this.getCurrentDataStr(), true);
        this.getEventByEventType(this.getCurrentDataStr(), true);
        this.getEventByReportorOrder(this.getCurrentDataStr(), true);
        this.getExposureStage(this.getCurrentDataStr(), true);

        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)
    },
    websocketclose(e) { //关闭
      console.log('断开连接', e)
      // clearInterval(this.setIntervalWesocketPush)
      this.weosocket = false
    },
    /**发送心跳
     * @param {number} time 心跳间隔毫秒 默认5000
     * @param {string} ping 心跳名称 默认字符串ping
     */
    sendPing(time = 60000, ping = {
      'fromId': 'forest'
    }) {
      clearInterval(this.setIntervalWesocketPush)
      this.setIntervalWesocketPush = setInterval(() => {
        if (this.weosocket) {
          this.websock.send(JSON.stringify(ping))
        } else {
          // this.initWebSocket()
        }
      }, time)
    },
    stopAudio() {
      this.$refs.up.pause(); //停止播放音乐
      this.$refs.up.currentTime = 0;
    },
    /** ----------------------------------weosocket结束------------------------------------- */

      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      bottomMenuList() {
        this.$refs.bottomMenu.selectTaskList()//获取任务列表
        this.$refs.bottomMenu.selectMessageList()//获取消息列表
        this.$refs.bottomMenu.linBanTreeselect()//查询林班层级树结构
        this.$refs.bottomMenu.deptTreeselect()//查询林场部门树结构
      },
      showDialog(click) {
        console.log(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 == 'wrj') {
          this.$refs.wrj.showWrj();
          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)
      },
      //选择图层(传递数组)  带数据
      choseLayerSwitchingList_Data(urlList) {
        this.$refs.supermap.layerSwitchingList_Data(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>