You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
244 lines
6.7 KiB
244 lines
6.7 KiB
2 years ago
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||
|
|
pageEncoding="UTF-8"%>
|
||
|
|
<%@ page import="com.lp.cfg.ProConfig"%>
|
||
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||
|
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
|
||
|
|
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
|
||
|
|
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
|
||
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<%=ProConfig.Map.BAIDU_MAP_KEY%>"></script>
|
||
|
|
<link type="text/css" href="<%=basePath%>/css/oss/iot/index.css?<%=v%>" rel="stylesheet"/>
|
||
|
|
<style type="text/css">
|
||
|
|
.layui-layer.layui-layer-page{
|
||
|
|
width:auto !important;
|
||
|
|
}
|
||
|
|
.title-span{
|
||
|
|
width: 130px;
|
||
|
|
text-align:center ;
|
||
|
|
display: inline-block;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
<div style="background: #ecf0f5;">
|
||
|
|
<div class="mapContainer" >
|
||
|
|
<div id="map"></div>
|
||
|
|
<div class="show_index hide">
|
||
|
|
<div>
|
||
|
|
<span class="app_name">项目名称：</span>
|
||
|
|
<span class="app_name_value"></span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="app_name">备注信息：</span>
|
||
|
|
<span class="app_desc_value"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="hide" id="detailInfos">
|
||
|
|
<div style="padding: 20px;line-height: 30px;font-size: 16px;width: 350px;color:#3499da;">
|
||
|
|
<div>
|
||
|
|
<span class="title-span">项目信息：</span> <span>{scene_name}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="title-span">设备名称：</span> <span>{name}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="title-span">定位数值：</span> <span>{lonLat}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="title-span">更新时间：</span> <span>[mtime]</span>
|
||
|
|
</div>
|
||
|
|
<div style=" text-align: right;padding-right: 60px;text-decoration: underline;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="template2 hide">
|
||
|
|
<div class="map_info_window" style="width: 430px;">
|
||
|
|
<div class="map_info_titles" style="margin-bottom: 0;">
|
||
|
|
<h4><img src="<%=basePath%>/image/oss/iot/device_ico.png" class="icondevice">
|
||
|
|
<span style="vertical-align: middle;">{0} [设备号：{1}]</span>
|
||
|
|
<br>
|
||
|
|
</div>
|
||
|
|
<div class="map_info_item" style="overflow: hidden;zoom:1;">
|
||
|
|
{2}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="template3 hide">
|
||
|
|
<div style="width: 50%;float: left;padding:3px 0;">
|
||
|
|
<div style="width: 50%;float: left;">
|
||
|
|
<span class="sensor-info">{0}</span>
|
||
|
|
</div>
|
||
|
|
<div style="width: 50%;float: left;">
|
||
|
|
<span style="font-size: 20px;color: #3499da;">{1}</span>
|
||
|
|
<span>{2}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
var map ,dataCache ;
|
||
|
|
|
||
|
|
$(function(){
|
||
|
|
|
||
|
|
map = new BMap.Map("map"); // 创建Map实例
|
||
|
|
map.setMapStyle({
|
||
|
|
styleJson: [{
|
||
|
|
"featureType": "road",//道路
|
||
|
|
"elementType": "all",
|
||
|
|
"stylers": {
|
||
|
|
"color": "#ffffff",
|
||
|
|
"visibility": "off"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"featureType": "building",
|
||
|
|
"elementType": "all",
|
||
|
|
"stylers": {
|
||
|
|
"visibility": "off"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"featureType": "poilabel",//景点
|
||
|
|
"elementType": "all",
|
||
|
|
"stylers": {
|
||
|
|
"visibility": "off"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"featureType": "manmade",//学院
|
||
|
|
"elementType": "all",
|
||
|
|
"stylers": {
|
||
|
|
"visibility": "off"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
function setTextShowMap(lon,lat ,obj){
|
||
|
|
var point = new BMap.Point(lon,lat);
|
||
|
|
var opts = {
|
||
|
|
position : point, // 指定文本标注所在的地理位置
|
||
|
|
offset : new BMap.Size(2, -27) //设置文本偏移量
|
||
|
|
}
|
||
|
|
var label = new BMap.Label(dataCache[obj].name , opts);
|
||
|
|
label.setStyle({
|
||
|
|
fontSize : "12px",
|
||
|
|
fontFamily:"微软雅黑"
|
||
|
|
});
|
||
|
|
map.addOverlay(label);
|
||
|
|
}
|
||
|
|
|
||
|
|
map.centerAndZoom('成都', 6); // 初始化地图,设置中心点坐标和地图级别
|
||
|
|
|
||
|
|
//添加地图类型控件
|
||
|
|
map.addControl(new BMap.MapTypeControl({
|
||
|
|
mapTypes:[
|
||
|
|
BMAP_NORMAL_MAP,
|
||
|
|
BMAP_HYBRID_MAP
|
||
|
|
]}));
|
||
|
|
|
||
|
|
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
||
|
|
|
||
|
|
// 地址设置标记点
|
||
|
|
function selfLocation(lon,lat,obj){
|
||
|
|
|
||
|
|
var iconName = 'location2_red.png' ;
|
||
|
|
if( dataCache[obj].iot_node_status == 16 ){
|
||
|
|
// 已连接
|
||
|
|
iconName = 'location2.png' ;
|
||
|
|
}
|
||
|
|
//单独设定图标的样式
|
||
|
|
var icon = new BMap.Icon('<%=basePath%>/image/oss/iot/'+iconName, new BMap.Size(32, 32), {
|
||
|
|
anchor: new BMap.Size(32, 32)
|
||
|
|
});
|
||
|
|
//创建一个图像标注实例。point参数指定了图像标注所在的地理位置
|
||
|
|
var mkr = new BMap.Marker(new BMap.Point(lon,lat), {
|
||
|
|
icon: icon
|
||
|
|
});
|
||
|
|
|
||
|
|
mkr.addEventListener("click", function () {
|
||
|
|
var xxm = this ;
|
||
|
|
// 弹出列表传感器列表信息
|
||
|
|
postAjax(localUrl+"/page/sensor.json?pageSize=300&paged=1", {node_id :dataCache[obj].id },function(data){
|
||
|
|
var sContent = $(".template2").html().format(dataCache[obj].name , dataCache[obj].device_code , generateSensor(data) );
|
||
|
|
var opts = {
|
||
|
|
offset: new BMap.Size(-3, -40)
|
||
|
|
}
|
||
|
|
var infoWindow = new BMap.InfoWindow(sContent,opts ); // 创建信息窗口对象
|
||
|
|
xxm.openInfoWindow(infoWindow);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
mkr.addEventListener("mouseover", function(e) {
|
||
|
|
|
||
|
|
});
|
||
|
|
mkr.addEventListener("mouseout", function(e) {
|
||
|
|
|
||
|
|
});
|
||
|
|
//将覆盖物添加到地图中
|
||
|
|
map.addOverlay(mkr);
|
||
|
|
//将地图的中心点更改为给定的点
|
||
|
|
// map.panTo(lon, lat);
|
||
|
|
// map.centerAndZoom(new BMap.Point(lon, lat), 8);
|
||
|
|
}
|
||
|
|
|
||
|
|
//生成传感器控制代码
|
||
|
|
function generateSensor(data){
|
||
|
|
var s = '' ;
|
||
|
|
if(isOK(data)){
|
||
|
|
var dataT = data.data.data ;
|
||
|
|
for(var i=0;i<dataT.length;i++){
|
||
|
|
if( dataT[i].iot_sensor_type == 25 ){
|
||
|
|
s += $(".template3").html().format(dataT[i].name , gdv(dataT[i].sdata,0) ,dataT[i].data.measure_unit_type );
|
||
|
|
}else if( dataT[i].iot_sensor_type == 26 || dataT[i].iot_sensor_type == 27 ){
|
||
|
|
s += $(".template3").html().format(dataT[i].name ,gdv(dataT[i].data.measure_unit_type,'-') ,"" );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return s ;
|
||
|
|
}
|
||
|
|
|
||
|
|
udpDeviceInfo();
|
||
|
|
|
||
|
|
setInterval(function() {
|
||
|
|
map.clearOverlays();
|
||
|
|
udpDeviceInfo();
|
||
|
|
}, 15000);
|
||
|
|
|
||
|
|
|
||
|
|
// 更新设备信息
|
||
|
|
function udpDeviceInfo(){
|
||
|
|
// 请求所有的设备信息
|
||
|
|
commonAjax('POST', localUrl + '/page/node.json?paged=1&pageSize=1000', {}, function(data) {
|
||
|
|
if (isOK(data)) {
|
||
|
|
for (var i = 0; i < data.data.data.length; i++) {
|
||
|
|
dataCache = data.data.data;
|
||
|
|
if( validater.empty( dataCache[i].lonLat ) ){
|
||
|
|
continue ;
|
||
|
|
}
|
||
|
|
if (dataCache[i].lonLat.indexOf(",") > -1) {
|
||
|
|
selfLocation(dataCache[i].lonLat.split(",")[0],
|
||
|
|
dataCache[i].lonLat.split(",")[1], i);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</html>
|