<template>
|
<div :id="newMapId" class="map"></div>
|
</template>
|
<script>
|
/* eslint-disable */
|
import { findInArrJson } from '@/components/common/util.js'
|
import {getDeviceType,getDeviceBrand,getDevSnapshot} from '@/server/home.js'
|
export default {
|
components: {
|
|
},
|
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: []
|
}
|
},
|
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
|
})
|
/** 添加地图插件 */
|
AMap.plugin(['AMap.ToolBar'],function(){
|
map.addControl(new AMap.ToolBar({
|
// 简易缩放模式，默认为 false
|
liteStyle: true
|
}))
|
})
|
/** 获取品牌 */
|
this.getDeviceBrand()
|
this.mapObject = map
|
//创建全局弹窗
|
this.textInfoWindow = new AMap.InfoWindow({
|
isCustom: true,
|
autoMove: true,
|
closeWhenClickMap: true,
|
size: new AMap.Size(449, 427),
|
offset: new AMap.Pixel(5, -35)
|
})
|
this.textInfoWindow2 = new AMap.InfoWindow({
|
isCustomL: true,
|
autoMove: false,
|
closeWhenClickMap: true,
|
size: new AMap.Size(430, 410),
|
offset: new AMap.Pixel(0, -20)
|
})
|
|
},
|
amapPto(lng, lat) {
|
if (lng && lat) {
|
this.mapObject.panTo(new AMap.LngLat(lng, lat))
|
}
|
},
|
/** 设备marker标记点 */
|
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
|
}
|
/** 摄像头全局对象 */
|
let cameraMarkers = []
|
/** 渲染marker */
|
console.log(mapData,'mapData')
|
for(let i = 0; i < mapData.length; i++){
|
if (
|
mapData[i].longitude &&
|
mapData[i].latitude &&
|
mapData[i].longitude !== 'None' &&
|
mapData[i].latitude !== 'None'
|
) {
|
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)
|
})
|
let marker
|
if(mapData[i].status === 0){
|
/** 状态0为正常 */
|
if(mapData[i].type === '101'){
|
/** 101 摄像机 */
|
marker = new AMap.Marker({
|
position: pt,
|
icon:cameraIcon_green,
|
offset: new AMap.Pixel(-25, -40)
|
})
|
marker.Icon_original = cameraIcon_green
|
marker.Icon_active = cameraIcon_green_active
|
} else if(mapData[i].type === '103'){
|
/** 103分析设备（服务器） */
|
marker = new AMap.Marker({
|
position: pt,
|
icon:serverIcon_green,
|
offset: new AMap.Pixel(-25, -40)
|
})
|
marker.Icon_original = serverIcon_green
|
marker.Icon_active = serverIcon_green_active
|
}
|
} 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_active = cameraIcon_red_active
|
} 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_active = serverIcon_red_active
|
}
|
} 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_active = cameraIcon_gray_active
|
} 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_active = serverIcon_gray_active
|
}
|
}
|
if(marker === undefined){
|
return false
|
}
|
this.mapObject.add(marker)
|
/** 设置标注点可拖拽 测试*/
|
// marker.enableDragging()
|
|
/** 将设备信息存储到marker中 */
|
marker.index = i
|
marker.data = mapData[i]
|
marker.id = mapData[i].id
|
marker.visibility = 'none'
|
|
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
|
}
|
})
|
}
|
if(marker.data && !marker.data.basePhoto){
|
this.$set(marker.data,'basePhoto','/static/img/map/1111.jpg')
|
}
|
// 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(/httpImage/`+marker.data.basePhoto+`);width:100%;height:100%" class="img-icon"></div>
|
// </div>
|
// <div class="model-palyer-box" id="palyerBox">
|
// <i class="fas fa-play-circle model-palyer"></i>
|
// </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%;visibility:${marker.visibility};" class="flex-center">
|
// <button id="saveLnglat" type="button" class="btn btn-secondary btn-sm">保存坐标</button>
|
// </div>
|
// <style>
|
// .info-bg{
|
// background: #f8f8f8;
|
// }
|
// .model-palyer-box{
|
// position: absolute;
|
// width: 100%;
|
// height: 76%;
|
// 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>`
|
|
//从检索复制过来的labelHtml
|
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(/httpImage/` +
|
marker.data.basePhoto +
|
`);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="pt5 pb10 pl10 pr10 info-bg">
|
<div class="flex-row-between">
|
<div class="flex-row-left">
|
<span>设备类型:${typeName}</span>
|
</div>
|
</div>
|
<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">
|
<span>设备位置:${marker.data.address}</span>
|
</div>
|
<div id="toDetails" class="flex-row-right ">
|
<a href="javascript:console.log('')"><i class="fa fa-list-alt f20 text-primary mr10" style="position:relative;top:5px;margin-right:13px;"></i>详情</a>
|
</div>
|
</div>
|
<div class="flex-row-between">
|
<div class="flex-row-left">
|
<span>设备状态:${marker.data.status === 0?'在线':'故障'}</span>
|
</div>
|
|
<div class="flex-row-right ">
|
<a id="toEdit" href="javascript:console.log('')" style="display:${marker.visibility==='none'?'inline':'none'};"><i class="fas fa-edit f20 text-primary mr10" style="position:relative;top:5px;"></i>编辑</a>
|
<div style="width:100%;display:${marker.visibility};position:relative;top:5px" class="flex-center">
|
<button id="saveLnglat" type="button" class="btn btn-secondary btn-sm text-primary">保存坐标</button>
|
</div>
|
</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()')
|
// var playerId = 'vxg_media_player1'+this.indexPlayer
|
// var player = vxgplayer(playerId)
|
// player.play()
|
setTimeout(() => {
|
//添加事件
|
// console.log(document.querySelector(
|
// `#${this.newMapId} #toDetails`
|
// ),'看看docu是否渲染成功')
|
if(document.querySelector(`#${this.newMapId} #img`) !== null){
|
document.querySelector(
|
`#${this.newMapId} #toDetails`
|
).onclick = () => {
|
_this.$emit('toDetails', marker)
|
}
|
document.querySelector(
|
`#${this.newMapId} #toEdit`
|
).onclick = () => {
|
_this.setDrag(marker)
|
}
|
document.querySelector(
|
`#${this.newMapId} #saveLnglat`
|
).onclick = () => {
|
_this.saveLnglat(marker)
|
}
|
document.querySelector(
|
`#${this.newMapId} #dynamicallyPlayers`
|
).onclick = async () => {
|
/** 渲染弹框中的视频插件*/
|
let bigImg = await this.getNowBigImg(marker.id)
|
this.$set(marker.data,'basePhoto',bigImg)
|
console.log(marker.data,'=====更新图片===')
|
|
// console.log('能否走到这一步')
|
let parent=document.getElementById("dynamicallyPlayers");
|
let child=document.getElementById("img");
|
parent.removeChild(child);
|
this.indexPlayer++
|
var playerId = 'vxg_media_player1'+this.indexPlayer
|
var div = document.createElement('div')
|
div.setAttribute("id", playerId)
|
div.setAttribute("class", "vxgplayer")
|
// console.log(document.getElementById('toDetails'),'this.textInfoWindow.getContent()')
|
var runtimePlayers = document.getElementById('dynamicallyPlayers')
|
runtimePlayers.appendChild(div)
|
console.log(marker.data.url,'vxgplayer')
|
vxgplayer(playerId, {
|
// url: 'rtsp://admin:a1234567@192.168.1.64:8000/h264/ch1/main/av_stream',
|
url: marker.data.url,
|
nmf_path: 'media_player.nmf',
|
nmf_src: '/static/vxgplayer-1.8.31/pnacl/Release/media_player.nmf',
|
latency: 300000,
|
width: "100%",
|
height: "100%",
|
aspect_ratio_mode: 1,
|
autohide: 3,
|
controls: true,
|
connection_timeout: 5000,
|
connection_udp: 0,
|
custom_digital_zoom: false
|
}).ready(function(){
|
console.log(' =>ready player '+playerId)
|
// 等后面拼好流地址后再进行赋值
|
// vxgplayer(playerId).src(mapData[i].url)
|
// vxgplayer(playerId).play()
|
console.log(' <=ready player '+playerId)
|
})
|
}
|
}
|
}, 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())
|
// console.log(document.getElementById('vxg_media_player1'),'this.textInfoWindow.getContent()')
|
// var playerId = 'vxg_media_player1'+this.indexPlayer
|
// var player = vxgplayer(playerId)
|
// player.play()
|
setTimeout(() => {
|
/** 渲染弹框中的视频插件*/
|
// console.log('能否走到这一步')
|
// this.indexPlayer++
|
// var playerId = 'vxg_media_player2'+this.indexPlayer
|
// var div = document.createElement('div')
|
// div.setAttribute("id", playerId)
|
// div.setAttribute("class", "vxgplayer")
|
// // console.log(document.getElementById('toDetails'),'this.textInfoWindow.getContent()')
|
// var runtimePlayers = document.getElementById('dynamicallyPlayers2')
|
// runtimePlayers.appendChild(div)
|
// // console.log(vxgplayer,'vxgplayer')
|
// vxgplayer(playerId, {
|
// url: 'rtsp://admin:a1234567@192.168.1.201:554/h264/ch1/main/av_stream',
|
// nmf_path: 'media_player.nmf',
|
// nmf_src: '/static/vxgplayer-1.8.31/pnacl/Release/media_player.nmf',
|
// latency: 300000,
|
// width: "330",
|
// height: "230",
|
// aspect_ratio_mode: 1,
|
// autohide: 3,
|
// controls: true,
|
// connection_timeout: 5000,
|
// connection_udp: 0,
|
// custom_digital_zoom: false
|
// }).ready(function(){
|
// // console.log(' =>ready player '+playerId)
|
// // 等后面拼好流地址后再进行赋值
|
// // vxgplayer(playerId).src(mapData[i].url)
|
// // vxgplayer(playerId).play()
|
// // console.log(' <=ready player '+playerId)
|
// })
|
//添加事件
|
// console.log(document.querySelector(
|
// `#${this.newMapId} #toDetails2`
|
// ),'看看docu是否渲染成功')
|
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() =>{
|
console.log('关闭InfoWin')
|
this.textInfoWindow.close()
|
}
|
|
const toDetails = async(marker) =>{
|
console.log(marker,'跳转详情页面')
|
this.$emit('toDetails', marker.target)
|
}
|
|
const mouseUp = async(marker) =>{
|
this.textInfoWindow.close()
|
}
|
|
marker.on('mouseover', opentextInfoWindow)
|
marker.on('mouseout', closeInfoWin)
|
marker.on('click',toDetails,marker)
|
marker.on('dragstart',mouseUp,marker)
|
marker.on('dragend',opentextInfoWindow)
|
// AMap.event.addListener(marker, 'mousemove', opentextInfoWindow)
|
// AMap.event.addListener(marker,'mouseout',closeInfoWin)
|
// AMap.event.addListener(marker, 'click', toDetails(marker))
|
// AMap.event.addListenerOnce(marker, 'mousemove', mouseOve)
|
}
|
}
|
},
|
/** 设置高亮 */
|
setActiveDeviceMarkers(arr){
|
let idArr = arr || []
|
let markers = this.deviceMarkers || []
|
|
/** 在设置高亮之前先把之前设置的高亮去掉 */
|
if (idArr.length === 0) {
|
return false
|
}
|
|
let activeDevices = []
|
//遍历id查找高亮
|
idArr.forEach((idItem, index) => {
|
for (let iteam of markers) {
|
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')
|
}
|
}
|
}
|
})
|
//设置高亮图标
|
for (let val of activeDevices) {
|
val.setIcon(val.Icon_active)
|
// 设置标记点跳动
|
// val.setAnimation('AMAP_ANIMATION_BOUNCE')
|
// val.setOffset(new AMap.Pixel(-47, -80))
|
val.setOffset(new AMap.Pixel(-25, -40))
|
}
|
},
|
/** 取消高亮 */
|
removeActiveDeviceMarkers(){
|
let markers = this.deviceMarkers || []
|
for (let iteam of markers) {
|
// if(iteam.data.status === 0){
|
// iteam.setIcon(iteam.Icon_original)
|
// } else if(iteam.data.status === 1){
|
// iteam.setIcon(iteam.Icon_unOnline)
|
// }
|
iteam.setIcon(iteam.Icon_original)
|
iteam.setOffset(new AMap.Pixel(-25, -40))
|
iteam.setAnimation('AMAP_ANIMATION_NONE')
|
}
|
},
|
/** 监听信息窗口打开 */
|
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','inline')
|
},
|
/** 移动后保存坐标 */
|
saveLnglat(data){
|
// console.log(data,'保存拖拽后的marker')
|
data.setDraggable(false)
|
this.$set(data,'visibility','none')
|
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 ''
|
}
|
},
|
mounted() {
|
this.InitMap()
|
},
|
created() {
|
// this.InitMap()
|
}
|
}
|
</script>
|
<style>
|
.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;
|
}
|
|
.amap-overlays {
|
z-index: 50;
|
cursor: default;
|
}
|
</style>
|
