<%--
|
Created by IntelliJ IDEA.
|
User: Lenovo
|
Date: 2024/7/6
|
Time: 21:38
|
To change this template use File | Settings | File Templates.
|
--%>
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<html>
|
<head>
|
<title>Title</title>
|
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=08692e557513662183f9a5d52c1ea258"></script>
|
<link rel="stylesheet" href="../Home/HomeCss/Home.css"/>
|
<style>
|
*{
|
margin: 0px;
|
padding: 0px;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="layui-row" id="acd" style="display: none;cursor:pointer;background-color: whitesmoke">
|
<div class="layui-col-xs12 layui-col-md12" style="">
|
<div class="boxalls" style="border:none;padding: 5%">
|
<div class="" style="color: black;width: 100%;height:40%;">
|
<div style="width: 100%">
|
<a href="javascript:;" onclick="ShuaXinShuJu()"><span style="width: 100px;display: inline-block;background-color: #0357D1;text-align: center;color: white;height: 25px;line-height: 25px;">刷新数据</span><span style="color: black;margin-left: 30px" id="personDate"></span></a>
|
<a href="javascript:;" onclick="GuanMsg()"><span style="width: 60px;display: inline-block;background-color: #0357D1;text-align: center;color: white;height: 25px;line-height: 25px;float: right;margin-right: 5%">关闭</span></a>
|
</div>
|
<div style="margin-top: 10px;float: left;width: 22%;">
|
<a href="javascript:;"><span style="display: inline-block;width: 100px;height: 200px;" id="personImage">
|
</span></a>
|
</div>
|
<div style="margin-top: 2%;float: left;display: inline-block;width: 70%;">
|
<span style="font-size: 12px;display:inline-block;width: 30%;">姓名：<span class="xingming"></span></span>
|
<span style="font-size: 12px;display: inline-block;width: 30%;">性别：<span class="xingbie"></span></span>
|
<span style="font-size: 12px;display: inline-block;width: 30%;">部门：<span class="bumen"></span></span>
|
</div>
|
<div style="margin-top: 5%;float: left;width: 70%">
|
<span style="font-size: 12px;display:inline-block;width: 30%;">版本：<span class="banben"></span></span>
|
<span style="font-size: 12px;display:inline-block;width: 30%;">类型：<span class="leixing"></span></span>
|
<span style="font-size: 12px;display:inline-block;width: 30%;">电话：<span class="dianhua"></span></span>
|
</div>
|
<div style="margin-top: 5%;float: left;;width: 70%">
|
<span style="font-size: 12px;display:inline-block;width: 30%;">卡号：<span class="kahao"></span></span>
|
<span style="font-size: 12px;display:inline-block;width: 30%;">岗位：<span class="shijian"></span></span>
|
<span style="font-size: 12px;display:inline-block;width: 30%;">电量：<span class="powers"></span></span>
|
</div>
|
<div style="margin-top: 30px;float: left;margin-left: 10px;width: 500px;">
|
<span style="margin: 20px;position: relative;left: -5px;top: -120px;">用户照片</span>
|
</div>
|
<div style="margin-top: 10%;float: left;position: relative;top: -110px;width: 100%;">
|
<span style="font-size: 12px;width: 26%;display: inline-block;">经度：<span class="jingdu"></span></span>
|
<span style="font-size: 12px;width: 26%;display: inline-block;">纬度：<span class="weidu"></span></span>
|
<span style="font-size: 12px;width: 20%;display: inline-block;">高程：<span class="gaocheng"></span></span>
|
<span style="font-size: 12px;width: 20%;display: inline-block;">状态：<span class="zhuangtai1"></span></span>
|
</div>
|
<div style="margin-top: 10px;float: left;position: relative;top: -110px;width: 100%;">
|
<span style="font-size: 12px;width: 26%;display: inline-block;">X坐标：<span class="xzuobiao"></span></span>
|
<span style="font-size: 12px;width: 26%;display: inline-block;">Y坐标：<span class="yzuobiao"></span></span>
|
<span style="font-size: 12px;width: 20%;display: inline-block;">楼层：<span class="louceng"></span></span>
|
<span style="font-size: 12px;width: 20%;display: inline-block;">状态：<span class="zhuangtai2"></span></span>
|
</div>
|
<div style="margin-top: 30px;float: left;position: relative;top: -110px;width: 100%;">
|
<span>文字：</span>
|
<span><input type="text" id="context1" style="width: 70%;height: 25px;border: 1px solid #BFE4F2"></span>
|
<a href="javascript:;" onclick="sendMsg()"><span style="border: 1px solid #BFE4F2;height: 23px;line-height: 24px;width: 40px;background-color:#BFE4F2;display: inline-block;text-align: center;position: relative;left: -5px;top: 0px">发送</span></a>
|
</div>
|
</div>
|
</div>
|
<div class="boxfoot6"></div>
|
</div>
|
</div>
|
<div id="map" style="width: 100%;height: 100%"></div>
|
</body>
|
<script src="../HouTai/Js/jquery-3.5.1.js"></script>
|
<script>
|
//获取所有坐标信息
|
function getGPS() {
|
var gpslist = [];
|
$.ajax({
|
async: false,
|
type: 'POST',
|
traditional: true,
|
url: "/hxzkuwb/getGPS",
|
dataType: 'json',
|
data: {},
|
success: function (data) {
|
//经纬度从度分秒转成度
|
gpslist = data
|
},
|
});
|
return gpslist;
|
};
|
|
//获取围栏信息
|
function getfence() {
|
var fences = [];
|
$.ajax({
|
async: false, //同步的
|
type: "GET",
|
url: "/hxzkuwb/baidufence.do",
|
dataType: "json",
|
success: function (data) {
|
fences = data.fences;
|
},
|
});
|
return fences;
|
}
|
|
|
</script>
|
<script>
|
var map;
|
var zoom = 12;
|
var nameFormat = "{x}_{y}";
|
var ext = ".png";
|
map = new T.Map("map", {datasourcesControl: true});
|
//设置显示地图的中心点和级别
|
map.centerAndZoom(new T.LngLat(118.538340663183, 37.1968042039726), 12);
|
//创建对象
|
var ctrl = new T.Control.MapType();
|
//添加控件
|
map.addControl(ctrl);
|
var imageURL = "tiles/{z}/" + nameFormat + ext;
|
var lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
|
map.addLayer(lay);
|
lay.setZIndex(5);
|
|
var pointse =[]
|
setTimeout(function (){
|
var fences = getfence();
|
var pointsName = [];
|
// 增加矩形图层
|
for (var i = 0; i < fences.length; i++) {
|
if (i%2 == 0){
|
fences[i] = fences[i].split(";");
|
var po =[]
|
for (var j = 0; j < fences[i].length; j++) {
|
fences[i][j] = fences[i][j].split(",");
|
var point = new T.LngLat(fences[i][j][0],parseFloat(fences[i][j][1]));
|
po.push(point);
|
}
|
pointse.push(po);
|
}else{
|
pointsName.push(fences[i]);
|
}
|
}
|
console.log(pointse)
|
},1000)
|
var timer = setInterval(function() {
|
setTimeout(function (){
|
var gps_node_list1 = getGPS();
|
map.clearOverLays()
|
var polygon = new T.Polygon(pointse,{
|
color: "red", weight: 3, opacity: 0.5, fillColor: "red", fillOpacity: 0.5
|
});
|
map.addOverLay(polygon);
|
for (var i = 0; i < gps_node_list1.length; i++) {
|
var person = gps_node_list1[i];
|
//坐标
|
var point = new T.LngLat(person.baoliu2, person.baoliu3)
|
//图片
|
var icon = new T.Icon({
|
iconUrl: "/hxzkuwb/Icon/"+person.pimage,
|
iconSize: new T.Point(30,30),
|
iconAnchor: new T.Point(10, 25)
|
});
|
var marker = new T.Marker(point, {icon: icon});
|
//名称
|
var label = new T.Label({
|
text: person.pname+" "+person.ptagid,
|
position: point,
|
offset: new T.Point(-50, -40),
|
});
|
map.addOverLay(marker);
|
map.addOverLay(label);
|
marker.addEventListener("click", function() {
|
markerClick(person.ptagid); // Pass the unique identifier to markerClick function
|
});
|
}
|
},0)
|
},2000)
|
|
|
//点击marker事件
|
function markerClick(tagid){
|
var data = "id=" + tagid;
|
$.ajax({
|
url: "/hxzkuwb/findtagIdPerson",
|
data: data,
|
async: false,
|
success: function (data) {
|
if (data.ponline == "1") {
|
data.ponline = "在线";
|
} else {
|
data.ponline = "离线";
|
}
|
|
$("#personImage").empty()
|
$("#personImage").append('<img style="width: 100px;height: 100px" src=/hxzkuwb/Icon/人员照片/' + data.baoliu38 + '/>')
|
$(".xingming").text(data.pname);
|
$(".xingbie").text(data.psex);
|
$(".bumen").text(data.pdepartment);
|
$(".banben").text("未知");
|
$(".bowei").text(data.baoliu39);
|
$(".leixing").text(data.baoliu19);
|
$(".dianhua").text(data.pphone);
|
$(".kahao").text(data.ptagid);
|
$(".shijian").text(data.pzu);
|
$(".powers").text(data.ppower+"%")
|
$(".jingdu").text(data.baoliu2);
|
$(".weidu").text(data.baoliu3);
|
$(".gaocheng").text(data.baoliu4);
|
$(".zhuangtai1").text(data.baoliu13);
|
$(".xzuobiao").text(data.px);
|
$(".yzuobiao").text(data.py);
|
$(".louceng").text(data.pfloor);
|
$(".zhuangtai2").text(data.ponline);
|
}
|
});
|
$("#acd").show();
|
}
|
function ShuaXinShuJu(){
|
var tagid = $(".kahao").text();
|
markerClick(tagid)
|
getdateTime()
|
layer.msg('刷新成功')
|
}
|
function GuanMsg(){
|
$("#acd").hide()
|
}
|
function getdateTime() {
|
var date = new Date();
|
|
var year = date.getFullYear();
|
var month = date.getMonth() + 1; // 因为月份是从0开始计数，所以需要加1
|
var day = date.getDate();
|
var hours = date.getHours();
|
var minutes = date.getMinutes();
|
var seconds = date.getSeconds();
|
|
// 格式化时间，保证小时、分钟、秒始终有两位数
|
month = formatTime(month);
|
day = formatTime(day);
|
hours = formatTime(hours);
|
minutes = formatTime(minutes);
|
seconds = formatTime(seconds);
|
|
// 更新页面显示时间的元素的内容
|
document.getElementById("personDate").innerHTML ="更新时间："+ year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
}
|
</script>
|
</html>
|
