<template>
|
<div class="whiteContent Content">
|
<div class="mapArea">
|
<div class="title">设备地图</div>
|
|
<!-- 全屏按钮 -->
|
<img
|
class="zoomOut iconfont"
|
src="/images/equipmentManagement/全屏.png"
|
@click="toggleZoom('Full')"
|
v-if="!isFull"
|
/>
|
<!-- 取消全屏的按钮 -->
|
<img
|
class="zoomOut iconfont"
|
src="/images/equipmentManagement/退出全屏.png"
|
@click="toggleZoom('')"
|
v-else
|
/>
|
<!-- 普通地图 -->
|
<div id="map" v-if="!isFull"></div>
|
<!-- 全屏地图 -->
|
<div id="mapFull" v-else></div>
|
</div>
|
|
<FormList v-if="!isFull"></FormList>
|
</div>
|
</template>
|
|
<script>
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
import FormList from "@/views/equipmentManage/equipmentList/components/FormList";
|
|
import bus from "@/plugin/bus";
|
|
export default {
|
created() {
|
window._AMapSecurityConfig = {
|
securityJsCode: "768ab79bdc4075aa082bc070c53bb3c4",
|
};
|
},
|
mounted() {
|
this.initMap("");
|
bus.$on("refleshNode", (node) => {
|
this.nodes = node;
|
this.initNode();
|
});
|
},
|
beforeDestroy() {
|
bus.$off("refleshNode");
|
},
|
|
components: {
|
FormList, //表格
|
},
|
data() {
|
return {
|
map: null,
|
AMap: null,
|
nodes: [],
|
isShowCard: false,
|
isFull: false, //是否全屏
|
zoom: 4, //地图级别
|
center: [116.06157, 39.66157], //地图中心
|
activeNode: null, //选中的地图节点
|
geocoder: {},
|
myMaker: null,
|
};
|
},
|
|
methods: {
|
//初始化地图
|
initMap(status) {
|
AMapLoader.load({
|
key: "69cd7e958683e8462beab5c08e6bc21b", // 申请好的Web端开发者Key，首次调用 load 时必填
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
plugins: ["AMap.Geocoder", "AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
})
|
.then((AMap) => {
|
this.AMap = AMap;
|
this.map = new AMap.Map(`map${status}`, {
|
//设置地图容器id
|
zoom: this.zoom, //初始化地图级别
|
center: this.center, //初始化地图中心点位置
|
});
|
|
//初始化查询地理位置插件
|
AMap.plugin("AMap.Geocoder", () => {
|
this.geocoder = new AMap.Geocoder();
|
});
|
|
this.initNode();
|
})
|
.catch((e) => {
|
console.log(e);
|
});
|
},
|
//初始化节点
|
initNode() {
|
if (this.myMaker) {
|
this.myMaker.destroy();
|
}
|
this.nodes.filter((item, index) => {
|
//查询行政位置
|
this.geocoder.getAddress([item.lon, item.lat], (status, result) => {
|
// 节点坐标
|
let position = new this.AMap.LngLat(item.lon, item.lat);
|
// 节点地理位置
|
item.province = result.regeocode.addressComponent.province;
|
|
//信息框dom
|
let markerContent =
|
"" +
|
`<div class="nodeMarker" id="node${index}}">` +
|
'<img class="normal" src="/images/equipmentManagement/设备默认.png">' +
|
'<img class="selected" src="/images/equipmentManagement/设备选中.png">' +
|
`<div class="box"> <div class="name">${item.devName}</div> <div class="property">IP地址: <span class="data">${item.devIp}</span> </div> <div class="property">设备位置: <span class="data">${item.province}</span></div><div class="property">安装时间: <span class="data">${item.installTime}</span></div></div>`;
|
("</div>");
|
|
let marker = new this.AMap.Marker({
|
position: position,
|
// 将 html 传给 content
|
content: markerContent,
|
// 以 icon 的 [center bottom] 为原点
|
offset: new this.AMap.Pixel(-24, -24),
|
});
|
|
//给节点添加的监听
|
marker.on("click", () => {
|
this.activeNode = item;
|
this.isShowCard = true;
|
});
|
|
this.map.add(marker);
|
this.myMaker = marker;
|
});
|
});
|
},
|
//关闭设备详情弹层
|
closeCard() {
|
this.isShowCard = false;
|
},
|
//切换全屏地图
|
toggleZoom(status) {
|
//获取当前地图级别
|
this.zoom = this.map.getZoom();
|
//获取当前地图中心位置
|
let data = this.map.getCenter();
|
this.center = [data.lng, data.lat];
|
if (status) {
|
this.isFull = true;
|
} else {
|
this.isFull = false;
|
}
|
this.initMap(status);
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.whiteContent {
|
.mapArea {
|
position: relative;
|
box-sizing: border-box;
|
padding: 20px;
|
background-color: #fff;
|
margin: 24px;
|
}
|
|
.title {
|
padding-left: 10px;
|
margin-bottom: 10px;
|
font-weight: bold;
|
font-size: 16px;
|
border-left: 4px solid #0065ff;
|
}
|
|
#map,
|
#mapFull {
|
width: 100%;
|
height: 500px;
|
border-radius: 8px;
|
|
::v-deep .nodeMarker {
|
position: relative;
|
.selected {
|
display: none;
|
}
|
|
.box {
|
box-sizing: border-box;
|
display: none;
|
position: absolute;
|
padding: 20px;
|
top: 40px;
|
left: -100px;
|
width: 247px;
|
height: 160px;
|
background-color: rgba($color: #fff, $alpha: 0.8);
|
filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
|
|
.name {
|
margin-bottom: 14px;
|
font-weight: bold;
|
font-size: 16px;
|
}
|
|
.property {
|
margin-bottom: 12px;
|
font-size: 14px;
|
color: #999;
|
|
span {
|
margin-left: 5px;
|
color: #3d3d3d;
|
font-weight: 700;
|
}
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
|
&:hover {
|
.normal {
|
display: none;
|
}
|
|
.selected {
|
position: relative;
|
top: -16px;
|
left: -16px;
|
display: inline-block;
|
}
|
|
.box {
|
display: inline-block;
|
}
|
}
|
}
|
}
|
|
#mapFull {
|
height: 872px;
|
}
|
|
.zoomOut {
|
position: absolute;
|
z-index: 2;
|
top: 74px;
|
left: 40px;
|
width: 32px;
|
cursor: pointer;
|
}
|
}
|
</style>
|
