UI

src/views/animal.vue

@@ -1,438 +1,454 @@
 <template>
-  <div class="visual-con">
-    <!--头部-->
-    <vheader></vheader>
-    <!--主体-->
-    <div class="visual-body">
-      <!-- 左侧 -->
-      <div class="leftbar w-6" :class="indentleft" ref="left">
-        <div class="forthis">
-          <div class="i-list-con h-78">
-            <div class="d-l-con-icon">
-              <div class="icon-con  m-btm-no icon-animal-con" :class="animalcount"  @click="getInit()">
-                <!--   -->
-                <!--<div class="icon icon-dot"></div>-->
-                <div class="icon-text animal-text">
-                  <h6>9</h6>
-                  <h5>总数</h5>
-                </div>
-              </div>
-            </div>
-            <div class="d-l-con-icon">
-              <div class="icon-con icon-animal-con" :class="{on:iconCurrentIndex1==item.type}"  v-for="(item,index) in animalDwfb"  @click="selectForestAnimalListByType(item.type)">
-                <div class="iconfont icon icon-normal icon-animal">
-                  <img :src="item.src">
-                </div>
-                <div class="icon-text icon-animal-text">
-                  <h5>{{item.name}}</h5>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 地图 -->
-      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'animalMap'"
-                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
-      <!--      <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
-      <!--      </button>-->
-      <!-- 右侧 -->
-      <div class="rightbar" :class="indentright" ref="right">
-        <div class="forthis">
-          <div class="this-title">
-            <span>事件分布</span>
-            <!-- <span>23</span> -->
-          </div>
-          <div class="i-list-con h-73">
-            <div class="d-l-con-icon">
-              <div class="h-19 overflow-y w100">
-                <div class="d-l-con" v-for="(item,index) in animalSjfb">
-                  <div class="d-l-l-text">
-                    <i class="i-small"></i>
-                    <h4>{{item.deptName}}</h4>
-                  </div>
-                  <div class="d-l-l-count">{{item.count}}</div>
-                </div>
-              </div>
-            </div>
-            <div class="d-l-con">
-              <div id="animal-chart" style="width: 100%;height:26.2vh;"></div>
-            </div>
-            <div class="d-l-con d-evnet-list-con"  :class="{on:listCurrentIndex1==index}"   v-for="(item,index) in animalSjlb" @click="dropLocation(item.latitude,item.longitude,index)">
-              <img src="@/assets/images/visual/img-sample.png" class="event-list-img animal-img">
-              <div class="event-list-text">
-                <h3>{{item.eventTitle}}</h3>
-                <h4><span>摄像头</span><span>新上报</span><span>{{item.reportTime}}</span>
-                </h4>
-              </div>
-            </div>
+	<div class="visual-con">
+		<!--头部-->
+		<vheader></vheader>
+		<!--主体-->
+		<div class="visual-body">
+			<!-- 左侧 -->
+			<div class="leftbar w-6" :class="indentleft" ref="left">
+				<div class="forthis">
+					<dv-border-box-13 backgroundColor="#040b1f" style="padding-bottom: 1rem;">
+						<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
+						<div class="i-list-con h-78">
+							<div class="d-l-con-icon">
+								<div class="icon-con  m-btm-no icon-animal-con" :class="animalcount" @click="getInit()">
+									<!--   -->
+									<!--<div class="icon icon-dot"></div>-->
+									<div class="icon-text animal-text">
+										<h6>9</h6>
+										<h5>总数</h5>
+									</div>
+								</div>
+							</div>
+							<div class="d-l-con-icon">
+								<div class="icon-con icon-animal-con" :class="{on:iconCurrentIndex1==item.type}"
+									v-for="(item,index) in animalDwfb" @click="selectForestAnimalListByType(item.type)">
+									<div class="iconfont icon icon-normal icon-animal">
+										<img :src="item.src">
+									</div>
+									<div class="icon-text icon-animal-text">
+										<h5>{{item.name}}</h5>
+									</div>
+								</div>
+							</div>
+						</div>
+					</dv-border-box-13>
+				</div>
+			</div>
+			<!-- 地图 -->
+			<supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'animalMap'"
+				: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="#040b1f" style="padding-bottom: 1rem;">
+						<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
+						<div class="this-title">
+							<span>事件分布</span>
+							<dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
+						</div>
+						<div class="i-list-con h-73">
+							<div class="d-l-con-icon">
+								<div class="h-19 overflow-y w100">
+									<div class="d-l-con" v-for="(item,index) in animalSjfb">
+										<div class="d-l-l-text">
+											<i class="i-small"></i>
+											<h4>{{item.deptName}}</h4>
+										</div>
+										<div class="d-l-l-count">{{item.count}}</div>
+									</div>
+								</div>
+							</div>
+							<div class="d-l-con">
+								<div id="animal-chart" style="width: 100%;height:26.2vh;"></div>
+							</div>
+							<div class="d-l-con d-evnet-list-con" :class="{on:listCurrentIndex1==index}"
+								v-for="(item,index) in animalSjlb"
+								@click="dropLocation(item.latitude,item.longitude,index)">
+								<img src="@/assets/images/visual/img-sample.png" class="event-list-img animal-img">
+								<div class="event-list-text">
+									<h3>{{item.eventTitle}}</h3>
+									<h4><span>摄像头</span><span>新上报</span><span>{{item.reportTime}}</span>
+									</h4>
+								</div>
+							</div>
+						</div>
+					</dv-border-box-13>
+				</div>
 
-          </div>
+			</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>
-
-      </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>
+		</div>
+		<eventLocation ref="eventLocation"></eventLocation>
+		<TVWall ref="TVWall"></TVWall>
+	</div>
 </template>
 
 <script>
-  import {
-    getInit,selectForestAnimalListByType
-  } from '@/api/animal'
+	import {
+		getInit,
+		selectForestAnimalListByType
+	} from '@/api/animal'
 
-  import supermap from '@/components/supermap' //超图
-  import vheader from '@/components/v-header.vue' //一体化共用头部
-  import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
-  import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
-  import TVWall from '@/components/TVWall.vue' //电视墙弹窗
+	import supermap from '@/components/supermap' //超图
+	import vheader from '@/components/v-header.vue' //一体化共用头部
+	import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
+	import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
+	import TVWall from '@/components/TVWall.vue' //电视墙弹窗
 
-  let echarts = require('echarts')
-  export default {
-    components: {
-      supermap,
-      vheader,
-      vBottomMenu,
-      eventLocation,
-      TVWall,
-    },
-    data() {
-      return {
-		animalcount:'',
-		iconCurrentIndex1:'',
-		listCurrentIndex1:'',
-        //左右缩进
-        indentStyle: '',
-        indentleft: '',
-        indentright: '',
-        indentText: '收起左右栏',
-        indentdisabled: false,
+	let echarts = require('echarts')
+	export default {
+		components: {
+			supermap,
+			vheader,
+			vBottomMenu,
+			eventLocation,
+			TVWall,
+		},
+		data() {
+			return {
+				animalcount: '',
+				iconCurrentIndex1: '',
+				listCurrentIndex1: '',
+				//左右缩进
+				indentStyle: '',
+				indentleft: '',
+				indentright: '',
+				indentText: '收起左右栏',
+				indentdisabled: false,
 
-        //虚拟数据
-        animalDwfb: [{
-          name: '虎',
-          src: require('../assets/images/dwbh/hu-1.png'),
-          type:'forest_animal_hu'
-        }, {
-          name: '豹',
-          src: require('../assets/images/dwbh/bao-1.png'),
-          type:'forest_animal_bao'
-        }, {
-          name: '蛇',
-          src: require('../assets/images/dwbh/she-1.png'),
-          type:'forest_animal_she'
-        }, {
-          name: '鹰',
-          src: require('../assets/images/dwbh/ying-1.png'),
-          type:'forest_animal_ying'
-        }, {
-          name: '兔',
-          src: require('../assets/images/dwbh/tuzi-1.png'),
-          type:'forest_animal_tu'
-        }, {
-          name: '狐狸',
-          src: require('../assets/images/dwbh/huli-1.png'),
-          type:'forest_animal_huli'
-        }, {
-          name: '狗熊',
-          src: require('../assets/images/dwbh/gouxiong-1.png'),
-          type:'forest_animal_gouxiong'
-        }, {
-          name: '野鸡',
-          src: require('../assets/images/dwbh/yeji-1.png'),
-          type:'forest_animal_yeji'
-        }, {
-          name: '狍子',
-          src: require('../assets/images/dwbh/paozi-1.png'),
-          type:'forest_animal_paozi'
-        }],
-        animalSjfb: [],
-        animalSjlb: [],
-        markersList:[],//点位列表
-      }
-    },
-    created() {
-      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-      window.showDialog=this.showDialog
-      window.choseLayerSwitching=this.choseLayerSwitching
-      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-    },
-    mounted() {
-      this.getInit()
-    },
-    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);
-      },
-      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-      dropLocation(lat,lng,index) {
-		this.listCurrentIndex1 = index
-        this.$refs.supermap.dropLocation(lat,lng)
-      },
-      //初始化
-      getInit() {
-		this.iconCurrentIndex1 = ''
-		this.animalcount = 'on'
-        let that = this
-        //获取左侧菜单列表
-        getInit().then(res => {
-          this.animalSjfb = res.data.visuForestAnimalBOList
-          this.animalSjlb = res.data.visuForestVgdEventBOList
+				//虚拟数据
+				animalDwfb: [{
+					name: '虎',
+					src: require('../assets/images/dwbh/hu-1.png'),
+					type: 'forest_animal_hu'
+				}, {
+					name: '豹',
+					src: require('../assets/images/dwbh/bao-1.png'),
+					type: 'forest_animal_bao'
+				}, {
+					name: '蛇',
+					src: require('../assets/images/dwbh/she-1.png'),
+					type: 'forest_animal_she'
+				}, {
+					name: '鹰',
+					src: require('../assets/images/dwbh/ying-1.png'),
+					type: 'forest_animal_ying'
+				}, {
+					name: '兔',
+					src: require('../assets/images/dwbh/tuzi-1.png'),
+					type: 'forest_animal_tu'
+				}, {
+					name: '狐狸',
+					src: require('../assets/images/dwbh/huli-1.png'),
+					type: 'forest_animal_huli'
+				}, {
+					name: '狗熊',
+					src: require('../assets/images/dwbh/gouxiong-1.png'),
+					type: 'forest_animal_gouxiong'
+				}, {
+					name: '野鸡',
+					src: require('../assets/images/dwbh/yeji-1.png'),
+					type: 'forest_animal_yeji'
+				}, {
+					name: '狍子',
+					src: require('../assets/images/dwbh/paozi-1.png'),
+					type: 'forest_animal_paozi'
+				}],
+				animalSjfb: [],
+				animalSjlb: [],
+				markersList: [], //点位列表
+			}
+		},
+		created() {
+			/** ----------------------------------底部按钮公用组件开始------------------------------------- */
+			window.showDialog = this.showDialog
+			window.choseLayerSwitching = this.choseLayerSwitching
+			/** ----------------------------------底部按钮公用组件结束------------------------------------- */
+		},
+		mounted() {
+			this.getInit()
+		},
+		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);
+			},
+			/** ----------------------------------底部按钮公用组件结束------------------------------------- */
+			dropLocation(lat, lng, index) {
+				this.listCurrentIndex1 = index
+				this.$refs.supermap.dropLocation(lat, lng)
+			},
+			//初始化
+			getInit() {
+				this.iconCurrentIndex1 = ''
+				this.animalcount = 'on'
+				let that = this
+				//获取左侧菜单列表
+				getInit().then(res => {
+					this.animalSjfb = res.data.visuForestAnimalBOList
+					this.animalSjlb = res.data.visuForestVgdEventBOList
 
-          that.markersList = [];
-          if (res.data.visuForestVgdEventBOList != null && res.data.visuForestVgdEventBOList.length > 0) {
-            for (let i = 0; i < res.data.visuForestVgdEventBOList.length; i++) {
-              let markersMap = {
-                lng: 124.59,
-                lat: 43.02,
-                icon: 'marker',
-                bindPopupHtml: '',
-                click: '',
-                parameter: '',
-                keepBindPopup: false,
-                isAggregation: false
-              }
-              if (res.data.visuForestVgdEventBOList.length > 50) {
-                markersMap.isAggregation = true
-              }
-              markersMap.lng = res.data.visuForestVgdEventBOList[i].longitude
-              markersMap.lat = res.data.visuForestVgdEventBOList[i].latitude
-              markersMap.bindPopupHtml = '<div class="map-tip">' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>经纬度：' + res.data.visuForestVgdEventBOList[i].longitude + ',' + res.data.visuForestVgdEventBOList[i]
-                  .latitude + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>事件名称：' + res.data.visuForestVgdEventBOList[i].eventTitle + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>事件时间：' + res.data.visuForestVgdEventBOList[i].reportTime + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '</div>';
-              that.markersList.push(markersMap)
-            }
-            setTimeout(() => {
-              that.$refs.supermap.clearM(false)
-              that.$refs.supermap.clearM(true)
-              that.$refs.supermap.setMarkers(that.markersList)
-            }, 1000)
-          }else{
-            setTimeout(() => {
-              that.$refs.supermap.clearM(false)
-              that.$refs.supermap.clearM(true)
-            }, 1000)
-          }
-        })
-      },
+					that.markersList = [];
+					if (res.data.visuForestVgdEventBOList != null && res.data.visuForestVgdEventBOList.length >
+						0) {
+						for (let i = 0; i < res.data.visuForestVgdEventBOList.length; i++) {
+							let markersMap = {
+								lng: 124.59,
+								lat: 43.02,
+								icon: 'marker',
+								bindPopupHtml: '',
+								click: '',
+								parameter: '',
+								keepBindPopup: false,
+								isAggregation: false
+							}
+							if (res.data.visuForestVgdEventBOList.length > 50) {
+								markersMap.isAggregation = true
+							}
+							markersMap.lng = res.data.visuForestVgdEventBOList[i].longitude
+							markersMap.lat = res.data.visuForestVgdEventBOList[i].latitude
+							markersMap.bindPopupHtml = '<div class="map-tip">' +
+								'<span>' +
+								'                  <div class="d-l-con">' +
+								'                  <div class="d-l-l-text">' +
+								'                  <h4>经纬度：' + res.data.visuForestVgdEventBOList[i].longitude +
+								',' + res.data.visuForestVgdEventBOList[i]
+								.latitude + '</h4>' +
+								'                </div>' +
+								'                </div>' +
+								'                </span>' +
+								'<span>' +
+								'                  <div class="d-l-con">' +
+								'                  <div class="d-l-l-text">' +
+								'                  <h4>事件名称：' + res.data.visuForestVgdEventBOList[i].eventTitle +
+								'</h4>' +
+								'                </div>' +
+								'                </div>' +
+								'                </span>' +
+								'<span>' +
+								'                  <div class="d-l-con">' +
+								'                  <div class="d-l-l-text">' +
+								'                  <h4>事件时间：' + res.data.visuForestVgdEventBOList[i].reportTime +
+								'</h4>' +
+								'                </div>' +
+								'                </div>' +
+								'                </span>' +
+								'</div>';
+							that.markersList.push(markersMap)
+						}
+						setTimeout(() => {
+							that.$refs.supermap.clearM(false)
+							that.$refs.supermap.clearM(true)
+							that.$refs.supermap.setMarkers(that.markersList)
+						}, 1000)
+					} else {
+						setTimeout(() => {
+							that.$refs.supermap.clearM(false)
+							that.$refs.supermap.clearM(true)
+						}, 1000)
+					}
+				})
+			},
 
-      selectForestAnimalListByType(type){
-		this.iconCurrentIndex1 = type
-		this.animalcount = ''
-        let that = this
-        //获取左侧菜单列表
-        selectForestAnimalListByType(type).then(res => {
-          console.log(res)
-          this.animalSjfb = res.data.visuForestAnimalBOList
-          this.animalSjlb = res.data.visuForestVgdEventBOList
-          that.markersList = [];
-          if (res.data.visuForestVgdEventBOList != null && res.data.visuForestVgdEventBOList.length > 0) {
-            for (let i = 0; i < res.data.visuForestVgdEventBOList.length; i++) {
-              let markersMap = {
-                lng: 124.59,
-                lat: 43.02,
-                icon: 'marker',
-                bindPopupHtml: '',
-                click: '',
-                parameter: '',
-                keepBindPopup: false,
-                isAggregation: false
-              }
-              if (res.data.visuForestVgdEventBOList.length > 50) {
-                markersMap.isAggregation = true
-              }
-              markersMap.lng = res.data.visuForestVgdEventBOList[i].longitude
-              markersMap.lat = res.data.visuForestVgdEventBOList[i].latitude
-              markersMap.bindPopupHtml = '<div class="map-tip">' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>经纬度：' + res.data.visuForestVgdEventBOList[i].longitude + ',' + res.data.visuForestVgdEventBOList[i]
-                  .latitude + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>事件名称：' + res.data.visuForestVgdEventBOList[i].eventTitle + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '<span>' +
-                '                  <div class="d-l-con">' +
-                '                  <div class="d-l-l-text">' +
-                '                  <h4>事件时间：' + res.data.visuForestVgdEventBOList[i].reportTime + '</h4>' +
-                '                </div>' +
-                '                </div>' +
-                '                </span>' +
-                '</div>';
-              that.markersList.push(markersMap)
-            }
-            setTimeout(() => {
-              that.$refs.supermap.clearM(false)
-              that.$refs.supermap.clearM(true)
-              that.$refs.supermap.setMarkers(that.markersList)
-            }, 1000)
-          }else{
-            setTimeout(() => {
-              that.$refs.supermap.clearM(false)
-              that.$refs.supermap.clearM(true)
-            }, 1000)
-          }
-        })
-      },
+			selectForestAnimalListByType(type) {
+				this.iconCurrentIndex1 = type
+				this.animalcount = ''
+				let that = this
+				//获取左侧菜单列表
+				selectForestAnimalListByType(type).then(res => {
+					console.log(res)
+					this.animalSjfb = res.data.visuForestAnimalBOList
+					this.animalSjlb = res.data.visuForestVgdEventBOList
+					that.markersList = [];
+					if (res.data.visuForestVgdEventBOList != null && res.data.visuForestVgdEventBOList.length >
+						0) {
+						for (let i = 0; i < res.data.visuForestVgdEventBOList.length; i++) {
+							let markersMap = {
+								lng: 124.59,
+								lat: 43.02,
+								icon: 'marker',
+								bindPopupHtml: '',
+								click: '',
+								parameter: '',
+								keepBindPopup: false,
+								isAggregation: false
+							}
+							if (res.data.visuForestVgdEventBOList.length > 50) {
+								markersMap.isAggregation = true
+							}
+							markersMap.lng = res.data.visuForestVgdEventBOList[i].longitude
+							markersMap.lat = res.data.visuForestVgdEventBOList[i].latitude
+							markersMap.bindPopupHtml = '<div class="map-tip">' +
+								'<span>' +
+								'                  <div class="d-l-con">' +
+								'                  <div class="d-l-l-text">' +
+								'                  <h4>经纬度：' + res.data.visuForestVgdEventBOList[i].longitude +
+								',' + res.data.visuForestVgdEventBOList[i]
+								.latitude + '</h4>' +
+								'                </div>' +
+								'                </div>' +
+								'                </span>' +
+								'<span>' +
+								'                  <div class="d-l-con">' +
+								'                  <div class="d-l-l-text">' +
+								'                  <h4>事件名称：' + res.data.visuForestVgdEventBOList[i].eventTitle +
+								'</h4>' +
+								'                </div>' +
+								'                </div>' +
+								'                </span>' +
+								'<span>' +
+								'                  <div class="d-l-con">' +
+								'                  <div class="d-l-l-text">' +
+								'                  <h4>事件时间：' + res.data.visuForestVgdEventBOList[i].reportTime +
+								'</h4>' +
+								'                </div>' +
+								'                </div>' +
+								'                </span>' +
+								'</div>';
+							that.markersList.push(markersMap)
+						}
+						setTimeout(() => {
+							that.$refs.supermap.clearM(false)
+							that.$refs.supermap.clearM(true)
+							that.$refs.supermap.setMarkers(that.markersList)
+						}, 1000)
+					} else {
+						setTimeout(() => {
+							that.$refs.supermap.clearM(false)
+							that.$refs.supermap.clearM(true)
+						}, 1000)
+					}
+				})
+			},
 
-      //事件chart
-      eventChart() {
-        // 基于准备好的dom，初始化echarts实例
-        let myChart = echarts.init(document.getElementById('animal-chart'))
-        myChart.setOption({
-          color: ['#2EACFF', '#FFA61C', '#2EC054', '#8C64D7'],
-          tooltip: {
-            trigger: 'item',
-            formatter: '{a} <br/>{b} : {c} ({d}%)'
-          },
-          toolbox: {
-            show: true
-          },
-          series: [{
-            name: '事件分类',
-            type: 'pie',
-            roseType: true,
-            radius: [30, 70],
-            label: {
-              show: true,
-              formatter: '{b}\n{c} '
-            },
-            data: this.eventChartData
-          }]
-        })
+			//事件chart
+			eventChart() {
+				// 基于准备好的dom，初始化echarts实例
+				let myChart = echarts.init(document.getElementById('animal-chart'))
+				myChart.setOption({
+					color: ['#2EACFF', '#FFA61C', '#2EC054', '#8C64D7'],
+					tooltip: {
+						trigger: 'item',
+						formatter: '{a} <br/>{b} : {c} ({d}%)'
+					},
+					toolbox: {
+						show: true
+					},
+					series: [{
+						name: '事件分类',
+						type: 'pie',
+						roseType: true,
+						radius: [30, 70],
+						label: {
+							show: true,
+							formatter: '{b}\n{c} '
+						},
+						data: this.eventChartData
+					}]
+				})
 
-      },
-      //吉祥物收起左右框
-      indent() {
-        let list = document.getElementsByClassName('el-tooltip__popper')
-        list[list.length - 1].style.display = 'none'
-        if (this.indentStyle == '') {
-          this.indentStyle = 'indent-style'
-          this.indentleft = 'indent-left'
-          this.indentright = 'indent-right'
-          this.indentText = '展开左右栏'
-        } else if (this.indentText == '展开左右栏') {
-          this.indentStyle = ''
-          this.indentleft = ''
-          this.indentright = ''
-          this.indentText = '收起左右栏'
-        }
-      }
-    }
+			},
+			//吉祥物收起左右框
+			indent() {
+				let list = document.getElementsByClassName('el-tooltip__popper')
+				list[list.length - 1].style.display = 'none'
+				if (this.indentStyle == '') {
+					this.indentStyle = 'indent-style'
+					this.indentleft = 'indent-left'
+					this.indentright = 'indent-right'
+					this.indentText = '展开左右栏'
+				} else if (this.indentText == '展开左右栏') {
+					this.indentStyle = ''
+					this.indentleft = ''
+					this.indentright = ''
+					this.indentText = '收起左右栏'
+				}
+			}
+		}
 
-  }
+	}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  @import '@/assets/styles/base.scss';
-  //动物保护
-  .icon-animal-con {
-    width: 100%;
-    display: block !important;
-  }
+	@import '@/assets/styles/base.scss';
 
-  .icon-animal {
-    display: block;
-    margin: 2px auto;
-    background: none !important;
-  }
+	//动物保护
+	.icon-animal-con {
+		width: 100%;
+		display: block !important;
+	}
 
-  .icon-animal-text {
-    display: block !important;
-    text-align: center !important;
-    padding: 0.5rem 0.5rem 0rem 0.5rem;
-  }
+	.icon-animal {
+		display: block;
+		margin: 2px auto;
+		background: none !important;
+	}
 
-  .animal-text {
-    background: #f5ad1b;
-    border: 0.2px solid rgba(19, 64, 64, 0.7);
-    height: 3.2rem;
-    width: 4rem;
-    text-align: center;
-    margin: 0px auto;
-    border-radius: 0.5rem;
-    color: #fff !important;
-  }
+	.icon-animal-text {
+		display: block !important;
+		text-align: center !important;
+		padding: 0.5rem 0.5rem 0rem 0.5rem;
+	}
 
-  .animal-text h6 {
-    color: #fff !important;
-  }
+	.animal-text {
+		background: #f5ad1b;
+		border: 0.2px solid rgba(19, 64, 64, 0.7);
+		height: 3.2rem;
+		width: 4rem;
+		text-align: center;
+		margin: 0px auto;
+		border-radius: 0.5rem;
+		color: #fff !important;
+	}
 
-  .w100 {
-    width: 100% !important;
-  }
+	.animal-text h6 {
+		color: #fff !important;
+	}
 
-  .animal-img {
-    height: 3rem !important;
-  }
+	.w100 {
+		width: 100% !important;
+	}
 
-  .w-6 {
-    width: 6rem !important;
-  }
+	.animal-img {
+		height: 3rem !important;
+	}
 
+	.w-6 {
+		width: 6rem !important;
+	}
 </style>