<template>
|
<div class="showIndex-wrap">
|
<div class="mapBox">
|
<!-- <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" ref="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="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 ref="IndexMoudleBlock"></IndexMoudleBlock>
|
</div>
|
<div class="yunwei-box">
|
<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">
|
<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>
|
</div>
|
</template>
|
|
<script>
|
import IndexMoudleBlock from "./IndexMoudleBlock";
|
import TimesLogs from "./TimesLogs";
|
import YunweiBlock from "./YunweiBlock";
|
import uploadForm from "./upload/uploadForm";
|
import {getMapData} from '@/api/daping'
|
import {animateShanFlash} from '@/utils/animateShanFlash'
|
export default {
|
name: "showIndex",
|
components: {
|
IndexMoudleBlock,
|
YunweiBlock,
|
TimesLogs,
|
uploadForm
|
},
|
data() {
|
return{
|
center: { lng: 118.20, lat: 39.63},
|
zoom: 6,
|
mapObj:{},
|
mapData2:[],
|
uploadVisiable:false, //上传文件弹框
|
timer:null,
|
mapData:[],
|
map:'',
|
zhankaiBtnIsShow:true
|
}
|
},
|
destroyed() {
|
clearInterval(this.timer)
|
},
|
mounted() {
|
//this.getMapData()
|
//this.initMap()
|
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
|
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() {
|
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.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(
|
'../../../../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(
|
'../../../../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})
|
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 += '<div style="display: flex;flex-direction: column">'
|
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>'
|
str += '</div>'
|
let opts = {
|
position: point,
|
offset: new BMap.Size(30,-30)
|
}
|
// 创建一个文本标注实例
|
let label = new BMap.Label(str,opts);
|
// 清除百度地图自带样式
|
label.setStyle({
|
border: 'none',
|
//backgroundColor: 'rgba(0,0,0,0.5)',
|
padding: '6px',
|
borderRadius:'4px',
|
boxShadow: '0 0 0 10px rgba(0,0,0,0)'
|
});
|
// 默认不显示文本标注
|
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()); //调整视野
|
|
}
|
|
});
|
|
}
|
})
|
}
|
}
|
}
|
</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:hover{
|
background: linear-gradient(to right, #0e0e25, #092749)!important;
|
}
|
.el-button{
|
border:1px solid #1ee3f3!important;
|
span{
|
color: #fff;
|
}
|
}
|
}
|
|
</style>
|
<style lang="scss" scoped>
|
|
.showIndex-wrap{
|
width: 100%;
|
height: calc(100% - 0.4167rem /* 80/192 */);
|
margin-top: 0.1042rem /* 20/192 */;
|
position: relative;
|
.upload-box{
|
position: absolute;
|
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;
|
width: 100%;
|
display: flex;
|
}
|
.yunwei-box{
|
position: absolute;
|
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: -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%;
|
position: absolute;
|
left: 0;
|
top: -0.4167rem /* -80/192 */;
|
bottom: 0;
|
right: 0;
|
.map{
|
width: 100%;
|
height: 100%;
|
}
|
.map_container{
|
width: 100%;
|
height: 100%;
|
}
|
.bm-view{
|
width: 100%;
|
height: 100%;
|
/*overflow: hidden;*/
|
}
|
}
|
}
|
</style>
|
