Project_yhfu/src/views/disaster.vue

<!--灾后评估-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar" :class="indentleft" ref="left">
        <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="margin: 1rem 0; padding-right:1rem">
              <el-date-picker v-model="pickYear" @change="getInit()" type="year" placeholder="选择年">
              </el-date-picker>
            </div>
            <div class="i-list-con h-73">
              <div class="d-l-con-icon">
                <div class="icon-con  m-btm-no">
                  <div class="icon icon-dot"></div>
                  <div class="icon-text flex-r">
                    <h5>{{ numberFiresYear }}次</h5>
                    <h5>火灾次数</h5>
                  </div>
                </div>
                <div class="icon-con m-btm-no">
                  <div class="icon icon-dot"></div>
                  <div class="icon-text flex-r">
                    <h5>{{ forestFireLossTotal }}万元</h5>
                    <h5>损失总计</h5>
                  </div>
                </div>
              </div>
              <div class="d-l-con flex-c">
                <div class="d-l-l-text">
                  <h2>火灾损失价值</h2>
                </div>
                <div class="d-l-l-text ">
                  <h3>合计：{{ fireLossTotalYear }}万元</h3>
                </div>
                <el-table :data="forestResourcesYear">
                  <el-table-column label="林木资源">
                    <el-table-column label="成林" width="50%">
                      <el-table-column label="蓄积">
                        <el-table-column prop="forestArea" label="米">
                        </el-table-column>
                      </el-table-column>
                      <el-table-column prop="worth" label="价值" width="50%">
                        <el-table-column prop="forestPrice" label="万元">
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column prop="youngTree" label="幼树">
                      <el-table-column prop="number" label="株数">
                        <el-table-column prop="treesNumber" label="万株">
                        </el-table-column>
                      </el-table-column>
                      <el-table-column prop="worth" label="价值">
                        <el-table-column prop="treesPrice" label="万元">
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                  </el-table-column>
                </el-table>
                <el-table style="margin-top: 1rem;" :data="casualtiesYear">
                  <el-table-column prop="date" label="人员伤亡">
                    <el-table-column label="轻伤" width="50%">
                      <el-table-column label="人数">
                        <el-table-column prop="minorInjuriesNumber" label="人">
                        </el-table-column>
                      </el-table-column>
                      <el-table-column label="费用" width="50%">
                        <el-table-column prop="minorInjuriesPrice" label="万元">
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column label="重伤">
                      <el-table-column label="人数">
                        <el-table-column prop="seriouslyInjuredNumber" label="人">
                        </el-table-column>
                      </el-table-column>
                      <el-table-column label="费用">
                        <el-table-column prop="seriouslyInjuredPrice" label="万元">
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column label="死亡">
                      <el-table-column label="人数">
                        <el-table-column prop="deathNumber" label="人">
                        </el-table-column>
                      </el-table-column>
                      <el-table-column label="费用">
                        <el-table-column prop="deathPrice" label="万元">
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                  </el-table-column>
                </el-table>
                <el-table style="margin-top: 1rem;" :data="elseFireLossPriceYear">
                  <el-table-column label="其他火灾损失">
                    <el-table-column prop="elseFireLossPrice" label="万元">
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </div>
              <div class="d-l-con flex-c">
                <div class="d-l-l-text">
                  <h2>扑火费用支出</h2>
                </div>
                <div class="d-l-l-text ">
                  <h3>合计：{{ blazesPriceTotalYear }}万元</h3>
                </div>
                <el-table style="margin-top: 1rem;" :data="fireFightingCasualtiesYear">
                  <el-table-column prop="date" label="人员伤亡">
                    <el-table-column label="人工费" width="50%">
                      <el-table-column label="人工">
                        <el-table-column prop="artificialDays" label="工日">
                        </el-table-column>
                      </el-table-column>
                      <el-table-column label="费用" width="50%">
                        <el-table-column prop="artificialPrice" label="万元">
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column prop="vehicleFee" label="车辆费">
                      <el-table-column label="合计">
                        <el-table-column prop="vehicleNumber" label="台">
                        </el-table-column>
                      </el-table-column>
                      <el-table-column label="汽车">
                        <el-table-column prop="carNumber" label="台">
                        </el-table-column>
                      </el-table-column>
                      <el-table-column label="费用">
                        <el-table-column prop="vehiclePrice" label="万元">
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column prop="flightFee" label="飞行费">
                      <el-table-column label="飞机">
                        <el-table-column prop="planeNumber" label="架次">
                        </el-table-column>
                      </el-table-column>
                      <el-table-column label="费用">
                        <el-table-column prop="planePrice" label="万元">
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                  </el-table-column>
                </el-table>
                <el-table style="margin-top: 1rem;" :data="otherFireCostsYear">
                  <el-table-column label="其他火灾费用">
                    <el-table-column prop="elseBlazesPrice" label="万元">
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </div>

            </div>
          </dv-border-box-13>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'disasterMap'" class="indexSupermapClass"
                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @showEventDialog="showEventDialog"></supermap>
      <!-- 右侧 -->
      <div class="rightbar" :class="indentright" ref="right">
        <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-19">
              <div class="d-l-con" :class="{on:listCurrentIndex==index}" v-for="(item,index) in fireList"
                   :key="index" @click="choseFireList(item.id,item.eventId,index)">
                <div class="d-l-l-text">
                  <i class="i-small"></i>
                  <h4>{{ pickYear.getYear() + 1900 }}年第{{ index + 1 }}场火灾</h4>
                </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="i-list-con h-55">
              <div class="forthis">
                <div class="d-l-con flex-c">
                  <div class="d-l-l-text">
                    <h2>火灾损失价值</h2>
                  </div>
                  <div class="d-l-l-text ">
                    <h3>合计：{{ fireLossTotal }}万元</h3>
                  </div>
                  <el-table :data="forestResources">
                    <el-table-column label="林木资源">
                      <el-table-column label="成林" width="50%">
                        <el-table-column label="蓄积">
                          <el-table-column prop="forestArea" label="米">
                          </el-table-column>
                        </el-table-column>
                        <el-table-column prop="worth" label="价值" width="50%">
                          <el-table-column prop="forestPrice" label="万元">
                          </el-table-column>
                        </el-table-column>
                      </el-table-column>
                      <el-table-column label="幼树">
                        <el-table-column label="株数">
                          <el-table-column prop="treesNumber" label="万株">
                          </el-table-column>
                        </el-table-column>
                        <el-table-column prop="worth" label="价值">
                          <el-table-column prop="treesPrice" label="万元">
                          </el-table-column>
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                  <el-table style="margin-top: 1rem;" :data="casualties">
                    <el-table-column label="人员伤亡">
                      <el-table-column label="轻伤" width="50%">
                        <el-table-column label="人数">
                          <el-table-column prop="minorInjuriesNumber" label="人">
                          </el-table-column>
                        </el-table-column>
                        <el-table-column label="费用" width="50%">
                          <el-table-column prop="minorInjuriesPrice" label="万元">
                          </el-table-column>
                        </el-table-column>
                      </el-table-column>
                      <el-table-column label="重伤">
                        <el-table-column label="人数">
                          <el-table-column prop="seriouslyInjuredNumber" label="人">
                          </el-table-column>
                        </el-table-column>
                        <el-table-column label="费用">
                          <el-table-column prop="seriouslyInjuredPrice" label="万元">
                          </el-table-column>
                        </el-table-column>
                      </el-table-column>
                      <el-table-column label="死亡">
                        <el-table-column label="人数">
                          <el-table-column prop="deathNumber" label="人">
                          </el-table-column>
                        </el-table-column>
                        <el-table-column label="费用">
                          <el-table-column prop="deathPrice" label="万元">
                          </el-table-column>
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                  <el-table style="margin-top: 1rem;" :data="elseFireLossPrice">
                    <el-table-column label="其他火灾损失">
                      <el-table-column prop="elseFireLossPrice" label="万元">
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="d-l-con flex-c">
                  <div class="d-l-l-text">
                    <h2>扑火费用支出</h2>
                  </div>
                  <div class="d-l-l-text ">
                    <h3>合计：{{ blazesPriceTotal }}万元</h3>
                  </div>
                  <el-table style="margin-top: 1rem;" :data="fireFightingCasualties">
                    <el-table-column label="人员伤亡">
                      <el-table-column prop="artificial" label="人工费" width="50%">
                        <el-table-column label="人工">
                          <el-table-column prop="artificialDays" label="工日">
                          </el-table-column>
                        </el-table-column>
                        <el-table-column label="费用" width="50%">
                          <el-table-column prop="artificialPrice" label="万元">
                          </el-table-column>
                        </el-table-column>
                      </el-table-column>
                      <el-table-column label="车辆费">
                        <el-table-column label="合计">
                          <el-table-column prop="vehicleNumber" label="台">
                          </el-table-column>
                        </el-table-column>
                        <el-table-column label="汽车">
                          <el-table-column prop="carNumber" label="台">
                          </el-table-column>
                        </el-table-column>
                        <el-table-column label="费用">
                          <el-table-column prop="vehiclePrice" label="万元">
                          </el-table-column>
                        </el-table-column>
                      </el-table-column>
                      <el-table-column prop="flightFee" label="飞行费">
                        <el-table-column label="飞机">
                          <el-table-column prop="planeNumber" label="架次">
                          </el-table-column>
                        </el-table-column>
                        <el-table-column label="费用">
                          <el-table-column prop="planePrice" label="万元">
                          </el-table-column>
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                  <el-table style="margin-top: 1rem;" :data="otherFireCosts">
                    <el-table-column label="其他火灾费用">
                      <el-table-column prop="elseBlazesPrice" label="万元">
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <vBottomMenu ref="bottomMenu"></vBottomMenu>
<!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
<!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
<!--          src="@/assets/images/mascot.png"/></div>-->
<!--      </el-tooltip>-->
    </div>
    <eventLocation ref="eventLocation"></eventLocation>
    <TVWall ref="TVWall"></TVWall>
  </div>
</template>

<script>
import {
  getInit,
  selectFireLoseByid
} from '@/api/disaster'

import supermap 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 echarts from 'echarts'
let echarts = require('echarts')
export default {
  dicts: ['event_source'],
  components: {
    supermap,
    vheader,
    vBottomMenu,
    eventLocation,
    TVWall
  },
  created() {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog
    window.choseLayerSwitching = this.choseLayerSwitching
    window.choseLayerSwitchingList = this.choseLayerSwitchingList
    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  },
  mounted() {
    this.getInit()
    this.bottomMenuList() //获取底部公共组件消息和任务
  },
  data() {
    return {
      listCurrentIndex: 0,
      numberFiresYear: 0,
      forestFireLossTotal: 0,
      fireLossTotalYear: 0,
      forestResourcesYear: [{
        forestArea: '0',
        forestPrice: '0',
        treesNumber: '0',
        treesPrice: '0'
      }],
      casualtiesYear: [{
        minorInjuriesNumber: '0',
        minorInjuriesPrice: '0',
        seriouslyInjuredNumber: '0',
        seriouslyInjuredPrice: '0',
        deathNumber: '0',
        deathPrice: '0'
      }],
      elseFireLossPriceYear: [{
        elseFireLossPrice: '0'
      }],
      blazesPriceTotalYear: 0,
      fireFightingCasualtiesYear: [{
        artificialDays: '0',
        artificialPrice: '0',
        vehicleNumber: '0',
        carNumber: '0',
        vehiclePrice: '0',
        planeNumber: '0',
        planePrice: '0'
      }],
      otherFireCostsYear: [{
        elseBlazesPrice: '0'
      }],

      fireLossTotal: 0,
      forestResources: [{
        forestArea: '0',
        forestPrice: '0',
        treesNumber: '0',
        treesPrice: '0'
      }],
      casualties: [{
        minorInjuriesNumber: '0',
        minorInjuriesPrice: '0',
        seriouslyInjuredNumber: '0',
        seriouslyInjuredPrice: '0',
        deathNumber: '0',
        deathPrice: '0'
      }],
      elseFireLossPrice: [{
        elseFireLossPrice: '0'
      }],
      blazesPriceTotal: 0,
      fireFightingCasualties: [{
        artificialDays: '0',
        artificialPrice: '0',
        vehicleNumber: '0',
        carNumber: '0',
        vehiclePrice: '0',
        planeNumber: '0',
        planePrice: '0'
      }],
      otherFireCosts: [{
        elseBlazesPrice: '0'
      }],

      pickYear: new Date(), //选择年份
      graphicsList: [], //地图区域
      fireList: [], //右侧活在列表
      eventChartData: [], //左侧eachar图表数据

      //左右缩进
      indentStyle: '',
      indentleft: '',
      indentright: '',
      indentText: '收起左右栏',
      indentdisabled: false,

      markersList: [], //点位列表
    }
  },

  methods: {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    bottomMenuList() {
      this.$refs.bottomMenu.selectTaskList()//获取任务列表
      this.$refs.bottomMenu.selectMessageList()//获取消息列表
      this.$refs.bottomMenu.linBanTreeselect()//查询林班层级树结构
      this.$refs.bottomMenu.deptTreeselect()//查询林场部门树结构
    },
    showEventDialog(eventCode) {
      //事件信息弹出
      this.$refs.eventdetailsdialog.showEventDialog(eventCode)
    },
    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)
    },
    //选择图层(传递数组)  带数据
    choseLayerSwitchingList_Data(urlList) {
      this.$refs.supermap.layerSwitchingList_Data(urlList)
    },
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    choseFireList(id,eventId, index) {
      this.listCurrentIndex = index
      let that = this

      selectFireLoseByid({id:id,eventId:eventId}).then(res => {
        this.graphicsList = []
        //地图标记
        if (res.data.regionalFlagBOList != null && res.data.regionalFlagBOList.length > 0) {
          for (let i = 0; i < res.data.regionalFlagBOList.length; i++) {
            let latlng = {
              lat: res.data.regionalFlagBOList[i].latitude,
              lng: res.data.regionalFlagBOList[i].longitude
            }
            this.graphicsList.push(latlng)
          }
          setTimeout(() => {

            that.$refs.supermap.clearG()
            that.$refs.supermap.setGraphicsList(this.graphicsList, 'red')
          }, 1000)
        } else {
          that.$refs.supermap.clearG()
        }

        that.$refs.supermap.clearM(false)
        that.$refs.supermap.clearM(true)
        that.markersList = [];
          let markersMap = {
            lng: 124.59,
            lat: 43.02,
            icon: 'marker',
            bindPopupHtml: '',
            click: '',
            parameter: '',
            keepBindPopup: false,
            isAggregation: true
          }
          // markersMap.click = 'showEventDialog'
          markersMap.parameter = res.data.visuForestFireLossBO.eventCode
          markersMap.lng = res.data.visuForestFireLossBO.longitude
          markersMap.lat = res.data.visuForestFireLossBO.latitude

          markersMap.bindPopupHtml = '<div class="map-tip">' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>经纬度：' + markersMap.lng + ',' + markersMap.lat + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>事件名称：' + res.data.visuForestFireLossBO.eventName + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>' +
            '<span>' +
            '                  <div class="d-l-con">' +
            '                  <div class="d-l-l-text">' +
            '                  <h4>事件时间：' + res.data.visuForestFireLossBO.createTime + '</h4>' +
            '                </div>' +
            '                </div>' +
            '                </span>';
          markersMap.bindPopupHtml += '</div>'
          this.markersList.push(markersMap)

          that.$refs.supermap.setMarkers(that.markersList)


        //右侧
        this.fireLossTotal = res.data.visuForestFireLossBO.fireLossTotal != null ? res.data
          .visuForestFireLossBO.fireLossTotal : 0
        this.forestResources[0].forestArea = res.data.visuForestFireLossBO.forestArea != null ? res
          .data.visuForestFireLossBO.forestArea : 0
        this.forestResources[0].forestPrice = res.data.visuForestFireLossBO.forestPrice != null ? res
          .data.visuForestFireLossBO.forestPrice : 0
        this.forestResources[0].treesNumber = res.data.visuForestFireLossBO.treesNumber != null ? res
          .data.visuForestFireLossBO.treesNumber : 0
        this.forestResources[0].treesPrice = res.data.visuForestFireLossBO.treesPrice != null ? res
          .data.visuForestFireLossBO.treesPrice : 0

        this.casualties[0].minorInjuriesNumber = res.data.visuForestFireLossBO.minorInjuriesNumber !=
        null ? res.data.visuForestFireLossBO.minorInjuriesNumber : 0
        this.casualties[0].minorInjuriesPrice = res.data.visuForestFireLossBO.minorInjuriesPrice !=
        null ? res.data.visuForestFireLossBO.minorInjuriesPrice : 0
        this.casualties[0].seriouslyInjuredNumber = res.data.visuForestFireLossBO
          .seriouslyInjuredNumber != null ? res.data.visuForestFireLossBO.seriouslyInjuredNumber : 0
        this.casualties[0].seriouslyInjuredPrice = res.data.visuForestFireLossBO
          .seriouslyInjuredPrice != null ? res.data.visuForestFireLossBO.seriouslyInjuredPrice : 0
        this.casualties[0].deathNumber = res.data.visuForestFireLossBO.deathNumber != null ? res.data
          .visuForestFireLossBO.deathNumber : 0
        this.casualties[0].deathPrice = res.data.visuForestFireLossBO.deathPrice != null ? res.data
          .visuForestFireLossBO.deathPrice : 0
        this.elseFireLossPrice[0].elseFireLossPrice = res.data.visuForestFireLossBO
          .elseFireLossPrice != null ? res.data.visuForestFireLossBO.elseFireLossPrice : 0
        this.blazesPriceTotal = res.data.visuForestFireLossBO.blazesPriceTotal != null ? res.data
          .visuForestFireLossBO.blazesPriceTotal : 0

        this.fireFightingCasualties[0].artificialDays = res.data.visuForestFireLossBO.artificialDays !=
        null ? res.data.visuForestFireLossBO.artificialDays : 0
        this.fireFightingCasualties[0].artificialPrice = res.data.visuForestFireLossBO
          .artificialPrice != null ? res.data.visuForestFireLossBO.artificialPrice : 0
        this.fireFightingCasualties[0].vehicleNumber = res.data.visuForestFireLossBO.vehicleNumber !=
        null ? res.data.visuForestFireLossBO.vehicleNumber : 0
        this.fireFightingCasualties[0].carNumber = res.data.visuForestFireLossBO.carNumber != null ?
          res.data.visuForestFireLossBO.carNumber : 0
        this.fireFightingCasualties[0].vehiclePrice = res.data.visuForestFireLossBO.vehiclePrice !=
        null ? res.data.visuForestFireLossBO.vehiclePrice : 0
        this.fireFightingCasualties[0].planeNumber = res.data.visuForestFireLossBO.planeNumber !=
        null ? res.data.visuForestFireLossBO.planeNumber : 0
        this.fireFightingCasualties[0].planePrice = res.data.visuForestFireLossBO.planePrice != null ?
          res.data.visuForestFireLossBO.planePrice : 0

        this.otherFireCosts[0].elseBlazesPrice = res.data.visuForestFireLossBO.elseBlazesPrice !=
        null ? res.data.visuForestFireLossBO.elseBlazesPrice : 0
      })
    },

    getInit() {
      let that = this
      setTimeout(() => {
        that.graphicsList = []
        that.$refs.supermap.clearG()
      }, 1000)
      //获取左侧菜单列表
      getInit(this.pickYear.getYear() + 1900).then(res => {
        this.fireList = []
        // //地图标记
        // if (res.data.regionalFlagBOList != null && res.data.regionalFlagBOList.length > 0) {
        //   for (let i = 0; i < res.data.regionalFlagBOList.length; i++) {
        //     let latlng = {
        //       lat: res.data.regionalFlagBOList[i].latitude,
        //       lng: res.data.regionalFlagBOList[i].longitude
        //     }
        //     this.graphicsList.push(latlng)
        //   }
        //   setTimeout(() => {
        //     that.$refs.supermap.clearG()
        //     that.$refs.supermap.setGraphicsList(this.graphicsList, 'red')
        //   }, 1000)
        // }else {
        //   that.$refs.supermap.clearG()
        // }

        //右侧列表
        if (res.data.visuForestFireLossTimeBOList != null && res.data.visuForestFireLossTimeBOList
          .length > 0) {
          this.numberFiresYear = res.data.visuForestFireLossTimeBOList.length
          this.fireList = res.data.visuForestFireLossTimeBOList

          this.markersList = [];
          for (let i = 0; i < this.fireList.length; i++) {
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: 'marker',
              bindPopupHtml: '',
              click: '',
              parameter: '',
              keepBindPopup: false,
              isAggregation: true
            }
            // markersMap.click = 'showEventDialog'
            markersMap.parameter = this.fireList[i].eventCode
            markersMap.lng = this.fireList[i].longitude
            markersMap.lat = this.fireList[i].latitude

            markersMap.bindPopupHtml = '<div class="map-tip">' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>经纬度：' + this.fireList[i].longitude + ',' + this.fireList[i].latitude + '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>事件名称：' + this.fireList[i].eventName + '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>事件时间：' + this.fireList[i].createTime + '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>';
            if (this.fireList[i].pictureType == 'image' && this.fireList[i].picturePath != null && this.fireList[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>'
            this.markersList.push(markersMap)

          }

            that.$refs.supermap.clearM(false)
            that.$refs.supermap.clearM(true)
            that.$refs.supermap.setMarkers(that.markersList)

        } else {

            that.$refs.supermap.clearM(false)
            that.$refs.supermap.clearM(true)
          this.numberFiresYear = 0
        }

        //左侧
        if (res.data.visuForestFireLossBO != null) {
          this.forestFireLossTotal = res.data.visuForestFireLossBO.forestFireLossTotal != null ? res
            .data.visuForestFireLossBO.forestFireLossTotal : 0
          this.fireLossTotalYear = res.data.visuForestFireLossBO.fireLossTotal != null ? res.data
            .visuForestFireLossBO.fireLossTotal : 0
          this.forestResourcesYear[0].forestArea = res.data.visuForestFireLossBO.forestArea != null ?
            res.data.visuForestFireLossBO.forestArea : 0
          this.forestResourcesYear[0].forestPrice = res.data.visuForestFireLossBO.forestPrice !=
          null ? res.data.visuForestFireLossBO.forestPrice : 0
          this.forestResourcesYear[0].treesNumber = res.data.visuForestFireLossBO.treesNumber !=
          null ? res.data.visuForestFireLossBO.treesNumber : 0
          this.forestResourcesYear[0].treesPrice = res.data.visuForestFireLossBO.treesPrice != null ?
            res.data.visuForestFireLossBO.treesPrice : 0

          this.casualtiesYear[0].minorInjuriesNumber = res.data.visuForestFireLossBO
            .minorInjuriesNumber != null ? res.data.visuForestFireLossBO.minorInjuriesNumber : 0
          this.casualtiesYear[0].minorInjuriesPrice = res.data.visuForestFireLossBO
            .minorInjuriesPrice != null ? res.data.visuForestFireLossBO.minorInjuriesPrice : 0
          this.casualtiesYear[0].seriouslyInjuredNumber = res.data.visuForestFireLossBO
            .seriouslyInjuredNumber != null ? res.data.visuForestFireLossBO
            .seriouslyInjuredNumber : 0
          this.casualtiesYear[0].seriouslyInjuredPrice = res.data.visuForestFireLossBO
            .seriouslyInjuredPrice != null ? res.data.visuForestFireLossBO.seriouslyInjuredPrice :
            0
          this.casualtiesYear[0].deathNumber = res.data.visuForestFireLossBO.deathNumber != null ?
            res.data.visuForestFireLossBO.deathNumber : 0
          this.casualtiesYear[0].deathPrice = res.data.visuForestFireLossBO.deathPrice != null ? res
            .data.visuForestFireLossBO.deathPrice : 0
          this.elseFireLossPriceYear[0].elseFireLossPrice = res.data.visuForestFireLossBO
            .elseFireLossPrice != null ? res.data.visuForestFireLossBO.elseFireLossPrice : 0
          this.blazesPriceTotalYear = res.data.visuForestFireLossBO.blazesPriceTotal != null ? res
            .data.visuForestFireLossBO.blazesPriceTotal : 0

          this.fireFightingCasualtiesYear[0].artificialDays = res.data.visuForestFireLossBO
            .artificialDays != null ? res.data.visuForestFireLossBO.artificialDays : 0
          this.fireFightingCasualtiesYear[0].artificialPrice = res.data.visuForestFireLossBO
            .artificialPrice != null ? res.data.visuForestFireLossBO.artificialPrice : 0
          this.fireFightingCasualtiesYear[0].vehicleNumber = res.data.visuForestFireLossBO
            .vehicleNumber != null ? res.data.visuForestFireLossBO.vehicleNumber : 0
          this.fireFightingCasualtiesYear[0].carNumber = res.data.visuForestFireLossBO.carNumber !=
          null ? res.data.visuForestFireLossBO.carNumber : 0
          this.fireFightingCasualtiesYear[0].vehiclePrice = res.data.visuForestFireLossBO
            .vehiclePrice != null ? res.data.visuForestFireLossBO.vehiclePrice : 0
          this.fireFightingCasualtiesYear[0].planeNumber = res.data.visuForestFireLossBO
            .planeNumber != null ? res.data.visuForestFireLossBO.planeNumber : 0
          this.fireFightingCasualtiesYear[0].planePrice = res.data.visuForestFireLossBO.planePrice !=
          null ? res.data.visuForestFireLossBO.planePrice : 0

          this.otherFireCostsYear[0].elseBlazesPrice = res.data.visuForestFireLossBO
            .elseBlazesPrice != null ? res.data.visuForestFireLossBO.elseBlazesPrice : 0
        } else {
          this.forestFireLossTotal = 0
          this.fireLossTotalYear = 0
          this.forestResourcesYear[0].forestArea = 0
          this.forestResourcesYear[0].forestPrice = 0
          this.forestResourcesYear[0].treesNumber = 0
          this.forestResourcesYear[0].treesPrice = 0

          this.casualtiesYear[0].minorInjuriesNumber = 0
          this.casualtiesYear[0].minorInjuriesPrice = 0
          this.casualtiesYear[0].seriouslyInjuredNumber = 0
          this.casualtiesYear[0].seriouslyInjuredPrice = 0
          this.casualtiesYear[0].deathNumber = 0
          this.casualtiesYear[0].deathPrice = 0
          this.elseFireLossPriceYear[0].elseFireLossPrice = 0
          this.blazesPriceTotalYear = 0

          this.fireFightingCasualtiesYear[0].artificialDays = 0
          this.fireFightingCasualtiesYear[0].artificialPrice = 0
          this.fireFightingCasualtiesYear[0].vehicleNumber = 0
          this.fireFightingCasualtiesYear[0].carNumber = 0
          this.fireFightingCasualtiesYear[0].vehiclePrice = 0
          this.fireFightingCasualtiesYear[0].planeNumber = 0
          this.fireFightingCasualtiesYear[0].planePrice = 0

          this.otherFireCostsYear[0].elseBlazesPrice = 0
        }

        //右侧
        this.fireLossTotal = res.data.visuForestFireLossBOFirst.fireLossTotal != null ? res.data
          .visuForestFireLossBOFirst.fireLossTotal : 0
        this.forestResources[0].forestArea = res.data.visuForestFireLossBOFirst.forestArea != null ?
          res.data.visuForestFireLossBOFirst.forestArea : 0
        this.forestResources[0].forestPrice = res.data.visuForestFireLossBOFirst.forestPrice != null ?
          res.data.visuForestFireLossBOFirst.forestPrice : 0
        this.forestResources[0].treesNumber = res.data.visuForestFireLossBOFirst.treesNumber != null ?
          res.data.visuForestFireLossBOFirst.treesNumber : 0
        this.forestResources[0].treesPrice = res.data.visuForestFireLossBOFirst.treesPrice != null ?
          res.data.visuForestFireLossBOFirst.treesPrice : 0

        this.casualties[0].minorInjuriesNumber = res.data.visuForestFireLossBOFirst
          .minorInjuriesNumber != null ? res.data.visuForestFireLossBOFirst.minorInjuriesNumber : 0
        this.casualties[0].minorInjuriesPrice = res.data.visuForestFireLossBOFirst
          .minorInjuriesPrice != null ? res.data.visuForestFireLossBOFirst.minorInjuriesPrice : 0
        this.casualties[0].seriouslyInjuredNumber = res.data.visuForestFireLossBOFirst
          .seriouslyInjuredNumber != null ? res.data.visuForestFireLossBOFirst
          .seriouslyInjuredNumber : 0
        this.casualties[0].seriouslyInjuredPrice = res.data.visuForestFireLossBOFirst
          .seriouslyInjuredPrice != null ? res.data.visuForestFireLossBOFirst.seriouslyInjuredPrice :
          0
        this.casualties[0].deathNumber = res.data.visuForestFireLossBOFirst.deathNumber != null ? res
          .data.visuForestFireLossBOFirst.deathNumber : 0
        this.casualties[0].deathPrice = res.data.visuForestFireLossBOFirst.deathPrice != null ? res
          .data.visuForestFireLossBOFirst.deathPrice : 0
        this.elseFireLossPrice[0].elseFireLossPrice = res.data.visuForestFireLossBOFirst
          .elseFireLossPrice != null ? res.data.visuForestFireLossBOFirst.elseFireLossPrice : 0
        this.blazesPriceTotal = res.data.visuForestFireLossBOFirst.blazesPriceTotal != null ? res.data
          .visuForestFireLossBOFirst.blazesPriceTotal : 0

        this.fireFightingCasualties[0].artificialDays = res.data.visuForestFireLossBOFirst
          .artificialDays != null ? res.data.visuForestFireLossBOFirst.artificialDays : 0
        this.fireFightingCasualties[0].artificialPrice = res.data.visuForestFireLossBOFirst
          .artificialPrice != null ? res.data.visuForestFireLossBOFirst.artificialPrice : 0
        this.fireFightingCasualties[0].vehicleNumber = res.data.visuForestFireLossBOFirst
          .vehicleNumber != null ? res.data.visuForestFireLossBOFirst.vehicleNumber : 0
        this.fireFightingCasualties[0].carNumber = res.data.visuForestFireLossBOFirst.carNumber !=
        null ? res.data.visuForestFireLossBOFirst.carNumber : 0
        this.fireFightingCasualties[0].vehiclePrice = res.data.visuForestFireLossBOFirst
          .vehiclePrice != null ? res.data.visuForestFireLossBOFirst.vehiclePrice : 0
        this.fireFightingCasualties[0].planeNumber = res.data.visuForestFireLossBOFirst.planeNumber !=
        null ? res.data.visuForestFireLossBOFirst.planeNumber : 0
        this.fireFightingCasualties[0].planePrice = res.data.visuForestFireLossBOFirst.planePrice !=
        null ? res.data.visuForestFireLossBOFirst.planePrice : 0

        this.otherFireCosts[0].elseBlazesPrice = res.data.visuForestFireLossBOFirst.elseBlazesPrice !=
        null ? res.data.visuForestFireLossBOFirst.elseBlazesPrice : 0
      })
    },
    //事件chart
    eventChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('event-chart'))

      myChart.setOption({
        color: ['#2EACFF', '#FFA61C', '#2EC054', '#8C64D7'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          show: true
        },
        series: [{
          name: '事件分类',
          type: 'pie',
          roseType: true,
          radius: [30, 70],
          label: {
            show: true,
            formatter: '{b}\n{c} '
          },
          data: this.eventChartData
        }]
      })

    },
    //吉祥物收起左右框
    indent() {
      let list = document.getElementsByClassName('el-tooltip__popper')
      list[list.length - 1].style.display = 'none'
      if (this.indentStyle == '') {
        this.indentStyle = 'indent-style'
        this.indentleft = 'indent-left'
        this.indentright = 'indent-right'
        this.indentText = '展开左右栏'
      } else if (this.indentText == '展开左右栏') {
        this.indentStyle = ''
        this.indentleft = ''
        this.indentright = ''
        this.indentText = '收起左右栏'
      }
    },
    dropLocation(lat, lng) {
      this.$refs.supermap.dropLocation(lat, lng)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/base.scss';

.el-table__header {
  width: auto !important;
}

.d-dialog-con {
  position: absolute;
  left: -19rem;
  top: 0;
}
</style>