<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <%@include file="/wdk/theme/je/module/public/common.jsp"%> <title>个人首页</title> <link rel='stylesheet' type='text/css' href='<%=WDK_ROOT%>/theme/je/core/js/lib/jqueryui/jquery-ui.min.css'> <script type="text/javascript" src="<%=WDK_ROOT%>/theme/je/core/js/lib/jqueryui/jquery-ui-1.10.4.custom.min.js"></script> <script type="text/javascript"> var _account_id = $.getSessionUser().personuuid; //初始化 $(function(){ $(".d-con").sortable({ placeholder: "ui-state-highlight", cursor: "move", connectWith:".d-con", handle:">.d-header", items:">.d-item", forcePlaceholderSize:true, placeholder:"d-placeholder", update:function(){ save(); } }).disableSelection(); }); </script> <style> .d-con{ width:100%; height:100%; } .d-placeholder{ width:33%; border:1px dotted #000; min-height:353px; float:left; position:relative; } .d-item{ width:33.333%; /*min-height:355px;*/ float:left; position:relative; } .d-header{ z-index:1; top: 100%; right: 5px; left: 5px; bottom: 0px; position: absolute; background:#000; color:#fff; /* older safari/Chrome browsers */ -webkit-opacity: 0.5; /* Netscape and Older than Firefox 0.9 */ -moz-opacity: 0.5; /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/ -khtml-opacity: 0.5; /* IE9 + etc...modern browsers */ opacity: .5; /* IE 4-9 */ filter:alpha(opacity=50); /*This works in IE 8 & 9 too*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE4-IE9*/ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); -moz-transition: top ease 400ms; -o-transition: top ease 400ms; -webkit-transition: top ease 400ms; transition: top ease 400ms; cursor:move; } .d-config{ display:none; width:100%; height:100%; } .d-item-add .d-config{ display:table; } .d-item-add{ display:none; border:1px dashed #000; width:33%; height:355px; float:left; } .d-config td{ vertical-align:middle; text-align:center; width:100%; height:100%; } .d-content{ position: absolute; background-color:#fff; top: 5px; left: 5px; right: 5px; bottom: 5px; z-index:0; } .d-btn-editor{ position:fixed; color:#ed143d; font-size:20px; top:20px; right:5px; width:20px; height:20px; z-index:999; cursor:pointer; } .d-cfg-btn,.d-del-btn{ cursor: pointer; color: #fff; } .d-add-btn{ font-size:60px; cursor:pointer; color:#00438a; } iframe{ border:0px; overflow:hidden; width:100%; height:100%; } </style> <script> $(function(){ $(".d-add-btn").on("click",function(){ var wid=$.getUUID(); $.openWin({ id: wid, url:"platform/personhome/config.jsp", title:"组件新增", width:500, height:400, param:{width:"33.33%",height:"355px"}, onClose:function(){ var r=$.getWinReturn(wid); if(r){ addItemByData(r); save(); } } }); }); $(".d-btn-editor").on("click",function(){ if($(this).find(".fa").hasClass("fa-th")){ $(this).attr("title","切换为查看模式"); $(".d-con").addClass("d-itemeditor"); $(this).find(".fa").removeClass("fa-th"); $(this).find(".fa").addClass("fa-table"); $(".d-item-add").show(); }else{ $(this).attr("title","切换为编辑模式"); $(".d-con").removeClass("d-itemeditor"); $(this).find(".fa").addClass("fa-th"); $(this).find(".fa").removeClass("fa-table"); $(".d-item-add").hide(); } }); var config=null; /* $.cuajax({ url : 'wdk?action=wdk.pub&method=call_service&ajaxparam=' + new Date().getTime(), data : { _SRVNAME:'service.pf.customized', _SRVMETHOD:'personal_query', _DATA : $.json2str({ user_uuid:_account_id }), _RSFIELD:'result' }, success:function(data){ data=$.str2json(data); if(data.code==0){ alert(data.desc); return; } config = data.page_config; var cmpt_uuids=[]; if(Array.isArray(config)){ for(var i=0;i<config.length;i++){ cmpt_uuids.push(config[i].cmpt_uuid); } $.cuajax({ url : 'wdk?action=wdk.pub&method=call_service&ajaxparam=' + new Date().getTime(), data : { _SRVNAME:'service.pf.customized', _SRVMETHOD:'cmpt_isUserEnable', _DATA : $.json2str({ op_account_uuid : $.getSessionUser().account_id, manage_unit_uuid : $.getSessionUser().manageunituuid, org_uuid : $.getSessionUser().deptuuid, account_uuid : $.getSessionUser().account_id, app_uuid : $.getSessionUser().appuuid, cmpt_uuids:cmpt_uuids.join(",") }), _RSFIELD:'resultset' }, success:function(data){ data=$.str2json(data); if(data.code=="0"){ alert(data.desc); return ; } var avaliabled={}; for(var i=0;i<data.length;i++){ if(data[i]!=null){ avaliabled[data[i].cmpt_uuid]=data[i]; } } for(var i=0;i<config.length;i++){ var av=avaliabled[config[i].cmpt_uuid]; if(av){ config[i].cmpt_url=av.cmpt_url; config[i].cmpt_param_url=av.cmpt_param_url; config[i].cmpt_config=av.cmpt_config; addItemByData(config[i]); } } }, error:function(e){ alert("出现网络错误,查询失败。"); } }); } }, error:function(e){ alert("出现网络错误,查询失败。"); } }); */ }); function save(){ var items=$(".d-item"); var cfgs=[]; for(var i=0;i<items.length;i++){ var cfg=$(items[i]).data("cfg"); var rcfg={}; rcfg.param=cfg.param; rcfg.cmpt_config=cfg.cmpt_config; rcfg.cmpt_uuid=cfg.cmpt_uuid; rcfg.id=cfg.id; rcfg.width=cfg.width; rcfg.height=cfg.height; cfgs.push(rcfg); } $.cuajax({ url : 'wdk?action=wdk.pub&method=call_service&ajaxparam=' + new Date().getTime(), data : { _SRVNAME:'service.pf.customized', _SRVMETHOD:'personal_update', _DATA : $.json2str({ user_uuid:_account_id, page_config:$.json2str(cfgs) }) }, success:function(data){ data=$.str2json(data); if(data.code==0){ alert(data.desc); return; } }, error:function(e){ alert("出现网络错误,保存设置失败。"); } }); } function addItemByData(r){ var item=addItem(r.id); setItem(item,r); setItemData(item,r); } function setItemData(item,r){ r.id=item.attr("id"); item.data("cfg",r); var url = r.cmpt_url; if(url.indexOf("?")>0){ url=url+"&widgetuuid="+item.attr("id"); }else{ url=url+"?widgetuuid="+item.attr("id"); } if(r.param){ url+="¶m="+$.urlparam_encode($.json2str(r.param)); } if(r.cmpt_config!=""){ url+="&config="+$.urlparam_encode(r.cmpt_config); } item.find(".d-iframe").attr("src",url); item.css("width",r.width); item.css("height",r.height); } function setItem(item,r){ item.find(".d-del-btn").on("click",function(){ var item=$($(this).parents(".d-item")[0]); item.remove(); save(); }); item.hover(function(){ if($(".d-con").hasClass("d-itemeditor")){ $(this).find(".d-header").css("top","5px"); $(this).find(".d-config").css("display","table"); } },function(){ if($(".d-con").hasClass("d-itemeditor")){ $(this).find(".d-header").css("top","100%"); $(this).find(".d-config").css("display","none"); } }); item.find(".d-cfg-btn").on("click",function(){ var item=$($(this).parents(".d-item")[0]); var wid=$.getUUID(); $.openWin({ id: wid, url:"platform/personhome/config.jsp", title:"组件设置", width:500, height:400, param:item.data("cfg")?item.data("cfg"):{}, onClose:function(){ var r=$.getWinReturn(wid); if(r){ setItemData(item,r); save(); } } }); }); } function addItem(id){ var item=$('<div class="d-item">' +'<div class="d-header">' +'<table class="d-config">' +' <tr>' +' <td><i class="fa fa-list d-cfg-btn">设置</i> <i class="fa fa-remove d-del-btn">删除</i></td>' +' </tr>' +'</table>' +'</div>' +'<div class="d-content">' +'<iframe class="d-iframe" frameborder="0" src="about:blank"></iframe>' +'</div>' +'</div>').insertBefore($(".d-item-add")); item.attr("id",id?id:$.getUUID()); return item; } </script> </head> <body> <!--<div class="d-con"> <div class="d-item-add"> <table class="d-config"> <tr> <td><i class="fa fa-plus-square-o d-add-btn"></i></td> </tr> </table> </div> </div> <div class="d-btn-editor" title="切换为编辑模式"> <i class="fa fa-th" aria-hidden="true"></i> </div>--> </body> </html>