<!--
* @Description: 环监设备图层
* @Author: 王晓颖
* @Date: 2021-08-09 15:27:40
-->
<template>
</template>
<script>
import { getDeviceList } from '@/api/environment/device'
import Leaflet from 'leaflet'
import commonMixin from '@/components/mapWindow/base/mixins/common.js'
export default {
name: "deviceLayer",
mixins: [commonMixin('layer')],
props: {
show: {
type: Boolean,
default: true
}, // 是否显示
iconSize: {
type: Array,
default: () => {
return [30, 30]
}
}, // 图标大小
iconAnchor: {
type: Array,
default: () => {
return [-15, 15]
}
}, // 图标位移
popupAnchor: {
type: Array,
default: () => {
return [30, 0]
}
}, // 弹窗位移
refreshTime: {
type: Number,
default: 60
} // 定时刷新时间
},
data(){
return {
deviceOnlineList: [],
deviceOfflineList: [],
deviceOnlineLayer: null, // 在线设备图层
deviceOfflineLayer: null, // 离线设备图层
layerGroup: [], // 图层组
deviceOnlineIcon: require('@/assets/map/device-online.png'),
deviceOfflineIcon: require('@/assets/map/device-offline.png'),
}
},
methods:{
load () {
console.log('load caseLayer')
if (this.show) {
this.initLayer()
}
},
// 初始化图层
initLayer () {
const {map} = this
// 初始化图层组
/* eslint-disable new-cap */
this.layerGroup = []
this.deviceOnlineLayer = new Leaflet.layerGroup().addTo(map)
this.deviceOfflineLayer = new Leaflet.layerGroup().addTo(map)
this.layerGroup.push(this.deviceOnlineLayer)
this.layerGroup.push(this.deviceOfflineLayer)
console.log('initLayer')
this.loadData()
},
// 加载数据
loadData(){
getDeviceList(this.listQuery).then(response => {
this.list = response.data
this.deviceOnlineList = this.list.filter(item=>item.online=='1')
this.deviceOfflineList = this.list.filter(item=>item.online=='2')
this.addPointOnMap(this.deviceOnlineList,this.deviceOnlineLayer,this.deviceOnlineIcon)
this.addPointOnMap(this.deviceOfflineList,this.deviceOfflineLayer,this.deviceOfflineIcon)
})
// this.list = [
// {id:"1", deviceNo:"2021030803100001", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.75962, lng:116.06021, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
// {id:"2", deviceNo:"2021030803100002", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
// {id:"3", deviceNo:"2021030803100003", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
// {id:"4", deviceNo:"2021030803100004", deviceName:"王泥岭", area:'崇仁县', online:'1', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
// {id:"5", deviceNo:"2021030803100005", deviceName:"王泥岭", area:'崇仁县', online:'2', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"},
// {id:"6", deviceNo:"2021030803100006", deviceName:"王泥岭", area:'崇仁县', online:'2', deptName:"城管局", areaCode:'361024', lat:27.77740600, lng:116.05673800, notes:"无", position:"王泥岭", ts:"2021-01-12", deptid:'24', installDate:"2021-07-01"}
// ]
},
// 将点加到地图上
addPointOnMap: function (list, layer, iconType) {
const {iconSize, iconAnchor, popupAnchor} = this
layer.clearLayers()
// 图标
const icon = Leaflet.icon({
iconUrl: iconType,
iconSize: iconSize,
iconAnchor: iconAnchor,
popupAnchor: popupAnchor
})
list.forEach(detail => {
// let popupStr = '<div class="popup-div">' +
// '<div class="popup-title">站点详细信息</div>' +
// '<div class="dashed-line"></div>' +
// '<div class="popup-item"><label>点位名称</label>' + detail.deviceName + '</div>' +
// '<div class="popup-item"><label>设备编号</label>' + detail.deviceNo + '</div>' +
// '<div class="popup-item"><label>详细地址</label>' + detail.position + '</div>' +
// '<div class="popup-item"><label>权属单位</label>' + detail.deptName + '</div>' +
// '<div class="popup-item"><label>在线状态</label>' + (detail.online==='1'?'在线':'离线') + '</div>'
// popupStr += '</div>'
// const popup = Leaflet.popup().setContent(popupStr)
if (detail.lng > 0 && detail.lat > 0) {
// 添加marker
const marker = Leaflet.marker([detail.lat, detail.lng],
{ icon: icon,
id:detail.id,
deviceNo: detail.deviceNo,
detail: detail,
zIndexOffset: 100000
}).addTo(layer)
marker.on('click', e => {
// 获取数据详情
if (e.target.dragging._marker._popup) {
e.target.dragging._marker.unbindPopup()
}
var id = e.target.options.id
setTimeout(()=>{
const data = {pm25: '23.40', pm10: '25.80', tsp: '0.00', noise: '3.40', windPower: '0.40', windDirection: '7.40', temperature: '22.50', humidity: '80.50', windSpeed: '2.50', pressure: '122.50', ts: '2021-05-07 11:15'}
let popupStr = '<div class="popup-div">' +
'<div class="popup-title">站点详细信息</div>' +
'<div class="dashed-line"></div>' +
'<div class="popup-item"><label>点位名称</label>' + detail.deviceName + '</div>' +
'<div class="popup-item"><label>设备编号</label>' + detail.deviceNo + '</div>' +
'<div class="popup-item"><label>详细地址</label>' + detail.position + '</div>' +
'<div class="popup-item"><label>权属单位</label>' + detail.deptName + '</div>' +
'<div class="popup-item"><label>在线状态</label>' + (detail.online==='1'?'在线':'离线') + '</div>'+
'<div class="popup-item"><label>更新时间</label>' + data.ts + '</div>'+
'<div class="data-div">'+
'<div class="data-item"><span class="sp1">pm2.5</span><span class="sp2">' + data.pm25 + '</span><span class="sp3">ug/m³</span></div>'+
'<div class="data-item"><span class="sp1">pm10</span><span class="sp2">' + data.pm10 + '</span><span class="sp3">ug/m³</span></div>'+
'<div class="data-item"><span class="sp1">TSP</span><span class="sp2">' + data.tsp + '</span><span class="sp3">ug/m³</span></div>'+
'<div class="data-item"><span class="sp1">噪声</span><span class="sp2">' + data.noise + '</span><span class="sp3">db</span></div>'+
'<div class="data-item"><span class="sp1">风速</span><span class="sp2">' + data.windSpeed + '</span><span class="sp3">m/s</span></div>'+
'<div class="data-item"><span class="sp1">风力</span><span class="sp2">' + data.windPower + '</span><span class="sp3">级</span></div>'+
'<div class="data-item"><span class="sp1">风向</span><span class="sp2">' + data.windDirection + '</span><span class="sp3">°</span></div>'+
'<div class="data-item"><span class="sp1">温度</span><span class="sp2">' + data.temperature + '</span><span class="sp3">℃</span></div>'+
'<div class="data-item"><span class="sp1">湿度</span><span class="sp2">' + data.humidity + '</span><span class="sp3">%RH</span></div>'+
'<div class="data-item"><span class="sp1">气压</span><span class="sp2">' + data.pressure + '</span><span class="sp3">kpa</span></div>'
popupStr += '</div></div>'
var popup = L.popup().setContent(popupStr)
e.target.dragging._marker.bindPopup(popup, { minWidth: 330 }).openPopup()
},1000)
// console.log(detail.carId)
// document.getElementById('btntrail_' + detail.carId).onclick = () => {
// // this.trail(e.sourceTarget.options.slug.carId, e.sourceTarget.options.slug)
// this.trail(e.sourceTarget.options.slug.carId, carType)
// }
})
}
})
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" >
.data-div{
display:flex;
align-items: flex-start;
flex-wrap: wrap;
.data-item{
width:30%;
margin:5px;
padding:5px;
border: 1px solid #e4e7ed;
background-color: #e4e7ed;
border-radius: 5px;
.sp1{
display: block;
color:#606266;
font-size: 12px;
text-align: left;
line-height: 1.1;
}
.sp2{
display: block;
font-size: 16px;
color: #67c23a;
font-weight: bolder;
text-align: center;
line-height: 1.3;
}
.sp3{
display: block;
font-size: 12px;
text-align: right;
line-height: 1.1;
}
}
}
</style>
