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">
          <div class="this-title">
            <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 w-50 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 w-50 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>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'disasterMap'"
                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
      <!-- 右侧 -->
      <div class="rightbar" :class="indentright" ref="right">
        <div class="forthis">
          <div class="this-title">
            <span>列表</span>
          </div>
          <div class="i-list-con h-19">
            <div class="d-l-con" v-for="(item,index) in fireList">
              <div class="d-l-l-text" @click="choseFireList(item.id)">
                <i class="i-small"></i>
                <h4>{{pickYear.getYear()+1900}}年第{{index+1}}场火灾</h4>
              </div>
            </div>
          </div>
        </div>
        <div class="forthis">
          <div class="i-list-con h-51">
            <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>
        </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>
  </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 echarts from 'echarts'
  let echarts = require('echarts')
  export default {
    dicts: ['event_source'],
    components: {
      supermap,
      vheader,
      vBottomMenu,
      eventLocation
    },
    created() {
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      window.showDialog=this.showDialog
      window.choseLayerSwitching=this.choseLayerSwitching
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    },
    mounted() {
      this.getInit()
    },
    data() {
      return {
        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
      }
    },

    methods: {
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      showDialog(click) {
        if (click == "eventLocation") {
          this.$refs.eventLocation.showEventLocation()
        } else if (click == "editableLayers") {
          if (!this.$refs.supermap.isEditableLayers) {
            this.$refs.supermap.isEditableLayers = true
          } else {
            this.$refs.supermap.isEditableLayers = false
          }
        } else if (click == "layerSwitching") {
          if (!this.$refs.bottomMenu.showChild) {
            this.$refs.bottomMenu.showChild = true
          } else {
            this.$refs.bottomMenu.showChild = false
          }
        }
      },
      //选择图层
      choseLayerSwitching(url) {
        this.$refs.supermap.layerSwitching(url, true);
      },
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
      choseFireList(id) {
        let that = this
        selectFireLoseByid(id).then(res => {
          //地图标记
          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()
          }
          //右侧
          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
        //获取左侧菜单列表
        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
          }

          //左侧
          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>