Template1.jsp 14.4 KB
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="weaver.hrm.*"%>
<%@ page import="java.util.*"%>
<%@ page import="weaver.general.*"%>
<jsp:useBean id="cmutil" class="weaver.km.util.CommonTransUtil" scope="page" />
<jsp:useBean id="rs" class="weaver.conn.RecordSet" scope="page" />
<% 
	User user = HrmUserVarify.getUser (request , response) ;
	if (user == null){
		response.sendRedirect("/login/Login.jsp");
	    return;
	}
	String userId = user.getUID()+"";
	String mapId = Util.null2String(request.getParameter("mapId"));
	String name = "";
	String remark = "";
	rs.executeSql("select name,remark from KT_Map where deleted=0 and id="+mapId);
	if(rs.next()){
		name = Util.null2String(rs.getString("name"));
		remark = Util.toHtmlMode(rs.getString("remark"));
	}
	int mprogress = Util.getIntValue((String)cmutil.getMapStatus(userId,mapId),0);
	String detailPage = "/knowledgeMap/template/TemplateDetail1.jsp?mId="+mapId;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><%=name %></title>
<script type=text/javascript src="/js/jquery/jquery_wev8.js"></script>
<link href="../js/zDialog/zDialog_e8_wev8.css" type=text/css rel=stylesheet>
<link href="../js/zDialog/e8_zDialog_btn_wev8.css" type=text/css rel=stylesheet>
<script language="javascript" src="../js/zDialog/zDialog_wev8.js"></script>
<script language="javascript" src="../js/weaver_lang_7_wev8.js"></script>
<style>
	body{background:url(/knowledgeMap/images/bg.jpg) no-repeat center top; margin:0 auto;}
	
	.text1{ font-family:Tahoma, Geneva, sans-serif; font-weight:bold; font-size:18px; color:#ebf6ff; text-align:center;}
	.text2{ font-family:Tahoma, Geneva, sans-serif; font-weight:bold; font-size:24px; color:#639dcb; text-align:center;}
	.text3{ font-family:"微软雅黑"; font-size:12px; color:#e1f2ff; text-align:center; line-height:16px;}
	
	.top{height:30px; margin:0 auto; background:url(/knowledgeMap/images/topbg.png) repeat-x; font-family:'微软雅黑'; font-size:14px; color:#edf7ff; line-height:30px; text-align:center;}
	.nav{width:215px; height:490px; float:left; margin-left:30px; margin-top:40px;}
	.listup{ width:210px; height:22px;}
	.listdown{width:210px; height:22px;}
	.listimg{width:210px; height:440px;overflow:hidden}
	
	.listbg1{ background:url(/knowledgeMap/images/listimg_1.png) no-repeat; width:90px; height:90px;}
	.listbg2{ background:url(/knowledgeMap/images/listimg_2.png) no-repeat; width:90px; height:90px;}
	.listbg1{}

	.content{width:790px; height:700px; min-height:500px; float:right; margin-top:72px; margin-left:30px;}
	.content_top{width:100%; height:30px; background:url(/knowledgeMap/images/bg_contenttop.png) repeat-x;}
	.content_top_icon{ background:url(/knowledgeMap/images/icon_title.png) no-repeat; width:16px; height:16px; float:left; margin-top:8px; margin-left:7px; font-family:Tahoma, Geneva, sans-serif; font-size:11px; color:#FFF; text-align:center; line-height:13px;}
	.content_top_title{ line-height:30px; font-family: "微软雅黑"; font-size:12px;font-weight:bold; color:#FFF; width:200px; float:left; margin-left:5px;}
	.content_top_close{ width:11px; height:11px; padding-top:2px; float:right; margin-top:7px; margin-right:10px;}
	.content_text{width:100%;height:670px; background:url(/knowledgeMap/images/bg_contentbg.png);}
	.icon{width:45px; height:auto; float:left; margin-top:405px;}
	.icon1{width:16px; height:16px; margin:0 auto; margin-top:10px;}
	.icon2{width:16px; height:16px; margin:0 auto; margin-top:10px;}
	
	.menu{
		width:90px; height:90px;
		font-family:Tahoma, Geneva, sans-serif; font-weight:bold;
		background:url(/knowledgeMap/images/listimg_1.png) no-repeat;
		font-size:18px; color:#ebf6ff; 
		cursor: pointer;
	}
	.hover{ 
		background:url(/knowledgeMap/images/listimg_2.png) no-repeat; 
		font-size:24px; color:#639dcb; 
	}
	
	.select{ 
		background:url(/knowledgeMap/images/listimg_3.png) no-repeat; 
	}
	.hover2{ 
		background:url(/knowledgeMap/images/listimg_4.png) no-repeat; 
		font-size:24px; color:#ee6d17; 
	}
	.txt_num{
		height: 25px;padding-top: 22px;text-align:center;
	}
	.progress2{
		background: url('/knowledgeMap/images/progress.png') repeat-x;height: 1px;margin-top: 2px;
	}
</style>
</head>

<body>
<table width="100%" style="height: 100%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td height="30px;">
			<div class="top">
				<b><%=name %></b>
			</div>
		</td>
	</tr>
	<tr style="height: 100%">
		<td valign="middle">
			<div style="width:1180px; height:700px; margin:0 auto;">
		    <div class="nav">
		       <div class="listup">
		          <img src="/knowledgeMap/images/btn_up.png"  border="0" onmouseout="this.src='/knowledgeMap/images/btn_up.png'" onmouseover="this.src='/knowledgeMap/images/btn_up_click.png'"  
		          	onclick="moveDown();" style="cursor: pointer;"/>
		       </div>
		       <div class="listimg">
		       	<div id="menulist">
		       	<%
		       		Map tsmap = cmutil.getMAllTStatus(userId,mapId);
		       		int temp = 0;
		       		int count = 0;
		       		int pg = 0;
		       		String pgtext = "";
		       		double themeRate = 0.0;
		       		rs.executeSql("select id,title,rate from KT_MapDetail where deleted=0 and mapId="+mapId+" order by sort,id");
		       		while(rs.next()){
		       			pg = Util.getIntValue((String)tsmap.get(Util.null2String(rs.getString("id"))),0);
		       			themeRate = Util.getDoubleValue(rs.getString("rate"),0.0);
		       			if(pg==0){
		       				pgtext = "此部分未开始";
		       			}else if(pg==100){
		       				pgtext = "此部分已全部完成";
		       			}else{
		       				pgtext = "此部分已完成"+pg+"%";
		       			}
		       			if(count%2 == 0){
		       	%>
		       		<div style=" width:210px; height:90px; margin:0 auto; margin-bottom:20px; margin-top:10px;">
			            <div id="menu_<%=Util.null2String(rs.getString("id")) %>" class="menu" style=" float:left;" _index="<%=count+1 %>" _tId="<%=Util.null2String(rs.getString("id")) %>" _title="<%=Util.null2String(rs.getString("title")) %>" title="<%=pgtext %>" _themeRate="<%=themeRate %>">
			               <div class="txt_num"><%=count+1 %></div>
			               <div class="text3" style="margin-top:18px;">
			               	<b><%=Util.null2String(rs.getString("title")) %></b>
			               </div>
			               <div id="pg_<%=Util.null2String(rs.getString("id")) %>" class="progress2" style="width: <%=pg %>%"></div>
			            </div>
		        <%		}else{ %>
			            <div id="menu_<%=Util.null2String(rs.getString("id")) %>" class="menu" style=" float:right;" _index="<%=count+1 %>" _tId="<%=Util.null2String(rs.getString("id")) %>" _title="<%=Util.null2String(rs.getString("title")) %>" title="<%=pgtext %>" _themeRate="<%=themeRate %>">
				        	<div class="txt_num"><%=count+1 %></div> 
				            <div class="text3" style="margin-top:18px;">
				            	<b><%=Util.null2String(rs.getString("title")) %></b>
				            </div>
				            <div id="pg_<%=Util.null2String(rs.getString("id")) %>" class="progress2" style="width: <%=Util.getIntValue((String)tsmap.get(Util.null2String(rs.getString("id"))),0) %>%"></div>
			            </div>
		          	</div>
		       	<%	
		        		}
		       			count++;
		       		} 
		       		if(count%2 != 0){
		       	%>
		       			<div>
			            </div>
		          	</div>
		       	<%
		       		}
		       		
		       		if(count>8){
		       			if(count%2 != 0){
		       				count += 1;
		       			}
		       			temp = (count - 8)/2 * -110;
		       		}
		       	%>
		         
		          </div>
		       </div>
		       <div class="listdown">
		          <img src="/knowledgeMap/images/btn_down.png"  border="0" onmouseout="this.src='/knowledgeMap/images/btn_down.png'" onmouseover="this.src='/knowledgeMap/images/btn_down_click.png'"  
		          onclick="moveUp();" style="cursor: pointer;"/>
		       </div>
		    </div>
		    <div class="content">
		   	   <div id="content" style="display: none; height: 80%">
			       <div class="content_top">
			          <div id="content_icon" class="content_top_icon">
			             
			          </div>
			          <div id="content_title" class="content_top_title"></div>
			          <div id="btn_close" class="content_top_close">
			            <img src="/knowledgeMap/images/icon_close.png" border="0" onclick="closeContent();" title="关闭" style="cursor: pointer;"/>
			          </div>
			       </div>
			       <div class="content_text">
			       	<iframe id='contentFrame' name='contentFrame' height='100%' width='100%' allowTransparency= "true" style="background: none;"
							 marginwidth="0" marginheight="0" frameborder="0" scrolling='auto' src=''></iframe>
			       </div>
		       </div>
		       <div id="init" style="overflow: auto;height:100%">
			       <div class="content_text" style="background: url('/knowledgeMap/images/bg_contentbg.png') repeat;">
			       	<div style="margin-left: 30px;font-size: 14px;font-weight: bold;padding-top: 30px;font-family: 微软雅黑"><%=name %></div>
                    <div id="remarkComtainer" style="font-size: 12px;height: 80%;font-weight: normal;padding: 30px;font-family: 微软雅黑">
                    <%
                        session.setAttribute("remark_"+mapId,remark);
                    %>
                    <iframe src="/knowledgeMap/template/ShowFckEditorDesc.jsp?sessionname=remark_<%=mapId %>&seth=0" width="100%" height="100%" marginheight="0" marginwidth="0" allowTransparency="true" frameborder="0"></iframe>
                   </div>
			       </div>
		       </div>
		    </div>
		    <div class="icon">
		      <div style="width:45px; height:45px;">
		       <div class="icon2" style="display: none">
		         <a href="#"><img src="/knowledgeMap/images/refresh.png" border="0" /></a>
		       </div>
		      </div>
		      <div style="width:45px; height:45px;">
		       <div class="icon1" style="display: none">
		         <a href="#"><img src="/knowledgeMap/images/setting.png"  border="0"/></a>
		       </div>
		      </div>
		    </div>
		</td>
	</tr>
	<tr>
		<td style="padding-left: 15px;padding-top: 80px;padding-right: 14px;">
			<%
				String mptext = "";
				if(mprogress == 0){
					mptext = "所有内容未开始";
				}else if(mprogress == 100){
					mptext = "所有内容已完成";
				}else{
					mptext = "所有内容已完成" + mprogress + "%";
				}
			%>
			<div id="pg1" style="width: 1180px;height: 20px;background-color:#9B9EA3;margin: 0 auto;" title="<%=mptext%>">
				<div id="pg_txt" style="position: absolute;width:908px;text-align: center;font-family: 微软雅黑;font-size: 11px;color: #fff"><%=mprogress%>%</div>
				<div id="pg" style="background-color:#FE9115;height: 20px;width: <%=mprogress%>%;"></div>
			</div>
		</td>
	</tr>
</table>
  
  
<script type="text/javascript">
	$.ajaxSetup ({
	    cache: false //关闭AJAX相应的缓存
	});
	var init = 1;
	var index = 0;
	$('.menu')
	.bind('mouseover', function() {
		$('.menu').removeClass('hover').removeClass('hover2');
		if(index==$(this).attr("_index")){
			$(this).addClass('hover2');
		}else{
			$(this).addClass('hover');
		}
		
	}).bind('click', function() {
		$('.menu').removeClass('select').removeClass('hover').removeClass('hover2');
		$(this).addClass('select').addClass('hover2');
		index = $(this).attr("_index");
		changeData($(this).attr("_index"),$(this).attr("_title"),$(this).attr("_tId"),$(this).attr("_themeRate"));
	}).bind('mouseout', function() {
		$('.menu').removeClass('hover').removeClass('hover2');
	});

	function changeData(index,title,tId,themeRate){
		if(init==1){
			$('#init').slideUp(300,function(){
				$('#content').slideDown(300,function(){
					$('#content_icon').html(index);
					$('#content_title').html(title);
					$('#contentFrame').attr("src","<%=detailPage%>&tId="+tId+"&themeRate=" + themeRate + "&"+new Date().getTime());
					init = 0;
				});
			});
		}else{

		
		$('#content').animate({ height:0,width:0,marginTop:210,marginLeft:330 },400,null,function(){
			//$(this).css("margin-top","0px");
			$('#content_icon').html("");
			$('#content_title').html("");
			$('#contentFrame').attr("src","");
			//$('#btn_close').show();
			$(this).hide("fast",function(){
				
				$(this).animate({ height:700,width:790,marginTop:0,marginLeft:0 },400,null,function(){
					$('#content_icon').html(index);
					$('#content_title').html(title);
					$('#contentFrame').attr("src","<%=detailPage%>&tId="+tId+ "&themeRate=" + themeRate + "&"+new Date().getTime());
				});
			});
		});

		}
		/**
		$('#content').slideUp(500,function(){
			$('#content_icon').html(index);
			$('#content_title').html(title);
			$('#contentFrame').attr("src","/knowledgeMap/data/KnowledgeDetailShow.jsp");
			$('#content').slideDown(500);
		});
		*/
	}
	function closeContent(){
		//$('#content_icon').html("");
		//$('#content_title').html("新员工入职培训");
		//$('#contentFrame').attr("src","");
		
		$('#content').slideUp(500,function(){
			$('#content_icon').html("");
			$('#content_title').html("");
			$('#contentFrame').attr("src","");
			//$('#btn_close').hide();
			$('#init').slideDown(500);
		});

		$('.menu').removeClass('select').removeClass('hover').removeClass('hover2');
		init=1;
		/**
		$('#content').animate({ height:0,width:0,marginTop:210,marginLeft:330 },500,null,function(){
			$('#content_icon').html("");
			$('#content_title').html("新员工入职培训");
			$('#contentFrame').attr("src","");
			$(this).hide("fast",function(){
				
				$(this).animate({ height:420,width:660,marginTop:0,marginLeft:0 },500,null,function(){
				});
			});
		});
		*/
	}
	var h = 0;
	var menulist=$("#menulist");
	function moveDown(){
	  if(h!=0){
		h +=110;
		menulist.animate({ marginTop:h },300);
	  }
	}
	function moveUp(){
	  if(h!=<%=temp%>){
		h -=110;
		menulist.animate({ marginTop:h },300);
	  }
	}

	function setPg(_width){
		var width = $.trim(_width);
		$("#pg").width(width+"%");
		$("#pg_txt").html(width+"%");
		var mptext = "";
		if(width == 0){
			mptext = "所有内容未开始";
		}else if(width == 100){
			mptext = "所有内容已完成";
		}else{
			mptext = "所有内容已完成"+width +"%";
		}
		$("#pg1").attr("title",mptext);
	}
	function setPg2(tId,_width){
		var width = $.trim(_width);
		$("#pg_"+tId).css("width",width+"%");
		var pgtext = "";
		if(width==0){
			pgtext = "此部分未开始";
		}else if(width==100){
			pgtext = "此部分已全部完成";
		}else{
			pgtext = "此部分已完成"+width+"%";
		}
		$("#menu_"+tId).attr("title",pgtext);
	}
</script>
</body>
</html>