<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="GB2312">
    <title></title>
    <link href="css/style.css" title="style" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
    <script src="js/jquery-1.6.3.min.js"></script>
    <script src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/jquery-ui-datepicker.js"></script>

</head>
<body style="background: #F3F3F3">
<div >
    <div style="margin: 10px;margin-top: 15px; width:100%">
        <span>选择查询日期:</span> <span>开始 <input type="text" id="date_3" value="" /></span>
        <span>结束 <input type="text" id="date_4" value="" /></span>
        <span>&nbsp;&nbsp;&nbsp;显示方式
			<select id="showmode">
			<option value="0">拆线图</option>
			<!--<option value="1">饼状图</option>-->
			</select>
		</span>
        <span>&nbsp;&nbsp;&nbsp;查询方式
			<select id="qrymode" onchange="onqrymodechange(this)">
			<option value="0">按传感器查询</option>
			<!--<option value="1">按类型查询</option>-->
			</select>
		</span>&nbsp;&nbsp;&nbsp;
        <span id="qrysmmode">类别
			<select id="lsKind">
			</select>
		</span>
        <span><input type="button" class="dateBtn" value="实时查询">&nbsp;<input type="button" id="btn_qry" class="dateBtn2" value="历史查询"></span>
        <!--<span>&nbsp;&nbsp;<input type="button" id="btn_save" value="保存到excel" onclick="javascript:saveToExcel('almList')"></span>-->
		<br>
		<span style="color:red">实时查询只能查询一小时以内的数据，历史查询只能查询一小时以后的数据</span>
    </div>
    <span class="lond hide" style="text-align: center;margin-left: 200px;" ><img  src="img/loding.gif" ><span>正在查询数据库....</span></span>
    <div id="container2" style="width:100%;min-height: 500px;overflow: auto"></div>
	<br>
    <div id="container3" style="width:100%;min-height: 500px;overflow: auto"></div>
    <div style="position: fixed;left: 30px;top: 50px;" class="Almimg hide">
        <img src="img/ico_guanbi.png" class="btn_img_guanbi" style="position: absolute;right: 5px;top: 5px;cursor:pointer">
        <img id="AlmImg" src="img/loginBG.jpg" width="640" height="480" style="box-shadow: 8px 5px 5px #888888;">
    </div>
</div>
<a href='javascript:history.back()' class='back' style='color: #fff'>返回</a>
<script>

<% db_Open("/NandFlash/dbCfg.db3"); %>
<% itype = 1280; %>
var itype = <% write(itype);%>;;
var jtypes=<% db_QryAdv("select sm.Type,smt.Name, smt.Note from tbSM sm left join tbSMType smt on smt.Type=sm.Type where sm.State=0 and sm.DataMode=1",1); %>;
var jsids=<% db_QryAdv("select DISTINCT SID,Type,Name from tbSM where State=0 and DataMode=1",1); %>;
<% db_Close(); %>

$(function(){
	listSM()
	$("#date_3").datepicker();
	$("#date_3").focus();
	$("#date_4").datepicker();
})

function listSMType()
{
	var stbl = "";
	$.each(jtypes.recs,function(i,n){
		stbl+=" <option value=\""+n.Type*256+"\">"+n.Name+"("+n.Note+")</option>";
	})
    $("#lsKind").html(stbl);
}

function listSM()
{
	var stbl = "";
	$.each(jsids.recs,function(i,n){
		stbl+=" <option value=\""+(n.Type*256+n.SID)+"\">"+n.Name+"</option>";
	})
    $("#lsKind").html(stbl);
}

function saveToExcel(tableid){
    var curTbl = document.getElementById(tableid);  
    var oXL= new ActiveXObject("Excel.Application");
    var oWB= oXL.Workbooks.Add();
    var oSheet = oWB.ActiveSheet;
    var sel= document.body.createTextRange();
   sel.moveToElementText(curTbl);
   sel.select();
   sel.execCommand("Copy");
   oSheet.Paste();
   oXL.Visible = true;
}
$(".almbtn").live("click",function(){
  var src=$(this).attr("op");
  $("#AlmImg").attr("src",src);
  $(".Almimg").fadeToggle();
});
$(".btn_img_guanbi").click(function(){
    $(".Almimg").fadeOut()
});

var iXIA;
var dataarr=[];
var dataarr2=[];
var datatime=[];
$(".dateBtn").click(function(){
    index=1;
	var op="qry";
	var iv=$("#qrymode").val();
	if (iv != 0)
		op="qry2";
    var usel=document.getElementById('lsKind');
    var uselidx=usel.selectedIndex; //序号，取当前选中选项的序号
    var sid = usel.options[uselidx].value % 256;
	var itype = parseInt(usel.options[uselidx].value / 256);
	var showmode=$("#showmode").val();
    $.ajax({
        type: "POST",
        url: "../omdev/smdata-t.asp",
        data: "op="+op+"&itype="+itype+"&sid="+sid,
        dataType: "json",
        beforeSend: function() {
            $(".dateBtn").attr('disabled', 'disabled');
            $(".lond").show();
        },
        complete: function() {
            $(".lond").hide();
            $(".dateBtn").removeAttr("disabled");
        },
		error: function(e) { 
            $(".lond").hide();
            $(".dateBtn").removeAttr("disabled");
			alert("查询失败！"); 
		},
        success: function(msg){
            $(".dateBtn").removeAttr("disabled");
            $(".lond").hide();
			if (showmode == 0)
				showLineCharts(msg);
			else
				showPieCharts(msg);
        }
    });
});
$(".dateBtn2").click(function(){
    index=1;
    dataarr=[];
    dataarr2=[];
    datatime=[];
    var sDate=$("#date_3").val();
    var eDate=$("#date_4").val();
    var sArr = sDate.split("-");
    var eArr = eDate.split("-");
    var sRDate = new Date(sArr[0], sArr[1], sArr[2]);
    var eRDate = new Date(eArr[0], eArr[1], eArr[2]);
    var result = (eRDate-sRDate)/(24*60*60*1000);
    if(result>90){
        alert("最多只能查询90天以内的数据！");
        return false
    }
    if(sDate==""||eDate==""||sDate>eDate){
        alert("请输入正确的查询时间！");
        return false
    }
	var op="qry";
	var iv=$("#qrymode").val();
	if (iv != 0)
		op="qry2";
    var usel=document.getElementById('lsKind');
    var uselidx=usel.selectedIndex; //序号，取当前选中选项的序号
    var sid = usel.options[uselidx].value % 256;
	var itype = parseInt(usel.options[uselidx].value / 256);
	var showmode=$("#showmode").val();
    $.ajax({
        type: "POST",
        url: "../omdev/smdata.asp",
        data: "op="+op+"&starttime="+sDate+"&endtime="+eDate+"&itype="+itype+"&sid="+sid,
        dataType: "json",
        beforeSend: function() {
            $(".dateBtn2").attr('disabled', 'disabled');
            $(".lond").show();
        },
        complete: function() {
            $(".lond").hide();
            $(".dateBtn2").removeAttr("disabled");
        },
		error: function(e) { 
            $(".lond").hide();
            $(".dateBtn2").removeAttr("disabled");
			alert("查询失败！"); 
		},
        success: function(msg){
            $(".dateBtn2").removeAttr("disabled");
            $(".lond").hide();
			if (showmode == 0)
				showLineCharts(msg);
			else
				showPieCharts(msg);
        }
    });
});

function showLineCharts(msg)
{
	var data=msg;
	var q='';
	$.each(data.recs,function(i,n){
		dataarr.push(n.Tem/10 );
		dataarr2.push(n.Hum/10);
		datatime.push(n.DateUpd);
	});
	
	$('#container3').hide();
	$('#container2').highcharts({
		chart: {
			type: 'line',
			zoomType: 'x'
		},
		title: {
			text: '历史温湿度数据'
		},
		subtitle: {
			text: '湿度单位 %  ||  温度单位 ℃'
		},
		xAxis: {
			categories:datatime //指定x轴分组

		},
		yAxis: {
			title: {text: '数值'}
		},
		credits:enabled=false,
		series: [{name: '温度',data:dataarr}, {name: '湿度',data: dataarr2}]
	});
}

function showPieCharts(msg)
{
	var data=msg;
	var q='';
	var temdata=[9];
	var humdata=[9];
	var i = 0;
	$.each(data.recs,function(i,n){
		dataarr.push(n.Tem/10 );
		dataarr2.push(n.Hum/10);
		datatime.push(n.DateUpd);
	});
	
	for (i=0; i<8; i++)
	{
		temdata[i] = 0;
		humdata[i] = 0;
	}
	temdata[8] = dataarr.length;
	humdata[8] = dataarr2.length;
	
	//统计温度数据
	for (i=0; i<temdata[8]; i++)
	{
		if (dataarr[i] < 20)
			temdata[0]++;
		else if (dataarr[i] < 30)
			temdata[1]++;
		else if (dataarr[i] < 40)
			temdata[2]++;
		else if (dataarr[i] < 50)
			temdata[3]++;
		else if (dataarr[i] < 60)
			temdata[4]++;
		else if (dataarr[i] < 70)
			temdata[5]++;
		else if (dataarr[i] < 80)
			temdata[6]++;
		else
			temdata[7]++;
	}
	//统计湿度数据
	for (i=0; i<humdata[8]; i++)
	{
		if (dataarr2[i] < 20)
			humdata[0]++;
		else if (dataarr2[i] < 30)
			humdata[1]++;
		else if (dataarr2[i] < 40)
			humdata[2]++;
		else if (dataarr2[i] < 50)
			humdata[3]++;
		else if (dataarr2[i] < 60)
			humdata[4]++;
		else if (dataarr2[i] < 70)
			humdata[5]++;
		else if (dataarr2[i] < 80)
			humdata[6]++;
		else
			humdata[7]++;
	}
	//计算百分比
	for (i=0; i<8; i++)
	{
		temdata[i] = parseInt(temdata[i]/humdata[8]*100);
		humdata[i] = parseInt(humdata[i]/humdata[8]*100);
	}
	
	$('#container2').highcharts({
		chart: {
			type: 'pie'
		},
		title: {
			text: '历史温度数据(单位 ℃)'
		},
		tooltip: {//鼠标移动到每个饼图显示的内容  
			pointFormat: '{point.name}: {point.percentage}%</b>',  
			percentageDecimals: 1,  
			formatter: function() {  
				return this.point.name+':'+parseInt((this.point.percentage))+"%";  
			}  
		}, 
		credits:enabled=false,
		series: [{  
            type: 'pie',  
            name: '温度',
			data: [
				['<20℃',temdata[0]], 
				['20~30℃',temdata[1]],
				['30~40℃',temdata[2]],
				['40~50℃',temdata[3]],
				['50~60℃',temdata[4]],
				['60~70℃',temdata[5]],
				['70~80℃',temdata[6]],
				['>80℃',temdata[7]]
			]
		}]
	});
	
	$('#container3').highcharts({
		chart: {
			type: 'pie'
		},
		title: {
			text: '历史湿度数据(单位 %RH)'
		},
		tooltip: {//鼠标移动到每个饼图显示的内容  
			pointFormat: '{point.name}: {point.percentage}%</b>',  
			percentageDecimals: 1,  
			formatter: function() {  
				return this.point.name+':'+parseInt((this.point.percentage))+"%";  
			}  
		}, 
		credits:enabled=false,
		series: [{  
            type: 'pie',  
            name: '温度',
			data: [
				['<20%RH',humdata[0]], 
				['20~30%RH',humdata[1]],
				['30~40%RH',humdata[2]],
				['40~50%RH',humdata[3]],
				['50~60%RH',humdata[4]],
				['60~70%RH',humdata[5]],
				['70~80%RH',humdata[6]],
				['>80%RH',humdata[7]]
			]
		}]
	});
	$('#container3').show();
}
function onqrymodechange(obj)
{
  var iv=$("#qrymode").val();
  if (iv != 0)//按时间段
  {
	//$("#qrysmmode").text("类别");
	listSMType();
  }
  else//按前端点位
  {
	//$("#qrysmmode").text("设备");
	listSM()
  }
}
</script>
</body>
</html>
