物联网平台 +Web 组态
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.
 
 
 
 

261 lines
8.0 KiB

<%@ 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=3.0&ak=<%=ProConfig.Map.BAIDU_MAP_KEY%>"></script>
<link type="text/css" href="<%=basePath%>/css/oss/iot/index.css?<%=v%>" rel="stylesheet"/>
</head>
<body>
<div>
<%@include file="moudle/header.jsp" %>
<span class="active hide">home</span>
<!-- 下方部位 -->
<div style="background: #ecf0f5;padding-top: 70px;">
<!-- 左边栏 -->
<div class="float-left index_theLeft" style="width:80px;">
<ul class="dashboard-menu">
<li class="active">
<a href="<%=basePath%>/service/iot/index">
<span class="icon-paper-plane"></span>
<h5 style="margin-top: 9px;">项目地图</h5>
</a>
</li>
<li>
<a href="<%=basePath%>/service/iot/device_location">
<span class="icon-rocket"></span>
<h5 style="margin-top: 9px;">设备地图</h5>
</a>
</li>
<li>
<a href="<%=basePath%>/service/iot/app_status">
<span class="icon-institution"></span>
<h5 style="margin-top: 9px;">系统统计</h5>
</a>
</li>
</ul>
</div>
<div class="mapContainer" >
<div id="map"></div>
<div class="searchContainer">
<span class="map_search_span"></span>
</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 class="map_search_index">
<div class="map_search_frame">
<input type="text" class="map_search_frame_input" name="keyword" id="keyword" placeholder="输入项目名称搜索" >
<button type="button" class="map_search_frame_btn" onclick="search();"></button>
</div>
</div>
</div>
</div>
<div class="layer_notice hide">
<div style="width: 700px;padding: 20px;">
<div class="container-layout sceneList-info">
<div class="box join-device-box scoll" style="max-height: 500px;overflow: auto;">
<p>暂无传感器数据</p>
</div>
</div>
</div>
</div>
<div class="template2 hide">
<div class="map_info_window">
<div class="map_info_titles ">
<h3><img src="<%=basePath%>/image/oss/iot/pro.png" class="pro_icon">
<span style="vertical-align: middle;">{0}</span></h3>
</div>
<div class="map_info_item" style="margin-left: 10px;">
<div class="map_info_item_sub">在线设备:&nbsp;<span style="font-size: 20px;color: #3499da;">{1}</span> 个</div>
<div class="map_info_item_sub">离线设备:&nbsp;<span style="font-size: 20px;color: red;">{2}</span> 个</div>
<button class="button button-small bg-sub" onclick="forwardUrl('/iot/monitor?id={5}')" >监控中心</button>
</div>
<div class="map_info_item" style="margin-left: 10px;">
<div class="map_info_item_sub">今日报警:&nbsp;<span style="font-size: 20px;">{3}</span> 个</div>
<div class="map_info_item_sub">未处理数:&nbsp;<span style="font-size: 20px;color: red;">{4}</span> 个</div>
<button class="button button-small bg-sub" onclick="forwardUrl('/iot/alarm_manager')" >报警处理</button>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var map ,dataCache ;
/**
* 搜索
*/
function search(){
if( slv("#keyword")!='' && !validater.empty(dataCache) ){
for(var i=0;i<dataCache.length;i++){
if(dataCache[i]['name'].indexOf(slv("#keyword")) >-1 ){
map.centerAndZoom(new BMap.Point(dataCache[i].lon, dataCache[i].lat), 12);
}
}
}
}
$(function(){
$(".searchContainer").click(function(){
$(this).fadeOut(20);
$(".map_search_index").fadeIn(500);
})
$("#map").click(function(){
$(".map_search_index").fadeOut(20);
$(".searchContainer").fadeIn(500);
})
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"
}
}
]
});
map.centerAndZoom('武汉', 6); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
function showInfo(e){
theLocation(e.point.lng , e.point.lat);
}
function theLocation(lon,lat){
selfLocation(lon,lat);
}
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(obj.name , opts);
label.setStyle({
color : "black",
fontSize : "14px",
fontFamily:"微软雅黑"
});
map.addOverlay(label);
}
// 地址设置标记点
function selfLocation(lon,lat,obj){
// 显示文本
setTextShowMap(lon,lat,obj);
//单独设定图标的样式
var icon = new BMap.Icon('<%=basePath%>/image/oss/iot/location2.png', 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 ;
getAjax(localUrl+'/scene/detail?id=' + obj.id , function(data){
if(isOK(data)){
var sContent = $(".template2").html().format(obj.name +" ["+ obj.remark +"]" , data.data.online_device_num ,
data.data.all_device_num - data.data.online_device_num ,
data.data.all_alarm_num , data.data.unsolve_alarm_num , obj.id ) ;
var opts = {
offset: new BMap.Size(-3, -40)
}
var infoWindow = new BMap.InfoWindow(sContent,opts ); // 创建信息窗口对象
xxm.openInfoWindow(infoWindow);
}
} );
// console.log(obj);
});
mkr.addEventListener("mouseover", function (e) {
});
mkr.addEventListener("mouseout", function (e) {
$(".show_index").hide();
});
//将覆盖物添加到地图中
map.addOverlay(mkr);
//将地图的中心点更改为给定的点
map.panTo(lon,lat);
}
getMySceneData();
// 获取项目信息
function getMySceneData(){
postAjax(localUrl+"/page/scene.json?pageSize=300&paged=1", {},function(data){
if(isOK(data)){
var dataT = data.data.data ;
dataCache = dataT ;
for(var i=0;i<dataT.length;i++){
selfLocation(dataT[i].lon,dataT[i].lat,dataT[i]);
if(i==0){
map.panTo(dataT[i].lon,dataT[i].lat);
}
}
}
});
}
})
</script>
</html>