Template6.jsp 13 KB

Raw Blame History Permalink

<%@ page language="java" contentType="text/html; charset=GBK"%>
<%@ page import="weaver.hrm.*"%>
<%@ page import="java.util.*"%>
<%@ page import="weaver.general.*"%>
<jsp:useBean id="cmutil" class="weaver.kt.util.CommonTransUtil" scope="page" />
<jsp:useBean id="transUtil" class="weaver.secondary.util.TransUtil" 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 = "";
    //创建人
    String creater ="";
    rs.executeSql("select name,remark,createrId from KT_Map where deleted=0 and id="+mapId);
    if(rs.next()){
        name = Util.null2String(rs.getString("name"));
        remark = Util.convertDB2Input(rs.getString("remark"));
        creater = transUtil.getHrm(Util.null2String(rs.getString("createrId")));
    }
    int mprogress = Util.getIntValue((String)cmutil.getMapStatus(userId,mapId),0);
    String detailPage = "/knowledgetool/template/TemplateDetail1.jsp?mId="+mapId;
    //文档编号
    String mapNum = ((1000000+Integer.parseInt(mapId))+"").substring(1);
%>
<html>
<head>
<title><%=name %></title>
<script type=text/javascript src="/js/jquery/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/js/init.js"></script>
<style>
	body{
		margin:0;
		padding:0;
		font-size: 12px;
    }
    *{
    	font-family: '微软雅黑';
    }
    a {
		text-decoration: none;
	}
    .top {
		height: 74px;
		margin: 0 0 0 50px;
		border-bottom: 1px solid #CFCFCF;
	}
	.topLeftDiv{
		float: left;
		font-size: 13px;
		width: 200px;
		margin-top: 7px;
	}
	.topLeftDiv div {
		line-height: 20px;
	}
	.titleDiv{
/* 		float: left; */
		font-size: 18px;
		line-height: 108px;
		font-weight: bold;
		text-align: center;
		text-indent: -200px;
		height: 75px;
	}
	.logoDiv{
		background: #fff url('/knowledgetool/images/logo.png') no-repeat 0;
		width: 100px;
		height: 75px;
		top:0;
		right:0;
		position: absolute;
	}
	.leftFrameDiv{
		height:100%;
		width:70px;
		background: #3072D3;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
	}
    .bg-light.lt, .bg-light .lt {
/* 		background-color: #f2f4f8; */
	}
	.cgs-sbox {
		height: 120px;
		position: relative;
/* 		border-bottom: 10px solid #92cf5c; */
	}
	.cgs-sline {
		height: 1px;
		line-height: 1px;
		font-size: 0;
		border: 0 none;
		position: absolute;
		top: 61px;
		left: 4%;
		right: 4%;
		z-index: -1;
		border-bottom: 2px dashed #cacaca;
	}
	.cgs-slist {
		width: 86%;
		padding: 0;
		margin-left: auto;
		margin-right: auto;
		position: absolute;
/* 		top: 30px; */
		left: 0px;
		z-index: 1;
	}
	.cgs-slist li {
		list-style: none;
		float: left;
		width: 14.285%;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
		height: 100px;
	}
	.stepI {
		display: block;
		width: 10px;
		height: 10px;
		background: url('/knowledgetool/images/d.png') no-repeat;
		margin-left: auto;
		margin-right: auto;
		position: absolute;
		top: 58px;
		left: 38px;
		z-index: -1;
	}
	.stepSpanSelect {
		color: #fb6b5b;
	}
	.stepDiv{
		width:86px;
		height: 100px;
		line-height: 20px;
		margin: 0 auto;
		cursor: pointer;
		position: relative;
 		padding-top: 5px;
	}
	.stepSelect,.stepSelectHover {
		background: url('/knowledgetool/images/bg.png') 0 0 no-repeat;
		opacity: 0.8;
	}
	.stepArrow {
		display: none;
		width: 50px;
		height: 40px;
		background: url(../images/step-arrows.png) 0 0 no-repeat;
		margin-left: auto;
		margin-right: auto;
		margin-top: 7px;
	}
	.stepArrowSelect{
		display: block;
	}
	.remarkComtainer{
		width: 998px;
		height: auto;
		padding: 30px 0;
		margin: 0 auto;
	}
    .leftMove,.rightMove{
    	width:30px;
    	float: left;
    	height:120px;
/*     	background: #F9F9F9; */
    }
    .leftMoveImg{
    	background: url(/knowledgetool/images/steppage_head.png) 8px -270px;
		width: 30px;
		height: 50px;
		margin-top: 48px;
		cursor: pointer;
		opacity: 0.3;
    }
    .rightMoveImg{
    	background: url(/knowledgetool/images/steppage_head.png) 8px -270px;
		width: 30px;
		height: 50px;
		margin-top: 48px;
		cursor: pointer;
		transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		opacity: 0.3;
    }
    .moveImgShow{
    	opacity: 1;
    }
    .moveFlag {
		display: none;
	}
    .tep-play-list{
/*     	height: 416px; */
/* 		overflow: hidden; */
		width: 100%;
/* 		border: 1px solid #E7D8E7; */
		margin-left: auto;
		margin-right: auto;
		border-top: 0;
		position: relative;
    }
    .step-item-container{
/*     	height: 400px; */
/*     	display: none; */
    }
</style>
</head>
<body>
<div id="mainDiv" style="margin-right: 70px;">
<div id="mainTitleDiv">
	<div class="top">
		<div class="topLeftDiv">
			<div>文档编号：<%=mapNum %></div>
			<div style="color:#2D8B00;">凝聚分散智慧 协同提速发展</div>
			<div>发布人员：<span><%=creater %></span></div>
		</div>
<!-- 		<div class="titleDiv"><%=name %></div> -->
	</div>
	<%
	if(remark.length() > 0){
		%>
		<div id="remarkComtainer" class="remarkComtainer">
	       <%
	       session.setAttribute("remark_"+mapId,remark);
	       %>
	       <iframe id="iframepage" src="/knowledgetool/template/ShowFckEditorDesc.jsp?sessionname=remark_<%=mapId %>&seth=0"  scrolling=no width="100%" onLoad="iFrameHeight(this,'0')"  marginheight="0" marginwidth="0" allowTransparency="true" frameborder="0"></iframe>
	   	</div>
		<%
	}
	%>
	<div id="moveTitleDiv" style="margin: 0 auto;">
		<div class="leftMove">
			<div class="leftMoveImg"></div>
		</div>
		<div id="ulDiv" style="overflow: hidden;float: left;">
			<div class="cgs-sbox bg-light lt position-relative">
				<ul class="cgs-slist cf">
					<div class="cgs-sline"></div>
					<%
					String sql = "select id,title,rate from KT_MapDetail where deleted=0 and mapId="+mapId+" order by sort,id";
					int num = 0;
					rs.executeSql(sql);
				    while(rs.next()){
				    	String title = rs.getString("title");
				    	%>
				    	<li title="<%=title %>" >
				    		<div class="stepDiv <%=num==0?"stepSelect":""%>">
					    		<div style="margin: 0 2px;height: 60px;overflow: hidden;">
					    			<span><%=title %></span>
					    		</div>
					    		<div>
					    			<i class="stepI"></i>
					    		</div>
				    		</div>
						</li>
				    	<%
				    	num++;
				    }
					%>
				</ul>

			</div>
		</div>
		<div class="rightMove">
			<div class="rightMoveImg"></div>
		</div>
		<div style="clear:both;"></div>
	</div>
</div>
<div style="position: relative;">
	<div id="step-play-list" class="tep-play-list">
	    <%
	    Map tsmap = cmutil.getMAllTStatus(userId,mapId);
	    String detailId = null;
	    double detailRate = 0;
	    double themeRate = 0.0d;
	    String pgtext = "";
	    String detailTitle = null;
	    Map<String,Object> idRateMap = null;
	    List<Map<String,Object>> detailList = new ArrayList<Map<String,Object>>();
	    rs.executeSql("select id,title,rate from KT_MapDetail where deleted=0 and mapId="+mapId+" order by sort,id");
	    int n = 0;
	    while(rs.next()){
	        detailId = Util.null2String(rs.getString("id"));
	        detailTitle = Util.null2String(rs.getString("title"));
	        themeRate = Util.getDoubleValue(rs.getString("rate"),0.0);
	        detailRate = Util.getDoubleValue((String)tsmap.get(detailId),0.0);
	        idRateMap = new HashMap<String,Object>();
	        idRateMap.put("detailId",detailId);
	        idRateMap.put("detailRate",themeRate==0.0?100:detailRate);
	        idRateMap.put("detailTitle",detailTitle);
	        detailList.add(idRateMap);
	        %>

	    <div class="step-item-container">
		    <iframe id='contentFrame' name='contentFrame' height='auto' width='100%' onLoad="iFrameHeight(this,<%=n%>)" allowTransparency= "true" style="background: none;"
		             marginwidth="0" marginheight="0" frameborder="0" scrolling='no' src="<%=detailPage%>&tId=<%=detailId%>&themeRate=<%=themeRate %>"></iframe>
	    </div>

	   <%
	   		n++;
	    }%>

	    <%
			String mptext = "";
			if(mprogress == 0){
				mptext = "所有内容未开始";
			}else if(mprogress == 100){
				mptext = "所有内容已完成";
			}else{
				mptext = "所有内容已完成" + mprogress + "%";
			}
		%>
	    <div id="pg1" style="width: 100%;height: 20px;background-color: #9B9EA3;line-height: 20px;position: relative;bottom: 0;" title="<%=mptext%>">
			<div id="pg_txt" style="position: absolute;width: 100%;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>
	</div>
	<div style="height:20px;width: 100%"></div>
</div>
</div>
<div class="leftFrameDiv"></div>
<div class="logoDiv"></div>
<script type="text/javascript">
var num = <%=num%>;
jQuery(function(){
	jQuery(window).resize(function(){
		resetWidth();
	});
	resetWidth();

	jQuery(".step-item-container:first").show();

	//左移按钮事件
	jQuery(".leftMoveImg").click(function(){
		jQuery(".rightMoveImg").removeClass("moveFlag");
		jQuery(".rightMoveImg").addClass("moveImgShow");
		var left = eval(jQuery(".cgs-slist").css("left").replace("px",""));
		if(left+liWidth > 0){
			jQuery(".leftMoveImg").addClass("moveFlag");
			jQuery(".leftMoveImg").removeClass("moveImgShow");
		}
		jQuery(".cgs-slist").animate({left: (left+liWidth)+"px"},500);
	});

	//右移按钮事件
	jQuery(".rightMoveImg").click(function(){
		jQuery(".leftMoveImg").removeClass("moveFlag");
		jQuery(".leftMoveImg").addClass("moveImgShow");
		var left = eval(jQuery(".cgs-slist").css("left").replace("px",""));
		if(boxWidth-left+liWidth > ulWidth){
			jQuery(".rightMoveImg").addClass("moveFlag");
			jQuery(".rightMoveImg").removeClass("moveImgShow");
		}
		jQuery(".cgs-slist").animate({left: (left-liWidth)+"px"},500);
	});

	//标题主div悬浮事件，显示隐藏左右移动按钮
	jQuery(".leftMoveImg").addClass("moveFlag");
	jQuery("#mainTitleDiv").hover(function(){
		if(!jQuery(".leftMoveImg").hasClass("moveFlag")){
			jQuery(".leftMoveImg").addClass("moveImgShow");
		}
		if(!jQuery(".rightMoveImg").hasClass("moveFlag")){
			jQuery(".rightMoveImg").addClass("moveImgShow");
		}
	},function(){
		jQuery(".leftMoveImg,.rightMoveImg").removeClass("moveImgShow");
	});

	//选择标题
	jQuery(".stepDiv").click(function(){
		jQuery(".stepSelect").removeClass("stepSelect");

		//获取当前li在所有中的下标
		var index = jQuery(".cgs-slist li").index(jQuery(this).parent());
		jQuery(this).addClass("stepSelect");

		//显示对应的步骤详情
		jQuery(".step-item-container").hide();
		jQuery("#pg1").hide();
		setTimeout(function(){
			jQuery(jQuery(".step-item-container").get(index)).show();
			jQuery("#pg1").show();
			jQuery(".leftFrameDiv").height(jQuery("#mainDiv").height());
		},50);

	}).hover(function(){
		jQuery(this).addClass("stepSelectHover");
	},function(){
		jQuery(this).removeClass("stepSelectHover");
	});
});

var liWidth = 100;
var ulWidth = 0;
var boxWidth = 0;
//重设ul的宽度
function resetWidth(){
	//页面宽度减去两边的移动按钮为中间部分宽度
	boxWidth = jQuery(window).width()-(30*2)-120;
	//宽度超过1000时取1000，避免过宽难看
	boxWidth = boxWidth>1000?1000:boxWidth;
	//ul宽度默认为li的个数*100
	ulWidth = num*100;
	if(ulWidth > boxWidth){//ul宽度比中间部分大
		jQuery(".rightMoveImg").removeClass("moveFlag");
		liWidth = 100;
	}else{//ul宽度比中间部分小，li的宽为中间部分宽/li个数
		jQuery(".rightMoveImg").addClass("moveFlag");
		liWidth = boxWidth/num;
		ulWidth = boxWidth;
	}
	//中间存放ul的div宽度为页面宽度减去两边的按钮
	jQuery("#ulDiv").width(boxWidth+"px");
	jQuery(".cgs-slist").width(ulWidth+"px");
	jQuery(".cgs-slist li").width(liWidth+"px");

	//设置步骤详情页面的宽度和高度
	var stepListH = jQuery(window).height()-150-30;
	jQuery("#moveTitleDiv").width(boxWidth+60+"px")
	jQuery("#step-play-list").width(boxWidth-2+"px");
	jQuery("#remarkComtainer").width(boxWidth-2+"px");
// 	jQuery("#step-play-list").width(boxWidth-2+"px").height(stepListH-20+"px");
// 	jQuery(".step-item-container").height(stepListH-36+"px");
	//中间线设置距离左右各li宽度的一半
	var lineL = liWidth/2;
	jQuery(".cgs-sline").css({"left":lineL+"px","right":lineL+"px"});
}


/**
 * 设置总进度
 */
function setPg(_width){
    finishRateChange(_width,true);
}

/**
 * 设置完成比
 */
function finishRateChange(rate,isSetTime){
    $("#pg1").attr("title","所有内容已完成" + rate + "%");
    $("#pg").animate({"width":($("#pg1").width()*rate/100)+"px"},isSetTime?300:0);
    $("#pg_txt").text(rate + "%");
}

/**
 * 设置知识点进度
 */
function setPg2(tId,_width){
//     $("#page_" + tId + " label").text(_width+"%");
}

function iFrameHeight(obj,i) {
	   var iframe = obj;
		try{
     var bHeight =   iframe.contentWindow.document.body.scrollHeight;
     var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
     var height = Math.max(bHeight, dHeight);
     iframe.height =  height;
     if(i != 0){
    	 jQuery(obj).parent().hide();
     }
     jQuery(".leftFrameDiv").height(jQuery("#mainDiv").height());
		 }catch (ex){}
	}
</script>
</body>
</html>