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.
240 lines
7.0 KiB
240 lines
7.0 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=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>
|
||
|
|
<!-- 下方部位 -->
|
||
|
|
<div style="background: #ecf0f5;">
|
||
|
|
|
||
|
|
<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>
|
||
|
|
<a class="layui-btn layui-btn-xs" style="margin-left: 20px;" onclick="window.open('<%=basePath%>/page/bigscreen/index.html?scene_id={5}')" >查看详情</a>
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="map_info_item" style="margin-left: 10px;">
|
||
|
|
<div class="map_info_item_sub">在线设备: <span style="font-size: 20px;color: #3499da;">{1}</span> 个</div>
|
||
|
|
<div class="map_info_item_sub">离线设备: <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">今日报警: <span style="font-size: 20px;">{3}</span> 个</div>
|
||
|
|
<div class="map_info_item_sub">未处理数: <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 , 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>
|