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)" 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"></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 {
    getMenuEventType,
    getEventPush,
    getBaseInfo,
    getTodayEvents,
    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 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,
        supermap,
        chart,
        // supermapNotProcessed,
        // supermapProcessed,
        vheader,
        vBottomMenu,
        eventLocation,
        TVWall,
        dateChoose,
        eventdetailsdialog,
        firespread
    },
    created() {
        /** ----------------------------------底部按钮公用组件开始------------------------------------- */
        window.showDialog = this.showDialog
        window.choseLayerSwitching = this.choseLayerSwitching
        window.choseLayerSwitchingList = this.choseLayerSwitchingList
        /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    },
    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结束------------------------------------- */
        setInterval(() => {
            if (this.calendarDay == this.getCurrentDataStr()) {
                this.getTodayEvents(this.getCurrentDataStr(), true);
                this.getDeptEventCount(this.getCurrentDataStr(), true);
                // this.getEventList(this.getCurrentDataStr(), this.pageSize, this.pageNum, '', true);
                this.getEventByEventType(this.getCurrentDataStr(), true);
                this.getEventByReportorOrder(this.getCurrentDataStr(), true);
                this.getExposureStage(this.getCurrentDataStr(), true);
                // this.getSupermap(this.getCurrentDataStr(), true);
            }
        }, 30000)
        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,

            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: [], //摄像头列表
            eventTypeIdDl: [],
            eventTypeId: []
        }
    },
    /** ----------------------------------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) {
            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.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: 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, 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 = data
            //右侧获取事件列表
            that.markersList = []
            let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'marker',
                bindPopupHtml: '',
                click: '',
                parameter: '',
                keepBindPopup: false,
                isAggregation: false
            }
            if (event.eventStatusValue == 'forest_event_status_1' && event.urgeCount == 0) {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-xinshangbao'
            }
            if (event.eventStatusValue == 'forest_event_status_1' && event.urgeCount > 0) {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-cuiban'
            } else if (event.eventStatusValue == 'forest_event_status_2') {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-qianshou'
                markersMap.isAggregation = false
            } else if (event.eventStatusValue == 'forest_event_status_5') {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-banjie'
                markersMap.isAggregation = false
            } else if (event.eventStatusValue == 'forest_event_status_6') {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-guidang'
            } else if (event.eventStatusValue == 'forest_event_status_7') {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-queren'
            }
            markersMap.parameter = event.eventCode
            markersMap.lng = event.longitude
            markersMap.lat = event.latitude
            markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + event.longitude + ',' + event.latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件名称：' + event.eventName + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件时间：' + event.createTime + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>';
            if (event.pictureType == 'image' && event.picturePath != null && event.picturePath != '') {
                markersMap.bindPopupHtml += '<span>' +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    '<img src="' + event.picturePath + '" style="width: 150px;height: 100px"/>' +
                    '                </div>' +
                    '                </div>' +
                    '                </span>'
            }
            markersMap.bindPopupHtml += '</div>'
            that.markersList.push(markersMap)
            setTimeout(() => {
                that.$refs.supermap.setMarkers(that.markersList)
            }, 1000)
        },
        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
            const wsuri = 'ws://127.0.0.1:10003/eventPush/' + userId + '/' + eventTypeDl + '/' + eventType
            this.websock = new WebSocket(wsuri)
            console.log('建立websocket连接')
            this.websock.onopen = this.websocketonopen
            this.websock.onmessage = this.websocketonmessage
            this.websock.onerror = this.websocketonerror
        },
        // 处理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])
        },
        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\",\"fromUserId\":\""+Cookies.get('username')+"\",\"toUserId\":\""+Cookies.get('username')+"\"}";
            let data = "{\"fromId\":\"forest\",\"fromUserId\":\"admin\",\"toUserId\":\"admin\"}";
            if (this.calendarDay == this.getCurrentDataStr() && data != e.data) {
                // 处理收到的消息
                this.handleWebSoceketEvent(e.data)

                // this.getEventListNew();
                // this.getTodayEvents(this.getCurrentDataStr());
                // this.getDeptEventCount(this.getCurrentDataStr());
                // this.getEventByEventType(this.getCurrentDataStr());
                // this.getEventByReportorOrder(this.getCurrentDataStr());

                // this.$refs.bottomMenu.updateAlert();
                // this.$refs.up.play();
                // thes.$refs.up.pause();//停止播放音乐
            }
        },
        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',
            'fromUserId': Cookies.get('username'),
            'toUserId': Cookies.get('username')
        }) {
            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()//获取消息列表
        },
        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>