星伟
2018-10-10 ff3b8373d7a111b7730ee2756b5ae06d105203f0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML>
<html class="h">
<head>
<base href="<%=basePath%>">
 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
<meta charset="UTF-8">
<title>电池组配组管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" href="src/css/layui.css">
    <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">
    <style type="text/css">
        html, body {
            height: 100%;
        }
        body {
            overflow:hidden;
        }
        .layui-table-view {
            margin: 0;
        }
    </style>
  </head>
  
  <body>
    <!--头部内容开始-->
    <jsp:include page="Top.jsp" flush="true"/>
    <!--头部内容结束-->
    <!-- 导航开始 -->
    <jsp:include page="nav.jsp" flush="true"/>
    <div class="whyc-page-layui-main">    <!-- 最外层控制位置 -->
        <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="layui-inline">
                                <div class="layui-input-inline">
                                    <select name="province" id="province">
                                        <option value="">请选择省/直辖市</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="city" id="city" lay-filter="city">
                                        <option value="">请选择市/区</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="home" id="home" lay-search="">
                                        <option value="">请选择机房</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="group" lay-filter="group" lay-search="" id="group">
                                        <option value="">请选择电池组</option>
                                    </select>
                                </div>
                            </div>
                            <button class="layui-btn layui-btn-sm layui-btn-normal" id="search"><i class="fa fa-search"></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/html" id="toolBar">
        <a class="layui-btn layui-btn-xs" lay-event="replace">更换</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;
            // 表格数据配置项
            var tOptions = {
                elem: '#groupTbl'
                ,toolbar: true
                ,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'}
                ,{fixed: 'right', title:'操作', toolbar: '#toolBar', width: 70}
                ]]
                ,data:[]
                ,page: {
                    layout:['count', 'prev', 'page', 'next']
                }
                ,height: 'full-150'
            };
            
            // 生成表格数据
            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':
                        showReplacePanel();
                    break;
                }
            });
 
            // 显示更换电池单体面板
            function showReplacePanel() {
                
            }
            
            searchProvince();
            
            // 查询省的列表
            function searchProvince() {
                // 请求后台查询
                $.ajax({
                    type:'post',
                    async:true,
                    url: 'User_battgroup_baojigroup_battgroupAction!serchStationName1InGroup',
                    data: null,
                    dataType: 'json',
                    success:function(result) {
                        var rs = result.result;
                    }
                });
            }
        });
    </script>
  </body>
</html>