~kongdeqiang/tangshanDaPing.git

			@@ -1,15 +1,16 @@
			<template>
			<div class="showIndex-wrap">
			<div class="mapBox">
			<baidu-map
			:center="center"
			:zoom="zoom"
			class="bm-view"
			@ready="handler">
			</baidu-map>
			<!-- <baidu-map-->
			<!-- :center="center"-->
			<!-- :zoom="zoom"-->
			<!-- class="bm-view"-->
			<!-- @ready="handler">-->
			<!-- </baidu-map>-->
			<div class="map" id="map"></div>
			<!--<div class="map_container" id="map_container"></div>-->
			</div>
			<div class="upload-box">
			<div class="upload-box" ref="upload-box">
			<el-dropdown @command="uploadClick">
			<el-button class="uploadBtn" plain size="small">
			上传文件<i class="el-icon-arrow-down el-icon--right"></i>
			@@ -23,14 +24,31 @@
			</el-dropdown>
			</div>
			<div class="showIndex-wrap-inside">
			<div class="chouti-box left">
			<img @click="handlechouClickCLeft" src="../../../assets/img/zhankaiIcon.png" alt="">
			</div>
			<div class="chouti-box right">
			<img @click="handlechouClickCRight" src="../../../assets/img/zhankaiIcon2.png" alt="">
			</div>
			<div class="indexMoudleBlock-box">
			<IndexMoudleBlock></IndexMoudleBlock>
			<IndexMoudleBlock ref="IndexMoudleBlock"></IndexMoudleBlock>
			</div>
			<div class="yunwei-box">
			<YunweiBlock></YunweiBlock>
			<div class="yunwei-box-inside">
			<YunweiBlock ref="YunweiBlock"></YunweiBlock>
			<div class="chouti-box2 left">
			<img @click="handlechouClickSLeft" src="../../../assets/img/shouqiIcon.png" alt="">
			</div>
			</div>

			</div>
			<div class="rizhi-box">
			<TimesLogs></TimesLogs>
			<div class="yunwei-box-inside">
			<TimesLogs ref="TimesLogs"></TimesLogs>
			<div class="chouti-box2 right">
			<img @click="handlechouClickSRight" src="../../../assets/img/shouqiIcon2.png" alt="">
			</div>
			</div>
			</div>
			</div>
			<uploadForm ref="uploadForm" v-if="uploadVisiable"></uploadForm>
			@@ -43,6 +61,7 @@
			import YunweiBlock from "./YunweiBlock";
			import uploadForm from "./upload/uploadForm";
			import {getMapData} from '@/api/daping'
			import {animateShanFlash} from '@/utils/animateShanFlash'
			export default {
			name: "showIndex",
			components: {
			@@ -56,10 +75,12 @@
			center: { lng: 118.20, lat: 39.63},
			zoom: 6,
			mapObj:{},
			mapData:[],
			mapData2:[],
			uploadVisiable:false, //上传文件弹框
			timer:null
			timer:null,
			mapData:[],
			map:'',
			zhankaiBtnIsShow:true
			}
			},
			destroyed() {
			@@ -68,11 +89,136 @@
			mounted() {
			//this.getMapData()
			//this.initMap()
			this.timer = setInterval(() => {
			this.getMapData()
			},300000)
			this.$nextTick(() => {
			this.initMap()
			})


			// this.timer = setInterval(() => {
			// this.getMapData()
			// },300000)

			},
			methods: {
			handlechouClickCLeft() { //左出
			this.$nextTick(() => {
			this.$refs.IndexMoudleBlock.loading()
			const tl = this.gsap.timeline({defaults: {duration: 0.8}})
			tl.fromTo('.yunwei-box',{
			left: '-100%',
			},{
			left: '10px',
			//autoAlpha: 0,
			duration:1,
			// ease: 'power2.out',
			delay:0.5,
			ease:'back.out(1)',
			})
			tl.fromTo('.chouti-box.left',{
			opacity: 1
			},{
			opacity: 0,
			duration:0.5,
			},'<')
			})

			},
			handlechouClickSLeft() { //左收
			this.$nextTick(() => {
			this.$refs.IndexMoudleBlock.loading2()
			const tl = this.gsap.timeline({defaults: {duration: 0.8}})
			tl.fromTo('.yunwei-box',{
			left: '0',
			},{
			left: '-100%',
			//autoAlpha: 0,
			duration:1,
			// ease: 'power2.out',
			delay:0.5,
			ease:'back.out(1)',
			})
			tl.fromTo('.chouti-box.left',{
			left:'-100%',
			opacity:0
			},{
			left:'5px',
			opacity:1,
			duration:1,
			},'<')
			})
			},
			handlechouClickCRight() { //右出
			this.$nextTick(() => {
			//this.$refs.TimesLogs.loading()
			const tl = this.gsap.timeline({defaults: {duration: 0.8}})
			tl.fromTo('.rizhi-box',{
			right: '-100%',
			},{
			right: '0',
			//autoAlpha: 0,
			duration:1,
			// ease: 'power2.out',
			delay:0.5,
			ease:'back.out(1)',
			})
			tl.fromTo('.chouti-box.right',{
			opacity: 1
			},{
			opacity: 0,
			duration:0.5,
			},'<')
			tl.fromTo('.upload-box',{
			right: '-100%',
			},{
			right: '20px',
			duration:0.5,
			},'<')
			})

			},
			handlechouClickSRight() { //右收
			this.$nextTick(() => {
			// this.$refs.TimesLogs.loading2()
			const tl = this.gsap.timeline({defaults: {duration: 0.8}})
			tl.fromTo('.rizhi-box',{
			right: '0px',
			},{
			right: '-24%',
			//autoAlpha: 0,
			duration:1,
			// ease: 'power2.out',
			delay:0.5,
			ease:'back.out(1)',
			})
			tl.fromTo('.chouti-box.right',{
			opacity:0,
			right:'-100%',
			},{
			opacity:1,
			right:'5px',
			duration:1,
			},'<')
			tl.fromTo('.upload-box',{
			right: '20px',
			},{
			right: '-100%',
			duration:0.5,
			},'<')
			})
			},
			initMap() {
			this.map = new window.BMap.Map("map",{
			minZoom : 2,
			maxZoom : 11
			});
			this.map.centerAndZoom(new BMap.Point(118.583450598,39.6505309225), 11)
			//map.enableScrollWheelZoom(true) //鼠标滚动缩放
			this.map.setCurrentCity('唐山') // 设置地图显示的城市此项是必须设置的
			this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
			//this.getMapData()
			this.addMarker()

			},
			uploadClick(type) {
			console.log(type,'type===')
			this.uploadVisiable = true
			@@ -88,28 +234,71 @@
			}
			})
			},
			handler({BMap, map}) {
			this.mapObj = {BMap, map}
			let goodsData = require('../../../assets/js/custom_map_config2')
			let point = new BMap.Point(118.183450598,39.6505309225)
			map.centerAndZoom(point, 15)
			map.enableScrollWheelZoom(true) //鼠标滚动缩放
			map.setMapStyleV2({
			styleJson: goodsData
			// styleId: '5f9b8a9639cf6e4ae8806379bedba141'
			// style: 'bluish'
			})
			map.setCurrentCity('唐山') // 设置地图显示的城市此项是必须设置的
			this.getMapData()

			},
			// handler({BMap, map}) {
			// this.mapObj = {BMap, map}
			// //let goodsData = require('../../../assets/js/custom_map_config2')
			// let point = new BMap.Point(118.183450598,39.6505309225)
			// map.centerAndZoom(point, 11)
			// map.enableScrollWheelZoom(true) //鼠标滚动缩放
			// // map.setMapStyleV2({
			// // styleJson: goodsData
			// // // styleId: '5f9b8a9639cf6e4ae8806379bedba141'
			// // // style: 'bluish'
			// // })
			// map.setCurrentCity('唐山') // 设置地图显示的城市此项是必须设置的
			// this.getMapData()
			//
			// },

			addMarker() {
			let BMap = this.mapObj.BMap
			let map = this.mapObj.map
			let BMap = window.BMap
			this.map.clearOverlays() // 清除地图上所有覆盖物
			//let map = new window.BMap.Map("map");
			let mapMarkers = []
			this.mapData = [{
			lon:118.167201,
			lat:39.60944,
			address: '河北省唐山市开平区东西大街199号',
			health: '0'
			},{
			lon:118.15782,
			lat:39.63102,
			address: '河北省唐山市路南区新华西道76号4层',
			health: '0'
			},{
			lon:118.09289,
			lat:39.58163,
			address: '河北省唐山市丰南区正苑大街7号',
			health: '0'
			},{
			lon:118.45153,
			lat:39.74049,
			address: '河北省唐山市古冶区永盛路',
			health: '1'
			},{
			lon:118.45153,
			lat:39.74049,
			address: '河北省唐山市古冶区永盛路',
			health: '1'
			}]
			// this.mapData.forEach(item => {
			// let marker = new BMap.Marker(item.lon,item.lat)
			// mapMarkers.push(marker)
			// this.mapObj.map.addOverlay(marker)
			// })
			// let markerClusterer = new BMapLib.MarkerClusterer(this.mapObj.map, {
			// markers: mapMarkers,
			// styles: [
			// {
			// url: "./static/img/markerIcon3",
			// size: new BMap.Size(35, 35),
			// },
			// ],
			// })
			// markerClusterer.setMinClusterSize(2)
			this.mapData.forEach(item => { //lng 经度 lat 经度
			console.log(this.mapData,'this.mapData===')
			if(item.lat && item.lat) {
			if(item.lon && item.lat) {
			let longitude = item.lon
			console.log(item.lon,'经纬----')
			console.log(item.lat,'经纬----')
			@@ -117,20 +306,20 @@
			let myIcon = ''
			if(item.health == 0) {
			myIcon = new BMap.Icon(
			require("../../../assets/img/markerIcon3.png"),
			'../../../../static/img/markerIcon3.png',
			new BMap.Size(35, 35),
			{ imageSize: new BMap.Size(35, 35),anchor : new BMap.Size(35, 35) })
			}else {
			myIcon = new BMap.Icon(
			require("../../../assets/img/markerIcon2.png"),
			'../../../../static/img/markerIcon2.png',
			new BMap.Size(35, 35),
			{ imageSize: new BMap.Size(35, 35),anchor : new BMap.Size(35, 35) })
			}

			let point = new BMap.Point(longitude,latitude)
			let marker = new BMap.Marker(point,{icon:myIcon})
			map.addOverlay(marker)
			map.setZoom(13)
			this.map.addOverlay(marker)
			this.map.setZoom(11)
			// 添加鼠标划入坐标点的显示内容
			let isH = ''
			if(item.health == 0) {
			@@ -162,25 +351,48 @@
			// 默认不显示文本标注
			label.hide()
			// 在全景场景内添加覆盖物
			map.addOverlay(label);
			marker.addEventListener('mouseover', function () {
			console.log(marker,'marker==')
			//鼠标移入动画
			let divElement = document.createElement('div')
			divElement.className = 'before'
			let divElement2 = document.createElement('div')
			divElement2.className = 'after'
			marker.hd.innerHtml = marker.hd.childNodes[0]
			marker.hd.appendChild(divElement)
			marker.hd.appendChild(divElement2)
			marker.hd.className = ''
			marker.hd.className = 'mapBGFault'
			label.show()
			})
			marker.addEventListener('mouseout', function () {
			marker.hd.className = ''
			label.hide()
			})
			this.map.addOverlay(label);


			this.map.addEventListener('tilesloaded',function () {
			// marker.domElement.className = marker.domElement.className + 'mapBGAnimate'
			// console.log(marker.domElement.className,'marker====')
			if(item.health == 1) {
			let divElement = document.createElement('div')
			divElement.className = 'before'
			let divElement2 = document.createElement('div')
			divElement2.className = 'after'
			//marker.ad.innerHTML = marker.ad.childNodes[0]
			marker.ad.appendChild(divElement)
			marker.ad.appendChild(divElement2)
			marker.ad.firstChild.style.position = 'relative'
			marker.ad.firstChild.style.zIndex = '5';
			}
			marker.ad.style.overflow = ''
			marker.ad.className = ''
			marker.ad.className = 'mapBGAnimate'
			})

			let bdary = new BMap.Boundary();
			console.log(bdary,'======================bdary=================')

			bdary.get('唐山市路北区', (rs) => { //获取行政区域
			alert(111)
			console.log(re,'re=================')
			//这里是用户自己的函数。
			this.map.clearOverlays(); //清除地图覆盖物
			var count = rs.boundaries.length; //行政区域的点有多少个

			for(var i = 0; i < count; i++){

			var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物

			this.map.addOverlay(ply); //添加覆盖物
			this.map.setViewport(ply.getPath()); //调整视野

			}

			});

			}
			})
			@@ -189,13 +401,66 @@
			}
			</script>


			<style lang="scss">
			.mapBGAnimate{
			position: relative;
			img{
			animation: huxi 2s infinite;
			transform-origin: center;
			filter:drop-shadow(0px 4px 2px rgba(0,0,0,0.3));
			}
			}
			@keyframes huxi {
			0%{
			transform: translateY(0);
			}
			50%{
			transform: translateY(-10px);
			}
			100%{
			transform: translateY(0);
			}
			}
			.mapBGAnimate .before{
			content: '';
			position: absolute;
			left: -2px;
			top:15px;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: rgba(255,0,6,0.5);
			transform: scale(0);
			animation: myfirst 2s;
			animation-iteration-count: infinite;
			z-index: 4;
			}
			.mapBGAnimate .after{
			content: '';
			position: absolute;
			left: -2px;
			top:15px;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: rgba(255,0,6,0.4);
			transform: scale(0);
			animation: myfirst 2s infinite 0.3s;
			z-index: 4;
			}
			@keyframes myfirst {
			to{
			background: rgba(0,0,0,0);
			transform: scale(2);
			}
			}
			.upload-box{
			.uploadBtn{
			background: linear-gradient(to right,#0e0e25,#092749);
			}
			.el-button.is-plain:focus, .el-button.is-plain:hover{
			background: transparent;
			.el-button.is-plain:hover{
			background: linear-gradient(to right, #0e0e25, #092749)!important;
			}
			.el-button{
			border:1px solid #1ee3f3!important;
			@@ -204,6 +469,7 @@
			}
			}
			}

			</style>
			<style lang="scss" scoped>

			@@ -214,32 +480,88 @@
			position: relative;
			.upload-box{
			position: absolute;
			right: 0.1042rem /* 20/192 */;
			right: -100%;
			top: -0.09375rem /* -18/192 */;
			z-index: 999999999;
			}
			.showIndex-wrap-inside{
			width: 100%;
			height: 100%;
			.chouti-box{
			width: 0.1771rem /* 34/192 */;
			height: 0.4896rem /* 94/192 */;
			cursor: pointer;
			z-index: 9999;
			img{
			width: 100%;
			height: 100%;
			}
			&.left{
			position: absolute;
			left: 10px;
			top: 20%;
			}
			&.right{
			position: absolute;
			right: 10px;
			top: 20%;
			}
			}
			}
			.indexMoudleBlock-box{
			position: absolute;
			left: 0.1823rem /* 35/192 */;
			top: 0;
			//position: absolute;
			//left: 0.1823rem /* 35/192 */;
			//top: 0;
			width: 100%;
			display: flex;
			}
			.yunwei-box{
			position: absolute;
			left: 0.1823rem /* 35/192 */;
			left:-100%;
			top: 0.9375rem /* 180/192 */;
			height: calc(100% - 0.9896rem /* 190/192 */);
			max-height: 4.078125rem /* 783/192 */;
			.yunwei-box-inside{
			position: relative;
			.chouti-box2{
			width: 0.1771rem /* 34/192 */;
			height: 0.4896rem /* 94/192 */;
			cursor: pointer;
			&.left{
			position: absolute;
			right: -0.2083rem /* -40/192 */;
			top: 0.1042rem /* 20/192 */;
			}
			img{
			width: 100%;
			height: 100%;
			}
			}
			}
			}
			.rizhi-box{
			position: absolute;
			right: 0.15625rem /* 30/192 */;
			right: -100%;
			top:0.9375rem /* 180/192 */;
			height: calc(100% - 0.9896rem /* 190/192 */);
			max-height: 4.078125rem /* 783/192 */;
			.yunwei-box-inside{
			position: relative;
			.chouti-box2{
			width: 0.1771rem /* 34/192 */;
			height: 0.4896rem /* 94/192 */;
			cursor: pointer;
			&.right{
			position: absolute;
			left:-0.15625rem /* -30/192 */;
			top: 0.1042rem /* 20/192 */;
			}
			img{
			width: 100%;
			height: 100%;
			}
			}
			}
			}
			.mapBox{
			width: 100%;
			@@ -248,6 +570,10 @@
			top: -0.4167rem /* -80/192 */;
			bottom: 0;
			right: 0;
			.map{
			width: 100%;
			height: 100%;
			}
			.map_container{
			width: 100%;
			height: 100%;