| | |
|---|
| | | #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;">
|
|---|
| | |
|---|
| | | <!-- 主体内容 -->
|
|---|
| | | <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="">
|
|---|
| | | <button class="layui-btn layui-btn-sm" lay-event="startMatchGroup">启动配组</button>
|
|---|
| | | <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>
|
|---|
| | | <button class="layui-btn layui-btn-sm" lay-event="matchRecord">配组记录</button>
|
|---|
| | | </div>
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | |
|---|
| | | <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');
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | |
|---|
| | | 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: [[
|
|---|
| | | {type: 'radio', fixed: 'left'}
|
|---|
| | | ,{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;
|
|---|
| | | 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) {
|
|---|
| | |
|---|
| | | 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);
|
|---|
