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
401 lines
12 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="<%=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> <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> [ <span type-name="measure_unit_type" class="width-auto" type-value='ch'></span> ]
|
||
|
|
</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>
|