组件展示完成

skyeye-dao/src/main/java/com/skyeye/smprogram/dao/SmProjectDao.java

@@ -27,4 +27,6 @@ public interface SmProjectDao {
 
 	public List<Map<String, Object>> queryGroupMationList(Map<String, Object> map) throws Exception;
 
+	public List<Map<String, Object>> queryGroupMemberMationList(Map<String, Object> map) throws Exception;
+
 }

skyeye-service/src/main/java/com/skyeye/smprogram/service/SmProjectService.java

@@ -17,4 +17,6 @@ public interface SmProjectService {
 
 	public void queryGroupMationList(InputObject inputObject, OutputObject outputObject) throws Exception;
 
+	public void queryGroupMemberMationList(InputObject inputObject, OutputObject outputObject) throws Exception;
+
 }

skyeye-service/src/main/java/com/skyeye/smprogram/service/impl/SmProjectServiceImpl.java

@@ -145,7 +145,7 @@ public class SmProjectServiceImpl implements SmProjectService{
 	/**
 	 * 
 	     * @Title: queryGroupMationList
-	     * @Description: 获取小程序组件信息
+	     * @Description: 获取小程序组信息
 	     * @param @param inputObject
 	     * @param @param outputObject
 	     * @param @throws Exception    参数
@@ -164,6 +164,26 @@ public class SmProjectServiceImpl implements SmProjectService{
 			outputObject.settotal(beans.size());
 		}
 	}
+
+	/**
+	 * 
+	     * @Title: queryGroupMemberMationList
+	     * @Description: 根据分组获取小程序组件信息
+	     * @param @param inputObject
+	     * @param @param outputObject
+	     * @param @throws Exception    参数
+	     * @return void    返回类型
+	     * @throws
+	 */
+	@Override
+	public void queryGroupMemberMationList(InputObject inputObject, OutputObject outputObject) throws Exception {
+		Map<String, Object> map = inputObject.getParams();
+		List<Map<String, Object>> beans = smProjectDao.queryGroupMemberMationList(map);
+		if(beans != null && !beans.isEmpty()){
+			outputObject.setBeans(beans);
+			outputObject.settotal(beans.size());
+		}
+	}
 	
 	
 }

skyeye-web/src/main/java/com/skyeye/smprogram/controller/SmProjectController.java

@@ -98,7 +98,7 @@ public class SmProjectController {
 	/**
 	 * 
 	     * @Title: queryGroupMationList
-	     * @Description: 获取小程序组件信息
+	     * @Description: 获取小程序组信息
 	     * @param @param inputObject
 	     * @param @param outputObject
 	     * @param @throws Exception    参数
@@ -111,4 +111,20 @@ public class SmProjectController {
 		smProjectService.queryGroupMationList(inputObject, outputObject);
 	}
 	
+	/**
+	 * 
+	     * @Title: queryGroupMemberMationList
+	     * @Description: 根据分组获取小程序组件信息
+	     * @param @param inputObject
+	     * @param @param outputObject
+	     * @param @throws Exception    参数
+	     * @return void    返回类型
+	     * @throws
+	 */
+	@RequestMapping("/post/SmProjectController/queryGroupMemberMationList")
+	@ResponseBody
+	public void queryGroupMemberMationList(InputObject inputObject, OutputObject outputObject) throws Exception{
+		smProjectService.queryGroupMemberMationList(inputObject, outputObject);
+	}
+	
 }

skyeye-web/src/main/resources/dbmapper/SmProjectMapper.xml

@@ -116,4 +116,16 @@
 		GROUP BY a.id
 	</select>
 	
+	<select id="queryGroupMemberMationList" parameterType="java.util.Map" resultType="java.util.Map">
+		SELECT
+			a.id,
+			a.prints_pic_url printsPicUrl,
+			a.html_content htmlContent,
+			a.html_js_content htmlJsContent
+		FROM
+			rm_group_member a
+		WHERE
+			a.sm_group_id = #{id}
+	</select>
+	
 </mapper>
\ No newline at end of file

skyeye-web/src/main/resources/mapping/reqmapping.xml

@@ -270,7 +270,10 @@
 		<property id="proName" name="proName" ref="required" var="小程序名称"/>
 		<property id="rowId" name="id" ref="required" var="小程序id"/>
 	</url>
-	<url id="rmxcx027" path="/post/SmProjectController/queryGroupMationList" val="获取小程序组件信息" allUse="1">
+	<url id="rmxcx027" path="/post/SmProjectController/queryGroupMationList" val="获取小程序组信息" allUse="1">
+	</url>
+	<url id="rmxcx028" path="/post/SmProjectController/queryGroupMemberMationList" val="根据分组获取小程序组件信息" allUse="1">
+		<property id="rowId" name="id" ref="required" var="小程序分组id"/>
 	</url>
 	
 	<!-- 小程序系列结束 -->

skyeye-web/src/main/webapp/assets/lib/winui/css/winui.css

@@ -2456,7 +2456,7 @@ body .layer-ext-winconfirm {
 
 .tab__item{
     background-color: rgb(248,248,248);
-    height: 100%;
+    height: calc(100vh - 105px);
 }
 
 .page__bd li{
@@ -2532,6 +2532,24 @@ body .layer-ext-winconfirm {
 	right:20px
 }
 
+#groupTitle{
+	float: right;
+}
+
+.member-list>div>.layui-card{
+	background-color: white;
+	width: 100%;
+    height: 110px;
+    overflow: hidden;
+}
+
+.layui-col-space10>* {
+    padding: 5px;
+}
+
+.member-list-div{
+	height: calc(100vh - 140px);
+}
 /*** 小程序页面管理end ***/
 
 /*******************************************自定义样式end********************************************/

skyeye-web/src/main/webapp/js/rmmysmpropage/mysmpropagelist.js

@@ -10,12 +10,14 @@ layui.config({
 	form = layui.form,
 	table = layui.table;
 	
+	$("#groupMemberTab").hide();
+	
 	showGrid({
 	 	id: "groupMember",
 	 	url: reqBasePath + "rmxcx027",
 	 	params: {},
 	 	pagination: false,
-	 	template: getFileContent('tpl/rmmysmpropage/groupMemberTemplate.tpl'),
+	 	template: getFileContent('tpl/rmmysmpropage/groupTemplate.tpl'),
 	 	ajaxSendLoadBefore: function(hdb){
 	 	},
 	 	ajaxSendAfter:function(json){
@@ -29,7 +31,58 @@ layui.config({
     //二级菜单点击
     $('body').on('click', '.js_item', function(){
         var id = $(this).data('id');
-        window.pageManager.go(id);
+        var title = $(this).data('name');
+        showGrid({
+    	 	id: "memberList",
+    	 	url: reqBasePath + "rmxcx028",
+    	 	params: {rowId: id},
+    	 	pagination: false,
+    	 	template: getFileContent('tpl/rmmysmpropage/groupMemberTemplate.tpl'),
+    	 	ajaxSendLoadBefore: function(hdb){
+    	 		hdb.registerHelper("compare1", function(v1, options){
+					return fileBasePath + "assets/smpropic/" + v1;
+				});
+    	 	},
+    	 	ajaxSendAfter:function(json){
+    	 	}
+    	});
+        $("#groupTitle").html(title);
+        $("#groupTab").animate({  
+            width : "hide",  
+            opacity: "0",
+            paddingLeft : "hide",  
+            paddingRight : "hide",  
+            marginLeft : "hide",  
+            marginRight : "hide"  
+        }, 500);
+        $("#groupMemberTab").animate({  
+            width : "show",  
+            opacity: "1",
+            paddingLeft : "show",  
+            paddingRight : "show",  
+            marginLeft : "show",  
+            marginRight : "show"  
+        }, 500); 
+    });
+    
+    //返回分组列表
+    $('body').on('click', '#returnGroupTab', function(){
+    	$("#groupMemberTab").animate({  
+            width : "hide",  
+            opacity: "0",
+            paddingLeft : "hide",  
+            paddingRight : "hide",  
+            marginLeft : "hide",  
+            marginRight : "hide"  
+        }, 500);
+        $("#groupTab").animate({  
+            width : "show",  
+            opacity: "1",
+            paddingLeft : "show",  
+            paddingRight : "show",  
+            marginLeft : "show",  
+            marginRight : "show"  
+        }, 500); 
     });
     
     //展开一级菜单
@@ -66,6 +119,19 @@ layui.config({
         }
     });
     
+    //图片预览
+    $('body').on('click', '.cursor', function(){
+    	layer.open({
+    		type:1,
+    		title:false,
+    		closeBtn:0,
+    		skin: 'demo-class',
+    		shadeClose:true,
+    		content:'<img src="' + $(this).attr("src") + '" style="max-height:600px;max-width:100%;">',
+    		scrollbar:false
+        });
+    });
+    
     function loadTable(){
     	table.reload("messageTable", {where:{proName:$("#proName").val()}});
     }

skyeye-web/src/main/webapp/tpl/rmmysmpropage/groupMemberTemplate.tpl

 {{#each rows}}
-	<li>
-        <div class="weui-flex js_category">
-            <p class="weui-flex__item">{{name}}</p>
-        </div>
-        <div class="page__category js_categoryInner">
-            <div class="weui-cells page__category-content">
-            	{{#each groupList}}
-	                <a class="weui-cell weui-cell_access js_item" data-id="{{id}}" href="javascript:;">
-	                    <div class="weui-cell__bd">
-	                        <p>{{name}}</p>
-	                    </div>
-	                </a>
-	            {{/each}}
-            </div>
-        </div>
-    </li>
+	<div class="layui-col-sm6 layui-col-md6 layui-col-lg6">
+		<div class="layui-card">
+        	<img src="{{#compare1 printsPicUrl}}{{/compare1}}" data-htmlContent="{{htmlContent}}" data-htmlJsContent="{{htmlJsContent}}" data-id="{{id}}" style="width:100%;height:auto" class="cursor" />
+		</div>
+    </div>
 {{/each}}
\ No newline at end of file

skyeye-web/src/main/webapp/tpl/rmmysmpropage/groupTemplate.tpl

+{{#each rows}}
+	<li>
+        <div class="weui-flex js_category">
+            <p class="weui-flex__item">{{name}}</p>
+        </div>
+        <div class="page__category js_categoryInner">
+            <div class="weui-cells page__category-content">
+            	{{#each groupList}}
+	                <a class="weui-cell weui-cell_access js_item" data-id="{{id}}" data-name="{{name}}" href="javascript:;">
+	                    <div class="weui-cell__bd">
+	                        <p>{{name}}</p>
+	                    </div>
+	                </a>
+	            {{/each}}
+            </div>
+        </div>
+    </li>
+{{/each}}
\ No newline at end of file

skyeye-web/src/main/webapp/tpl/rmmysmpropage/mysmpropagelist.html

@@ -10,7 +10,6 @@
 <body style="overflow: hidden;">
     <div class="winui-toolbar">
         <div class="winui-tool">
-            <button id="reloadTable" class="winui-toolbtn"><i class="fa fa-refresh" aria-hidden="true"></i>刷新数据</button>
             <button id="addBean" class="winui-toolbtn"><i class="fa fa-plus" aria-hidden="true"></i>新增项目</button>
         </div>
     </div>
@@ -19,17 +18,30 @@
     	<div class="layui-col-xs3 left-menu">
     		<div class="layui-tab layui-tab-card hei-100-per">
 				<ul class="layui-tab-title">
-					<li class="layui-this">页面管理<i class="fa fa-refresh blue" aria-hidden="true"></i></li>
-					<li>组件管理<i class="fa fa-refresh blue" aria-hidden="true"></i></li>
+					<li class="layui-this">页面管理</li>
+					<li>组件管理</li>
 				</ul>
 				<div class="layui-tab-content tab__item">
-					<div class="layui-tab-item layui-show">1</div>
-					<div class="layui-tab-item">
-						<div class="page__bd page__bd_spacing">
-					        <ul id="groupMember">
+					<div class="layui-tab-item layui-show hei-100-per">1</div>
+					<div class="layui-tab-item hei-100-per">
+						<div class="page__bd page__bd_spacing hei-100-per" id="groupTab">
+					        <ul id="groupMember" style="overflow-y: scroll;height: 100%;">
 					            
 					         </ul>
 					     </div>
+					     <div class="page__bd page__bd_spacing hei-100-per" id="groupMemberTab">
+					     	<div class="winui-toolbar">
+						        <div class="winui-tool">
+						            <button class="winui-toolbtn" id="returnGroupTab"><i class="fa fa-chevron-left" aria-hidden="true"></i>返回</button>
+						            <font id="groupTitle" class="winui-toolbtn"></font>
+						        </div>
+						    </div>
+						    <div class="page__bd page__bd_spacing member-list-div">
+						    	<div class="layui-row layui-col-space10 member-list" id="memberList" style="overflow-y: scroll;height: 100%;">
+								    
+								</div>
+						    </div>
+					     </div>
 					</div>
 				</div>
 			</div>
@@ -40,8 +52,8 @@
     	<div class="layui-col-xs3 right-menu">
     		<div class="layui-tab layui-tab-card hei-100-per">
 				<ul class="layui-tab-title">
-					<li class="layui-this">页面属性<i class="fa fa-refresh blue" aria-hidden="true"></i></li>
-					<li>图层管理<i class="fa fa-refresh blue" aria-hidden="true"></i></li>
+					<li class="layui-this">页面属性</li>
+					<li>图层管理</li>
 				</ul>
 				<div class="layui-tab-content">
 					<div class="layui-tab-item layui-show">1</div>