<%--
|
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="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>
|
