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

401 lines
12 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="<%=basePath%>/lib/echarts/echarts.common.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lpro/echarts.util.js"></script>
<style type="text/css">
.index_theLeft ul {
width: 100%;
padding: 0px;
margin: 0px;
overflow: auto;
}
.index_theLeft li {
list-style: none;
position: relative;
padding: 15px 0 15px 20px;
border-bottom: 1px solid #f9f9f9;
cursor: pointer;
}
.returnlink {
margin-right: 30px;
cursor: pointer;
color: #18bbfc;
}
.index_theLeft li.active , .index_theLeft li:HOVER{
background: #f9f9f9 !important;
color: #333 !important;
}
.index_theLeft li span,.index_theLeft li h5{
text-align: center;
color: #333 !important;
}
.index_theLeft li.active, .index_theLeft li:HOVER {
color: #333 !important;
}
.dashboard-menu li{
color: #333 !important;
}
.mapContainer{
height: 550px;width:100%;padding-left:170px;
}
.dashboard-menu{
border-top:1px solid #ecf0f5;
}
.app-container{
background: #f2f2f2;width: 100%;border-top:1px solid #ecf0f5;
}
.sceneList-info{
margin-left: 0px;
/* margin-right: 40px; */
padding-top: 10px;
}
h3{
margin: 15px 0;
}
.box-white {
width: 97%;
min-width: 897px;
padding-bottom: 0;
margin: 0 auto;
}
.box {
padding: 10px;
padding-top:1px;
border-left: 1px solid #d2d6de;
border-right: 1px solid #d2d6de;
border-bottom: 1px solid #d2d6de;
}
.box {
border: 0!important;
box-shadow: 0 0 2px 1px rgba(13,5,9,.08)!important;
}
.box {
position: relative;
border-radius: 3px;
background: #fff;
border-top: 3px solid #d2d6de;
/* padding-bottom: 20px; */
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.sensor_detail_title{
padding: 15px 0;
}
.jui-echart{
padding: 10px;
border: 1px solid #dadada;
}
.detail-line{
padding: 3px 0;
}
.span-btn{
border: 1px solid #aaa;
padding: 1px 8px;
border-radius: 5px;
color:#666;
font-weight: 500 ;
margin-left: 2px;
cursor: pointer;
}
.span-btn.active {
background: #aaa ;
color: #fff;
}
.span-btn:HOVER{
background: #aaa ;
color: #fff;
}
.dashboard-menu li{
display: none ;
}
</style>
</head>
<body>
<div>
<div style="background: #ecf0f5;">
<!-- 左边栏 -->
<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="forwardUrl('/iot/sensors_detail?id=${obj.id}&sid=${sceneId}')"
<c:if test="${obj.id == sensorId}">
class="active"
</c:if>
nid="${obj.node_id }"
sid="${obj.id}">
<span class="icon-codepen"></span>&nbsp; <span style="color: #333;">${obj.name }</span>
</li>
</c:forEach>
</ul>
</div>
<div class="mapContainer" >
<div class="app-container">
<div class="container-layout sceneList-info">
<div class="box join-device-box">
<div class="pt-10 pl-5">
<div class="clearfloat">
<div class="clearfloat liner">
<h4 class="pb-10" style="border-bottom: 2px solid #18bbfc">
<span>传感器详情</span>
<span class="float-right returnlink " onclick="returnBack()">返回 <span class="icon-sign-out"></span></span>
</h4>
<input type="hidden" class="sensor_id">
</div>
<div class="float-left" style="width:70%;">
<div class="sensor_detail_title">
<span>数据图表</span>
<span style="margin-left: 60%;" class="span-btn" onclick="searchData(this,0);">1H</span>
<span class="span-btn" onclick="searchData(this,1);" >1D</span>
<span class="span-btn" onclick="searchData(this,2);">本月</span>
<span class="span-btn" onclick="searchData(this,3);">上月</span>
<!-- <span class="span-btn" onclick="searchData(this,4);">更多</span> -->
</div>
<div id="main" class="jui-echart" style="width: 100%;height:260px;"
data-options="url:'/page/sensor/history?pageSize=100&paged=1',data:{sensor_id:'$.sensor_id$'}
,x:'atimestr',y:'sdata',type:'line',id:'main',beforeEchart:'beforeEchart' " ></div>
</div>
<div class="float-left" style="width:20%;" >
<div style="margin-left: 20px;padding-left: 5px;border-bottom: 1px solid #dadada;" class="sensor_detail_title">传感器信息</div>
<div class="jui-detail_get" style="padding-top: 30px;margin-left: 30px;" data-options=" url:'/sensor?id=$.sensor_id$' " >
<div class="detail-line">
<span>设备名称:</span>
<span type-name="node_name" type-value='h'></span>
</div>
<div class="detail-line">
<span>传感器名称:</span>
<span type-name="name" type-value='h'></span>
</div>
<div class="detail-line">
<span>传感器数值:</span>
<span type-name="sdata" class="width-auto" type-value='h'></span> [&nbsp;<span type-name="measure_unit_type" class="width-auto" type-value='ch'></span>&nbsp;]
</div>
<div class="detail-line">
<span>传感器类型:</span>
<span type-name="iot_sensor_type" type-value='ch'></span>
</div>
</div>
</div>
</div>
<div class="mt-10">
<div class="sensor_detail_title">触发器信息</div>
<div id="init-table" class="jui-table" config-option="'url':'/page/trigger',
param:{from_sensor_id: '$.sensor_id$' },
'columns':[
{name:'序号','type':'seq','value':'seq','width':'4%'},
{name:'名称','value':'name','width':'10%'},
{name:'关联传感器','value':'from_sensor_name','width':'10%'},
{name:'触发条件类型','type':'category','value':'iot_trigger_condition_type','width':'15%'},
{name:'参数','value':'condition_params','width':'6%'},
{name:'检测间隔(秒)','value':'trigger_inteval_time','width':'10%'},
{name:'状态',value:'iot_trigger_status',type:'self',value_callback:'statusFunc' ,'width':'5%'},
{ name:'操作', type:'self', value_callback :'value_function','width':'8%'}
]" >
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function returnBack(){
forwardUrl("/iot/monitor?id=${sceneId}",1000);
}
function beforeEchart(obj,data){
if(data.length>0){
if(data[0].iot_sensor_type == 25){
if(data[0].measure_unit_type == 21){
obj.yunit='温度';
}else if(data[0].measure_unit_type == 22){
obj.yunit='湿度';
}else if(data[0].measure_unit_type == 23){
obj.yunit='光照';
}else if(data[0].measure_unit_type == 71){
obj.yunit='%';
}
obj.yunit_c=data[0].data.measure_unit_type;
}else if(data[0].iot_sensor_type == 27||data[0].iot_sensor_type == 26){
var tmp = data[0].data.measure_unit_type_value.split(",");
obj.yunit='状态';
obj.stepStyle=true;
var option ={ yAxis: {
name:obj.yunit,
min: tmp[tmp.length-1].split(":")[0] ,
max: tmp[0].split(":")[0],
axisLabel : {
formatter:function(value){
var texts = [];
for(var i=0;i<tmp.length;i++){
if(value==tmp[i].split(":")[0]){
texts.push(tmp[i].split(":")[1]);
}
}
return texts;
}
}
}};
obj.option=option;
}
}
obj.xunit='时间';
return obj;
}
$(function(){
$(".sensor_id").val(GetQueryString("id"));
var nid = $("li.active").attr("nid") ;
$("li[nid*='"+nid+"']").show();
})
function value_function(data,seq){
if(data.iot_trigger_status ==44 ){
return "<button onclick='t_modify(this,"+data.id+",43)' class='button button-small border-blue'>启动</button> "+
"<button onclick='t_delete(this,"+data.id+")' class='button button-small border-red'>删除</button>";
}else{
return "<button onclick='t_modify(this,"+data.id+",44)' class='button button-small border-blue'>停用</button> "+
"<button onclick='t_delete(this,"+data.id+")' class='button button-small border-red'>删除</button>";
}
}
function value_function(data,seq){
if(data.iot_trigger_status ==44 ){
return "<span tag='启动' onclick='t_modify(this,"+data.id+",43)' class='self-icon icon-play'></span>"+
"<span tag='删除' onclick='t_delete(this,"+data.id+")' class='self-icon icon-bitbucket'></span>";
}else{
return "<span tag='暂停' onclick='t_modify(this,"+data.id+",44)' class='self-icon icon-pause'></span>"+
"<span tag='删除' onclick='t_delete(this,"+data.id+")' class='self-icon icon-bitbucket'></span>";
}
}
function t_modify(obj,i,status){
var data ={ id:i,iot_trigger_status:status};
commonAjax("PUT",localUrl+"/trigger?id="+i, data,function(data){
if(data.status == status_code.OK){
tip("成功");
setTimeout(function(){
closeAll();
$("#init-table").tableAdaptor();
},1000)
}else{
tip(data.statusMsg);
}
});
}
function statusFunc(val,data,seq){
if(val==44){
return "<span class='red'>停止</span>";
}else{
return "<span class='blue'>正常</span>";
}
}
function t_delete(obj,i){
lcomfirm('是否确定删除该触发器?',function(){
commonAjax("DELETE",localUrl+"/trigger?id="+i, "",function(){
tip("删除成功");
setTimeout(function(){
closeAll();
$("#init-table").tableAdaptor();
},1000)
});
})
}
function searchData(obj,type){
var object = {
url:'/list/sensor/history',
data:{sensor_id:'$.sensor_id$'} ,
x:'atimestr',
y:'sdata',
type:'line',
id:'main',
beforeEchart:'beforeEchart'
} ;
if(type == 4){
tip("即将上线");
return ;
}else if(type == 0){
var date = new Date();
date.setHours(date.getHours()-1);
object.data["start_time"] = date.Format("yyyy/MM/dd hh:mm:ss") ;
object.data["end_time"] = (new Date()).Format("yyyy/MM/dd hh:mm:ss") ;
}else if(type == 1){
var date = new Date();
date.setDate(date.getDate()-1);
object.data["start_time"] = date.Format("yyyy/MM/dd hh:mm:ss") ;
object.data["end_time"] = (new Date()).Format("yyyy/MM/dd hh:mm:ss") ;
object.data.query_interval_type = 2 ;
}else if(type == 2){
var date = new Date();
date.setMonth(date.getMonth()-1);
object.data["start_time"] = date.Format("yyyy/MM/dd hh:mm:ss") ;
object.data["end_time"] = (new Date()).Format("yyyy/MM/dd hh:mm:ss") ;
object.data.query_interval_type = 3 ;
}else if(type == 3){
var date = new Date();
var lastMonth = new Date();
date.setMonth(date.getMonth()-2);
lastMonth.setMonth((new Date()).getMonth()-1);
object.data["start_time"] = date.Format("yyyy/MM/dd hh:mm:ss") ;
object.data["end_time"] = lastMonth.Format("yyyy/MM/dd hh:mm:ss") ;
object.data.query_interval_type = 3 ;
}
$(".span-btn").removeClass("active");
$(obj).addClass("active");
echart(object);
}
function echart(object){
commonAjax( gdv(object.method,"POST") ,
localUrl + format_property(object.url) , ( (object.method == 'GET')?'': ( objecter( gdv(object.data,{}),'$') ) ) ,function(data){
if(data.status == status_code.OK){
var dataTemp ;
if(validater.empty(data.data)){
return ;
}
if( format_property(object.url).indexOf("paged")>-1 ){
dataTemp = data.data.data ;
}else{
dataTemp = data.data ;
}
var x_value =[];
var y_value =[];
for(var i=0;i< dataTemp.length; i++){
x_value.push(dataTemp[dataTemp.length-i-1][object.x] );
y_value.push(dataTemp[dataTemp.length-i-1][object.y])
}
object.x=x_value;
object.y=y_value;
if(!validater.empty(object.beforeEchart)){
object = eval('('+ object.beforeEchart+'(object,dataTemp)' +')');
}
echartInit(object);
if(!validater.empty(object.success) ){
object.success();
}
}else{
tip("该时间段内,暂无数据");
}
});
}
</script>
</html>