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">
					<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.resourceTable)">
								<div class="iconfont icon icon-normal" :class="item.icon"></div>
								<div class="icon-text">
									<h6>{{item.count}}</h6>
									<h5>{{item.resourceName}}</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="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>

				</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
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
		},
		mounted() {
			this.getResource()
		},
		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: {
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      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) {
        this.$refs.supermap.layerSwitching(url, true);
      },
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
			//数据分布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
					//截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
					res.data.forEach(function(data, index) {
						that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.resourceTable.split("_").slice(-1))
					});
					console.log(that.resourcesList)

				})
			},
      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_forest_weatherstation') {//气象站
                markersMap.icon = "sj-icon-map-qxz"
                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 (resourceTable == 'centerdata_t_forest_farm') {//林场
                markersMap.icon = "sj-icon-map-lc"
                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 (resourceTable == 'centerdata_t_forest_landing') {//起降点
                markersMap.icon = "sj-icon-map-qjd"
                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 (resourceTable == 'centerdata_t_forest_channel') {//水源渠道
                markersMap.icon = "sj-icon-map-syqd"
                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 (resourceTable == 'centerdata_t_forest_checkpoint') {//防火检查站
                markersMap.icon = "sj-icon-map-fhjcz"
                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 (resourceTable == 'centerdata_t_forest_waterintake') {//取水口
                markersMap.icon = "sj-icon-map-qsk"
                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 (resourceTable == 'centerdata_t_forest_watercrane') {//水鹤
                markersMap.icon = "sj-icon-map-sh"
                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 (resourceTable == 'centerdata_t_forest_firehydrant') {//消火栓
                markersMap.icon = "sj-icon-map-xhs"
                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 (resourceTable == 'centerdata_t_forest_fireteam') {//森林防火队
                markersMap.icon = "sj-icon-map-slfh"
                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)
            }
          }
          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 => {
          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_forest_weatherstation') {//气象站
                markersMap.icon = "sj-icon-map-qxz"
                markersMap.lng = res.data.resourceList[i].longitude
                markersMap.lat = res.data.resourceList[i].latitude
                markersMap.icon = 'icon_qxz'
                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-lc"
                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-qjd"
                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-syqd"
                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-fhjcz"
                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-qsk"
                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-sh"
                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-xhs"
                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-slfh"
                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>