<%@ 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" %>
|
<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" />
|
<link href="/hxzkoa/hxzk/assets/css/loader.css" rel="stylesheet" type="text/css" />
|
<script src="/hxzkoa/hxzk/assets/js/loader.js"></script>
|
|
<!-- BEGIN GLOBAL MANDATORY STYLES -->
|
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700&display=swap"
|
rel="stylesheet">
|
<link href="/hxzkoa/hxzk/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/css/main.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/plugins/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet"
|
type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/css/structure.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/plugins/highlight/styles/monokai-sublime.css" rel="stylesheet"
|
type="text/css" />
|
<!-- END GLOBAL MANDATORY STYLES -->
|
|
<!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM STYLES -->
|
<link href="/hxzkoa/hxzk/assets/css/elements/search.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/plugins/apex/apexcharts.css" rel="stylesheet" type="text/css">
|
<link href="/hxzkoa/hxzk/assets/css/dashboard/dash_2.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/css/elements/custom-pagination.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/css/components/custom-modal.css" rel="stylesheet" type="text/css" />
|
<!-- END PAGE LEVEL PLUGINS/CUSTOM STYLES -->
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
|
<link rel="stylesheet" type="text/css" href="/hxzkoa/hxzk/plugins/table/datatable/datatables.css">
|
<link rel="stylesheet" type="text/css" href="/hxzkoa/hxzk/plugins/table/datatable/custom_dt_html5.css">
|
<link rel="stylesheet" type="text/css" href="/hxzkoa/hxzk/plugins/table/datatable/dt-global_style.css">
|
<link href="/hxzkoa/hxzk/plugins/flatpickr/flatpickr.css" rel="stylesheet" type="text/css">
|
<link href="/hxzkoa/hxzk/plugins/noUiSlider/nouislider.min.css" rel="stylesheet" type="text/css">
|
<link href="/hxzkoa/hxzk/assets/css/scrollspyNav.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/plugins/flatpickr/custom-flatpickr.css" rel="stylesheet" type="text/css">
|
<link href="/hxzkoa/hxzk/plugins/noUiSlider/custom-nouiSlider.css" rel="stylesheet" type="text/css">
|
<link href="/hxzkoa/hxzk/plugins/bootstrap-range-Slider/bootstrap-slider.css" rel="stylesheet"
|
type="text/css">
|
<link href="/hxzkoa/hxzk/fengmap/css/layui/index.css" rel="stylesheet" type="text/css">
|
<link href="/hxzkoa/hxzk/fengmap/css/index.css" rel="stylesheet" type="text/css">
|
<link href="/hxzkoa/hxzk/layui/layui/src/css/layui.css" rel="stylesheet">
|
|
<!-- 百度地图接口 -->
|
<script type="text/javascript" id="baidumap_api"
|
src="http://api.map.baidu.com/getscript?v=3.0&ak=PUftjeZCKHtEn8ZMjeAGnViSO8NBvBNm"></script>
|
|
<script src="/hxzkoa/hxzk/assets/js/scrollspyNav.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/flatpickr/flatpickr.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/noUiSlider/nouislider.min.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/flatpickr/custom-flatpickr.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/noUiSlider/custom-nouiSlider.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/bootstrap-range-Slider/bootstrap-rangeSlider.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/laydate/laydate.js"></script>
|
<script src="/hxzkoa/hxzk/assets/js/libs/jquery-3.1.1.min.js"></script>
|
<script src="/hxzkoa/hxzk/bootstrap/js/popper.min.js"></script>
|
<script src="/hxzkoa/hxzk/bootstrap/js/bootstrap.min.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
|
<script src="/hxzkoa/hxzk/assets/js/app.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/dataTables.buttons.min.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/jszip.min.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/buttons.html5.min.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/buttons.print.min.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/apex/apexcharts.min.js"></script>
|
<script src="/hxzkoa/hxzk/assets/js/dashboard/dash_2.js"></script>
|
<script src="/hxzkoa/hxzk/fengmap/js/fengmap.map.min.js"></script>
|
<script src="/hxzkoa/hxzk/fengmap/js/fengmap.plugins-track-player.min.js"></script>
|
<script src="/hxzkoa/hxzk/layui/layui.js"></script>
|
<style>
|
body {
|
margin: 0px;
|
width: 100%;
|
min-width: 1500px;
|
max-width: 100%;
|
height: 100%;
|
background-color: #F0F0F0;
|
overflow: auto;
|
|
|
}
|
|
#head {
|
background-color: #FFFF00;
|
width: 100%;
|
height: 100px;
|
}
|
|
#center {
|
background-color: #00FFFF;
|
width: 100%;
|
min-height: 100%;
|
}
|
|
#foot {
|
background-color: #FF00FF;
|
width: 100%;
|
height: 100px;
|
}
|
|
.panel-head {
|
font-size: 1rem;
|
color: rgba(255, 255, 255, .7);
|
line-height: 2rem;
|
text-align: center;
|
background: linear-gradient(rgb(0, 20, 30), rgb(0, 40, 70));
|
border: 2px solid rgba(0, 90, 120, .3);
|
}
|
|
.table-bordered td,
|
.table-bordered th {
|
border: 1px solid #ebedf2;
|
}
|
/*loader1 css begins*/
|
.main-wrap {
|
background-color: black;
|
color: #fff;
|
height: 100%;
|
display: flex;
|
justify-content:center;
|
align-items:center;
|
}
|
|
.main-wrap--white {
|
background-color: #ffffff;
|
}
|
|
#cssLoader1.main-wrap .child-common
|
{
|
width: 8px;
|
height: 50px;
|
/*margin-right:5px;*/
|
margin-right:3px;
|
background-color: #FFF;
|
-webkit-animation: animate1 1s infinite;
|
animation: animate1 1s infinite;
|
float: left;
|
}
|
|
#cssLoader1.main-wrap .child1
|
{
|
margin-right: 3px;
|
}
|
|
#cssLoader1.main-wrap .child10
|
{
|
-webkit-animation-delay: 0.9s;
|
animation-delay: 0.9s;
|
}
|
|
#cssLoader1.main-wrap .child9
|
{
|
-webkit-animation-delay: 0.8s;
|
animation-delay: 0.8s;
|
}
|
|
#cssLoader1.main-wrap .child8
|
{
|
-webkit-animation-delay: 0.7s;
|
animation-delay: 0.7s;
|
}
|
|
#cssLoader1.main-wrap .child7
|
{
|
-webkit-animation-delay: 0.6s;
|
animation-delay: 0.6s;
|
}
|
|
#cssLoader1.main-wrap .child6
|
{
|
-webkit-animation-delay: 0.5s;
|
animation-delay: 0.5s;
|
}
|
|
#cssLoader1.main-wrap .child5
|
{
|
-webkit-animation-delay: 0.4s;
|
animation-delay: 0.4s;
|
}
|
|
#cssLoader1.main-wrap .child4
|
{
|
-webkit-animation-delay: 0.3s;
|
animation-delay: 0.3s;
|
}
|
|
#cssLoader1.main-wrap .child3
|
{
|
-webkit-animation-delay: 0.2s;
|
animation-delay: 0.2s;
|
}
|
|
#cssLoader1.main-wrap .child2
|
{
|
-webkit-animation-delay: 0.1s;
|
animation-delay: 0.1s;
|
}
|
|
@-webkit-keyframes animate1 {
|
|
50% {
|
-ms-transform: scaleY(0);
|
-webkit-transform: scaleY(0);
|
transform: scaleY(0);
|
|
}
|
}
|
|
@keyframes animate1 {
|
50% {
|
-ms-transform: scaleY(0);
|
-webkit-transform: scaleY(0);
|
transform: scaleY(0);
|
}
|
}
|
/*loader1 css ends*/
|
|
|
cssLoader17 {
|
position: relative;
|
width: 2.5em;
|
height: 2.5em;
|
transform: rotate(165deg);
|
}
|
.cssLoader17:before, .cssLoader17:after {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
display: block;
|
width: 0.5em;
|
height: 0.5em;
|
border-radius: 0.25em;
|
transform: translate(-50%, -50%);
|
}
|
.cssLoader17:before {
|
animation: before 2s infinite;
|
}
|
.cssLoader17:after {
|
animation: after 2s infinite;
|
}
|
.sousuo1,.sousuo2,.sousuo3,.sousuo4,.sousuo5,.sousuo6,.sousuo7,.sousuo8,.sousuo9{
|
width: 60px;
|
height: 30px;
|
border-radius: 4px;
|
background-color:#00CED1;
|
color: white;
|
border: none;
|
}
|
.loading {
|
width: 150px;
|
height: 150px;
|
/* background: red; */
|
/* 并排放置两个带边框的框，令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中 */
|
box-sizing: border-box;
|
border-radius: 50%;
|
border-top: 10px solid #FF9900;
|
position: relative;
|
/* 动画 */
|
animation: a1 2s linear infinite;
|
}
|
|
/* before和after在元素前面和后面添加内容 */
|
.loading::before,
|
.loading::after {
|
content: '';
|
width: 150px;
|
height: 150px;
|
/* background: red; */
|
position: absolute;
|
left: 0;
|
top: -10px;
|
/* 形成另外两个颜色弧 */
|
box-sizing: border-box;
|
border-radius: 50%;
|
}
|
|
.loading::before {
|
border-top: 10px solid #FF99CC;
|
transform: rotate(120deg);
|
}
|
|
.loading::after {
|
border-top: 10px solid #CCFF99;
|
transform: rotate(240deg);
|
}
|
|
/* 文字 */
|
.loading span{
|
position: absolute;
|
height: 150px;
|
width: 150px;
|
/* 文字居中 */
|
text-align: center;
|
line-height: 150px;
|
color: lightgrey;
|
font-size: 15px;
|
/* 动画 */
|
animation: a2 2s linear infinite;
|
}
|
|
@keyframes a1{
|
to{
|
transform: rotate(360deg);
|
}
|
}
|
@keyframes a2{
|
to{
|
transform: rotate(-360deg);
|
}
|
}
|
|
|
</style>
|
</head>
|
|
<body class="alt-menu sidebar-noneoverflow">
|
|
<!-- BEGIN LOADER -->
|
<div id="load_screen">
|
<div class="loader">
|
<div class="loader-content">
|
<div class="spinner-grow align-self-center"></div>
|
</div>
|
</div>
|
</div>
|
<!-- END LOADER -->
|
<div class="border-left"
|
style="opacity: 0.4; float: left; position: absolute; z-index: 0; left: 120px; height: 20px;">
|
<img alt="" src="/hxzkoa/resources/images/border.png" class="img-left">
|
</div>
|
<div class="border-right"
|
style="opacity: 0.4; float: right; position: absolute; z-index: 0; right: 120px;">
|
<img alt="" src="/hxzkoa/resources/images/border2.png" class="img-right">
|
</div>
|
<!-- BEGIN NAVBAR -->
|
<div class="login-page"></div>
|
<!-- END NAVBAR -->
|
|
<!-- BEGIN MAIN CONTAINER -->
|
<div class="main-container" id="container">
|
|
<div class="overlay"></div>
|
<div class="search-overlay"></div>
|
|
<!-- BEGIN TOPBAR -->
|
<div class="header-page"></div>
|
<!-- END TOPBAR -->
|
|
<!-- BEGIN CONTENT PART -->
|
<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-content widget-content-area br-6" style="padding: 0 0;">
|
<div class="table-responsive mb-4 mt-4"
|
style="width: 100%; height: 700px; padding: 0 0;">
|
<div style="width: 20%; height: 700px; float: left; padding: 20px 20px;">
|
<div align="center">
|
<label for="exampleFormControlInput1">每次轨迹查询时间不要超过24小时</label>
|
</div>
|
<div style="margin-left: 24px; padding: 6px; width: 100%;">
|
<label for="exampleFormControlInput1">选择图层:</label> <select
|
id="chooselayer" onchange="floorChange()"
|
class="form-control form-control-lg"
|
style="width: 60%; font-size: 12px; padding: 5px 5px">
|
<option value="sanwei">三维地图</option>
|
<c:forEach items="${floorList}" var="floor">
|
<option value="${floor.id}">${floor.mapname}</option>
|
</c:forEach>
|
<option value="baidumap">百度地图</option>
|
</select>
|
</div>
|
<div style="margin-left: 24px; padding: 6px; width: 100%;">
|
<label for="exampleFormControlInput1">选择开始时间：</label> <input
|
type="text" id="begin" class="form-control form-control-lg"
|
style="width: 60%; height: 40px; font-size: 12px; padding: 0 0;" />
|
<input type="button"
|
style="font-size: 4px;width: 19%;background-color: #5c1ac3;color: #fff;border-color: #5c1ac3;"
|
id="yixiaoshi" onclick="yushe(value)" value="一小时" />
|
<input type="button"
|
style="font-size: 4px;width: 19%;background-color: #5c1ac3;color: #fff;border-color: #5c1ac3;"
|
id="banxiaoshi" onclick="yushe(value)" value="半小时" />
|
<input type="button"
|
style="font-size: 4px;width: 19%;background-color: #5c1ac3;color: #fff;border-color: #5c1ac3;"
|
id="shifenzhong" onclick="yushe(value)" value="10分钟" />
|
</div>
|
<div style="margin-left: 24px; padding: 6px; width: 100%;">
|
<label for="exampleFormControlInput1">选择结束时间：</label> <input
|
type="text" id="end" class="form-control form-control-lg"
|
style="width: 60%; height: 40px; font-size: 12px; padding: 0 0;" />
|
</div>
|
<div style="margin-left: 24px; padding: 6px; width: 100%;">
|
<label for="exampleFormControlInput1">选择范围(围栏)：</label> <select
|
id="fanwei" class="form-control form-control-lg"
|
style="width: 60%; font-size: 12px; padding: 5px 5px">
|
<option value="空">不限范围</option>
|
<c:forEach items="${fenceList}" var="fence">
|
<option value="${fence.name}">${fence.name}</option>
|
</c:forEach>
|
</select>
|
</div>
|
<div style="margin-left: 24px; padding: 6px; width: 100%;">
|
<label for="exampleFormControlInput1">播放速度：</label> <select
|
id="bofangsudu" class="form-control form-control-lg"
|
style="width: 60%; font-size: 12px; padding: 5px 5px"
|
onclick="onHandleBtn('speed', value)">
|
<option value="1">X1</option>
|
<option value="2">X2</option>
|
<option value="4">X4</option>
|
<option value="8">X8</option>
|
<option value="16">X16</option>
|
</select>
|
</div>
|
<div style="margin-left: 24px; padding: 6px; width: 100%;">
|
<label for="exampleFormControlInput1">输入ID查询：</label> <input
|
type="text" class="form-control" id="tagid"
|
style="width: 60%; font-size: 12px; padding: 5px 5px"
|
oninput="panduan(value)">
|
</div>
|
<div style="margin-left: 24px; padding: 6px; width: 100%;"
|
id="shujutiao"></div>
|
<div style="margin-left: 24px; padding: 6px; width: 100%;">
|
<button type="button" class="sousuo1"
|
id="search" onclick="ss()">搜索</button>
|
<button type="button" class="sousuo2"
|
id="pause">暂停</button>
|
<button type="button" class="sousuo3"
|
id="continue">继续</button>
|
<button type="button" class="sousuo1"
|
id="search2" onclick="ss()">搜索</button>
|
<button type="button" class="sousuo2"
|
id="pause2">暂停</button>
|
<button type="button" class="sousuo3"
|
id="continue2">继续</button>
|
<button type="button" class="sousuo1" id="search3"
|
onclick="sanweiseach()">搜索</button>
|
<button type="button" class="sousuo2" id="pause3"
|
onclick="onHandleBtn('pause')">暂停</button>
|
<button type="button" class="sousuo3" id="continue3"
|
onclick="onHandleBtn('play')">播放</button>
|
</div>
|
</div>
|
<div style="width: 80%; height: 700px; float: left; padding: 0 0;"
|
id="baidumap"></div>
|
<div style="width: 80%; height: 700px; float: left; padding: 0 0;"
|
id="wrap">
|
<canvas id="draw"></canvas>
|
</div>
|
<!-- <div class="toolBarDiv"></div> -->
|
<div id="fengmap"
|
style="width: 80%; height: 700px; float: left; padding: 0 0;"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- END CONTENT PART -->
|
|
</div>
|
<div id="tcc" style="width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;z-index: 9999;background-color: black;opacity: 0.5;display: none">
|
</div>
|
<div class="loading" style="z-index: 99999;position: absolute;top: 400px;left: 900px;display: none">
|
<span style="font-size: 12px;color: white">正在查询数据请请等待....</span>
|
</div>
|
<!-- END MAIN CONTAINER -->
|
<% String superuser=(String) session.getAttribute("superuser"); String deleteq=(String)
|
session.getAttribute("deleteq"); String alertq=(String) session.getAttribute("alertq"); String
|
deleteall=(String) session.getAttribute("deleteall"); String username=(String)
|
session.getAttribute("username"); if (username==null || username.equals("")) {
|
request.getRequestDispatcher("/hxzk/login.jsp").forward(request, response); return; } %>
|
<input type="hidden" name="superuser" id="superuser" value="<%=superuser%>"> <input type="hidden"
|
name="deleteq" id="deleteq" value="<%=deleteq%>"> <input type="hidden" name="alertq" id="alertq"
|
value="<%=alertq%>"> <input type="hidden" name="deleteall" id="deleteall"
|
value="<%=deleteall%>">
|
<input type="hidden" name="xianusera" id="xianusera" value="<%=username%>">
|
<!-- BEGIN FUNCTION SCRIPTS -->
|
<script>
|
|
$(".sousuo1").click(function (){
|
$(".sousuo1").css("background-color","green")
|
$(".sousuo2").css("background-color","#00CED1")
|
$(".sousuo3").css("background-color","#00CED1")
|
})
|
$(".sousuo2").click(function (){
|
$(".sousuo1").css("background-color","#00CED1")
|
$(".sousuo2").css("background-color","green")
|
$(".sousuo3").css("background-color","#00CED1")
|
})
|
$(".sousuo3").click(function (){
|
$(".sousuo1").css("background-color","#00CED1")
|
$(".sousuo2").css("background-color","#00CED1")
|
$(".sousuo3").css("background-color","green")
|
})
|
//执行一个laydate实例
|
laydate.render({
|
elem: '#begin' //指定元素'
|
, type: 'datetime'
|
, done: function (value, date) {
|
var end = document.getElementById("end").value;
|
if (end) {
|
if (end <= value) {
|
alert("结束时间必须大于开始时间");
|
document.getElementById("end").value = "";
|
}
|
}
|
}
|
});
|
|
//执行一个laydate实例
|
laydate.render({
|
elem: '#end' //指定元素'
|
, type: 'datetime'
|
, done: function (value, date) {
|
var begin = document.getElementById("begin").value;
|
if (begin) {
|
if (begin >= value) {
|
alert("结束时间必须大于开始时间");
|
document.getElementById("begin").value = "";
|
}
|
}
|
|
}
|
});
|
|
function panduan(value) {
|
$.ajax({
|
url: "panduanweiyi.do",
|
type: "POST",
|
dataType: "JSON",
|
data: {
|
name: value
|
},
|
success: function (data) {
|
console.log(data.dataList)
|
if (data.dataList.length > 1) {
|
var str = "该姓名有多个标签，分别为:";
|
for (const item of data.dataList) {
|
str += "<" + item + ">";
|
}
|
alert(str);
|
if ($("#chooselayer").val() == "baidumap") {
|
$("#search2").css({ "display": "none" })
|
} else if ($("#chooselayer").val() == "sanwei") {
|
$("#search3").css({ "display": "none" })
|
} else {
|
$("#search").css({ "display": "none" })
|
}
|
} else if (data.dataList.length == 1) {
|
if ($("#chooselayer").val() == "baidumap") {
|
$("#search2").css({ "display": "" })
|
} else if ($("#chooselayer").val() == "sanwei") {
|
$("#search3").css({ "display": "" })
|
} else {
|
$("#search").css({ "display": "" })
|
}
|
}
|
}
|
})
|
}
|
|
function checkRate(nubmer) {
|
var re = /^[0-9a-zA-Z]*$/g; //判断字符串是否为数字和字母组合 //判断正整数 /^[1-9]+[0-9]*]*$/
|
if (!re.test(nubmer)) {
|
return false;
|
} else {
|
return true;
|
}
|
}
|
|
function yushe(value) {
|
var now = "";
|
|
if (value == "一小时") {
|
now = new Date(new Date().getTime() - 1 * 60 * 60 * 1000);
|
} else if (value == "半小时") {
|
now = new Date(new Date().getTime() - 0.5 * 60 * 60 * 1000);
|
} else if (value == "10分钟") {
|
now = new Date(new Date().getTime() - 0.166 * 60 * 60 * 1000);
|
}
|
|
var year = now.getFullYear(); //年
|
var month = now.getMonth() + 1; //月
|
var day = now.getDate(); //日
|
|
var hh = now.getHours(); //时
|
var mm = now.getMinutes(); //分
|
var ss = now.getSeconds(); //分
|
|
var clock = year + "-";
|
|
if (month < 10)
|
clock += "0";
|
|
clock += month + "-";
|
|
if (day < 10)
|
clock += "0";
|
|
clock += day + " ";
|
|
if (hh < 10)
|
clock += "0";
|
|
clock += hh + ":";
|
if (mm < 10)
|
clock += '0';
|
clock += mm + ":";
|
|
if (ss < 10)
|
clock += '0';
|
clock += ss;
|
document.getElementById("begin").value = clock;
|
yushe2();
|
}
|
function yushe2() {
|
var now = new Date();
|
|
var year = now.getFullYear(); //年
|
var month = now.getMonth() + 1; //月
|
var day = now.getDate(); //日
|
|
var hh = now.getHours(); //时
|
var mm = now.getMinutes(); //分
|
var ss = now.getSeconds(); //分
|
|
var clock = year + "-";
|
|
if (month < 10)
|
clock += "0";
|
|
clock += month + "-";
|
|
if (day < 10)
|
clock += "0";
|
|
clock += day + " ";
|
|
if (hh < 10)
|
clock += "0";
|
|
clock += hh + ":";
|
if (mm < 10)
|
clock += '0';
|
clock += mm + ":";
|
|
if (ss < 10)
|
clock += '0';
|
clock += ss;
|
document.getElementById("end").value = clock;
|
}
|
|
function floorChange() {
|
// when change floor num, the map will also change.
|
var select_layer = document.getElementById("chooselayer");
|
var select_value = select_layer.value;
|
if (select_value == 'baidumap') {
|
document.getElementById("fengmap").style.display = 'none';
|
document.getElementById("wrap").style.display = 'none';
|
document.getElementById("draw").style.display = 'none';
|
document.getElementById("baidumap").style.display = '';
|
document.getElementById("search").style.display = 'none';
|
document.getElementById("pause").style.display = 'none';
|
document.getElementById("continue").style.display = 'none';
|
document.getElementById("search3").style.display = 'none';
|
document.getElementById("pause3").style.display = 'none';
|
document.getElementById("continue3").style.display = 'none';
|
document.getElementById("search2").style.display = '';
|
document.getElementById("pause2").style.display = '';
|
document.getElementById("continue2").style.display = '';
|
document.getElementById("bofangsudu").options.remove(4);
|
diaoyongbaidumap();
|
} else if (select_value == 'sanwei') {
|
document.getElementById("fengmap").style.display = '';
|
document.getElementById("wrap").style.display = 'none';
|
document.getElementById("draw").style.display = 'none';
|
document.getElementById("baidumap").style.display = 'none';
|
document.getElementById("search").style.display = 'none';
|
document.getElementById("pause").style.display = 'none';
|
document.getElementById("continue").style.display = 'none';
|
document.getElementById("search2").style.display = 'none';
|
document.getElementById("pause2").style.display = 'none';
|
document.getElementById("continue2").style.display = 'none';
|
document.getElementById("search3").style.display = '';
|
document.getElementById("pause3").style.display = '';
|
document.getElementById("continue3").style.display = '';
|
jiazaisanwei()
|
} else {
|
document.getElementById("fengmap").style.display = 'none';
|
document.getElementById("wrap").style.display = '';
|
document.getElementById("draw").style.display = '';
|
document.getElementById("baidumap").style.display = 'none';
|
document.getElementById("search").style.display = '';
|
document.getElementById("pause").style.display = '';
|
document.getElementById("continue").style.display = '';
|
document.getElementById("search2").style.display = 'none';
|
document.getElementById("pause2").style.display = 'none';
|
document.getElementById("continue2").style.display = 'none';
|
document.getElementById("search3").style.display = 'none';
|
document.getElementById("pause3").style.display = 'none';
|
document.getElementById("continue3").style.display = 'none';
|
document.getElementById("bofangsudu").options.add(new Option("X16", "16"));
|
$.ajax({
|
async: false,
|
type: 'POST',
|
url: "/hxzkoa/floornumTomap.do",
|
dataType: 'json',
|
data: {
|
value: select_value
|
},
|
success: function (data) {
|
imgUrl = '/hxzkoa/hxzk/image/mapfile/' + data[0].mapname;
|
//imgUrl = '/hxzkoa/hxzk/image/mapfile/office.jpg';
|
new MarkPoints(imgUrl);
|
}
|
})
|
};
|
};
|
|
function getTruemap() {
|
var floor = document.getElementById("chooselayer").value;
|
var map_wl = [];
|
$.ajax({
|
async: false,
|
type: "POST",
|
url: "/hxzkoa/floornumTomap.do",
|
dataType: 'json',
|
data: {
|
value: floor
|
},
|
success: function (data) {
|
map_wl = [data[0].x_Truelength, data[0].y_Truewidth];
|
},
|
});
|
return map_wl;
|
};
|
|
function getYuandian() {
|
var floor = document.getElementById("chooselayer").value;
|
var map_wl = [];
|
$.ajax({
|
async: false,
|
type: "POST",
|
url: "/hxzkoa/floornumTomap.do",
|
dataType: 'json',
|
data: {
|
value: floor
|
},
|
success: function (data) {
|
yuandian = [data[0].x0_length, data[0].y0_width];
|
},
|
});
|
return yuandian;
|
};
|
|
|
function queryTagid() {
|
var tag = document.getElementById("tagid").value;
|
var begin = document.getElementById("begin").value;
|
var end = document.getElementById("end").value;
|
var floor = document.getElementById("chooselayer").value;
|
var fence = document.getElementById("fanwei").value;
|
var tagpanduan = checkRate(tag);
|
var tagTrack = [];
|
if (tag) {
|
if (begin && end) {
|
// query tag id from db
|
// query tag id from db
|
$.ajax({
|
async: false,
|
type: "POST",
|
url: "/hxzkoa/trackTagid.do",
|
dataType: 'json',
|
data: {
|
tag_value: tag,
|
begin_value: begin,
|
end_value: end,
|
floor_value: floor,
|
fence: fence,
|
panduan: tagpanduan,
|
},
|
success: function (data) {
|
tagTrack = data;
|
},
|
});
|
return tagTrack;
|
} else { alert("请输入要查询的时间"); }
|
} else {
|
alert("请输入要查询的ID")
|
}
|
};
|
|
//这是比较函数
|
function compare(p) {
|
return function (m, n) {
|
var a = m[p];
|
var b = n[p];
|
return a - b; //升序
|
}
|
};
|
|
function ToDigital(strDu, strFen, strMiao, len) {
|
len = (len > 6 || typeof (len) == "undefined") ? 6 : len;//精确到小数点后最多六位
|
strDu = (typeof (strDu) == "undefined" || strDu == "") ? 0 : parseFloat(strDu);
|
strFen = (typeof (strFen) == "undefined" || strFen == "") ? 0 : parseFloat(strFen) / 60;
|
strMiao = (typeof (strMiao) == "undefined" || strMiao == "") ? 0 : parseFloat(strMiao) / 60; //秒为分的格式
|
var digital = strDu + strFen + strMiao;
|
if (digital == 0) {
|
return "";
|
} else {
|
return digital.toFixed(len);
|
}
|
};
|
|
function Queue() {
|
let items = [];
|
// 向队列添加元素（一个或多个）
|
this.enqueue = function (element) {
|
if (element instanceof Array) items = items.concat(element);
|
else items.push(element);
|
};
|
// 从队列移除元素
|
this.dequeue = function () {
|
return items.shift();
|
};
|
// 返回队列中的第一个元素
|
this.front = function () {
|
return items[0];
|
};
|
// 返回队列的长度
|
this.size = function () {
|
return items.length;
|
};
|
// 清空队列
|
this.clear = function () {
|
items = [];
|
};
|
|
// 打印队列内的所有元素
|
this.print = function () {
|
};
|
};
|
|
function getGPSTrack() {
|
var tag = document.getElementById("tagid").value;
|
var begin = document.getElementById("begin").value;
|
var end = document.getElementById("end").value;
|
var gpslist = [];
|
if (tag) {
|
if (begin && end) {
|
// query tag id from db
|
//获取当前时间
|
|
$.ajax({
|
async: false,
|
type: 'POST',
|
traditional: true,
|
url: "/hxzkoa/getGPSTrack.do",
|
dataType: 'json',
|
data: {
|
tag_value: tag,
|
begin_value: begin,
|
end_value: end,
|
},
|
success: function (data) {
|
//经纬度从度分秒转成度
|
console.log(data)
|
for (var i = 0; i < data.length; i++) {
|
if (data[i].gps_weidu != "" && data[i].gsp_jingdu != "") {
|
var weidu = ToDigital(data[i].gps_weidu.substring(0, 2), data[i].gps_weidu.substring(2, 4), data[i].gps_weidu.substring(4));
|
if (data[i].gps_NS == "S") {
|
weidu = String(0 - weidu);
|
};
|
var jingdu = ToDigital(data[i].gsp_jingdu.substring(0, 3), data[i].gsp_jingdu.substring(3, 5), data[i].gsp_jingdu.substring(5));
|
if (data[i].gps_EW == "W") {
|
jingdu = String(0 - jingdu);
|
};
|
gpslist.push([data[i].tagid, jingdu, weidu, data[i].gps_power, data[i].addtime, data[i].name,data[i].gps_state]);
|
}
|
};
|
},
|
});
|
return gpslist;
|
} else { alert("请输入要查询的时间"); }
|
} else { alert("请输入要查询的ID"); }
|
};
|
</script>
|
|
<!-- 三维地图 -->
|
<script>
|
var map;
|
var mapid;
|
var themeid;
|
var tracksPlayer; // 轨迹回放类
|
var speed = 100; // 默认速度，播放速度： speedMultiple * speed
|
var speedMultiple = 1; // 倍速
|
var isPause = false; // 是否在暂停状态
|
var isComplete = false; // 是否播放完成，播放完成后需要先调用start方法，再执行play
|
var coordMarkers = []; // 起终点图标
|
var trackData = [];
|
var sanweiicon = [];
|
var sanweipanduan = false;
|
|
var origon = [
|
{ x: -29, y: -907 },
|
{ x: 2969, y: -908 },
|
{ x: -29, y: 1092 }
|
];
|
|
var target = [
|
{ x: 13084799.0604, y: 4684857.2468 }, //原点 x最小y最小
|
{ x: 13084829.1542, y: 4684857.3090 }, //x最大y最小
|
{ x: 13084799.0311, y: 4684837.1980 } //x最小y最大
|
];
|
|
var coordsTransformer = new fengmap.FMCoordsTransformer({ origon: origon, target: target });
|
|
$.ajax({
|
async:false,
|
url:"/hxzkoa/getmapid.do",
|
type:"POST",
|
dataType:"JSON",
|
success:function(data) {
|
mapid = data.mapid
|
themeid = data.themeid
|
}
|
})
|
|
function jiazaisanwei() {
|
var options = {
|
container: document.getElementById('fengmap'),
|
appName: 'map1',
|
key: '09facc4ee52d1844bc1e561dad5abf59',
|
mapID: mapid,
|
themeID: themeid,
|
mapURL: '/hxzkoa/hxzk/fengmap/data/',
|
themeURL: '/hxzkoa/hxzk/fengmap/data/theme/',
|
minTiltAngle: 0,
|
mapZoom: 19.5,
|
}
|
map = new fengmap.FMMap(options);
|
}
|
|
|
/* 渲染轨迹回放数据 */
|
function addTracks() {
|
// 自行添加起终点marker
|
addStartAndEndMarker();
|
// 初始化轨迹播放插件
|
tracksPlayer = new fengmap.FMTracksPlayer(map);
|
// 设置路径轨迹数据
|
tracksPlayer.setTracks(trackData);
|
// 设置线的样式
|
tracksPlayer.setTrackStyle({
|
width: 6,
|
radius: 1,
|
type: fengmap.FMLineType.ARROW,
|
animate: true,
|
height: 0
|
})
|
// 设置定位点图标1 - LOCATION_MARKER
|
var locationMarker = {
|
type: fengmap.FMType.LOCATION_MARKER,
|
options: {
|
url: '/hxzkoa/hxzk/fengmap/data/bluedot.png',
|
height: 0.2,
|
x: trackData[0].x,
|
y: trackData[0].y,
|
level: trackData[0].level,
|
size: 24,
|
}
|
};
|
// 设置定位点图标2 - IMAGE_MARKER
|
var imageMarker = {
|
type: fengmap.FMType.IMAGE_MARKER,
|
options: {
|
url: 'https://developer.fengmap.com/fmAPI/images/blueImageMarker.png',
|
height: 0.1,
|
size: 48
|
}
|
}
|
// 设置定位点图标3 - DYNAMIC_MODEL_MARKER
|
var dynamicModel = {
|
type: fengmap.FMType.DYNAMIC_MODEL_MARKER,
|
options: {
|
url: 'https://developer.fengmap.com/fmAPI/images/duck.glb',
|
height: 0.3,
|
size: 480,
|
scale: 5,
|
heading: 10,
|
}
|
}
|
// 设置定位点图标4 - DOM_MARKER
|
var domMarker = {
|
type: fengmap.FMType.DOM_MARKER,
|
options: {
|
content: '<div class="domContainer"><img src="https://developer.fengmap.com/fmAPI/images/red.png"></div>',
|
height: 0.2,
|
domWidth: 100,
|
domHeight: 100
|
}
|
}
|
|
// 设置定位点图标 - 可选以上4种类型
|
tracksPlayer.setMarkerStyle(locationMarker.type, locationMarker.options);
|
// 将轨迹线和定位点渲染到地图上
|
tracksPlayer.render();
|
// 设置轨迹回放速度
|
tracksPlayer.setSpeed(speed);
|
// 播放中的回调函数
|
tracksPlayer.on('playing', function (params) {
|
var progress = params.progress; // 当前播放进度时间戳
|
var level = params.level; // 所在楼层
|
})
|
// 轨迹播放完成回调函数
|
tracksPlayer.on('complete', function () {
|
isComplete = true;
|
})
|
}
|
|
/* 按钮操作 */
|
function onHandleBtn(type, value) {
|
switch (type) {
|
case 'play':
|
if (isComplete) {
|
// 轨迹播放到开始
|
tracksPlayer.start();
|
tracksPlayer.play();
|
isComplete = false;
|
} else {
|
// 播放
|
tracksPlayer.play();
|
}
|
break;
|
case 'pause':
|
// 暂停
|
tracksPlayer.pause();
|
break;
|
case 'stop':
|
// 轨迹播放到最后
|
tracksPlayer.stop();
|
break;
|
case 'speed':
|
var select_layer = document.getElementById("chooselayer");
|
var select_value = select_layer.value;
|
if (select_value == "sanwei") {
|
// 设置播放速度
|
var _speed = value * speed;
|
tracksPlayer.setSpeed(_speed);
|
break;
|
}
|
case 'progress':
|
// 设置轨迹的进度
|
tracksPlayer.setProgress(value);
|
break;
|
default:
|
break;
|
}
|
}
|
|
/* 添加起终点marker */
|
function addStartAndEndMarker() {
|
var coords = [
|
{ x: trackData[0].x, y: trackData[0].y, level: trackData[0].level, url: 'https://developer.fengmap.com/fmAPI/images/start.png' },
|
{ x: trackData[trackData.length - 1].x, y: trackData[trackData.length - 1].y, level: trackData[trackData.length - 1].level, url: 'https://developer.fengmap.com/fmAPI/images/end.png' },
|
];
|
for (var i = 0; i < coords.length; i++) {
|
var coord = coords[i];
|
var im = new fengmap.FMImageMarker({
|
x: coord.x,
|
y: coord.y,
|
url: coord.url,
|
size: 32,
|
height: 0.2,
|
anchor: fengmap.FMMarkerAnchor.BOTTOM,
|
depth: false,
|
collision: true
|
});
|
var floor = map.getFloor(coord.level);
|
im.addTo(floor);
|
coordMarkers.push(im);
|
};
|
}
|
|
function sanweiseach() {
|
var tag = document.getElementById("tagid").value;
|
var begin = document.getElementById("begin").value;
|
var end = document.getElementById("end").value;
|
//判断该标签id是否存在
|
var gps_node_list = getGPSTrack();
|
console.log(gps_node_list)
|
if(gps_node_list.length ==0 ){
|
alert("您搜索的ID在当前时间不存在")
|
$("#tcc").css("display","none")
|
$(".loading").css("display","none")
|
}else{
|
$("#tcc").css("display","block")
|
$(".loading").css("display","block")
|
if(tag){
|
$.ajax({
|
url: "/hxzkoa/trackTagid3.do",
|
type: "POST",
|
dataType: "JSON",
|
data: {
|
tagid: tag,
|
begin: begin,
|
end: end
|
},
|
success: function (data) {
|
$("#tcc").css("display","none")
|
$(".loading").css("display","none")
|
trackData = [];
|
for (var i = 0; i < data.length; i++) {
|
var xy = coordsTransformer.transform({ x: data[i].x, y: data[i].y });
|
trackData[i] = { level: 1, x: xy.x, y: xy.y, z: 0, time: data[i].time }
|
}
|
if (sanweipanduan) {
|
for (var i = 0; i < coordMarkers.length; i++) {
|
coordMarkers[i].remove()
|
}
|
tracksPlayer.clear();
|
tracksPlayer.dispose();
|
}
|
sanweipanduan = true;
|
addTracks();
|
}
|
})
|
}else{
|
alert("请输入要查询的ID！");
|
}
|
}
|
}
|
</script>
|
|
<!-- 百度地图功能 -->
|
<script type="text/javascript">
|
|
var baitiao;
|
var baizongtiao;
|
var playFlag;
|
var playTrack;
|
var playIndex = 0;
|
var zhuanhuanindex = 0;
|
var search_count = 0;
|
var search_again = false;
|
var current_node_list = [];
|
var current_point_list = [];
|
var old_index = 0;
|
var timer_g;
|
var tagid;
|
var zuobiao;
|
var statue;
|
var i = 0;
|
|
function diaoyongbaidumap() {
|
// this.playFlag; //当前是否在播放
|
// this.playTrack; //当前需要播放的总node
|
// this.playIndex = 0;//当前播放坐标顺序
|
//var current_node_list = new Queue();
|
current_node_list = [];
|
current_point_list = [];
|
old_index = 0;
|
// 百度地图API功能
|
var bm = new BMap.Map("baidumap"); // 创建Map实例
|
|
bm.centerAndZoom(new BMap.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
|
//添加地图类型控件
|
var opts = { type: BMAP_NAVIGATION_CONTROL_ZOOM }; //仅保留控件缩放部分
|
bm.addControl(new BMap.NavigationControl(opts)); //添加导航控件
|
bm.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
|
bm.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
bm.addControl(new BMap.MapTypeControl({
|
mapTypes: [
|
BMAP_NORMAL_MAP,
|
BMAP_SATELLITE_MAP,
|
BMAP_HYBRID_MAP
|
]
|
}));
|
|
var myIcon = new BMap.Icon("/hxzkoa/hxzk/image/targeticon/default.png", new BMap.Size(40, 40), {
|
//使用自定义标注时，指向的地理位置位于图片的中心点
|
//anchor为图片左上角相对于地理位置的偏移量，此时指向的地理位置位于图标中心最下方
|
anchor: new BMap.Size(20, 40)
|
}
|
);
|
|
var convertor = new BMap.Convertor();
|
function gpsplay() {
|
|
//坐标转换完之后的回调函数
|
translateCallback = function (data) {
|
if (search_again == true) {
|
return null
|
}
|
if (data.status == 0) {//已执行完坐标转换
|
for (var k = 0; k < data.points.length; k++) {
|
current_node_list.push(new BMap.Marker(data.points[k], { icon: myIcon }));
|
current_point_list.push(data.points[k]);
|
}
|
|
zhuanhuanindex += data.points.length;
|
if (zhuanhuanindex < playTrack.length) {
|
var j = 0;
|
var pointArr = [];
|
while (j < 10 && zhuanhuanindex + j < playTrack.length) {
|
var point = new BMap.Point(new Number(playTrack[zhuanhuanindex + j][1]), new Number(playTrack[zhuanhuanindex + j][2]));
|
pointArr.push(point);
|
j++;
|
}
|
// pointArr = [];
|
// point = new BMap.Point(new Number(playTrack[zhuanhuanindex][1]), new Number(playTrack[zhuanhuanindex][2]));
|
// pointArr.push(point);
|
convertor.translate(pointArr, 1, 5, translateCallback);
|
}
|
};
|
if (search_again == true) {
|
current_node_list = [];
|
current_point_list = [];
|
};
|
};
|
|
|
if (playTrack.length != 0) {
|
if (playIndex == 0) {
|
current_node_list = [];
|
current_point_list = [];
|
}
|
if (playFlag && zhuanhuanindex < playTrack.length) {
|
var j = 0;
|
var pointArr = [];
|
while (j < 10 && zhuanhuanindex + j < playTrack.length) {
|
var point = new BMap.Point(new Number(playTrack[zhuanhuanindex + j][1]), new Number(playTrack[zhuanhuanindex + j][2]));
|
pointArr.push(point);
|
j++;
|
}
|
search_again = false;
|
convertor.translate(pointArr, 1, 5, translateCallback);
|
|
}
|
|
if (playFlag && zhuanhuanindex >= playIndex) {
|
t = 1000;
|
var gpss_list = getGPSTrack();
|
console.log(gpss_list)
|
timer_g = setInterval(fn, t);
|
function fn() {
|
var speed = document.getElementById("bofangsudu").value;
|
if (playFlag && playIndex < playTrack.length && zhuanhuanindex > playIndex) {
|
for (j = 0; j < playIndex; j++) {
|
old_mark = current_node_list[j];
|
bm.removeOverlay(old_mark);//清除上一个
|
}
|
marker = current_node_list[playIndex];
|
console.log(current_node_list[playIndex])
|
bm.addOverlay(marker);
|
str = '<input type="text" class="form-control" id="tagid" style="width:60%;font-size: 12px;padding: 5px 5px" placeholder="剩余' + baizongtiao + '/' + baitiao + '条数据">'
|
$("#shujutiao").html(str);
|
$("#tcc").css("display","none")
|
$(".loading").css("display","none")
|
if (baitiao > 0) {
|
baitiao -= 1;
|
}
|
var str=[
|
'<div style="width: 200px;">' +
|
'<span>ID:'+playTrack[0][0]+' '+playTrack[0][5]+'</span><br>' +
|
'<span>状态:'+gpss_list[playIndex][6]+'</span><br>' +
|
'<span>'+gpss_list[playIndex][4]+'</span>' +
|
'</div>'
|
]
|
// zuobiao = new BMap.Label(gpss_list[playIndex][4], { offset: new BMap.Size(20, -22) });
|
// zuobiao.setStyle({
|
// color: "#090909",
|
// fontSize: "14px",
|
// padding: "5px 5px",
|
// borderRadius: "2px",
|
// border: "0",
|
// backgroundColor: "#32CD32",
|
// transform: 'translateX(-50%)',
|
// opacity: 0.8,
|
//
|
// });
|
statue = new BMap.Label(str, { offset: new BMap.Size(20, -62) });
|
statue.setStyle({
|
width:"200px",
|
color: "#ffffff",
|
fontSize: "14px",
|
borderRadius: "10px",
|
border: "2px solid #80BC4E",
|
backgroundColor: "#92D050",
|
transform: 'translateX(-50%)',
|
opacity: 1,
|
padding:"3px 3px 3px 5px",
|
});
|
console.log(gpss_list[playIndex])
|
i++;
|
// marker.setLabel(zuobiao);
|
// marker.setLabel(tagid);
|
marker.setLabel(statue);
|
//添加label-tagid
|
|
|
if (old_index > 1 && old_index < playIndex) {
|
var poly_line = [current_point_list[old_index], current_point_list[playIndex]]
|
var polyline = new BMap.Polyline(poly_line, { strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5 });
|
bm.addOverlay(polyline)
|
}
|
old_index = playIndex;
|
|
if (playIndex == 0) {
|
bm.setCenter(current_point_list[playIndex])
|
}
|
playIndex += 1;
|
|
clearInterval(timer_g);
|
if (playIndex >= playTrack.length - 1) {
|
clearInterval(timer_g);
|
playIndex = 0;
|
i = 0;
|
} else {
|
var stime = new Date(playTrack[playIndex][4]).getTime();
|
var etime = new Date(playTrack[playIndex + 1][4]).getTime();
|
var t = etime - stime;
|
|
while (t == 0 && playIndex < playTrack.length - 1) {
|
stime = new Date(playTrack[playIndex][4]).getTime();
|
etime = new Date(playTrack[playIndex + 1][4]).getTime();
|
t = etime - stime;
|
playIndex += 1;
|
}
|
if (playIndex != playTrack.length - 1) {
|
var t_v = t / speed;
|
timer_g = setInterval(fn, t_v);
|
}
|
}
|
}
|
|
}
|
}
|
|
}
|
};
|
|
document.getElementById('search2').onclick = function () {
|
bm.clearOverlays();
|
clearInterval(timer_g);
|
baizongtiao = getGPSTrack().length - 2;
|
baitiao = baizongtiao;
|
setTimeout(fnc(), 200);
|
|
function fnc() {
|
current_node_list = [];
|
current_point_list = [];
|
playIndex = 0;
|
old_index = 0;
|
search_count += 1;
|
if (search_count >= 2) {
|
search_again = true;
|
current_node_list = [];
|
current_point_list = [];
|
playIndex = 0;
|
old_index = 0;
|
zhuanhuanindex = 0;
|
playTrack = [];
|
playFlag = true;
|
var gps_node_list = getGPSTrack();
|
$("#tcc").css("display","block")
|
$(".loading").css("display","block")
|
if (gps_node_list.length == 0) {
|
$("#tcc").css("display","none")
|
$(".loading").css("display","none")
|
alert("搜索的ID在当前时间段不存在！");
|
document.getElementById("tagid").value = "";
|
} else {
|
playTrack = gps_node_list;
|
tagid = new BMap.Label(playTrack[0][5], { offset: new BMap.Size(20, -72) });
|
tagid.setStyle({
|
color: "#090909",
|
fontSize: "14px",
|
borderRadius: "2px",
|
padding: "5px 5px",
|
border: "0",
|
backgroundColor: "#32CD32",
|
transform: 'translateX(-50%)',
|
opacity: 0.8,
|
});
|
// zuobiao = new BMap.Label(playTrack[0][4], { offset: new BMap.Size(20, -60) });
|
// zuobiao.setStyle({
|
// color : "#090909",
|
// fontSize : "14px",
|
// borderRadius: "5px",
|
// padding:"5px 5px",
|
// border :"0",
|
// backgroundColor :"#32CD32",
|
// transform: 'translateX(-50%)',
|
// });
|
search_again = false;
|
gpsplay();
|
}
|
} else {
|
current_node_list = [];
|
current_point_list = [];
|
playIndex = 0;
|
old_index = 0;
|
zhuanhuanindex = 0;
|
playTrack = [];
|
playFlag = true;
|
var gps_node_list = getGPSTrack();
|
$("#tcc").css("display","block")
|
$(".loading").css("display","block")
|
if (gps_node_list.length == 0) {
|
$("#tcc").css("display","none")
|
$(".loading").css("display","none")
|
alert("搜索的ID在当前时间段不存在！");
|
document.getElementById("tagid").value = "";
|
} else {
|
//百度搜索
|
playTrack = gps_node_list;
|
tagid = new BMap.Label(playTrack[0][5],{ offset: new BMap.Size(20, -75) });
|
tagid.setStyle({
|
color: "#090909",
|
width: "190px",
|
fontSize: "14px",
|
borderRadius: "2px",
|
padding: "5px 5px",
|
border: "0",
|
backgroundColor: "#32CD32",
|
transform: 'translateX(-50%)',
|
textAlign:"center",
|
opacity: 0.8,
|
});
|
// zuobiao = new BMap.Label(playTrack[0][4], { offset: new BMap.Size(20, -60) });
|
// zuobiao.setStyle({
|
// color : "#090909",
|
// fontSize : "14px",
|
// borderRadius: "5px",
|
// padding:"5px 5px",
|
// border :"0",
|
// backgroundColor :"#32CD32",
|
// transform: 'translateX(-50%)',
|
// });
|
search_again = false;
|
gpsplay();
|
}
|
}
|
}
|
|
};
|
document.getElementById("pause2").onclick = function () {
|
playFlag = false;
|
search_again = true;
|
clearInterval(timer_g);
|
};
|
document.getElementById("continue2").onclick = function () {
|
playFlag = true;
|
search_again = false;
|
gpsplay();
|
};
|
|
|
/**
|
* 坐标常量说明：
|
* COORDINATES_WGS84 = 1, WGS84坐标
|
* COORDINATES_WGS84_MC = 2, WGS84的平面墨卡托坐标
|
* COORDINATES_GCJ02 = 3，GCJ02坐标
|
* COORDINATES_GCJ02_MC = 4, GCJ02的平面墨卡托坐标
|
* COORDINATES_BD09 = 5, 百度bd09经纬度坐标
|
* COORDINATES_BD09_MC = 6，百度bd09墨卡托坐标
|
* COORDINATES_MAPBAR = 7，mapbar地图坐标
|
* COORDINATES_51 = 8，51地图坐标
|
*/
|
|
};
|
</script>
|
<!-- 百度地图功能结束 -->
|
|
<script>
|
|
var zongtiao;
|
var tiao
|
var timer;
|
|
function MarkPoints(Imgurl) {
|
this.imgX = 0;//在画布上图片的X偏移量
|
this.imgY = 0;//在画布上图片的Y偏移量
|
this.imgScale = 1;//图片的缩放比例
|
this.rateNum;//图片高度自适应比例,图片等比居中展示在canvas
|
this.scaleFlag = 0;//缩放因子，最大缩放9,最小缩放-9
|
this.context;
|
this.img;
|
this.playIndex = 0;
|
this.pos = {};//每次拖拽前坐标保存
|
this.playFlag = false;//是否播放
|
this.playTrack = [];
|
this.dragFlag = false;//是否可拖拽当前img，默认不能
|
this.markFlag = false;//标记区域开启关闭flag
|
this.CreatLinepoints = [];//每次创建新区域的坐标集合
|
this.playMark = []; //正在展示的标记
|
this.allMarkLins = [];//已创建的区域集合，例如[[{x,y},{x,y},{x,y}],[{n,m},{n,m},{n,m}]]目前只需要一个区域，所以数组内部只有一项
|
this.allFenceColor = [];//已创建的区域颜色
|
this.getImgLoad(Imgurl);
|
this.init();
|
document.oncontextmenu = new Function("event.returnValue=false;");
|
document.onselectstart = new Function("event.returnValue=false;");
|
|
}
|
MarkPoints.prototype = {
|
getImgLoad: function (Imgurl) {
|
var _this = this;
|
var wrap = document.getElementById('wrap');
|
_this.canvas = document.getElementById('draw');
|
_this.context = draw.getContext('2d');
|
_this.canvas.height = wrap.offsetHeight;
|
_this.canvas.width = wrap.offsetWidth;
|
_this.img = new Image();
|
_this.img.onload = function () {
|
_this.imgX = 0;
|
_this.imgY = 0;
|
_this.imgScale = 1;
|
_this.rateNum = _this.canvas.height / _this.img.naturalHeight;
|
_this.imgX = (_this.canvas.width - _this.img.naturalWidth * _this.imgScale * _this.rateNum) / 2;//默认进来当前图像居中显示
|
/*画出当前图片*/
|
_this.drawImg();
|
}
|
_this.img.src = imgUrl;
|
|
},
|
getNewPoints: function (points) {
|
var _this = this;
|
var newPointAry = [];
|
for (var i = 0; i < points.length; i++) {
|
var obj = {};
|
obj.x = points[i].x * _this.imgScale + _this.imgX;
|
obj.y = points[i].y * _this.imgScale + _this.imgY;
|
if (points[i].hasOwnProperty('mac')) {
|
obj.mac = points[i].mac;
|
obj.name = points[i].name || '';
|
}
|
|
newPointAry.push(obj);
|
}
|
return newPointAry;
|
},
|
drawImg: function () {
|
var _this = this;
|
_this.context.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
|
_this.context.drawImage(_this.img, 0, 0, _this.img.naturalWidth, _this.img.naturalHeight, _this.imgX, _this.imgY, _this.img.naturalWidth * _this.imgScale * _this.rateNum, _this.img.naturalHeight * _this.imgScale * _this.rateNum);
|
var trueMeasure = getTruemap();
|
var trueLength = new Number(trueMeasure[0]);
|
var trueWidth = new Number(trueMeasure[1]);
|
var x_ratio = new Number(_this.img.naturalWidth / trueLength);
|
var y_ratio = new Number(_this.img.naturalHeight / trueWidth);
|
var can = _this.context;
|
var x_x0 = new Number(getYuandian()[0]);
|
var y_y0 = new Number(getYuandian()[1]);
|
|
//轨迹拖尾
|
can.beginPath();
|
can.fillStyle = "red";
|
can.strokeStyle = "red";
|
for (var i = 0; i < _this.playIndex - 1; i++) {
|
var cor_x = new Number(_this.playTrack[i].x);
|
var cor_y = new Number(_this.playTrack[i].y);
|
var x_cor = new Number(_this.imgX + _this.imgScale * _this.rateNum * x_ratio * (cor_x - x_x0));
|
var y_cor = new Number(_this.imgY + _this.imgScale * _this.rateNum * y_ratio * (cor_y - y_y0));
|
|
var cor_x2 = new Number(_this.playTrack[i + 1].x);
|
var cor_y2 = new Number(_this.playTrack[i + 1].y);
|
var x_cor2 = new Number(_this.imgX + _this.imgScale * _this.rateNum * x_ratio * (cor_x2 - x_x0));
|
var y_cor2 = new Number(_this.imgY + _this.imgScale * _this.rateNum * y_ratio * (cor_y2 - y_y0));
|
|
can.moveTo(x_cor, y_cor);
|
can.lineTo(x_cor2, y_cor2);
|
}
|
can.closePath();
|
can.stroke();
|
|
//实时轨迹点
|
if (_this.playMark) {
|
var can = _this.context;
|
var cor_x = new Number(_this.playMark.x);
|
var cor_y = new Number(_this.playMark.y);
|
var zuobiao = _this.playMark.x + "," + _this.playMark.y;
|
|
var x_cor = new Number(_this.imgX + _this.imgScale * _this.rateNum * x_ratio * (cor_x - x_x0));
|
var y_cor = new Number(_this.imgY + _this.imgScale * _this.rateNum * y_ratio * (cor_y - y_y0));
|
can.beginPath(); //画坐标点
|
can.arc(x_cor, y_cor, 6, 0, Math.PI * 2, true);
|
can.fillStyle = "#FF423E";
|
can.fill();
|
can.strokeStyle = "#FFF";
|
can.stroke();//画空心圆
|
can.closePath();
|
|
can.fillText(_this.playMark.tagid, x_cor - 25, y_cor - 10);//标明tagid
|
can.fillText(zuobiao, x_cor + 10, y_cor - 10);//标明坐标信息
|
can.fillText(_this.playMark.time, x_cor - 30, y_cor + 15);//标明时间戳
|
|
|
};
|
if (_this.allMarkLins.length) {
|
for (var m = 0; m < _this.allMarkLins.length; m++) {
|
var points = _this.allMarkLins[m];
|
var newPoints = _this.getNewPoints(points);
|
for (var i = 0; i < newPoints.length; i++) {
|
var can = _this.context;
|
can.beginPath();
|
can.arc(newPoints[i].x, newPoints[i].y, 6, 0, Math.PI * 2, true);
|
can.fillStyle = "#FF423E";
|
can.fill();
|
can.strokeStyle = "#FFF";
|
can.stroke();//画空心圆
|
can.closePath();
|
|
if (points.length >= 2 && i >= 1) {
|
can.strokeStyle = "#FF423E";
|
can.lineWidth = 2;
|
can.beginPath();
|
can.moveTo(newPoints[i - 1].x, newPoints[i - 1].y);
|
can.lineTo(newPoints[i].x, newPoints[i].y);
|
can.fillStyle = "#ff0000";
|
can.fill();
|
can.stroke();
|
can.closePath();
|
}
|
}
|
if (points.length >= 3) {
|
can.strokeStyle = "#FF423E";
|
can.lineWidth = 2;
|
can.beginPath();
|
can.moveTo(newPoints[newPoints.length - 1].x, newPoints[newPoints.length - 1].y);
|
can.lineTo(newPoints[0].x, newPoints[0].y);
|
can.stroke();
|
can.closePath();
|
}
|
}
|
;
|
}
|
|
},
|
init: function () {
|
var _this = this;
|
_this.canvas.onmousedown = function (event) {
|
_this.clickDown(event);
|
};
|
_this.canvas.onmousemove = function (event) {
|
_this.mouseMove(event)
|
};
|
_this.canvas.onmouseup = function (event) {
|
_this.mouseUp(event);
|
};
|
_this.canvas.onmousewheel = function (event) {
|
_this.onmouseWheel(event);
|
};
|
document.getElementById('search').onclick = function () {
|
var tagTrack = queryTagid();
|
zongtiao = queryTagid().length - 2;
|
tiao = zongtiao;
|
if (tagTrack.length == 0) {
|
$("#tcc").css("display","none")
|
$(".loading").css("display","none")
|
alert("搜索的ID在当前时间段不存在！");
|
document.getElementById("tagid").value = "";
|
} else {
|
layui.use('layer', function(){
|
var layer = layui.layer;
|
|
layer.msg('数据正在加载中......');
|
});
|
_this.playTrack = tagTrack;
|
_this.TrackPlay();
|
//_this.MarkBorderline();
|
};
|
};
|
document.getElementById("pause").onclick = function () {
|
_this.playFlag = false;
|
window.clearInterval(timer);
|
};
|
document.getElementById("continue").onclick = function () {
|
_this.playFlag = true;
|
_this.TrackPlay();
|
};
|
},
|
/*计算当前鼠标位置距离canvas的偏移量*/
|
xyToCanvas: function (ele, x, y) {
|
var _this = this;
|
var obj = _this.canvas.getBoundingClientRect();
|
return {
|
x: x - obj.left,
|
y: y - obj.top
|
};
|
},
|
/*鼠标单击事件*/
|
clickDown: function (event) {
|
var _this = this;
|
if (_this.markFlag) {
|
_this.canvas.style.cursor = "none";
|
if (event.button == 2) {
|
_this.markFlag = false;
|
_this.dragFlag = true;
|
_this.canvas.style.cursor = "normal";
|
_this.drawImg();
|
return;
|
} else {
|
var posXY = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
posXY.x = (posXY.x - _this.imgX) / _this.imgScale;
|
posXY.y = (posXY.y - _this.imgY) / _this.imgScale;
|
_this.CreatLinepoints.push(posXY);
|
_this.allMarkLins.pop();
|
_this.allMarkLins.push(_this.CreatLinepoints);
|
_this.drawImg();
|
}
|
return;
|
}
|
if (event.button == 0) {//点击鼠标左键
|
_this.dragFlag = true;
|
_this.canvas.style.cursor = "move";
|
_this.pos = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
}
|
},
|
/*鼠标移动事件*/
|
mouseMove: function (event) {
|
var _this = this;
|
/*拖拽*/
|
if (_this.dragFlag) {
|
_this.canvas.style.cursor = "move";
|
var pos1 = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
var x = pos1.x - _this.pos.x;
|
var y = pos1.y - _this.pos.y;
|
_this.pos = pos1;
|
_this.imgX += x;
|
_this.imgY += y;
|
_this.drawImg();
|
}
|
/*边界标记*/
|
if (!_this.dragFlag && _this.markFlag) {
|
var pos1 = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
|
var can = _this.context;
|
can.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
|
_this.drawImg();
|
/*画跟随圆点*/
|
can.beginPath();
|
// can.fillText('[' + point.x + ', ' + point.y + ']', 15, 25 * (points.length + 1))
|
can.arc(pos1.x, pos1.y, 6, 0, Math.PI * 2, true);
|
can.fillStyle = "#FF423E";
|
can.fill();
|
can.strokeStyle = "#FFF";
|
can.stroke();//画空心圆
|
can.closePath();
|
|
/*当前的坐标未结束那么继续 跟随直线*/
|
if (!_this.CreatLinepoints.length) return;
|
can.strokeStyle = "red";
|
can.beginPath();
|
can.moveTo(_this.CreatLinepoints[_this.CreatLinepoints.length - 1].x * _this.imgScale + _this.imgX, _this.CreatLinepoints[_this.CreatLinepoints.length - 1].y * _this.imgScale + _this.imgY);
|
can.lineTo(pos1.x, pos1.y);
|
can.stroke();
|
can.closePath();
|
}
|
},
|
/*鼠标放开事件*/
|
mouseUp: function (event) {
|
var _this = this;
|
_this.dragFlag = false;
|
if (_this.markFlag) {
|
_this.canvas.style.cursor = "none";
|
return;
|
}
|
_this.canvas.style.cursor = 'default';
|
|
},
|
/*鼠标滚轮事件*/
|
onmouseWheel: function (event) {
|
var _this = this;
|
var pos = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltaY * (-40));
|
if (event.wheelDelta > 0 && _this.scaleFlag < 9) {
|
_this.imgScale *= 1.25;
|
_this.imgX = _this.imgX * 1.25 - 0.25 * pos.x;
|
_this.imgY = _this.imgY * 1.25 - 0.25 * pos.y;
|
_this.scaleFlag += 1;
|
}
|
if (event.wheelDelta < 0 && _this.scaleFlag > -9) {//缩小
|
_this.imgScale *= 0.8;
|
_this.imgX = _this.imgX * 0.8 + pos.x * 0.2;
|
_this.imgY = _this.imgY * 0.8 + pos.y * 0.2;
|
_this.scaleFlag -= 1;
|
}
|
_this.drawImg();
|
},
|
/*边界标记*/
|
MarkBorderline: function () {
|
var _this = this;
|
_this.markFlag = true;//切换为true，禁止拖拽，只能标记
|
_this.canvas.style.cursor = "none";
|
_this.CreatLinepoints = [];
|
_this.allMarkLins.push([]);
|
},
|
/*顺序播放坐标*/
|
TrackPlay: function () {
|
var _this = this;
|
_this.playFlag = true;
|
if (_this.playFlag) {
|
var t = 1000;
|
timer = setInterval(fn, t);
|
function fn() {
|
var speed = document.getElementById("bofangsudu").value;
|
if (_this.playFlag && _this.playIndex < _this.playTrack.length) {
|
_this.ShowNode(_this.playTrack[_this.playIndex]);
|
_this.playIndex += 1;
|
};
|
str = '<input type="text" class="form-control" id="tagid" style="width:60%;font-size: 12px;padding: 5px 5px" placeholder="剩余' + zongtiao + '/' + tiao + '条数据">'
|
$("#shujutiao").html(str);
|
console.log("1111111111111")
|
$("#tcc").css("display","none")
|
$(".loading").css("display","none")
|
if (tiao > 0) {
|
tiao -= 1
|
}
|
clearInterval(timer);
|
if (_this.playIndex == _this.playTrack.length - 1) {
|
clearInterval(timer);
|
_this.playIndex = 0;
|
} else {
|
var stime = new Date(_this.playTrack[_this.playIndex].time).getTime();
|
var etime = new Date(_this.playTrack[_this.playIndex + 1].time).getTime();
|
var t = etime - stime;
|
var t_v = t / speed;
|
timer = setInterval(fn, t_v);
|
}
|
};
|
} else { clearInterval(timer); }
|
},
|
/*画点*/
|
ShowNode: function (node_list) {
|
var _this = this;
|
var can = _this.context;
|
can.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
|
|
_this.playMark = node_list;
|
_this.drawImg();
|
},
|
}
|
//var imgUrl = '../image/mapfile/led.png';//图片路径
|
//new MarkPoints(imgUrl);
|
</script>
|
|
<!-- END FUNCTION SCRIPTS -->
|
|
<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
|
<script>
|
window.onload = function () {
|
App.init();
|
$.ajax({
|
async: false,
|
type: "POST",
|
url: "/hxzkoa/getSysSetting_list2.do",
|
data: {},
|
dataType: "json",
|
success: function (data) {
|
/* title = data[0].title; document.title = title; */
|
if (data.dataList2[0].label == 0) {
|
$("#labela").css({ 'display': 'none' });
|
};
|
if (data.dataList2[0].achor == 0) {
|
$("#anchora").css({ 'display': 'none' });
|
};
|
if (data.dataList2[0].gps == 0) {
|
$("#gpsa").css({ 'display': 'none' });
|
};
|
if (data.dataList2[0].fence == 0) {
|
$("#fencea").css({ 'display': 'none' });
|
};
|
if (data.dataList2[0].warning == 0) {
|
$("#warninga").css({ 'display': 'none' });
|
};
|
if (data.dataList2[0].history == 0) {
|
$("#historya").css({ 'display': 'none' });
|
};
|
if (data.dataList2[0].attendance == 0) {
|
$("#attendancea").css({ 'display': 'none' });
|
};
|
if (data.dataList2[0].basiclnfo == 0) {
|
$("#basiclnfoa").css({ 'display': 'none' });
|
};
|
if (data.dataList2[0].video == 0) {
|
$("#videoa").css({ 'display': 'none' });
|
};
|
if (data.dataList2[0].gas == 0) {
|
$("#gasa").css({ 'display': 'none' });
|
};
|
},
|
});
|
var superuser = document.getElementById("superuser").value;
|
var deleteq = document.getElementById("deleteq").value;
|
var alertq = document.getElementById("alertq").value;
|
var deleteall = document.getElementById("deleteall").value;
|
document.getElementById("xianuser").innerHTML = document.getElementById("xianusera").value
|
/* if (superuser == "访客") {
|
$("#search").attr("disabled", "true");
|
$("#pause").attr("disabled", "true");
|
$("#continue").attr("disabled", "true");
|
$("#search2").attr("disabled", "true");
|
$("#pause2").attr("disabled", "true");
|
$("#continue2").attr("disabled", "true");
|
} */
|
var select_layer = document.getElementById("chooselayer");
|
var select_value = select_layer.value;
|
if (select_value == 'baidumap') {
|
document.getElementById("fengmap").style.display = 'none';
|
document.getElementById("wrap").style.display = 'none';
|
document.getElementById("draw").style.display = 'none';
|
document.getElementById("baidumap").style.display = '';
|
document.getElementById("search").style.display = 'none';
|
document.getElementById("pause").style.display = 'none';
|
document.getElementById("continue").style.display = 'none';
|
document.getElementById("search3").style.display = 'none';
|
document.getElementById("pause3").style.display = 'none';
|
document.getElementById("continue3").style.display = 'none';
|
document.getElementById("search2").style.display = '';
|
document.getElementById("pause2").style.display = '';
|
document.getElementById("continue2").style.display = '';
|
document.getElementById("bofangsudu").options.remove(4);
|
diaoyongbaidumap();
|
} else if (select_value == 'sanwei') {
|
document.getElementById("fengmap").style.display = '';
|
document.getElementById("wrap").style.display = 'none';
|
document.getElementById("draw").style.display = 'none';
|
document.getElementById("baidumap").style.display = 'none';
|
document.getElementById("search").style.display = 'none';
|
document.getElementById("pause").style.display = 'none';
|
document.getElementById("continue").style.display = 'none';
|
document.getElementById("search2").style.display = 'none';
|
document.getElementById("pause2").style.display = 'none';
|
document.getElementById("continue2").style.display = 'none';
|
document.getElementById("search3").style.display = '';
|
document.getElementById("pause3").style.display = '';
|
document.getElementById("continue3").style.display = '';
|
jiazaisanwei()
|
} else {
|
document.getElementById("fengmap").style.display = 'none';
|
document.getElementById("wrap").style.display = '';
|
document.getElementById("draw").style.display = '';
|
document.getElementById("baidumap").style.display = 'none';
|
document.getElementById("search").style.display = '';
|
document.getElementById("pause").style.display = '';
|
document.getElementById("continue").style.display = '';
|
document.getElementById("search2").style.display = 'none';
|
document.getElementById("pause2").style.display = 'none';
|
document.getElementById("continue2").style.display = 'none';
|
document.getElementById("search3").style.display = 'none';
|
document.getElementById("pause3").style.display = 'none';
|
document.getElementById("continue3").style.display = 'none';
|
$.ajax({
|
async: false,
|
type: 'POST',
|
url: "/hxzkoa/floornumTomap.do",
|
dataType: 'json',
|
data: {
|
value: select_value
|
},
|
success: function (data) {
|
imgUrl = '/hxzkoa/hxzk/image/mapfile/' + data[0].mapname;
|
//imgUrl = '/hxzkoa/hxzk/image/mapfile/京辰瑞达.jpg';
|
new MarkPoints(imgUrl);
|
}
|
});
|
}
|
};
|
$('.header-page').load('/hxzkoa/hxzk/top.html'); $('.login-page').load('/hxzkoa/hxzk/head.html');
|
|
</script>
|
<script src="/hxzkoa/hxzk/assets/js/custom.js"></script>
|
<!-- END GLOBAL MANDATORY SCRIPTS -->
|
|
<!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
|
<!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
|
|
</body>
|
|
</html>
|
