<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
|
<%
|
String path = request.getContextPath();
|
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
|
%>
|
<%@ taglib uri="/struts-tags" prefix="s"%>
|
<!DOCTYPE HTML>
|
<html>
|
<head>
|
<base href="<%=basePath%>">
|
|
<meta charset="UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
|
<title><s:text name="Ring_C_interface_state"/></title> <!-- 动环C接口状态 -->
|
<link rel="stylesheet" type="text/css" href="css/basic.css">
|
<link rel="stylesheet" type="text/css" href="css/dtManage.css">
|
<script type="text/javascript" src="js/frame.js"></script>
|
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
|
<script type="text/javascript" src="js/base.js"></script>
|
<style type="text/css">
|
#progress{
|
width:100%;
|
background-color:#fff;
|
margin-bottom:8px;
|
}
|
#progress .summary{
|
display: block;
|
width:100%;
|
height:30px;
|
line-height:30px;
|
text-indent:2em;
|
font-weight: bold;
|
background:url(image/table_th_bg.gif) repeat-x;
|
}
|
#progress .progress-bar{
|
position:relative;
|
width:100%;
|
height:30px;
|
border:1px solid #b8cfe5;
|
}
|
.b8cfe5{
|
background-color:#b8cfe5;
|
}
|
</style>
|
</head>
|
<body>
|
<!--头部内容开始-->
|
<div id="top">
|
<div id="top_cont">
|
<img src="image/top_img01.jpg" alt="" title="福建福光有限公司" />
|
<!--用户登录后显示用户名鼠标经过显示下拉菜单-->
|
<div id="sign_out">
|
<a href="javascript:void(0)" id="user_name"></a><span class="triangle"></span>
|
<ul>
|
<!-- 密码修改 -->
|
|
<li><a href="pwdChange.jsp" target="_self"><s:text
|
name="Change_password"></s:text>
|
</a>
|
</li>
|
<!-- 安全退出 -->
|
<li><a href="javascript:exitUser()" id="li_a"><s:text
|
name="Logging_out"></s:text>
|
</a>
|
</li>
|
|
</ul>
|
</div>
|
</div>
|
</div>
|
<!--头部内容结束-->
|
<!-- 主体内容 -->
|
<div id="main">
|
<!-- 导航内容开始 -->
|
<div id="nav"></div>
|
<!-- 导航内容结束 -->
|
<div id="progress">
|
<span class="summary">轮询电池组数据进度</span>
|
<!-- 进度条容器 -->
|
<div class="progress-bar"><!-- 进度条位置 --></div>
|
</div>
|
<!-- 表格固定的头部 -->
|
<div id="tb-head"></div>
|
<!-- 表格滚动的内容 -->
|
<div id="tb-body"></div>
|
<!-- 分页内容 -->
|
<div id="paging">
|
<a href="javascript:">导出</a>
|
<span id="current">当前1/4</span>
|
<span>每页<input type="text" id="number"/>条</span>
|
<a href="javascript:" id="set_up">设置</a>
|
<span id="total">数据总量 10</span>
|
<a href="javascript:" id="home">首页</a>
|
<a href="javascript:" id="pre">上一页</a>
|
<a href="javascript:" id="next_p">下一页</a>
|
<a href="javascript:" id="last">尾页</a>
|
<span id="cont">
|
转到<input type="text" id="page_num" />
|
<a href="javascript:" id="go">跳转</a>
|
</span>
|
</div>
|
</div>
|
<!-- 主体内容结束 -->
|
<!--清除浮动-->
|
<div class="clear"></div>
|
|
</body>
|
<script type="text/javascript" src="js/buildNav.js"></script>
|
<script type="text/javascript" src="js/createTab.js"></script>
|
<script type="text/javascript">
|
var permits;
|
<% Object obj=session.getAttribute("permits");
|
if(obj!=null){
|
String permits =obj.toString(); %>
|
permits=<%=permits%>;
|
//console.info(json);
|
<% } %>
|
|
//定义创建静止不变的进度条
|
//ele为进度条的容器（该容器必须为相对定位），initVal为int类型的是进度条的初始值(1-100)
|
function createProgressBar(ele,initVal){
|
if(initVal>100)
|
{
|
alert('请输入1~100内值');
|
return;
|
}
|
//获取容器的高度
|
var eleHt=ele.height();
|
//创建标签
|
var __divTxt=$('<div class="progress-txt">'+initVal+'%'+'</div>'); //进度文本框
|
var __divBar=$('<div class="chg-bar"></div>'); //进度条
|
// 将进度文本和进度条添加到容器中
|
ele.append(__divTxt);
|
ele.append(__divBar);
|
//对进度条文本的样式进行定义
|
ele.children('.progress-txt').css({
|
'position':'absolute',
|
'width':eleHt*2+'px',
|
'height':eleHt+'px',
|
'line-height':'30px',
|
'text-align':'center',
|
'color':'#000',
|
'top':'0',
|
'left':'50%',
|
'margin-left':'-'+eleHt+'px',
|
'backgroun-color':'none',
|
'z-index':'20'
|
});
|
//对进度条的样式进行设置
|
ele.children('.chg-bar').css({
|
'width':initVal+'%',
|
'height':eleHt+'px',
|
'background-color':'green'
|
});
|
}
|
//改变进度条的百分比
|
//ele为进度条的容器,val为进度条的进度值(该值为1-100的int类型)
|
//该函数必须在生成进度条后调用
|
function chgeBar(ele,val){
|
//判断val的值如果值大于100跳出该函数
|
if(val>100)
|
{
|
return;
|
}
|
//根据给定的值定义进度条文本内容
|
ele.children('.progress-txt').text(val+'%');
|
//根据给定的值定义进度条的长度
|
ele.children('.chg-bar').width(val+'%');
|
}
|
// 对进度条的设置
|
$(document).ready(function(){
|
createProgressBar($('#progress .progress-bar'),30);
|
});
|
//定义表格内的的数据
|
var ArrTh=new Array(); //表格头部数据
|
var ArrTd=new Array(); //表格内的数据
|
ArrTh=['电池组ID','机房/设备名称','电池组名称','通信技术','通信错误计数'];
|
//自定义表格的数据
|
for(var i=0;i<100;i++)
|
{
|
for(var k=0;k<ArrTh.length;k++)
|
{
|
var n=i*ArrTh.length+k;
|
ArrTd[n]=ArrTh[k]+i;
|
}
|
}
|
//初始化页面
|
$(document).ready(function(){
|
setUserName();
|
|
//对页面的高度进行初始化
|
var scrHt=$(window).height(); //获取浏览器可视区域的高度
|
var bodyHt=$('body').height(); //获取body的高度
|
var tbBodyHt=$('#tb-body').height(); //获取表格滚动的高度
|
$('#tb-body').height(tbBodyHt+scrHt-bodyHt); //定义表格的高度
|
//当页面的大小改变是调整页面的高度
|
$(window).resize(function(){
|
var newScrHt=$(this).height(); //获取浏览器可视区域的高度
|
var newBodyHt=$('body').height(); //获取表格滚动的高度
|
var newTbBodyHt=$('#tb-body').height(); //获取表格滚动的高度
|
$('#tb-body').height(newTbBodyHt+newScrHt-newBodyHt); //定义表格的高度
|
});
|
//根据表格头部数据创建表格
|
createTable('tb-head','tbFixed',ArrTh.length,ArrTh,ArrTd);
|
createTable('tb-body','tbScroll',ArrTh.length,ArrTh,ArrTd);
|
var hdWidth=$('#tb-head').width(); //头部的宽度
|
//让表格宽度等于头部宽度-20
|
$('#tb-head table').width(hdWidth-20);
|
$('#tb-body table').width(hdWidth-20);
|
//让表格头部和body左右滚动同步
|
$('#tb-body').scroll(function(){
|
var scrollX=$(this).scrollLeft();
|
$('#tb-head .tbFixed').css('left',-scrollX+'px')
|
});
|
//点击表格的行该行变色
|
$('#tb-body').on('click','table tbody tr',function(){
|
//去除行的class="b8cfe5"
|
$('#tb-body table tbody tr').each(function(){
|
$(this).removeClass('b8cfe5');
|
});
|
// 给点击的上添加class="b8cfe5"
|
$(this).addClass('b8cfe5');
|
});
|
});
|
</script>
|
</html>
|
