<%@ 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 class="h">
|
<head>
|
<base href="<%=basePath%>">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
|
<meta charset="UTF-8">
|
<title>电池组配组管理</title>
|
<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">
|
<link rel="stylesheet" href="src/css/layui.css">
|
<link rel="stylesheet" type="text/css" href="css/basic.css" />
|
<link rel="stylesheet" href="css/common.css">
|
<link rel="stylesheet" href="pages/css/common.css">
|
<style type="text/css">
|
html, body {
|
height: 100%;
|
}
|
body {
|
overflow:hidden;
|
}
|
.layui-table-view {
|
margin: 0;
|
}
|
</style>
|
</head>
|
|
<body>
|
<!--头部内容开始-->
|
<jsp:include page="Top.jsp" flush="true"/>
|
<!--头部内容结束-->
|
<!-- 导航开始 -->
|
<jsp:include page="nav.jsp" flush="true"/>
|
<div class="whyc-page-layui-main"> <!-- 最外层控制位置 -->
|
<div class="whyc-page-layui-content-container">
|
<div class="whyc-page-layui-content" style="background-color: pink">
|
<div class="tbl-container">
|
<div class="tbl-filter">
|
<div class="layui-form layui-form-pane" lay-filter="tblFilter">
|
<div class="layui-inline">
|
<div class="layui-input-inline">
|
<div class="layui-form" lay-filter="provinceFilter">
|
<select name="province" id="province" lay-filter="province">
|
<option value="">请选择省/直辖市</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-input-inline">
|
<div class="layui-form" lay-filter="cityFilter">
|
<select name="city" id="city" lay-filter="city">
|
<option value="">请选择市/区</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-input-inline">
|
<div class="layui-form" lay-filter="homeFilter">
|
<select name="home" id="home" lay-search="" lay-filter="home">
|
<option value="">请选择机房</option>
|
</select>
|
</div>
|
|
</div>
|
<div class="layui-input-inline">
|
<div class="layui-form" lay-filter="groupFilter">
|
<select name="group" id="group" lay-filter="group">
|
<option value="">请选择电池组</option>
|
</select>
|
</div>
|
|
</div>
|
</div>
|
<button class="layui-btn layui-btn-sm layui-btn-normal" id="search"><i class="fa fa-search"></i> 查询</button>
|
</div>
|
|
</div>
|
<!-- 表格内容 -->
|
<table id="groupTbl" lay-filter="groupTbl"></table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script type="text/javascript" src="js/jquery-1.8.3.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/html" id="toolBar">
|
<a class="layui-btn layui-btn-xs" lay-event="replace">更换</a>
|
</script>
|
<script type="text/javascript">
|
layui.use(['layer', 'table', 'form', 'laytpl', 'element'],function() {
|
var layer = layui.layer // 获取layer模块
|
,table = layui.table // 获取table模块
|
,form = layui.form
|
,laytpl = layui.laytpl
|
,element = layui.element;
|
// 表格数据配置项
|
var tOptions = {
|
elem: '#groupTbl'
|
,toolbar: true
|
,defaultToolbar: ['exports', 'filter']
|
,cellMinWidth: 80
|
,cols: [[
|
{field:'stationname', title:'机房名称', align:'center', width: 380}
|
,{field:'groupname', title:'电池组名称', align:'center'}
|
,{field:'monnum', title:'单体编号', align:'center'}
|
,{field:'brandname', title:'品牌名称', align:'center'}
|
,{field:'nominalcap', title:'标称容量', align:'center'}
|
,{field:'monvol', title:'标称电压（V）', align:'center'}
|
,{fixed: 'right', title:'操作', toolbar: '#toolBar', width: 70}
|
]]
|
,data:[]
|
,page: {
|
layout:['count', 'prev', 'page', 'next']
|
}
|
,height: 'full-150'
|
};
|
|
// 生成表格数据
|
table.render(tOptions);
|
|
// 点击查询根据查询条件获取电池组的单体列表
|
$('#search').click(function() {
|
var groupData = $('#group').find('option:selected').data('data');
|
// 判断是否已经选中电池组
|
if(groupData) {
|
console.log(groupData);
|
}else {
|
layer.msg('请选择一组电池');
|
}
|
});
|
|
// 点击表格工具栏更换
|
table.on('tool(groupTbl)', function(obj) {
|
var event = obj.event;
|
switch(event) {
|
case 'replace':
|
showReplacePanel();
|
break;
|
}
|
});
|
|
// 显示更换电池单体面板
|
function showReplacePanel() {
|
|
}
|
|
// 查询省下拉框
|
searchProvince();
|
// 查询省
|
function searchProvince() {
|
// 请求后台查询
|
$.ajax({
|
type:'post',
|
async:true,
|
url: 'User_battgroup_baojigroup_battgroupAction!serchStationName1InGroup',
|
data: null,
|
dataType: 'json',
|
success:function(result) {
|
var rs = JSON.parse(result.result);
|
var list = []; // option结果集
|
var ele = $('#province'); // 目标select
|
if(rs.code == 1) {
|
var data = rs.data;
|
list.push(getLayuiSelect('请选择省/直辖市', '', {}, undefined));
|
// 遍历查询结果
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var _tmp = getLayuiSelect(_data, _data, {}, {});
|
list.push(_tmp);
|
}
|
}else {
|
list.push(getLayuiSelect('暂无省/直辖市', '', {}, undefined));
|
}
|
|
// 根据对象数组生成下拉列表
|
createLayuiSelect(ele, list);
|
form.render('select', 'provinceFilter');
|
|
// 查询市
|
searchCity();
|
}
|
});
|
}
|
|
// 切换省-市
|
form.on('select(province)', function(data) {
|
// 查询市
|
searchCity();
|
});
|
|
// 查询市
|
function searchCity() {
|
// 构造查询条件
|
var tmp = {
|
StationName1: $("#province").val()
|
};
|
// 根据构造条件查询内容
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'BattInfAction!serchStationName2',
|
dataType: 'json',
|
data: "json = "+JSON.stringify(tmp),
|
success: function(result) {
|
var rs = JSON.parse(result.result);
|
var list = []; // option结果集
|
var ele = $('#city'); // 目标select
|
if(rs.code == 1) {
|
var data = rs.data;
|
list.push(getLayuiSelect('请选择市/区', '', {}, undefined));
|
// 遍历查询结果
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var _tmp = getLayuiSelect(_data.StationName2, _data.StationName2, {}, _data);
|
list.push(_tmp);
|
}
|
}else {
|
list.push(getLayuiSelect('暂无市/区', '', {}, undefined));
|
}
|
|
// 根据对象数组生成下拉列表
|
createLayuiSelect(ele, list);
|
form.render('select', 'cityFilter');
|
|
// 查询机房
|
searchHome();
|
}
|
});
|
}
|
|
// 切换市-机房
|
form.on('select(city)', function(data) {
|
// 查询机房
|
searchHome();
|
});
|
|
// 查询机房
|
function searchHome() {
|
// 构造查询条件
|
var tmp = {
|
StationName1:$("#province").val(),
|
StationName2:$("#city").val()
|
};
|
// 根据构造条件查询内容
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'BattInfAction!serchStationName3',
|
dataType: 'json',
|
data: "json = "+JSON.stringify(tmp),
|
success: function(result) {
|
var rs = JSON.parse(result.result);
|
var list = []; // option结果集
|
var ele = $('#home'); // 目标select
|
if(rs.code == 1) {
|
var data = rs.data;
|
list.push(getLayuiSelect('请选择机房', '', {StationId: ''}, undefined));
|
// 遍历查询结果
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var _attr = {
|
StationId: _data.StationId
|
};
|
var _tmp = getLayuiSelect(_data.StationName3, _data.StationName, _attr, _data);
|
list.push(_tmp);
|
}
|
}else {
|
list.push(getLayuiSelect('暂无机房', '', {}, undefined));
|
}
|
|
// 根据对象数组生成下拉列表
|
createLayuiSelect(ele, list);
|
form.render('select', 'homeFilter');
|
|
// 查询机房
|
searchGroup();
|
}
|
});
|
}
|
|
// 切换机房-电池组
|
form.on('select(home)', function(data) {
|
// 查询电池组
|
searchGroup();
|
});
|
|
// 查询机房
|
function searchGroup() {
|
// 构造查询条件
|
var tmp = {
|
StationName1:$("#province").val(),
|
StationName2:$("#city").val(),
|
StationName: $("#home").val(),
|
StationId: $("#home").find('option:selected').attr('stationid')
|
};
|
// 根据构造条件查询内容
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'BattInfAction!serchBattByStation',
|
dataType: 'json',
|
data: "json = "+JSON.stringify(tmp),
|
success: function(result) {
|
var rs = JSON.parse(result.result);
|
var list = []; // option结果集
|
var ele = $('#group'); // 目标select
|
if(rs.code == 1) {
|
var data = rs.data;
|
list.push(getLayuiSelect('请选择电池组', '', {}, undefined));
|
// 遍历查询结果
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var _attr = {
|
stationname: _data.StationName,
|
dev_id: _data.FBSDeviceId,
|
batt_num: _data.GroupIndexInFBSDevice+1
|
};
|
var txt = _data.BattGroupName+'(共'+_data.MonCount+"<s:text name='Section'/>"+')';
|
var _tmp = getLayuiSelect(txt, _data.BattGroupId, _attr, _data);
|
list.push(_tmp);
|
}
|
}else {
|
list.push(getLayuiSelect('暂无机房', '', {}, undefined));
|
}
|
|
// 根据对象数组生成下拉列表
|
createLayuiSelect(ele, list);
|
form.render('select', 'groupFilter');
|
}
|
});
|
}
|
|
// 生成特定的select列表
|
function createLayuiSelect(ele, list) {
|
// 清空内容
|
ele.text('');
|
// 遍历list结果集生成下拉
|
for(var i=0; i<list.length; i++) {
|
var _list = list[i];
|
var option = $('<option></option>'); // option元素
|
// 设置option的文本/属性值/data值
|
option.text(_list.txt);
|
option.val(_list.val);
|
option.data('data', _list.data);
|
Object.keys(_list.attr).forEach(function(key){
|
var val = _list.attr[key];
|
option.attr(key, val);
|
});
|
ele.append(option);
|
}
|
}
|
|
// 构造生成select列表的对象数组
|
function getLayuiSelect(txt, val, attr, data) {
|
var obj = {
|
val: '',
|
txt: '',
|
attr: {},
|
data: {}
|
};
|
|
// 设置内容的值
|
obj.val = val; // option的value值
|
obj.txt = txt; // option的文本值
|
obj.attr = attr; // option的自定义的属性
|
obj.data = data; // option的data值
|
|
// 返回构造的对象
|
return obj;
|
}
|
});
|
</script>
|
</body>
|
</html>
|
