anxiao_web/pages/video/js/marker/moveDeviceMarker.js

import { deviceHash } from "../../api/moveDeviceWebsocket.js";
import { closeInfoWindow } from "./schoolMarker.js";
import { mainMap } from "../index.js";
import { aloneOpenVideo } from "../openMoveDeviceVideo.js";
let moveDeviceMarkerHash={};
function addMoveDeviceMarkerHash(key,value){
    moveDeviceMarkerHash[key] = value;
}


//删除marker
function delMoveDeviceMarkerHash(key){
    if(key in moveDeviceMarkerHash){
        mainMap.remove(moveDeviceMarkerHash[key]);
        delete moveDeviceMarkerHash[key];
    }
}

function updateMoveDeviceMarker(obj){	
    var deviceid=obj["deviceid"];	
    var status = obj["status"];
    if(deviceid in moveDeviceMarkerHash){ 
        var longitude=obj["longitude"];
        var latitude=obj["latitude"];
        moveDeviceMarkerHash[deviceid].setPosition([longitude,latitude]);	
    }else{
        //添加marker的位置
        if(status=="online"){
            addMoveDeviceMarker(obj); 
        }else{
            delMoveDeviceMarkerHash(deviceid)
        }   
    }
}



//添加marker
function addMoveDeviceMarker(obj){	
    var deviceid=obj["deviceid"];
    var longitude=obj["longitude"];
    var latitude=obj["latitude"];
    var img=`./pages/cmddispatch/image/baoAnTitle.svg`
    var content=`
    <div class="indexMarkerImg" style="background:#fff;">
        <img src='${img}'>
    </div>`;
    var deviceMarker = new AMap.Marker({//用来画marker 
       content:content,
        position: new AMap.LngLat(longitude, latitude),
        offset: new AMap.Pixel(-21, -19),
        zIndex:14
    });	
    deviceMarker.setMap(mainMap);
    deviceMarker.on('click',function(){
        openMoveDeviceInfoWindow(obj)
    })
    addMoveDeviceMarkerHash(deviceid,deviceMarker); 
}

function openMoveDeviceInfoWindow(obj){
    var deviceInfoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content:createMoveDeviceInfowindow(obj),
        offset: new AMap.Pixel(5, 10)
    });
    deviceInfoWindow.open(mainMap,[obj["longitude"],obj["latitude"]]);
    mainMap.setCenter([obj["longitude"],obj["latitude"]]);
   // mainMap.setZoomAndCenter(18,[obj["longitude"],obj["latitude"]])
}


function createMoveDeviceInfowindow(obj){
    var mdinfo = document.createElement("div");
    mdinfo.className = "mdinfo";
    //定义顶部标题
    var mdinfoTop = document.createElement("div");
    var userinfotop = document.createElement("div");

    var closeX = document.createElement("img");
    mdinfoTop.className = "mdinfoTop";  

    var userinfoSpan=document.createElement("span");
    userinfoSpan.innerHTML=`<span>${obj["name"]}</span>`
    var deviceinfoSpan=document.createElement("span");
    deviceinfoSpan.innerHTML=`<span>${obj["borough"]}</span>`

    userinfoSpan.className="mapTitleBg";
    userinfotop.append(userinfoSpan);
    //userinfotop.append(deviceinfoSpan);
  
    
    closeX.src = "./pages/cmddispatch/image/closeInfoWindow.png";
    mdinfoTop.append(userinfotop);
    mdinfoTop.append(closeX);
    closeX.onclick=closeInfoWindow;

    // userinfoSpan.onclick=function(){
    //     mdinfoCenter.innerHTML=getSchoolInfoDiv(obj);
    //     userinfoSpan.className="mapTitleBg";
    //     deviceinfoSpan.className="";
    // }

    // deviceinfoSpan.onclick=function(){
    //    mdinfoCenter.innerHTML=showDeviceInfoWindow(deviceid)
    //     userinfoSpan.className="";
    //     deviceinfoSpan.className="mapTitleBg";
    // }

    //定义中间部分
    var mdinfoCenter=document.createElement("div");
    mdinfoCenter.className = "mdinfoCenter";
    mdinfoCenter.innerHTML=showDeviceInfoWindow(obj);
    //定义底部操作按钮
    var mdinfoBottom=document.createElement("div");
    mdinfoBottom.className = "mdinfoBottom";

    var mdVideo=document.createElement("button");

    mdVideo.className="layui-btn layui-btn-normal deviceopearbtn";
  
    mdVideo.innerHTML="<img src='./pages/cmddispatch/infowindow/video.png'>视频";
   
    mdinfoBottom.append(mdVideo);

    mdVideo.onclick=function(){
        aloneOpenVideo(obj)
    }
   
    mdinfo.appendChild(mdinfoTop);
    mdinfo.appendChild(mdinfoCenter);
    mdinfo.appendChild(mdinfoBottom);
    return mdinfo;
}


function showDeviceInfoWindow(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>
        `
    }
    return div;
}

function getAction(actionStr){
    if(actionStr==null){
        var policeStationName="";
        var policeStationNumber="";
        var firstContactName="";
        var firstContactNumber="";
        var secondContactName="";
        var secondContactNumber="";
        var fixedPosition="";
    }else{
        var actionObj=JSON.parse(actionStr);
        var policeStationName=actionObj["policeStationName"];
        var policeStationNumber=actionObj["policeStationNumber"];
        var firstContactName=actionObj["firstContactName"];
        var firstContactNumber=actionObj["firstContactNumber"];
        var secondContactName=actionObj["secondContactName"];
        var secondContactNumber=actionObj["secondContactNumber"];
        if("fixedPosition" in actionObj){
            var fixedPosition=actionObj["fixedPosition"];
        }else{
            var fixedPosition="";
        }
    }
    return {
        "policeStationName":policeStationName,
        "policeStationNumber":policeStationNumber,
        "firstContactName":firstContactName,
        "firstContactNumber":firstContactNumber,
        "secondContactName":secondContactName,
        "secondContactNumber":secondContactNumber,
        "fixedPosition":fixedPosition
    }	
}



 
export {
    updateMoveDeviceMarker,
    addMoveDeviceMarker,
    moveDeviceMarkerHash
}