From 7c49803f4c9197ce7c9a17e57c39cdff1af7aa34 Mon Sep 17 00:00:00 2001
From: hdw <496960745@qq.com>
Date: 星期四, 11 十月 2018 09:28:05 +0800
Subject: [PATCH] 弹出面板添加
---
gx_tieta/WebRoot/set-match-group.jsp | 63 ++-----
gx_tieta/WebRoot/iframe/set-match-group.html | 341 ++++++++++++++++++++++++++++++++++++++++++
gx_tieta/WebRoot/pages/css/common.css | 8 +
gx_tieta/WebRoot/pages/css/mylayui.css | 15 +
gx_tieta/WebRoot/ele-match-group.jsp | 7
gx_tieta/WebRoot/pages/js/mylayui.js | 38 ++++
6 files changed, 424 insertions(+), 48 deletions(-)
diff --git a/gx_tieta/WebRoot/ele-match-group.jsp b/gx_tieta/WebRoot/ele-match-group.jsp
index 2a4e5a6..461c9c3 100644
--- a/gx_tieta/WebRoot/ele-match-group.jsp
+++ b/gx_tieta/WebRoot/ele-match-group.jsp
@@ -23,6 +23,7 @@
<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">
+ <link rel="stylesheet" href="pages/css/mylayui.css">
<style type="text/css">
#main {
position: absolute;
@@ -37,9 +38,6 @@
}
.layui-form-radio {
margin-right: 10px !important;
- }
- .layui-table-view {
- margin: 0;
}
</style>
</head>
@@ -139,8 +137,7 @@
,defaultToolbar: ['exports', 'filter']
,cellMinWidth: 80
,cols: [[
- {type: 'radio', fixed: 'left'}
- ,{field:'stationname', title:'鏈烘埧鍚嶇О', align:'center', width: 380}
+ {field:'stationname', title:'鏈烘埧鍚嶇О', align:'center', width: 380}
,{field:'groupname', title:'鐢垫睜缁勫悕绉�', align:'center'}
,{field:'monnum', title:'鍗曚綋缂栧彿', align:'center'}
,{field:'brandname', title:'鍝佺墝鍚嶇О', align:'center'}
diff --git a/gx_tieta/WebRoot/iframe/set-match-group.html b/gx_tieta/WebRoot/iframe/set-match-group.html
new file mode 100644
index 0000000..1d85e59
--- /dev/null
+++ b/gx_tieta/WebRoot/iframe/set-match-group.html
@@ -0,0 +1,341 @@
+<!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:'鏍囩О鐢靛帇锛圴锛�', 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>
diff --git a/gx_tieta/WebRoot/pages/css/common.css b/gx_tieta/WebRoot/pages/css/common.css
index d43849a..8744e79 100644
--- a/gx_tieta/WebRoot/pages/css/common.css
+++ b/gx_tieta/WebRoot/pages/css/common.css
@@ -85,6 +85,14 @@
.left360 {
left: 360px;
}
+
+.abs-top0{
+ top: 0 !important;;
+}
+
+.abs-bottom0{
+ bottom: 0 !important;
+}
/* float */
.fix-left {
float: left;
diff --git a/gx_tieta/WebRoot/pages/css/mylayui.css b/gx_tieta/WebRoot/pages/css/mylayui.css
new file mode 100644
index 0000000..9d1be78
--- /dev/null
+++ b/gx_tieta/WebRoot/pages/css/mylayui.css
@@ -0,0 +1,15 @@
+.layui-table-view {
+ margin: 0;
+}
+.layui-table thead tr {
+ color: #000;
+ font-weight: bold;
+ background:url('../images/table_th_bg.gif') repeat-x;
+}
+.layui-table-view .layui-table th {
+ font-weight: bold;
+ padding: 2px 0;
+}
+.layui-table td, .layui-table th {
+ border-color: #ccc;
+}
\ No newline at end of file
diff --git a/gx_tieta/WebRoot/pages/js/mylayui.js b/gx_tieta/WebRoot/pages/js/mylayui.js
new file mode 100644
index 0000000..de98aef
--- /dev/null
+++ b/gx_tieta/WebRoot/pages/js/mylayui.js
@@ -0,0 +1,38 @@
+// 鐢熸垚鐗瑰畾鐨剆elect鍒楄〃
+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);
+ }
+}
+
+// 鏋勯�犵敓鎴恠elect鍒楄〃鐨勫璞℃暟缁�
+function getLayuiSelect(txt, val, attr, data) {
+ var obj = {
+ val: '',
+ txt: '',
+ attr: {},
+ data: {}
+ };
+
+ // 璁剧疆鍐呭鐨勫��
+ obj.val = val; // option鐨剉alue鍊�
+ obj.txt = txt; // option鐨勬枃鏈��
+ obj.attr = attr; // option鐨勮嚜瀹氫箟鐨勫睘鎬�
+ obj.data = data; // option鐨刣ata鍊�
+
+ // 杩斿洖鏋勯�犵殑瀵硅薄
+ return obj;
+}
\ No newline at end of file
diff --git a/gx_tieta/WebRoot/set-match-group.jsp b/gx_tieta/WebRoot/set-match-group.jsp
index 1b5c3fd..0f3668a 100644
--- a/gx_tieta/WebRoot/set-match-group.jsp
+++ b/gx_tieta/WebRoot/set-match-group.jsp
@@ -23,6 +23,7 @@
<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">
+ <link rel="stylesheet" href="pages/css/mylayui.css">
<style type="text/css">
html, body {
height: 100%;
@@ -80,7 +81,7 @@
</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" id="search"><i class="fa fa-search"></i> 鏌ヨ</button>
</div>
</div>
@@ -90,9 +91,11 @@
</div>
</div>
</div>
+ <div id="setMatchGroupData"></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="pages/js/mylayui.js"></script>
<script type="text/html" id="toolBar">
<a class="layui-btn layui-btn-xs" lay-event="replace">鏇存崲</a>
</script>
@@ -133,7 +136,10 @@
var groupData = $('#group').find('option:selected').data('data');
// 鍒ゆ柇鏄惁宸茬粡閫変腑鐢垫睜缁�
if(groupData) {
+ $('#setMatchGroupData')
console.log(groupData);
+ tOptions.data = [{}];
+ table.render(tOptions);
}else {
layer.msg('璇烽�夋嫨涓�缁勭數姹�');
}
@@ -144,14 +150,24 @@
var event = obj.event;
switch(event) {
case 'replace':
- showReplacePanel();
+ showReplacePanel(obj.data);
break;
}
});
// 鏄剧ず鏇存崲鐢垫睜鍗曚綋闈㈡澘
- function showReplacePanel() {
-
+ function showReplacePanel(obj) {
+ $('#setMatchGroupData').data('data', obj);
+
+ // 鏄剧ず闈㈡澘
+ layer.open({
+ type: 2,
+ title: '鏇存崲鐢垫睜',
+ area: ['1200px', '500px'],
+ fixed: false, //涓嶅浐瀹�
+ maxmin: true,
+ content: 'iframe/set-match-group.html'
+ });
}
// 鏌ヨ鐪佷笅鎷夋
@@ -338,45 +354,6 @@
form.render('select', 'groupFilter');
}
});
- }
-
- // 鐢熸垚鐗瑰畾鐨剆elect鍒楄〃
- 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);
- }
- }
-
- // 鏋勯�犵敓鎴恠elect鍒楄〃鐨勫璞℃暟缁�
- function getLayuiSelect(txt, val, attr, data) {
- var obj = {
- val: '',
- txt: '',
- attr: {},
- data: {}
- };
-
- // 璁剧疆鍐呭鐨勫��
- obj.val = val; // option鐨剉alue鍊�
- obj.txt = txt; // option鐨勬枃鏈��
- obj.attr = attr; // option鐨勮嚜瀹氫箟鐨勫睘鎬�
- obj.data = data; // option鐨刣ata鍊�
-
- // 杩斿洖鏋勯�犵殑瀵硅薄
- return obj;
}
});
</script>
--
Gitblit v1.9.1