Skip to content

J
jfV5portal
Commit a394e449 by 罗绍泽
Options

动态完成了portal模块

parent bbf66fff
Showing with 1052 additions and 154 deletions
WebContent/custom/js/layout4.js 0 → 100644
$(function(){
//判断ie浏览器ie8以下执行
if(IEVersion()<='8'&&IEVersion()!='-1'){
$.fancybox.open('<div style="line-height:20px;">ie浏览器版本过低,请使用高版本浏览器</div>')
}
/*//index_center下的导航点击效果
$(".index_center>a").each(function(){
$this = $(this);
var hrefArray=location.href.split("?")[0];
// console.log(hrefArray)
// console.log($this[0].href)
if($this[0].href==hrefArray){
$this.addClass('layout_center_navClick');
}
});*/
//初始化导航数据
init_index_nav();
})
//初始化导航数据
function init_index_nav(){
var data = jwAppPortletModel.jwAppsPortletDataAction.listAllPortletColumns().rowSet;
var container = $('.index_center');
for(var i = 0;i<data.length;i++){
var text = $('<a></a>').text(data[i].NAME).data('uuid',data[i].UUID);
if(i==0){
text.attr('href','index.jsp');
text.addClass('layout_center_navClick');
}
else{
text.attr('href','index2.jsp');
}
container.append(text);
}
}
//判断ie浏览器
function IEVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7) {
return 7;
} else if(fIEVersion == 8) {
return 8;
} else if(fIEVersion == 9) {
return 9;
} else if(fIEVersion == 10) {
return 10;
} else {
return 6;//IE版本<=7
}
} else if(isEdge) {
return 'edge';//edge
} else if(isIE11) {
return 11; //IE11
}else{
return -1;//不是ie浏览器
}
}
\ No newline at end of file
WebContent/footer.jsp
......@@ -3,3 +3,4 @@
<div>当前版本 <span class="login_footer_span2">1.0</span>技术支持 由 浙江杰夫兄弟智慧科技有限公司技术部<span class="login_footer_span2"> 提供</span>Copyright &copy; 2018-2020 浙江杰夫兄弟智慧科技有限公司 版权所有</div>
<div>页面分辨率支持1024X768及以上 , 支持ie8以上、chrome、Firefox、360浏览器</div>
</div>
<div style="height:50px;"></div>
\ No newline at end of file
WebContent/jfcas04/application.jsp 0 → 100644
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!-- xcConfirm的css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/plug/xcConfirm/css/xcConfirm.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/js/jquery-1.8.2.min.js"></script>
<!-- fancyBox的js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/plug/fancyBox/js/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/plug/fancyBox/js/jquery.fancybox.js?v=2.1.3"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/plug/fancyBox/js/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/plug/fancyBox/js/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/plug/fancyBox/js/jquery.fancybox-media.js?v=1.0.5"></script>
<!-- xcConfirm的js -->
<script src="${pageContext.request.contextPath}/lib/plug/xcConfirm/js/xcConfirm.js"></script>
<script type="text/javascript">
var ctx='${pageContext.request.contextPath}';
</script>
<style>
body{
font-size: 14px;
color: #333;
font-family:"Microsoft YaHei";
}
a{
color:inherit;
text-decoration:none !important;
}
*{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
.index_application_header{
overflow:hidden;
}
.index_application_header_left{
float:left;
}
.index_application_header_left>img{
vertical-align: bottom;
}
.index_application_header_left>span{
font-size:25px;
font-weight:bold;
}
.index_application_header_right{
float:right;
height:35px;
border: 2px solid #1887f6;
border-radius: 5px;
background: #1887f6;
}
.index_application_header_right>input{
height: 31px;
border:none;
line-height:31px;
padding-left:10px;
width:200px;
outline:none;
}
.index_application_header_right>div{
float: right;
width: 50px;
cursor: pointer;
text-align: center;
padding-top: 6px;
}
.index_application{
box-shadow:0 0 5px #af9d9d;
margin-top:30px;
overflow:hidden;
}
.index_application_left{
float:left;
background:#eee;
width:250px;
border-right:1px solid #ccc;
margin-bottom: -1000px;
padding-bottom: 1000px;
}
.index_application_left>div{
border-bottom: 1px solid #ccc;
height: 50px;
padding: 0px 20px 0;
line-height: 50px;
cursor:pointer;
}
.index_application_left>div>span:first-child{
font-size:16px;
}
.index_application_left>div>span:first-child+span{
float:right;
}
.index_application_left>div:hover{
background:white;
}
.index_application_left_click{
background:white;
}
.index_application_right{
margin-left:270px;
margin-bottom: -1000px;
padding-bottom: 1000px;
margin-top:20px;
}
.index_application_show_tabs{
height:30px;
border-bottom:1px solid #ccc;
}
.index_application_show_tabs>span{
display: inline-block;
height:30px;
line-height:30px;
padding:0 10px;
text-align: center;
margin-right:15px;
background:#eee;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
cursor:pointer;
}
.index_application_show_tabs>span:hover{
background:white;
}
.index_application_show_tabs_click{
background:white !important;
}
.index_application_show_tabs_content{
margin-top:30px;
}
.index_application_show_tabs_content>div{
display: inline-block;
width: 150px;
height: 160px;
box-shadow: 7px 7px 5px #af9d9d;
margin-left: 30px;
margin-bottom: 30px;
border: 1px solid #ccc;
border-radius:5px;
padding:3px;
background:white;
vertical-align: top;
}
.index_application_show_tabs_content_div{
border:1px solid #ccc;
border-radius:5px;
background:#eee;
position:relative;
height:100%;
}
.index_application_show_tabs_content_div>div:first-child{
border:1px solid #ccc;
border-radius:10px;
width:60px;
height:60px;
margin:10px auto 5px;
background:white;
padding:10px;
}
.index_application_show_tabs_content_text{
text-align:center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 15px;
font-weight:bold;
}
.index_application_show_tabs_content_img{
background: #B50000;
height: 30px;
line-height: 28px;
text-align: center;
color: white;
margin-top: 3px;
cursor: pointer;
}
.index_application_show_tabs_content_img:hover{
opacity:0.8;
}
.index_application_show_tabs_content_img>img{
vertical-align: sub;
margin-right:5px;
}
</style>
<div class="index_application_header">
<div class="index_application_header_left">
<img src="${ctx}/custom/images/index_application.png" width="32" height="32"/>
<span>应用中心</span>
</div>
<div class="index_application_header_right">
<input type="text" placeholder="搜索应用">
<div><img src="${ctx}/custom/images/index4_search.png" height="22" /></div>
</div>
</div>
<div class="index_application">
<div class="index_application_left">
<div class="index_application_left_click">
<span>全部应用</span>
<span>></span>
</div>
<div>
<span>未安装</span>
<span>></span>
</div>
<div>
<span>已安装</span>
<span>></span>
</div>
</div>
<div class="index_application_right">
<div class="index_application_show">
<div class="index_application_show_tabs">
<span class="index_application_show_tabs_click">全部应用</span><span>教学类</span><span>管理类</span><span>服务类</span><span>娱乐类</span><span>默认应用</span>
</div>
<div class="index_application_show_tabs_container">
<div class="index_application_show_tabs_content">
<div>
<div class="index_application_show_tabs_content_div">
<div><img SRC="${ctx}/custom/images/index_application_img.png" width="40" height="40"/></div>
<div class="index_application_show_tabs_content_text">组织结构组织结构</div>
<div class="index_application_show_tabs_content_text">(用户安装)</div>
<div class="index_application_show_tabs_content_img" onclick="index_application_isLoad(this)"><img src="${ctx}/custom/images/index_application_unLoad.png" width="16" height="16"/><span>卸载</span></div>
</div>
</div>
<div>
<div class="index_application_show_tabs_content_div">
<div><img SRC="${ctx}/custom/images/index_application_img.png" width="40" height="40"/></div>
<div class="index_application_show_tabs_content_text">组织结构组织结构</div>
<div class="index_application_show_tabs_content_text">(用户安装)</div>
<div class="index_application_show_tabs_content_img" style="background:#1887f6;" onclick="index_application_isLoad(this)"><img src="${ctx}/custom/images/index_application_load.png" width="16" height="16"/><span>安装</span></div>
</div>
</div>
<div>
<div class="index_application_show_tabs_content_div">
<div><img SRC="${ctx}/custom/images/index_application_img.png" width="40" height="40"/></div>
<div class="index_application_show_tabs_content_text">组织结构组织结构</div>
<div class="index_application_show_tabs_content_text">(用户安装)</div>
<div class="index_application_show_tabs_content_img" onclick="index_application_isLoad(this)"><img src="${ctx}/custom/images/index_application_unLoad.png" width="16" height="16"/><span>卸载</span></div>
</div>
</div>
<div>
<div class="index_application_show_tabs_content_div">
<div><img SRC="${ctx}/custom/images/index_application_img.png" width="40" height="40"/></div>
<div class="index_application_show_tabs_content_text">组织结构组织结构</div>
<div class="index_application_show_tabs_content_text">(用户安装)</div>
<div class="index_application_show_tabs_content_img" style="background:#1887f6;" onclick="index_application_isLoad(this)"><img src="${ctx}/custom/images/index_application_load.png" width="16" height="16"/><span>安装</span></div>
</div>
</div>
<div>
<div class="index_application_show_tabs_content_div">
<div><img SRC="${ctx}/custom/images/index_application_img.png" width="40" height="40"/></div>
<div class="index_application_show_tabs_content_text">组织结构组织结构</div>
<div class="index_application_show_tabs_content_text">(用户安装)</div>
<div class="index_application_show_tabs_content_img" onclick="index_application_isLoad(this)"><img src="${ctx}/custom/images/index_application_unLoad.png" width="16" height="16"/><span>卸载</span></div>
</div>
</div>
<div>
<div class="index_application_show_tabs_content_div">
<div><img SRC="${ctx}/custom/images/index_application_img.png" width="40" height="40"/></div>
<div class="index_application_show_tabs_content_text">组织结构组织结构</div>
<div class="index_application_show_tabs_content_text">(用户安装)</div>
<div class="index_application_show_tabs_content_img" style="background:#1887f6;" onclick="index_application_isLoad(this)"><img src="${ctx}/custom/images/index_application_load.png" width="16" height="16"/><span>安装</span></div>
</div>
</div>
<div>
<div class="index_application_show_tabs_content_div">
<div><img SRC="${ctx}/custom/images/index_application_img.png" width="40" height="40"/></div>
<div class="index_application_show_tabs_content_text">组织结构组织结构</div>
<div class="index_application_show_tabs_content_text">(用户安装)</div>
<div class="index_application_show_tabs_content_img" onclick="index_application_isLoad(this)"><img src="${ctx}/custom/images/index_application_unLoad.png" width="16" height="16"/><span>卸载</span></div>
</div>
</div>
<div>
<div class="index_application_show_tabs_content_div">
<div><img SRC="${ctx}/custom/images/index_application_img.png" width="40" height="40"/></div>
<div class="index_application_show_tabs_content_text">组织结构组织结构</div>
<div class="index_application_show_tabs_content_text">(用户安装)</div>
<div class="index_application_show_tabs_content_img" style="background:#1887f6;" onclick="index_application_isLoad(this)"><img src="${ctx}/custom/images/index_application_load.png" width="16" height="16"/><span>安装</span></div>
</div>
</div>
</div>
</div>
<!-- end -->
</div>
</div>
</div>
<script>
$(function(){
//左边导航的切换
$('.index_application_left>div').bind('click',function(){
$('.index_application_left_click').toggleClass('index_application_left_click');
$(this).addClass('index_application_left_click');
switch ($(this).find('span').eq(0).text()) {
case '全部应用':
$('.index_application_show_tabs_content>div').each(function(index,element){
$(element).show();
})
break;
case '未安装':
$('.index_application_show_tabs_content>div').each(function(index,element){
$(element).show();
if($(element).find('.index_application_show_tabs_content_img').find('span').text()!='安装'){
$(element).hide();
}
})
break;
case '已安装':
$('.index_application_show_tabs_content>div').each(function(index,element){
$(element).show();
if($(element).find('.index_application_show_tabs_content_img').find('span').text()!='卸载'){
$(element).hide();
}
})
break;
default:
break;
}
})
//右边导航的切换
$('.index_application_show_tabs>span').bind('click',function(){
$('.index_application_show_tabs_click').toggleClass('index_application_show_tabs_click');
$(this).addClass('index_application_show_tabs_click');
})
})
//安装获得卸载
function index_application_isLoad(handler){
var txt;
var option;
if($(handler).text()=='卸载'){
txt= "是否要卸载该应用!!!";
option = {
title: "卸载提示",
onOk: function(){
$(handler).css('background','#1887f6');
$(handler).find('span').text('安装');
$(handler).find('img').attr('src',ctx+'/custom/images/index_application_load.png');
if($('.index_application_left_click').find('span').eq(0).text()!='全部应用'){
$(handler).parent().parent().hide();
}
$('.fancybox-iframe',window.parent.document).parent().parent().parent().find('.fancybox-close').unbind().bind('click',function(event){
event.stopPropagation();
index_application_close();
});
$('.fancybox-iframe',window.parent.document).parents('.fancybox-overlay').not('.fancybox-type-iframe').unbind().bind('click',function(){
index_application_close();
})
},
onCancel:function(){
}
}
}
else{
txt= "是否要安装该应用!!!";
option = {
title: "安装提示",
onOk: function(){
$(handler).css('background','#b50000');
$(handler).find('span').text('卸载');
$(handler).find('img').attr('src',ctx+'/custom/images/index_application_unLoad.png');
if($('.index_application_left_click').find('span').eq(0).text()!='全部应用'){
$(handler).parent().parent().hide();
}
$('.fancybox-iframe',window.parent.document).parent().parent().parent().find('.fancybox-close').unbind().bind('click',function(event){
event.stopPropagation();
index_application_close();
});
$('.fancybox-iframe',window.parent.document).parents('.fancybox-overlay').not('.fancybox-type-iframe').unbind().bind('click',function(){
index_application_close();
})
},
onCancel:function(){
}
}
}
window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning,option);
}
//关闭后重新渲染应用中心
function index_application_close(){
console.log('关闭')
}
</script>
WebContent/jfcas04/css/common.css
......@@ -436,6 +436,21 @@ a{
.index_container_two_right_text>div:hover>label{
color:#1887f6;
}
.index_container_news{
margin-bottom:18px;
}
.index_container_news>div{
margin: 18px 20px 0;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.index_container_news>div:hover{
text-decoration: underline;
color:#1887f6;
}
.index_container_two_left_echarts_container{
position: relative;
}
......@@ -503,13 +518,40 @@ a{
position:fixed;
bottom:0px;
background:#ccc;
cursor: pointer;
z-index:5;
display:block;
height:64px;
width:1200px;
height:50px;
line-height:50px;
}
.index_insert_module>span{
display:inline-block;
float:right;
height:30px;
line-height:30px;
text-align: center;
color:white;
padding:0 10px;
border-radius:5px;
margin-right:20px;
cursor: pointer;
margin-top:10px;
}
.index_insert_module>span:first-child,.index_insert_module>span:first-child+span,.index_insert_module>span:first-child+span+span{
background:#1887f6;
}
.index_insert_module>span:first-child+span+span+span{
background:red;
display:none;
}
.index_insert_module>span:first-child+span+span+span+span{
background:#f90;
display:none;
}
.index_insert_module>span:not(.index_module_tip):hover{
opacity:0.7;
}
.index_module_tip{
cursor: text !important;
}
/*****************************************/
.index_showModule_container{
overflow:hidden;
......@@ -658,7 +700,7 @@ a{
margin-right:10px;
}
.index_changeSmall_calendar{
padding-top: 19px;
padding-top: 17px;
}
/******************其他模块的放大*******/
.index_container_big{
......@@ -697,9 +739,34 @@ a{
vertical-align: top;
margin: 0 0.5% 20px;
}
/*******************************************************/
.index_module_select{
height:25px;
ontline:none;
width:120px;
}
.index_module_insertBtn{
font-size: 18px;
margin-top: 20px;
margin-left: 20px;
color: #1887f6;
font-weight: bold;
display: inline-block;
}
.index_module_infoTitle{
color:#1887f6;
font-weight: bold;
border-bottom: 1px solid #ccc;
padding-bottom: 13px;
font-size: 18px;
letter-spacing: 3px;
}
.index_module_infoContent{
letter-spacing: 3px;
text-indent: 20px;
line-height: 20px;
margin-top: 10px;
}
/********************超过1200px的屏幕时******************/
@media screen and (min-width:1200px){
.index_container_application_text>div{
......
WebContent/jfcas04/header.jsp
......@@ -49,7 +49,7 @@
<!-- echarts的js -->
<script src="${pageContext.request.contextPath}/lib/js/echarts.js"></script>
<!-- 通用的js -->
<script src="${pageContext.request.contextPath}/custom/js/layout.js"></script>
<script src="${pageContext.request.contextPath}/custom/js/layout4.js"></script>
<script src="${pageContext.request.contextPath}/custom/js/jquery.extend.js"></script>
<!-- fullcalendar(日历)的js -->
<script src='${pageContext.request.contextPath}/lib/plug/fullcalendar/lib/moment.min.js'></script>
......@@ -62,6 +62,10 @@
<!-- easyui的js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/plug/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/plug/jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>
<!-- 调用api时的js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jwapp/common/js/lang_json.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jwapp/pages/portlet/js/jwAppPortletModule.js" charset="utf-8"></script>
<script type="text/javascript">
var ctx='${pageContext.request.contextPath}';
</script>
\ No newline at end of file
WebContent/jfcas04/index.jsp
......@@ -262,7 +262,7 @@
<!-- 添加模块的容器 -->
<div class="index_insert_module">
<span>确定</span><span>取消</span>
<span onclick="index_application(this)">应用管理</span><span onclick="index_module_insert(this)">新增资源</span><span onclick="index_module_custom(this)">自定义资源</span><span onclick="index_cancel_module(this)">取消</span><span onclick="index_update_module(this)">确定</span><span class="index_module_tip" style="display:none;">布局发生了修改,请及时保存...</span>
</div>
</body>
......
WebContent/jfcas04/js/index.js
//全局存放下拉框的数据
var index_module_selectData ;
$(function(){
//页面加载时给全局变量赋值
index_module_selectData=jwAppPortletModel.jwAppsPortletDataAction.listAllPTemplate({FIELD_COLUMN_ID:$('.layout_center_navClick').data('uuid')}).rowSet;
//初始化地图
init_index_map();
......@@ -12,73 +16,135 @@ $(function(){
//模块的拖动效果
$( ".index_container" ).sortable({
handle:'.index_container_header',//限制排序的动作只能在item元素中的某个元素开始。
cancel:".index_container_header>img,.index_module_noMove,.index_container_big",//图片都禁止拖动
cancel:".index_container_header>img,.index_module_noMove,.index_container_big,.index_module_select",//图片都禁止拖动
connectWith: ".index_container", //可放置的位置
placeholder: "index_module_sortable", //提示的样式
opacity: 0.5,//拖动的透明度
revert: true, //缓冲效果
stop: function(event, ui) {
/*stop: function(event, ui) {
index_update_module();
},*/
update:function(event, ui){
$('.index_insert_module>span').eq(3).show();
$('.index_insert_module>span').eq(4).show();
$('.index_insert_module>span').eq(2).hide();
//显示提示信息
$('.index_insert_module>.index_module_tip').show();
index_module_edit();
}
});
//初始化模块
init_index_module();
//动态添加新增模块的宽度
$('.index_insert_module').css('width',$('.index_footer').width());
})
//初始化模块
function init_index_module(){
$.ajax({
type:'post',
url:ctx+'/result.json',
success:function(data){
var data = JSON.parse(data).rowSet;
//d6926714-c220-4a7e-9ec0-3a23caebb179
var data = jwAppPortletModel.jwAppsPortletDataAction.listAllPTemplateByUser({FIELD_COLUMN_ID:$('.layout_center_navClick').data('uuid')}).rowSet;
//渲染模块
index_load_module(data);
}
//渲染模块
function index_load_module(data){
//先清除之前的html
$('.index_container>.index_module').remove();
//把原来的json数据保存起来
//$('.index_container').data('jsonData',data);
for(var i = 0 ;i < data.length ; i++){
//整体布局
var parentContainer=$("<div></div>").addClass('index_module');
$($('.index_container>.index_module_noMove')[0]).before(parentContainer);
//正文填充
index_module_fillContent(parentContainer,data[i]);
}
}
//根据一个容器和某一个模块的数据数据去填充容器,如果传来下拉框的数据时,再创建下拉框
function index_module_fillContent(parentContainer,data,selectJson){
var top=$("<div></div>").addClass('index_container_header');
var context=$("<div></div>").addClass('index_module_container');
parentContainer.append(top).append(context);
//top头部布局
top.append('<label class='+ data.ICON_CSS +'></label>');
top.append('<span style="margin-right:5px;">'+data.TITLE+'</span>');
top.append('<span>'+data.ENG_TITLE+'</span>');
//是否传入下拉框
if(selectJson){
top.find('span').hide();
//显示下拉框
var selectData = selectJson;
var select = $('<select></select>').addClass('index_module_select').bind('change',function(){
index_module_select($(this),selectData);
});
//过滤数据
select.bind('click',function(){
var selectData = index_module_selectFilterData(index_module_selectData,$(this).prev().prev().text());
//清除之前的数据
select.html('');
for(var i=0;i<selectData.length;i++){
var option = $('<option></option>').text(selectData[i].NAME).data('json',selectData[i]);
if($(this).prev().prev().text()==selectData[i].NAME){
option.attr('selected','selected');
}
select.append(option);
}
});
//一开始就加载一个
var option = $('<option></option>').text(top.find('span').eq(0).text());
select.append(option);
//option.attr('selected','selected');
top.append(select);
select.click();
}
top.append('<img src="'+ctx+'/custom/images/index4_sectionover.png" width="17" height="17" onclick="index_module_remove(this)">');
//是否显示最大按钮
if(data.MAX_BTN==1){
top.append('<img src="'+ctx+'/custom/images/index4_sectionbig.png" width="17" height="17" onclick="index_changeBig_calendar(this)">');
}
top.append('<img src="'+ctx+'/custom/images/index4_sectionsmall.png" width="17" height="17" onclick="index_module_toggle(this)">');
//初始化容器宽度
var width;
switch (data[i].width) {
case '1':
switch (data.WIDTH) {
case 1:
width='32%';
break;
case '2':
case 2:
width='65.5%';
break;
case '3':
case 3:
width='100%';
break;
default:
width='32%';
break;
}
//整体布局
var parentContainer=$("<div></div>").css('width',width).addClass('index_module');
var top=$("<div></div>").addClass('index_container_header');
var context=$("<div></div>").addClass('index_module_container');
parentContainer.append(top).append(context);
$($('.index_container>.index_module_noMove')[0]).before(parentContainer);
//top头部布局
top.append('<label class='+ data[i].ICON_CSS +'></label>');
top.append('<span style="margin-right:5px;">'+data[i].TITLE+'</span>');
top.append('<span>'+data[i].ENG_TITLE+'</span>');
top.append('<img src="'+ctx+'/custom/images/index4_sectionover.png" width="17" height="17" onclick="index_module_remove(this)">');
top.append('<img src="'+ctx+'/custom/images/index4_sectionbig.png" width="17" height="17" onclick="index_changeBig_calendar(this)">');
top.append('<img src="'+ctx+'/custom/images/index4_sectionsmall.png" width="17" height="17" onclick="index_module_toggle(this)">');
//正文填充
switch (data[i].P_TYPE) {
context.parent().css('width',width);
switch (data.P_TYPE) {
case '0':
//手工录入
console.log(手工录入)
//存在样式时
if(data.P_STYLE){
context.append('<style type="text/css">'+ data.P_STYLE +'</style>')
}
context.append(data.CONTENT);
break;
case '1':
//单点集成
//添加加载时的效果
context.append($.jfbrother.loadStyle());
var iframe = $('<iframe src="'+ data[i].URL +'" frameborder="0" width="100%" height="100%" ></iframe>');
var iframe = $('<iframe src="'+ data.URL +'" frameborder="0" width="100%" height="100%" ></iframe>');
context.append(iframe);
//iframe加载完之后的处理
......@@ -89,17 +155,21 @@ function init_index_module(){
//RSS订阅
//添加加载时的效果
context.append($.jfbrother.loadStyle());
$.jfbrother.readRSS(data[i].URL,context,function(rss,context){
$.jfbrother.readRSS(data.URL,context,function(rss,context){
//去掉加载时的效果
context.html('');
var item = rss.rss.channel.item;
var itemContainer = $('<div class="index_container_two_right_text"></div>');
for(var i = 0 ; i<item.length;i++){
var itemDiv = $('<div></div>').data('item',item[i]).bind('click',function(){
if(data.IS_POP=='0'){
//1.弹出框
$.fancybox.open({href:$(this).data('item').link,type: 'iframe','width':$('.index_container').width()});
}
else{
//2.新页面
//window.open(item[i].link);
window.open($(this).data('item').link);
}
});
itemDiv.hover(function(){
$(this).find('label').stop().animate({'marginRight':'0'});
......@@ -107,7 +177,7 @@ function init_index_module(){
$(this).find('label').stop().animate({'marginRight':'10px'});
})
var itemTitle=$('<span></span>').text(item[i].title);
var itemImg = $('<label></label>').text('<');
var itemImg = $('<label></label>').text('>');
itemDiv.append(itemImg).append(itemTitle)
itemContainer.append(itemDiv);
}
......@@ -117,81 +187,70 @@ function init_index_module(){
break;
case '4':
//模拟登录
//1.先做登录
//2.再请求一个iframe
var iframe = $('<iframe src="'+ data[i].URL +'" frameborder="0" width="100%" height="100%" ></iframe>');
//添加加载时的效果
context.append($.jfbrother.loadStyle());
//1.先做模拟登录
var web_info= data.WEB_INFO;
//新建一个iframe加到body去
var index_module_iframeContainer = $('<iframe width="0" height="0" frameborder="0" />').attr('name',data.PORTLET_ID).attr('src',data.URL);
$(document.body).append(index_module_iframeContainer);
var base = new Base64();
//创建表单
var info_form=$('<form style="display:none"></form>').attr('action',web_info.URL).attr('target',data.PORTLET_ID);
var info_input=web_info.FORM_NAME.split(',');
var info_userName=$('<input />').attr('name',info_input[0]).val(web_info.USER_ID);
var info_password=$('<input />').attr('name',info_input[1]).val(base.decode(web_info.USER_PWD));
info_form.append(info_userName).append(info_password);
context.append(info_form);
//表单提交
info_form.submit();
//表单提交的iframe加载完成时
ifame_isLoad(index_module_iframeContainer,function(){
//去除表单
info_form.remove();
//再请求一个iframe
var iframe = $('<iframe src="'+ index_module_iframeContainer.attr('src') +'" frameborder="0" width="100%" height="100%"></iframe>');
//去除之前创建的iframe
index_module_iframeContainer.remove();
context.append(iframe);
ifame_isLoad(iframe);
});
break;
case '5':
//内容发布
context.append(data[i].TAKE_CONTENT);
//内容发布,列表
var listContainer = $('<div></div>').addClass('index_container_two_right_text');
var infos = data.INFOS;
for(var i= 0;i<infos.length;i++){
var infos_title = $('<div></div>').data('info',infos[i]);
infos_title.hover(function(){
$(this).find('label').stop().animate({'marginRight':'0'});
},function(){
$(this).find('label').stop().animate({'marginRight':'10px'});
})
infos_title.append('<label>></label>');
infos_title.append('<span>'+ infos[i].TITLE +'</span>');
infos_title.bind('click',function(){
var info = $(this).data('info');
if(data.IS_POP=='0'){
//弹出
$.fancybox.open('<div style="min-height:500px;min-width:500px;"><div class="index_module_infoTitle">'+info.TITLE+'</div><div class="index_module_infoContent">'+info.CONTENT+'</div></div>');
}
else{
//新页面
alert('新页面')
}
})
listContainer.append(infos_title);
}
context.append(listContainer);
break;
default:
console.log('default')
break;
}
//context.load(data[i].url+'?uniqueKey='+data[i].uniqueKey);
//绑定数据
parentContainer.data('data',data[i]);
}
//结束
}
})
/*var data = [
{
'icon':'icon-save',
'width':'1',
'title':'办事大厅',
'englishTitle':'office hall',
'url':'/jfV5portal/jfcas04/portal/office.jsp',
uuid:'02f845bc-566c-408b-ace5-ecebb728bed1',
type:'1'
},
{
'icon':'icon-help',
'width':'1',
'title':'消息中心',
'englishTitle':'Information Center',
'url':'/jfV5portal/jfcas04/portal/information.jsp',
uuid:'02f845bc-566c-408b-ace5-ecebb728bed2',
type:'2'
},
{
'icon':'icon-tip',
'width':'1',
'title':'员工信息',
'englishTitle':'Employee information',
'url':'portal/employee.jsp',
uuid:'02f845bc-566c-408b-ace5-ecebb728bed3',
type:'3'
},
{
'icon':'icon-large-chart',
'width':'2',
'title':'分析中心',
uuid:'02f845bc-566c-408b-ace5-ecebb728bed4',
'englishTitle':'Analytic center',
'url':'portal/analytic.jsp',
type:'4'
},
{
'icon':'icon-filter',
'width':'1',
'title':'新闻资讯',
'englishTitle':'News and information',
'url':'portal/news.jsp',
uuid:'02f845bc-566c-408b-ace5-ecebb728bed5',
type:'5'
}
];*/
/*for(var i = 0 ;i < data.length ; i++){
data[i].uniqueKey= "uuid"+data[i].uuid.replace(/-/g,'');
}*/
context.parent().data('data',data);
}
//初始化合作伙伴的效果
......@@ -415,14 +474,20 @@ function index_module_toggle(handler){
}
if($(handler).attr('src')==ctx+'/custom/images/index4_sectionsmall.png'){
$(handler).attr('src',ctx+'/custom/images/index4_sectionlarge.png');
//如果存在最大功能就隐藏
if($(handler).parents('.index_module').data('data')&&$(handler).parents('.index_module').data('data').MAX_BTN==1){
//隐藏变大功能
$(handler).prev().remove();
}
}
else{
$(handler).attr('src',ctx+'/custom/images/index4_sectionsmall.png');
//如果存在最大功能就显示
if($(handler).parents('.index_module').data('data')&&$(handler).parents('.index_module').data('data').MAX_BTN==1){
//显示变大功能
$(handler).before('<img src="'+ctx+'/custom/images/index4_sectionbig.png" width="17" height="17" onclick="index_changeBig_calendar(this)">');
}
}
$(handler).parent().nextAll().slideToggle();
}
......@@ -432,11 +497,12 @@ function index_module_remove(handler){
var option = {
title: "删除提示",
onOk: function(){
//删除模板的html代码
index_hide_active('shake',$(handler).parent().parent(),function(){
$(handler).parent().parent().remove();
index_update_module();
//出现新增模块提示
$('.index_insert_module').fadeIn();
//显示模块修改提示
index_module_custom($('.index_insert_module').find('span').eq(2));
});
},
onCancel:function(){
......@@ -446,34 +512,96 @@ function index_module_remove(handler){
window.wxc.xcConfirm(txt, window.wxc.xcConfirm.typeEnum.warning,option);
}
//修改左中右模块到数据库
function index_update_module(){
//修改模块到数据库
function index_update_module(handler){
//1.把现在的布局保存在index_container容器中
var newJson = [];
$('.index_module').each(function(index,element){
newJson.push($(element).data('data'))
//去掉下拉框
$(element).find('.index_container_header>span').show();
$(element).find('.index_container_header>select').hide();
//显示标题
})
//$('.index_container').data('jsonData',newJson);
//2.存放到数据库
var portlets=[];
for(var i=0;i<newJson.length;i++){
var requestObj={};
requestObj.PORTLET_ID=newJson[i].PORTLET_ID;
portlets.push(requestObj);
}
var layout={
columnsId:$('.layout_center_navClick').data('uuid'),
portlets:portlets
};
layout=JSON.stringify(layout);
var result = jwAppPortletModel.jwAppsPortletActAction.saveLayout({
layout: layout
});
if(result.NAME==2){
//3.隐藏确定和取消按钮
$(handler).prev().hide();
$(handler).hide();
//显示自定义资源
$(handler).prev().prev().show();
//隐藏提示信息
$('.index_insert_module>.index_module_tip').hide();
}
}
console.log(1)
//取消模块的移动
function index_cancel_module(handler){
//根据index_container原来的布局数据去重新渲染下
//index_load_module($('.index_container').data('jsonData'));
//隐藏确定和取消按钮
$(handler).next().hide();
$(handler).hide();
//显示自定义资源
$(handler).prev().show();
//隐藏提示信息
$('.index_insert_module>.index_module_tip').hide();
$('.index_module').each(function(index,element){
//去掉下拉框
$(element).find('.index_container_header>span').show();
$(element).find('.index_container_header>select').hide();
//显示标题
})
}
//放大功能
function index_changeBig_calendar(handler){
if($(handler).prevAll('select').css('display')=='inline-block'){
$.fancybox.open('<div style="color: #1887f6;font-weight: bold;font-size:18px;">正处于编辑状态,无法放大...</div>');
setTimeout('$.fancybox.close()',1000);
return;
}
//先判断下其他模块有没有放大
if($('.index_container_big').length!=0){
$('.index_container_big').find('.index_container_header>img').click()
}
var data = $(handler).parents('.index_module').data('data');
$(handler).parents('.index_module').css({'top':$(handler).offset().top-14,'width':$('.index_container').outerWidth(),'left':$('.index_container').offset().left});
$(handler).parents('.index_module').css({'top':$(handler).offset().top-14,'width':$('.index_footer').outerWidth(),'left':$('.index_footer').offset().left});
$(handler).parents('.index_module').addClass('index_container_big');
var $imgParent = $(handler).parent();
$imgParent.find('img').remove();
$imgParent.append('<img src="'+ ctx +'/custom/images/index4_sectionsmall.png" style="display:block;" width="17" height="17" onclick="index_changeSmall_calendar(this)">');
$imgParent.next().css({'maxHeight':'500px','height':'auto'});
switch (data.width) {
case "1":
$imgParent.next().css({'maxHeight':'500px','height':'auto','minHeight':'315px'});
if(!data){
$imgParent.parent().data("width", "32%");
return;
}
switch (data.WIDTH) {
case 1:
$imgParent.parent().data("width", "32%");
break;
case "2":
case 2:
$imgParent.parent().data("width", "65.5%");
break;
case "3":
case 3:
$imgParent.parent().data("width", "100%");
break;
default:
......@@ -493,7 +621,7 @@ function index_changeSmall_calendar(handler){
}
//判断ifame是否加载完成,参数jquery的iframe对象
function ifame_isLoad(iframe){
function ifame_isLoad(iframe,callback){
if(iframe[0].attachEvent){
//ie浏览器
iframe[0].attachEvent("onreadystatechange", function() {
......@@ -502,7 +630,12 @@ function ifame_isLoad(iframe){
if (iframe[0].readyState === "complete" || iframe[0].readyState == "loaded") {
//代码能执行到这里说明已经载入成功完毕了
//要清除掉事件
if(typeof callback == 'function'){
callback();
}
else{
iframe.prev().remove();
}
iframe[0].detachEvent("onreadystatechange", arguments.callee);
//这里是回调函数
}
......@@ -514,7 +647,242 @@ function ifame_isLoad(iframe){
//代码能执行到这里说明已经载入成功完毕了
this.removeEventListener("load", arguments.call, false);
//这里是回调函数
if(typeof callback == 'function'){
callback();
}
else{
iframe.prev().remove();
}
}, false);
}
}
//点击自定义资源时
function index_module_custom(handler){
$(handler).next().show();
$(handler).next().next().show();
$(handler).hide();
index_module_edit();
//显示提示信息
$('.index_insert_module>.index_module_tip').show();
}
//模块的修改
function index_module_edit(){
//如果有模块已经放大时
if($('.index_container_big').length!=0){
$('.index_container_big').find('.index_container_header>img').click();
}
$('.index_module').each(function(index,element){
//隐藏标题
$(element).find('.index_container_header>span').hide();
if($(element).find('select').length!=0){
$(element).find('select').show();
return;
}
//显示下拉框
var select = $('<select></select>').addClass('index_module_select').bind('change',function(){
index_module_select($(this),index_module_selectData);
});
//过滤数据
select.bind('click',function(){
data = index_module_selectFilterData(index_module_selectData,$(this).prev().prev().text());
//清除之前的数据
select.html('');
if($(this).prev().prev().text()=='新增资源'){
select.append('<option selected>请选择资源</option>');
}
for(var i=0;i<data.length;i++){
var option = $('<option></option>').text(data[i].NAME).data('json',data[i]);
if($(this).prev().prev().text()==data[i].NAME){
option.attr('selected','selected');
}
select.append(option);
}
});
//一开始就加载一个
var option = $('<option></option>').text($(element).find('.index_container_header>span').eq(0).text());
select.append(option);
//如果是新增时就新插入一条
if($(element).find('label').next().text()=="新增资源"){
select.prepend('<option selected>请选择资源</option>');
}
$(element).find('.index_container_header>label+span+span').after(select);
select.click();
})
}
//下拉框的数据过滤
function index_module_selectFilterData(data,text){
var newData=[];
var oldData=[];
$('.index_module').each(function(index,element){
var title = $(element).find('.index_container_header>span').eq(0).text();
if(title!=text){
oldData.push(title);
}
})
for(var i = 0;i<data.length;i++){
var flag = true;
for(var j=0; j < oldData.length; j++){
if(data[i].NAME == oldData[j])
flag = false;
}
if(flag){
newData.push(data[i]);
}
}
return newData;
}
//选中的下拉
function index_module_select(handler,selectJson){
var data = $(handler).find('option:selected').data('json');
//先清空现有的html
var parent = $(handler).parents('.index_module');
parent.html('');
//根据json数据去渲染模板
index_module_fillContent(parent,data,selectJson);
}
//新增资源
function index_module_insert(handler){
var parentContainer = $("<div></div>").addClass('index_module');
var top=$("<div></div>").addClass('index_container_header');
var context=$("<div></div>").addClass('index_module_container');
parentContainer.append(top).append(context);
//top头部布局
top.append('<label class="icon-edit"></label>');
top.append('<span style="margin-right:5px;">新增资源</span>');
top.append('<span>Insert Resource</span>');
top.append('<img src="'+ctx+'/custom/images/index4_sectionover.png" width="17" height="17" onclick="index_module_remove(this)">');
top.append('<img src="'+ctx+'/custom/images/index4_sectionbig.png" width="17" height="17" onclick="index_changeBig_calendar(this)">');
top.append('<img src="'+ctx+'/custom/images/index4_sectionsmall.png" width="17" height="17" onclick="index_module_toggle(this)">');
var contextContainer = $('<div class="index_module_insertBtn">请选择资源</div>');
context.append(contextContainer);
$($('.index_container>.index_module_noMove')[0]).before(parentContainer);
index_module_custom($(handler).next());
}
//Base64编码
function Base64() {
// private property
_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
// public method for encoding
this.encode = function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = _utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
_keyStr.charAt(enc3) + _keyStr.charAt(enc4);
}
return output;
}
// public method for decoding
this.decode = function (input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = _keyStr.indexOf(input.charAt(i++));
enc2 = _keyStr.indexOf(input.charAt(i++));
enc3 = _keyStr.indexOf(input.charAt(i++));
enc4 = _keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = _utf8_decode(output);
return output;
}
// private method for UTF-8 encoding
_utf8_encode = function (string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
} else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
} else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
}
// private method for UTF-8 decoding
_utf8_decode = function (utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while ( i < utftext.length ) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
} else if((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i+1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
} else {
c2 = utftext.charCodeAt(i+1);
c3 = utftext.charCodeAt(i+2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
//应用管理的点击
function index_application(handler){
//如果有模块已经放大时
if($('.index_container_big').length!=0){
$('.index_container_big').find('.index_container_header>img').click();
}
$.fancybox.open({href:'application.jsp',type: 'iframe',width:$('.index_container').width()});
}
WebContent/jfcas04/portal/analytic.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String uniqueKey = request.getParameter("uniqueKey").toString();
%>
<div id="<%=uniqueKey %>" class="index_container_two_left_echarts_container">
<jsp:include page="../header.jsp"></jsp:include>
<div class="index_container_two_left_echarts_container">
<div><span>各部门每天办件率情况图表.</span><a href="javascript:void(0)">查看更多</a></div>
<div style="width:100%;height:314px;"></div>
<div id="index_content_echartsContainer" style="width:100%;height:314px;"></div>
</div>
<script>
var <%=uniqueKey %>={
uniqueKey:'<%=uniqueKey %>',
init:function(){
var myChart = echarts.init($('#'+this.uniqueKey).find('div').eq(1)[0]);
$(function(){
init_index_echarts();
})
//初始化echarts
function init_index_echarts(){
var myChart = echarts.init(document.getElementById('index_content_echartsContainer'));
$.get(ctx+'/echarts.json').done(function (data) {
//处理后台接受的数据
......@@ -124,21 +126,7 @@ var <%=uniqueKey %>={
})()
})
})
},
onClose:function(){},
onChangeBig:function(){
},
onchangeSmall:function(){
},
onExpend:function(){},
onUnExpend:function(){}
};
$(function(){
var handle=<%=uniqueKey %>;
handle.init();
})
}
</script>
\ No newline at end of file
WebContent/jfcas04/portal/news.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div class="index_container_two_right_text">
<jsp:include page="../header.jsp"></jsp:include>
<div class="index_container_news">
<div>中纪委“大虎”通报缘何出现重大变化</div>
<div>国家移民管理局挂牌仪式举行 郭声琨出席</div>
<div>国家移民管理局挂牌仪式举行 郭声琨出席</div>
......
WebContent/jfcas04/portal/office.jsp
......@@ -66,7 +66,7 @@ function init_index_fullCalendar() {
},
/*editable : true,*/
/*eventLimit : true, // allow "more" link when too many events*/
events : ctx+'/date.json'
/* events : ctx+'/date.json' */
});
}
......
WebContent/nav4.jsp
......@@ -29,9 +29,7 @@
<div class="indedx_header_logo">
<img src="${ctx}/custom/images/index4_logo.png" width="400" height="80" />
</div>
<div class="index_center">
<a href="index.jsp">首页</a><a href="#">信息中心</a><a href="#">办事大厅</a><a href="#">应用中心</a><a href="#">分析中心</a>
</div>
<div class="index_center"></div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment