<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
<html lang="en">
|
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport"
|
content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
|
<title>切换地图</title>
|
<link rel="icon" type="image/x-icon" href="/hxzkoa/hxzk/assets/img/favicon.ico" />
|
|
<!-- BEGIN GLOBAL MANDATORY STYLES -->
|
<script src="/hxzkoa/hxzk/assets/js/ghmap-3.0.min.js"></script>
|
<script src="/hxzkoa/hxzk/assets/js/libs/jquery-3.1.1.min.js"></script>
|
<link rel="stylesheet" href="/hxzkoa/hxzk/assets/css/ghmap.css" type="text/css" />
|
|
<style>
|
/* .demo {
|
width: 760px;
|
margin: 20px auto 0 auto;
|
height: 70px;
|
} */
|
|
.button {
|
display: inline-block;
|
outline: none;
|
cursor: pointer;
|
text-align: center;
|
text-decoration: none;
|
font: 16px/100% 'Microsoft yahei', Arial, Helvetica, sans-serif;
|
padding: .5em 2em .55em;
|
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
|
-webkit-border-radius: .5em;
|
-moz-border-radius: .5em;
|
border-radius: .5em;
|
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
|
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
|
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
|
}
|
|
.button:hover {
|
text-decoration: none;
|
}
|
|
.button:active {
|
position: relative;
|
top: 1px;
|
}
|
|
.medium {
|
font-size: 12px;
|
padding: .4em 1.5em .42em;
|
}
|
|
.white {
|
color: #696767;
|
border: solid 1px #b7b7b7;
|
background: #fff;
|
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
|
background: -moz-linear-gradient(top, #fff, #ededed);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
|
}
|
|
.white:hover {
|
background: #ededed;
|
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
|
background: -moz-linear-gradient(top, #fff, #dcdcdc);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
|
}
|
|
.white:active {
|
color: #999;
|
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
|
background: -moz-linear-gradient(top, #ededed, #fff);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
|
}
|
</style>
|
</head>
|
|
<body onload="init();loadMap();showTime();" onresize="resize()"
|
style="padding: 0px; margin: 0px;overflow:hidden;">
|
<div class="login-page"></div>
|
<div class="header-page"></div>
|
<div id="content" class="main-content">
|
<div class="layout-px-spacing">
|
<div class="row layout-top-spacing" id="cancel-row">
|
<div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
|
<div class="widget widget-one_hybrid widget-engagement" id="map0"
|
style="width: 100%; float: left;" ondblclick="changemap0()">
|
<div class="widget-heading" style="height: 450px; width: 100%" id="maphead0">
|
<!-- <input type="button" id="dakai" value="打开信息窗口"
|
style="position: absolute; float: left;left: 50px;top: 10px;z-index: 999;border: 1px black solid;width: 90px;height: 22px;background-color: rgba(146, 140, 140, 0.096);font-size: 10px;border-radius: 5%;">
|
<input type="button" id="guanbi" value="关闭信息窗口"
|
style="position: absolute; float: left;left: 50px;top: 10px;z-index: 999;border: 1px black solid;width: 90px;height: 22px;background-color: rgba(146, 140, 140, 0.096);font-size: 10px;border-radius: 5%;display: none;"> -->
|
<div id="dakai" style="position: absolute; float: left;left: 50px;top: 10px;z-index: 999;">
|
<a href="#" class="button white medium">打开信息窗口</a>
|
</div>
|
<!-- <input type="button" id="genzong" onclick="genzong()" value="跟踪"> -->
|
<div id="guanbi" style="position: absolute; float: left;left: 50px;top: 10px;z-index: 999;display: none;">
|
<a href="#" class="button white medium">关闭信息窗口</a>
|
</div>
|
<div id="zongtubiao"
|
style="border-radius: 5px;padding:5px;opacity: 0.4;position: absolute; float: left;top: 40px;left: 40px;z-index: 99;border: 3px solid rgb(243, 11, 11);display: none;">
|
<table id="tu2"
|
style="width: 300px;height: 243px;float: left;text-align:center;vertical-align:middle;table-layout:fixed;color: rgb(255, 0, 0);">
|
<thead style="font-weight: bold;font-size: 17px;">
|
<tr style="height: 50px;">
|
<!-- <td id="biaotou" style="height: 45px;" colspan="4"></td> -->
|
<td id="biaotou2" style="width: 60%;" colspan="3">隧道内总人数:<a
|
id="renshu2"></a></td>
|
<!-- <td id="biaotou3322" style="width: 40%;" colspan="2">气体检测</td> -->
|
</tr>
|
<tr>
|
<td>姓名</td>
|
<td>部门</td>
|
<td>所在区域</td>
|
</tr>
|
</thead>
|
<tbody id="biaoti">
|
|
</tbody>
|
</table>
|
<table id="tu2"
|
style="width: 200px;height: 243px;float: left;text-align:center;vertical-align:middle;table-layout:fixed;color: rgb(255, 0, 0);">
|
<thead style="font-weight: bold;font-size: 17px;">
|
<tr style="height: 50px;">
|
<!-- <td id="biaotou" style="height: 45px;" colspan="4"></td> -->
|
<td id="biaotou3322" style="width: 40%;" colspan="2">气体检测
|
</td>
|
</tr>
|
<tr>
|
<td>设备名称</td>
|
<td>当前值</td>
|
</tr>
|
</thead>
|
<tbody id="biaoti2">
|
|
</tbody>
|
</table>
|
</div>
|
<div id="mapId" style="width:100%;height: 100%;cursor: pointer;"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
|
<script>
|
//常用方法
|
function getRealPositionsan() {
|
var realposition = [];
|
$.ajax({
|
async: false,
|
type: 'POST',
|
url: "/hxzkoa/getRealPositionsan.do",
|
dataType: 'json',
|
success: function (data) {
|
for (var i = 0; i < data.length; i++) {
|
//playMark[id,name,power,life,x,y,time]
|
realposition.push([data[i].tagid, data[i].name, data[i].power, data[i].life, data[i].posx, data[i].posy, data[i].time, data[i].fence == 1 || data[i].sos == 1, data[i].sousuo, data[i].shipin, data[i].inkaoqing])
|
}
|
},
|
});
|
return realposition
|
};
|
|
function getSystemSetting() {
|
var sysset = [];
|
$.ajax({
|
async: false,
|
type: 'POST',
|
url: "/hxzkoa/getSysSetting_list.do",
|
dataType: 'json',
|
success: function (data) {
|
sysset = data;
|
},
|
});
|
return sysset;
|
};
|
</script>
|
|
<script>
|
var kaoqinlist = [];
|
var qitilist = [];
|
var oo = 0;
|
kaoqinsan();
|
qitisan();
|
setTimeout(kaoqinhuan, 400);
|
setInterval(showTime, 1000);
|
// setInterval(zongjiaoti, 10000);
|
setInterval(kaoqinsan, 60000);
|
setInterval(qitisan, 60000);
|
setInterval(kaoqinhuan, 5000);
|
var bm_sysSetting = getSystemSetting();
|
var bm_offView = bm_sysSetting[0].offView;//是否离线不显示图标
|
var bm_kaoqing = bm_sysSetting[0].diskaoqing;//是否出考勤区域消失
|
function showTime() {
|
var t = new Date();
|
var year = t.getFullYear();
|
var month = t.getMonth() + 1;
|
var day = t.getDate();
|
var week = t.getDay();
|
var arr = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
|
var hour = t.getHours();
|
var minute = t.getMinutes();
|
var second = t.getSeconds();
|
var showTime = year + "/" + month + "/" + day + " " + arr[week] + " " + hour + ((minute < 10) ? ":0" : ":") + minute + ((second < 10) ? ":0" : ":") + second + ((hour > 12) ? " 下午" : " 上午");
|
$("#biaotou").html(showTime);
|
$("#biaotou22").html(showTime);
|
$("#biaotou33").html(showTime);
|
}
|
|
function kaoqinsan() {
|
$.ajax({
|
url: "/hxzkoa/getkaoqinsan.do",
|
type: "POST",
|
dataType: "JSON",
|
success: function (data) {
|
kaoqinlist = data;
|
}
|
})
|
}
|
function qitisan() {
|
$.ajax({
|
url: "/hxzkoa/sensorManagementsan.do",
|
type: "POST",
|
dataType: "JSON",
|
success: function (data) {
|
qitilist = data;
|
}
|
})
|
}
|
|
function kaoqinhuan() {
|
var arr = kaoqinlist.slice(oo, oo + 6);
|
var str;
|
var str2;
|
for (const key in arr) {
|
if (arr[key].name != "" && arr[key].name != null) {
|
str += "<tr><td>" + arr[key].name + "</td><td>" + arr[key].bumen + "</td><td>" + arr[key].area + "</td></tr>"
|
}
|
}
|
for (const key in qitilist) {
|
str2 += "<tr><td>" + qitilist[key].name + "</td><td>" + qitilist[key].nong_du + "</td></tr>"
|
}
|
$("#biaoti").html(str);
|
$("#biaoti2").html(str2);
|
$("#renshu2").html(kaoqinlist.length);
|
oo += 6;
|
if (oo >= kaoqinlist.length) {
|
oo = 0;
|
};
|
}
|
|
function resize() {
|
document.getElementById('mapId').style.width = window.innerWidth + 'px';
|
document.getElementById('mapId').style.height = window.innerHeight + 'px';
|
}
|
|
function init() {
|
resize();
|
}
|
|
function createMap(option) {
|
var opt = {
|
mapId: 'mapId',
|
buildNum: '130046',
|
//dataUrl: 'http://localhost:8080/hxzkoa/hxzk/image/mapfile/',
|
//dataVersion: '57',
|
//autoCheckVersion: false,
|
imagePre: '../image/targeticon',
|
mapKey: '28a58cf8-841b-sdfedddd-8cf5-f1a',
|
// setHeight: 160,
|
maxPitch: 88,
|
backgroundColor: '#effafe',
|
zoomViewVisible: false,
|
// floorViewVisible: false
|
};
|
if (option) {
|
for (var key in option) {
|
opt[key] = option[key];
|
}
|
}
|
var map = new GHMap.Map(opt);
|
return map;
|
}
|
|
var map, overlayer;
|
function loadMap() {
|
map = createMap();
|
overlayer = map.getOverlayer();
|
}
|
var timer = setInterval(fn, 300);
|
|
function genzong() {
|
console.log(map.getCenter())
|
var point = new GHMap.Point(12737817.071,4585815.582,0);
|
map.setCenter(point,true);
|
}
|
|
function fn() {
|
var personlist1 = getRealPositionsan();
|
var personlist = [];
|
if (personlist1.length != 0) {
|
for (var i = 0; i < personlist1.length; i++) {
|
if (((bm_offView == '1' && personlist1[i][3] == '1') || (bm_offView == '0')) && ((bm_kaoqing == '1' && personlist1[i][10] == '1') || (bm_kaoqing == '0'))) {
|
personlist.push(personlist1[i]);
|
}
|
if ((bm_offView == '1' && personlist1[i][3] != '1') || (bm_kaoqing == '1' && personlist1[i][10] != '1')) {
|
var name = personlist1[i][0] + "-" + personlist1[i][1];
|
var marker22 = overlayer.getMarkersByName(name, GHMap.SearchMode.EQUAL);
|
overlayer.removeOverlay(marker22);
|
}
|
}
|
if (overlayer.getOverlayCount() != personlist.length) {
|
diaoyong1();
|
} else {
|
diaoyong2();
|
}
|
}
|
|
function diaoyong1() {
|
for (var i = 0; i < personlist.length; i++) {
|
var name = personlist[i][0] + "-" + personlist[i][1];
|
var marker33 = overlayer.getMarkersByName(name, GHMap.SearchMode.EQUAL);
|
if (marker33 == "" || marker33 == 0 || marker33 == null) {
|
marker = new GHMap.Marker();
|
var point = new GHMap.Point(parseFloat(personlist[i][4]), parseFloat(personlist[i][5]), 0);
|
marker.setPosition(point);
|
marker.setIcon("../image/targeticon/default.png");
|
marker.setIconLayout(GHMap.Marker.IconLayout.BOTTOM_CENTER); //设置锚点
|
marker.setTextLayout(GHMap.Marker.TextLayout.TOP);
|
marker.setName(name);
|
// marker.setHeight(6);
|
overlayer.addOverlay(marker);
|
}
|
}
|
}
|
|
function diaoyong2() {
|
for (var i = 0; i < personlist.length; i++) {
|
var name = personlist[i][0] + "-" + personlist[i][1];
|
var marker44 = overlayer.getMarkersByName(name, GHMap.SearchMode.EQUAL);
|
var point = new GHMap.Point(parseFloat(personlist[i][4]), parseFloat(personlist[i][5]), 0);
|
marker44[0].panTo(point);
|
}
|
}
|
}
|
|
$("#dakai").click(function () {
|
document.getElementById("zongtubiao").style.display = "";
|
document.getElementById("dakai").style.display = "none";
|
document.getElementById("guanbi").style.display = "";
|
})
|
$("#guanbi").click(function () {
|
document.getElementById("zongtubiao").style.display = "none";
|
document.getElementById("guanbi").style.display = "none";
|
document.getElementById("dakai").style.display = "";
|
})
|
</script>
|
|
</html>
|
