81041
2018-10-15 6a164ed3a382326e1f246f4629e6d2ffe276ece2
gx_tieta/WebRoot/set-match-group.jsp
@@ -23,6 +23,7 @@
   <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">
      html, body {
         height: 100%;
@@ -73,14 +74,14 @@
                        </div>
                        <div class="layui-input-inline">
                           <div class="layui-form" lay-filter="groupFilter">
                              <select name="group" id="group" lay-filter="group" lay-search="">
                              <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>
                     <button class="layui-btn layui-btn-sm" id="search"><i class="fa fa-search"></i> 查询</button>
                  </div>
               </div>
@@ -90,19 +91,19 @@
         </div>
      </div>
   </div>
   <div id="setMatchGroupData"></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/javascript" src="pages/js/mylayui.js"></script>
   <script type="text/html" id="toolBar">
      <a class="layui-btn layui-btn-xs" lay-event="replace">更换</a>
      <a class="layui-btn layui-btn-xs" lay-event="matchGroup">配组</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;
            ,form = layui.form;
         // 表格数据配置项
         var tOptions = {
            elem: '#groupTbl'
@@ -116,8 +117,6 @@
             ,{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'}
             ,{fixed: 'right', title:'操作', toolbar: '#toolBar', width: 70}
             ]]
            ,data:[]
@@ -132,30 +131,107 @@
         // 点击查询根据查询条件获取电池组的单体列表
         $('#search').click(function() {
            var data = [{stationname: 'xxx'},{stationname: 'enen'}];
            var num = data.length;
            tOptions.data = data;
            // 设置分页信息
            // tOptions.page.layout = ['count', 'prev', 'page', 'next'];  //自定义分页布局
            tOptions.page.limit = num;
            tOptions.page.limits = [num];
            // 重新绘制表格
            table.reload('groupTbl', tOptions);
            var groupData = $('#group').find('option:selected').data('data');
            // 判断是否已经选中电池组
            if(groupData) {
               searchData(groupData);
            }else {
               tOptions.data = [];
               table.render(tOptions);
               layer.msg('请选择一组电池');
            }
         });
         // 查询电池组下所有的单体
         function searchData(obj) {
            // 添加等待框
            var loading = layer.load(0, {shade: [0.1,'#fff']}); //0代表加载的风格,支持0-2
            var structData = structSearchData(obj);
            $.ajax({
               type: 'post',
               async: true,
               url:'BattInfAction!serchGroupByInfor',
               data: 'json='+JSON.stringify(structData),
               dataType: 'json',
               success: function(result) {
                  layer.close(loading);   // 关闭等待框
                  var rs = JSON.parse(result.result);
                  if(rs.code == 1) {
                     var data = rs.data;
                     var num = 0;
                     var rsData = formaterTblData(data);
                     num = rsData.length;
                     tOptions.data = rsData;
                     // 设置分页信息
                     tOptions.page.layout = ['count', 'prev', 'page', 'next'];  //自定义分页布局
                     tOptions.page.limit= num;
                     tOptions.page.limits = [num];
                  }
                  // 重新绘制表格内容
                  table.reload('groupTbl', tOptions);
               }
            });
         }
         // 构造查询对象
         function structSearchData(data) {
            var obj = {};
            obj.StationName1 = '';
            obj.StationName2 = '';
            obj.StationName3 = '';
            obj.BattGroupName = '';
            obj.BattGroupId = data.BattGroupId;
            return obj;
         }
         // 构造生成表格数据的方法
         function formaterTblData(data) {
            var rs = [];   // 结果集
            console.log(data);
            // 遍历查询的结果根据查询结果生成指定的格式
            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);      // 标称容量
               obj.monnum = '#'+_data.MonNum;               // 单体编号
               obj.brandname = _data.BattProducer;            // 品牌
               // 不显示内容
               obj.num = _data.MonNum;                     // 单体编号不加#
               obj.battgroupid = _data.BattGroupId;         // 电池组id
               obj.stationid = _data.StationId;            // 机房id
               rs.push(obj);
            }
            return rs;   // 返回结果集
         }
         // 点击表格工具栏更换
         table.on('tool(groupTbl)', function(obj) {
            var event = obj.event;
            switch(event) {
               case 'replace':
                  showReplacePanel();
               case 'matchGroup':
                  showMatchGroupPanel(obj.data);
               break;
            }
         });
         // 显示更换电池单体面板
         function showReplacePanel() {
         function showMatchGroupPanel(obj) {
            $('#setMatchGroupData').data('data', obj);
            // 设置弹出框的title的值
            var txt = obj.stationname+'-'+obj.groupname+'-'+obj.monnum+'('+obj.brandname+')';
            // 显示面板
            layer.open({
               type: 2,
               title: '<span style="font-weight:bold">配组:</span>'+txt,
               area: ['1200px', '500px'],
               fixed: false, //不固定
               maxmin: true,
               content: 'iframe/set-match-group.html'
            });
         }
         
         // 查询省下拉框
@@ -175,7 +251,7 @@
                  var ele = $('#province');   // 目标select
                  if(rs.code == 1) {
                     var data = rs.data;
                     list.push(getLayuiSelect('请选择省/直辖市', '', {}, {}));
                     list.push(getLayuiSelect('请选择省/直辖市', '', {}, undefined));
                     // 遍历查询结果
                     for(var i=0; i<data.length; i++) {
                        var _data = data[i];
@@ -183,7 +259,7 @@
                        list.push(_tmp);
                     }
                  }else {
                     list.push(getLayuiSelect('暂无省/直辖市', '', {}, {}));
                     list.push(getLayuiSelect('暂无省/直辖市', '', {}, undefined));
                  }
                  
                  // 根据对象数组生成下拉列表
@@ -221,7 +297,7 @@
                  var ele = $('#city');   // 目标select
                  if(rs.code == 1) {
                     var data = rs.data;
                     list.push(getLayuiSelect('请选择市/区', '', {}, {}));
                     list.push(getLayuiSelect('请选择市/区', '', {}, undefined));
                     // 遍历查询结果
                     for(var i=0; i<data.length; i++) {
                        var _data = data[i];
@@ -229,7 +305,7 @@
                        list.push(_tmp);
                     }
                  }else {
                     list.push(getLayuiSelect('暂无市/区', '', {}, {}));
                     list.push(getLayuiSelect('暂无市/区', '', {}, undefined));
                  }
                  
                  // 根据对象数组生成下拉列表
@@ -268,18 +344,18 @@
                  var ele = $('#home');   // 目标select
                  if(rs.code == 1) {
                     var data = rs.data;
                     list.push(getLayuiSelect('请选择机房', '', {StationId: ''}, {}));
                     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);
                        var _tmp = getLayuiSelect(_data.StationName, _data.StationName, _attr, _data);
                        list.push(_tmp);
                     }
                  }else {
                     list.push(getLayuiSelect('暂无机房', '', {}, {}));
                     list.push(getLayuiSelect('暂无机房', '', {}, undefined));
                  }
                  
                  // 根据对象数组生成下拉列表
@@ -320,7 +396,7 @@
                  var ele = $('#group');      // 目标select
                  if(rs.code == 1) {
                     var data = rs.data;
                     list.push(getLayuiSelect('请选择电池组', '0', {}, {}));
                     list.push(getLayuiSelect('请选择电池组', '', {}, undefined));
                     // 遍历查询结果
                     for(var i=0; i<data.length; i++) {
                        var _data = data[i];
@@ -334,7 +410,7 @@
                        list.push(_tmp);
                     }
                  }else {
                     list.push(getLayuiSelect('暂无机房', '', {}, {}));
                     list.push(getLayuiSelect('暂无机房', '', {}, undefined));
                  }
                  
                  // 根据对象数组生成下拉列表
@@ -342,45 +418,6 @@
                  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>