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

</head>
<body style="background: #F3F3F3">
<div>
  <table width="98%" style='margin-left: 30px'>
    <tr>
    <td width="300px" style="text-align: center;"><img src="img/ico-batt.png" style="width: 70%;text-align: center;"></td>
    <td>
    <table width='100%'>
        <tr><td style='border: none'> <h1 class='smName'></h1></td></tr>
      <tr><td style='width: 200px;'>基本信息</td><td>SID:<span class='SID1029'></span>&nbsp;&nbsp;&nbsp;编址:<span class='Addr1029'></span>&nbsp;&nbsp;&nbsp;数据端口:<span class='Port1029'></span></td></tr>
      <tr><td style='width: 200px;'>更新时间</td><td><span class='DateUpd1029'></span></td></tr>
      <tr><td style='width: 200px;'>监测项状态</td><td><span class='State1029'></span></td></tr>
    </table>
    </td>
    </tr>
  </table>
	<div id="chartcontainer" style="height:98%;margin-left: 30px"></div>
    <table width='98%' style='margin-top: 30px;margin-left: 30px'>
	<tr>
	<td>
	<table class="append1" width='100%'>
    </table>
	</td>
	<td>
	<table class="append2" width='100%'>
    </table>
	</td>
	</tr>
	</table>
</div>
<a href='javascript:history.back()' class='back' style='color: #fff'>返回</a>
<script>
var itype=1029;
var tescape= 30000,time;
  
<% db_Open("/NandFlash/tmp/dbDat0.db3"); %>
var sid=<% write(sid);%>;
var jbase=<% db_QryAdv("select * from tbBattEB90 where SID="+sid,0); %>;
var jlist=<% db_QryAdv("select * from tbBattEb90Val where SID="+sid,0); %>;
var jname = <% db_QryAdv("select Name from tbSM where SID="+sid,0); %>
<% db_Close(); %>

$(".smName").html(jname.recs[0].Name);

$(function(){
    time=setInterval(ajax,tescape)
});
function ajax(){
    $.ajax({
        type: "POST",
        url: "omdev/smdat0.asp",
        data: "itype="+itype+"&sid="+sid+"&batval=0",
        dataType:"json",
        success: function(msg){
            listB(msg)
        }
    });
    $.ajax({
        type: "POST",
        url: "omdev/smdat0.asp",
        data: "itype="+itype+"&sid="+sid+"&batval=1",
        dataType:"json",
        success: function(msg){
            list3(msg)
        }
    });
}
listB(jbase);
function listB(data){
    $.each(data.recs,function(i,n){
        $(".SID1029").html(n.SID);
        $(".Addr1029").html(n.Addr);
        $(".Port1029").html(n.Port%256);
        $(".DateUpd1029").html(n.DateUpd);
        $(".State1029").html(window.parent.parseState(n.State));
    });
}
list3(jlist);
function list3(data){
    var q1='';
    var q2='';
	var ireccnt = data.reccnt/2;
	var xAxis = [];
	var yVols = [];
	var yRegs = [];
	var yTems = [];
	
	q1 += "<tr><td style='width: 50px;'>序号</td><td>测量地址</td><td>电压(单位: V)</td><td>内阻(单位: mΩ) </td><td>温度(单位: ℃)</td><td>工作状态</td></tr>"
	q2 += "<tr><td style='width: 50px;'>序号</td><td>测量地址</td><td>电压(单位: V)</td><td>内阻(单位: mΩ) </td><td>温度(单位: ℃)</td><td>工作状态</td></tr>"

    $.each(data.recs,function(i,n){
        var ist = n.State;
        n.State="未在线";
        if((ist&0x03)==0){
          n.State="在线";
        }
		var sVol = "";
		if (ist&0x04)
			sVol = "(告警)";
			
		var sReg = "";
		if (ist&0x08)
			sReg = "(告警)";
			
		var sTem = "";
		if (ist&0x10)
			sTem = "(告警)";
			
		if (i < ireccnt)
			q1 += "<tr><td>"+(i+1)+"</td><td>"+n.Addr+"</td><td>"+(n.Vol/1000)+sVol+"</td><td>"+(n.Reg/1000)+sReg+"</td><td>"+(n.Tem/10)+sTem+"</td><td>"+n.State+"</td></tr>"
		else
			q2 += "<tr><td>"+(i+1)+"</td><td>"+n.Addr+"</td><td>"+(n.Vol/1000)+sVol+"</td><td>"+(n.Reg/1000)+sReg+"</td><td>"+(n.Tem/10)+sTem+"</td><td>"+n.State+"</td></tr>"
		xAxis.push(n.Addr);
		yVols.push(n.Vol/1000);
		yRegs.push(n.Reg/1000);
		yTems.push(n.Tem/10);
	});
	if ((data.reccnt % 2) != 0)
		q2 += "<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>"
    $(".append1").html(q1)
    $(".append2").html(q2)
	
    $('#chartcontainer').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '电池内阻数据柱状图'
        },
        xAxis: {
            categories: xAxis
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            column: {
                // 关于柱状图数据标签的详细配置参考：https://api.hcharts.cn/highcharts#plotOptions.column.dataLabels
                dataLabels: {
                    enabled: true,
                    // verticalAlign: 'top', // 竖直对齐方式，默认是 center
                    inside: false
                }
            }
        },
        series: [{
            name: '电压',
            data: yVols
        }, {
            name: '内阻',
            data: yRegs
        }, {
            name: '温度',
            data: yTems
        }]
    });
    $("span:contains('故障'),span:contains('告警'),span:contains('未')").addClass("red").removeClass("ger");
    $("span:contains('正常')").addClass("ger").removeClass("red");
}
</script>
</body>
</html>