<%@ 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 href="/hxzkoa/hxzk/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/img/favicon.ico" rel="icon" type="image/x-icon" />
|
<link href="/hxzkoa/hxzk/assets/css/components/custom-modal.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/css/components/custom-sweetalert.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/loader.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/css/scrollspyNav.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/css/main.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/assets/css/structure.css" rel="stylesheet" type="text/css" />
|
<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/plugins/animate/animate.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/plugins/highlight/styles/monokai-sublime.css" rel="stylesheet"
|
type="text/css" />
|
<link href="/hxzkoa/hxzk/plugins/sweetalerts/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/plugins/sweetalerts/sweetalert.css" rel="stylesheet" type="text/css" />
|
<link href="/hxzkoa/hxzk/plugins/table/datatable/datatables.css" rel="stylesheet" type="text/css">
|
<link href="/hxzkoa/hxzk/plugins/table/datatable/custom_dt_html5.css" rel="stylesheet" type="text/css">
|
<link href="/hxzkoa/hxzk/plugins/table/datatable/dt-global_style.css" rel="stylesheet" type="text/css">
|
<link href="/hxzkoa/hxzk/plugins/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet"
|
type="text/css" />
|
<link href="https://fonts.gstatic.com" rel="preconnect">
|
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700&display=swap"
|
rel="stylesheet">
|
<style>
|
.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;
|
}
|
|
.fonts {
|
color: #fff;
|
font-size: 50px;
|
font-family: "宋体";
|
}
|
|
.fonts1 {
|
color: #5c9792;
|
font-size: 40px;
|
font-family: "宋体";
|
text-shadow: 5px 5px 5px rgb(223, 65, 65);
|
}
|
|
.text {
|
text-align: center;
|
margin-top: 10px;
|
}
|
</style>
|
<script src="/hxzkoa/hxzk/assets/js/app.js"></script>
|
<script src="/hxzkoa/hxzk/assets/js/dashboard/dash_2.js"></script>
|
<script src="/hxzkoa/hxzk/assets/js/loader.js"></script>
|
<script src="/hxzkoa/hxzk/assets/js/libs/jquery-3.1.1.min.js"></script>
|
<script src="/hxzkoa/hxzk/bootstrap/js/bootstrap.min.js"></script>
|
<script src="/hxzkoa/hxzk/bootstrap/js/popper.min.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/apex/apexcharts.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/table/datatable/button-ext/jszip.min.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/table/jquery.table2excel.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/sweetalerts/promise-polyfill.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/sweetalerts/sweetalert2.min.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/sweetalerts/custom-sweetalert.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
|
|
<!-- 百度地图接口 -->
|
<script type="text/javascript" id="baidumap_api"
|
src="http://api.map.baidu.com/getscript?v=3.0&ak=PUftjeZCKHtEn8ZMjeAGnViSO8NBvBNm"></script>
|
</head>
|
|
<body class="alt-menu sidebar-noneoverflow" style="overflow:auto">
|
<!-- 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:1;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:2;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">
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing"
|
style="padding-right:5px;padding-left:5px;padding-bottom:5px;padding-top:5px;"
|
id="jizhanxinxi">
|
<div class="widget widget-one_hybrid widget-engagement" style="height:380px;">
|
<div class='panel-head'>位置数据</div>
|
<div id="wasd" class="" style="margin-top:50px;">
|
</div>
|
</div>
|
</div>
|
<!-- <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing"
|
style="padding-right:5px;padding-left:5px;padding-bottom:5px;padding-top:5px;"
|
id='jizhanxinxi'>
|
<div class="widget widget-one_hybrid widget-engagement">
|
<div class="widget-heading" style="height:380px;">
|
<div class='panel-head'>实时数据</div>
|
<div id="realtime" class="" style="margin-top:50px;">
|
</div>
|
<div class="table-responsive mb-4 mt-4"
|
style="position:absolute;top:10px;display: flex;justify-content: center;flex-wrap: wrap;">
|
<div class="item"
|
style="width: 50%;height: 173px;border: solid 7px rgb(90, 90, 77); border-style: inset;">
|
<div class="text" id="ssc1"></div>
|
</div>
|
<div class="item"
|
style="width: 50%;height: 173px;border: solid 7px rgb(90, 90, 77); border-style: inset;">
|
<div class="text" id="ssc2"></div>
|
</div>
|
<div class="item"
|
style="width: 100%;height: 173px;border: solid 7px rgb(90, 90, 77); border-style: inset;">
|
<div class="text" id="ssc3"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div> -->
|
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing"
|
style="padding-right:5px;padding-left:5px;padding-bottom:5px;padding-top:5px;"
|
id="ditu">
|
<div class="widget widget-one_hybrid widget-engagement" id="map">
|
<div class="widget-heading" style="height:480px;" id="map_bg">
|
<div class='panel-head' id="maphead">地图 <div
|
style="position:absolute;right:8px;top:8px;" id="quanping"
|
onclick="changeMapSize()"><svg t="1618401864629" class="icon"
|
viewBox="0 0 1024 1024" version="1.1"
|
xmlns="http://www.w3.org/2000/svg" p-id="1141" width="16"
|
height="16">
|
<path d="M868.6 96H720c-7.6 0-15.2 2.9-21 8.7-5.8 5.8-8.7 13.4-8.7 21s2.9 15.2 8.7 21c5.8 5.8 13.4 8.7 21
|
8.7h106.5L580.1 401.8c-11.6 11.6-11.6 30.4 0 42 11.6 11.6 30.4 11.6 42 0l246.4-246.4V304c0 7.6 2.9 15.2 8.7 21 5.8 5.8 13.4 8.7
|
21 8.7s15.2-2.9 21-8.7c5.8-5.8 8.7-13.4 8.7-21V155.4c0.1-32.8-26.5-59.4-59.3-59.4zM898.3 690.3c-7.6 0-15.2 2.9-21 8.7-5.8 5.8-8.7
|
13.4-8.7 21v106.5L622.2 580.1c-11.6-11.6-30.4-11.6-42 0s-11.6 30.4 0 42l246.4 246.4H720c-7.6 0-15.2 2.9-21 8.7-5.8 5.8-8.7 13.4-8.7
|
21s2.9 15.2 8.7 21c5.8 5.8 13.4 8.7 21 8.7h148.6c32.8 0 59.4-26.6 59.4-59.4V720c0-7.6-2.9-15.2-8.7-21-5.8-5.8-13.4-8.7-21-8.7zM401.8
|
580.1L155.4 826.5V720c0-7.6-2.9-15.2-8.7-21-5.8-5.8-13.4-8.7-21-8.7s-15.2 2.9-21 8.7c-5.8 5.8-8.7 13.4-8.7 21v148.6c0 32.8 26.6 59.4 59.4
|
59.4H304c7.6 0 15.2-2.9 21-8.7 5.8-5.8 8.7-13.4 8.7-21s-2.9-15.2-8.7-21c-5.8-5.8-13.4-8.7-21-8.7H197.5l246.4-246.4c11.6-11.6 11.6-30.4
|
0-42-11.6-11.7-30.5-11.7-42.1-0.1zM197.5 155.4H304c7.6 0 15.2-2.9 21-8.7 5.8-5.8 8.7-13.4 8.7-21s-2.9-15.2-8.7-21c-5.8-5.8-13.4-8.7-21-8.7H155.4C122.6
|
96 96 122.6 96 155.4V304c0 7.6 2.9 15.2 8.7 21 5.8 5.8 13.4 8.7 21 8.7s15.2-2.9 21-8.7c5.8-5.8 8.7-13.4 8.7-21V197.5l246.4 246.4c11.6 11.6 30.4
|
11.6 42 0 11.6-11.6 11.6-30.4 0-42L197.5 155.4z" p-id="1142" fill="#ffffff"></path>
|
</svg></div>
|
</div>
|
<div style="width:100%; height:430px; float:left" id="wrap">
|
<canvas id="draw"></canvas>1
|
</div>
|
<div style="width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin:0;
|
font-family:" 微软雅黑";" id="baidumap">
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing"
|
style="padding-right:5px;padding-left:5px;padding-bottom:5px;padding-top:5px;"
|
id="gaojinghuizong">
|
<div class="widget widget-one_hybrid widget-engagement" style="height:380px;">
|
<div class='panel-head'>告警汇总</div>
|
<div id="s-col" class="" style="margin-top:50px">
|
<input type="hidden" id="shebei" value="${shebei}">
|
<input type="hidden" id="reWarningSummary_k" value="${reWarningSummary_k}">
|
<input type="hidden" id="reWarningSummary_v" value="${reWarningSummary_v}">
|
<input type="hidden" id="realAttendance_k" value="${realAttendance_k}">
|
<input type="hidden" id="realAttendance_v" value="${realAttendance_v}">
|
<input type="hidden" id="realtongji_k" value="${realtongji_k}">
|
<input type="hidden" id="realtongji_v" value="${realtongji_v}">
|
<input type="hidden" id="realshishi_k" value="${realshishi_k}">
|
<input type="hidden" id="realshishi_v" value="${realshishi_v}">
|
<input type="hidden" id="weizhi" value="${weizhi}">
|
</div>
|
</div>
|
</div>
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing"
|
style="bottom:100px;padding-right:5px;padding-left:5px;padding-bottom:5px;padding-top:5px;"
|
id="tongjishuju">
|
<div class="widget widget-one_hybrid widget-engagement" style="height:380px;">
|
<div class='panel-head'>统计数据</div>
|
<div id="polarArea-chart" class="" style="margin-top:50px;">
|
</div>
|
</div>
|
</div>
|
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing"
|
style="padding-right:5px;padding-left:5px;padding-bottom:5px;padding-top:5px;"
|
id="shishikaoqin">
|
<div class="widget widget-one_hybrid widget-engagement">
|
<div class="widget-heading" style="height:280px;">
|
<div class='panel-head'>设备信息</div>
|
<div class="table-responsive mb-4 mt-4" style="position:absolute;top:10px;">
|
<table id="html5-extension" class="table table-hover"
|
style="width:100%;">
|
<thead>
|
<tr align="center">
|
<th style="padding:12px 5px;">状态</th>
|
<th style="padding:12px 5px;">设备编号</th>
|
<th style="padding:12px 5px;">绑定对象</th>
|
<th style="padding:12px 5px;">版本</th>
|
<th style="padding:12px 5px;">设备详情</th>
|
<th style="padding:12px 5px;">更新时间</th>
|
</tr>
|
</thead>
|
<tbody id="nr">
|
<%-- <c:forEach items="${anchorManagementList}" var="list">
|
<tr align="center">
|
<td class="noExl">
|
<c:choose>
|
<c:when test="${list.anchormode == '0'}">
|
<img src="hxzk/image/anchor/基站离线.png" />
|
</c:when>
|
<c:otherwise>
|
<img src="hxzk/image/anchor/基站在线.png" />
|
</c:otherwise>
|
</c:choose>
|
</td>
|
<td>${list.anchorid}</td>
|
<td>定位基站</td>
|
<td>${list.version}</td>
|
<td>${list.anchorip}</td>
|
<td>${list.greateTime}</td>
|
</tr>
|
</c:forEach> --%>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing"
|
style="bottom:100px;padding-right:5px;padding-left:5px;padding-bottom:5px;padding-top:5px;"
|
id="xianchanggongzhong">
|
<div class="widget widget-one_hybrid widget-engagement" style="height:380px;">
|
<div class='panel-head'>现场工种</div>
|
<div id="donut-chart" class="" style="margin-top:50px;">
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<!-- END CONTENT PART -->
|
</div>
|
|
<script>
|
//var current_map;
|
var current_floor;
|
var current_map;
|
function getMapNow() {
|
var map;
|
$.ajax({
|
async: false,
|
type: "POST",
|
url: "/hxzkoa/qiehuanditu_get.do",
|
dataType: 'json',
|
data: {},
|
success: function (data) {
|
map = data[0];
|
},
|
})
|
return map
|
};
|
|
$(document).ready(function () {
|
App.init();
|
$.ajax({
|
async: false, //同步的
|
type: "POST",
|
url: "/hxzkoa/getSysSetting_list.do",
|
data: {
|
|
},
|
dataType: "json",
|
success: function (data) {
|
title = data[0].title
|
document.title = title;
|
},
|
});
|
|
current_map = getMapNow();
|
if (current_map == "百度地图") {
|
document.getElementById("wrap").style.display = "none";
|
diaoyongbaidumap();
|
|
} else {
|
document.getElementById("baidumap").style.display = "none";
|
$.ajax({
|
async: false,
|
type: "POST",
|
url: "/hxzkoa/getFloorByMapname.do",
|
dataType: 'json',
|
data: {
|
map: current_map,
|
},
|
success: function (data) {
|
current_floor = data[0].floor;
|
diaoyonghuatu(current_floor);
|
qufloor(current_floor);
|
},
|
});
|
|
};
|
});
|
$('.header-page').load('/hxzkoa/hxzk/top.html'); $('.login-page').load('/hxzkoa/hxzk/head.html');
|
var params = {
|
zoomVal: 1,
|
left: 0,
|
top: 0,
|
currentX: 0,
|
currentY: 0,
|
flag: false
|
};
|
</script>
|
|
<!-- BEGIN FUNCTION SCRIPTS -->
|
|
<script type="text/javascript">
|
var timer1;//地图缩小时的timer
|
var timer2;//地图放大时的timer
|
//首页地图控制
|
var expand = false;
|
|
function changeMapSize() {
|
if (expand == false) {
|
//点击放大
|
expand = true;
|
modified = false;
|
if (document.getElementById("wrap").style.display == "none") {
|
//当前正在使用百度地图
|
document.getElementById('ditu').className = "col-xl-12 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing";
|
document.getElementById("map").style.width = "100%";
|
document.getElementById("map").style.height = "860px";
|
document.getElementById("baidumap").style.width = "100%";
|
document.getElementById("baidumap").style.height = "860px";
|
//diaoyongbaidumap();
|
} else if (document.getElementById("baidumap").style.display == "none") {
|
//当前正在使用室内地图
|
document.getElementById('ditu').className = "col-xl-12 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing";
|
document.getElementById("map").style.width = "100%";
|
document.getElementById("map").style.height = "960px";
|
document.getElementById("maphead").style.width = "100%";
|
document.getElementById("map_bg").style.height = "960px";
|
document.getElementById("wrap").style.width = "100%";
|
document.getElementById("wrap").style.height = "920px";
|
document.getElementById("draw").style.width = "100%";
|
document.getElementById("draw").style.height = "920px";
|
diaoyonghuatu(current_floor);
|
}
|
document.getElementById("jizhanxinxi").style.display = "none";
|
document.getElementById("gaojinghuizong").style.display = "none";
|
document.getElementById("biaoqianxinxi").style.display = "none";
|
document.getElementById("shishikaoqin").style.display = "none";
|
document.getElementById("xianchanggongzhong").style.display = "none";
|
} else {
|
//放大状态下点击恢复原样
|
expand = false;
|
modified = false;
|
document.getElementById("jizhanxinxi").style.display = "";
|
if (document.getElementById("wrap").style.display == "none") {
|
//当前正在使用百度地图
|
document.getElementById('ditu').className = "col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing";
|
document.getElementById("map").style.width = null;
|
document.getElementById("map").style.height = null;
|
document.getElementById("baidumap").style.width = "100%";
|
document.getElementById("baidumap").style.height = "100%";
|
//diaoyongbaidumap();
|
} else if (document.getElementById("baidumap").style.display == "none") {
|
//当前正在使用室内地图
|
document.getElementById('ditu').className = "col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing";
|
document.getElementById("map").style.width = null;
|
document.getElementById("map").style.height = "480px";
|
document.getElementById("maphead").style.width = null;
|
document.getElementById("map_bg").style.height = "480px";
|
document.getElementById("wrap").style.width = "100%";
|
document.getElementById("wrap").style.height = "430px";
|
document.getElementById("draw").style.width = null;
|
document.getElementById("draw").style.height = null;
|
diaoyonghuatu(current_floor);
|
}
|
document.getElementById("gaojinghuizong").style.display = "";
|
document.getElementById("biaoqianxinxi").style.display = "";
|
document.getElementById("shishikaoqin").style.display = "";
|
document.getElementById("xianchanggongzhong").style.display = "";
|
}
|
};
|
|
function getTruemap() {
|
var map_wl = [];
|
$.ajax({
|
async: false,
|
type: "POST",
|
url: "/hxzkoa/floornumTomap.do",
|
dataType: 'json',
|
data: {
|
value: current_floor,
|
},
|
success: function (data) {
|
map_wl = [data[0].x_Truelength, data[0].y_Truewidth];
|
},
|
});
|
return map_wl;
|
};
|
|
function getYuandian() {
|
var map_wl = [];
|
$.ajax({
|
async: false,
|
type: "POST",
|
url: "/hxzkoa/floornumTomap.do",
|
dataType: 'json',
|
data: {
|
value: current_floor
|
},
|
success: function (data) {
|
yuandian = [data[0].x0_length, data[0].y0_width];
|
},
|
});
|
return yuandian;
|
};
|
|
function getSystemSetting() {
|
var sysset = [];
|
$.ajax({
|
async: false,
|
type: 'POST',
|
url: "/hxzkoa/getSysSetting_list.do",
|
dataType: 'json',
|
success: function (data) {
|
sysset = data;
|
},
|
});
|
return sysset;
|
};
|
|
function loadImages(sources, callback) {
|
var count = 0,
|
images = {},
|
imgNum = 0;
|
for (src in sources) {
|
imgNum++;
|
}
|
for (src in sources) {
|
images[src] = new Image();
|
|
images[src].onload = function () {
|
if (++count >= imgNum) {
|
callback(images);
|
}
|
}
|
images[src].src = sources[src];
|
}
|
};
|
|
function getTrackColor(yanse) {
|
var color;
|
if (yanse == "红色") {
|
var color = "red";
|
} else if (yanse == "绿色") {
|
var color = "green";
|
} else if (yanse == "蓝色") {
|
var color = "blue";
|
} else if (yanse == "白色") {
|
var color = "white";
|
} else if (yanse == "黑色") {
|
var color = "black";
|
} else if (yanse == "黄色") {
|
var color = "yellow";
|
}
|
return color
|
};
|
|
function getExistFence(leixing) {
|
var fencelist = [];
|
var fencecolor = [];
|
var fencename = [];
|
var fencetype = [];
|
$.ajax({
|
async: false,
|
type: 'POST',
|
url: "/hxzkoa/getFloorFence.do",
|
dataType: 'json',
|
data: {
|
value: current_floor
|
},
|
success: function (data) {
|
for (var i = 0; i < data.length; i++) {
|
fencelist.push(data[i].zuobiao);
|
fencecolor.push(data[i].color);
|
fencename.push(data[i].name);
|
fencetype.push(data[i].type);
|
}
|
}
|
});
|
if (leixing == "zuobiao") {
|
return fencelist
|
} else if (leixing == "color") {
|
return fencecolor
|
} else if (leixing == "name") {
|
return fencename
|
} else if (leixing == "type") {
|
return fencetype
|
};
|
};
|
|
function getDrawColor(yanse) {
|
var color;
|
if (yanse == "红色") {
|
var color = "rgba(255,0,0,0.3)";
|
} else if (yanse == "绿色") {
|
var color = "rgba(0,255,0,0.3)";
|
} else if (yanse == "蓝色") {
|
var color = "rgba(0,0,255,0.3)";
|
} else if (yanse == "白色") {
|
var color = "rgba(255,255,255,0.3)";
|
} else if (yanse == "黑色") {
|
var color = "rgba(0,0,0,0.3)";
|
}
|
return color
|
};
|
|
function inFenceOrNot(fence_list, node_list) {
|
//fence_list[x,y]
|
//node_list[x,y]
|
if (fence_list.length == 2) { //矩形
|
if (node_list[0] >= Math.min(fence_list[0][0], fence_list[1][0]) && node_list[0] <= Math.max(fence_list[0][0], fence_list[1][0])) {
|
if (node_list[1] >= Math.min(fence_list[0][1], fence_list[1][1]) && node_list[1] <= Math.max(fence_list[0][1], fence_list[1][1])) {
|
return true //在考勤区域
|
}
|
}
|
return false //不在考勤区域
|
} else if (fence_list.length > 2) { //多边形
|
for (var c = false, i = -1, l = fence_list.length, j = l - 1; ++i < l; j = i)
|
((fence_list[i][1] <= node_list[1] && node_list[1] < fence_list[j][1]) || (fence_list[j][1] <= node_list[1] && node_list[1] < fence_list[i][1]))
|
&& (node_list[0] < (fence_list[j][0] - fence_list[i][0]) * (node_list[1] - fence_list[i][1]) / (fence_list[j][1] - fence_list[i][1]) + fence_list[i][0])
|
&& (c = !c);
|
return c;
|
}
|
};
|
|
function getGas(leixing) {
|
var gaslist = [];
|
var gasnongdu = [];
|
var gastype = [];
|
$.ajax({
|
async: false,
|
type: 'POST',
|
url: "/hxzkoa/getGas_list.do",
|
dataType: 'json',
|
data: {},
|
success: function (data) {
|
for (var i = 0; i < data.length; i++) {
|
gaslist.push([data[i].x, data[i].y]);
|
gasnongdu.push(data[i].nong_du);
|
gastype.push(data[i].gas_type);
|
}
|
}
|
});
|
if (leixing == "zuobiao") {
|
return gaslist
|
} else if (leixing == "type") {
|
return gastype
|
} else if (leixing == "nongdu") {
|
return gasnongdu
|
};
|
};
|
|
function getRealPosition() {
|
var realposition = [];
|
$.ajax({
|
async: false,
|
type: 'POST',
|
url: "/hxzkoa/getRealPosition.do",
|
dataType: 'json',
|
data: {
|
floor: current_floor,
|
},
|
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].sos, data[i].fence])
|
}
|
},
|
});
|
return realposition
|
};
|
|
function getstatus(tagida) {
|
var panduan;
|
$.ajax({
|
async: false,
|
type: 'POST',
|
url: "/hxzkoa/getstatus.do",
|
dataType: 'JSON',
|
data: {
|
tagid: tagida
|
},
|
success: function (data) {
|
panduan = data
|
}
|
})
|
return panduan;
|
}
|
|
function str_to_time(str) {
|
//根据字符串转换成对应的时间（秒）
|
if (str == "不显示实时轨迹") {
|
return 0;
|
} else if (str == "10秒钟") {
|
return 10;
|
} else if (str == "30秒钟") {
|
return 30;
|
} else if (str == "1分钟") {
|
return 60;
|
} else if (str == "10分钟") {
|
return 600;
|
} else if (str == "30分钟") {
|
return 1800;
|
} else if (str == "1小时") {
|
return 3600;
|
};
|
};
|
|
function getTracknow(tagid_str, time) {
|
var finalrealtrack = {};
|
$.ajax({
|
async: false,
|
type: 'POST',
|
url: "/hxzkoa/getRealTrack.do",
|
dataType: 'json',
|
data: {
|
time: time,
|
floor: current_floor,
|
tagid: tagid_str,
|
},
|
success: function (data) {
|
for (var i = 0; i < data.length; i++) {
|
finalrealtrack[data[i][0].tagid] = [];
|
for (var j = 0; j < data[i].length; j++) {
|
finalrealtrack[data[i][0].tagid].push([data[i][j].x, data[i][j].y, data[i][j].time])
|
}
|
}
|
//for (var i=0;i<data.length;i++)
|
/* let tmp = new Set();
|
for (var i=0;i<data.length;i++){
|
tmp.add(data[i].tagid);
|
};
|
let tmpl = Array.from(tmp);
|
for (i in tmpl){
|
realtrack[tmpl[i]]=[];
|
finalrealtrack[tmpl[i]]=[];
|
}
|
for(var i=0; i<data.length; i++){
|
realtrack[data[i].tagid].push([data[i].x, data[i].y, data[i].time])
|
}
|
for (var i in realtrack){
|
if (realtrack[i].length>50){
|
var itvl = new Number(realtrack[i].length/50);
|
var tmp_result = [];
|
for (j=0;i<realtrack[i].length;j+=itvl){
|
tmp_result.push(realtrack[i][j])
|
}
|
finalrealtrack[i]=tmp_result;
|
} else {
|
finalrealtrack[i]=realtrack[i]
|
}
|
} */
|
},
|
});
|
return finalrealtrack;
|
};
|
|
function getAnchorInfo() {
|
var online_anchorList = [];
|
var offline_anchorList = [];
|
$.ajax({
|
async: false,
|
type: 'POST',
|
url: "/hxzkoa/getAnchorInfo.do",
|
dataType: 'json',
|
data: {
|
floor: current_floor,
|
},
|
success: function (data) {
|
for (var i = 0; i < data.length; i++) {
|
tmplist = [data[i].anchorid, data[i].posx, data[i].posy, data[i].posz, data[i].GreateTime];
|
if (data[i].anchormode == "1") {
|
online_anchorList.push(tmplist);
|
} else if (data[i].anchormode == "0") {
|
offline_anchorList.push(tmplist);
|
}
|
}
|
}
|
});
|
return [online_anchorList, offline_anchorList]
|
};
|
|
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 getGPS() {
|
var gpslist = [];
|
$.ajax({
|
async: false,
|
type: 'POST',
|
traditional: true,
|
url: "/hxzkoa/getGPS.do",
|
dataType: 'json',
|
data: {},
|
success: function (data) {
|
//经纬度从度分秒转成度
|
for (var i = 0; i < data.length; i++) {
|
if (data[i].gps_weidu != "" && data[i].gsp_jingdu != "") {
|
//data[i].gps_weidu="3951.74908"
|
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);
|
};
|
//data[i].gsp_jingdu="11615.43424"
|
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_haiba_gao, data[i].gps_state, data[i].gps_num, data[i].gps_hdop, data[i].gps_tuoqiu, data[i].gps_chafen_time, data[i].gps_chafen_id, data[i].gps_jiaoyan, data[i].gps_kahao, data[i].gps_power, data[i].gps_sos, data[i].addtime, data[i].name]);
|
}
|
};
|
},
|
});
|
return gpslist;
|
};
|
|
function Queue() {
|
let items = [];
|
// 向队列添加元素（一个或多个）
|
this.enqueue = function (element) {
|
if (element instanceof Array) items = items.concat(element);
|
else items.push(element);
|
};
|
this.enqueue_list = function (element) {
|
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 () {
|
};
|
};
|
|
/**该方法用来绘制一个有填充色的圆角矩形
|
*@param cxt:canvas的上下文环境
|
*@param x:左上角x轴坐标
|
*@param y:左上角y轴坐标
|
*@param width:矩形的宽度
|
*@param height:矩形的高度
|
*@param radius:圆的半径
|
*@param fillColor:填充颜色
|
**/
|
function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
|
//圆的直径必然要小于矩形的宽高
|
if (2 * radius > width || 2 * radius > height) { return false; }
|
|
cxt.save();
|
cxt.translate(x, y);
|
//绘制圆角矩形的各个边
|
drawRoundRectPath(cxt, width, height, radius);
|
cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值
|
cxt.fill();
|
cxt.restore();
|
}
|
|
function drawRoundRectPath(cxt, width, height, radius) {
|
cxt.beginPath(0);
|
//从右下角顺时针绘制，弧度从0到1/2PI
|
cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
|
|
//矩形下边线
|
cxt.lineTo(radius, height);
|
|
//左下角圆弧，弧度从1/2PI到PI
|
cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
|
|
//矩形左边线
|
cxt.lineTo(0, radius);
|
|
//左上角圆弧，弧度从PI到3/2PI
|
cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
|
|
//上边线
|
cxt.lineTo(width - radius, 0);
|
|
//右上角圆弧
|
cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
|
|
//右边线
|
cxt.lineTo(width, height - radius);
|
cxt.closePath();
|
}
|
|
function isEmptyObject(obj) {
|
for (var n in obj) {
|
return false
|
}
|
return true;
|
}
|
</script>
|
|
<!-- 百度地图功能 -->
|
<script type="text/javascript">
|
|
function diaoyongbaidumap() {
|
//读取系统设置
|
var bm_sysSetting = getSystemSetting();
|
var bm_tagZb = bm_sysSetting[0].tagZb;//是否显示标签坐标
|
var bm_viewName = bm_sysSetting[0].viewName;//是否显示人员名称
|
var bm_viewPower = bm_sysSetting[0].viewPower;//是否显示电量
|
var bm_viewTagid = bm_sysSetting[0].viewTagid;//是否显示标签ID
|
var bm_offView = bm_sysSetting[0].offView;//是否离线不显示图标
|
var bm_quiet = bm_sysSetting[0].quiet;//静止输出固定坐标
|
var bm_name = bm_sysSetting[0].viewName;//是否显示人员姓名
|
var bm_baidu_j = bm_sysSetting[0].baidu_j;//百度地图精度
|
var bm_baidu_w = bm_sysSetting[0].baidu_w;//百度地图维度
|
|
// 百度地图API功能
|
var bm = new BMap.Map("baidumap"); // 创建Map实例
|
|
bm.centerAndZoom(new BMap.Point(bm_baidu_j, bm_baidu_w), 12); // 初始化地图,设置中心点坐标和地图级别
|
//添加地图类型控件
|
var opts = { type: BMAP_NAVIGATION_CONTROL_ZOOM }; //仅保留控件缩放部分
|
bm.addControl(new BMap.NavigationControl(opts)); //添加导航控件
|
//map.addControl(new BMap.OverviewMapControl());
|
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)
|
}
|
);
|
|
//current_node_list为{key(tagid):zuobiao_mark}
|
var current_node_list = new Array();
|
//var current_node_list = new Queue();
|
|
/* function getGPSInfo(data){
|
return "GPS状态:"+gps_node_list[current_gps_index][4]+"\n正在使用的卫星数量:"+gps_node_list[current_gps_index][5]+"\nHDOP水平精度因子:"+gps_node_list[current_gps_index][6]+"\n地球椭球面相对大地水准面的高度:"+gps_node_list[current_gps_index][7]+
|
"\n差分时间:"+gps_node_list[current_gps_index][8]+"\n差分站ID号:"+gps_node_list[current_gps_index][9]+"\n校验值:"+gps_node_list[current_gps_index][10]+"\n设备物联网卡号:"+gps_node_list[current_gps_index][11]+"\n设备SOS状态:"+gps_node_list[current_gps_index][13]
|
+"\n添加时间"+gps_node_list[current_gps_index][14]
|
}; */
|
|
var t = 300; //每600ms从后台请求一次最新的数据
|
fn();
|
|
var timer = setTimeout(function f() {
|
fn();
|
timer = setTimeout(f, 300);
|
}, t);
|
|
//timer_bm = setTimeout(fn ,t);
|
|
function fn() {
|
//获取gps坐标, [tagid, jingdu, weidu, gps_haiba_gao, gps_state, gps_num, gps_hdop, gps_tuoqiu, gps_chafen_time, gps_chafen_id, gps_jiaoyan, gps_kahao, gps_power, gps_sos, addtime]
|
var gps_node_list = getGPS();
|
//console.log(gps_node_list)
|
//坐标转换完之后的回调函数
|
translateCallback = function (data) {
|
// if (data.status == 0) {
|
for (var i = 0; i < data.points.length; i++) {
|
var zhuangtaia = getstatus(gps_node_list[i][0]);
|
if (current_node_list[gps_node_list[i][0]].size() > 0) {
|
old_mark = current_node_list[gps_node_list[i][0]].front();
|
current_node_list[gps_node_list[i][0]].dequeue();
|
bm.removeOverlay(old_mark);//清除上一个
|
}
|
if ((bm_offView == '1' && zhuangtaia == '1') || (bm_offView == '0')) {
|
marker = new BMap.Marker(data.points[i], { icon: myIcon });
|
bm.addOverlay(marker);
|
current_node_list[gps_node_list[i][0]].enqueue(marker);
|
|
if (bm_viewTagid == "1") {
|
var tagid = new BMap.Label(gps_node_list[i][0], { offset: new BMap.Size(20, -30) });
|
tagid.setStyle({
|
color: "#fff",
|
fontSize: "14px",
|
borderRadius: "5px",
|
padding: "5px 5px",
|
border: "0",
|
backgroundColor: "#32CD32",
|
transform: 'translateX(-50%)',
|
});
|
marker.setLabel(tagid); //添加label-tagid
|
}
|
if (bm_tagZb == "1") {
|
var zuobiao = new BMap.Label(gps_node_list[i][1] + ',' + gps_node_list[i][2], { offset: new BMap.Size(20, +40) });
|
zuobiao.setStyle({ transform: 'translateX(-50%)' });
|
marker.setLabel(zuobiao);
|
}
|
if (bm_viewPower == "1") {
|
var dianliang = new BMap.Label("设备电量" + gps_node_list[i][12], { offset: new BMap.Size(20, +60) });
|
dianliang.setStyle({ transform: 'translateX(-50%)' });
|
marker.setLabel(dianliang);
|
}
|
|
/* if(bm_name=="1"){
|
var name=new BMap.Label("设备名称:"+gps_node_list[i][15],{offset:new BMap.Size(20,+40)});
|
name.setStyle({transform: 'translateX(-50%)'});
|
marker.setLabel(name); //添加label-tagid
|
} */
|
/* // 创建信息窗口
|
var opts = {
|
width: 200,
|
height: 100,
|
title: '当前坐标信息'
|
};
|
var infoWindow = new BMap.InfoWindow(getGPSInfo(data.points[0]), opts);
|
// 点标记添加点击事件
|
marker.addEventListener('click', function () {
|
bm.openInfoWindow(infoWindow, point); // 开启信息窗口
|
}); */
|
|
//bm.setCenter(data.points[i]);
|
}
|
}
|
// }
|
/* if(data.status === 0) {
|
var marker = new BMap.Marker(data.points[0], {
|
icon: myIcon
|
});
|
|
//var marker = new BMap.Marker(data.points[0]);
|
bm.addOverlay(marker);
|
if (bm_viewTagid=="1"){
|
//console.log("data.points[0]",data.points[0]);
|
var tagid=new BMap.Label("设备ID:"+gps_node_list[current_gps_index][0],{offset:new BMap.Size(0,-20)});
|
marker.setLabel(tagid); //添加label-tagid
|
}
|
if (bm_tagZb=="1"){
|
var zuobiao = new BMap.Label("设备坐标:"+gps_node_list[current_gps_index][1]+','+gps_node_list[current_gps_index][2],{offset:new BMap.Size(-20,30)});
|
marker.setLabel(zuobiao);
|
}
|
if (bm_viewPower=="1"){
|
var dianliang = new BMap.Label("设备电量"+gps_node_list[current_gps_index][12],{offset:new BMap.Size(20,5)});
|
marker.setLabel(dianliang);
|
}
|
// 创建信息窗口
|
var opts = {
|
width: 200,
|
height: 100,
|
title: '当前坐标信息'
|
};
|
var infoWindow = new BMap.InfoWindow(getGPSInfo(data.points[0]), opts);
|
// 点标记添加点击事件
|
marker.addEventListener('click', function () {
|
bm.openInfoWindow(infoWindow, point); // 开启信息窗口
|
});
|
|
bm.setCenter(data.points[0]);
|
} */
|
};
|
|
//bm.clearOverlays();
|
var pointArr = [];
|
if (gps_node_list.length != 0) {
|
for (var i = 0; i < gps_node_list.length; i++) {
|
if (current_node_list[gps_node_list[i][0]] == null) {
|
current_node_list[gps_node_list[i][0]] = new Queue();
|
}
|
var point = new BMap.Point(new Number(gps_node_list[i][1]), new Number(gps_node_list[i][2]));
|
pointArr.push(point);
|
};
|
var convertor = new BMap.Convertor();
|
convertor.translate(pointArr, 1, 5, translateCallback);
|
}
|
// else {
|
// current_node_list.clear();
|
// bm.clearOverlays();
|
// }
|
|
|
/**
|
* 坐标常量说明：
|
* 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>
|
// img map related
|
//if (current_map!="百度地图"){
|
function diaoyonghuatu(current_floor) {
|
var imgUrl = '/hxzkoa/hxzk/image/mapfile/' + current_map;//图片路径
|
//var imgUrl = '/hxzkoa/hxzk/image/mapfile/office.jpg';//图片路径
|
var imgList = new Array();
|
imgList['map'] = imgUrl;
|
var iconUrl = '/hxzkoa/hxzk/image/targeticon/default.png';
|
imgList['icon'] = iconUrl;
|
|
var anckicon_on = '/hxzkoa/hxzk/image/anchor/基站在线.png';
|
//var anckicon_on = '/hxzkoa/hxzk/image/anchor/lingjin.png';
|
imgList['anchor_online'] = anckicon_on;
|
|
var anckicon_off = '/hxzkoa/hxzk/image/anchor/基站离线.png'
|
//var anckicon_off = '/hxzkoa/hxzk/image/anchor/ceju.png';
|
imgList['anchor_offline'] = anckicon_off;
|
new MarkPoints(imgList);
|
}
|
var tuodong = false;
|
var sosType = true;
|
var sos = document.createElement('img');
|
sos.src = '/hxzkoa/hxzk/image/icon/SOS.png';
|
var sos1 = document.createElement('img');
|
sos1.src = '/hxzkoa/hxzk/image/icon/SOS1.png';
|
|
function MarkPoints(imgList) {
|
this.imgX = 0;//在画布上图片的X偏移量
|
this.imgScale = 1;//图片的缩放比例
|
this.imgY = 0;//在画布上图片的Y偏移量
|
this.rateNum;//图片高度自适应比例,图片等比居中展示在canvas
|
this.scaleFlag = 0;//缩放因子，最大缩放9,最小缩放-9
|
this.context;
|
this.img; //地图
|
this.playIndex = 0;
|
this.pos = {};//每次拖拽前坐标保存
|
|
this.imgLoadList = new Array();
|
this.rateNumList = new Array();
|
this.imgXList = new Array();
|
this.imgYList = new Array();
|
this.imgScaleList = new Array();
|
|
//获取真实地图
|
this.trueMeasure;
|
this.trueLength;
|
this.trueWidth;
|
this.x_ratio;
|
this.y_ratio;
|
this.x_x0;
|
this.y_y0;
|
|
//system setting
|
this.sysSetting;
|
this.tagZb = '0';//是否显示标签坐标
|
this.diskaoqin = '0'; //出考勤区域是否消失
|
this.viewAnckid = '0';//是否显示基站ID
|
this.viewName = '0';//是否显示人员名称
|
this.tunlDw = '0'//隧道定位模式
|
this.guiji_sava = '0'//是否开启轨迹保存
|
this.viewPower = '0';//是否显示电量
|
this.viewTagid = '0';//是否显示标签ID
|
this.viewAnckzb = '0';//是否显示基站坐标
|
this.offView = '0'//是否离线不显示图标
|
this.anckicon = '0'//是否显示基站图标
|
this.gas_show = '0'//显示其他检测(气体显示)
|
this.quiet = '0'//静止输出固定坐标
|
this.real_trak_time = 0//实时轨迹显示时长
|
this.real_trak_color = '红色'//实时轨迹显示的颜色
|
|
this.playFlag = false;//是否播放
|
this.dragFlag = false;//是否可拖拽当前img，默认不能
|
this.markFlag = false;//标记区域开启关闭flag
|
this.CreatLinepoints = [];//每次创建新区域的坐标集合
|
this.playMark; //正在展示的标记
|
this.playMarkInKaoQin;//当前标记是否在考勤区域内
|
this.trackNow; //当前轨迹
|
|
this.onlineAnchorList;//当前在线基站列表
|
this.offlineAnchorList;//当前离线基站列表
|
|
this.allMarkLins = [];//已创建的区域集合，例如[[{x,y},{x,y},{x,y}],[{n,m},{n,m},{n,m}]]目前只需要一个区域，所以数组内部只有一项
|
this.allFenceColor = [];//已创建的区域颜色
|
|
this.FenceList; //围栏坐标
|
this.FenceColor; //围栏颜色
|
this.FenceName; //围栏名称
|
this.realFenceList = []; // [名称，类型，实际坐标]
|
this.fenceMarkCount; //区域内的坐标数量
|
this.cacheCanvas = null; //缓存围栏绘图
|
|
this.GasList; //气体坐标
|
this.GasType; //气体类型
|
this.GasNongdu; //气体浓度
|
|
this.getImgLoad(imgList);
|
this.init();
|
document.oncontextmenu = new Function("event.returnValue=false;");
|
document.onselectstart = new Function("event.returnValue=false;");
|
};
|
|
MarkPoints.prototype = {
|
getImgLoad: function (imgList) {
|
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;
|
|
loadImages(imgList, function (images) {
|
for (var key in images) {
|
if (key == 'map') {
|
_this.imgScaleList[key] = 1;
|
_this.img = images[key];
|
} else if (key == 'icon') {
|
_this.imgScaleList[key] = 0.037;
|
} else {
|
_this.imgScaleList[key] = images[key].naturalWidth / images['map'].naturalWidth;
|
};
|
_this.rateNumList[key] = _this.canvas.width / images[key].naturalWidth;
|
_this.imgXList[key] = (_this.canvas.width - images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key]) / 2;
|
_this.imgYList[key] = (_this.canvas.height - images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]) / 2;//默认进来当前图像居中显示
|
_this.imgLoadList[key] = images[key];
|
}
|
/*画出当前图片*/
|
//_this.drawImg();
|
});
|
},
|
|
drawImg: function () {
|
var _this = this;
|
var can = _this.context;
|
can.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
|
|
can.globalCompositeOperation = "source-over";
|
//can.globalCompositeOperation = "destination-over";
|
var images = _this.imgLoadList;
|
|
//画地图
|
can.drawImage(_this.img, 0, 0, _this.img.naturalWidth, _this.img.naturalHeight, _this.imgXList['map'], _this.imgYList['map'], _this.img.naturalWidth * _this.imgScaleList['map'] * _this.rateNumList['map'], _this.img.naturalHeight * _this.imgScaleList['map'] * _this.rateNumList['map']);
|
|
//实际与图片的比例尺
|
_this.x_ratio = new Number(_this.imgLoadList['map'].naturalWidth / _this.trueLength);
|
_this.y_ratio = new Number(_this.imgLoadList['map'].naturalHeight / _this.trueWidth);
|
|
if (tuodong == true) {
|
return false;
|
}
|
|
if (_this.cacheCanvas == null) {
|
_this.cacheCanvas = document.createElement("canvas");
|
_this.cacheCanvas.width = _this.canvas.width;
|
_this.cacheCanvas.height = _this.canvas.height;
|
var cacheCtx = _this.cacheCanvas.getContext("2d");
|
//画出当前已有的围栏区域
|
if (_this.FenceList.length) {
|
//遍历每个fence，并画出
|
for (var m = 0; m < _this.FenceList.length; m++) {
|
var draw_points_list = [];
|
var points_list = _this.FenceList[m].split(",");
|
//实际坐标转成图上坐标
|
for (var i = 0; i < points_list.length; i++) {
|
if (i % 2 == 0) {
|
//偶数坐标，即x坐标
|
tmp_list = [];
|
var tmp_point = new Number(_this.imgXList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.x_ratio * (points_list[i] - _this.x_x0));
|
tmp_list.push(tmp_point);
|
} else {
|
var tmp_point = new Number(_this.imgYList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.y_ratio * (points_list[i] - _this.y_y0));
|
tmp_list.push(tmp_point);
|
draw_points_list.push(tmp_list);
|
};
|
};
|
|
var color = getDrawColor(_this.FenceColor[m]);
|
var name = _this.FenceName[m];
|
|
if (draw_points_list.length == 2) {
|
cacheCtx.beginPath();
|
cacheCtx.fillStyle = color;
|
cacheCtx.fillRect(draw_points_list[0][0], draw_points_list[0][1], draw_points_list[1][0] - draw_points_list[0][0], draw_points_list[1][1] - draw_points_list[0][1]);
|
cacheCtx.stroke();
|
cacheCtx.fillStyle = "red";
|
cacheCtx.fillText(name, (draw_points_list[0][0] + draw_points_list[1][0]) / 2, (draw_points_list[0][1] + draw_points_list[1][1]) / 2);
|
cacheCtx.closePath();
|
} else {
|
cacheCtx.beginPath();
|
cacheCtx.fillStyle = color;
|
cacheCtx.lineWidth = 1;
|
var text_x = new Number(0);
|
var text_y = new Number(0);
|
for (var j = 0; j < draw_points_list.length; j++) {
|
if (j == 0) {
|
cacheCtx.moveTo(draw_points_list[j][0], draw_points_list[j][1]);
|
} else {
|
cacheCtx.lineTo(draw_points_list[j][0], draw_points_list[j][1]);
|
}
|
if (j == draw_points_list.length - 1) {
|
cacheCtx.lineTo(draw_points_list[0][0], draw_points_list[0][1]);
|
cacheCtx.fill();
|
}
|
text_x = text_x + draw_points_list[j][0];
|
text_y = text_y + draw_points_list[j][1];
|
|
}
|
text_x = text_x / draw_points_list.length;
|
text_y = text_y / draw_points_list.length;
|
|
cacheCtx.fillStyle = color;
|
cacheCtx.fill();
|
cacheCtx.strokeStyle = color;
|
cacheCtx.stroke();
|
cacheCtx.fillStyle = "red";
|
cacheCtx.fillText(name, text_x, text_y);
|
cacheCtx.closePath();
|
};
|
};
|
};
|
can.drawImage(_this.cacheCanvas, 0, 0);
|
} else {
|
can.drawImage(_this.cacheCanvas, 0, 0);
|
};
|
|
|
//判断当前坐标是否在考勤区域内
|
_this.playMarkInKaoQin = [];
|
for (var n in _this.playMark) { //_this.playMark为当前实时在线点位置，为[array[id,name,power,life,x,y,time]]
|
node_list = [Number(_this.playMark[n][4]), Number(_this.playMark[n][5])];
|
for (var f in _this.realFenceList) {
|
if (_this.realFenceList[f][1] == "考勤区域") {
|
if (inFenceOrNot(_this.realFenceList[f][2], node_list)) {
|
//inFenceOrNot(fence_list, node_list) return true/false
|
_this.playMarkInKaoQin.push(true);
|
break;
|
}
|
}
|
};
|
if (_this.playMarkInKaoQin.length == n) {
|
_this.playMarkInKaoQin.push(false);
|
}
|
};
|
|
|
//计算区域内的坐标数量（隧道定位）
|
_this.fenceMarkCount = [];
|
for (var f in _this.realFenceList) {
|
//f[name, type, zuobiao_array]
|
var tmp_count = new Number(0);
|
for (var n in _this.playMark) {//_this.playMark为当前实时在线点位置，为[array[.x, .y]]
|
node_list = [Number(_this.playMark[n][4]), Number(_this.playMark[n][5])];
|
if (inFenceOrNot(_this.realFenceList[f][2], node_list)) {//inFenceOrNot(fence_list, node_list) return true/false
|
tmp_count += 1;
|
//break;
|
}
|
};
|
_this.fenceMarkCount.push(tmp_count);
|
};
|
|
|
//画标签及基站
|
for (var key in images) {
|
if (key == "icon" && _this.playMark) {
|
for (var i = 0; i < _this.playMark.length; i++) {
|
var tagzhuangtai = _this.playMark[i][3]; //在线状态
|
//var playMarkInKaoQin = true;
|
if (((_this.offView == '1' && tagzhuangtai == '1') || (_this.offView == '0')) && ((_this.diskaoqin == "1" && _this.playMarkInKaoQin[i]) || (_this.diskaoqin == "0"))) {
|
//是否开启离线消失，并判断状态（在线1/离线0）；当开启离线消失时（仅显示在线标签），当未开启离线消失时（全部显示）
|
//是否开启出考勤区域消失，并判断是否在考勤区域内；当开启出考勤区域消失时（需要在考勤区域内），当未开启时（全部显示）
|
|
//读取当前实际坐标
|
var cor_x = new Number(_this.playMark[i][4]); // 此处_this.playMark是数据库里取到的当前点坐标,4是posx,5是posy
|
var cor_y = new Number(_this.playMark[i][5]);
|
//转为图上坐标
|
var x_cor_now = new Number(_this.imgXList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.x_ratio * (cor_x - _this.x_x0));
|
var y_cor_now = new Number(_this.imgYList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.y_ratio * (cor_y - _this.y_y0));
|
//画在相应位置上
|
//can.drawImage(images[key], 0, 0, images[key].naturalWidth, images[key].naturalHeight, x_cor_now - (images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key])/2, y_cor_now - (images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]), images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key], images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]);
|
//can.drawImage(images[key], 0, 0, images[key].naturalWidth, images[key].naturalHeight, x_cor_now - (images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key])/2, y_cor_now - (images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]), images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key], images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]);
|
//是否有轨迹拖尾
|
if (_this.real_trak_time != 0) {
|
var trackNow = [];
|
var pm = _this.playMark[i];
|
function ftn(pm, tn, rtk, ctt, rtc, igxm, igym, igslm, rnlm, xr, yr, xx0, yy0) {
|
//trackNow = getTracknow( pm[0], rtk)
|
if (tn.length == 0) {
|
trackNow = [];
|
} else if (pm[0] in tn) {
|
trackNow = tn[pm[0]];
|
} else {
|
trackNow = [];
|
};
|
var can = ctt;
|
can.beginPath();
|
can.strokeStyle = rtc;
|
can.fillStyle = rtc;
|
for (var i = 0; i < trackNow.length; i++) {
|
var cor_x = new Number(trackNow[i][0]);
|
var cor_y = new Number(trackNow[i][1]);
|
var x_cor = new Number(igxm + igslm * rnlm * xr * (cor_x - xx0));
|
var y_cor = new Number(igym + igslm * rnlm * yr * (cor_y - yy0));
|
|
// var cor_x2 = new Number(trackNow[i+1][0]);
|
// var cor_y2 = new Number(trackNow[i+1][1]);
|
// var x_cor2 = new Number(igxm + igslm * rnlm * xr * (cor_x2 - xx0));
|
// var y_cor2 = new Number(igym + igslm * rnlm * yr * (cor_y2 - yy0));
|
|
// can.moveTo(x_cor, y_cor);
|
// can.lineTo(x_cor2, y_cor2);
|
// can.stroke();
|
// can.fill();
|
can.moveTo(x_cor, y_cor);
|
can.arc(x_cor, y_cor, 1, 0, Math.PI * 2, true);
|
can.fill();
|
};
|
can.closePath();
|
can.stroke();
|
//_this.trackNow.push([trackNow]);
|
}
|
setTimeout(ftn(_this.playMark[i], _this.trackNow, _this.real_trak_time, _this.context, _this.real_trak_color, _this.imgXList['map'], _this.imgYList['map'], _this.imgScaleList['map'], _this.rateNumList['map'], _this.x_ratio, _this.y_ratio, _this.x_x0, _this.y_y0), 5);
|
//var trackNow = getTracknow( _this.playMark[i][0], _this.real_trak_time);//获取指定时间段内该tagid的数据进行绘制
|
}
|
|
var isSos = _this.playMark[i][_this.playMark[i].length - 3];
|
if (isSos) {
|
if (sosType) {
|
can.drawImage(sos, 0, 0, images[key].naturalWidth, images[key].naturalHeight, x_cor_now - (images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key]) / 2 + 3, y_cor_now - (images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]) + 2, images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key], images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]);
|
} else {
|
can.drawImage(sos1, 0, 0, images[key].naturalWidth, images[key].naturalHeight, x_cor_now - (images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key]) / 2 + 3, y_cor_now - (images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]) + 2, images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key], images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]);
|
}
|
sosType = !sosType;
|
} else {
|
can.drawImage(images[key], 0, 0, images[key].naturalWidth, images[key].naturalHeight, x_cor_now - (images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key]) / 2, y_cor_now - (images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]), images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key], images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]);
|
}
|
//画在相应位置上
|
// can.drawImage(images[key], 0, 0, images[key].naturalWidth, images[key].naturalHeight, x_cor_now - (images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key]) / 2, y_cor_now - (images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]), images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key], images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]);
|
|
can.font = '13px sans-serif';
|
can.fillStyle = 'white';
|
if (_this.tagZb == '1') { //是否显示标签坐标
|
can.fillStyle = 'red';
|
can.font = '10px sans-serif';
|
//var f = 8*( _this.imgScaleList['map']);
|
//can.font=f+"px Arial";
|
|
tagzuobiao = _this.playMark[i][4] + ',' + _this.playMark[i][5];
|
can.fillText(tagzuobiao, x_cor_now - 20, y_cor_now + 10);
|
};
|
if (_this.viewName == '1') { //是否显示人员名称
|
can.font = '13px sans-serif';
|
if (_this.viewTagid == '1') { //是否显示标签id
|
fillRoundRect(can, x_cor_now - 40, y_cor_now - images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key] - 18, images[key].naturalHeight * 2, 20, 4, '#32CD32');
|
can.fillStyle = 'white';
|
can.fillText(_this.playMark[i][1], x_cor_now - 38, y_cor_now - images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key] - 3);
|
can.fillText(_this.playMark[i][0], x_cor_now + 5, y_cor_now - images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key] - 3);
|
} else {
|
fillRoundRect(can, x_cor_now - 20, y_cor_now - images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key] - 18, images[key].naturalHeight * 1.1, 20, 4, '#32CD32');
|
can.fillStyle = 'white';
|
can.fillText(_this.playMark[i][1], x_cor_now - 19, y_cor_now - images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key] - 3);
|
}
|
} else {
|
can.font = '13px sans-serif';
|
if (_this.viewTagid == '1') {
|
fillRoundRect(can, x_cor_now - 20, y_cor_now - images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key] - 18, images[key].naturalHeight * 1.1, 20, 4, '#32CD32');
|
can.fillStyle = 'white';
|
can.fillText(_this.playMark[i][0], x_cor_now - 14, y_cor_now - images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key] - 3);
|
}
|
}
|
if (_this.viewPower == '1') { //是否显示电量
|
can.font = '10px sans-serif';
|
can.fillStyle = 'red';
|
can.fillText("电量:" + _this.playMark[i][2], x_cor_now - 20, y_cor_now + 20);
|
};
|
can.font = '10px sans-serif';
|
};
|
}
|
} else if (key == 'anchor_online') {
|
can.font = '10px sans-serif';
|
if (_this.anckicon == '1') { //是否显示基站图标
|
//_this.onlineAnchorList = [anchorid, posx,posy,posz,layer,greatetime]
|
for (var i = 0; i < _this.onlineAnchorList.length; i++) {
|
var cor_x = new Number(_this.onlineAnchorList[i][1]);
|
var cor_y = new Number(_this.onlineAnchorList[i][2]);
|
var x_cor = new Number(_this.imgXList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.x_ratio * (cor_x - _this.x_x0));
|
var y_cor = new Number(_this.imgYList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.y_ratio * (cor_y - _this.y_y0));
|
can.drawImage(images[key], 0, 0, images[key].naturalWidth, images[key].naturalHeight, x_cor - (images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key]) / 2, y_cor - (images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]), images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key] + 10, images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key] + 10);
|
if (_this.viewAnckzb == '1') { //是否显示基站坐标
|
can.fillStyle = 'red'
|
var anchorzuobiao = _this.onlineAnchorList[i][1] + ',' + _this.onlineAnchorList[i][2] + ',' + _this.onlineAnchorList[i][3];
|
can.fillText(anchorzuobiao, x_cor - 20, y_cor + 20);
|
};
|
if (_this.viewAnckid == '1') { //是否显示基站id
|
can.fillStyle = 'red';
|
can.fillText(_this.onlineAnchorList[i][0], x_cor - 7, y_cor - 5);
|
};
|
};
|
};
|
} else if (key == 'anchor_offline') {
|
can.font = '10px sans-serif';
|
if (_this.anckicon == '1') { //是否显示基站图标
|
//_this.offlineAnchorList = [anchorid, posx,posy,posz,layer,greatetime]
|
for (var i = 0; i < _this.offlineAnchorList.length; i++) {
|
var cor_x = new Number(_this.offlineAnchorList[i][1]);
|
var cor_y = new Number(_this.offlineAnchorList[i][2]);
|
var x_cor = new Number(_this.imgXList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.x_ratio * (cor_x - _this.x_x0));
|
var y_cor = new Number(_this.imgYList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.y_ratio * (cor_y - _this.y_y0));
|
can.drawImage(images[key], 0, 0, images[key].naturalWidth, images[key].naturalHeight, x_cor - (images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key]) / 2, y_cor - (images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key]), images[key].naturalWidth * _this.imgScaleList[key] * _this.rateNumList[key] + 10, images[key].naturalHeight * _this.imgScaleList[key] * _this.rateNumList[key] + 10);
|
if (_this.viewAnckzb == '1') { //是否显示基站坐标
|
can.fillStyle = 'red'
|
var anchorzuobiao = _this.offlineAnchorList[i][1] + ',' + _this.offlineAnchorList[i][2] + ',' + _this.offlineAnchorList[i][3];
|
can.fillText(anchorzuobiao, x_cor - 20, y_cor + 20);
|
};
|
if (_this.viewAnckid == '1') { //是否显示基站id
|
can.fillStyle = 'red';
|
can.fillText(_this.offlineAnchorList[i][0], x_cor - 7, y_cor - 5);
|
};
|
};
|
};
|
}
|
};
|
|
/* 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 x_x0 = new Number(getYuandian()[0]);
|
var y_y0 = new Number(getYuandian()[1]); */
|
|
//开启隧道定位后，需要显示当前考勤区域内的总标签数量
|
//_this.fenceMarkCount(count)
|
//_this.realFenceList([name, type, zuobiao_array])
|
//_this.FenceColor(color)
|
if (_this.tunlDw == "1") {
|
var k = 0;
|
can.beginPath();
|
for (var i = 0; i < _this.fenceMarkCount.length; i++) {
|
// if ((_this.realFenceList[i][1] == "考勤区域")||(_this.realFenceList[i][1] == "巡检区域")){
|
|
//can.fillStyle = getDrawColor(_this.FenceColor[i]);
|
//can.fillRect(10,10+50*k,140,30);
|
|
fillRoundRect(can, 10, 10 + 50 * k, 140, 30, 5, /*optional*/ getDrawColor(_this.FenceColor[i]))
|
//can.fillRoundRect(10,10+50*k,140,30,10)
|
can.fillStyle = "white";
|
can.font = "15px sans-serif";
|
|
can.textAlign = 'center';
|
can.fillText(_this.realFenceList[i][0] + "：" + _this.fenceMarkCount[i] + "人", 80, 30 + 50 * k);
|
//can.textBaseline = "middle";
|
|
k += 1;
|
// };
|
};
|
can.closePath();
|
can.font = "10px sans-serif";
|
can.textAlign = "start";
|
};
|
|
//开启气体显示
|
if (_this.gas_show == "1") {
|
_this.GasList = getGas("zuobiao"); //气体坐标
|
_this.GasType = getGas("type"); //气体类型
|
_this.GasNongdu = getGas("nongdu"); //气体浓度
|
for (var i = 0; i < _this.GasList.length; i++) {
|
var cor_x = new Number(_this.GasList[i][0]);
|
var cor_y = new Number(_this.GasList[i][1]);
|
var x_cor = new Number(_this.imgXList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.x_ratio * (cor_x - _this.x_x0));
|
var y_cor = new Number(_this.imgYList['map'] + _this.imgScaleList['map'] * _this.rateNumList['map'] * _this.y_ratio * (cor_y - _this.y_y0));
|
can.beginPath();
|
can.arc(x_cor, y_cor, 6, 0, Math.PI * 2, true);
|
can.fillStyle = "green";
|
can.fill();
|
can.fillStyle = "red";
|
can.fillText(_this.GasType[i], x_cor + 10, y_cor);
|
can.fillText(_this.GasNongdu[i], x_cor + 10, y_cor + 10);
|
can.closePath();
|
}
|
};
|
},
|
|
init: function () {
|
var _this = this;
|
|
//读取系统设置
|
_this.sysSetting = getSystemSetting();
|
_this.tagZb = _this.sysSetting[0].tagZb;//是否显示标签坐标
|
_this.diskaoqin = _this.sysSetting[0].diskaoqing; //出考勤区域是否消失
|
_this.viewAnckid = _this.sysSetting[0].viewAnckid;//是否显示基站ID
|
_this.viewName = _this.sysSetting[0].viewName;//是否显示人员名称
|
_this.tunlDw = _this.sysSetting[0].tunlDw;//隧道定位模式
|
_this.guiji_sava = _this.sysSetting[0].guiji_sava;//是否开启轨迹保存
|
_this.viewPower = _this.sysSetting[0].viewPower;//是否显示电量
|
_this.viewTagid = _this.sysSetting[0].viewTagid;//是否显示标签ID
|
_this.viewAnckzb = _this.sysSetting[0].viewAnckzb;//是否显示基站坐标
|
_this.offView = _this.sysSetting[0].offView;//是否离线不显示图标
|
_this.anckicon = _this.sysSetting[0].anckicon;//是否显示基站图标
|
_this.gas_show = _this.sysSetting[0].gas_show;//显示其他检测(气体显示)
|
_this.quiet = _this.sysSetting[0].quiet;//静止输出固定坐标
|
|
//读取真实地图
|
//读图片实际尺寸
|
_this.trueMeasure = getTruemap();
|
_this.trueLength = new Number(_this.trueMeasure[0]);
|
_this.trueWidth = new Number(_this.trueMeasure[1]);
|
|
//读实际原点坐标
|
_this.x_x0 = new Number(getYuandian()[0]);
|
_this.y_y0 = new Number(getYuandian()[1]);
|
|
//读取当前围栏信息
|
_this.FenceList = getExistFence("zuobiao");
|
_this.FenceColor = getExistFence("color");
|
_this.FenceName = getExistFence("name");
|
_this.FenceType = getExistFence("type");
|
|
_this.realFenceList = [];
|
//遍历围栏信息并存储成[名称，类型，坐标]
|
for (var m = 0; m < _this.FenceList.length; m++) {
|
var tmp_list = [];
|
var points = _this.FenceList[m];
|
var points_list = _this.FenceList[m].split(",");
|
|
//围栏实际坐标（加上偏移量的）
|
var points_list_sort = [];
|
for (var i = 0; i < points_list.length; i++) {
|
if (i % 2 == 0) {
|
tmp_list = [];
|
tmp_list.push(new Number(points_list[i]));
|
} else {
|
tmp_list.push(new Number(points_list[i]));
|
points_list_sort.push(tmp_list);
|
}
|
}
|
//存区域名称+区域类型+区域坐标，方便后续判断是否在某区域内
|
_this.realFenceList.push([_this.FenceName[m], _this.FenceType[m], points_list_sort]);
|
};
|
|
_this.real_trak_time = str_to_time(_this.sysSetting[0].real_trak_time);//实时轨迹显示时长
|
//当前位置
|
_this.playMark = getRealPosition();
|
var tagid_str = "";
|
for (var i = 0; i < _this.playMark.length; i++) {
|
tagid_str += _this.playMark[i][0]
|
if (i != _this.playMark.length - 1) {
|
tagid_str += ","
|
}
|
}
|
//实时轨迹
|
if (_this.real_trak_time != 0) {
|
_this.trackNow = getTracknow(tagid_str, _this.real_trak_time);
|
} else {
|
_this.trackNow = null;
|
}
|
_this.real_trak_color = getTrackColor(_this.sysSetting[0].real_trak_color);//实时轨迹显示的颜色
|
|
_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);
|
};
|
var t = 300;//300ms
|
|
_this.onlineAnchorList = getAnchorInfo()[0];
|
_this.offlineAnchorList = getAnchorInfo()[1];
|
|
function fn() {
|
if (tuodong == true) {
|
return false;
|
}
|
//当前实时坐标
|
_this.playMark = getRealPosition();
|
var tagid_str = "";
|
for (var i = 0; i < _this.playMark.length; i++) {
|
tagid_str += _this.playMark[i][0]
|
if (i != _this.playMark.length - 1) {
|
tagid_str += ","
|
}
|
}
|
|
if (_this.real_trak_time != 0) {
|
//将当前实时坐标添加进track中
|
var track_now = Date.parse(new Date()); //timestamp为毫秒单位
|
track_now = track_now / 1000;
|
var track_now_head = track_now - _this.real_trak_time;
|
//当前track最开始的时间
|
var track_head_date = new Date();
|
track_head_date.setTime(track_now_head * 1000 + 8 * 3600 * 1000);
|
var track_head_date_str = track_head_date.toJSON().substr(0, 19).replace('T', ' ');
|
|
for (var i = 0; i < _this.playMark.length; i++) {
|
if (_this.trackNow[_this.playMark[i][0]] != null) {
|
if (_this.trackNow[_this.playMark[i][0]].length > 1500) {
|
_this.trackNow[_this.playMark[i][0]] = _this.trackNow[_this.playMark[i][0]].slice(-1200);
|
};
|
for (var j = 0; j < _this.trackNow[_this.playMark[i][0]].length; j++) {
|
if (_this.trackNow[_this.playMark[i][0]][0][2] < track_head_date_str) {
|
_this.trackNow[_this.playMark[i][0]].shift()
|
} else {
|
break
|
}
|
};
|
};
|
|
var now_time = new Date();
|
now_time.setTime(track_now * 1000 + 8 * 3600 * 1000);
|
var now_time_str = now_time.toJSON().substr(0, 19).replace('T', ' ');
|
var tmp = [_this.playMark[i][4], _this.playMark[i][5], now_time_str];
|
if (_this.trackNow[_this.playMark[i][0]] == null) {
|
_this.trackNow[_this.playMark[i][0]] = []
|
}
|
_this.trackNow[_this.playMark[i][0]].push(tmp)
|
}
|
}
|
_this.drawImg();
|
}
|
if (expand == true) {
|
clearInterval(timer1)
|
timer2 = setInterval(fn, t);
|
} else {
|
clearInterval(timer2)
|
timer1 = setInterval(fn, t);
|
}
|
//setInterval(fn, t);
|
|
},
|
/*计算当前鼠标位置距离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;
|
tuodong = 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) {
|
tuodong = true;
|
_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;
|
for (var key in _this.imgXList) {
|
_this.imgXList[key] += x;
|
_this.imgYList[key] += y;
|
}
|
_this.cacheCanvas = null;
|
_this.drawImg();
|
}
|
},
|
/*鼠标放开事件*/
|
mouseUp: function (event) {
|
var _this = this;
|
_this.dragFlag = false;
|
tuodong = false;
|
if (_this.markFlag) {
|
_this.canvas.style.cursor = "none";
|
return;
|
}
|
_this.canvas.style.cursor = 'default';
|
|
},
|
/*鼠标滚轮事件*/
|
onmouseWheel: function (event) {
|
var _this = this;
|
_this.cacheCanvas = null;
|
var pos = _this.xyToCanvas(_this.canvas, event.clientX, event.clientY);
|
event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltaY * (-40));
|
//取消浏览器默认行为
|
if (event.preventDefault) {
|
event.preventDefault();
|
} else {
|
event.returnValue = false;
|
}
|
if (event.wheelDelta > 0 && _this.scaleFlag < 9) {
|
for (var key in _this.imgScaleList) {
|
_this.imgScaleList[key] *= 1.25;
|
_this.imgXList[key] = _this.imgXList[key] * 1.25 - 0.25 * pos.x;
|
_this.imgYList[key] = _this.imgYList[key] * 1.25 - 0.25 * pos.y;
|
}
|
_this.scaleFlag += 1;
|
}
|
if (event.wheelDelta < 0 && _this.scaleFlag > -9) {//缩小
|
for (var key in _this.imgScaleList) {
|
_this.imgScaleList[key] *= 0.8;
|
_this.imgXList[key] = _this.imgXList[key] * 0.8 + pos.x * 0.2;
|
_this.imgYList[key] = _this.imgYList[key] * 0.8 + pos.y * 0.2;
|
}
|
_this.scaleFlag -= 1;
|
}
|
_this.imgScaleList['icon'] = 0.037;
|
_this.drawImg();
|
},
|
|
}
|
/* var timeshow;
|
var weizhi;
|
setTimeout(function(){
|
setshow();
|
timeshow = setInterval(setshow, 3000);
|
},0)
|
function setshow () {
|
$.ajax({
|
async: false,
|
type: "POST",
|
url: "/hxzkoa/setshow.do",
|
dataType: 'json',
|
success (data) {
|
$("#ssc1").html('<span class="fonts1">' + data[0].type + '</span><br><span class="fonts">' + data[0].num + '</span>');
|
$("#ssc2").html('<span class="fonts1">' + data[1].type + '</span><br><span class="fonts">' + data[1].num + '</span>');
|
$("#ssc3").html('<span class="fonts1">' + data[2].type + '</span><br><span class="fonts">' + data[2].num + '</span>');
|
weizhi = data[0].num;
|
}
|
});
|
}
|
function myStopFunction () {
|
clearInterval(timeshow);
|
}
|
/* window.setInterval(function () {
|
getNewSeries(lastDate, {
|
min: 10,
|
max: 90
|
})
|
|
chart.updateSeries([{
|
data: weizhi
|
}])
|
}, 1000) */
|
/* var timeshow = setInterval(setweizhi, 5000);
|
function setweizhi () {
|
console.log('99999')
|
$.ajax({
|
async: false,
|
type: "POST",
|
url: "/hxzkoa/setweizhi.do",
|
dataType: 'json',
|
});
|
} */
|
/* var j = 4;
|
var i = 0;
|
var shebei = $("#shebei").val();
|
console.log("chushihua",shebei.toString()) */
|
$.ajax({
|
url: "/hxzkoa/setshebei.do",
|
type: "post",
|
dataType: "JSON",
|
success(data) {
|
var i = 0;
|
shebeido()
|
var times = setInterval(shebeido, 5000);
|
function shebeido() {
|
var html = '';
|
var arr = data.slice(i, i + 4)
|
for (const key in arr) {
|
if (arr[key].zhuangtai == 0) {
|
if (arr[key].duixiang == "定位基站") {
|
html += '<tr align="center"><td class="noExl"><img src="hxzk/image/anchor/基站离线.png" /></td><td>' + arr[key].id + '</td><td>' + arr[key].duixiang + '</td><td>' + arr[key].banben + '</td><td>' + arr[key].xiangqing + '</td><td>' + arr[key].time + '</td></tr>';
|
} else {
|
html += '<tr align="center"><td class="noExl"><img src="hxzk/image/icon/tagoff.png" /></td><td>' + arr[key].id + '</td><td>' + arr[key].duixiang + '</td><td>' + arr[key].banben + '</td><td>' + arr[key].xiangqing + '</td><td>' + arr[key].time + '</td></tr>';
|
}
|
} else {
|
if (arr[key].duixiang == "定位基站") {
|
html += '<tr align="center"><td class="noExl"><img src="hxzk/image/anchor/基站在线.png" /></td><td>' + arr[key].id + '</td><td>' + arr[key].duixiang + '</td><td>' + arr[key].banben + '</td><td>' + arr[key].xiangqing + '</td><td>' + arr[key].time + '</td></tr>';
|
} else {
|
html += '<tr align="center"><td class="noExl"><img src="hxzk/image/icon/tagon.png" /></td><td>' + arr[key].id + '</td><td>' + arr[key].duixiang + '</td><td>' + arr[key].banben + '</td><td>' + arr[key].xiangqing + '</td><td>' + arr[key].time + '</td></tr>';
|
}
|
}
|
}
|
$("#nr").html(html);
|
i += 4;
|
if (i >= data.length) {
|
i = 0;
|
}
|
}
|
// function shebeido() {
|
// var j = i + 4
|
// var html = ''
|
// for (i; i < j; i++) {
|
// console.log(i)
|
// // console.log(data[i].zhuangtai)
|
// if (data[i] == false) {
|
// break;
|
// } else {
|
// html += '<tr align="center"><td class="noExl">' + data[i].zhuangtai + '</td><td>' + data[i].id + '</td><td>' + data[i].duixiang + '</td><td>' + data[i].banben + '</td><td>' + data[i].xiangqing + '</td><td>' + data[i].time + '</td></tr>'
|
// // html += '<tr align="center" class="d"><td>' + item.id + '</td><td>' + item.receive_time + '</td><td>' + item.type + '</td><td>' + item.tagid + '</td><td>' + item.neirong + '</td></tr>'
|
// }
|
// }
|
// console.log(html)
|
// // console.log(i)
|
// $("#nr").html(html)
|
// if (i >= data.length) {
|
// console.log('初始化了')
|
// i = 0;
|
// }
|
// }
|
}
|
});
|
// var timeshow = setInterval(sos, 4000);
|
// function sos() {
|
// $.ajax({
|
// url: "/hxzkoa/sosfence.do",
|
// type: "POST",
|
// dataType: "JSON",
|
// success(data) {
|
// if (data == null) {
|
|
// } else {
|
// var str = ""
|
// alert(str)
|
// audio.play()
|
// }
|
// }
|
// })
|
// }
|
//alert('一自动开启告警提醒')
|
var audio1 = new Audio("/hxzkoa/hxzk/image/voice/sos.wav");
|
var audio2 = new Audio("/hxzkoa/hxzk/image/voice/warning.wav");
|
var current_floor;
|
function qufloor(floor) {
|
current_floor = floor
|
}
|
// var zaipan = []
|
// var sosgaojing1 = getRealPosition();
|
// for (var i = 0; i < sosgaojing1.length; i++) {
|
// zaipan.push(false)
|
// }
|
setInterval(baojing, 1000)
|
function baojing() {
|
var sosgaojing = getRealPosition();
|
for (var i = 0; i < sosgaojing.length; i++) {
|
if (sosgaojing[i][7] == 1) {
|
if (sosgaojing[i][8] == 1) {
|
// if (zaipan[i] == false) {
|
var str = '注意,编号[' + sosgaojing[i][0] + ']SOS告警'
|
// Audio1.click()
|
audio1.play()
|
//swal(str)
|
/* $.ajax({
|
url: "/hxzkoa/sosgaojing.do",
|
type: "POST",
|
dataType: "JSON",
|
data: {
|
tagid: sosgaojing[i][0]
|
}
|
}) */
|
// }
|
} if (sosgaojing[i][9] == 1) {
|
// if (zaipan[i] == false) {
|
var str = '注意,编号[' + sosgaojing[i][0] + ']进入危险区域'
|
// audio2.click()
|
audio2.play()
|
//swal(str)
|
/* $.ajax({
|
url: "/hxzkoa/fencegaojing.do",
|
type: "POST",
|
dataType: "JSON",
|
data: {
|
tagid: sosgaojing[i][0]
|
}
|
}) */
|
// }
|
}
|
// zaipan[i] = true
|
}
|
// } else {
|
// zaipan[i] = false
|
// }
|
}
|
}
|
|
</script>
|
<!-- 室内定位地图功能结束 -->
|
|
<!-- END FUNCTION SCRIPTS -->
|
|
<script src="/hxzkoa/hxzk/plugins/apex/apexcharts.js"></script>
|
<script src="/hxzkoa/hxzk/plugins/apex/custom-apexcharts.js"></script>
|
</body>
|
|
</html>
|
