Project_yhfu/src/views/animal.vue

<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar w-6" :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="i-list-con h-78">
              <div class="d-l-con-icon">
                <div class="icon-con  m-btm-no icon-animal-con" :class="animalcount" @click="getInit()">
                  <!--   -->
                  <!--<div class="icon icon-dot"></div>-->
                  <div class="icon-text animal-text">
                    <h6>9</h6>
                    <h5>总数</h5>
                  </div>
                </div>
              </div>
              <div class="d-l-con-icon">
                <div class="icon-con icon-animal-con" :class="{on:iconCurrentIndex1==item.type}"
                     v-for="(item,index) in animalDwfb" @click="selectForestAnimalListByType(item.type)">
                  <div class="iconfont icon icon-normal icon-animal">
                    <img :src="item.src">
                  </div>
                  <div class="icon-text icon-animal-text">
                    <h5>{{ item.name }}</h5>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'animalMap'" class="indexSupermapClass"
                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
      <!--      <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
      <!--      </button>-->
      <!-- 右侧 -->
      <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-73">
              <div class="d-l-con-icon">
                <div class="h-19 overflow-y w100">
                  <div class="d-l-con" v-for="(item,index) in animalSjfb">
                    <div class="d-l-l-text">
                      <i class="i-small"></i>
                      <h4>{{ item.deptName }}</h4>
                    </div>
                    <div class="d-l-l-count">{{ item.count }}</div>
                  </div>
                </div>
              </div>
              <div class="d-l-con">
                <div id="animal-chart" style="width: 100%;height:26.2vh;"></div>
              </div>
              <div class="d-l-con d-evnet-list-con" :class="{on:listCurrentIndex1==index}"
                   v-for="(item,index) in animalSjlb"
                   @click="dropLocation(item.latitude,item.longitude,index)">
                <img src="@/assets/images/visual/img-sample.png" class="event-list-img animal-img">
                <div class="event-list-text">
                  <h3>{{ item.eventTitle }}</h3>
                  <h4><span>摄像头</span><span>新上报</span><span>{{ item.reportTime }}</span>
                  </h4>
                </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,
  selectForestAnimalListByType
} from '@/api/animal'

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' //电视墙弹窗

let echarts = require('echarts')
export default {
  components: {
    supermap,
    vheader,
    vBottomMenu,
    eventLocation,
    TVWall
  },
  data() {
    return {
      animalcount: '',
      iconCurrentIndex1: '',
      listCurrentIndex1: '',
      //左右缩进
      indentStyle: '',
      indentleft: '',
      indentright: '',
      indentText: '收起左右栏',
      indentdisabled: false,

      //虚拟数据
      animalDwfb: [{
        name: '虎',
        src: require('../assets/images/dwbh/hu-1.png'),
        type: 'forest_animal_hu'
      }, {
        name: '豹',
        src: require('../assets/images/dwbh/bao-1.png'),
        type: 'forest_animal_bao'
      }, {
        name: '蛇',
        src: require('../assets/images/dwbh/she-1.png'),
        type: 'forest_animal_she'
      }, {
        name: '鹰',
        src: require('../assets/images/dwbh/ying-1.png'),
        type: 'forest_animal_ying'
      }, {
        name: '兔',
        src: require('../assets/images/dwbh/tuzi-1.png'),
        type: 'forest_animal_tu'
      }, {
        name: '狐狸',
        src: require('../assets/images/dwbh/huli-1.png'),
        type: 'forest_animal_huli'
      }, {
        name: '狗熊',
        src: require('../assets/images/dwbh/gouxiong-1.png'),
        type: 'forest_animal_gouxiong'
      }, {
        name: '野鸡',
        src: require('../assets/images/dwbh/yeji-1.png'),
        type: 'forest_animal_yeji'
      }, {
        name: '狍子',
        src: require('../assets/images/dwbh/paozi-1.png'),
        type: 'forest_animal_paozi'
      }],
      animalSjfb: [],
      animalSjlb: [],
      markersList: [] //点位列表
    }
  },
  created() {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog
    window.choseLayerSwitching = this.choseLayerSwitching
    window.choseLayerSwitchingList = this.choseLayerSwitchingList
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  },
  mounted() {
    this.getInit()
  },
  methods: {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    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)
    },
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    dropLocation(lat, lng, index) {
      this.listCurrentIndex1 = index
      this.$refs.supermap.dropLocation(lat, lng)
    },
    //初始化
    getInit() {
      this.iconCurrentIndex1 = ''
      this.animalcount = 'on'
      let that = this
      //获取左侧菜单列表
      getInit().then(res => {
        this.animalSjfb = res.data.visuForestAnimalBOList
        this.animalSjlb = res.data.visuForestVgdEventBOList

        that.markersList = []
        if (res.data.visuForestVgdEventBOList != null && res.data.visuForestVgdEventBOList.length >
          0) {
          for (let i = 0; i < res.data.visuForestVgdEventBOList.length; i++) {
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: 'marker',
              bindPopupHtml: '',
              click: '',
              parameter: '',
              keepBindPopup: false,
              isAggregation: false
            }
            if (res.data.visuForestVgdEventBOList.length > 50) {
              markersMap.isAggregation = true
            }
            markersMap.lng = res.data.visuForestVgdEventBOList[i].longitude
            markersMap.lat = res.data.visuForestVgdEventBOList[i].latitude
            markersMap.bindPopupHtml = '<div class="map-tip">' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>经纬度：' + res.data.visuForestVgdEventBOList[i].longitude +
              ',' + res.data.visuForestVgdEventBOList[i]
                .latitude + '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>事件名称：' + res.data.visuForestVgdEventBOList[i].eventTitle +
              '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>事件时间：' + res.data.visuForestVgdEventBOList[i].reportTime +
              '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '</div>'
            that.markersList.push(markersMap)
          }
          setTimeout(() => {
            that.$refs.supermap.clearM(false)
            that.$refs.supermap.clearM(true)
            that.$refs.supermap.setMarkers(that.markersList)
          }, 1000)
        } else {
          setTimeout(() => {
            that.$refs.supermap.clearM(false)
            that.$refs.supermap.clearM(true)
          }, 1000)
        }
      })
    },

    selectForestAnimalListByType(type) {
      this.iconCurrentIndex1 = type
      this.animalcount = ''
      let that = this
      //获取左侧菜单列表
      selectForestAnimalListByType(type).then(res => {
        this.animalSjfb = res.data.visuForestAnimalBOList
        this.animalSjlb = res.data.visuForestVgdEventBOList
        that.markersList = []
        if (res.data.visuForestVgdEventBOList != null && res.data.visuForestVgdEventBOList.length >
          0) {
          for (let i = 0; i < res.data.visuForestVgdEventBOList.length; i++) {
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: 'marker',
              bindPopupHtml: '',
              click: '',
              parameter: '',
              keepBindPopup: false,
              isAggregation: false
            }
            if (res.data.visuForestVgdEventBOList.length > 50) {
              markersMap.isAggregation = true
            }
            markersMap.lng = res.data.visuForestVgdEventBOList[i].longitude
            markersMap.lat = res.data.visuForestVgdEventBOList[i].latitude
            markersMap.bindPopupHtml = '<div class="map-tip">' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>经纬度：' + res.data.visuForestVgdEventBOList[i].longitude +
              ',' + res.data.visuForestVgdEventBOList[i]
                .latitude + '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>事件名称：' + res.data.visuForestVgdEventBOList[i].eventTitle +
              '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>事件时间：' + res.data.visuForestVgdEventBOList[i].reportTime +
              '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '</div>'
            that.markersList.push(markersMap)
          }
          setTimeout(() => {
            that.$refs.supermap.clearM(false)
            that.$refs.supermap.clearM(true)
            that.$refs.supermap.setMarkers(that.markersList)
          }, 1000)
        } else {
          setTimeout(() => {
            that.$refs.supermap.clearM(false)
            that.$refs.supermap.clearM(true)
          }, 1000)
        }
      })
    },

    //事件chart
    eventChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('animal-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 = '收起左右栏'
      }
    }
  }

}
</script>

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

//动物保护
.icon-animal-con {
  width: 100%;
  display: block !important;
}

.icon-animal {
  display: block;
  margin: 2px auto;
  background: none !important;
}

.icon-animal-text {
  display: block !important;
  text-align: center !important;
  padding: 0.5rem 0.5rem 0rem 0.5rem;
}

.animal-text {
  background: #f5ad1b;
  border: 0.2px solid rgba(19, 64, 64, 0.7);
  height: 3.2rem;
  width: 4rem;
  text-align: center;
  margin: 0px auto;
  border-radius: 0.5rem;
  color: #fff !important;
}

.animal-text h6 {
  color: #fff !important;
}

.w100 {
  width: 100% !important;
}

.animal-img {
  height: 3rem !important;
}

.w-6 {
  width: 6rem !important;
}
</style>