<%@ 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 name="viewport" content="width=device-width, initial-scale=1">
|
<meta http-equiv="pragma" content="no-cache">
|
<meta http-equiv="cache-control" content="no-cache">
|
<meta http-equiv="expires" content="0">
|
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
|
<meta http-equiv="description" content="This is my page">
|
<title><s:text name="Dev_connect_info_query"/></title> <!-- 设备连接信息查询 -->
|
<link rel="stylesheet" type="text/css" href="pages/css/base.css">
|
<link rel="stylesheet" type="text/css" href="jqueryui/jquery-ui.css">
|
<link rel="stylesheet" type="text/css" href="src/css/layui.css">
|
<link rel="stylesheet" type="text/css" href="pages/css/mylayui.css">
|
<style>
|
.dataTypeCont {
|
width: 160px;
|
text-align: center;
|
}
|
.dataTypeCont .layui-form-switch {
|
min-width: 70px;
|
margin-top: 4px;
|
}
|
</style>
|
</head>
|
<body>
|
<!--头部内容开始-->
|
<jsp:include page="Top.jsp" flush="true"/>
|
<!--头部内容结束-->
|
<!--导航开始-->
|
<jsp:include page="nav.jsp" flush="true"/>
|
<!-- 主体内容 -->
|
<div class="layui-page-container">
|
<!-- 页面主题内容 -->
|
<div class="layui-page-content" style="position: relative;">
|
<div class="tbl-filter" lay-filter="tblFilter" style="position: absolute;z-index: 891;top: 8px; left: 15px">
|
<div class="layui-form layui-form-pane" lay-filter="tblFilter">
|
设备ID：
|
<div class="layui-inline">
|
<input class="layui-input" name="id" id="devId" autocomplete="off">
|
</div>
|
<button class="layui-btn layui-btn-sm layui-btn-normal" id="searchById"><i class="fa fa-search"></i>搜索</button>
|
</div>
|
</div>
|
<!-- 表格内容 -->
|
<table id="pageTbl" lay-filter="pageTbl"></table>
|
</div>
|
<div class="data-footer">
|
<!-- 分页内容 -->
|
<div id="paging">
|
<a href="javascript:" class="search"><s:text name="Search"/></a> <!-- 查询 -->
|
<a href="javascript:" id="export_table"><s:text name="Export"/></a> <!-- 导出 -->
|
<span id="current">1/1</span>
|
<span><s:text name="Each_page"/><input type="text" id="number" value="10"/><s:text name="Item"/></span>
|
<s:text name="Total_data"/><!-- 数据总量 --><span id="total">0</span>
|
<a href="javascript:" id="page_home"><s:text name="HomePage"/></a>
|
<a href="javascript:" id="page_pre"><s:text name="Page_Up"/></a>
|
<a href="javascript:" id="page_next_p"><s:text name="Page_Down"/></a>
|
<a href="javascript:" id="page_last"><s:text name="End_Page"/></a>
|
<span id="cont">
|
<s:text name="Goto"/><input type="text" id="page_num" value="1"/>
|
<a href="javascript:" id="page_go"><s:text name="Jump"/></a>
|
</span>
|
</div>
|
</div>
|
</div>
|
<script type="text/html" id="breakTypeTpl">
|
{{# if(d.break_type == 0){ }}
|
<span style="color: #01AAED">成功连接</span>
|
{{# }else if(d.break_type == 1) { }}
|
<span style="color: #FF5722">找不到对应设备ID</span>
|
{{# }else if(d.break_type == 2) { }}
|
<span style="color: #FF5722">通信异常断开</span>
|
{{# }else { }}
|
<span style="color: #FFB800">未知类型</span>
|
{{# } }}
|
</script>
|
<script type="text/html" id="doThings">
|
{{# if(d.stationName) { }}
|
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="control">实时数据</a>
|
{{# } }}
|
</script>
|
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
|
<script type="text/javascript" src="js/echarts.js"></script>
|
<script type="text/javascript" src="jqueryui/jquery-ui.min.js"></script>
|
<script type="text/javascript" src="src/layui.js"></script>
|
<script type="text/javascript" src="pages/js/mylayui.js"></script>
|
<script type="text/javascript" src="pages/js/common.js"></script>
|
<script type="text/javascript">
|
layui.use(['form', 'table', 'layer', 'element'], function() {
|
var table = layui.table; // 获取表格模块
|
var form = layui.form; // 获取表单模块
|
var layer = layui.layer; // 获取弹出框模块
|
var element = layui.element; // 获取元素操作模块
|
|
// 表格模块
|
var tOptions = {
|
elem: '#pageTbl'
|
,toolbar: true
|
,defaultToolbar: []
|
,cellMinWidth: 80
|
,cols: [[
|
{field: 'Staionanme', title: '机房名称', align: 'center', width: 450}
|
,{field:'dev_id', title:'设备id', align:'center', width: 150}
|
,{field:'battgroup_id1', title:'电池组1', align:'center', width: 150}
|
,{field:'battgroup_id2', title:'电池组2', align:'center', width: 150}
|
,{field:'battgroup_id3', title:'电池组3', align:'center', width: 150}
|
,{field:'battgroup_id4', title:'电池组4', align:'center', width: 150}
|
,{field:'connet_time', title:'设备连接时间', align:'center'}
|
,{field:'dev_comm_runtime', title: '设备运行时间', align: 'center'}
|
,{field:'break_type_txt', title:'连接状态', align:'center', templet: '#breakTypeTpl', width: 150}
|
,{field: "doThings", fixed: 'right', toolbar: '#doThings', title:'操作', align: 'center', width: 120}
|
]]
|
,data:[]
|
,limit: 1000
|
,page: false
|
,height: 'full-190'
|
};
|
|
// 生成表格数据
|
table.render(tOptions);
|
|
// 点击表格中的工具按钮
|
table.on('tool(pageTbl)', function(obj){
|
//console.log(obj);
|
switch(obj.event) {
|
case 'control':
|
targetControl(obj);
|
break;
|
};
|
});
|
|
// 跳转到实时界面
|
function targetControl(obj) {
|
var data = obj.data;
|
var pageName = "control.jsp"; // 跳转页面名称
|
var province = data.stationName1; // 省
|
var city = data.stationName2; // 市
|
var county = data.stationName5; // 区县
|
var home = data.stationName; // 机房名称
|
var battid = data.BattGroupId; // 电池组id
|
// 实现跳转
|
window.open(skipUrl(pageName, province, city, county, home, battid));
|
}
|
|
var Page = new TblPage();
|
Page.set(1, 0, 10);
|
//console.log(Page);
|
|
// 查询后台数据
|
search(createSearchParam(), true);
|
function search(temp, newLoad) {
|
var load;
|
if(newLoad) {
|
load = layer.load(1);
|
}
|
//console.log(temp);
|
$.ajax({
|
type:'post',
|
async:true,
|
url: 'App_bts_comm_taskAction!serchByCondition',
|
data: "json="+JSON.stringify(temp),
|
dataType: 'json',
|
success:function(result) {
|
var model = JSON.parse(result.result);
|
console.info(model);
|
var arr_td = new Array();
|
if(model.code == 1){
|
for(var i=0;i<model.data.length;i++){
|
var _data = model.data[i];
|
var _tmp = {};
|
// console.log(_data);
|
_tmp.Staionanme = _data.stationName?_data.stationName:'——';
|
_tmp.stationName1 = _data.stationName1; // 省
|
_tmp.stationName2 = _data.stationName2; // 市
|
_tmp.Staionanme5 = _data.stationName5; // 区县
|
_tmp.stationName = _data.stationName; // 机房
|
_tmp.dev_id = _data.dev_id;
|
_tmp.battgroup_id1 = _data.battgroup_id1;
|
_tmp.battgroup_id2 = _data.battgroup_id2;
|
_tmp.battgroup_id3 = _data.battgroup_id3;
|
_tmp.battgroup_id4 = _data.battgroup_id4;
|
_tmp.connet_time = _data.connet_time;
|
_tmp.dev_comm_runtime = _data.dev_comm_runtime;
|
_tmp.break_type = _data.break_type;
|
_tmp.break_type_txt = createDeviceType(_data.break_type);
|
arr_td.push(_tmp);
|
Page.setAll(_data.num);
|
}
|
}
|
//console.info(tOptions);
|
tOptions.data = arr_td;
|
// 生成表格数据
|
table.render(tOptions);
|
setPageVal(Page);
|
layer.close(load);
|
},error:function(e){
|
layer.close(load);
|
}
|
});
|
|
}
|
|
//获取设备连接的状态
|
function createDeviceType(dev_type){
|
var str_type = "未知类型";
|
//console.info(typeof dev_type);
|
switch(dev_type){
|
case 0:str_type="成功连接";break;
|
case 1:str_type="找不到对应设备ID";break;
|
case 2:str_type="通信异常断开";break;
|
default:str_type="未知类型";
|
}
|
return str_type;
|
}
|
|
|
// 构造查询条件
|
function createSearchParam() {
|
var temp = {
|
FBSDeviceId: 0
|
,page: Page.getPage()
|
};
|
// console.log(temp);
|
return temp;
|
}
|
|
// 点击上方的设备id搜索
|
$('#searchById').click(function() {
|
var dev_id = $('#devId').val();
|
|
// 判断数据合法新
|
if(!isNumber(dev_id)) {
|
layer.msg('存在违法字符串');
|
}else{
|
dev_id = dev_id.length==0?0:dev_id;
|
Page.setCurr(1);
|
// 构造查询条件
|
var temp = {
|
FBSDeviceId: dev_id
|
,page: Page.getPage()
|
};
|
search(temp, true);
|
}
|
});
|
|
|
//点击查询按钮
|
$('#paging .search').click(function(){
|
search(createSearchParam(), false);
|
});
|
|
//首页
|
$('#page_home').click(function(){
|
if(Page != undefined){
|
if(Page.curr != 1){
|
Page.setCurr(1);
|
search(createSearchParam(), true);
|
}
|
}
|
});
|
|
//点击上一页
|
$("#page_pre").click(function(){
|
if(Page != undefined){
|
if(Page.curr > 1){
|
Page.setCurr(Page.curr-1);
|
search(createSearchParam(), true);
|
}
|
}
|
});
|
|
//点击下一页
|
$("#page_next_p").click(function(){
|
if(Page != undefined){
|
if(Page.num > Page.curr){
|
Page.setCurr(Page.curr+1);
|
search(createSearchParam(), true);
|
}
|
}
|
});
|
|
//尾页
|
$('#page_last').click(function(){
|
if(Page != undefined){
|
if(Page.curr < Page.num){
|
Page.setCurr(Page.num);
|
search(createSearchParam(), true);
|
}
|
}
|
});
|
|
//设置每页行数
|
$('#number').blur(function(){
|
var value=$('#number').val();
|
//当输入的数大于0时
|
if(value>0){
|
if(value != Page.size){
|
Page.setSize(parseInt(value));
|
Page.setCurr(1);
|
}
|
}else{
|
//当输入非法数字时
|
alert("请输入合法的数字"); /* 请输入合法的整数 */
|
$('#number').val(Page.size);
|
}
|
});
|
|
//点击跳转
|
$('#page_go').click(function(){
|
var tarpage=$('#page_num').attr('value');
|
if(tarpage > Page.num){
|
Page.setCurr(Page.num);
|
search(createSearchParam(), true);
|
}else if(tarpage > 0 && tarpage!= Page.curr){
|
Page.setCurr(parseInt(tarpage));
|
search(createSearchParam(), true);
|
}
|
|
});
|
|
// 设置页面Page
|
function setPageVal(page) {
|
$('#current').text(page.curr+'/'+page.num);
|
$('#total').text(page.all);
|
}
|
|
//点击导出报表
|
$('#export_table').click(function(){
|
var tblData = GLOBAL.Table.cTblData(tOptions);
|
GLOBAL.Table.expExcel.xls(tblData);
|
});
|
|
//构造导出表格对象
|
function createTableData(tOptions){
|
var thead_arr = new Array(); //表头数据数组
|
var thody_arr = new Array(); //表格数据数组
|
var proname_arr = new Array(); //属性名数组
|
//console.info(tOptions);
|
if(tOptions != undefined){
|
//构造表头数组
|
for(var i = 0;i< tOptions.cols.length;i++){
|
var _th = tOptions.cols[i];
|
for(var k=0;k<_th.length;k++){
|
if(_th[k].field != undefined){
|
proname_arr.push(_th[k].field);
|
thead_arr.push(_th[k].title);
|
}
|
}
|
}
|
//构造表格内部数据数组
|
for(var j = 0;j < tOptions.data.length;j++){
|
var _data = tOptions.data[j];
|
for(var k=0;k<proname_arr.length;k++){
|
thody_arr.push(_data[proname_arr[k]]);
|
}
|
}
|
}
|
return {
|
thead: [thead_arr],
|
tbody:[thody_arr]
|
}
|
}
|
});
|
</script>
|
</body>
|
</html>
|
