<template>
|
<el-container class="contribution_container">
|
<el-aside width="300px" style="background-color: #EEF1F6; overflow-y: hidden">
|
<slot name="industry" />
|
<slot name="regional" />
|
<el-card class="industry" style="position: absolute;left: 10px; bottom: 0px;height: calc(100% - 350px); background-color: #EEF1F6;">
|
<div class="industry_header">
|
<p style="margin: 0;display: inline-block; line-height: 49px; font-weight: 500; font-size: 16px">设备列表</p>
|
</div>
|
<el-scrollbar class="deviceInfo">
|
<span v-for="(item) in selectedDevice" :key="item.mac" class="deviceItem" @click="showDevice(item)">{{ item.name }}</span>
|
</el-scrollbar>
|
</el-card>
|
</el-aside>
|
<el-main style="padding: 0;height: 100%">
|
<div style="width: 100%; height: 100%; position: relative">
|
<slot name="industryMap" />
|
<slot name="regionalMap" />
|
<div id="container" />
|
</div>
|
</el-main>
|
</el-container>
|
</template>
|
|
<script>
|
import { bd09togcj02 } from '@/utils/transform'
|
|
export default {
|
props: {
|
selectedDevice: {
|
type: Array,
|
default: () => []
|
}
|
},
|
data() {
|
return {
|
map: null,
|
infoWindow: null,
|
markers: []
|
}
|
},
|
watch: {
|
selectedDevice: {
|
immediate: true,
|
handler(newV, oldV) {
|
this.$emit('sendData', { map: this.map, markers: this.markers, infoWindow: this.infoWindow })
|
}
|
}
|
},
|
created() {
|
},
|
mounted() {
|
this.$nextTick(() => {
|
this.initMap()
|
})
|
},
|
methods: {
|
// 初始化地图
|
initMap() {
|
var map = new AMap.Map('container', {
|
resizeEnable: true,
|
rotateEnable: true,
|
pitchEnable: true,
|
zoom: 14,
|
pitch: 80,
|
expandZoomRange: true,
|
zooms: [3, 20],
|
center: [120.9781494, 31.4265156]
|
})
|
this.map = map
|
this.map.on('click', () => {
|
if (this.infoWindow !== null) {
|
this.infoWindow.close()
|
}
|
})
|
},
|
// 点击设备跳转到中心点
|
showDevice(device) {
|
const latLng = bd09togcj02(Number(device.longitude), Number(device.latitude))
|
const lnglat = new AMap.LngLat(latLng[1], latLng[0])
|
this.map.setCenter([latLng[1], latLng[0]])
|
this.map.setZoom(20)
|
const professions = device.professions.map(profession => {
|
return profession.dataValue
|
})
|
const infoWindowContent =
|
`<div style="padding: 12px 0 2px 0;font-size: 14px">
|
<span style="">设备：</span><span style=""> ${device.name}</span><br/>
|
<span style="">行业：</span><span style=""> ${professions.join(',')}</span><br/>
|
<span style="">区域：</span><span style=""> ${device.town.townName}</span>
|
</div>`
|
|
const infoWindow = new AMap.InfoWindow({
|
position: lnglat,
|
offset: new AMap.Pixel(14, -30),
|
content: infoWindowContent
|
})
|
infoWindow.open(this.map, lnglat)
|
this.infoWindow = infoWindow
|
this.$emit('sendData', { map: this.map, markers: this.markers, infoWindow: this.infoWindow })
|
},
|
// 添加地图marker
|
addMarker(devices) {
|
this.markers = []
|
devices.forEach(device => {
|
const latLng = bd09togcj02(Number(device.longitude), Number(device.latitude))
|
const lnglat = new AMap.LngLat(latLng[1], latLng[0])
|
const marker = new AMap.Marker({
|
position: lnglat,
|
icon: require('@/assets/icon/ico1.png'),
|
extData: {
|
device: device
|
}
|
})
|
const professions = device.professions.map(profession => {
|
return profession.dataValue
|
})
|
const infoWindowContent =
|
`<div style="padding: 12px 0 2px 0;font-size: 14px">
|
<span style="">设备：</span><span style=""> ${device.name}</span><br/>
|
<span style="">行业：</span><span style=""> ${professions.join(',')}</span><br/>
|
<span style="">区域：</span><span style=""> ${device.town.townName}</span>
|
</div>`
|
|
const infoWindow = new AMap.InfoWindow({
|
position: lnglat,
|
offset: new AMap.Pixel(14, -30),
|
content: infoWindowContent
|
})
|
marker.on('click', () => {
|
infoWindow.open(this.map, marker.getPosition())
|
this.infoWindow = infoWindow
|
this.$emit('sendData', { map: this.map, markers: this.markers, infoWindow: this.infoWindow })
|
})
|
this.markers.push(marker)
|
})
|
this.map.add(this.markers)
|
},
|
// 过去国控设备并画五公里的圆在地图上
|
govMt() {
|
this.$request({
|
url: 'govMonitorPoint/getGovMonitorPointsByOrganizationId',
|
method: 'get',
|
params: {
|
organizationId: this.$store.state.orgId
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
if (res.data.length > 0) {
|
if (res.data.length > 0) {
|
res.data.forEach(govMt => {
|
const latLng = bd09togcj02(Number(govMt.longitude), Number(govMt.latitude))
|
const lnglat = new AMap.LngLat(latLng[1], latLng[0])
|
const govMarker = new AMap.Marker({
|
position: lnglat,
|
offset: new AMap.Pixel(-26, -24), // 设置偏移量
|
icon: require('@/assets/icon/gk.png')
|
})
|
const infoWindowContent =
|
`<div style="padding: 12px 0 2px 0;font-size: 14px">
|
<span style="">站点名：</span><span style=""> ${govMt.name}</span><br/>
|
</div>`
|
|
const infoWindow = new AMap.InfoWindow({
|
position: lnglat,
|
offset: new AMap.Pixel(-2, -16),
|
content: infoWindowContent
|
})
|
govMarker.on('click', () => {
|
infoWindow.open(this.map, govMarker.getPosition())
|
this.infoWindow = infoWindow
|
})
|
const circle = new AMap.Circle({
|
radiu: 5000,
|
center: lnglat,
|
strokeColor: 'red',
|
strokeWeight: 2,
|
strokeStyle: 'solid',
|
fillColor: '#fff',
|
fillOpacity: 0,
|
map: this.map
|
})
|
govMarker.setMap(this.map)
|
})
|
const latLng = bd09togcj02(Number(res.data[0].longitude), Number(res.data[0].latitude))
|
this.map.setCenter([latLng[1], latLng[0]])
|
}
|
}
|
}
|
})
|
}
|
},
|
beforeDestroy() {
|
this.map = null
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.contribution_container {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
#container {
|
width:100%;
|
height:100%;
|
resize:both;
|
z-index: 0
|
}
|
.industry {
|
color: #808080;
|
border: 1px solid rgba(214, 214, 214, 1);
|
width: 280px;
|
margin: 10px auto;
|
position: relative;
|
font-family: 微软雅黑;
|
.el-card__body {
|
padding: 0;
|
}
|
.industry_header {
|
margin: 0;
|
background-color: #F7F7F7;
|
width: 100%;
|
position: absolute;
|
padding-left: 10px;
|
height: 49px;
|
top: 0
|
}
|
.deviceInfo {
|
width: 100%;
|
height: calc(100% - 50px);
|
padding: 0;
|
margin: 0;
|
position: absolute;
|
top: 50px;
|
.deviceItem:hover {
|
background-color: #EDF6FE;
|
cursor: pointer;
|
}
|
.el-scrollbar__wrap {
|
overflow: auto;
|
}
|
span {
|
font-size: 14px;
|
display: inline-block;
|
padding: 0 10px 0 10px;
|
width: 100%;
|
height: 40px;
|
line-height: 40px;
|
background-color: #fff;
|
margin-bottom: -2px;
|
white-space:nowrap;
|
text-overflow:ellipsis;
|
overflow: hidden;
|
}
|
|
}
|
.checkboxs {
|
width: 100%;
|
height: calc(100% - 49px);
|
color: #808080;
|
padding-left: 10px;
|
position: absolute;
|
top: 52px;
|
.el-checkbox-group {
|
label {
|
float: left;
|
margin-right: 6px;
|
margin-bottom: 5px;
|
}
|
}
|
}
|
}
|
|
}
|
.contributionRateAnalysis {
|
display: inline-block;
|
position: absolute;
|
float: left;
|
width: 122px;
|
height: 30px;
|
text-align: center;
|
line-height: 30px;
|
border-radius: 4px;
|
top: 18px;
|
left: 18px;
|
font-size: 14px;
|
background-color: #409EFF;
|
color: #fff;
|
z-index: 2;
|
&:hover {
|
cursor: pointer;
|
}
|
}
|
</style>
|
