<%@ 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">
|
<link rel="stylesheet" href="pages/css/mylayui.css">
|
<style type="text/css">
|
#main {
|
position: absolute;
|
top: 124px;
|
bottom: 32px;
|
}
|
#sideBar {
|
height: 100%;
|
}
|
.layui-table table thead th {
|
font-weight: bold;
|
}
|
.layui-form-radio {
|
margin-right: 10px !important;
|
}
|
</style>
|
</head>
|
<body class="h" style="padding: 0; overflow: hidden;">
|
<!--头部内容开始-->
|
<jsp:include page="Top.jsp" flush="true"/>
|
<!--头部内容结束-->
|
<!-- 导航开始 -->
|
<jsp:include page="nav.jsp" flush="true"/>
|
<!-- 主体内容 -->
|
<div id="main" class="full-container-layui">
|
<!-- 导航结束 -->
|
<div class="whyc-page-content-layui">
|
<div class="abs abs-left w360" id="resizeCont">
|
<div class="side-bar-container">
|
<div class="side-bar" id="sideBar"></div>
|
</div>
|
</div>
|
<div class="abs abs-right left360" id="inforCont">
|
<div class="tbl-container">
|
<table class="" id="groupTbl" lay-filter="groupTbl"></table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script type="text/html" id="groupTblTools">
|
<div class="layui-btn-container" id="tblToolsBtn">
|
<input type="checkbox" id="brandAgreement" name="" lay-skin="primary" title="品牌一致" {{ d.brandAgreement }}>
|
<input type="radio" data-max="1000" data-min="0" id="cap100" name="perCap" lay-skin="primary" title="全部" {{ d.cap100 }}>
|
<input type="radio" data-max="1000" data-min="90" id="cap90" name="perCap" lay-skin="primary" title="90%以上" {{ d.cap90 }}>
|
<input type="radio" data-max="90" data-min="80" id="cap80" name="perCap" lay-skin="primary" title="80%~90%" {{ d.cap80 }}>
|
<input type="radio" data-max="80" data-min="70" id="cap70" name="perCap" lay-skin="primary" title="70%~80%" {{ d.cap70 }}>
|
<input type="radio" data-max="70" data-min="60" id="cap60" name="perCap" lay-skin="primary" title="60%~70%" {{ d.cap60 }}>
|
<input type="radio" data-max="60" data-min="0" id="cap0" name="perCap" lay-skin="primary" title="60%以下" {{ d.cap0 }}>
|
<button class="layui-btn layui-btn-sm" lay-event="startMatchGroup">分组/排序</button>
|
<button class="layui-btn layui-btn-sm" lay-event="matchRecord">配组记录</button>
|
</div>
|
</script>
|
|
<script type="text/javascript" src="src/layui.js"></script>
|
<script type="text/javascript" src="pages/js/base.js"></script>
|
<script type="text/javascript" src="pages/js/common.js"></script>
|
<script type="text/javascript" src="pages/js/pages/siderbar.js"></script>
|
<script type="text/javascript">
|
// treeView模块
|
layui.use(['table', 'layer', 'laytpl'],function() {
|
var layer = layui.layer; // 获取layer模块
|
var table = layui.table; // 获取table模块
|
var laytpl = layui.laytpl; // 获取laytpl模块
|
var TreeView = GLOBAL.pages.TreeView;
|
var treeView = new TreeView($('#sideBar'));
|
|
// 设置左右缩放
|
$('#resizeCont .side-bar-container').resizable({
|
handles: 'e',
|
maxWidth: 520,
|
minWidth: 240,
|
alsoResize:$('#resizeCont'),
|
resize: function(event, ui) {
|
treeView.setContainer();
|
$('#inforCont').css('left', ui.size.width+'px');
|
}
|
});
|
|
// 生成一级导航-省
|
first(treeView, treeView.container);
|
|
// 省->市
|
treeView.ele.on('click', '.province', function() {
|
var province = $(this).data('attr');
|
second(treeView, $(this).parent(), province);
|
});
|
|
// 市->区/县
|
treeView.ele.on('click', '.city', function() {
|
var city = $(this).data('attr');
|
var radio = $(this).children('.treeview-txt').find('input');
|
radio.prop('checked', true);
|
third(treeView, $(this).parent(), city);
|
|
// 未被选中
|
if(!$(this).hasClass('acCity')) {
|
// 添加被选中的标识符
|
treeView.ele.find('.city').removeClass('acCity');
|
$(this).addClass('acCity');
|
|
// 查询市的机房信息并生成表格
|
searchData();
|
}
|
|
});
|
|
// 表格数据配置项
|
var tOptions = {
|
elem: '#groupTbl'
|
,toolbar: ''
|
,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'}
|
,{field:'relcap', title:'实际容量', align:'center'}
|
,{field:'percap', title:'容量百分比(%)', align:'center'}
|
]]
|
,data:[
|
|
]
|
,page: {}
|
,height: 'full-165'
|
};
|
|
var toolBarTpl = groupTblTools.innerHTML;
|
// 设置表格头部的内容
|
laytpl(toolBarTpl).render(getToolBarStatus(true), function(html){
|
tOptions.toolbar = html;
|
});
|
|
// 获取工具栏中状态
|
function getToolBarStatus(isFirst) {
|
var tmp = {
|
brandAgreement: 'checked=""',
|
cap100: 'checked=""',
|
cap90:'',
|
cap80:'',
|
cap70:'',
|
cap60:'',
|
cap0:'',
|
range: {
|
max: 100,
|
min: 0
|
}
|
};
|
|
// 是否为第一次加载
|
if(!isFirst) {
|
Object.keys(tmp).forEach(function(key) {
|
if(key != 'range') {
|
tmp[key] = getCheckString(key);
|
}
|
});
|
}
|
return tmp;
|
|
// 获取checked=""字符串
|
function getCheckString(key) {
|
var ele = $('#'+key);
|
var rs = "";
|
if(ele.is(':checked')) {
|
rs = 'checked=""';
|
|
// 判断不是品牌一致
|
if(key != 'brandAgreement') {
|
var range = ele.data();
|
setRange(range.max, range.min); // 设置范围
|
}
|
}
|
return rs;
|
}
|
|
// 设置范围
|
function setRange(max, min) {
|
tmp.range.max = max;
|
tmp.range.min = min;
|
}
|
}
|
|
// 生成表格数据
|
table.render(tOptions);
|
|
|
// 获取后台数据
|
var allGroup = []; // 记录所有电池组的信息
|
function searchData() {
|
var temp = getSearchParams(); // 获取查询条件
|
// 根据查询条件查询机房信息
|
var loading = layer.load(1, {shade: [0.1,'#fff']}); //0代表加载的风格，支持0-2
|
$.ajax({
|
type: 'post',
|
url: 'BattInfAction!serchMakeGroup',
|
async: true,
|
data: 'json='+JSON.stringify(temp),
|
dataType: 'json',
|
success: function(result) {
|
layer.close(loading); // 关闭等待框
|
var rs = JSON.parse(result.result);
|
tOptions.data = []; // 初始化查询内容
|
allGroup = []; // 初始化所有数据内容
|
// 查询成功
|
if(rs.code == 1) {
|
var data = rs.data;
|
var num = 0;
|
//console.log(data);
|
var rsData = formaterTblData(data);
|
// 设置表格的数据
|
num = rsData.length;
|
tOptions.data = rsData;
|
allGroup = rsData;
|
// 设置分页信息
|
tOptions.page.layout = ['count', 'prev', 'page', 'next']; //自定义分页布局
|
tOptions.page.limit= num;
|
tOptions.page.limits = [num];
|
}
|
|
// 设置表格头部的内容
|
laytpl(toolBarTpl).render(getToolBarStatus(true), function(html){
|
tOptions.toolbar = html;
|
});
|
// 重新绘制表格内容
|
table.reload('groupTbl', tOptions);
|
}
|
});
|
}
|
|
// 构造生成表格数据的方法
|
function formaterTblData(data) {
|
var rs = []; // 结果集
|
|
// 遍历查询的结果根据查询结果生成指定的格式
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var obj = {};
|
obj.stationname = _data.StationName; // 机房名称
|
obj.groupname = _data.BattGroupName; // 电池组名称
|
obj.monvol = _data.MonVolStd; // 标称电压
|
obj.nominalcap = Number(_data.MonCapStd); // 标称容量
|
for(var k=0; k<_data.obj.length;k++) {
|
var _obj = $.extend({}, obj);
|
var __data = _data.obj[k];
|
// 设置单体信息
|
_obj.monnum = '#'+__data.mon_num; // 单体编号
|
_obj.brandname = __data.note; // 品牌
|
_obj.relcap = Number(__data.test_cap.toFixed(1)); // 实际容量
|
_obj.percap = Number((__data.percent*100).toFixed(1)); // 容量百分比
|
|
// 判断电池单体不存在
|
if(__data.mon_num != -1) {
|
rs.push(_obj);
|
}
|
}
|
}
|
|
return rs; // 返回结果集
|
}
|
|
// 构造查询后台的参数
|
function getSearchParams() {
|
var acCity = treeView.ele.find('.acCity'); // 被选中的机房
|
// 没有选择市就返回为false
|
if(acCity.length == 0) {
|
return false;
|
}
|
var attr = acCity.data('attr'); // 机房信息
|
// 符合条件启用构造对象
|
var temp = {
|
StationName2: attr.StationName2,
|
StationName5: '',
|
BattProducer: 1
|
};
|
|
return temp;
|
}
|
|
|
//头工具栏事件
|
table.on('toolbar(groupTbl)', function(obj){
|
var event = obj.event;
|
var checkStatus = table.checkStatus(obj.config.id);
|
// 根据事件名调用对应的函数
|
switch(event){
|
case 'startMatchGroup':
|
if(allGroup.length !=0) {
|
startMatchGroup(obj.config);
|
}else {
|
layer.msg('没有要组合/排序的内容');
|
}
|
|
break;
|
case 'matchRecord':
|
console.info(checkStatus);
|
break;
|
}
|
|
// 设置startMatchGroup函数
|
function startMatchGroup(obj) {
|
var toolBarStatus = getToolBarStatus(); // 获取状态栏
|
var data= getDataByRange(allGroup, toolBarStatus.range);
|
var fData = toolBarStatus.brandAgreement.length>0?formaterData(data):formaterData2(data);
|
var rsData = decodeObj(fData);
|
console.log(rsData);
|
// 设置表格的数据
|
num = rsData.length;
|
tOptions.data = rsData;
|
// 设置分页信息
|
tOptions.page.layout = ['count', 'prev', 'page', 'next']; //自定义分页布局
|
tOptions.page.limit= num;
|
tOptions.page.limits = [num];
|
// 设置表格头部的内容
|
laytpl(toolBarTpl).render(toolBarStatus, function(html){
|
tOptions.toolbar = html;
|
});
|
|
table.reload('groupTbl', tOptions);
|
}
|
|
// 根据选择范围返回数据
|
function getDataByRange(data, range) {
|
var rs = [];
|
var max = range.max;
|
var min = range.min;
|
// 遍历data
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
if(_data.percap<=max && _data.percap>=min) {
|
rs.push(_data);
|
}
|
}
|
return rs;
|
}
|
|
// 格式化电池组品牌一致数据
|
function formaterData(data) {
|
var obj = {};
|
for(var i=0;i<data.length;i++) {
|
var _data = data[i];
|
|
var brandname = _data.brandname; // 电池品牌
|
// 判断obj.brandname是否存在
|
if(typeof obj[brandname] != 'object') {
|
obj[brandname] = {};
|
}
|
|
// 获取当前的电池品牌对象
|
var _brandname = obj[brandname];
|
var cap = _data.nominalcap; // 电池容量
|
// 判断obj.brandname.nominalcap是否存在
|
if(typeof _brandname[cap] != 'object') {
|
_brandname[cap] = {};
|
}
|
|
// 获取当前的电池容量的对象
|
var _cap = _brandname[cap];
|
var vol = _data.monvol; // 电池电压
|
// 判断obj.brandname.nominalcap.monvol是否存在
|
if(typeof _cap[vol] != 'object') {
|
_cap[vol] = [];
|
}
|
_cap[vol].push(_data);
|
}
|
return obj;
|
}
|
|
// 格式化数据不包含电池组一致
|
function formaterData2(data) {
|
var obj = {};
|
for(var i=0;i<data.length;i++) {
|
var _data = data[i];
|
// 获取当前的电池品牌对象
|
var cap = _data.nominalcap; // 电池容量
|
// 判断obj.brandname.nominalcap是否存在
|
if(typeof obj[cap] != 'object') {
|
obj[cap] = {};
|
}
|
|
// 获取当前的电池容量的对象
|
var _cap = obj[cap];
|
var vol = data[i].monvol; // 电池电压
|
// 判断obj.brandname.nominalcap.monvol是否存在
|
if(typeof _cap[vol] != 'object') {
|
_cap[vol] = [];
|
}
|
_cap[vol].push(_data);
|
}
|
return obj;
|
}
|
// 解码对象
|
function decodeObj(obj) {
|
var rs = [];
|
// 遍历当前对象的属性
|
Object.keys(obj).forEach(function(key){
|
decodeObjRec(rs, obj[key]); // 获取排序后的结果集（利用数组的引用传递功能）
|
});
|
|
return rs; // 返回结果集
|
}
|
|
// 解码递归函数
|
function decodeObjRec(rs, obj) {
|
if(obj instanceof Array) {
|
var tmp = [];
|
for(var i=0; i<obj.length; i++) {
|
var cap = Number(obj[i].relcap); // 将字符串转化为整数
|
var _index = tmp.length;
|
for(var k=0; k<tmp.length; k++) {
|
var _cap = Number(tmp[k].relcap); // 将字符串转化为整数
|
// 比较实际容量的值(对比时将字符串转化为整数型)
|
if(_cap<cap) {
|
_index = k;
|
break;
|
}
|
}
|
// 将当前数据插入到_index位置，实现排序功能
|
tmp.splice(_index, 0, obj[i]);
|
}
|
// 遍历被排序后的数组将值添加到结果集中
|
for(var i=0; i<tmp.length; i++) {
|
rs.push(tmp[i]);
|
}
|
}else {
|
// 递归函数
|
Object.keys(obj).forEach(function(key){
|
decodeObjRec(rs, obj[key]);
|
});
|
}
|
}
|
});
|
|
|
// 生成一级导航-省
|
function first(treeView, container) {
|
var loading = layer.load(0, {shade: [0.1,'#fff']}); //0代表加载的风格，支持0-2
|
// 请求后台获取省级列表
|
$.ajax({
|
type: "post",
|
url: "BattInfAction!serchAllStation",
|
async:true,
|
dataType:'json',
|
data:null,
|
success: function(data){
|
var rs = JSON.parse(data.result);
|
layer.close(loading);
|
if(rs.code == 1) {
|
var _data= rs.data;
|
var formatData = [];
|
for(var i=0; i<_data.length;i++) {
|
var __data = _data[i];
|
var tmp = treeView.getFolder(__data.StationName1, 'province', __data.StationName1, __data);
|
formatData.push(tmp);
|
}
|
treeView.treeView(container, formatData);
|
}else {
|
layer.msg('查询失败');
|
}
|
}
|
});
|
}
|
|
// 生成二级导航-市
|
function second(treeView, container, data) {
|
// 已经存在
|
if(container.find('ul').length !=0) {
|
return;
|
}
|
treeView.addProgress(container);
|
$.ajax({
|
type: "post",
|
url: "BattInfAction!serchStationName2",
|
async:true,
|
dataType:'json',
|
data:"json = "+JSON.stringify(data),
|
success: function(data){
|
var rs = JSON.parse(data.result);
|
treeView.delProgress(container);
|
if(rs.code == 1) {
|
var _data= rs.data;
|
var formatData = [];
|
for(var i=0; i<_data.length;i++) {
|
var __data = _data[i];
|
var txt = '<input type="radio" name="city">'+ __data.StationName2;
|
var tmp = treeView.getFolder(txt, 'city', __data.StationName2,__data);
|
formatData.push(tmp);
|
}
|
treeView.treeView(container, formatData);
|
}else {
|
|
}
|
}
|
});
|
}
|
|
// 生成 三级导航-区/县
|
function third(treeView, container, data) {
|
// 已经存在
|
if(container.find('ul').length !=0) {
|
return;
|
}
|
treeView.addProgress(container);
|
$.ajax({
|
type: "post",
|
url: "BattInfAction!serchStationName5",
|
async:true,
|
dataType:'json',
|
data:"json = "+JSON.stringify(data),
|
success: function(data){
|
var rs = JSON.parse(data.result);
|
treeView.delProgress(container);
|
if(rs.code == 1) {
|
var _data= rs.data;
|
var formatData = [];
|
for(var i=0; i<_data.length;i++) {
|
var __data = _data[i];
|
var txt = '<input type="checkbox" checked="checked" disabled name="county">'+ __data.StationName5;
|
var tmp = treeView.getFile(txt, 'county', __data.StationName5,__data);
|
formatData.push(tmp);
|
}
|
treeView.treeView(container, formatData);
|
}else {
|
|
}
|
}
|
});
|
}
|
});
|
|
// 省-市-机房-电池组
|
$(document).ready(function(){
|
//页面加载时查询维护区中的枢纽类型
|
$.post("User_battgroup_baojigroup_battgroupAction!serchStationName1InGroup",null,function(data){
|
data=data.result;
|
data=eval("("+data+")");
|
//console.info(data);
|
if(data.code==1 && data.data.length>0){
|
var $select = $("#station_name1");
|
$select.text('');
|
for(var i=0;i<=data.data.length;i++){
|
$option=$("<option></option>");
|
if(i==0){
|
$option.html("<s:text name='All'/>(<s:text name='Common'/>"+data.data.length+"<s:text name='Species'/>)");
|
$option.attr("value", "");
|
}else{
|
$option.text(data.data[i-1]);
|
$option.attr("value",data.data[i-1]);
|
}
|
$select.append($option);
|
}
|
}else{
|
$("#station_name1").text('').html('<option>暂无管理的维护区</option>');
|
}
|
findCity();
|
});
|
});
|
|
// 根据维护区的内容查询市
|
function findCity() {
|
var data = {
|
StationName1: $("#station_name1").val()
|
};
|
// 请求获取当前省下的市
|
$.ajax({
|
type: "post",
|
url: "BattInfAction!serchStationName2",
|
async:true,
|
dataType:'json',
|
data:"json = "+JSON.stringify(data),
|
success: function(data){
|
var rs = JSON.parse(data.result);
|
var $select = $("#city");
|
if(rs.code == 1) {
|
var _data= rs.data;
|
// 根据数据构造生成下拉列表的数据
|
var optsList = [];
|
for(var i=0;i<_data.length;i++){
|
var __data = _data[i];
|
var tmp = getOptionsData(__data.StationName2, __data.StationName2, __data);
|
optsList.push(tmp);
|
}
|
// 根据数据生成下拉列表
|
createOptions($select, optsList, true);
|
}else {
|
$select.text('').html('<option>暂无可测市</option>');
|
}
|
findStationNamebyStationname1();
|
}
|
});
|
}
|
|
//当维护区的值变换时更新市
|
$('#station_name1').change(function(){
|
findCity();
|
});
|
|
//当维护区的值变换时更新机房站点
|
$('#city').change(function(){
|
findStationNamebyStationname1();
|
});
|
|
//根据省，市查询站点
|
function findStationNamebyStationname1(){
|
var tmp = {
|
StationName1:$("#station_name1").val(),
|
StationName2:$("#city").val()
|
};
|
//var selectvalue=$("#station_name1 option:selected").val();
|
//alert(selectvalue);
|
$.post("BattInfAction!serchStationName3","json="+JSON.stringify(tmp),function(data){
|
var rs = JSON.parse(data.result);
|
if(rs.code==1){
|
var _data = rs.data;
|
var $select = $("#station_name");
|
// 根据数据构造生成下拉列表的数据
|
var optsList = [];
|
for(var i=0;i<_data.length;i++){
|
var __data = _data[i];
|
var _attr = {
|
StationId: __data.StationId
|
};
|
var tmp = getOptionsData(__data.StationName3, __data.StationName, __data, _attr);
|
optsList.push(tmp);
|
}
|
|
// 根据数据生成下拉列表
|
createOptions($select, optsList, true);
|
}else{
|
$("#station_name").text('').html('<option>暂无可测机房站点</option>');
|
}
|
findserchByBattGroupNamebystationname();
|
});
|
}
|
|
// 根据机房名称查询电池组
|
$('#station_name').change(function(){
|
findserchByBattGroupNamebystationname();
|
});
|
|
//根据省，市和机房查询蓄电池组
|
function findserchByBattGroupNamebystationname(){
|
var stationid = $("#station_name").find('option:selected').attr('stationid')?$("#station_name").find('option:selected').attr('stationid'):'';
|
// 构造查询条件
|
var tmp = {
|
StationName1:$("#station_name1").val(),
|
StationName2:$("#city").val(),
|
StationName: $("#station_name").val(),
|
StationId: stationid
|
};
|
|
//var station_name1=$("#station_name1 option:selected").val();
|
//var station_name=$("#station_name option:selected").val();
|
|
$.post("BattInfAction!serchBattByStation","json="+JSON.stringify(tmp),function(data){
|
data=data.result;
|
//console.info(data);
|
data=eval("("+data+")");
|
//console.info(data);
|
if(data.code==1 && data.data.length>0){
|
var $select = $("#battgroup_name");
|
// 根据数据构造生成下拉列表的数据
|
var optsList = [];
|
for(var i=0;i<data.data.length;i++){
|
var _data = 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 = getOptionsData(txt, _data.BattGroupId, _data, _attr);
|
optsList.push(tmp);
|
}
|
|
// 根据数据生成下拉列表
|
createOptions($select, optsList, true);
|
$select.find('option').eq(0).val(0);
|
}else{
|
$("#battgroup_name").text('').html('<option>暂无可测蓄电池组</option>');
|
}
|
});
|
}
|
</script>
|
</body>
|
</html>
|
