<template>
|
<div :id="newMapId" class="map"></div>
|
</template>
|
<script>
|
/* eslint-disable */
|
import { findInArrJson } from '@/components/common/util.js'
|
import { getDeviceType, getDeviceBrand } from '@/server/home.js'
|
import {
|
getcameraRecord,
|
queryCameraCount,
|
getDevSnapshot
|
} from '@/server/map.js'
|
import { Row, Col } from 'element-ui'
|
import speciaButton from '@/components/specialButton/speciaButton.vue'
|
import { WebVideo } from '../../WebVideo/WebVideo.js'
|
export default {
|
components: {
|
elRow: Row,
|
elCol: Col
|
},
|
props: {
|
newId: {
|
default: 'amap',
|
type: String
|
},
|
zoomSize: {
|
default: 12,
|
type: Number
|
}
|
},
|
computed: {
|
newMapId() {
|
return this.newId && this.newId !== '' ? this.newId : 'amap'
|
},
|
newDefaultMapZoom() {
|
return this.zoomSize && this.zoomSize !== '' ? this.zoomSize : 14
|
}
|
},
|
data() {
|
return {
|
/** 存放地图对象 */
|
mapObject: {},
|
/** 存放设备信息 */
|
deviceMarkers: [],
|
/** 信息窗体 */
|
textInfoWindow: {},
|
textInfoWindow2: {},
|
indexPlayer: 1,
|
/** 用于存储拖拽物放下时的坐标 */
|
point: {},
|
/** 获取设备品牌 */
|
deviceBrandList: [],
|
/** 轨迹对象 */
|
PathSimplifierObj: {},
|
/** 当前的imgId */
|
iconImgId: ''
|
}
|
},
|
methods: {
|
// 获取摄像机实时最新图片
|
async getNowBigImg(videoReqNum) {
|
const res = await getDevSnapshot({ devId: videoReqNum })
|
if (res && res.success) {
|
return res.data.imgUrl
|
}
|
return '/static/img/map/1111.jpg'
|
},
|
InitMap() {
|
// console.log(this.newMapId,'初始化地图！！！！')
|
const map = new AMap.Map(this.newMapId, {
|
center: [116.397428, 39.90923],
|
resizeEnable: true,
|
zoom: this.newDefaultMapZoom
|
})
|
// map.on('complete',function(){
|
// console.log("地图加载完成！")
|
// })
|
/** 添加地图插件 */
|
AMap.plugin(['AMap.ToolBar'], function() {
|
map.addControl(
|
new AMap.ToolBar({
|
// 简易缩放模式，默认为 false
|
liteStyle: true
|
})
|
)
|
})
|
/** 获取品牌 */
|
// this.getDeviceBrand()
|
// AMap.event.addListener(map, 'mousedown', this.listenMouseDown)
|
// AMap.event.addListener(map, 'mousemove', this.listenMouseOve)
|
// AMap.event.addListener(map, 'mouseup', this.listenMouseUp)
|
// debugger
|
this.mapObject = map
|
//创建全局弹窗
|
this.textInfoWindow = new AMap.InfoWindow({
|
isCustom: true,
|
autoMove: true,
|
closeWhenClickMap: true,
|
size: new AMap.Size(430, 380),
|
offset: new AMap.Pixel(25, -25)
|
})
|
this.textInfoWindow2 = new AMap.InfoWindow({
|
isCustomL: true,
|
autoMove: false,
|
closeWhenClickMap: true,
|
size: new AMap.Size(430, 410),
|
offset: new AMap.Pixel(0, -20)
|
})
|
|
/** 监听信息窗口的打开事件 */
|
// this.textInfoWindow.on('open',this.listenInfoWin)
|
// this.textInfoWindow.on('mouseover',this.removeToMarker(this.textInfoWindow))
|
},
|
amapPto(lng, lat) {
|
if (lng && lat) {
|
this.mapObject.panTo(new AMap.LngLat(lng, lat))
|
}
|
},
|
/* by mcdowell 2019-02-22 */
|
async getCameraMarkersCount(arr, isids) {
|
let mapData = arr || []
|
const mapDataId = isids ? mapData : mapData.map(item => item.id)
|
const sear = JSON.parse(localStorage.getItem('sear'))
|
let res = await queryCameraCount({
|
reqNumList: mapDataId,
|
startDate: sear.startDate,
|
endDate: sear.endDate
|
})
|
let list = []
|
if (res && res.success && res.data && res.data.equList) {
|
list = res.data.equList
|
list = list.map(item => ({ [item.devId]: item.alarmCount }))
|
}
|
return list
|
},
|
/** 设备marker标记点 */
|
async amapCreateMarker(arr) {
|
const map = this.mapObject
|
let mapData = arr || []
|
//更改地图中心
|
if (mapData && mapData.length > 0 && mapData[0]) {
|
let arrIndex = mapData.length - 1
|
this.amapPto(mapData[arrIndex].longitude, mapData[arrIndex].latitude)
|
} else {
|
return false
|
}
|
// 获取全部设备数值
|
const markersCounts = await this.getCameraMarkersCount(mapData)
|
console.log(markersCounts, 'markersCounts')
|
/** 摄像头全局对象 */
|
let cameraMarkers = []
|
/** 渲染marker */
|
for (let i = 0; i < mapData.length; i++) {
|
if (
|
mapData[i].longitude &&
|
mapData[i].latitude &&
|
mapData[i].longitude !== 'None' &&
|
mapData[i].latitude !== 'None'
|
) {
|
/* 禁止多次调用 */
|
/* let sear = JSON.parse(localStorage.getItem('sear'))
|
let res = await queryCameraCount({
|
reqNumList: [mapData[i].id],
|
startDate: sear.startDate,
|
endDate: sear.endDate
|
})
|
if (res && res.success) {
|
if (res.data && res.data.total) {
|
if (res.data.total !== 0) {
|
this.$set(mapData[i], 'isAlarm', true)
|
this.$set(mapData[i], 'alarmNum', res.data.total)
|
} else {
|
this.$set(mapData[i], 'isAlarm', false)
|
this.$set(mapData[i], 'alarmNum', res.data.total)
|
}
|
}
|
} */
|
/**
|
* 匹配mark警报数量
|
* by mcdowell
|
* */
|
this.$set(mapData[i], 'isAlarm', false)
|
this.$set(mapData[i], 'alarmNum', 0)
|
markersCounts.map(item => {
|
let num = parseInt(item[mapData[i].id])
|
if (mapData[i].id && !isNaN(num) && num > -1) {
|
this.$set(mapData[i], 'isAlarm', true)
|
this.$set(mapData[i], 'alarmNum', num)
|
}
|
})
|
/* 匹配mark警报数量 end */
|
let url = this.getvideoUrl(mapData[i])
|
this.$set(mapData[i], 'url', url)
|
let pt = new AMap.LngLat(mapData[i].longitude, mapData[i].latitude)
|
let iconStrOnline = '/static/img/icon/green_camer.png'
|
let iconStrAlarm = '/static/img/map/camera_device_alarm.png'
|
let iconUnline = '/static/img/map/camera_device.png'
|
/* 图标设置 */
|
//绿色摄像头图标
|
let cameraIcon_green = new AMap.Icon({
|
size: new AMap.Size(48, 48),
|
image: '/static/img/icon/green_camer.png',
|
imageOffset: new AMap.Pixel(0, 0),
|
imageSize: new AMap.Size(36, 36)
|
})
|
//绿色摄像头高亮图标
|
let cameraIcon_green_active = new AMap.Icon({
|
size: new AMap.Size(48, 48),
|
image: '/static/img/icon/green_camer_active.gif',
|
imageOffset: new AMap.Pixel(0, 0),
|
imageSize: new AMap.Size(48, 48)
|
})
|
//红色摄像头图标
|
let cameraIcon_red = new AMap.Icon({
|
size: new AMap.Size(48, 48),
|
image: '/static/img/icon/red_camer.png',
|
imageOffset: new AMap.Pixel(0, 0),
|
imageSize: new AMap.Size(36, 36)
|
})
|
//灰色摄像头图标
|
let cameraIcon_gray = new AMap.Icon({
|
size: new AMap.Size(48, 48),
|
image: '/static/img/icon/gray_camer.png',
|
imageOffset: new AMap.Pixel(0, 0),
|
imageSize: new AMap.Size(36, 36)
|
})
|
//灰色摄像头高亮图标
|
let cameraIcon_gray_active = new AMap.Icon({
|
size: new AMap.Size(48, 48),
|
image: '/static/img/icon/gray_camer_active.gif',
|
imageOffset: new AMap.Pixel(0, 0),
|
imageSize: new AMap.Size(48, 48)
|
})
|
//红色摄像头高亮图标
|
let cameraIcon_red_active = new AMap.Icon({
|
size: new AMap.Size(48, 48),
|
image: '/static/img/icon/red_camer_active.gif',
|
imageOffset: new AMap.Pixel(0, 0),
|
imageSize: new AMap.Size(48, 48)
|
})
|
//绿色服务器图标
|
let serverIcon_green = new AMap.Icon({
|
size: new AMap.Size(48, 48),
|
image: '/static/img/icon/green_server.png',
|
imageOffset: new AMap.Pixel(0, 0),
|
imageSize: new AMap.Size(36, 36)
|
})
|
//绿色服务器高亮图标
|
let serverIcon_green_active = new AMap.Icon({
|
size: new AMap.Size(48, 48),
|
image: '/static/img/icon/green_server_active.gif',
|
imageOffset: new AMap.Pixel(0, 0),
|
imageSize: new AMap.Size(48, 48)
|
})
|
//红色服务器图标
|
let serverIcon_red = new AMap.Icon({
|
size: new AMap.Size(48, 48),
|
image: '/static/img/icon/red_server.png',
|
imageOffset: new AMap.Pixel(0, 0),
|
imageSize: new AMap.Size(36, 36)
|
})
|
//红色服务器高亮图标
|
let serverIcon_red_active = new AMap.Icon({
|
size: new AMap.Size(48, 48),
|
image: '/static/img/icon/red_server_active.gif',
|
imageOffset: new AMap.Pixel(0, 0),
|
imageSize: new AMap.Size(48, 48)
|
})
|
//灰色服务器图标
|
let serverIcon_gray = new AMap.Icon({
|
size: new AMap.Size(48, 48),
|
image: '/static/img/icon/gray_server.png',
|
imageOffset: new AMap.Pixel(0, 0),
|
imageSize: new AMap.Size(36, 36)
|
})
|
//灰色服务器高亮图标
|
let serverIcon_gray_active = new AMap.Icon({
|
size: new AMap.Size(48, 48),
|
image: '/static/img/icon/gray_server_active.gif',
|
imageOffset: new AMap.Pixel(0, 0),
|
imageSize: new AMap.Size(48, 48)
|
})
|
//高亮图标
|
let cameraIcon_active = new AMap.Icon({
|
size: new AMap.Size(48, 48),
|
image: iconStrAlarm,
|
imageOffset: new AMap.Pixel(0, 0),
|
imageSize: new AMap.Size(48, 48)
|
})
|
/** 使用SimpleMarker */
|
// AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
|
// /** 判断标记点的相关状态，确定用什么icon */
|
|
// //创建SimpleMarker实例
|
// new SimpleMarker({
|
|
// innerHTML: '<i>B</i>',
|
// style: {
|
// color: '#fff'
|
// },
|
// //图标主题
|
// iconTheme: 'default',
|
// //背景图标样式
|
// // iconStyle: '/static/img/icon/green_camer.png',
|
// icon:icon,
|
// //...其他Marker选项...，不包括content
|
// map: map,
|
// position: pt,
|
// label:{
|
// content:'<div style="color:red;">5</div>',
|
// offset:new AMap.Pixel(30,-20)
|
// }
|
// })
|
// })
|
/** end */
|
let marker = null
|
// console.log(i,'mapData[i]====',mapData[i].status)
|
if (mapData[i].status === 0) {
|
/** 状态0为正常 */
|
if (mapData[i].type === '101') {
|
if (mapData[i].subType === '10102') {
|
/** 101 摄像机 */
|
marker = new AMap.Marker({
|
position: pt
|
// offset: new AMap.Pixel(-25, -40)
|
})
|
marker.Icon_original = cameraIcon_green
|
marker.Icon_alarm = cameraIcon_red
|
marker.Icon_active = cameraIcon_green_active
|
marker.type = '101'
|
} else if (mapData[i].subType === '10101') {
|
/** 103分析设备（服务器） */
|
marker = new AMap.Marker({
|
position: pt
|
// icon:serverIcon_green,
|
// offset: new AMap.Pixel(-25, -40)
|
})
|
marker.Icon_original = serverIcon_green
|
marker.Icon_alarm = serverIcon_red
|
marker.Icon_active = serverIcon_green_active
|
marker.type = '103'
|
}
|
marker.status = 0
|
}
|
} else if (mapData[i].status === 1) {
|
/** 状态1为报警 */
|
if (mapData[i].type === '101') {
|
/** 101 摄像机 */
|
marker = new AMap.Marker({
|
position: pt
|
// icon:cameraIcon_red,
|
// offset: new AMap.Pixel(-25, -40)
|
})
|
marker.Icon_original = cameraIcon_red
|
marker.Icon_green = cameraIcon_green
|
marker.Icon_active = cameraIcon_red_active
|
marker.type = '101'
|
} else if (mapData[i].type === '103') {
|
/** 103分析设备（服务器） */
|
marker = new AMap.Marker({
|
position: pt
|
// icon:serverIcon_red,
|
// offset: new AMap.Pixel(-25, -40)
|
})
|
marker.Icon_original = serverIcon_red
|
marker.Icon_green = serverIcon_green
|
marker.Icon_active = serverIcon_red_active
|
marker.type = '103'
|
}
|
marker.status = 1
|
} else if (mapData[i].status === -1) {
|
/** 状态-1为维修 */
|
if (mapData[i].type === '101') {
|
/** 101 摄像机 */
|
marker = new AMap.Marker({
|
position: pt
|
// icon:cameraIcon_gray,
|
// offset: new AMap.Pixel(-25, -40)
|
})
|
marker.Icon_original = cameraIcon_gray
|
marker.Icon_green = cameraIcon_green
|
marker.Icon_active = cameraIcon_gray_active
|
marker.type = '101'
|
} else if (mapData[i].type === '103') {
|
/** 103分析设备（服务器） */
|
marker = new AMap.Marker({
|
position: pt
|
// icon:serverIcon_gray,
|
// offset: new AMap.Pixel(-25, -40)
|
})
|
marker.Icon_original = serverIcon_gray
|
marker.Icon_green = serverIcon_green
|
marker.Icon_active = serverIcon_gray_active
|
marker.type = '103'
|
}
|
marker.status = -1
|
}
|
if (marker === undefined) {
|
return
|
}
|
/** 判断marker中是否有报警记录 */
|
if (mapData[i].isAlarm) {
|
marker.setIcon(marker.Icon_alarm)
|
marker.status = 1
|
marker.setLabel({
|
content: `<div style="color:#fff;background-color:red;">${
|
mapData[i].alarmNum
|
}</div>`,
|
offset: new AMap.Pixel(25, -10)
|
})
|
}
|
marker.isActive = false
|
marker.Trajectory = false
|
/** 将设备信息存储到marker中 */
|
marker.index = i
|
marker.data = mapData[i]
|
marker.id = mapData[i].id
|
marker.visibility = 'hidden'
|
|
// marker.setOffset(new AMap.Pixel(-35, -50))
|
this.setContent(marker)
|
this.mapObject.add(marker)
|
|
if (findInArrJson(mapData[i].id, this.deviceMarkers, 'id') === -1) {
|
this.deviceMarkers.push(marker)
|
}
|
//是否点击摄像机
|
let _this = this
|
const opentextInfoWindow = async () => {
|
/* 查询设备情况 */
|
let typeArr = await getDeviceType()
|
let typeName
|
if (typeArr && typeArr.success && typeArr.data.length !== 0) {
|
typeArr.data.forEach(item => {
|
if (item.value === marker.data.type) {
|
typeName = item.name
|
}
|
})
|
}
|
console.log(marker.id, ' marker.data')
|
// let bigImg = await this.getNowBigImg(marker.id)
|
console.log(marker.data.basePhoto, 'bigImg')
|
let markerImgUrl = ''
|
if(marker.data && !marker.data.basePhoto){
|
// this.$set(marker.data,'basePhoto','/static/img/map/1111.jpg')
|
markerImgUrl = '/static/img/map/1111.jpg'
|
}else{
|
markerImgUrl = '/httpImage/'+marker.data.basePhoto
|
}
|
let labelHtml =
|
`<div class="pb10" style="background-color:white;border-style:solid; border-width:10px; border-color:white; border-bottom:0px">
|
<div style="height:70%;width:100%">
|
<div id="dynamicallyPlayers" style="width:410px;height:287px;" class="flex-center pr">
|
<div id="img" style="background-image: url(` +
|
markerImgUrl +
|
`);width:100%;height:100%" class="img-icon">
|
</div>
|
<div class="model-palyer-box" id="palyerBox">
|
<i class="fas fa-play-circle model-palyer"></i>
|
</div>
|
</div>
|
|
<div class="mt10 pt20 pb10 pl10 pr10 info-bg">
|
<div class="flex-row-between">
|
<div class="flex-row-left">
|
<span>设备名称:${marker.data.name}</span>
|
</div>
|
</div>
|
<div class="flex-row-between">
|
<div class="flex-row-left pt10">
|
<span>设备位置:${marker.data.address}</span>
|
</div>
|
<div id="toDetails" class="flex-row-right ">
|
<a href="javascript:console.log('')"><i class="fa fa-list-alt f25 text-primary mr10" style="position:relative;top:5px;"></i>详情</a>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div style=' height: 0px;width: 100%;clear: both;text-align: center;'>
|
<img src='/static/img/sharp.png' style='position: relative;z-index: 104;'>
|
</div>
|
<style>
|
.info-bg{
|
background: #f8f8f8;
|
}
|
.model-palyer-box{
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
top: 0;
|
text-align: center;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.model-palyer{
|
font-size: 60px;
|
cursor: pointer;
|
color: #fff;
|
}
|
</style>
|
</div>`
|
|
this.textInfoWindow.setContent(labelHtml)
|
// marker.openInfoWindow(this.textInfoWindow)
|
this.textInfoWindow.open(this.mapObject, marker.getPosition())
|
// console.log(document.getElementById('vxg_media_player1'),'this.textInfoWindow.getContent()')
|
setTimeout(() => {
|
//添加事件
|
if (document.querySelector(`#${this.newMapId} #img`) !== null) {
|
document.querySelector(
|
`#${this.newMapId} #toDetails`
|
).onclick = () => {
|
closeInfoWin()
|
_this.$emit('toDetails', { ...marker })
|
}
|
document.querySelector(
|
`#${this.newMapId} #dynamicallyPlayers`
|
).onclick = async () => {
|
/** 渲染弹框中的视频插件*/
|
console.log('能否走到这一步1')
|
let parent = document.getElementById('dynamicallyPlayers')
|
let child = document.getElementById('img')
|
let child2 = document.getElementById('vxg_media_player1')
|
let child3 = document.getElementById('palyerBox')
|
if (child3) {
|
parent.removeChild(child3)
|
}
|
if (child2 !== null) {
|
parent.removeChild(child2)
|
}
|
parent.removeChild(child)
|
|
let bigImg = await this.getNowBigImg(marker.id)
|
this.$set(marker.data,'basePhoto',bigImg)
|
console.log(marker.data,'=====更新图片===')
|
|
var playerId = 'vxg_media_player1'
|
var div = document.createElement('div')
|
div.setAttribute('id', playerId)
|
div.setAttribute('style', 'width:100%;height:100%')
|
parent.appendChild(div)
|
/** 采用海康的视频插件 */
|
let videoParams = {
|
deviceport: marker.data.port,
|
// rtspport:marker.data.rtspport,
|
rtspport: '554',
|
ip: marker.data.ip,
|
// port:marker.data.serverport,
|
port: '80',
|
username: marker.data.username,
|
// password: marker.data.password,
|
password: 'a1234567',
|
domId: playerId
|
}
|
console.log(marker.data, 'AMap videoParams')
|
const webVideo = new WebVideo(videoParams)
|
webVideo.init()
|
this.$nextTick(() => {
|
webVideo.clickLogin()
|
})
|
}
|
}
|
}, 100)
|
}
|
/** 鼠标移动到标记点上的事件 */
|
const mouseOve = async () => {
|
// console.log(this.textInfoWindow2.getIsOpen(),'getIsOpen')
|
if (
|
!this.textInfoWindow2.getIsOpen() &&
|
!this.textInfoWindow.getIsOpen()
|
) {
|
/* 查询设备情况 */
|
let typeArr = await getDeviceType()
|
let typeName
|
if (typeArr && typeArr.success && typeArr.data.length !== 0) {
|
typeArr.data.forEach(item => {
|
if (item.value === marker.data.type) {
|
typeName = item.name
|
}
|
})
|
}
|
let labelHtml = `<div class="pb10">
|
<div style="height:70%;width:100%">
|
<div id="dynamicallyPlayers2" style="width:380px;height:260px;padding:10px" class="flex-center">
|
<div style="background-image: url('/static/img/map/1111.jpg');width:100%;height:100%" class="img-icon"></div>
|
</div>
|
</div>
|
<div style="height:30%;" class="">
|
<div class="flex-row-between">
|
<div class="flex-row-left">
|
<span>设备类型:${typeName}</span>
|
</div>
|
<div id="toDetails" class="flex-row-right">
|
<a href="javascript:console.log('')">详情</a>
|
</div>
|
</div>
|
|
<div class="flex-row-between">
|
<div class="flex-row-left">
|
<span>设备位置:${marker.data.address}</span>
|
</div>
|
<div class="flex-row-right">
|
<i class="d-block fas fa-edit" id="toEdit" click=""></i>
|
</div>
|
</div>
|
|
</div>
|
<div style="width:100%" class="flex-center">
|
<button id="saveLnglat" type="button" class="btn btn-secondary btn-sm">保存坐标</button>
|
</div>
|
</div>`
|
this.textInfoWindow2.setContent(labelHtml)
|
// marker.openInfoWindow(this.textInfoWindow)
|
this.textInfoWindow2.open(this.mapObject, marker.getPosition())
|
setTimeout(() => {
|
if (
|
document.querySelector(`#${this.newMapId} #toDetails2`) !==
|
null
|
) {
|
document.querySelector(
|
`#${this.newMapId} #toDetails2`
|
).onclick = () => {
|
_this.$emit('toDetails', marker)
|
}
|
document.querySelector(
|
`#${this.newMapId} #dynamicallyPlayers2`
|
).onclick = () => {
|
// _this.$emit('toDetails', marker)
|
this.opentextInfoWindow()
|
}
|
// document.querySelector(
|
// `#${this.newMapId} #saveLnglat`
|
// ).onclick = () => {
|
// _this.saveLnglat(marker)
|
// }
|
}
|
}, 100)
|
}
|
}
|
|
const closeInfoWin = async () => {
|
this.textInfoWindow.close()
|
}
|
|
const toDetails = async marker => {
|
this.$emit('toDetails', marker.target)
|
}
|
marker.on('mouseover', opentextInfoWindow)
|
marker.on('mouseout', closeInfoWin)
|
marker.on('click', toDetails, marker)
|
marker.on('dragging', opentextInfoWindow)
|
// this.$nextTick(()=>{
|
// if(document.querySelector(`#${this.newMapId} #${this.iconImgId}`)!== null){
|
// console.log('iconImgId')
|
// document.querySelector(
|
// `#${this.newMapId} #${this.iconImgId}`
|
// ).onmouseover = () =>{
|
// console.log(event,'event')
|
// }
|
// }
|
// })
|
}
|
}
|
},
|
async setDeviceMarkersAlarm(arr) {
|
let idArr = arr || []
|
let markers = this.deviceMarkers || []
|
|
idArr.map(item => {
|
for (let iteam of markers) {
|
if (iteam.id === item.id) {
|
iteam.status = item.status
|
}
|
// this.setContent(iteam)
|
}
|
})
|
|
// // 获取全部设备数值
|
const markersCounts = await this.getCameraMarkersCount(idArr, false)
|
console.log(markersCounts, 'markersCounts')
|
for (let iteam of markers) {
|
this.$set(iteam, 'alarmNum', 0)
|
// iteam.setLabel(null)
|
markersCounts.map(item => {
|
if(item.hasOwnProperty(iteam.id)){
|
let num = parseInt(item[iteam.id])
|
if (iteam.id && !isNaN(num) && num > -1) {
|
iteam.setLabel({
|
content: `<div style="color:#fff;background-color:red;">${num}</div>`,
|
offset: new AMap.Pixel(25, 0)
|
})
|
}
|
}
|
})
|
}
|
},
|
/** 设置高亮 */
|
setActiveDeviceMarkers(arr, message) {
|
let idArr = arr || []
|
let markers = this.deviceMarkers || []
|
|
/** 在设置高亮之前先把之前设置的高亮去掉 */
|
if (idArr.length === 0) {
|
return false
|
}
|
let activeDevices = []
|
console.info(markers, 'markers')
|
//遍历id查找高亮
|
idArr.forEach((idItem, index) => {
|
for (let iteam of markers) {
|
// if (iteam.data && iteam.data.id === idItem.id) {
|
console.log(idItem.id,'idItem.id',iteam.id,'iteam.id')
|
if (iteam.id === idItem.id) {
|
activeDevices.push(iteam)
|
//iteam.setIcon(iteam.Icon_active);
|
//移动到第0个的位置
|
if (index === 0) {
|
this.amapPto(iteam.data.longitude, iteam.data.latitude)
|
}
|
} else {
|
// console.log(iteam,'iteam ')
|
if (iteam.data.status === 'online') {
|
iteam.setIcon(iteam.Icon_online)
|
iteam.setAnimation('AMAP_ANIMATION_NONE')
|
} else if (iteam.data.status === 'unOnline') {
|
iteam.setIcon(iteam.Icon_unOnline)
|
iteam.setAnimation('AMAP_ANIMATION_NONE')
|
}
|
}
|
}
|
})
|
console.log(activeDevices, 'activeDevices')
|
if (activeDevices.length !== 0) {
|
//设置高亮图标
|
for (let val of activeDevices) {
|
// val.setIcon(val.Icon_active)
|
// 设置标记点跳动
|
// val.setAnimation('AMAP_ANIMATION_BOUNCE')
|
// val.setOffset(new AMap.Pixel(-47, -80))
|
/** 通过设置content设置高亮 */
|
val.isActive = true
|
this.setContent(val)
|
// val.setOffset(new AMap.Pixel(-47, -80))
|
}
|
}
|
// else if (!message) {
|
// this.$toast({
|
// type: 'warning',
|
// message: '地图上暂无此设备！'
|
// })
|
// }
|
},
|
/** 取消高亮 */
|
removeActiveDeviceMarkers() {
|
let markers = this.deviceMarkers || []
|
for (let iteam of this.deviceMarkers) {
|
this.$set(iteam, 'Trajectory', false)
|
// iteam.setIcon(iteam.Icon_original)
|
// iteam.setOffset(new AMap.Pixel(-35, -50))
|
// iteam.setAnimation('AMAP_ANIMATION_NONE')
|
// console.log(iteam.he,'iteam.he',iteam.he.content)
|
iteam.isActive = false
|
console.log(iteam, 'iteam', iteam.isActive)
|
iteam.setzIndex(100)
|
this.setContent(iteam)
|
}
|
},
|
/** 监听信息窗口打开 */
|
listenInfoWin() {
|
// console.log(document.getElementById('dynamicallyPlayers'),'this.textInfoWindow.getContent()')
|
},
|
// 地图中监听鼠标松开事件，获取松开的经纬度
|
listenMouseUp(e) {
|
// let point = new AMap.LngLat(e.point.lng,e.point.lat)
|
console.log(e, '鼠标在这里松开')
|
// this.$emit('getPoint',point)
|
},
|
listenMouseOve(e) {
|
// let point = new BMap.Point(e.point.lng,e.point.lat)
|
// console.log(e,'鼠标在这里移动')
|
this.point = {}
|
let pt = e.lnglat
|
if (Object.keys(pt).length !== 0) {
|
this.point = pt
|
}
|
// console.log(this.point,'this.point')
|
},
|
listenMouseDown(e) {
|
// let point = new BMap.Point(e.point.lng,e.point.lat)
|
// console.log(e,'鼠标在这里按下鼠标')
|
},
|
/** 获取拖拽点 */
|
receveLnglat(data) {
|
// console.log(data,'================')
|
AMap.event.addListenerOnce(
|
this.mapObject,
|
'mousemove',
|
this.listenMouseOve
|
)
|
setTimeout(() => {
|
if (Object.keys(this.point).length !== 0) {
|
data.longitude = this.point.lng
|
data.latitude = this.point.lat
|
let arr = []
|
arr.push(data)
|
this.amapCreateMarker(arr)
|
this.$nextTick(() => {
|
this.deviceMarkers.forEach(item => {
|
if (item.data.id === data.id) {
|
this.saveLnglat(item)
|
}
|
})
|
})
|
console.log(data, ' 将要打印的点')
|
}
|
}, 100)
|
},
|
/** 定义鼠标移动到标记点的回调 */
|
removeToMarker(data) {
|
console.log(data, '鼠标移动的回调函数')
|
},
|
/** 设置拖拽 */
|
setDrag(data) {
|
// console.log(data,'设置拖拽')
|
data.setDraggable(true)
|
this.$toast({
|
type: 'success',
|
message: '您现在可以对该设备进行移动了，别忘了保存坐标！'
|
})
|
this.$set(data, 'visibility', 'visible')
|
},
|
/** 移动后保存坐标 */
|
saveLnglat(data) {
|
// console.log(data,'保存拖拽后的marker')
|
data.setDraggable(false)
|
this.$set(data, 'visibility', 'hidden')
|
this.$emit('updatePos', data)
|
},
|
/** 查询设备类型 */
|
async getDeviceType() {
|
let res = await getDeviceType()
|
if (res && res.success) {
|
return res.data
|
}
|
},
|
/** 关闭弹框 */
|
closeInfoWin() {
|
console.log('关闭InfoWin2')
|
this.textInfoWindow2.close()
|
},
|
/** 获取品牌 */
|
async getDeviceBrand() {
|
const res = await getDeviceBrand()
|
this.deviceBrandList =
|
res.success && res.code === 200 && res.data ? res.data : []
|
},
|
// 根据字典模版 拼接rtsp流地址
|
// urlTemplate: 'rtsp://[username]:[password]@[ip]:[port]/cam/realmonitor?channel=1&subtype=0'
|
getvideoUrl(data) {
|
// console.log(!this.deviceBrandList.length,'拼接流地址data')
|
if (!this.deviceBrandList.length) {
|
return ''
|
}
|
// console.log(data,'拼接流地址data')
|
const setting = ['username', 'password', 'ip', 'port']
|
const itemArr = this.deviceBrandList.filter(
|
item => item.value === data.brand
|
)
|
if (itemArr.length === 1) {
|
let urlTemplate =
|
itemArr[0] && itemArr[0].urlTemplate ? itemArr[0].urlTemplate : ''
|
setting.map(val => {
|
urlTemplate = urlTemplate.replace(
|
`[${val}]`,
|
data[val] ? data[val] : ''
|
)
|
})
|
return urlTemplate
|
}
|
return ''
|
},
|
/** 在地图上画轨迹线 */
|
drawLine(data) {
|
console.log(data, '在地图上画轨迹线')
|
// 霍文博添加，为了消除上次的轨迹
|
if (window.pathSimplifierIns) {
|
window.pathSimplifierIns.setData([
|
{
|
name: '轨迹',
|
path: []
|
}
|
])
|
}
|
const map = this.mapObject
|
/** 判断undefinde */
|
// console.log(data,'===============')
|
if (data === undefined) {
|
return false
|
}
|
/** 判断数据为空 */
|
if (
|
data &&
|
data.result.path &&
|
data.result.path.path &&
|
data.result.path.path.length === 0
|
) {
|
return false
|
}
|
/** 判断是否有smallPhotoPath */
|
/** 路径数据 */
|
let path = data.result.path.path
|
|
/** 使用简单路径 */
|
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(
|
PathSimplifier,
|
$
|
) {
|
if (!PathSimplifier.supportCanvas) {
|
alert('当前环境不支持 Canvas！')
|
return
|
}
|
let pathSimplifierIns = new PathSimplifier({
|
zIndex: 100,
|
//autoSetFitView:false,
|
map: map, //所属的地图实例
|
getPath: function(pathData, pathIndex) {
|
return pathData.path
|
},
|
getHoverTitle: function(pathData, pathIndex, pointIndex) {
|
if (pointIndex >= 0) {
|
//point
|
return (
|
pathData.name +
|
'，点：' +
|
pointIndex +
|
'/' +
|
pathData.path.length
|
)
|
}
|
return pathData.name + '，点数量' + pathData.path.length
|
},
|
renderOptions: {
|
renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
|
}
|
})
|
window.pathSimplifierIns = pathSimplifierIns
|
//设置数据
|
pathSimplifierIns.setData([
|
{
|
name: '轨迹',
|
path: path
|
}
|
])
|
//对第一条线路（即索引 0）创建一个巡航器
|
let navg1 = pathSimplifierIns.createPathNavigator(0, {
|
loop: true, //循环播放
|
speed: 1000 //巡航速度，单位千米/小时
|
})
|
navg1.start()
|
})
|
/** 设备数据集合 */
|
let arr = data.result.path.locusList
|
let markers = this.deviceMarkers || []
|
let activeDevices = []
|
// console.log(data,'data')
|
arr.forEach((i, index) => {
|
for (let item of markers) {
|
if (item.id === i.videoReqNum) {
|
activeDevices.push(item)
|
}
|
}
|
})
|
// 霍文博添加，为了不显示多余的头像
|
for (let val of activeDevices) {
|
val.setContent('')
|
}
|
console.log(arr, 'arr', activeDevices)
|
for (let val of activeDevices) {
|
console.log(val, 'activeDevices')
|
let sumNum = data.result.path.sumNum
|
let count = 0
|
for (let i of sumNum) {
|
if (i.devId === val.id) {
|
count = i.decCount
|
break
|
}
|
}
|
/** 根据设备状态确定图片 */
|
let picStr = null
|
if (val.data.type === '101') {
|
if (val.data.subType === '10101') {
|
if (val.data.isAlarm) {
|
picStr = '/static/img/icon/red_server_active.gif'
|
} else {
|
picStr = '/static/img/icon/green_server_active.gif'
|
}
|
} else if (val.data.subType === '10102') {
|
if (val.data.isAlarm) {
|
picStr = '/static/img/icon/red_camer_active.gif'
|
} else {
|
picStr = '/static/img/icon/green_camer_active.gif'
|
}
|
}
|
}
|
this.$set(val, 'Trajectory', true)
|
this.$set(val, 'allData', data)
|
/** 设置标记的Content */
|
let markerContent = `
|
<div>
|
<div style="position:absolute;top:5px;left:-76px;">
|
<img src="${picStr}" style="width:48px;height:48px;" />
|
</div>
|
<div>
|
<img class="map-img" src="/httpImage/${
|
val.allData.result.param.path
|
}" width="40px" height="40px"/>
|
</div>
|
<div class="smdiv">${count}</div>
|
</div>
|
`
|
/* */
|
val.setLabel({
|
content: `<div style="color:#fff;background-color:red;">${
|
val.data.alarmNum
|
}</div>`,
|
offset: new AMap.Pixel(25, 38)
|
})
|
val.setzIndex(101)
|
val.setContent(markerContent)
|
// val.setOffset(new AMap.Pixel(-25, -114.5))
|
val.setOffset(new AMap.Pixel(-10, -78))
|
}
|
},
|
/** 设置正常的content */
|
setContent(marker) {
|
if (marker === undefined) {
|
return false
|
}
|
let markerContent = ''
|
let id = 'iconImgId' + Math.floor(Math.random() * 10000 + 1)
|
if (!marker.data.isAlarm) {
|
if (marker.type === '101') {
|
if (marker.isActive) {
|
/** 设置标记的Content */
|
markerContent = `
|
<div style="position:absolute;top:-26px;left:-60px;width:0px;height:0px;">
|
<img src="/static/img/icon/green_camer_active.gif" />
|
</div>
|
`
|
} else {
|
/** 设置标记的Content */
|
markerContent = `
|
<div style="position:absolute;top:-12px;left:-58px;width:0px;height:0px;">
|
<img src="/static/img/icon/green_camer.png" style="width:36px;height:36px;"/>
|
</div>
|
`
|
}
|
} else if (marker.type === '103') {
|
if (marker.isActive) {
|
/** 设置标记的Content */
|
markerContent = `
|
<div style="position:absolute;top:-26px;left:-60px;width:0px;height:0px;">
|
<img id="${id}" src="/static/img/icon/green_server_active.gif" />
|
</div>
|
`
|
} else {
|
/** 设置标记的Content */
|
markerContent = `
|
<div style="position:absolute;top:-12px;left:-58px;width:0px;height:0px;">
|
<img id="${id}" src="/static/img/icon/green_server.png" style="width:36px;height:36px;" />
|
</div>
|
`
|
}
|
}
|
} else if (marker.data.isAlarm) {
|
if (marker.type === '101') {
|
if (marker.isActive) {
|
/** 设置标记的Content */
|
markerContent = `
|
<div style="position:absolute;top:-28px;left:-60px;width:0px;height:0px;">
|
<img id="${id}" src="/static/img/icon/red_camer_active.gif" />
|
</div>
|
`
|
} else {
|
/** 设置标记的Content */
|
markerContent = `
|
<div style="position:absolute;top:-12px;left:-58px;width:0px;height:0px;">
|
<img id="${id}" src="/static/img/icon/red_camer.png" style="width:36px;height:36px;" />
|
</div>
|
`
|
}
|
} else if (marker.type === '103') {
|
if (marker.isActive) {
|
/** 设置标记的Content */
|
markerContent = `
|
<div style="position:absolute;top:-26px;left:-60px;width:0px;height:0px;">
|
<img id="${id}" src="/static/img/icon/red_server_active.gif" />
|
</div>
|
`
|
} else {
|
/** 设置标记的Content */
|
markerContent = `
|
<div style="position:absolute;top:-12px;left:-58px;width:0px;height:0px;">
|
<img id="${id}" src="/static/img/icon/red_server.png" style="width:36px;height:36px;" />
|
</div>
|
`
|
}
|
}
|
} else if (marker.status === -1) {
|
if (marker.type === '101') {
|
if (marker.isActive) {
|
/** 设置标记的Content */
|
markerContent = `
|
<div style="position:absolute;top:-26px;left:-60px;width:0px;height:0px;">
|
<img id="${id}" src="/static/img/icon/gray_camer_active.gif" />
|
</div>
|
`
|
} else {
|
/** 设置标记的Content */
|
markerContent = `
|
<div style="position:absolute;top:-12px;left:-58px;width:0px;height:0px;">
|
<img id="${id}" src="/static/img/icon/gray_camer.png" style="width:36px;height:36px;" />
|
</div>
|
`
|
}
|
} else if (marker.type === '103') {
|
if (marker.isActive) {
|
/** 设置标记的Content */
|
markerContent = `
|
<div style="position:absolute;top:-26px;left:-60px;width:0px;height:0px;">
|
<img id="${id}" src="/static/img/icon/gray_server_active.gif" />
|
</div>
|
`
|
} else {
|
/** 设置标记的Content */
|
markerContent = `
|
<div style="position:absolute;top:-12px;left:-58px;width:0px;height:0px;">
|
<img id="${id}" src="/static/img/icon/gray_server.png" style="width:36px;height:36px;" />
|
</div>
|
`
|
}
|
}
|
}
|
this.iconImgId = id
|
marker.setContent(markerContent)
|
},
|
/** 设置正常的content */
|
setRedContent(marker) {
|
if (marker === undefined) {
|
return false
|
}
|
/** 设置标记的Content */
|
let markerContent = `
|
<div>
|
<div style="position:absolute;top:-12px;left:-58px;width:36px;height:36px;">
|
<img src="/static/img/icon/red_camer.png" />
|
</div>
|
</div>
|
`
|
marker.setContent(markerContent)
|
},
|
/** 设置鼠标滑动的弹框 */
|
async opentextInfoWindow(marker) {
|
/* 查询设备情况 */
|
let typeArr = await getDeviceType()
|
let typeName
|
if (typeArr && typeArr.success && typeArr.data.length !== 0) {
|
typeArr.data.forEach(item => {
|
if (item.value === marker.data.type) {
|
typeName = item.name
|
}
|
})
|
}
|
let labelHtml = `<div class="pb10">
|
<div style="height:70%;width:100%">
|
<div id="dynamicallyPlayers" style="width:410px;height:287px;" class="flex-center">
|
<div id="img" style="background-image: url('/static/img/map/1111.jpg');width:100%;height:100%" class="img-icon"></div>
|
</div>
|
</div>
|
<div style="height:30%;" class="">
|
<div class="flex-row-between">
|
<div class="flex-row-left">
|
<span>设备名称:${marker.data.name}</span>
|
</div>
|
<div id="toDetails" class="flex-row-right">
|
<a href="javascript:console.log('')">详情</a>
|
</div>
|
</div>
|
|
<div class="flex-row-between">
|
<div class="flex-row-left">
|
<span>设备位置:${marker.data.address}</span>
|
</div>
|
|
</div>
|
</div>
|
</div>`
|
|
this.textInfoWindow.setContent(labelHtml)
|
this.textInfoWindow.open(this.mapObject, marker.getPosition())
|
console.log(
|
document.getElementById('vxg_media_player1'),
|
'this.textInfoWindow.getContent()'
|
)
|
setTimeout(() => {
|
//添加事件
|
if (document.querySelector(`#${this.newMapId} #img`) !== null) {
|
document.querySelector(
|
`#${this.newMapId} #toDetails`
|
).onclick = () => {
|
_this.$emit('toDetails', marker)
|
}
|
document.querySelector(`#${this.newMapId} #img`).onclick = () => {
|
/** 渲染弹框中的视频插件*/
|
console.log('能否走到这一步2')
|
let parent = document.getElementById('dynamicallyPlayers')
|
let child = document.getElementById('img')
|
let child3 = document.getElementById('palyerBox')
|
if (child3) {
|
parent.removeChild(child3)
|
}
|
parent.removeChild(child)
|
this.indexPlayer++
|
var playerId = 'vxg_media_player1' + this.indexPlayer
|
var div = document.createElement('div')
|
div.setAttribute('id', playerId)
|
div.setAttribute('style', 'width:100%;height:100%')
|
parent.appendChild(div)
|
/** 采用海康的视频插件 */
|
let videoParams = {
|
deviceport: marker.data.port,
|
rtspport: '554',
|
ip: marker.data.ip,
|
port: '80',
|
username: marker.data.username,
|
password: marker.data.password,
|
domId: playerId
|
}
|
console.log(videoParams, 'AMap videoParams')
|
const webVideo = new WebVideo(videoParams)
|
webVideo.init()
|
this.$nextTick(() => {
|
webVideo.clickLogin()
|
})
|
}
|
}
|
}, 100)
|
}
|
},
|
mounted() {
|
this.InitMap()
|
},
|
created() {
|
// this.InitMap()
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.map {
|
width: 100%;
|
height: 100%;
|
}
|
.info-top {
|
position: relative;
|
background: none repeat scroll 0 0 #f9f9f9;
|
border-bottom: 1px solid #ccc;
|
border-radius: 5px 5px 0 0;
|
}
|
.number {
|
width: 50px;
|
height: 50px;
|
border-radius: 50%;
|
background-color: aquamarine;
|
}
|
.btn-circle2 {
|
text-align: center;
|
position: absolute;
|
top: 52%;
|
left: -12%;
|
}
|
.imgC {
|
position: absolute;
|
left: -50%;
|
top: 22%;
|
}
|
.smdiv {
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background-color: rgb(89, 34, 238);
|
color: red;
|
position: absolute;
|
top: 105px;
|
left: 27px;
|
}
|
.radius {
|
width: 40px;
|
height: 40px;
|
background-color: aqua;
|
border-radius: 50%;
|
}
|
|
.img1 {
|
position: absolute;
|
left: -55%;
|
top: -33%;
|
}
|
|
.img2 {
|
position: absolute;
|
top: -44%;
|
left: -185%;
|
}
|
.amap-overlays {
|
z-index: 50;
|
cursor: default;
|
}
|
</style>
|
