~kongdeqiang/tangshanDaPing.git

			@@ -1,13 +1,27 @@
			<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">
			<el-dropdown @command="uploadClick">
			<el-button class="uploadBtn" plain size="small">
			上传文件<i class="el-icon-arrow-down el-icon--right"></i>
			</el-button>
			<el-dropdown-menu slot="dropdown">
			<el-dropdown-item command="1">
			报警
			</el-dropdown-item>
			<el-dropdown-item command="0">状态值</el-dropdown-item>
			</el-dropdown-menu>
			</el-dropdown>
			</div>
			<div class="showIndex-wrap-inside">
			<div class="indexMoudleBlock-box">
			@@ -20,7 +34,7 @@
			<TimesLogs></TimesLogs>
			</div>
			</div>

			<uploadForm ref="uploadForm" v-if="uploadVisiable"></uploadForm>
			</div>
			</template>

			@@ -28,262 +42,169 @@
			import IndexMoudleBlock from "./IndexMoudleBlock";
			import TimesLogs from "./TimesLogs";
			import YunweiBlock from "./YunweiBlock";
			import uploadForm from "./upload/uploadForm";
			import {getMapData} from '@/api/daping'
			export default {
			name: "showIndex",
			components: {
			IndexMoudleBlock,
			YunweiBlock,
			TimesLogs
			TimesLogs,
			uploadForm
			},
			data() {
			return{
			center: { lng: 118.20, lat: 39.63},
			zoom: 6,
			mapObj:{},
			mapData:[],
			mapData2:[],
			uploadVisiable:false, //上传文件弹框
			timer:null,
			mapData:[],
			map:''
			}
			},
			destroyed() {
			clearInterval(this.timer)
			},
			mounted() {
			//this.getMapData()
			//this.initMap()
			this.$nextTick(() => {
			this.initMap()
			})


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

			},
			methods: {
			// initMap() {
			// let map = new BMapGL.Map('map_container')
			// map.centerAndZoom(new BMapGL.Point(118.183450598,39.6505309225),12)
			// let goodsData = require('../../../assets/js/custom_map_config2')
			// map.setMapStyleV2({
			// styleJson: goodsData
			// // styleId: '5f9b8a9639cf6e4ae8806379bedba141'
			// // style: 'bluish'
			// })
			// map.setTilt(0)
			// map.setHeading(0)
			// map.enableScrollWheelZoom(true) //开启缩放功能
			//
			// // //图层管理器（Api文档--图层管理器）
			// // var view = new mapvgl.View({
			// // map: map, //把生成的地图map传进来
			// // });
			// // //飞线图层的创建方式（Api文档--飞线图层）
			// // var layer = new mapvgl.LineRainbowLayer({
			// // // blend: 'lighter',
			// // // width: 12,
			// // //color: 'rgba(0, 96, 222, 1)',
			// // // lineJoin:'bevel'
			// // //style: 'road', // road, arrow, normal
			// // width: 10,
			// // //animation: true
			// //
			// // });
			// // var layer2 = new mapvgl.LineFlowLayer({
			// // // color: 'rgba(0, 255, 252, 1)',
			// // // width: 14,
			// // // animation: true,
			// // // duration: 1, // 循环时间2s
			// // // trailLength: 2, // 拖尾长度占间隔的0.4
			// // // interval: 0.1, // 粒子长度占线整体长度的0.2
			// // // //step:0.1,
			// // // startTime: 0,
			// // // endTime: 100,
			// // // color: 'rgba(255, 71, 26, 0.9)',
			// // // step: 0.1, // 动画的速度
			// // // width: 10,
			// // // animation: true,
			// // // startTime:0,
			// // // endTime:4,
			// // // duration: 1, // 循环时间2s
			// // // trailLength: 0.2, // 拖尾长度占间隔的0.4
			// // // interval: 0.1 // 粒子长度占线整体长度的0.2
			// // color: 'rgba(0, 255, 252, 1)',
			// // width: 6,
			// // animation: true,
			// // duration: 1.5, // 循环时间2s
			// // trailLength: 1, // 拖尾长度占间隔的0.4
			// // interval: 0.05, // 粒子长度占线整体长度的0.2
			// // step:0.02,
			// // startTime: 0,
			// // endTime: 100,
			// // });
			// // // let layer = new mapvgl.LineTripLayer({
			// // // color: 'rgba(255, 71, 26, 0.9)',
			// // // width: 16,
			// // // animation: true,
			// // // duration: 1, // 循环时间2s
			// // // trailLength: 20, // 拖尾长度占间隔的0.4
			// // // interval: 0.1 // 粒子长度占线整体长度的0.2
			// // // });
			// // view.addLayer(layer) //把图层添加到图层管理器重
			// // view.addLayer(layer2) //把图层添加到图层管理器重
			// // layer.setData(this.mapData2) //图层数据
			// // layer2.setData(this.mapData2) //图层数据
			// },

			// getMapData() {
			// this.mapData = []
			// this.mapData2 = []
			// let re2 = [
			// [
			// {
			// lng: 118.144674,
			// lat: 39.660641
			// },
			// {
			// lng: 118.229198,
			// lat: 39.763508
			// },
			// ],
			// [
			// {
			// lng: 118.180618,
			// lat: 39.753635
			// },
			// {
			// lng: 118.229198,
			// lat: 39.753635
			// },
			// ],
			// [
			// {
			// lng: 118.232887,
			// lat: 39.619857
			// },
			// {
			// lng: 118.208669,
			// lat: 39.596232
			// }
			// ],
			// [
			// {
			// lng: 118.240577,
			// lat: 39.661919
			// },
			// {
			// lng: 118.187038,
			// lat: 39.635918
			// }
			// ],
			// [
			// {
			// lng: 118.185321,
			// lat: 39.678277
			// },
			// {
			// lng: 118.217221,
			// lat: 39.677581
			// }
			// ],
			// [
			// {
			// lng: 118.184038,
			// lat: 39.631268
			// },
			// {
			// lng: 118.184042,
			// lat: 39.624384
			// }
			// ]
			// ]
			// let re = [
			// [118.184038,39.631268],
			// [118.184042,39.624384],
			//
			//
			// ]
			// let curve = new mapvgl.BezierCurve()
			// for(let i=0; i<re2.length; i++) {
			// //re[i].lng
			// curve.setOptions({
			// start:[re2[i][0].lng,re2[i][0].lat],
			// end:[re2[i][1].lng,re2[i][1].lat]
			// })
			// let cureData = curve.getPoints()
			// console.log(re2[i],'re[i]=====')
			// this.mapData2.push({
			// geometry: { //携带地理信息
			// type: 'LineString',
			// coordinates:cureData, //把贝塞尔曲线的数据放进来
			// }
			// })
			// }
			// console.log(this.mapData2,'mapData2===')
			// this.mapData.push({
			// geometry: { //携带地理信息
			// type: 'LineString',
			// coordinates:re, //把贝塞尔曲线的数据放进来
			// },
			// })
			// console.log(this.mapData,'mapData===')
			// }
			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('唐山') // 设置地图显示的城市此项是必须设置的
			initMap() {
			this.map = new window.BMap.Map("map");
			console.log(map,'map===')
			this.map.centerAndZoom(new BMap.Point(118.183450598,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
			this.$nextTick(() => {
			this.$refs.uploadForm.init(type)
			})
			},
			getMapData() {
			getMapData().then(res => {
			if(res.code == 0) {
			this.mapData = res.data
			this.addMarker()
			}
			})
			},
			// 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() {
			this.mapData = [
			{
			latitude: '118.20,39.63',
			},
			{
			latitude: '118.117511,39.625670',
			},
			{
			latitude: '118.114897,39.684427',
			},
			{
			latitude: '118.119517,39.655598',
			},
			{
			latitude: '118.116267,39.694433',
			},
			{
			latitude: '118.311267,39.694433',
			},
			{
			latitude: '118.211267,39.694433',
			},
			{
			latitude: '118.011267,39.674433',
			},
			{
			latitude: '118.011227,39.604433',
			}
			]
			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.145069,
			lat:39.662586,
			address: '河北省唐山市丰润区曹雪芹大街17号',
			health: '0'
			},{
			lon:118.45153,
			lat:39.74049,
			address: '河北省唐山市古冶区永盛路',
			health: '0'
			}]
			// 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 经度
			if(item.latitude != null && item.latitude != '') {
			let longitude = item.latitude.split(',')[0]
			let latitude = item.latitude.split(',')[1]
			let myIcon = new BMap.Icon(
			require("../../../assets/img/markerIcon.png"),
			new BMap.Size(35, 35),
			{ imageSize: new BMap.Size(35, 35),anchor : new BMap.Size(35, 35) })
			console.log(this.mapData,'this.mapData===')
			if(item.lon && item.lat) {
			let longitude = item.lon
			console.log(item.lon,'经纬----')
			console.log(item.lat,'经纬----')
			let latitude = item.lat
			let myIcon = ''
			if(item.health == 0) {
			myIcon = new BMap.Icon(
			require("../../../assets/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"),
			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(12)
			this.map.addOverlay(marker)
			this.map.setZoom(11)
			// 添加鼠标划入坐标点的显示内容
			let isH = ''
			if(item.health == 0) {
			isH = '正常'
			}else {
			isH = '异常'
			}
			let str = '<div style="padding:4px 10px;width:300px;max-width: 400px;display: flex;flex-direction: row;">'
			str += '<div>'
			str += '<h1 style="font-size: 13px;text-align: center;line-height: 2"> ' + item.subjectName + '</h1>'
			str += '<div style="display: flex;flex-direction: column">'
			str += '<div><h1 style="font-size: 12px;padding:2px 0;width: 100%;white-space:pre-wrap">案件描述：'+item.casePoint+'</h1></div>'
			str += '<div><h1 style="font-size: 12px;padding:2px 0;width: 100%;white-space:pre-wrap">通讯状态：'+isH+'</h1></div>'
			str += '<div><h1 style="font-size: 12px;padding:2px 0"">地址：'+item.address+'</h1></div>'
			str += '<div><h1 style="font-size: 12px;padding:2px 0">时间：'+item.time+'</h1></div>'
			str += '</div>'
			str += '</div>'
			let opts = {
			@@ -303,24 +224,41 @@
			// 默认不显示文本标注
			label.hide()
			// 在全景场景内添加覆盖物
			map.addOverlay(label);
			marker.addEventListener('mouseover', function () {
			//鼠标移入动画
			let divElement = document.createElement('div')
			divElement.className = 'before'
			let divElement2 = document.createElement('div')
			divElement2.className = 'after'
			marker.gd.innerHtml = marker.gd.childNodes[0]
			marker.gd.appendChild(divElement)
			marker.gd.appendChild(divElement2)
			marker.gd.className = ''
			marker.gd.className = 'mapBGFault'
			label.show()
			this.map.addOverlay(label);


			marker.addEventListener("click", (e)=> {
			let p = e.target;
			let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
			let infoWindow = new BMap.InfoWindow(str, {
			// width: 320, // 信息窗口宽度
			// height: 200, // 信息窗口高度
			// title: '监控信息', // 信息窗口标题ee
			enableMessage: false, //设置允许信息窗发送短息
			str,
			}); // 创建信息窗口对象
			this.map.openInfoWindow(infoWindow, point); //开启信息窗口
			})
			marker.addEventListener('mouseout', function () {
			marker.gd.className = ''
			label.hide()
			})

			// marker.addEventListener('mouseover', function () {
			// alert(marker)
			// 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()
			// })

			}
			})
			@@ -329,6 +267,22 @@
			}
			</script>

			<style lang="scss">
			.upload-box{
			.uploadBtn{
			background: linear-gradient(to right,#0e0e25,#092749);
			}
			.el-button.is-plain:focus, .el-button.is-plain:hover{
			background: transparent;
			}
			.el-button{
			border:1px solid #1ee3f3!important;
			span{
			color: #fff;
			}
			}
			}
			</style>
			<style lang="scss" scoped>

			.showIndex-wrap{
			@@ -336,6 +290,16 @@
			height: calc(100% - 0.4167rem /* 80/192 */);
			margin-top: 0.1042rem /* 20/192 */;
			position: relative;
			.upload-box{
			position: absolute;
			right: 0.1042rem /* 20/192 */;
			top: -0.09375rem /* -18/192 */;
			z-index: 999999999;
			}
			.showIndex-wrap-inside{
			width: 100%;
			height: 100%;
			}
			.indexMoudleBlock-box{
			position: absolute;
			left: 0.1823rem /* 35/192 */;
			@@ -362,6 +326,10 @@
			top: -0.4167rem /* -80/192 */;
			bottom: 0;
			right: 0;
			.map{
			width: 100%;
			height: 100%;
			}
			.map_container{
			width: 100%;
			height: 100%;