<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<title>设备实时告警查询</title>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<link href="css/basic.css" rel="stylesheet">
|
<link rel="stylesheet" href="css/BrdwMaint.css">
|
<link rel="stylesheet" type="text/css" href="css/loading.css">
|
<link rel="stylesheet" href="css/nocontent.css">
|
<style type="text/css">
|
body {
|
overflow-x: hidden !important;
|
}
|
#tbHead table{
|
width: 100%;
|
}
|
#tbBrdw {
|
overflow: auto;
|
}
|
#tbBrdw tbody tr:hover {
|
background-color: #efefef;
|
}
|
#cardOption .con_table {
|
overflow: auto;
|
}
|
#tbBrdw table {
|
width: 100%;
|
}
|
#tbBrdw table tbody {
|
color: #ff0000;
|
}
|
#tbBrdw table tbody tr.active {
|
background-color: #a0b5fc !important;
|
}
|
#cardOption input[type="checkbox"] {
|
vertical-align: middle;
|
}
|
#cardOption table thead input[type="checkbox"]{
|
margin-left: 4px;
|
}
|
.filter {
|
position: fixed;
|
top: 50%;
|
right: 2px;
|
z-index: 999;
|
border: 1px solid #dbdbdb;
|
}
|
.filter a {
|
display: block;
|
padding: 0 10px;
|
height: 32px;
|
line-height: 32px;
|
text-decoration: none;
|
}
|
.filter a:hover {
|
background-color: #2f97ff;
|
color: #FFFFFF;
|
}
|
</style>
|
</head>
|
<body>
|
<!--头部内容开始-->
|
<div id="top">
|
<div id="top_cont">
|
<img src="image/tieta-logo.gif" alt="" title="福建福光有限公司" />
|
<!--用户登录后显示用户名鼠标经过显示下拉菜单-->
|
<div id="sign_out">
|
<a href="#" id="user_name">霍东伟<span class="triangle"></span></a>
|
<ul>
|
<li><a href="pwdChange.html" target="_blank">密码修改</a></li>
|
<li><a href="#">安全退出</a></li>
|
</ul>
|
</div>
|
<!--结束-->
|
</div>
|
</div>
|
<!--头部内容结束-->
|
<!--导航开始-->
|
<div id="nav"></div>
|
<!-- 主体内容 -->
|
<div id="main">
|
<!-- 表格固定的头部 -->
|
<div id="tbHead"></div>
|
<!-- 表格滚动的部分 -->
|
<div id="tbBrdw"></div>
|
<!-- 分页内容 -->
|
<div id="paging">
|
<a href="javascript:" class="search">查询</a>
|
<a href="javascript:">导出</a>
|
<a href="javascript:" class="card-opt">表格选项</a>
|
当前<span id="current">1/1</span>
|
<span>每页<input type="text" value="10" id="number"/>条</span>
|
数据总量：<span style="margin-left:2px" id="total">0</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" value="1"/>
|
<a href="javascript:" id="go">跳转</a>
|
</span>
|
</div>
|
</div>
|
<!-- 表格选项内容 -->
|
<div id="cardOption">
|
<span>选项</span>
|
<div class="tbHead"></div>
|
<div class="con_table"></div>
|
<div class="input_container">
|
<input type="button" class="en-card-opts" value="确定">
|
<input type="button" class="out-card-opts" value="返回">
|
</div>
|
</div>
|
<!-- 整体灰色遮罩层 -->
|
<div id="allShade"></div>
|
<script type="text/javascript" src="js/loading.js"></script>
|
<script type="text/javascript" src="js/nocontent.js"></script>
|
<script type="text/javascript" src="js/buildNav.js"></script>
|
<script type="text/javascript" src="js/createTab.js"></script>
|
<script type="text/javascript" src="js/right-menu.js"></script>
|
<script type="text/javascript">
|
var arrTh = new Array(); // 表格的头部
|
var arrTd = new Array(); // 表格的表体
|
var tblStatus = new Array(); // 表格状态数组
|
var tblOptsHd = new Array(); // 表格选项头部
|
var tblOptsBd = new Array(); // 表格选项数组
|
arrTh = ['编号','设备ID','设备名称','设备IP','所在机房名称','告警事件','告警等级','告警确认','告警确认时间','告警开始时间','告警结束时间'];
|
tblOptsHd = ['编号', '选项', '是否选择'];
|
var tblHd = $('#tbHead');
|
var tblBd = $('#tbBrdw');
|
|
// 根据表格的头部生成表格选项和表格的状态数组
|
$(function() {
|
centerDiv($('#cardOption'));
|
// 遍历表格头部生成状态数组
|
for(var i = 0; i < arrTh.length; i++) {
|
tblStatus.push(1);
|
var temp = new Array();
|
temp.push(i+1);
|
temp.push(arrTh[i]);
|
temp.push('<input type="checkbox" checked="checked"/>');
|
|
tblOptsBd.push(temp);
|
}
|
var cardHd = $('#cardOption .tbHead');
|
var cardBd = $('#cardOption .con_table');
|
createCard(cardHd, tblOptsHd, tblOptsBd);
|
createCard(cardBd, tblOptsHd, tblOptsBd);
|
});
|
|
// 点击条件筛选更改表格的高度
|
$(function() {
|
var checkCon = $('#eleInfor .checkCon').height(); // 获取条件筛选的高度
|
var isShow = true; // 标记筛选条件是否显示
|
$('#eleInfor .summary').click(function() {
|
var tblHt = $('#tbBrdw').height(); // 获取表格容器的高度
|
if(isShow) {
|
$('#eleInfor .checkCon').slideUp(function(){
|
$('#tbBrdw').height(tblHt + checkCon);
|
isShow = false;
|
});
|
}else {
|
$('#tbBrdw').height(tblHt - checkCon);
|
$('#eleInfor .checkCon').slideDown();
|
isShow = true;
|
}
|
});
|
});
|
|
// 生成表格
|
$(function() {
|
createAllTbl(tblHd, tblBd, arrTh, arrTd, tblStatus); // 生成默认表格
|
|
$('#paging .search').click(function() {
|
loading.showLoading();
|
arrTd = [
|
'1','100009','FBS-9100s-3','117.123.27.110','湖北省-鄂州市-机房10-设备11','通讯故障','一级告警','<input type="checkbox">','2012-12-08 00:00:00','2012-12-08 00:00:00','2012-12-08 00:00:00',
|
'2','100009','FBS-9100s-3','117.123.27.110','湖北省-鄂州市-机房10-设备11','通讯故障','一级告警','<input type="checkbox">','2012-12-08 00:00:00','2012-12-08 00:00:00','2012-12-08 00:00:00',
|
'3','100009','FBS-9100s-3','117.123.27.110','湖北省-鄂州市-机房10-设备11','通讯故障','一级告警','<input type="checkbox">','2012-12-08 00:00:00','2012-12-08 00:00:00','2012-12-08 00:00:00',
|
'4','100009','FBS-9100s-3','117.123.27.110','湖北省-鄂州市-机房10-设备11','通讯故障','一级告警','<input type="checkbox">','2012-12-08 00:00:00','2012-12-08 00:00:00','2012-12-08 00:00:00',
|
'5','100009','FBS-9100s-3','117.123.27.110','湖北省-鄂州市-机房10-设备11','通讯故障','一级告警','<input type="checkbox">','2012-12-08 00:00:00','2012-12-08 00:00:00','2012-12-08 00:00:00',
|
'6','100009','FBS-9100s-3','117.123.27.110','湖北省-鄂州市-机房10-设备11','通讯故障','一级告警','<input type="checkbox">','2012-12-08 00:00:00','2012-12-08 00:00:00','2012-12-08 00:00:00',
|
'7','100009','FBS-9100s-3','117.123.27.110','湖北省-鄂州市-机房10-设备11','通讯故障','一级告警','<input type="checkbox">','2012-12-08 00:00:00','2012-12-08 00:00:00','2012-12-08 00:00:00',
|
'8','100009','FBS-9100s-3','117.123.27.110','湖北省-鄂州市-机房10-设备11','通讯故障','一级告警','<input type="checkbox">','2012-12-08 00:00:00','2012-12-08 00:00:00','2012-12-08 00:00:00',
|
'9','100009','FBS-9100s-3','117.123.27.110','湖北省-鄂州市-机房10-设备11','通讯故障','一级告警','<input type="checkbox">','2012-12-08 00:00:00','2012-12-08 00:00:00','2012-12-08 00:00:00',
|
'10','100009','FBS-9100s-3','117.123.27.110','湖北省-鄂州市-机房10-设备11','通讯故障','一级告警','<input type="checkbox">','2012-12-08 00:00:00','2012-12-08 00:00:00','2012-12-08 00:00:00',
|
'11','100009','FBS-9100s-3','117.123.27.110','湖北省-鄂州市-机房10-设备11','通讯故障','一级告警','<input type="checkbox">','2012-12-08 00:00:00','2012-12-08 00:00:00','2012-12-08 00:00:00',
|
'12','100009','FBS-9100s-3','117.123.27.110','湖北省-鄂州市-机房10-设备11','通讯故障','一级告警','<input type="checkbox">','2012-12-08 00:00:00','2012-12-08 00:00:00','2012-12-08 00:00:00'
|
];
|
if(arrTd.length == 0) {
|
noContent.showNoContent();
|
}
|
createAllTbl(tblHd, tblBd, arrTh, arrTd, tblStatus);
|
loading.hideLoading();
|
});
|
|
// 点击表格选项显示表格选项弹出框
|
$('#paging .card-opt').click(function() {
|
var checkboxList = $('#cardOption .con_table table tbody').find('input[type="checkbox"]');
|
// 根据状态数组修改表格选项复选框的状态
|
for(var i = 0; i < tblStatus.length; i++) {
|
if(tblStatus[i] == 1) {
|
checkboxList.eq(i).prop('checked', true);
|
}else{
|
checkboxList.eq(i).prop('checked', false);
|
}
|
}
|
$('#cardOption').show();
|
$('#allShade').show();
|
});
|
|
// 点击取消和确定隐藏表格选项窗口和遮罩层
|
$('#cardOption .en-card-opts').click(function() {
|
// 根据表格选项的复选框设置状态数组
|
var checkboxList = $('#cardOption .con_table table tbody').find('input[type="checkbox"]');
|
checkboxList.each(function(i) {
|
if($(this).is(':checked')) {
|
tblStatus[i] = 1;
|
}else{
|
tblStatus[i] = 0;
|
}
|
});
|
createAllTbl(tblHd, tblBd, arrTh, arrTd, tblStatus);
|
$('#cardOption').hide();
|
$('#allShade').hide();
|
});
|
$('#cardOption .out-card-opts').click(function() {
|
$('#cardOption').hide();
|
$('#allShade').hide();
|
});
|
});
|
|
// 当表格可以左右滚动时触发事件
|
$(function() {
|
$('#tbBrdw').scroll(function() {
|
var scrollLeft = $(this).scrollLeft();
|
$('#tbHead table').css('left', -scrollLeft);
|
});
|
});
|
|
// 点击表格的行
|
var isKeyDown = false;
|
$(function() {
|
// 屏蔽鼠标默认右键菜单
|
var tbBrdw = document.getElementById('tbBrdw');
|
tbBrdw.oncontextmenu=function(){
|
return false;
|
};
|
|
//添加右键内容
|
var rightMenu=[
|
{txt:'全部选中',cla:'all-pitch'},
|
{txt:'确认告警', cla:'en-warn'},
|
{txt:'取消告警', cla:'off-warn'},
|
{txt:'删除',cla:'del-pitch'}
|
];
|
|
// 给表格添加自己的右键菜单
|
$('#tbBrdw').on('mousedown','table tbody tr',function(e){
|
var actLen = $('#tbBrdw').find('.active').length;
|
console.info(actLen);
|
if (e.which == 3) {
|
if(actLen < 2) {
|
$('#tbBrdw table tbody tr').removeClass('active');
|
$(this).addClass('active');
|
}
|
createRightMenu(rightMenu);
|
setTimeout(function () {
|
var disX = (e || event).clientX + 10; //获取鼠标点击的横坐标
|
var disY = (e || event).clientY + 10; // 获取鼠标点击的纵坐标
|
var scrollY = $(document).scrollTop();
|
$('#rightMenu').css('top', disY + scrollY + 'px');
|
$('#rightMenu').css('left', disX + 'px');
|
$('#rightMenu').show();
|
}, 30);
|
}
|
});
|
// 点击页面中的任意一个位置清除右键菜单
|
$('body').on('click', 'div', function() {
|
$('#rightMenu').remove();
|
});
|
|
// 点击全部选中
|
$('body').on('click', '.all-pitch', function() {
|
$('#tbBrdw table tbody tr').addClass('active');
|
});
|
// 点击选中设备告警的条
|
$('#tbBrdw').on('click', 'table tbody tr', function() {
|
if(!isKeyDown) {
|
$('#tbBrdw table tbody tr').removeClass('active');
|
$(this).addClass('active');
|
}else {
|
if($(this).hasClass('active')) {
|
$(this).removeClass('active');
|
}else{
|
$(this).addClass('active');
|
}
|
}
|
|
});
|
|
// 监听键盘事件
|
$(document).keydown(function(e){
|
if(e.which == 17) {
|
isKeyDown = true;
|
}
|
});
|
$(document).keyup(function(e) {
|
if(e.which == 17) {
|
isKeyDown = false;
|
}
|
});
|
});
|
|
|
// 初始化页面高度
|
$(function() {
|
pageInit();
|
$(window).resize(function() {
|
pageInit();
|
makeTblSame(tblHd, tblBd);
|
});
|
});
|
|
// 初始化页面内容
|
function pageInit() {
|
var winHt = $(window).height();
|
var bodyHt = $('body').height();
|
var tblHt = $('#tbBrdw').height();
|
var shiftHt = winHt - bodyHt;
|
if(shiftHt > 0) {
|
$('#tbBrdw').height(shiftHt + tblHt);
|
}
|
}
|
|
// 生成表格的头部和表体
|
function createAllTbl (header, body, arrTh, arrTd, status) {
|
console.info(status);
|
var newArrTh = new Array();
|
var newArrTd = new Array();
|
newArrTh = getArrTh(status, arrTh);
|
newArrTd = getArrTd(status, arrTd);
|
createTablenew(header, newArrTh, newArrTd);
|
createTablenew(body, newArrTh, newArrTd);
|
|
// 定义表格的头部和表体宽度一致
|
makeTblSame(header, body)
|
|
// 定义表格滚动距离一致
|
var scrollLeft = body.scrollLeft();
|
header.find('table').css('left', -scrollLeft);
|
}
|
|
// 设置表格的上下两个部分的内容对齐
|
function makeTblSame(header, body) {
|
// 定义表格的头部和表体宽度一致
|
var bdWidth = body.find('table').width();
|
header.find('table').width(bdWidth);
|
}
|
|
//对于弹出串口进行定位(position:fixed)
|
function centerDiv(ele){
|
//获取屏幕的高度对弹出窗口进行定位
|
var srnHei=$(window).height(); //屏幕的高度
|
var eleHei=ele.height(); //弹出窗口的高度
|
var topHei=parseInt((srnHei-eleHei)/2); //获取居中高度
|
ele.css({
|
'top':topHei
|
});
|
}
|
|
//创建右键菜单内容
|
function createRightMenu(obj){
|
//创建前清除右键内容
|
$('#rightMenu').remove();
|
//创建标签
|
var __div=$('<div id="rightMenu" style="background-color:#fff;"></div>');
|
var __a=new Array();
|
//根据obj的值生成a标签并添加到div中
|
for(var i in obj)
|
{
|
__a[i]=$('<a href="javascript:;" class="'+obj[i].cla+'">'+obj[i].txt+'</a>');
|
__div.append(__a[i]);
|
}
|
//将div添加到body中
|
$('body').append(__div);
|
//定义菜单的样式
|
$('#rightMenu').css({
|
'display':'none',
|
'position':'absolute',
|
'top':'200px',
|
'left':'0',
|
'border-top':'1px solid #25aacd',
|
'border-left':'1px solid #25aacd',
|
'border-right':'1px solid #25aacd'
|
});
|
$('#rightMenu a').css({
|
'display':'block',
|
'padding':'6px 14px',
|
'text-decoration':'none',
|
'text-align':'center',
|
'color':'#000000',
|
'border-bottom':'1px solid #9bbaf3'
|
});
|
$('#rightMenu a').hover(function(){
|
$(this).css({
|
'background-color': '#9999f7',
|
'color': '#fff'
|
});
|
},function(){
|
$(this).css({
|
'background-color': '#fff',
|
'color': '#000'
|
});
|
});
|
}
|
</script>
|
</body>
|
</html>
|
