| New file |
| | |
|---|
| | | <!DOCTYPE html>
|
|---|
| | | <html lang="en">
|
|---|
| | | <head>
|
|---|
| | | <meta charset="UTF-8">
|
|---|
| | | <title>配组管理</title>
|
|---|
| | | <link rel="stylesheet" href="../jqueryui/jquery-ui.min.css">
|
|---|
| | | <link rel="stylesheet" href="../src/css/layui.css">
|
|---|
| | | <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
|
|---|
| | | <link rel="stylesheet" href="../pages/css/mylayui.css">
|
|---|
| | | <link rel="stylesheet" href="../pages/css/common.css">
|
|---|
| | | <style type="text/css">
|
|---|
| | | html, body {
|
|---|
| | | height: 100%;
|
|---|
| | | }
|
|---|
| | | .layui-table-view {
|
|---|
| | | margin: 0;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | | </head>
|
|---|
| | | <body>
|
|---|
| | | <div class="whyc-page-layui-main abs-top0 abs-bottom0"> <!-- 最外层控制位置 -->
|
|---|
| | | <div class="whyc-page-layui-content-container">
|
|---|
| | | <!-- <div class="whyc-page-layui-siderbar w360"></div> -->
|
|---|
| | | <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" lay-filter="tblFilter">
|
|---|
| | | <div class="layui-inline">
|
|---|
| | | <div class="layui-input-inline">
|
|---|
| | | <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">
|
|---|
| | | <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">
|
|---|
| | | <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">
|
|---|
| | | <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>
|
|---|
| | | <button class="layui-btn layui-btn-sm layui-btn-normal" id="replace"><i class="fa fa-reply"></i> 更换</button>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | </div>
|
|---|
| | | <!-- 表格内容 -->
|
|---|
| | | <table id="groupTbl" lay-filter="groupTbl"></table>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </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="../src/layui.js"></script>
|
|---|
| | | <script type="text/javascript" src="../pages/js/mylayui.js"></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;
|
|---|
| | | // 表格数据配置项
|
|---|
| | | var tOptions = {
|
|---|
| | | elem: '#groupTbl'
|
|---|
| | | ,toolbar: true
|
|---|
| | | ,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'}
|
|---|
| | | ]]
|
|---|
| | | ,data:[]
|
|---|
| | | ,page: {
|
|---|
| | | layout:['count', 'prev', 'page', 'next']
|
|---|
| | | }
|
|---|
| | | ,height: 'full-0'
|
|---|
| | | };
|
|---|
| | | |
|---|
| | | // 生成表格数据
|
|---|
| | | table.render(tOptions);
|
|---|
| | |
|
|---|
| | | // 点击查询根据查询条件获取电池组的单体列表
|
|---|
| | | $('#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);
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // 切换筛选条件模块
|
|---|
| | | 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) {
|
|---|
| | | var event = obj.event;
|
|---|
| | | switch(event) {
|
|---|
| | | case 'replace':
|
|---|
| | | console.log(obj);
|
|---|
| | | showReplacePanel();
|
|---|
| | | break;
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // 获取模板
|
|---|
| | | var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
|
|---|
| | |
|
|---|
| | | // 点击替换
|
|---|
| | | $('#replace').click(function() {
|
|---|
| | | var checkStatus = table.checkStatus('groupTbl'); //test即为基础参数id对应的值
|
|---|
| | | console.log(checkStatus);
|
|---|
| | | var data = parent.$('#setMatchGroupData').data();
|
|---|
| | | console.log(data);
|
|---|
| | | //parent.layer.close(index);
|
|---|
| | | });
|
|---|
| | | |
|---|
| | | |
|---|
| | | // 查询省下拉框
|
|---|
| | | searchProvince();
|
|---|
| | | // 查询省
|
|---|
| | | function searchProvince() {
|
|---|
| | | // 请求后台查询
|
|---|
| | | $.ajax({
|
|---|
| | | type:'post',
|
|---|
| | | async:true,
|
|---|
| | | url: 'User_battgroup_baojigroup_battgroupAction!serchStationName1InGroup',
|
|---|
| | | data: null,
|
|---|
| | | dataType: 'json',
|
|---|
| | | success:function(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+'节)';
|
|---|
| | | var _tmp = getLayuiSelect(txt, _data.BattGroupId, _attr, _data);
|
|---|
| | | list.push(_tmp);
|
|---|
| | | }
|
|---|
| | | }else {
|
|---|
| | | list.push(getLayuiSelect('暂无机房', '', {}, undefined));
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | // 根据对象数组生成下拉列表
|
|---|
| | | createLayuiSelect(ele, list);
|
|---|
| | | form.render('select', 'groupFilter');
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | </script>
|
|---|
| | | </body>
|
|---|
| | | </html>
|
|---|
