|
|
|
|
@ -4,7 +4,7 @@
|
|
|
|
|
* @Author: JC9527
|
|
|
|
|
* @Date: 2024-01-09 23:08:15
|
|
|
|
|
* @LastEditors: JC9527
|
|
|
|
|
* @LastEditTime: 2024-03-14 16:12:31
|
|
|
|
|
* @LastEditTime: 2024-03-20 13:15:38
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="map-main">
|
|
|
|
|
@ -621,9 +621,31 @@ export default {
|
|
|
|
|
visible: false, // 卫星底图是否显示
|
|
|
|
|
onIcon:null,
|
|
|
|
|
offIcon:null,
|
|
|
|
|
videoPoint:[],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 网页刷新/浏览器关闭
|
|
|
|
|
beforeunloadHandler(event){
|
|
|
|
|
if(this.destID && this.imei) {
|
|
|
|
|
this._beforeUnload_time = new Date().getTime();
|
|
|
|
|
videoSurveillance({destId:this.destID,imei:this.imei,msgType:0}).then(res=>{
|
|
|
|
|
this.destID = "";
|
|
|
|
|
this.imei = "";
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
unloadHandler(e){
|
|
|
|
|
this._gap_time = new Date().getTime()-this._beforeUnload_time;
|
|
|
|
|
if(this._gap_time <= 5){
|
|
|
|
|
if(this.destID && this.imei) {
|
|
|
|
|
videoSurveillance({destId:this.destID,imei:this.imei,msgType:0}).then(res=>{
|
|
|
|
|
this.destID = "";
|
|
|
|
|
this.imei = "";
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
init(map) {
|
|
|
|
|
this.map = map;
|
|
|
|
|
// o.setMapStyle('amap://styles/darkblue')
|
|
|
|
|
@ -958,7 +980,7 @@ export default {
|
|
|
|
|
imgSrc = context.data[0].imgSrc == '1' ? require("../../../assets/images/icon/icon1.png") : require("../../../assets/images/icon/offLine1.png")
|
|
|
|
|
}
|
|
|
|
|
var content = `<div class="markerStyles"><div class="marker-Text" style="width:${context.data[0].text.length * 15}px">${context.data[0].text}</div><img src="${imgSrc}" alt=""></div>`;
|
|
|
|
|
var offset = new AMap.Pixel(-30.5, -48.5);
|
|
|
|
|
var offset = new AMap.Pixel(-32.5, -48.5);
|
|
|
|
|
context.marker.setContent(content);
|
|
|
|
|
context.marker.setOffset(offset);
|
|
|
|
|
context.marker.on('click',(ev)=>{
|
|
|
|
|
@ -1064,7 +1086,7 @@ export default {
|
|
|
|
|
this.mapLoading = status ? false : true;
|
|
|
|
|
if(id == 1) {
|
|
|
|
|
this.personLine = [];
|
|
|
|
|
let videoPoint = [];
|
|
|
|
|
this.videoPoint = [];
|
|
|
|
|
// 获取人员信息
|
|
|
|
|
getDeviceList().then((res) => {
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
@ -1083,12 +1105,12 @@ export default {
|
|
|
|
|
obj.userId = element.userId;
|
|
|
|
|
obj.info = element;
|
|
|
|
|
// this.markers.push(obj)
|
|
|
|
|
videoPoint.push(obj)
|
|
|
|
|
this.videoPoint.push(obj)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.count = videoPoint.length;
|
|
|
|
|
this.count = this.videoPoint.length;
|
|
|
|
|
AMap.plugin(['AMap.MarkerCluster'],()=>{
|
|
|
|
|
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
|
|
|
|
|
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
|
|
|
|
|
gridSize: 60, // 设置网格像素大小
|
|
|
|
|
styles: sts,
|
|
|
|
|
maxZoom: 15,
|
|
|
|
|
@ -1117,7 +1139,7 @@ export default {
|
|
|
|
|
ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:500}, data).then(res=>{
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
let videoPoint = [];
|
|
|
|
|
this.videoPoint = [];
|
|
|
|
|
res.result.records.forEach((element)=>{
|
|
|
|
|
let obj = {position:[]};
|
|
|
|
|
let location = element.location?.split(',');
|
|
|
|
|
@ -1135,11 +1157,11 @@ export default {
|
|
|
|
|
obj.imgSrc = ico2;
|
|
|
|
|
obj.info = element
|
|
|
|
|
// this.markers.push(obj)
|
|
|
|
|
videoPoint.push(obj)
|
|
|
|
|
this.videoPoint.push(obj)
|
|
|
|
|
})
|
|
|
|
|
this.count = videoPoint.length;
|
|
|
|
|
this.count = this.videoPoint.length;
|
|
|
|
|
AMap.plugin(['AMap.MarkerCluster'],()=>{
|
|
|
|
|
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
|
|
|
|
|
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
|
|
|
|
|
gridSize: 60, // 设置网格像素大小
|
|
|
|
|
maxZoom: 17,
|
|
|
|
|
styles: sts,
|
|
|
|
|
@ -1164,7 +1186,7 @@ export default {
|
|
|
|
|
getCarManageList({pageNum: 1,pageSize: 1000}).then(res=>{
|
|
|
|
|
// console.log('车辆',res);
|
|
|
|
|
this.carLine = res.rows
|
|
|
|
|
let videoPoint = [];
|
|
|
|
|
this.videoPoint = [];
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
res.rows.forEach((element)=>{
|
|
|
|
|
// console.log(element);
|
|
|
|
|
@ -1176,13 +1198,13 @@ export default {
|
|
|
|
|
obj.imgSrc = ico4;
|
|
|
|
|
obj.info = element;
|
|
|
|
|
// this.markers.push(obj)
|
|
|
|
|
videoPoint.push(obj)
|
|
|
|
|
this.videoPoint.push(obj)
|
|
|
|
|
})
|
|
|
|
|
this.count = videoPoint.length;
|
|
|
|
|
this.count = this.videoPoint.length;
|
|
|
|
|
|
|
|
|
|
AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
|
|
|
|
|
|
|
|
|
|
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
|
|
|
|
|
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
|
|
|
|
|
gridSize: 60, // 设置网格像素大小
|
|
|
|
|
styles: sts,
|
|
|
|
|
maxZoom: 15,
|
|
|
|
|
@ -1206,7 +1228,7 @@ export default {
|
|
|
|
|
getVideoPageEq({pageNo:1,pageSize:1000}).then(res=>{
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
// console.log(res,"res");
|
|
|
|
|
let videoPoint = [];
|
|
|
|
|
this.videoPoint = [];
|
|
|
|
|
res.data.forEach((element)=>{
|
|
|
|
|
let obj = {position:[]};
|
|
|
|
|
let lonLat;
|
|
|
|
|
@ -1223,11 +1245,11 @@ export default {
|
|
|
|
|
obj.imgSrc = ico5;
|
|
|
|
|
obj.info = element
|
|
|
|
|
// this.markers.push(obj)
|
|
|
|
|
videoPoint.push(obj)
|
|
|
|
|
this.videoPoint.push(obj)
|
|
|
|
|
})
|
|
|
|
|
this.count = videoPoint.length;
|
|
|
|
|
this.count = this.videoPoint.length;
|
|
|
|
|
AMap.plugin(['AMap.MarkerCluster'],()=>{
|
|
|
|
|
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
|
|
|
|
|
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
|
|
|
|
|
gridSize: 60, // 设置网格像素大小
|
|
|
|
|
maxZoom: 15,
|
|
|
|
|
styles: sts,
|
|
|
|
|
@ -1251,7 +1273,7 @@ export default {
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
getStreetShopList({pageSize:500,pageNum:1}).then(res=>{
|
|
|
|
|
let videoPoint = [];
|
|
|
|
|
this.videoPoint = [];
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
res.rows.forEach((element)=>{
|
|
|
|
|
let obj = {position:[]};
|
|
|
|
|
@ -1262,13 +1284,13 @@ export default {
|
|
|
|
|
obj.imgSrc = ico6;
|
|
|
|
|
obj.info = element;
|
|
|
|
|
// this.markers.push(obj)
|
|
|
|
|
videoPoint.push(obj)
|
|
|
|
|
this.videoPoint.push(obj)
|
|
|
|
|
})
|
|
|
|
|
this.count = videoPoint.length;
|
|
|
|
|
this.count = this.videoPoint.length;
|
|
|
|
|
|
|
|
|
|
AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
|
|
|
|
|
|
|
|
|
|
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
|
|
|
|
|
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
|
|
|
|
|
gridSize: 60, // 设置网格像素大小
|
|
|
|
|
styles: sts,
|
|
|
|
|
maxZoom: 15,
|
|
|
|
|
@ -1424,6 +1446,7 @@ export default {
|
|
|
|
|
this.player.detachMediaElement()
|
|
|
|
|
this.player.destroy()
|
|
|
|
|
this.player = null
|
|
|
|
|
videoSurveillance({destId:this.personInfo.userId,imei:this.personInfo.info.imei,msgType:0})
|
|
|
|
|
if(this.timer) clearInterval(this.timer)
|
|
|
|
|
},
|
|
|
|
|
// 位置分享
|
|
|
|
|
@ -1789,8 +1812,6 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else if(id == 3 && this.actionMap == 3){
|
|
|
|
|
// console.log("进来了");
|
|
|
|
|
// console.log(this.carInfo);
|
|
|
|
|
this.carLine.forEach(car=>{
|
|
|
|
|
if(item.id == car.id) {
|
|
|
|
|
this.map.setZoomAndCenter(16,[car.longitude,car.latitude]);
|
|
|
|
|
@ -2455,7 +2476,7 @@ export default {
|
|
|
|
|
var restaurants = res.result.records;
|
|
|
|
|
let a = [];
|
|
|
|
|
restaurants.forEach((per=>{
|
|
|
|
|
let item = { value: per.name, location: per.location ? per.location : "" };
|
|
|
|
|
let item = { value: per.name, location: per.location ? per.location : "" ,info: per };
|
|
|
|
|
a.push(item);
|
|
|
|
|
}))
|
|
|
|
|
cb(a);
|
|
|
|
|
@ -2467,10 +2488,11 @@ export default {
|
|
|
|
|
} else if(this.actionMap == 5) {
|
|
|
|
|
// 店铺的搜索
|
|
|
|
|
getStreetShopList({shopName:queryString,pageSize:20,pageNum:1}).then(res=>{
|
|
|
|
|
// console.log(res,"店铺信息")
|
|
|
|
|
var restaurants = res.rows;
|
|
|
|
|
let a = [];
|
|
|
|
|
restaurants.forEach((per=>{
|
|
|
|
|
let item = { value: per.shopName, imei: per.id, longitude:per.longitude, latitude:per.latitude };
|
|
|
|
|
let item = { value: per.shopName, info: per, longitude:per.longitude, latitude:per.latitude };
|
|
|
|
|
a.push(item);
|
|
|
|
|
}))
|
|
|
|
|
cb(a);
|
|
|
|
|
@ -2480,19 +2502,41 @@ export default {
|
|
|
|
|
// 点击事件
|
|
|
|
|
handleSelect(item){
|
|
|
|
|
// console.log(item,"item");
|
|
|
|
|
// console.log(this.actionMap,"this.actionMap");
|
|
|
|
|
this.getMarkers(this.actionMap);
|
|
|
|
|
if(this.actionMap == 1) {
|
|
|
|
|
if(item.imei) {
|
|
|
|
|
// 根据imei查询设备
|
|
|
|
|
getDeviceList({imei:item.imei}).then(res=>{
|
|
|
|
|
if(res.code == 200 && res.data.msg == "操作成功") {
|
|
|
|
|
this.map.setZoomAndCenter(16,[res.data.obj[0].longitude,res.data.obj[0].latitude]);
|
|
|
|
|
// if(this.cluster) {
|
|
|
|
|
// this.cluster.setMap(null)
|
|
|
|
|
// }
|
|
|
|
|
// this.map.setZoomAndCenter(16,[res.data.obj[0].longitude,res.data.obj[0].latitude]);
|
|
|
|
|
getUserByImei({imei:item.imei}).then(resTwo=>{
|
|
|
|
|
if(resTwo.code == 200) {
|
|
|
|
|
this.map.setZoomAndCenter(18,[res.data.obj[0].longitude,res.data.obj[0].latitude]);
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
this.personInfo.position = [res.data.obj[0].longitude,res.data.obj[0].latitude];
|
|
|
|
|
this.personInfo.info = res.data.obj[0];
|
|
|
|
|
this.personInfo.personinfo = resTwo.data[0];
|
|
|
|
|
this.personInfo.visible = true;
|
|
|
|
|
},1500)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return getUserByImei({imei:item.imei})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
} else if (this.actionMap == 2) {
|
|
|
|
|
if(item.location) {
|
|
|
|
|
let location = item.location?.split(',');
|
|
|
|
|
this.map.setZoomAndCenter(16,[location[0],location[1]]);
|
|
|
|
|
this.map.setZoomAndCenter(18,[location[0],location[1]]);
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
this.eventInfo.position = [location[0],location[1]];
|
|
|
|
|
this.eventInfo.info = item.info;
|
|
|
|
|
this.eventInfo.visible = true;
|
|
|
|
|
},1500)
|
|
|
|
|
}
|
|
|
|
|
} else if (this.actionMap == 3) {
|
|
|
|
|
// 车辆的搜索
|
|
|
|
|
@ -2501,9 +2545,18 @@ export default {
|
|
|
|
|
} else if(this.actionMap == 5) {
|
|
|
|
|
// 店铺的搜索
|
|
|
|
|
if(item.longitude && item.latitude) {
|
|
|
|
|
this.map.setZoomAndCenter(16,[item.longitude,item.latitude]);
|
|
|
|
|
let longitude = item.longitude
|
|
|
|
|
let latitude = item.latitude
|
|
|
|
|
|
|
|
|
|
this.map.setZoomAndCenter(18,[longitude,latitude]);
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
this.shopInfo.position = [longitude,latitude];
|
|
|
|
|
this.shopInfo.info = item.info;
|
|
|
|
|
this.shopInfo.visible = true;
|
|
|
|
|
},1500)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
// 新增事件的点击事件
|
|
|
|
|
createdTask() {
|
|
|
|
|
@ -2630,6 +2683,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 坐标转换
|
|
|
|
|
wgs84togcj02(lng, lat) {
|
|
|
|
|
// 定义一些常量
|
|
|
|
|
var PI = 3.1415926535897932384626;
|
|
|
|
|
@ -2676,9 +2730,14 @@ export default {
|
|
|
|
|
this.getPersonIcon();
|
|
|
|
|
this.getCarList();
|
|
|
|
|
this.getrobotToken();
|
|
|
|
|
|
|
|
|
|
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
|
|
|
|
|
window.addEventListener('unload', e => this.unloadHandler(e));
|
|
|
|
|
// this.markerInterval();
|
|
|
|
|
},
|
|
|
|
|
destroyed(){
|
|
|
|
|
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
|
|
|
|
|
window.removeEventListener('unload', e => this.unloadHandler(e));
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
