hdw
2018-10-08 e265a82fd7e6b12039dd1947f499f0622f2359e6
gx_tieta/WebRoot/ele-match-group.jsp
@@ -27,6 +27,12 @@
      #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;">
@@ -38,22 +44,28 @@
   <!-- 主体内容 -->
   <div id="main" class="full-container-layui">
      <!-- 导航结束 -->
      <div class="whyc-page-content-tbl">
         <div class="whyc-page-content-tbl-cell w360" id="resizeCont">
            <div class="tbl-cell-container">
               <div class="side-bar-container">
                  <div class="side-bar" id="sideBar"></div>
               </div>
      <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="whyc-page-content-tbl-cell">
            <div id="groupTbl"></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">
            <input type="checkbox" name="" lay-skin="primary" title="品牌一致" checked="">
      <div class="layui-btn-container" id="tblToolsBtn">
            <input type="checkbox" id="brandAgreement" name="" lay-skin="primary" title="品牌一致" {{ d.brandAgreement }}>
         <input type="radio" data-max="100" data-min="0" id="cap100" name="perCap" lay-skin="primary" title="全部" {{ d.cap100 }}>
         <input type="radio" data-max="100" 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>
        </div>
   </script>
@@ -64,19 +76,22 @@
   <script type="text/javascript" src="pages/js/pages/siderbar.js"></script>
     <script type="text/javascript">
      // treeView模块
      layui.use(['table', 'layer'],function() {
      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').resizable({
         $('#resizeCont .side-bar-container').resizable({
            handles: 'e',
            maxWidth: 520,
            minWidth: 240,
            resize: function() {
            alsoResize:$('#resizeCont'),
            resize: function(event, ui) {
               treeView.setContainer();
               $('#inforCont').css('left', ui.size.width+'px');
            }
         });
         
@@ -93,42 +108,328 @@
         treeView.ele.on('click', '.city', function() {
            var city = $(this).data('attr');
            third(treeView, $(this).parent(), city);
            var radio = $(this).children('.treeview-txt').find('input');
            radio.prop('checked', true);
            // 未被选中
            if(!$(this).hasClass('acCity')) {
               // 添加被选中的标识符
               treeView.ele.find('.city').removeClass('acCity');
               $(this).addClass('acCity');
               // 查询市的机房信息并生成表格
               searchData();
            }
         });
         
         // 机房->电池组
         treeView.ele.on('click', '.home', function() {
            var home = $(this).data('attr');
         // 表格数据配置项
         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-170'
         };
         var toolBarTpl = groupTblTools.innerHTML;
         // 设置表格头部的内容
         laytpl(toolBarTpl).render(getToolBarStatus(true), function(html){
            tOptions.toolbar = html;
         });
         // 获取工具栏中状态
         function getToolBarStatus(isFirst) {
            var tmp = {
               StationName1: home.StationName1,
               StationName2: home.StationName2,
               StationName: home.StationName,
               StationId: home.StationId
               brandAgreement: 'checked=""',
               cap100: 'checked=""',
               cap90:'',
               cap80:'',
               cap70:'',
               cap60:'',
               cap0:'',
               range: {
                  max: 100,
                  min: 0
               }
            };
            fourth(treeView, $(this).parent(), tmp);
         });
            // 是否为第一次加载
            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({
            elem: '#groupTbl'
            ,toolbar: '#groupTblTools'
            ,defaultToolbar: ['exports', 'filter']
            ,cols: [[
               ,{field:'staionname', title:'机房名称'}
               ,{field:'groupname', title:'电池组名称'}
               ,{field:'monnum', title:'单体编号'}
               ,{field:'brandname', title:'品牌名称'}
               ,{field:'monvol', title:'单体电压'}
               ,{field:'nominalcap', title:'标称容量'}
               ,{field:'relcap', title:'实际容量',sort: true}
             ]]
             ,data:[]
             ,page: true
             ,height: 'full-200'
         });
         table.render(tOptions);
         // 获取后台数据
         var allGroup = [];   // 记录所有电池组的信息
         function searchData() {
            var temp = getSearchParams();   // 获取查询条件
            // 根据查询条件查询机房信息
            var loading = layer.load(0, {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;
                     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.brandname = _data.BattProducer;      // 品牌
               obj.monvol = _data.MonVolStd;         // 标称电压
               obj.nominalcap = _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.relcap = __data.test_cap.toFixed(0);   // 实际容量
                  _obj.percap = (__data.percent*100).toFixed(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,
               BattProducer: 1
            };
            return temp;
         }
         //头工具栏事件
           table.on('toolbar(groupTbl)', function(obj){
              var event = obj.event;
              switch(event){
                 case 'startMatchGroup':
                    startMatchGroup(obj.config);
                 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);
                 // 设置表格的数据
               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]);
                 });
                 //console.log(rs);
                 return rs;
              }
              // 解码递归函数
              function decodeObjRec(rs, obj) {
                 if(obj instanceof Array) {
                    var tmp = [];
                    for(var i=0; i<obj.length; i++) {
                       var cap = obj[i].relcap;
                       var _index = tmp.length;
                       for(var k=0; k<tmp.length; k++) {
                          if(tmp[k].relcap<cap) {
                             _index = k;
                             break;
                          }
                       }
                       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) {
@@ -214,7 +515,7 @@
                       for(var i=0; i<_data.length;i++) {
                          var __data = _data[i];
                          var txt = '<input type="checkbox" checked="checked" disabled name="home">'+ __data.StationName;
                          var tmp = treeView.getFile(txt, 'home', __data);
                          var tmp = treeView.getFile(txt, 'home', __data.StationId,__data);
                          formatData.push(tmp);
                       }
                       treeView.treeView(container, formatData);