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.
345 lines
9.6 KiB
345 lines
9.6 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>
|
||
|
|
<title><%=ProConfig.PROJECT_NAME %></title>
|
||
|
|
<%@ include file="/WEB-INF/wechat/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">
|
||
|
|
.title-container{
|
||
|
|
height: 50px;
|
||
|
|
line-height: 48px;
|
||
|
|
text-align: center;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-container .width20{
|
||
|
|
font-weight: 540;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-container .width33.active{
|
||
|
|
border-bottom: 2px solid #46addb;
|
||
|
|
color:#46addb;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weui-panel.weui-panel_access{
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
.weui-cells{
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.weui-cells label{
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
.weui-cells span{
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
#main{
|
||
|
|
background: white;
|
||
|
|
padding-top: 10px ;
|
||
|
|
}
|
||
|
|
.span-btn{
|
||
|
|
border: 1px solid #aaa;
|
||
|
|
padding: 1px 8px;
|
||
|
|
border-radius: 5px;
|
||
|
|
color:#666;
|
||
|
|
font-weight: 500 ;
|
||
|
|
margin-left: 2px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
.span-btn.active {
|
||
|
|
background: #aaa ;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.span-btn1{
|
||
|
|
padding: 1px 8px;
|
||
|
|
border-radius: 5px;
|
||
|
|
font-weight: 500 ;
|
||
|
|
margin-left: 2px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #3499da;
|
||
|
|
border: 1px solid #3499da;
|
||
|
|
}
|
||
|
|
.span-btn:HOVER{
|
||
|
|
background: #aaa ;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.sensor_detail_title{
|
||
|
|
padding: 10px 0;
|
||
|
|
margin-top:20px;
|
||
|
|
background: #fff;
|
||
|
|
border-bottom: 1px solid #d9d9d9;
|
||
|
|
padding-left: 10px;
|
||
|
|
}
|
||
|
|
.data-container{
|
||
|
|
padding: 10px 15px;
|
||
|
|
border: 1px solid #d9d9d9;
|
||
|
|
margin: 10px 5px;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 6px;
|
||
|
|
}
|
||
|
|
.closebtn{
|
||
|
|
text-align: center;
|
||
|
|
padding: 10px;
|
||
|
|
background: #3499da;
|
||
|
|
color: #fff;
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
z-index: 100;
|
||
|
|
top: 0;left: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="t-c title-info" onclick="backup()">
|
||
|
|
<span>传感信息</span>
|
||
|
|
<div class="back" style=" position: fixed;top: 0px;" >
|
||
|
|
返回</div>
|
||
|
|
</div>
|
||
|
|
<div style="height: 50px;"></div>
|
||
|
|
<div class="clear title-container">
|
||
|
|
<div class="float-left width33 pointer " url="/wiot/sensor?id=">
|
||
|
|
<span>基本信息</span>
|
||
|
|
</div>
|
||
|
|
<div class="float-left width33 pointer active" url="/wiot/history?id=">
|
||
|
|
<span>数据曲线</span>
|
||
|
|
</div>
|
||
|
|
<div class="float-left width33 pointer" url="/wiot/trigger?id=">
|
||
|
|
<span>触发器信息</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="body-container">
|
||
|
|
<input type="hidden" id="sensorId">
|
||
|
|
|
||
|
|
<div class="sensor_detail_title">
|
||
|
|
<span 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-btn1 float-right mr-10 open-popup" data-target="#historydata"
|
||
|
|
>查看数据</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:'$#sensorId$' }
|
||
|
|
,x:'atimestr',y:'sdata',type:'line',id:'main',beforeEchart:'beforeEchart' " ></div>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="historydata" class="weui-popup__container">
|
||
|
|
<div class="weui-popup__overlay"></div>
|
||
|
|
<div class="weui-popup__modal">
|
||
|
|
<p class='close-popup closebtn pointer'><i style="color: white;margin-top: -2px;" class="weui-icon-cancel"></i> 返回图表</p>
|
||
|
|
<p style=" width: 100%;height: 60px;"></p>
|
||
|
|
<div class="content-container">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<%@ include file="/WEB-INF/wechat/iot/common/pager.jsp"%>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="template0" class="hide">
|
||
|
|
<div class="data-container clear">
|
||
|
|
<span style="color:#3499da;"> {0} </span>
|
||
|
|
<span style="color:#999;" class="float-right">{1}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function backup(){
|
||
|
|
forward('/wiot/device?id='+ GetQueryString("did"));
|
||
|
|
}
|
||
|
|
$(function(){
|
||
|
|
|
||
|
|
function getData(n){
|
||
|
|
postAjax(localUrl+"/page/sensor/history.json?pageSize=15&paged="+n, data,function(data){
|
||
|
|
if(isOK(data)){
|
||
|
|
var dataT = data.data.data ;
|
||
|
|
for(var i=0;i<dataT.length;i++){
|
||
|
|
$(".content-container").append( $("#template0").html().format(
|
||
|
|
getStrData(dataT[i].iot_sensor_type,dataT[i].data.measure_unit_type, dataT[i].sdata)
|
||
|
|
, time2Str(dataT[i].atime) ) );
|
||
|
|
}
|
||
|
|
loading = false;
|
||
|
|
}
|
||
|
|
// 传data就可以，分页的
|
||
|
|
pagerinit(data,".content-container");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getStrData(iot_sensor_type ,measure_unit_type,sdata ){
|
||
|
|
if( iot_sensor_type == 25 ){
|
||
|
|
return sdata + " "+measure_unit_type ;
|
||
|
|
}else{
|
||
|
|
return measure_unit_type ;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 查询条件
|
||
|
|
var data = {sensor_id: GetQueryString("id") } ;
|
||
|
|
var paged = 1;
|
||
|
|
getData(paged++);
|
||
|
|
var loading = false; //状态标记
|
||
|
|
$(".weui-popup__modal").infinite().on("infinite", function() {
|
||
|
|
if (loading)
|
||
|
|
return;
|
||
|
|
loading = true;
|
||
|
|
setTimeout(function() {
|
||
|
|
// 获取商品信息
|
||
|
|
getData(paged++);
|
||
|
|
}, 500);
|
||
|
|
});
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
$(function(){
|
||
|
|
$("#sensorId").val( GetQueryString("id") );
|
||
|
|
|
||
|
|
$(".title-container .width33").click(function(){
|
||
|
|
forward( $(this).attr("url") + GetQueryString("id") +"&did="+ GetQueryString("did") );
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
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='时间';
|
||
|
|
if(validater.empty(obj.option)){
|
||
|
|
obj.option = {} ;
|
||
|
|
}
|
||
|
|
obj.option.dataZoom = {
|
||
|
|
show : false
|
||
|
|
}
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
|
||
|
|
function searchData(obj,type){
|
||
|
|
var object = {
|
||
|
|
url:'/list/sensor/history',
|
||
|
|
data:{sensor_id:'$#sensorId$'} ,
|
||
|
|
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)' +')');
|
||
|
|
}
|
||
|
|
object.option.dataZoom = {
|
||
|
|
show : false
|
||
|
|
}
|
||
|
|
echartInit(object);
|
||
|
|
if(!validater.empty(object.success) ){
|
||
|
|
object.success();
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
$.toptip("该时间段内，暂无数据", 'warning');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</html>
|