<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>单体电压柱状图</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
<link rel="stylesheet" href="mobilCss/jquery.mobile-1.1.0.min.css" />
|
|
<link href="mobilCss/jquery.jqplot.css" rel="stylesheet" type="text/css" />
|
<script type="text/javascript" src="mobilJs/jquery-1.7.1.min.js"></script>
|
<script type="text/javascript" src="../js/echarts.js"></script>
|
<script type="text/javascript" src="mobilJs/jquery.mobile-1.1.0.min.js"></script>
|
<script type="text/javascript" src="mobilJs/base.js"></script>
|
<style type="text/css">
|
.myChart {
|
width: 300px;
|
height: 400px;
|
}
|
|
h1{
|
font-size:1.5em;
|
}
|
|
.full-width{
|
width: 100% !important;
|
padding-left:0.7em;
|
}
|
.full-width:active {
|
background-color: #33cccc;
|
}
|
.full-width a{
|
display: block;
|
width: 100% !important;
|
}
|
|
#bar{
|
width:500px;
|
height: 300px;
|
}
|
#alwaysRight{
|
float: right !important;
|
}
|
.clear{
|
width: 100%;
|
height:1px;
|
clear:both;
|
}
|
</style>
|
|
</head>
|
<body>
|
<div id="pageBarChart" data-role="page" data-rockncoder-jspage="manageBarChart">
|
<header data-role="header" data-position="fixed" data-theme="a">
|
<a href="control.html" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-left" target="_top" style="padding:0.5em 0.5em; background-image: -webkit-gradient(linear,left top,left bottom,from(#444),to(#2d2d2d));
|
background-image: -webkit-linear-gradient(#444,#2d2d2d);
|
background-image: -moz-linear-gradient(#444,#2d2d2d);
|
background-image: -ms-linear-gradient(#444,#2d2d2d);
|
background-image: -o-linear-gradient(#444,#2d2d2d);
|
background-image: linear-gradient(#444,#2d2d2d); border:1px solid #111; color: #fff; text-decoration: none;">返回</a>
|
|
<h1 id="biaoti">单体电压</h1>
|
<div data-role="collapsible" data-type="horizontal" class="ui-btn-right" style=" background-color: none; color: #333333; text-decoration: none;" >
|
<h1 id="alwaysRight">其他</h1>
|
<div class="clear"></div>
|
<div style="margin-top:-0.5em; background-color: #e9e9e9;">
|
<h1 class="full-width">
|
<a href="temperatureMbargraph.html" target="_top" style="text-decoration:none; background-color:none;">温度</a>
|
</h1>
|
<h1 class="full-width">
|
<a href="internalresistanceMbargraph.html" target="_top" style="text-decoration:none;">内阻</a>
|
</h1>
|
<h1 class="full-width">
|
<a href="conductanceMbargraph.html" target="_top" style="text-decoration:none;">电导</a>
|
</h1>
|
<!-- <h1 class="full-width">
|
<a href="conductancepctMbargraph.html" target="_top" style="text-decoration:none;">电导百分比(%)</a>
|
</h1>
|
<h1 class="full-width">
|
<a href="cellconnectorMbargraph.html" target="_top" style="text-decoration:none;">连接条阻抗</a>
|
</h1> -->
|
</div>
|
</div>
|
</header>
|
<div id="bar"></div>
|
|
<div data-role="footer" data-position="fixed" data-theme="a">
|
<div data-role="navbar">
|
<ul>
|
<li><a href="index.html" target="_top" data-role="button" data-icon="home" data-transition="slide">首页</a></li>
|
<li><a href="voltageM.html" target="_top" data-role="button" data-icon="grid" data-transition="slide">列表图</a></li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div data-role="main" class="ui-content">
|
<div class="ui-grid-c">
|
<div class="ui-block-a">最大<span class="max"> </span></div>
|
<div class="ui-block-b">最小<span class="min"> </span></div>
|
<div class="ui-block-c">平均<span class="avg"> </span></div>
|
<div class="ui-block-d">累加和<span class="leijiasum"> </span></div>
|
</div>
|
<script type="text/javascript" src="mobilJs/echarts.js"></script>
|
<script type="text/javascript">
|
/* $('#alwaysRight').tap(function(){
|
$('.clear').remove();
|
var clearDiv = $('<div class="clear"></div>');
|
$(this).after(clearDiv);
|
}); */
|
var mon_vol = new Array(); //电压
|
var mon_tmp = new Array(); //温度
|
var mon_res = new Array(); //内阻
|
var mon_ser = new Array(); //电导
|
var mon_conn_res = new Array(); //连接条
|
var mon_ser_percent = new Array(); //电导百分比
|
var mon_num = new Array(); //电池组序号
|
var barCon = document.getElementById('bar');
|
var myChart = echarts.init(barCon);
|
var batt;
|
|
var inputs=$('input[name="datas"]');
|
$(document).ready(function(){
|
var temp=getCookie("batt");
|
if(temp.length>0){
|
batt=eval("("+temp+")");
|
}
|
|
findvol();
|
reload1();
|
});
|
|
|
function findvol() {
|
$.post("Batt_rtdataAction_serchByCondition","json="+JSON.stringify({BattGroupId:batt.BattGroupId}),function(data){
|
var model = eval("("+data.result+")");
|
//model = eval("("+model.result+")");
|
datas = model.data;
|
$("#biaoti").text("电压("+batt.BattGroupName+")");//标题添加电池组编号
|
|
mon_vol = new Array(); //电压
|
mon_tmp = new Array(); //温度
|
mon_res = new Array(); //内阻
|
mon_ser = new Array(); //电导
|
mon_conn_res = new Array(); //连接条
|
mon_ser_percent = new Array(); //电导百分比
|
mon_num =new Array(); //电池组序号
|
for(var i=0;i<datas.length;i++){
|
mon_vol.push(datas[i].mon_vol.toFixed(3)); //电压
|
mon_tmp.push(datas[i].mon_tmp.toFixed(1)) ; //温度
|
mon_res.push(datas[i].mon_res.toFixed(3)); //内阻
|
mon_ser.push(datas[i].mon_ser.toFixed(0)); //电导
|
mon_conn_res.push(datas[i].mon_vol.toFixed(3)); //连接条
|
mon_ser_percent.push((batt.MonSerStd==0?0:(datas[i].mon_ser*100/batt.MonSerStd)).toFixed(1));
|
mon_num.push(""+datas[i].mon_num); //电池组序号
|
}
|
if(myChart.getOption()==undefined){
|
createEcharts(myChart, mon_num, mon_vol);
|
console.info(myChart.getOption());
|
}else{
|
reflushEcharts(mon_vol);
|
}
|
//console.info(mon_ser_percent);
|
insertdata(mon_vol);
|
});
|
}
|
|
|
|
function insertdata (mon_vol){
|
for(var i=0;i<inputs.length;i++){
|
inputs[i].value=mon_vol[i];
|
}
|
//console.info(inputs);
|
}
|
|
function reload1(){
|
window.setInterval(findvol,4000);
|
}
|
|
function createEcharts(ele,yarr,xarr){
|
var ht = $.mobile.getScreenHeight()- 90;
|
var wd= $(window).width()-10;
|
$('#bar').height(ht).width(wd);
|
ele.resize();
|
//$('.show').height(document.documentElement.clientHeight - 65 + 'px').width(width);
|
createBar(ele, yarr, xarr);
|
|
}
|
|
// 当横屏和竖屏切换时更改面板的高度
|
$(window).on("orientationchange",function(){
|
setTimeout(function() {
|
var srnWidth = $(window).width()-5;
|
var srnHt = $.mobile.getScreenHeight()-90;
|
$('#bar').width(srnWidth).height(srnHt);
|
myChart.resize();
|
reflushEcharts(myChart.getOption().series[0].data);
|
}, 200);
|
});
|
</script>
|
</body>
|
|
</html>
|
