Project_yhfu/src/views/datacenter.vue

<!--信息中心-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar w-10" :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" :class="{on:iconCurrentIndex==item.resourceTable}"
                     v-for="(item,index) in resourcesList"
                     v-on:click="indentleftSetMarkers(item.type)">
                     <!--v-on:click="indentleftSetMarkers(item.resourceTable)">-->
                  <div class="iconfont icon icon-normal" :class="item.icon"></div>
                  <div class="icon-text">
                    <h6>{{ item.num }}</h6>
                    <!--<h6>{{ item.count }}</h6>-->
                    <h5>{{ item.name }}</h5>
                    <!--<h5>{{ item.resourceName }}</h5>-->
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" 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="overflow-y" style="height: 39vh">
                <div class="d-l-con" :class="{on:listCurrentIndex==item.deptId}"
                     v-for="(item,index) in deptGroupList"
                     v-on:click="indentleftByDeptIdSetMarkers(item.deptId)">
                  <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 class="overflow-y" style="height: 34vh;">
                <div id="data-chart" style="width: 100%;height:34vh;"></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 {
  getResource,
  getResourcePoint,
  getResourcePointByDeptId
} from '@/api/datacenter'

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 {
  components: {
    supermap,
    vheader,
    vBottomMenu,
    eventLocation,
    TVWall
  },
  created() {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog
    window.choseLayerSwitching = this.choseLayerSwitching
    window.choseLayerSwitchingList = this.choseLayerSwitchingList
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  },
  mounted() {
    this.getResource()
    this.bottomMenuList() //获取底部公共组件消息和任务
  },
  data() {
    return {
      iconCurrentIndex: '',
      listCurrentIndex: '',
      markersList: [],
      iframeBoo: true,
      open: false,
      iframeVue: null,
      activeName: 'info',
      radio: '1',
      //类型
      resourceTable: '',
      //左侧资源
      resourcesList: [],
      //右侧资源
      deptGroupList: [],
      source: [],
      //左右缩进
      indentStyle: '',
      indentleft: '',
      indentright: '',
      indentText: '收起左右栏',
      indentdisabled: false

    }
  },

  methods: {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    bottomMenuList() {
      this.$refs.bottomMenu.selectTaskList()//获取任务列表
      this.$refs.bottomMenu.selectMessageList()//获取消息列表
    },
    showDialog(click) {
      if (click == 'eventLocation') {
        this.$refs.eventLocation.showEventLocation()
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showChild = false
      } else if (click == 'editableLayers') {
        this.$refs.bottomMenu.showChild = 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
        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
      }
    },
    //选择图层
    choseLayerSwitching(url, isClear) {
      this.$refs.supermap.layerSwitching(url, isClear)
    },
    //选择图层(传递数组)
    choseLayerSwitchingList(urlList) {
      this.$refs.supermap.layerSwitchingList(urlList)
    },
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    //数据分布chart
    dataChat() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('data-chart'))
      // 绘制图表
      const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848']
      myChart.setOption({
        dataset: {
          source: this.source
        },
        tooltip: {
          trigger: 'item'

        },
        grid: {
          top: '5%',
          left: '2%',
          // right: "4%",
          bottom: '-15%',
          width: '75%',
          containLabel: true
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: {
          type: 'category', // 不设置类目轴，抽离的dataset数据展示不出来
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#5deaff',
              fontSize: '12'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },

        series: [{

          type: 'bar',
          animationCurve: 'easeOutBack',
          barWidth: 5,
          label: {
            show: true,
            position: 'right',
            offset: [0, 0],
            color: '#88dfd5',
            // fontSize: "12",
            style: {
              fill: '#fff'
            }
          },
          backgroundBar: {
            show: true,
            style: {
              fill: 'rgba(97,152,255,0.20)'
            }
          },
          barStyle: {
            stroke: 'rgba(41,244,236,1)'
          },
          gradient: {
            color: ['rgba(41,244,236,1)', 'rgba(41,244,236,0)']
          },
          itemStyle: {
            label: {
              show: true
            },
            labelLine: {
              show: false
            },
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(41,244,236,0)'
            },
              {
                offset: 1,
                color: 'rgba(41,244,236,.5)'
              }
            ]),
            borderColor: '#a2f9f7',
            shadowBlur: 16,
            shadowColor: '#a2f9f7'
          }
        }]
      })

    },

    //吉祥物收起左右框
    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 = '收起左右栏'
      }
    },

    // 弹层方法
    // 弹层方法
    showEventInfo1() {
      this.eventInfoVisible1 = true
    },
    showEventInfo2() {
      this.eventInfoVisible2 = true
    },
    getResource() {
      let that = this
      //获取左侧菜单列表
      getResource().then(res => {
        that.resourcesList = res.data
        console.log("数据中心", that.resourcesList)
        //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
        res.data.forEach(function(data, index) {
          console.log("data.type.split('_').slice(-1)", data.type.split('_').slice(-1));
          that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.type.replaceAll("_", "-"));
          // that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.resourceTable.split('_').slice(-1))
        })

      })
    },
    indentleftSetMarkers(resourceTable) {
      this.iconCurrentIndex = resourceTable
      let that = this
      that.resourceTable = resourceTable
      that.markersList = []
      that.source = []
      //点击左侧地图落点
      getResourcePoint(resourceTable).then(res => {
        that.deptGroupList = res.data.deptGroupList
        if (res.data.deptGroupList != null && res.data.deptGroupList.length > 0) {
          for (let i = 0; i < res.data.deptGroupList.length; i++) {
            let aa = [res.data.deptGroupList[i].deptName, res.data.deptGroupList[i].count]
            that.source.push(aa)
          }
        }
        if (res.data.resourceList != null && res.data.resourceList.length > 0) {
          for (let i = 0; i < res.data.resourceList.length; i++) {
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: 'marker',
              bindPopupHtml: '',
              click: '',
              keepBindPopup: false,
              isAggregation: false
            }
            if (resourceTable == 'centerdata_t_resources_illegal_construction') { //违建信息
              markersMap.icon = 'sj-icon-map-centerdata-t-forest-weatherstation'
              markersMap.lng = res.data.resourceList[i].longitude
              markersMap.lat = res.data.resourceList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
                  .data.resourceList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>名称：' + res.data.resourceList[i].name +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>违建处理负责人：' + res.data.resourceList[i].person +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>联系方式：' + res.data.resourceList[i].phone +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span></div>'
            } else if (resourceTable == 'centerdata_t_resources_deposit') { //矿产资源
              markersMap.icon = 'sj-icon-map-centerdata-t-forest-farm'
              markersMap.lng = res.data.resourceList[i].longitude
              markersMap.lat = res.data.resourceList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
                  .data.resourceList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>名称：' + res.data.resourceList[i].name + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>联系人：' + res.data.resourceList[i].person + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>电话：' + res.data.resourceList[i].phone + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span></div>'
            } else if (resourceTable == 'centerdata_t_resources_forest') { //森林资源管理信息
              markersMap.icon = 'sj-icon-map-centerdata-t-forest-landing'
              markersMap.lng = res.data.resourceList[i].longitude
              markersMap.lat = res.data.resourceList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
                  .data.resourceList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>名称：' + res.data.resourceList[i].name +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>占地范围：' + res.data.resourceList[i].zdfw +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>占地面积(万公顷)：' + res.data.resourceList[i].landArea + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span></div>'
            } else if (resourceTable == 'centerdata_t_resources_geologic_hazard') { //地质灾害易发区
              markersMap.icon = 'sj-icon-map-centerdata-t-forest-channel'
              markersMap.lng = res.data.resourceList[i].longitude
              markersMap.lat = res.data.resourceList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
                  .data.resourceList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>名称：' + res.data.resourceList[i].name +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>联系人：' + res.data.resourceList[i].person +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>电话：' + res.data.resourceList[i].phone + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span></div>'
            } else if (resourceTable == 'centerdata_t_resources_hydroenergy') { //水能资源
              markersMap.icon = 'sj-icon-map-centerdata-t-forest-checkpoint'
              markersMap.lng = res.data.resourceList[i].longitude
              markersMap.lat = res.data.resourceList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
                  .data.resourceList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>名称：' + res.data.resourceList[i].name +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>联系人：' + res.data.resourceList[i].person +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>位置：' + res.data.resourceList[i].address +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>电话：' + res.data.resourceList[i].phone +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span></div>'
            } else if (resourceTable == 'centerdata_t_resources_land') { //土地资源管理信息
              markersMap.icon = 'sj-icon-map-centerdata-t-forest-waterintake'
              markersMap.lng = res.data.resourceList[i].longitude
              markersMap.lat = res.data.resourceList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
                  .data.resourceList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>名称：' + res.data.resourceList[i].name +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>占地面积(万公顷)：' + res.data.resourceList[i].landArea +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span></div>'
            }
            that.markersList.push(markersMap)
          }
        }
        this.dataChat()
        that.$refs.supermap.clearM(false)
        that.$refs.supermap.setMarkers(that.markersList)
      })
    },
    indentleftByDeptIdSetMarkers(deptId) {
      this.listCurrentIndex = deptId
      let that = this
      //点击左侧地图落点
      getResourcePointByDeptId(that.resourceTable, deptId).then(res => {
        console.log("res.data.resourceList=", res.data.resourceList)
        // alert(that.resourceTable)
        that.markersList = []
        if (res.data.resourceList != null && res.data.resourceList.length > 0) {
          for (let i = 0; i < res.data.resourceList.length; i++) {
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: 'marker',
              bindPopupHtml: '',
              click: '',
              keepBindPopup: false,
              isAggregation: false
            }
            if (that.resourceTable == 'centerdata_t_resources_illegal_construction') { //违建信息
              markersMap.icon = 'sj-icon-map-centerdata-t-forest-weatherstation'
              markersMap.lng = res.data.resourceList[i].longitude
              markersMap.lat = res.data.resourceList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
                  .data.resourceList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>名称：' + res.data.resourceList[i].name +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>违建处理负责人：' + res.data.resourceList[i].person +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>联系方式：' + res.data.resourceList[i].phone +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span></div>'
            } else if (that.resourceTable == 'centerdata_t_resources_deposit') { //矿产资源
              markersMap.icon = 'sj-icon-map-centerdata-t-forest-farm'
              markersMap.lng = res.data.resourceList[i].longitude
              markersMap.lat = res.data.resourceList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
                  .data.resourceList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>名称：' + res.data.resourceList[i].name + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>联系人：' + res.data.resourceList[i].person + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>电话：' + res.data.resourceList[i].phone + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span></div>'
            } else if (that.resourceTable == 'centerdata_t_resources_forest') { //森林资源管理信息
              markersMap.icon = 'sj-icon-map-centerdata-t-forest-landing'
              markersMap.lng = res.data.resourceList[i].longitude
              markersMap.lat = res.data.resourceList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
                  .data.resourceList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>名称：' + res.data.resourceList[i].name +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>占地范围：' + res.data.resourceList[i].zdfw +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>占地面积(万公顷)：' + res.data.resourceList[i].landArea + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span></div>'
            } else if (that.resourceTable == 'centerdata_t_resources_geologic_hazard') { //地质灾害易发区
              markersMap.icon = 'sj-icon-map-centerdata-t-forest-channel'
              markersMap.lng = res.data.resourceList[i].longitude
              markersMap.lat = res.data.resourceList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
                  .data.resourceList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>名称：' + res.data.resourceList[i].name +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>联系人：' + res.data.resourceList[i].person +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>电话：' + res.data.resourceList[i].phone + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span></div>'
            } else if (that.resourceTable == 'centerdata_t_resources_hydroenergy') { //水能资源
              markersMap.icon = 'sj-icon-map-centerdata-t-forest-checkpoint'
              markersMap.lng = res.data.resourceList[i].longitude
              markersMap.lat = res.data.resourceList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
                  .data.resourceList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>名称：' + res.data.resourceList[i].name +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>联系人：' + res.data.resourceList[i].person +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>位置：' + res.data.resourceList[i].address +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>电话：' + res.data.resourceList[i].phone +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span></div>'
            } else if (that.resourceTable == 'centerdata_t_resources_land') { //土地资源管理信息
              markersMap.icon = 'sj-icon-map-centerdata-t-forest-waterintake'
              markersMap.lng = res.data.resourceList[i].longitude
              markersMap.lat = res.data.resourceList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
                  .data.resourceList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>名称：' + res.data.resourceList[i].name +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>占地面积(万公顷)：' + res.data.resourceList[i].landArea +
                '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span></div>'
            }
            // if (that.resourceTable == 'centerdata_t_forest_weatherstation') { //气象站
            //   markersMap.icon = 'sj-icon-map-centerdata-t-forest-weatherstation'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>地址：' + res.data.resourceList[i].weatherstationAddress +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系人：' + res.data.resourceList[i].weatherstationPerson +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>电话：' + res.data.resourceList[i].weatherstationTel +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // } else if (that.resourceTable == 'centerdata_t_forest_farm') { //林场
            //   markersMap.icon = 'sj-icon-map-centerdata-t-forest-farm'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>林场名称：' + res.data.resourceList[i].farmName + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系人：' + res.data.resourceList[i].farmPerson + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>电话：' + res.data.resourceList[i].farmTel + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // } else if (that.resourceTable == 'centerdata_t_forest_landing') { //起降点
            //   markersMap.icon = 'sj-icon-map-centerdata-t-forest-landing'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>起降点名称：' + res.data.resourceList[i].landingName +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系人：' + res.data.resourceList[i].landingPerson +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>电话：' + res.data.resourceList[i].landingTel + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // } else if (that.resourceTable == 'centerdata_t_forest_channel') { //水源渠道
            //   markersMap.icon = 'sj-icon-map-centerdata-t-forest-channel'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>渠道名称：' + res.data.resourceList[i].channelName +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系人：' + res.data.resourceList[i].channelPerson +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>电话：' + res.data.resourceList[i].channelTel + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // } else if (that.resourceTable == 'centerdata_t_forest_checkpoint') { //防火检查站
            //   markersMap.icon = 'sj-icon-map-centerdata-t-forest-checkpoint'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>检查站名称：' + res.data.resourceList[i].checkpointName +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>地址：' + res.data.resourceList[i].checkpointAddress +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系人：' + res.data.resourceList[i].checkpointPerson +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>电话：' + res.data.resourceList[i].checkpointTel +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // } else if (that.resourceTable == 'centerdata_t_forest_waterintake') { //取水口
            //   markersMap.icon = 'sj-icon-map-centerdata-t-forest-waterintake'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>取水口名称：' + res.data.resourceList[i].waterintakeName +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系人：' + res.data.resourceList[i].waterintakePerson +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>电话：' + res.data.resourceList[i].waterintakeTel +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // } else if (that.resourceTable == 'centerdata_t_forest_watercrane') { //水鹤
            //   markersMap.icon = 'sj-icon-map-centerdata-t-forest-watercrane'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>水鹤名称：' + res.data.resourceList[i].watercraneName +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系人：' + res.data.resourceList[i].watercranePerson +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>电话：' + res.data.resourceList[i].watercraneTel +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // } else if (that.resourceTable == 'centerdata_t_forest_firehydrant') { //消火栓
            //   markersMap.icon = 'sj-icon-map-centerdata-t-forest-firehydrant'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>消火栓名称：' + res.data.resourceList[i].firehydrantName +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>地址：' + res.data.resourceList[i].firehydrantAddress +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系人：' + res.data.resourceList[i].firehydrantPerson +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>电话：' + res.data.resourceList[i].firehydrantTel +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // } else if (that.resourceTable == 'centerdata_t_forest_fireteam') { //森林防火队
            //   markersMap.icon = 'sj-icon-map-centerdata-t-forest-fireteam'
            //   markersMap.lng = res.data.resourceList[i].longitude
            //   markersMap.lat = res.data.resourceList[i].latitude
            //   markersMap.bindPopupHtml = '<div class="map-tip">' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>经纬度：' + res.data.resourceList[i].longitude + ',' + res
            //       .data.resourceList[i].latitude + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>森林防火队名称：' + res.data.resourceList[i].fireteamName +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>联系人：' + res.data.resourceList[i].fireteamPerson +
            //     '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span>' +
            //     '<span>' +
            //     '                  <div class="d-l-con">' +
            //     '                  <div class="d-l-l-text">' +
            //     '                  <h4>电话：' + res.data.resourceList[i].fireteamTel + '</h4>' +
            //     '                </div>' +
            //     '                </div>' +
            //     '                </span></div>'
            // }
            that.markersList.push(markersMap)
          }
        }
        that.$refs.supermap.clearM(false)
        that.$refs.supermap.setMarkers(that.markersList)
      })
    }

  }
}
</script>

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