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">
          <div class="i-list-con h-78">
            <div class="d-l-con-icon">
              <div class="icon-con  m-btm-no"><!--   -->
                <!--<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" v-for="(item,index) in animalDwfb">
                <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>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'"
                :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">
          <div class="this-title">
            <span>事件分布</span>
            <!-- <span>23</span> -->
          </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.address}}</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" v-for="(item,index) in animalSjlb">
              <img src="@/assets/images/visual/img-sample.png" class="event-list-img animal-img">
              <div class="event-list-text">
                <h3>{{item.eventTitle}}</h3>
                <h4>{{item.phoneNum}}</h4>
                <h4><span>{{item.qx}}</span><span>{{item.source}}</span><span>{{item.time}}</span>
                </h4>
              </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 {selectDeviceType, selectCameraByDeptId} from '@/api/monitor'

  import supermap from '@/components/supermap' //超图
  import vheader from '@/components/v-header.vue' //一体化共用头部
  import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单


  let echarts = require('echarts')
  export default {
    components: {
      supermap,
      vheader,
      vBottomMenu,
    }, data() {
      return {
        animalDwfb: [
          {

            name: '虎',
            src: require('../assets/images/dwbh/hu-1.png')
          }, {

            name: '豹',
            src: require('../assets/images/dwbh/bao-1.png')
          }, {
            name: '蛇',
            src: require('../assets/images/dwbh/she-1.png')
          }, {
            name: '鹰',
            src: require('../assets/images/dwbh/ying-1.png')
          }, {
            name: '兔',
            src: require('../assets/images/dwbh/tuzi-1.png')
          }, {
            name: '狐狸',
            src: require('../assets/images/dwbh/huli-1.png')
          }, {
            name: '狗熊',
            src: require('../assets/images/dwbh/gouxiong-1.png')
          }, {
            name: '野鸡',
            src: require('../assets/images/dwbh/yeji-1.png')
          }, {
            name: '狍子',
            src: require('../assets/images/dwbh/paozi-1.png')
          }
        ],
        animalSjfb: [
          {
            address: '双辽',
            count: '11'
          }, {
            address: '梨树',
            count: '11'
          }, {
            address: '伊通',
            count: '11'
          }, {
            address: '铁东',
            count: '11'
          }, {
            address: '铁西',
            count: '11'
          }
        ],
        animalSjlb: [
          {
            eventTitle: '火险事件-XXXX地摄像头',
            phoneNum: '15635652525',
            qx: '摄像头',
            source: '新上报',
            time: '2022-05-06 20:52:20'
          }, {
            eventTitle: '火险事件-XXXX地摄像头2',
            phoneNum: '15635652525',
            qx: '摄像头',
            source: '新上报',
            time: '2022-05-06 20:52:20'
          }, {
            eventTitle: '火险事件-XXXX地摄像头3',
            phoneNum: '15635652525',
            qx: '摄像头',
            source: '新上报',
            time: '2022-05-06 20:52:20'
          }, {
            eventTitle: '火险事件-XXXX地摄像头4',
            phoneNum: '15635652525',
            qx: '摄像头',
            source: '新上报',
            time: '2022-05-06 20:52:20'
          }
        ]
      }
    },
    model: {},
    methods: {

      //事件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';
  @import '@/assets/styles/animal.scss';

</style>