hdw
2018-10-10 7d507d03cb2055c4d09e315b06ef2d983b460bcd
gx_tieta/WebRoot/set-match-group.jsp
@@ -46,28 +46,38 @@
      <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" lay-filter="tblFilter">
                  <div class="layui-form layui-form-pane">
               <div class="tbl-filter">
                  <div class="layui-form layui-form-pane"  lay-filter="tblFilter">
                     <div class="layui-inline">
                        <div class="layui-input-inline">
                           <select name="province" id="province">
                              <option value="">请选择省/直辖市</option>
                           </select>
                           <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">
                           <select name="city" id="city" lay-filter="city">
                              <option value="">请选择市/区</option>
                           </select>
                           <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">
                           <select name="home" id="home" lay-search="">
                              <option value="">请选择机房</option>
                           </select>
                           <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">
                           <select name="group" lay-filter="group" lay-search="" id="group">
                              <option value="">请选择电池组</option>
                           </select>
                           <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>
@@ -106,8 +116,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:[]
@@ -122,24 +130,14 @@
         // 点击查询根据查询条件获取电池组的单体列表
         $('#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) {
               console.log(groupData);
            }else {
               layer.msg('请选择一组电池');
            }
         });
         // 切换筛选条件模块
         form.on('select(group)', function(data) {
            var dom = data.elem;
            var $dom = $(dom);
            console.log($dom.find('option:selected').data());
         });
         // 点击表格工具栏更换
         table.on('tool(groupTbl)', function(obj) {
@@ -156,9 +154,9 @@
            
         }
         
         // 查询省下拉框
         searchProvince();
         // 查询省的列表
         // 查询省
         function searchProvince() {
            // 请求后台查询
            $.ajax({
@@ -168,10 +166,218 @@
               data: null,
               dataType: 'json',
               success:function(result) {
                  var rs = result.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>