417 lines
14 KiB
JavaScript
417 lines
14 KiB
JavaScript
|
import { deviceHash } from "../../api/moveDeviceWebsocket.js";
|
|||
|
|
import { mainMap,layuiObj } from "../index.js";
|
|||
|
|
import { popNotify } from "../popNotify.js";
|
|||
|
|
import { iframeVideoUrl } from "../../../../public/js/url.js";
|
|||
|
|
let moveDeviceMarkerHash={}
|
|||
|
|
let moveDeviceCircleAlarmHash={};
|
|||
|
|
let circleRadius=100;
|
|||
|
|
let cusMdevMarkers=null;
|
|||
|
|
let currentAlarmHandleObj={};
|
|||
|
|
function addMoveDeviceCircleAlarmHash(deviceid,circle){
|
|||
|
|
moveDeviceCircleAlarmHash[deviceid]=circle;
|
|||
|
|
}
|
|||
|
|
function removeMoveDeviceCircleAlarmHash(deviceid){
|
|||
|
|
if(deviceid in moveDeviceCircleAlarmHash){
|
|||
|
|
mainMap.removeLayer(moveDeviceCircleAlarmHash[deviceid])
|
|||
|
|
delete moveDeviceCircleAlarmHash[deviceid];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//添加其中1个
|
|||
|
|
function addMoveDeviceMarkerHash(key,marker){
|
|||
|
|
moveDeviceMarkerHash[key]=marker
|
|||
|
|
}
|
|||
|
|
//删除其中1个,设备离线时候删除
|
|||
|
|
function deleteOneMoveDeviceMarkerHash(key){
|
|||
|
|
if(key in moveDeviceMarkerHash){
|
|||
|
|
mainMap.removeLayer(skynetIpcMarkerHash[i])
|
|||
|
|
delete moveDeviceMarkerHash[key];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//删除移动设备的聚合
|
|||
|
|
function deleteMoveDeviceCus(){
|
|||
|
|
if(cusMdevMarkers!=null){
|
|||
|
|
cusMdevMarkers.clearLayers();
|
|||
|
|
cusMdevMarkers=null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function deleteAllMoveDeviceMarker(){
|
|||
|
|
for(var i in moveDeviceMarkerHash){
|
|||
|
|
mainMap.removeLayer(moveDeviceMarkerHash[i])
|
|||
|
|
delete moveDeviceMarkerHash[i]
|
|||
|
|
}
|
|||
|
|
deleteMoveDeviceCus();
|
|||
|
|
}
|
|||
|
|
//更新移动设备的位置信息
|
|||
|
|
function updateMarkerLatlng(obj){
|
|||
|
|
var deviceid=obj["deviceid"];
|
|||
|
|
if(deviceid in moveDeviceMarkerHash){
|
|||
|
|
var latitude=obj["latitude"];
|
|||
|
|
var longitude=obj["longitude"];
|
|||
|
|
var latlng = L.latLng(latitude,longitude);
|
|||
|
|
moveDeviceMarkerHash[deviceid].setLatLng(latlng)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//获取移动设备的Icon
|
|||
|
|
function getMoveDeviceNormalIcon(){
|
|||
|
|
return L.icon({
|
|||
|
|
iconUrl:"./pages/cmddispatch/image/wb_baoan.png",//图片路径
|
|||
|
|
iconSize: [24, 24]//图片大小设置
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//设置设备正常的ICON
|
|||
|
|
function setMoveDeviceAlarmNormalIcon(obj){
|
|||
|
|
var deviceid=obj["deviceid"];
|
|||
|
|
if(deviceid in moveDeviceMarkerHash){
|
|||
|
|
moveDeviceMarkerHash[deviceid].setIcon(getMoveDeviceNormalIcon())
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//画所有移动设备的Marker
|
|||
|
|
function drawMoveDeviceMarker(){
|
|||
|
|
cusMdevMarkers = L.markerClusterGroup({iconCreateFunction: function(cluster) {
|
|||
|
|
return L.divIcon({ html: `<div class="polyMarker-cusmarker">
|
|||
|
|
<img src="./pages/cmddispatch/image/wb_baoan.png">
|
|||
|
|
<span> ${cluster.getChildCount()}</span>
|
|||
|
|
</div>` });
|
|||
|
|
}});
|
|||
|
|
for(let d in deviceHash){
|
|||
|
|
let name=deviceHash[d]["showname"];
|
|||
|
|
let deviceid=deviceHash[d]["deviceid"];
|
|||
|
|
let longitude=deviceHash[d]["longitude"];
|
|||
|
|
let latitude=deviceHash[d]["latitude"];
|
|||
|
|
var iconObj=getMoveDeviceNormalIcon();
|
|||
|
|
let marker=L.marker([latitude,longitude],{
|
|||
|
|
icon: iconObj,//将marker设置为上面引用的图形
|
|||
|
|
riseOnHover:true
|
|||
|
|
});
|
|||
|
|
marker.bindTooltip(name).openTooltip();
|
|||
|
|
marker.on('click',function(e){
|
|||
|
|
showMoveDeviceInfoWindow(deviceHash[d])
|
|||
|
|
})
|
|||
|
|
cusMdevMarkers.addLayer(marker);
|
|||
|
|
addMoveDeviceMarkerHash(deviceid,marker)
|
|||
|
|
}
|
|||
|
|
mainMap.addLayer(cusMdevMarkers);
|
|||
|
|
}
|
|||
|
|
//显示移动设备的info
|
|||
|
|
function showMoveDeviceInfoWindow(obj){
|
|||
|
|
var deviceid=obj["deviceid"];
|
|||
|
|
if(deviceid in moveDeviceMarkerHash){
|
|||
|
|
moveDeviceMarkerHash[deviceid].unbindPopup();
|
|||
|
|
moveDeviceMarkerHash[deviceid].bindPopup(`<div class="moveDeviceInfoWindow">${getMoveDeviceInfoWindowDiv(obj)}</div>`,{maxHeight:260}).openPopup();
|
|||
|
|
mainMap.setView([obj["latitude"],obj["longitude"]], 18);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function getMoveDeviceInfoWindowDiv(obj){
|
|||
|
|
var deviceid=obj["deviceid"];
|
|||
|
|
if(deviceid in deviceHash){
|
|||
|
|
var obj=deviceHash[deviceid];
|
|||
|
|
var showname=deviceHash[deviceid]["showname"];
|
|||
|
|
if("power" in obj){
|
|||
|
|
var devicePower=obj["power"]+"%";
|
|||
|
|
}else{
|
|||
|
|
var devicePower=0+"%";
|
|||
|
|
}
|
|||
|
|
if("arg0" in obj){
|
|||
|
|
var memory=(parseFloat(obj["arg0"]/1024)).toFixed(2)+"(G)";
|
|||
|
|
}else{
|
|||
|
|
var memory=0;
|
|||
|
|
}
|
|||
|
|
if("cardNumber" in obj){
|
|||
|
|
var cardNumber=obj["cardNumber"];
|
|||
|
|
}else{
|
|||
|
|
var cardNumber="未知 ";
|
|||
|
|
}
|
|||
|
|
if("arg1" in obj){
|
|||
|
|
var img=`<img src=${obj["arg1"]}>`
|
|||
|
|
}else{
|
|||
|
|
var img="未知";
|
|||
|
|
}
|
|||
|
|
if("timestamp" in obj){
|
|||
|
|
var timestamp=obj["timestamp"];
|
|||
|
|
}else{
|
|||
|
|
var timestamp="未知";
|
|||
|
|
}
|
|||
|
|
if("locate" in obj){
|
|||
|
|
var locate=obj["locate"];
|
|||
|
|
}else{
|
|||
|
|
var locate="未知";
|
|||
|
|
}
|
|||
|
|
if("appVersion" in obj){
|
|||
|
|
var appVersion=obj["appVersion"];
|
|||
|
|
}else{
|
|||
|
|
var appVersion="未知";
|
|||
|
|
}
|
|||
|
|
if("speed" in obj){
|
|||
|
|
var speed=(obj["speed"]).toFixed(2)+"(KM/H)";
|
|||
|
|
}else{
|
|||
|
|
var speed="未知";
|
|||
|
|
}
|
|||
|
|
var div=`
|
|||
|
|
<div>
|
|||
|
|
<p>
|
|||
|
|
<span>设备名称:</span>
|
|||
|
|
<span>${showname}</span>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<span>设备号:</span>
|
|||
|
|
<span>${deviceid}</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p>
|
|||
|
|
<span>剩余电量:</span>
|
|||
|
|
<span>${devicePower}</span>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<span>剩余内存:</span>
|
|||
|
|
<span>${memory}</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p>
|
|||
|
|
<span>网络:</span>
|
|||
|
|
<span>${img}</span>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<span>速度:</span>
|
|||
|
|
<span>${speed}</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p>
|
|||
|
|
<span>定位时间:</span>
|
|||
|
|
<span>${timestamp}</span>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<span>定位方式:</span>
|
|||
|
|
<span>${locate}</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p>
|
|||
|
|
<span>APP版本:</span>
|
|||
|
|
<span>${appVersion}</span>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<span>SIM卡号:</span>
|
|||
|
|
<span>${cardNumber}</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="moveDeviceOpear">
|
|||
|
|
<span>操作:</span>
|
|||
|
|
<button devicid='${obj["deviceid"]}' class="layui-btn layui-btn-normal deviceopearbtn" onclick='openMoveDeviceNotify(this)'>
|
|||
|
|
<img src="./pages/cmddispatch/infowindow/notify.png">通知
|
|||
|
|
</button>
|
|||
|
|
<button token='${obj["gbChannel"]}' class="layui-btn layui-btn-normal deviceopearbtn" onclick='openMoveDeviceVideo(this)'>
|
|||
|
|
<img src="./pages/cmddispatch/infowindow/video.png">视频
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
`
|
|||
|
|
}
|
|||
|
|
return div;
|
|||
|
|
}
|
|||
|
|
window.openMoveDeviceNotify=function(that){
|
|||
|
|
var deviceid=$(that).attr("devicid")
|
|||
|
|
popNotify(getMdevInfo(deviceid))
|
|||
|
|
}
|
|||
|
|
window.openMoveDeviceVideo=function(that){
|
|||
|
|
var token=$(that).attr("token")
|
|||
|
|
var url=`${iframeVideoUrl}?token=${token}&autoplay=true`
|
|||
|
|
window.open(url);
|
|||
|
|
}
|
|||
|
|
function mdevAlarmHandleDrawCircle(deviceid){
|
|||
|
|
if(deviceid in deviceHash){
|
|||
|
|
alarmHandleCreateData(deviceHash[deviceid]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//创建告警的数据
|
|||
|
|
function alarmHandleCreateData(obj){
|
|||
|
|
currentAlarmHandleObj["longitude"]=obj["longitude"];
|
|||
|
|
currentAlarmHandleObj["latitude"]=obj["latitude"];
|
|||
|
|
currentAlarmHandleObj["deviceid"]=obj["deviceid"];
|
|||
|
|
circleRadius=100;
|
|||
|
|
if(mdevAlarmIndex!=null){
|
|||
|
|
closemdevAlarmIndex();
|
|||
|
|
$(".mdevAlarmInfoBox").empty();
|
|||
|
|
}
|
|||
|
|
showMdevAlarmNearbyDevice();
|
|||
|
|
drawMdevAlarmCircle();
|
|||
|
|
mainMap.setView([obj["latitude"],obj["longitude"]], 18);
|
|||
|
|
}
|
|||
|
|
function drawMdevAlarmCircle(){
|
|||
|
|
var deviceid= currentAlarmHandleObj["deviceid"]
|
|||
|
|
if(!(deviceid in moveDeviceCircleAlarmHash)){
|
|||
|
|
var circle= L.circle([currentAlarmHandleObj["latitude"],currentAlarmHandleObj["longitude"]],{
|
|||
|
|
radius:100, //米
|
|||
|
|
fillColor:"red",
|
|||
|
|
color:"red",
|
|||
|
|
}).addTo(mainMap);
|
|||
|
|
addMoveDeviceCircleAlarmHash(deviceid,circle);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
let mdevAlarmIndex=null;
|
|||
|
|
function showMdevAlarmNearbyDevice(){
|
|||
|
|
if(mdevAlarmIndex==null){
|
|||
|
|
mdevAlarmIndex=layuiObj["layer"].open({
|
|||
|
|
type: 1,
|
|||
|
|
title: false, //不显示标题栏
|
|||
|
|
closeBtn: false,
|
|||
|
|
area: ['306px', '300px'],
|
|||
|
|
shade: 0,
|
|||
|
|
offset: 'lb',
|
|||
|
|
id: new Date().getTime(), //设定一个id，防止重复弹出
|
|||
|
|
btnAlign: 'c',
|
|||
|
|
move:'.layui-move',
|
|||
|
|
moveType: 1, //拖拽模式，0或者1
|
|||
|
|
content:`<div class="popnotify popWindows">
|
|||
|
|
<div class="notifyInfo">
|
|||
|
|
<div class="notifyTitle mdevAlarmInfoTitle">
|
|||
|
|
<span class="layui-move">警报处置</span>
|
|||
|
|
<img src="./pages/cmddispatch/image/closeInfoWindow.png">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="mdevAlarmInfoBox">
|
|||
|
|
<div class="mdevAlarmInfoOpear">
|
|||
|
|
<div>范围:</div>
|
|||
|
|
<div id="rangeSlide" class="range-slider"></div>
|
|||
|
|
<div><span class="rangeSlideValue">100</span>(米)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="mdevAlarmInfoNearby">
|
|||
|
|
${getmdevAlarmInfoNearby()}
|
|||
|
|
</div>
|
|||
|
|
<div class="mdevGroupOpearBtn">
|
|||
|
|
<button class="layui-btn layui-btn-normal deviceopearbtn">
|
|||
|
|
<img src="./pages/cmddispatch/infowindow/notify.png">通知
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>`,
|
|||
|
|
success:function(){
|
|||
|
|
layuiObj.slider.render({
|
|||
|
|
elem: '#rangeSlide',
|
|||
|
|
min: 1,
|
|||
|
|
step:1,
|
|||
|
|
max: 50,
|
|||
|
|
tips: false, //关闭默认提示层
|
|||
|
|
change: function(value){
|
|||
|
|
circleRadius=100;
|
|||
|
|
circleRadius=circleRadius*value;
|
|||
|
|
$(".rangeSlideValue").html(circleRadius);
|
|||
|
|
$(".mdevAlarmInfoNearby").html(getmdevAlarmInfoNearby());
|
|||
|
|
updateMdevCircle();
|
|||
|
|
mdevAlarmInfoNearbyEvent();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
mdevAlarmInfoNearbyEvent();
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
$(".mdevAlarmInfoTitle>img").on('click',()=>{
|
|||
|
|
closemdevAlarmIndex()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
function totalPointDistanceOf(){
|
|||
|
|
var tempArr=[];
|
|||
|
|
for(var i in deviceHash){
|
|||
|
|
var m= distanceOf(currentAlarmHandleObj,deviceHash[i]);
|
|||
|
|
if(m<=circleRadius){
|
|||
|
|
deviceHash[i]['distance']=m;
|
|||
|
|
tempArr.push(deviceHash[i]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return tempArr;
|
|||
|
|
}
|
|||
|
|
function getmdevAlarmInfoNearby(){
|
|||
|
|
var div=`<div>`;
|
|||
|
|
var arr=totalPointDistanceOf()
|
|||
|
|
for(var i=0;i<arr.length;i++){
|
|||
|
|
div+=`<p deviceid='${arr[i]["deviceid"]}'>
|
|||
|
|
<img src="./pages/cmddispatch/image/checkbox2.png" state="select">
|
|||
|
|
<span>${arr[i]["showname"]}</span>
|
|||
|
|
<img src="./pages/cmddispatch/infowindow/notify.png">
|
|||
|
|
</p>`
|
|||
|
|
}
|
|||
|
|
div+=`</div>`;
|
|||
|
|
return div;
|
|||
|
|
}
|
|||
|
|
function mdevAlarmInfoNearbyEvent(){
|
|||
|
|
//单选
|
|||
|
|
$(".mdevAlarmInfoNearby>div>p>img:first-child").off('click');
|
|||
|
|
$(".mdevAlarmInfoNearby>div>p>img:first-child").on('click',function(){
|
|||
|
|
var state=$(this).attr("state");
|
|||
|
|
if(state=="noselect"){
|
|||
|
|
var img="./pages/cmddispatch/image/checkbox2.png";
|
|||
|
|
$(this).attr("state","select").attr("src",img)
|
|||
|
|
}else{
|
|||
|
|
var img="./pages/cmddispatch/image/checkbox1.png";
|
|||
|
|
$(this).attr("state","noselect").attr("src",img)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
$(".mdevAlarmInfoNearby>div>p>img:last-child").off('click');
|
|||
|
|
$(".mdevAlarmInfoNearby>div>p>img:last-child").on('click',function(){
|
|||
|
|
var deviceid=$(this).parent().attr("deviceid");
|
|||
|
|
popNotify(getMdevInfo(deviceid))
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
$(".mdevGroupOpearBtn").off('click');
|
|||
|
|
$(".mdevGroupOpearBtn").on('click',function(){
|
|||
|
|
var stateArr=$(".mdevAlarmInfoNearby>div>p>img:nth-child(1)")
|
|||
|
|
var deviceInfoArr=[];
|
|||
|
|
for(var i=0;i<stateArr.length;i++){
|
|||
|
|
var thisState=stateArr[i];
|
|||
|
|
var stateValue=$(thisState).attr("state");
|
|||
|
|
if(stateValue=="select"){
|
|||
|
|
var deviceid=$(thisState).parent().attr("deviceid")
|
|||
|
|
if(deviceid in deviceHash){
|
|||
|
|
deviceInfoArr.push(deviceHash[deviceid])
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
popNotify(deviceInfoArr);
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
function getMdevInfo(deviceid){
|
|||
|
|
var arr=[];
|
|||
|
|
if(deviceid in deviceHash){
|
|||
|
|
arr.push(deviceHash[deviceid]);
|
|||
|
|
}
|
|||
|
|
return arr;
|
|||
|
|
}
|
|||
|
|
function closemdevAlarmIndex(){
|
|||
|
|
if(mdevAlarmIndex!=null){
|
|||
|
|
layuiObj["layer"].close(mdevAlarmIndex);
|
|||
|
|
mdevAlarmIndex=null;
|
|||
|
|
removeMoveDeviceCircleAlarmHash(currentAlarmHandleObj["deviceid"])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function updateMdevCircle(){
|
|||
|
|
moveDeviceCircleAlarmHash[currentAlarmHandleObj["deviceid"]].setRadius(circleRadius);
|
|||
|
|
}
|
|||
|
|
//计算2点之间的距离
|
|||
|
|
function distanceOf(p1, p2) {
|
|||
|
|
var lat_start=p1["latitude"];
|
|||
|
|
var lng_start=p1["longitude"];
|
|||
|
|
var lat_end=p2["latitude"];
|
|||
|
|
var lng_end=p2["longitude"];
|
|||
|
|
return L.latLng([lat_start,lng_start]).distanceTo([lat_end,lng_end]);
|
|||
|
|
}
|
|||
|
|
export {
|
|||
|
|
drawMoveDeviceMarker,
|
|||
|
|
deleteAllMoveDeviceMarker,
|
|||
|
|
updateMarkerLatlng,
|
|||
|
|
moveDeviceMarkerHash,
|
|||
|
|
setMoveDeviceAlarmNormalIcon,
|
|||
|
|
deleteOneMoveDeviceMarkerHash,
|
|||
|
|
closemdevAlarmIndex,
|
|||
|
|
showMoveDeviceInfoWindow,
|
|||
|
|
mdevAlarmHandleDrawCircle,
|
|||
|
|
alarmHandleCreateData,
|
|||
|
|
getMoveDeviceInfoWindowDiv
|
|||
|
|
}
|