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="noticeContent">{{ noticeContent }}</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 no_hover">
                <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;">
              <div class="d-l-con-icon">
<!--                <div class="top-left">-->
<!--                  <button class="add-button" @click="getResource">搜索全部</button>-->
<!--                </div>-->
                <div class="icon-con" :class="{on:iconCurrentIndex==item.type}"
                  v-for="(item,index) in resourcesList" v-on:click="fireControlViewPoint(item.type, '')">
                  <!--v-on:click="indentleftSetMarkers(item.resourceTable)">-->
                  <div class="iconfont icon icon-normal" :class="item.icon"></div>
                  <div class="icon-text">
                    <h6>{{ item.num }}</h6>
                    <!--<h6>{{ item.count }}</h6>-->
                    <h5>{{ item.name }}</h5>
                    <!--<h5>{{ item.resourceName }}</h5>-->
                  </div>
                </div>
              </div>
              <!--              <el-collapse accordion>
                <el-collapse-item v-for="(item, index) in forestFarm" :key="index">
                  <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>-->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" @showEventDialog="showEventDialog" :showLayer="true" @fatherMethod="fatherMethod" @sewageOutletClick="sewageOutletClick"></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="sj-search">
                  <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="eventSearch"
                    @change="getEventList(calendarDay, 10, 1, eventSearch)">
                  </el-input>
                </div>
              <div class="i-list-con small-bottom-margin" style="height: 24vh;">
                <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-if="item.eventType == '510'"
                         src="../assets/images/水压.png"
                         style="width: 93px;height: 64px"/>
                    <!-- <img v-else-if="item.eventType == '510'"-->
                    <!-- src="../assets/images/水尺.png"-->
                    <!-- style="width: 93px;height: 64px"/>-->
                    <img v-else-if="item.eventType == '511'"
                         src="../assets/images/水流速.png"
                         style="width: 93px;height: 64px"/>
                    <img v-else-if="item.eventType == '403'"
                         src="../assets/images/土壤墒情监测.png"
                         style="width: 93px;height: 64px"/>
                    <img v-else-if="item.eventType == '601'"
                         src="../assets/images/大气监测.png"
                         style="width: 93px;height: 64px"/>
                    <img v-else-if="item.eventType == '602'"
                         src="../assets/images/水质监测.png"
                         style="width: 93px;height: 64px"/>
                    <img v-else src="../assets/images/integrated/event-img-sub.png" style="width: 93px;height: 64px" />
                  </div>
                  <div class="bgt-info">
                    <div v-if="item.eventStatusValue == 'forest_event_status_1' && item.urgeCount == 0"
                      class="event-state-sb">
                      <i class="el-icon-caret-left"></i>
                      <div class="event-list-state-sb">
                        新上报
                      </div>
                    </div>
                    <div v-if="item.eventStatusValue == 'forest_event_status_1' && item.urgeCount > 0"
                      class="event-state-cb">
                      <i class="el-icon-caret-left"></i>
                      <div class="event-list-state-cb">
                        催办
                      </div>
                    </div>
                    <div v-if="item.eventStatusValue == 'forest_event_status_2'" class="event-state-qs">
                      <i class="el-icon-caret-left"></i>
                      <div class="event-list-state-qs">
                        签收
                      </div>
                    </div>
                    <div v-if="item.eventStatusValue == 'forest_event_status_3'" class="event-state-wb">
                      <i class="el-icon-caret-left"></i>
                      <div class="event-list-state-wb">
                        误报
                      </div>
                    </div>
                    <div v-if="item.eventStatusValue == 'forest_event_status_4'" class="event-state-cf">
                      <i class="el-icon-caret-left"></i>
                      <div class="event-list-state-cf">
                        重复
                      </div>
                    </div>
                    <div v-if="item.eventStatusValue == 'forest_event_status_5'" class="event-state-bj">
                      <i class="el-icon-caret-left"></i>
                      <div class="event-list-state-bj">
                        办结
                      </div>
                    </div>
                    <div v-if="item.eventStatusValue == 'forest_event_status_6'" class="event-state-gd">
                      <i class="el-icon-caret-left"></i>
                      <div class="event-list-state-gd">
                        归档
                      </div>
                    </div>
                    <div 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,eventSearch)">上一页
                </el-button>
                <span>第{{pageNum}}页</span>
                <el-button type="button" :disabled="nextbutton" @click="getEventList(calendarDay,10,pageNum+1,eventSearch)">下一页
                </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>
    <TVWalls ref="TVWalls"></TVWalls>
  </div>
</template>

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

  import {
    getMenuEventType,
    getEventPush,
    getBaseInfo,
    getTodayEvents,
    getLatestNotice,
    getDeptEventCount,
    getWeather,
    getEventList,
    getEventByEventType,
    getEventByReportorOrder,
    getExposureStage
  } from '@/api/forest'
  import {
    getNearEvent
  } from '@/api/event'
  import supermap from '@/components/supermap-2.5d' //超图
  // 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 TVWalls from '@/components/TVWalls.vue' //电视墙弹窗
  import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
  import firespread from '@/views/firespread.vue' //事件详情弹窗
  import chart from "./from/dvCapsuleChart.vue";
  import {
    getResource,
    fireControlViewList,
    fireControlViewPoint,
    getResourcePoint
  } from '@/api/datacenter'

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

  /** ----------------------------------摄像头预览结束------------------------------------- */
  import { getIconBg } from "@/api/components/sookaMapIcon";

  import {
    selectConfigKey
  } from "@/api/system/config";
  import {getUserProfile} from "@/api/system/user";

  let echarts = require('echarts')
  export default {
    components: {
      Firespread,
      supermap,
      chart,
      // supermapNotProcessed,
      // supermapProcessed,
      vheader,
      vBottomMenu,
      eventLocation,
      TVWall,
      TVWalls,
      dateChoose,
      eventdetailsdialog,
      firespread
    },
    metaInfo () {
      return {
        title:this.title,
        meta:[{
          charset: "utf-8"
        },
          {
            name: "viewport",
            content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          }]
      }
    },
    created() {
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      window.showDialog = this.showDialog
      window.choseLayerSwitching = this.choseLayerSwitching
      window.choseLayerSwitchingList = this.choseLayerSwitchingList
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    },

    mounted() {
      // 初始化地图数据
      this.getSuperMapUrl();

      setTimeout(() => {
        this.getLatestNotice()
        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()
        this.getResource()
      }, 2000)

      /** ----------------------------------weosocket开始------------------------------------- */
      // this.initWebSocket()
      /** ----------------------------------weosocket结束------------------------------------- */
      this.bottomMenuList() //获取底部公共组件消息和任务
      setTimeout(() => {
        this.title = '四平市态势感知平台'
      }, 1000)
    },
    data() {
      return {
        noticeContent: '', //通知公告
        nextbutton:false,
        title:"",
        //左侧资源
        resourcesList: [],
        iconCurrentIndex:"",
        source: [],
        //警报MP3文件
        audioSrc: require('@/assets/jingbao.mp3'),

        calendarDay: this.getCurrentDataStr(),
        //基本情况
        forestInfo: '', //基本情况
        //左侧获取事件信息统计
        totalStr: '000000',
        totalAllEvent: 0,
        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: {
      //初始化地图数据
      getSuperMapUrl(){
        getUserProfile().then(response => {
          let mapDeptId=response.mapDeptId
          let num = 0;
          if (mapDeptId == "365") {
            num = 0;
          } else if (mapDeptId == "369") {
            num = 1;
          } else if (mapDeptId == "371") {
            num = 2;
          } else if (mapDeptId == "373") {
            num = 3;
          } else if (mapDeptId == "372") {
            num = 4;
          } else if (mapDeptId == "370") {
            num = 5;
          }
          this.$refs.supermap.removeAllviewer(num, -1);
        });
      },
      getResource() {
        let that = this;
        that.resourcesList=[]
        fireControlViewList("ziyuan").then(function (res) {
          for (let i = 0; i < res.data.length; i++) {
            if(res.data[i].type !='centerdata_t_forest_fireteam'){
              that.resourcesList.push(res.data[i]);
            }
          }
          //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
          that.resourcesList.forEach(function (data, index) {
            let icon =
              "sj" +
              "-" +
              "icon" +
              "-" +
              data.type.replaceAll("_", "-").replaceAll("@", "-");
            console.log("icon_" + (index + 1) + "=", icon);
            that.$set(that.resourcesList[index], "icon", icon);
            //每个图标对应固定颜色
            that.$set(that.resourcesList[index], "bg", getIconBg(icon));
          });
          that.fireControlViewPoint("ziyuan", "");
        });
      },
      fireControlViewPoint(resourceTable, name, search) {
        if(resourceTable == this.resourceTable && search != "search"){
          resourceTable = "ziyuan"
        }
        this.iconCurrentIndex = resourceTable;
        // 搜索框
        if (name == "" || name == null || name == undefined) {
          name = "";
        } else {
          this.showSearch = true;
        }
        console.log("name=", name);
        console.log("this.showSearch=", this.showSearch);

        let that = this;
        that.resourceTable = resourceTable;
        that.markersList = [];
        that.source = [];
        fireControlViewPoint(resourceTable, name,"").then((res) => {
          let pointList = res.data.pointList;
          that.deptGroupList = res.data.deptList;
          if (res.data.deptList != null && res.data.deptList.length > 0) {
            for (let i = 0; i < res.data.deptList.length; i++) {
              let aa = [
                res.data.deptList[i].deptName,
                res.data.deptList[i].count,
              ];
              that.source.push(aa);
            }
          }

          if (res.data.pointList != null && res.data.pointList.length > 0) {
            for (let i = 0; i < res.data.pointList.length; i++) {
              if(res.data.pointList[i].indexName != 'centerdata_t_forest_fireteam'){
                let markersMap = {
                  lng: res.data.pointList[i].longitude,
                  lat: res.data.pointList[i].latitude,
                  icon: "marker",
                  bindPopupHtml: "",
                  click: "",
                  name: i,
                  keepBindPopup: false,
                  isAggregation: false,
                };
                that.markersList.push(
                  this.getMarkersMap(
                    resourceTable == "ziyuan" ? res.data.pointList[i].indexName:resourceTable,
                    markersMap,
                    res.data.pointList[i]
                  )
                );
              }
            }
          }
          if (this.showSearch == true) {
            this.dataChat();
          }
          that.$refs.supermap.clearM(false);
          that.$refs.supermap.setMarkers(that.markersList);
        });
      },
      fireControlViewPointNew(resourceTable, name, search) {
        if(resourceTable == this.resourceTable && search != "search"){
          resourceTable = "ziyuan"
        }
        // this.iconCurrentIndex = resourceTable;
        // 搜索框
        if (name == "" || name == null || name == undefined) {
          name = "";
        } else {
          this.showSearch = true;
        }
        console.log("name=", name);
        console.log("this.showSearch=", this.showSearch);

        let that = this;
        that.resourceTable = resourceTable;
        that.markersList = [];
        that.source = [];
        fireControlViewPoint(resourceTable, name,"").then((res) => {
          let pointList = res.data.pointList;
          that.deptGroupList = res.data.deptList;
          if (res.data.deptList != null && res.data.deptList.length > 0) {
            for (let i = 0; i < res.data.deptList.length; i++) {
              let aa = [
                res.data.deptList[i].deptName,
                res.data.deptList[i].count,
              ];
              that.source.push(aa);
            }
          }

          if (res.data.pointList != null && res.data.pointList.length > 0) {
            for (let i = 0; i < res.data.pointList.length; i++) {
              if(res.data.pointList[i].indexName != 'centerdata_t_forest_fireteam'){
                let markersMap = {
                  lng: res.data.pointList[i].longitude,
                  lat: res.data.pointList[i].latitude,
                  icon: "marker",
                  bindPopupHtml: "",
                  click: "",
                  name: i,
                  keepBindPopup: false,
                  isAggregation: false,
                };
                that.markersList.push(
                  this.getMarkersMap(
                    resourceTable == "ziyuan" ? res.data.pointList[i].indexName:resourceTable,
                    markersMap,
                    res.data.pointList[i]
                  )
                );
              }
            }
          }
          if (this.showSearch == true) {
            this.dataChat();
          }
          that.$refs.supermap.clearM(false);
          that.$refs.supermap.setMarkers(that.markersList);
        });
      },
      indentleftSetMarkers(resourceTable, name) {
        let that = this
        // 搜索框
        if (name == '所有') {
          name = undefined;
        } else {
          that.$refs.supermap.clearM()
        this.iconCurrentIndex = resourceTable
        }
        // 搜索类型
        // this.searchType = resourceTable;
        // that.resourceTable = resourceTable
        that.markersList = []
        that.source = []
        //点击左侧地图落点
        getResourcePoint(resourceTable, name).then(res => {
          that.deptGroupList = res.data.deptGroupList
          if (res.data.deptGroupList != null && res.data.deptGroupList.length > 0) {
            for (let i = 0; i < res.data.deptGroupList.length; i++) {
              let aa = [res.data.deptGroupList[i].deptName, res.data.deptGroupList[i].count]
              that.source.push(aa)
            }
          }
          if (res.data.resourceList != null && res.data.resourceList.length > 0) {
            for (let i = 0; i < res.data.resourceList.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'marker',
                bindPopupHtml: '',
                click: '',
                keepBindPopup: false,
                isAggregation: false
              }
              that.markersList.push(this.getMarkersMap(resourceTable, markersMap, res.data.resourceList[i]));
              // that.markersList.push(markersMap)
            }
          }
          if (this.showSearch == true) {
            this.dataChat();
          }
          that.$refs.supermap.setMarkers(that.markersList)
        })
      },

      getMarkersMap(resourceTable, markersMap, item) {
        markersMap.click = "sewageOutletClick";
        markersMap.parameter = item;
        if (resourceTable == 'centerdata_t_resources_illegal_construction') { //违建信息
          markersMap.icon = 'sj-icon-map-centerdata-t-resources-illegal-constructionon'
          markersMap.lng = (item.longitude ? item.longitude : "")
          markersMap.lat = (item.latitude ? item.latitude : "")
          markersMap.bindPopupHtml = '<div class="map-tip">' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>经纬度：' + (item.longitude ? item.longitude : "") + ',' + (item.latitude ? item
              .latitude : "") + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>名称：' + (item.name ? item.name : "") +
            '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>违建处理负责人：' + (item.person ? item.person : "") +
            '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>联系方式：' + (item.phone ? item.phone : "") +
            '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span></div>'
        }
        else if (resourceTable == 'centerdata_t_resources_deposit') { //矿产资源
          markersMap.icon = 'sj-icon-map-centerdata-t-resources-deposit'
          markersMap.lng = (item.longitude ? item.longitude : "")
          markersMap.lat = (item.latitude ? item.latitude : "")
          markersMap.bindPopupHtml = '<div class="map-tip">' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>经纬度：' + (item.longitude ? item.longitude : "") + ',' + (item.latitude ? item
              .latitude : "") + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>名称：' + (item.name ? item.name : "") + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>联系人：' + (item.person ? item.person : "") + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>电话：' + (item.phone ? item.phone : "") + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span></div>'
        }
        else if (resourceTable == 'centerdata_t_resources_forest') { //森林资源管理信息
          markersMap.icon = 'sj-icon-map-centerdata-t-forest-landing'
          markersMap.lng = (item.longitude ? item.longitude : "")
          markersMap.lat = (item.latitude ? item.latitude : "")
          markersMap.bindPopupHtml = '<div class="map-tip">' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>经纬度：' + (item.longitude ? item.longitude : "") + ',' + (item.latitude ? item
              .latitude : "") + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>名称：' + (item.name ? item.name : "") +
            '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>占地范围：' + (item.zdfw ? item.zdfw : "") +
            '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>占地面积(万公顷)：' + (item.landArea ? item.landArea : "") + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span></div>'
        }
        else if (resourceTable == 'centerdata_t_resources_geologic_hazard') { //地质灾害易发区
          markersMap.icon = 'sj-icon-map-centerdata-t-resources-geologic-hazard'
          markersMap.lng = (item.longitude ? item.longitude : "")
          markersMap.lat = (item.latitude ? item.latitude : "")
          markersMap.bindPopupHtml = '<div class="map-tip">' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>经纬度：' + (item.longitude ? item.longitude : "") + ',' + (item.latitude ? item
              .latitude : "") + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>名称：' + (item.name ? item.name : "") +
            '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>联系人：' + (item.person ? item.person : "") +
            '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>电话：' + (item.phone ? item.phone : "") + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span></div>'
        }
        else if (resourceTable == 'centerdata_t_resources_hydroenergy') { //水能资源
          markersMap.icon = 'sj-icon-map-centerdata-t-forest-checkpoint'
          markersMap.lng = (item.longitude ? item.longitude : "")
          markersMap.lat = (item.latitude ? item.latitude : "")
          markersMap.bindPopupHtml = '<div class="map-tip">' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>经纬度：' + (item.longitude ? item.longitude : "") + ',' + (item.latitude ? item
              .latitude : "") + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>名称：' + (item.name ? item.name : "") +
            '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>联系人：' + (item.person ? item.person : "") +
            '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>位置：' + (item.address ? item.address : "") +
            '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>电话：' + (item.phone ? item.phone : "") +
            '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span></div>'
        }
        else if (resourceTable == 'centerdata_t_resources_land') { //土地资源管理信息
          markersMap.icon = 'sj-icon-map-centerdata-t-forest-waterintake'
          markersMap.lng = (item.longitude ? item.longitude : "")
          markersMap.lat = (item.latitude ? item.latitude : "")
          markersMap.bindPopupHtml = '<div class="map-tip">' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>经纬度：' + (item.longitude ? item.longitude : "") + ',' + (item.latitude ? item
              .latitude : "") + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>名称：' + (item.name ? item.name : "") +
            '</h4>'
          '                </div>' +
          '                </div>' +
          '                </span>' +
          '<span>' +
          '                  <div class="d-l-con">' +
          '                  <div class="d-l-l-text">' +
          '                  <h4>占地面积(万公顷)：' + (item.landArea ? item.landArea : "") +
          '</h4>' +
          '                </div>' +
          '                </div>' +
          '                </span></div>'
        }
        return markersMap;
      },
      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)
      },
      getLatestNotice() {
        //左侧获取通知公告
        getLatestNotice().then(res => {
          if (res.code == 200) {
            this.noticeContent = res.data.noticeContent //通知公告
          }
        })
      },
      getFirespread(eventCode) {
        this.$refs.firespread.showEventDialog(eventCode);
        this.$refs.firespread.fireControlViewList()
      },
      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.pageNum = 1
        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
                }
              }
            }
          }]
        })
      },
      fatherMethod(dianshiqiang, longitude, latitude, item) {
        this.$refs.TVWalls.showTVWall(
          dianshiqiang, {
            longitude: longitude,
            latitude: latitude,
          },
          item
        );
      },
      sewageOutletClick(data) {
        const params = Object.assign({});
        params.longitude = data.longitude;
        params.latitude = data.latitude;
        const treeLabels = [
          {
            id: null,
            labelCode: "999",
            labelName: "电视墙",
            cameraType: null,
            parentLabelCode: "",
          },
        ];
        const labelChannels = [];
        for (let i in data.cameraList) {
          treeLabels.push({
            id: null,
            labelCode: data.cameraList[i].cameraCode,
            labelName: data.cameraList[i].cameraName,
            cameraType:data.cameraList[i].cameraType,
            parentLabelCode: "999",
          });
          labelChannels.push({
            labelCode: data.cameraList[i].cameraCode,
            channelDates: [
              {
                channelCode: data.cameraList[i].cameraCode,
                channelName: data.cameraList[i].cameraName,
                channelSn: null,
                cameraType:data.cameraList[i].cameraType,
                online: "1",
                cameraCode: "1",
              },
            ],
          });
        }
        const dianshiqiang = [
          {
            switchTab: "2",
            treeLabels: treeLabels,
            labelChannels: labelChannels,
          },
        ];
        if (data.cameraList.length > 0) {
          this.$refs.TVWall.showTVWall1(
            data.longitude,
            data.latitude,
            dianshiqiang
          );
        }
      },

      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.totalAllEvent = +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()
              that.$refs.supermap.setMarkers(that.markersList)
            }, 2000)
          } else {
            setTimeout(() => {
              that.$refs.supermap.clearM();
              that.iconCurrentIndex=''
              //数据自动落点开始
              let maxCount = 100; //落点数超过这个数的资源不落点
              let types = [];
              for (let i = 0; i < that.resourcesList.length; i++) { //获取符合要求的类型及数量
                if (that.resourcesList[i].num <= maxCount) {
                  types.push(that.resourcesList[i].type);
                }
              }
              for (let i = 0; i < types.length; i++) {
                that.fireControlViewPointNew(types[i], '','search');
              }
              //数据自动落点结束
            }, 2000)
          }
        })
      },
      getEventList(day, pageSize, pageNum, eventSearch, loading) {
        let num=this.eventList.length/pageSize+1
        if (pageNum < 1) {
          this.$modal.msg('当前已是第一页')
          return
        } else if(pageNum>this.totalAllEvent/10+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(res.data!==null&&res.data.length!==0&&res.data.length==10)
          {
            this.nextbutton=false
          }else
          {
            this.nextbutton=true
          }
          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);
        let event = data
        if (typeof data != 'object') {
          event = JSON.parse(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.clearM()
          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
        })
      },
      // 处理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) {
              if(res.data.eventType == 403){
                res.data.picturePath = "../assets/images/土壤墒情监测.png"
              }
              //插入到第一条
              this.eventList.unshift(res.data)
              // 插入后删除最后一条 保证列表中为10条数据
              if (this.eventList.length > 9)
                this.eventList.splice(10, 1)
              // 将收到的数据在地图上添加
              this.getWebSocketEvent(res.data)
              this.$refs.bottomMenu.updateAlert();
              this.$refs.up.play();
            }
          })
        }
        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\":\"resources\"}";
        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();//停止播放音乐
        }
      },
      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': 'resources'
      }) {
        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.bottomMenu.showMeasure = 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.bottomMenu.showMeasure) {
            this.$refs.bottomMenu.showMeasure = true
          } else {
            this.$refs.bottomMenu.showMeasure = false
          }
        } else if (click == 'layerSwitching') {
          this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure = false
          this.$refs.bottomMenu.showChild = false
          this.$refs.bottomMenu.showBanChild = false
          this.$refs.bottomMenu.showChangChild = false
        } else if (click == 'forestban') {
          this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure = 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>

<style lang="scss">
    @import '@/assets/styles/base.scss';
    .top-left {
      position: absolute;
      top: 15px; /* 设置距离顶部的位置 */
      left: 75%; /* 设置距离左侧的位置 */
    }

    .add-button {
      background-color: #04244d; /* 设置背景颜色 */
      color: #1d66ec; /* 设置文字颜色 */
      padding: 5px 10px; /* 设置内边距 */
      border: none; /* 移除边框 */
      cursor: pointer; /* 添加鼠标指针样式 */
    }
    .bottomRight{
        .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
            background-color: $searchBG;

        }
        .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
            border-bottom: 1px $tableBorder;
        }
        .el-table--border, .el-table--border::after {
            border: 1px $tableBorder;
            background-color: $searchBG
        }

        .el-table--border {
            .el-table--group {
                border: 1px $tableBorder;
            }

            .el-table__cell {
                border-right: 1px $tableBorder;;
            }

        }

        .el-table::before {
            background: $searchBG;
        }

        .el-table {
            background: $searchBG;
            color: $inBlue;

            thead {
            }

            tr {
                background: $searchBG;
            }

            td {
                text-align: center;
            }

            .el-table__header-wrapper {
                th {
                    color: $inBlue;
                    font-size: .8rem;
                }
            }

            thead.is-group {
                .el-table__cell {
                    text-align: center;
                    background: $searchBG;
                    border-bottom: 1px $tableBorder;
                    border-right: 1px $tableBorder;
                    padding: 0;
                    font-weight: normal;
                }
            }
        }

        .el-table__empty-block {
            min-height: auto;
        }

        .el-table__empty-text {
            line-height: 30px;
        }

        .el-table__header {
            width: auto !important
        }

        .el-table__empty-block {
            width: auto !important
        }

        .el-table__body-wrapper {
            .el-table__body {
                width: auto !important
            }
        }

        .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
            background-color: #0f3655;
        }
    }

</style>