新BS平台
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
zhitong.yu
2024-10-11 4f58a93c95ff123d51adcb8fa2e521333e8ab022 
 src/main/webapp/HouTai/ChaXunGuiJi/ChaXunGuiJi1.jsp


¶Ô±ÈÐÂÎļþ


@@ -0,0 +1,325 @@


<%--


  Created by IntelliJ IDEA.


  User: Dell


  Date: 2023/11/23


  Time: 11:54


  To change this template use File | Settings | File Templates.


--%>


<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>


<head>


    <title>Title</title>


    <style>


        ul li{


            height: 30px;


        }


        .layui-layout-body{


            padding-bottom: 0px;


        }


    </style>


</head>


<link rel="stylesheet" href="../../CSS/layui2.css">


<link rel="stylesheet" href="../../CSS/layer.css">


<link rel="stylesheet" href="ChaXunGuiJiJs/style.css">


<body style="">


<div class="heimu1" style="display: none;width: 100%; overflow: hidden;text-align: center;position: fixed;top: 300px;z-index: 999999999;">


    <div class="loader-radar" style="height: 100px;width: 100px"></div>


</div>


<div class="heimu" style="display: none;height: 100%;width: 100%;position: fixed;top: 0px;background-color: rgb(0,0,0,0.6);z-index: 9999999"></div>


<div class="layui-container" style="width: 55%;margin: 0px;padding: 0px">


    <div class="layui-row">


        <div class="layui-col-xs12 layui-col-md12">


                <div class="layui-form-item" style="display: none">


                    <label class="layui-form-label"  style="background-color: #1E9FFF;color: white;font-size: 12px">切换地图</label>


                    <div class="layui-input-inline">


                        <select name="city" style="height: 38px;border: 1px solid #666666;background-color: whitesmoke" lay-verify="required" id="cxList" class="dituList" onchange="changeMap()">


                            <option value="百度地图">百度地图</option>


                        </select>


                    </div>


                </div>


                <div class="layui-form-item" style="display: inline-block;position: relative;left: -5%">


                    <label class="layui-form-label">设备ID</label>


                    <div class="layui-input-inline">


                        <input type="text" class="layui-input" id="tagid"  placeholder="请输入ID">


                    </div>


                </div>


                <div class="layui-form-item" style="display: none;position: relative;left: -80px">


                    <div class="layui-input-inline" style="width: 300px">


                        <button style="display: inline-block;height: 35px;width: 85px" class="" onclick="ontimes(0.5)">近半小时</button>


                        <button style="display: inline-block;height: 35px;width: 85px" class="" onclick="ontimes(1)">近1小时</button>


                        <button style="display: inline-block;height: 35px;width: 85px" class="" onclick="ontimes(2)">近2小时</button>


                    </div>


                </div>




                <div class="layui-form-item" style="display: inline-block;position: relative;left: -5%;">


                    <label class="layui-form-label">请选择范围</label>


                    <div class="layui-input-inline">


                        <input type="text" class="layui-input" id="test16" placeholder="开始 åˆ° ç»“束" style="width: 300px">


                        <input type="hidden" id="FanWei">


                    </div>


                </div>


            <div class="layui-form-item" style="display: inline-block;position: relative;left: 6%;" id="bfsudu" >


                <div class="layui-input-inline">


                    <select id="bofangsudu" onchange="baiduBoFang()" style="height: 35px" >


                        <option value="1">播放速度x1</option>


                        <option value="2">播放速度x2</option>


                        <option value="4">播放速度x4</option>


                        <option value="6">播放速度x6</option>


                        <option value="播放速度x8">播放速度x8</option>


                    </select>


                </div>


            </div>


                <div class="layui-form-item" style="display: inline-block;width: 70px">


                    <div class="layui-input-inline">


                        <button type="button" class="layui-btn layui-btn-danger" id="search" onclick="ks('查询')">查询</button>


                    </div>


                </div>


            <div class="layui-form-item" style="display: inline-block;width: 70px">


                <div class="layui-input-inline">


                    <button type="button" class="layui-btn layui-btn-danger" id="pause" onclick="zanting()" >暂停</button>


                </div>


            </div>


        </div>


        <div class="layui-col-xs12 layui-col-md12">


            <div style="width: 100%; height: 50%;margin: auto"


                 id="wrap">


                <canvas id="draw"></canvas>


        </div>


    </div>


</div>


<div style="width: 300px;height: 400px;background-color: rgb(12, 98, 163,0.7);position: fixed;top: 170px;right:15px;z-index: 99999;display: none">


    <ul style="color: white;margin-top: 18px;margin-left: 20px;font-size: 12px">


        <li>当前：<span id="data1">0/0条</span></li>


        <li>名称：<span class="data2">暂无数据</span></li>


        <li>编号：<span class="data3">暂无数据</span></li>


        <li>经度：<span class="data4">暂无数据</span></li>


        <li>纬度：<span class="data5">暂无数据</span></li>


        <li>高程：<span class="data6">暂无数据</span></li>


        <li>状态：<span class="data7">暂无数据</span></li>


        <li>X坐标：<span class="data8">暂无数据</span></li>


        <li>Y坐标：<span class="data9">暂无数据</span></li>


        <li>Z坐标：<span class="data10">暂无数据</span></li>


        <li>电量：<span class="data11">暂无数据</span></li>


        <li>时间：<span class="data12">暂无数据</span></li>




    </ul>


</div>


</div>


</body>




<script src="/hxzkuwb/HouTai/Js/jquery-3.5.1.js"></script>


<script src="../../JS/layui.js"></script>


<script src="../../JS/layer.js"></script>


<script src="../../languages/languages.js"></script>


<script src="ChaXunGuiJiJs/ChaXunGuiJiJs.js"></script>


<script src="ChaXunGuiJiJs/ErWei.js"></script>


<script src="ChaXunGuiJiJs/BaiDuGuiJi.js"></script>


<script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>


<script>


    localStorage.setItem("ChaXunGuiJi","已完成")


    loadJScript();




    function loadJScript() {


        var script = document.createElement('script');


        script.type = 'text/javascript';


        script.src = '//api.map.baidu.com/api?type=webgl&v=1.0&ak=zoVtgLNWuaZBjMAa32RZRFIagXxST0fm&callback=init';


        document.body.appendChild(script);


    }


function ks(input){


    if (input == "查询"){


        $("#search").css("background-color","green")


        var type = $("#cxList").val()




        if(type == "百度地图") {


            baiDuGuiJi()


        }


    }


}


function changeMap(){


    var ceng =$("#cxList").val();


    if(ceng == "百度地图"){


        $("#baidumap").show()


        $("#wrap").hide();


    }else{


        $("#bfsudu").css("display","inline-block")


        $("#wrap").show();


        $("#baidumap").hide()


        $.ajax({


            async: false,


            type: 'POST',


            url: "/hxzkuwb/findFloorMap",


            dataType: 'json',


            data: {


                floor: ceng


            },


            success: function (data) {


                ts1 = getYuandian()


                ts2 = getTruemap()


                imgUrl = '/hxzkuwb/HouTai/MapImg/' + data.mapname;


                //imgUrl = '/hxzkoa/hxzk/image/mapfile/office.jpg';


                new MarkPoints(imgUrl);


            }


        })


    }


}


function ontimes(time) {


    if(time == 0.5){


        var now = new Date();


        var year1 = now.getFullYear();


        var month1 = String(now.getMonth() + 1).padStart(2, '0');


        var day1 = String(now.getDate()).padStart(2, '0');


        var hour1 = String(now.getHours()).padStart(2, '0');


        var minute1 = String(now.getMinutes()).padStart(2, '0');


        var second1 = String(now.getSeconds()).padStart(2, '0');


        var currentDateTime = year1+"-"+month1+"-"+day1+" "+hour1+":"+minute1+":"+second1


        console.log(currentDateTime);


        const halfHourAgo = new Date();


        halfHourAgo.setMinutes(halfHourAgo.getMinutes() - 30);


        const year = halfHourAgo.getFullYear();


        const month = String(halfHourAgo.getMonth() + 1).padStart(2, '0');


        const day = String(halfHourAgo.getDate()).padStart(2, '0');


        const hour = String(halfHourAgo.getHours()).padStart(2, '0');


        const minute = String(halfHourAgo.getMinutes()).padStart(2, '0');


        const second = String(halfHourAgo.getSeconds()).padStart(2, '0');


        const halfHourAgoDateTime = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second


        $("#FanWei").val(halfHourAgoDateTime+" åˆ° "+currentDateTime)


        $("#test16").val("已选择近半小时")


    }


    if (time == 1){


        var now = new Date();


        var year1 = now.getFullYear();


        var month1 = String(now.getMonth() + 1).padStart(2, '0');


        var day1 = String(now.getDate()).padStart(2, '0');


        var hour1 = String(now.getHours()).padStart(2, '0');


        var minute1 = String(now.getMinutes()).padStart(2, '0');


        var second1 = String(now.getSeconds()).padStart(2, '0');


        var currentDateTime = year1+"-"+month1+"-"+day1+" "+hour1+":"+minute1+":"+second1


        const halfHourAgo = new Date();


        halfHourAgo.setMinutes(halfHourAgo.getMinutes() - 60);


        const year = halfHourAgo.getFullYear();


        const month = String(halfHourAgo.getMonth() + 1).padStart(2, '0');


        const day = String(halfHourAgo.getDate()).padStart(2, '0');


        const hour = String(halfHourAgo.getHours()).padStart(2, '0');


        const minute = String(halfHourAgo.getMinutes()).padStart(2, '0');


        const second = String(halfHourAgo.getSeconds()).padStart(2, '0');


        const halfHourAgoDateTime = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second


        $("#FanWei").val(halfHourAgoDateTime+" åˆ° "+currentDateTime)


        $("#test16").val("已选择近1小时")


    }


    if (time == 2){


        var now = new Date();


        var year1 = now.getFullYear();


        var month1 = String(now.getMonth() + 1).padStart(2, '0');


        var day1 = String(now.getDate()).padStart(2, '0');


        var hour1 = String(now.getHours()).padStart(2, '0');


        var minute1 = String(now.getMinutes()).padStart(2, '0');


        var second1 = String(now.getSeconds()).padStart(2, '0');


        var currentDateTime = year1+"-"+month1+"-"+day1+" "+hour1+":"+minute1+":"+second1


        console.log(currentDateTime);


        const halfHourAgo = new Date();


        halfHourAgo.setMinutes(halfHourAgo.getMinutes() - 120);


        const year = halfHourAgo.getFullYear();


        const month = String(halfHourAgo.getMonth() + 1).padStart(2, '0');


        const day = String(halfHourAgo.getDate()).padStart(2, '0');


        const hour = String(halfHourAgo.getHours()).padStart(2, '0');


        const minute = String(halfHourAgo.getMinutes()).padStart(2, '0');


        const second = String(halfHourAgo.getSeconds()).padStart(2, '0');


        const halfHourAgoDateTime = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second


        $("#FanWei").val(halfHourAgoDateTime+" åˆ° "+currentDateTime)


        $("#test16").val("已选择近2小时")


    }


}




    function zanting(){


        var tall = $("#pause").text();


        if (cx == true){


            if (tall == "暂停"){


                tds = false


                $("#pause").text("继续")


            }else{


                tds = true


                $("#pause").text("暂停")


                var ins = localStorage.getItem("JiXu")


                var movingIcon = new BMapGL.Icon('../../Icon/人员.png', new BMapGL.Size(32, 32));


                var marker = new BMapGL.Marker(dtlist[0], {icon: movingIcon});


                var label = new BMapGL.Label("", {offset: new BMapGL.Size(0, -50)});


                label.setStyle({


                    color: "white",


                    fontSize: "12px",


                    borderRadius: "5px",


                    padding: "5px 5px",


                    border: "0",


                    transform: 'translateX(-50%)',


                    backgroundColor: bgcolor,




                });


                var label1 = new BMapGL.Label("", {offset: new BMapGL.Size(0, 30)});


                label1.setStyle({


                    color: "white",


                    fontSize: "12px",


                    borderRadius: "5px",


                    padding: "5px 5px",


                    border: "0",


                    transform: 'translateX(-50%)',


                    backgroundColor: bgcolor,




                });


                marker.setLabel(label);


                var marker1 = new BMapGL.Marker(dtlist[0], {icon: movingIcon});


                marker1.setLabel(label1);


                bm.clearOverlays();




                bm.addOverlay(marker1)


                bm.addOverlay(marker);


                function animateMarker(index) {


                    if (tds == false) {


                        localStorage.setItem("JiXu",index)


                        return;


                    } else {


                        if (index == datalist.length) {


                            nub = false


                        }


                        $("#data1").text(index + "/" + datalist.length)


                        $(".data2").text(datalist[index].name)


                        $(".data3").text(datalist[index].tagid)


                        $(".data4").text(datalist[index].gspJingdu)


                        $(".data5").text(datalist[index].gpsWeidu)


                        $(".data6").text(datalist[index].gpsHaibaGao)


                        $(".data7").text(datalist[index].gpsState)


                        $(".data11").text(datalist[index].gpsPower)


                        $(".data12").text(datalist[index].addtime)




                        if (index < dtlist.length) {


                            var point = new BMapGL.Point(dtlist[index].lng, dtlist[index].lat);


                            marker.setPosition(point);


                            marker1.setPosition(point);


                            label.setContent(datalist[index].name + " " + datalist[index].tagid);


                            label1.setContent(datalist[index].gspJingdu + " " + datalist[index].gpsWeidu);


                            // è®¾ç½®å»¶è¿ŸåŽç§»åŠ¨åˆ°ä¸‹ä¸€ä¸ªç‚¹


                            setTimeout(function () {


                                animateMarker(parseInt(ins)+parseInt(1));


                                ins = parseInt(ins)+parseInt(1)


                            }, sudu); // è¿™é‡Œè®¾ç½®çš„是每500毫秒移动一次，你可以根据需要调整




                        }




                        if (index < dtlist.length && index > 0) {


                            var line = new BMapGL.Polyline([dtlist[index - 1], point], {


                                strokeColor: 'red',


                                strokeWeight: 2,


                                strokeOpacity: 1


                            });


                            bm.addOverlay(line);


                        }


                    }


                }


                animateMarker(ins);




            }


        }else{


            layer.msg('请先查询轨迹！')


        }




    }


</script>


</html>