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
|
||
} |