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

253 lines
8.5 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"%>
<link type="text/css" href="<%=basePath%>/css/oss/iot/monitor.css?<%=v%>" rel="stylesheet"/>
<style type="text/css">
</style>
</head>
<body>
<div>
<%@include file="moudle/header.jsp" %>
<span class="active hide">1</span>
<!-- 下方部位 -->
<div style="background: #ecf0f5;padding-top: 70px;">
<!-- 左边栏 -->
<div class="float-left index_theLeft" style="width:170px;">
<ul class="dashboard-menu scoll">
<c:forEach items="${info.data.getData()}" varStatus="status" var="obj">
<li onclick="changeScene(this)"
<c:if test="${id !=null }">
<c:if test="${obj.id ==id}">
class="active"
</c:if>
</c:if>
<c:if test="${id ==null }">
<c:if test="${status.index ==0}">
class="active"
</c:if>
</c:if>
sid="${obj.id}">
<span class="icon-stack-overflow"></span>&nbsp;${obj.name }
</li>
</c:forEach>
</ul>
</div>
<div class="mapContainer" >
<div class="app-container">
<div class="container-layout sceneList-info">
<div class="box join-device-box" >
<h3 class="get_sensor"><i class="icon-hdd-o"></i>&nbsp;感知传感点</h3>
<div class="sensor_info_container">
</div>
</div>
<div class="box join-device-box control-box-container" >
<h3 class="get_sensor"><i class="icon-anchor"></i>&nbsp;控制数据点</h3>
<div class="sensor_control_container">
</div>
</div>
<div class="box join-device-box video-box-container" >
<h3 class="get_sensor"><i class="icon-file-video-o"></i>&nbsp;视频监控</h3>
<div class="video_container">
</div>
</div>
</div>
</div>
</div>
<!-- 连续型 -->
<div id="template1" class="hide">
<div class="line" >
<div class="x3">
<img class="sensor_img" alt="image" src="<%=basePath%>/image/oss/iot/25.png">
<span class="sensor_name">{0}</span>
</div>
<div class="x3">
<p>当前状态:{1}</p>
<p>更新时间:{2}</p>
</div>
<div class="x3">
<span class="sensor-value">{3}</span>
</div>
<div class="x3 text-align-center">
<a href="<%=basePath%>/service/iot/sensors_detail?id={4}&sid={5}">查看详情 <span class="icon-angle-double-right"></span> </a>
</div>
</div>
</div>
<!-- 开关 -->
<div id="template2" class="hide">
<div class="line" >
<div class="x3">
<img class="sensor_img" alt="image" src="<%=basePath%>/image/oss/iot/27.png">
<span class="sensor_name">{0}</span>
</div>
<div class="x3">
<p>当前状态:{1}</p>
<p>更新时间:{2}</p>
</div>
<div class="x3">
<img style="margin:15px 0 0 30px;cursor: pointer;" tag="{7}" onclick="switchSensor(this,{4},{5})" {3} >
</div>
<div class="x3 text-align-center">
<a href="<%=basePath%>/service/iot/sensors_detail?id={4}&sid={6}">查看详情 <span class="icon-angle-double-right"></span> </a>
</div>
</div>
</div>
<!-- 离散 -->
<div id="template3" class="hide">
<div class="line" >
<div class="x3">
<img class="sensor_img" alt="image" src="<%=basePath%>/image/oss/iot/26.png">
<span class="sensor_name">{0}</span>
</div>
<div class="x3">
<p>当前状态:{1}</p>
<p>更新时间:{2}</p>
</div>
<div class="x3">
<span class="sensor-value">{3}</span>
</div>
<div class="x3 text-align-center">
<a href="<%=basePath%>/service/iot/sensors_detail?id={4}&sid={5}">查看详情 <span class="icon-angle-double-right"></span> </a>
</div>
</div>
</div>
<!-- 视频类型 -->
<div id="template4" class="hide">
<div class="line" >
<div class="x3">
<img class="sensor_img" alt="image" src="<%=basePath%>/image/oss/iot/610.png">
<span class="sensor_name">{0}</span>
</div>
<div class="x3">
<p>当前状态:{1}</p>
<p>更新时间:{2}</p>
</div>
<div class="x3">
{3}
</div>
<div class="x3 text-align-center">
<a href="<%=basePath%>/service/iot/video?id={4}&sid={5}">查看详情 <span class="icon-angle-double-right"></span> </a>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function changeScene(obj){
$(".dashboard-menu li").removeClass("active");
$(obj).addClass("active");
reflash( $(".dashboard-menu li.active").attr("sid"));
getVideoInfo($(".dashboard-menu li.active").attr("sid"));
}
/**
* 控制
*/
function switchSensor(obj,id,value){
var obj = $(obj) ;
var requestData = '',src='' ;
if( obj.attr("src").indexOf("loading") >-1 ){
return ;
}
var measure_type_value = obj.attr("tag");
if(convertControl(value,measure_type_value,'打开')){
requestData = convertControl(value,measure_type_value,'打开');
src = "<%=basePath%>/image/oss/iot/off_loading.gif";
}else{
requestData =convertControl(value,measure_type_value,'关闭') ;
src = "<%=basePath%>/image/oss/iot/on_loading.gif" ;
}
obj.attr("src",src);
commonAjax('PUT',localUrl+"/sensor/control/realtime/update", {id:id,request_sdata:requestData },function(data){
if(isOK(data)){
obj.attr("src",src);
}else{
tip(data.statusMsg);
}
});
}
$(function(){
reflash( $(".dashboard-menu li.active").attr("sid"));
getVideoInfo($(".dashboard-menu li.active").attr("sid"));
setInterval(function(){
reflash( $(".dashboard-menu li.active").attr("sid"));
},3000);
})
function getVideoInfo(sid){
postAjax(localUrl+"/page/video.json?pageSize=300&paged=1", {scene_id:sid},function(data){
$(".video_container").empty();
if(isOK(data)){
$(".video-box-container").show();
var dataT = data.data.data ;
dataCache = dataT ;
for(var i=0;i<dataT.length;i++){
$(".video_container").append(
$("#template4").html().format(disvalue(dataT[i].name,7),
dataT[i].data.status,
timeStamp2String(dataT[i].atime,'yy/MM/dd hh:mm:ss'),
"",dataT[i].id,sid));
}
}else{
$(".video-box-container").hide();
}
});
}
// 刷新传感器数据
function reflash(sid){
// 弹出列表传感器列表信息
postAjax(localUrl+"/page/sensor.json?pageSize=300&paged=1", {scene_id:sid},function(data){
$(".sensor_control_container,.sensor_info_container").empty();
if(isOK(data)){
var dataT = data.data.data ;
dataCache = dataT ;
var src1 = 'src="<%=basePath%>/image/oss/iot/on.png"';
var src2 = 'src="<%=basePath%>/image/oss/iot/off.png"';
var scene_id = $(".dashboard-menu li.active").attr("sid") ;
for(var i=0;i<dataT.length;i++){
if( dataT[i].iot_sensor_type == 25 ){
$(".sensor_info_container").append(
$("#template1").html().format(disvalue(dataT[i].name,7),
dataT[i].data.iot_sensor_status,
timeStamp2String(dataT[i].mtime,'yy/MM/dd hh:mm:ss'),
gdv(dataT[i].sdata,0)+" "+dataT[i].data.measure_unit_type,dataT[i].id,scene_id));
}else if( dataT[i].iot_sensor_type == 26 ){
$(".sensor_info_container").append($("#template3").html().format(disvalue(dataT[i].name,7),
dataT[i].data.iot_sensor_status,
timeStamp2String(dataT[i].mtime,'yy/MM/dd hh:mm:ss'),
gdv(dataT[i].data.measure_unit_type,'-'),dataT[i].id,scene_id));
}else if( dataT[i].iot_sensor_type == 27 ){
$(".sensor_control_container").append($("#template2").html().format(disvalue(dataT[i].name,7),
dataT[i].data.iot_sensor_status,
timeStamp2String(dataT[i].mtime,'yy/MM/dd hh:mm:ss'),
tom(convertControl( dataT[i].sdata,dataT[i].data.measure_unit_type_value,'打开'),src1,src2 ),dataT[i].id,dataT[i].sdata,scene_id,dataT[i].data.measure_unit_type_value ));
}
}
if( $(".sensor_control_container").html()=='' ){
showNodata(".sensor_control_container",100);
$(".control-box-container").hide();
}else{
$(".control-box-container").show();
}
if($(".sensor_info_container").html()==''){
showNodata(".sensor_info_container",100);
}
}else{
showNodata(".sensor_info_container,.sensor_control_container",100);
$(".control-box-container").hide();
}
});
}
</script>
</html>