<template>
|
<div class="height100 pr overflow-hidden">
|
<div :id="newMapId" class="height100"></div>
|
</div>
|
</template>
|
|
<script>
|
/* eslint-disable */
|
let settingMapHtml = `<div class="pl10 pt20 pr10 pb20">
|
<h3 class="pl30 pb20">区域信息</h3>
|
<div class="el-form settingMap-text" >
|
<div class="el-form-item">
|
<label class="el-form-item__label" style="width: 100px;">区域名称 ：</label>
|
<div class="el-form-item__content" style="margin-left: 100px;">
|
<div class="el-input">
|
<input id="settingMapName" autocomplete="off" type="text" rows="2" class="el-input__inner">
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="pt20 pb20 text-center">
|
<button type="button" id="settingMapInfoBtn" class="el-button el-button--primary pl30 pr30">
|
<span>立即创建</span>
|
</button>
|
</div>
|
</div>`
|
import { findInArrJson } from '@/components/common/util.js'
|
import { getSchoolInfo } from '@/server/home.js'
|
import { getDistrictAllSchoolById } from '@/server/common.js'
|
export default {
|
props: [
|
'newId', //自定义id 页面多次使用会用到
|
'defaultMapZoom', //自定义地图初始层级
|
|
'searchArr',
|
|
'isCamerasBackfn', //是否显示摄像机。摄像机回调函数
|
'panToVal', //自动定位 ｛lng:"val",lat:"val"｝
|
'alarmInfoData', //报警信息数据 需要自处里，具体看home.vue
|
'activeDeviceIds', //传入选中设备ids 设置高亮
|
'removeActiveAlarmInfo', //删除选中状态 字符串时间戳
|
|
'modelUpdate',
|
'addressStr', //地址名称
|
'showSeachModel' //是否启动搜索功能
|
],
|
data() {
|
return {
|
userInfo: this.$store.getters.basicUserInfo,
|
countNum: null,
|
|
bMapObj: {},
|
areaData: [],
|
deviceList: [],
|
|
alarmInfoListActive: '',
|
deviceTypeList: [],
|
|
cameraMarkers: [],
|
cameraDensitys: [],
|
cameraAreas: [],
|
textInfoWindow: {},
|
}
|
},
|
computed: {
|
newMapId() {
|
return this.newId && this.newId !== '' ? this.newId : 'mapDynamics'
|
},
|
newDefaultMapZoom() {
|
return this.defaultMapZoom && this.defaultMapZoom !== ''
|
? this.defaultMapZoom
|
: 12
|
},
|
newAlarmInfoList() {
|
return this.alarmInfoData
|
}
|
},
|
methods: {
|
/* 查询地图数据 */
|
async getMapSchoolList() {
|
let res = await getDistrictAllSchoolById({
|
currentId: this.userInfo.orgId
|
})
|
if (res && res.data) {
|
this.deviceList = res.data
|
}
|
},
|
/* 查询学校详情 */
|
async getSchoolInfoData(id) {
|
let res = await getSchoolInfo({ id })
|
if (res) {
|
this.countNum = res
|
}
|
},
|
|
/* 地图初始化 */
|
bmapinit() {
|
/*地图init*/
|
this.bMapObj = new BMap.Map(this.newMapId, {
|
enableMapClick: false,
|
minZoom: 14
|
})
|
let point = new BMap.Point(116.331398, 39.897445) //初始化位置(116.331398,39.897445);
|
this.bMapObj.centerAndZoom(point, this.newDefaultMapZoom)
|
// this.bMapObj.setMapStyle({ style: 'midnight' }); //设置主题
|
let bottom_right_navigation = new BMap.NavigationControl({
|
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
|
type: BMAP_NAVIGATION_CONTROL_ZOOM
|
}) //右上角，仅包含平移和缩放按钮
|
this.bMapObj.addControl(bottom_right_navigation) //添加控件
|
this.bMapObj.addControl(new BMap.MapTypeControl()) //this.bMapObj.
|
this.bMapObj.disable3DBuilding()
|
/*缩放控件type有四种类型:
|
BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；
|
BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；
|
BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
|
this.bMapObj.enableScrollWheelZoom() //启用滚轮放大缩小
|
|
//创建全局弹窗
|
this.textInfoWindow = new BMap.InfoWindow('', {
|
width: 450,
|
height: 250,
|
offset: new BMap.Size(0, -10)
|
})
|
},
|
/*城市ip定位*/
|
bmaSetCenterByIp() {
|
const myCity = new BMap.LocalCity()
|
myCity.get(result => {
|
var cityName = result.name
|
this.bMapObj.setCenter(cityName)
|
})
|
},
|
bmapPto(lng, lat) {
|
if (lng && lat) {
|
this.bMapObj.panTo(new BMap.Point(lng, lat))
|
}
|
},
|
bmapPtoAuto(val) {
|
for (let iteam of this.deviceList) {
|
if (iteam.area_id === val) {
|
this.bmapPto(iteam.lng, iteam.lat)
|
return false
|
}
|
}
|
},
|
creatMarkInfoWindow(arr) {
|
if (!arr || arr.length < 2) {
|
return false
|
}
|
let htmlStr = settingMapHtml || ''
|
let marker = new BMap.Marker(new BMap.Point(arr[0], arr[1]))
|
this.bMapObj.addOverlay(marker)
|
//弹窗
|
let textInfoWindow = new BMap.InfoWindow('', {
|
width: 400,
|
height: 200,
|
offset: new BMap.Size(0, 20)
|
})
|
textInfoWindow.setContent(htmlStr)
|
|
let _this = this
|
|
const opentextInfoWindow = () => {
|
marker.openInfoWindow(textInfoWindow)
|
|
// document.querySelector( `#${this.newMapId} #settingMapInfoBtn`).onclick=()=>{
|
// let mapName = document.querySelector( `#${this.newMapId} #settingMapName`).value;
|
// _this.settingMapInfo.name = mapName;
|
// if(mapName!==''){
|
// //创建方法
|
// this.addArea(_this.settingMapInfo);
|
// }else{
|
// this.$message({message: '区域名称还没有填写！',type: 'error'});
|
// }
|
// };
|
}
|
setTimeout(() => {
|
opentextInfoWindow()
|
}, 100)
|
marker.addEventListener('click', opentextInfoWindow)
|
return marker
|
},
|
/* 设备marker渲染 */
|
bmapCameraMarkers(arr) {
|
let mapData = arr || []
|
//更改地图中心
|
if (mapData && mapData.length > 0 && mapData[0]) {
|
let arrIndex = mapData.length - 1
|
this.bmapPto(mapData[arrIndex].lng, mapData[arrIndex].lat)
|
} else {
|
return false
|
}
|
|
/* 摄像头全局对象 */
|
let cameraMarkers = []
|
/*渲染marker*/
|
|
for (let i = 0; i < mapData.length; i++) {
|
if (
|
mapData[i].lng &&
|
mapData[i].lat &&
|
mapData[i].lng !== 'None' &&
|
mapData[i].lat !== 'None'
|
) {
|
let pt = new BMap.Point(mapData[i].lng, mapData[i].lat)
|
let iconStr = '/static/img/map/bmap_camera.png'
|
console.log(pt, 'arr---arr')
|
/* 图标设置 */
|
//不在线图标0 高亮
|
let cameraIcon_active= new BMap.Icon(
|
iconStr,
|
new BMap.Size(36, 45),
|
{ anchor: new BMap.Size(18, 45) }
|
)
|
//在线图标1
|
let cameraIcon_online = new BMap.Icon(
|
iconStr,
|
new BMap.Size(36, 45),
|
{
|
anchor: new BMap.Size(18, 45),
|
imageOffset: new BMap.Size(0, -47)
|
}
|
)
|
//图标
|
let cameraIcon_unOnline = new BMap.Icon(
|
iconStr,
|
new BMap.Size(36, 45),
|
{
|
anchor: new BMap.Size(18, 45),
|
imageOffset: new BMap.Size(0, -94)
|
}
|
)
|
|
let marker = new BMap.Marker(pt, {
|
icon:cameraIcon_online
|
})
|
this.bMapObj.addOverlay(marker)
|
// Camera title
|
let opts = {
|
position: pt, // 指定文本标注所在的地理位置
|
offset: new BMap.Size(35, -35) //设置文本偏移量
|
}
|
let labelHtml = `
|
<div class="pt20">
|
<h4 class="mb5"><span class="f14 pr5">【${
|
this.userInfo.sysOrgs.length &&
|
this.userInfo.sysOrgs[0]
|
? this.userInfo.sysOrgs[0].name
|
: ''
|
}】</span><span class="text-primary">${
|
mapData[i].name
|
}</span> </h4>
|
<p class="mb5 pt10 pl10"><span class="f14 pr5">地址：</span>${
|
mapData[i].address
|
}</p>`
|
marker.index = i
|
marker.data = mapData[i]
|
marker.id = mapData[i].id
|
|
marker.Icon_unOnline = cameraIcon_unOnline
|
marker.Icon_online = cameraIcon_online
|
marker.Icon_active = cameraIcon_active
|
if (findInArrJson(mapData[i].id, cameraMarkers, 'id') === -1) {
|
cameraMarkers.push(marker)
|
}
|
|
//是否点击摄像机
|
|
let _this = this
|
const opentextInfoWindow = async() => {
|
/* 查询学校上报情况 */
|
await this.getSchoolInfoData(marker.id)
|
labelHtml += `<div class="pt30 pb10 flex-center">
|
<div id="mapDailyBtn" class="mr15 ml10 cursor-pointer">
|
<div class="clearfix">
|
<img src="/static/img/map/dailyIcon.png" width="60px" class="float-left" />
|
<p class="float-left f20 pl10 mapWindowInfoP">
|
<span class="text-primary">${
|
this.countNum && this.countNum.submited
|
? this.countNum.submited
|
: 0
|
}</span>
|
<span class="text-muted small f14">(上报)</span> /
|
<span class="text-warning">${
|
this.countNum && this.countNum.notSubmited
|
? this.countNum.notSubmited
|
: 0
|
}</span>
|
<span class="text-muted small f14">(未上报)</span>
|
</p>
|
</div>
|
<h5 class="pt10">日常上报</h5>
|
</div>
|
<div id="mapEmergencyBtn" class="mr10 ml15 cursor-pointer">
|
<div class="clearfix">
|
<img src="/static/img/map/emergencyIcon.png" width="60px" class="float-left" />
|
<p class="float-left f20 pl10 mapWindowInfoP text-danger">${
|
this.countNum && this.countNum.emergency
|
? this.countNum.emergency
|
: 0
|
}</p>
|
</div>
|
<h5 class="pt10">应急上报</h5>
|
</div>
|
</div>
|
</div>`
|
|
this.textInfoWindow.setContent(labelHtml)
|
marker.openInfoWindow(this.textInfoWindow)
|
//添加事件
|
document.querySelector(
|
`#${this.newMapId} #mapDailyBtn`
|
).onclick = () => {
|
_this.$emit('mapDailyfn', marker)
|
}
|
document.querySelector(
|
`#${this.newMapId} #mapEmergencyBtn`
|
).onclick = () => {
|
_this.$emit('mapEmergencyfn', marker)
|
}
|
}
|
marker.addEventListener('click', opentextInfoWindow)
|
|
//回调函数
|
//
|
}
|
}
|
this.cameraMarkers = cameraMarkers
|
|
console.log(cameraMarkers, 'cameraMarkers')
|
},
|
|
//报警列表点击事件
|
checkAlarmInfo(json, index, iNum) {
|
this.alarmInfoListActive = index + '-' + iNum
|
this.$emit('mapAlarmInfoClick', json)
|
},
|
//双击关闭
|
closeCheckAlarmInfo(json) {
|
this.alarmInfoListActive = ''
|
this.$emit('mapCloseAlarmInfoClick', json)
|
this.removeActiveCameraMarkers()
|
},
|
//设置高亮
|
setActiveCameraMarkers(arr) {
|
let idArr = arr || []
|
let markers = this.cameraMarkers || []
|
if (idArr.length === 0) {
|
return false
|
}
|
|
let activeDevices = []
|
//遍历id查找高亮
|
idArr.forEach((idItem, index) => {
|
for (let iteam of this.cameraMarkers) {
|
if (iteam.id == idItem.id) {
|
activeDevices.push(iteam)
|
//iteam.setIcon(iteam.Icon_active);
|
//移动到第0个的位置
|
if (index === 0) {
|
this.bmapPto(iteam.data.lng, iteam.data.lat)
|
}
|
} else {
|
iteam.setIcon(iteam.Icon_online)
|
}
|
}
|
})
|
//设置高亮图标
|
for (let val of activeDevices) {
|
val.setIcon(val.Icon_active)
|
}
|
},
|
//删除高亮
|
removeActiveCameraMarkers() {
|
let markers = this.cameraMarkers || []
|
for (let iteam of markers) {
|
iteam.setIcon(iteam.Icon_online)
|
}
|
}
|
},
|
watch: {
|
deviceList: {
|
handler(val, oldVal) {
|
this.bmapCameraMarkers(val)
|
},
|
deep: true
|
},
|
searchArr:{
|
handler(val, oldVal) {
|
this.setActiveCameraMarkers(val)
|
},
|
deep: true
|
}
|
// panToVal: {
|
// handler(val, oldVal) {
|
// if (val !== oldVal) {
|
// //this.bmapPtoAuto(val);
|
// this.bmapPto(val.lng, val.lat)
|
// }
|
// },
|
// deep: true
|
// },
|
// activeDeviceIds: {
|
// handler(val, oldVal) {
|
// if (val !== oldVal) {
|
// this.setActiveCameraMarkers(val)
|
// }
|
// },
|
// deep: true
|
// },
|
// removeActiveAlarmInfo: {
|
// handler(val, oldVal) {
|
// if (val !== oldVal) {
|
// this.alarmInfoListActive = ''
|
// //去除全部高亮
|
// this.removeActiveCameraMarkers()
|
// }
|
// },
|
// deep: true
|
// }
|
},
|
created() {
|
if (this.showDynamics || this.showCameras) {
|
this.getDeviceData()
|
}
|
|
this.getMapSchoolList()
|
},
|
mounted() {
|
/* 地图初始化 */
|
this.bmapinit()
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import '../../vendor/styles/colors.scss';
|
|
.home-chart {
|
height: calc(100% - 45px);
|
}
|
.alarmInfo-list {
|
position: absolute;
|
right: 5px;
|
top: 5px;
|
background: rgba(255, 255, 255, 0.7);
|
max-width: 60%;
|
max-height: 200px;
|
overflow: auto;
|
.alarmInfo {
|
background: #fff;
|
color: #333;
|
padding: 6px 5px;
|
width: 80px;
|
transition: all 0.6s;
|
cursor: pointer;
|
.alarmInfo-icon {
|
font-size: 25px;
|
padding-right: 5px;
|
width: 25px;
|
height: 25px;
|
overflow: hidden;
|
.fa-car {
|
font-size: 20px;
|
margin-top: 2px;
|
}
|
}
|
.alarmInfo-count {
|
font-size: 15px;
|
line-height: 25px;
|
height: 25px;
|
font-weight: bolder;
|
}
|
.alarmInfo-title {
|
text-align: center;
|
font-size: 14px;
|
padding-top: 5px;
|
}
|
}
|
.alarmInfo.active {
|
background: #2f9fb0;
|
color: #fff;
|
}
|
}
|
</style>
|
