<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/base.css" />
<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/all.css" />
<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/perfect-scrollbar.css" />
<title>知识图谱平台</title>
<style>
#footer{
	bottom: 5px;
    left: 50%;
    margin-left: -162.5px;
    opacity: 0.6;
    position: absolute;
    z-index: 3001;
}
.searchType li{
	width:67px;
}
.searchDetail .infoList{
	height: 200px;
    margin-top: 20px;
    position: relative;
}
.searchDetail .infoList>ul>li{
	border-bottom: 0.1px solid;
    font-size: 16px;
    margin-right: 10px;
    margin-top: 10px;
    padding-bottom: 5px;
    line-height:1.5;
    position: relative;
}
.searchDetail .infoList>ul>li>p{
	cursor:pointer;
}
.secList{
    color: #ffffff;
    margin: 5px 0 2px 10px;
}
.secList li{
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 8px;
}
.secList ul li div{
 	background: #434d63 none repeat scroll 0 0;
    border-radius: 5px;
    padding-left: 10px;
    position: relative;
    padding-bottom: 10px;
}
.secList ul li div span{
	color:#7a8baa;
}
.secList ul li div p{
	cursor:pointer;
	position:relative;
}
.secList ul li div .sel{
	color:#ff9000;
}
#infoListUl .tipp{
	font-size: 12px;
}
#infoListUl .tipp ul li{
	display: inline-block;
    margin-right: 10px;
}
#infoListUl .tipp .num{
	color:#ff9000;
	margin-right: 6px;
}
.circle1{
	display: inline-block;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 5px;
    margin-right: 2px;
}
.circle2{
	display: inline-block;
    width: 10px;
    height: 10px;
    background: green;
    border-radius: 5px;
    margin-right: 2px;
}
.circle3{
	display: inline-block;
    width: 10px;
    height: 10px;
    background: yellow;
    border-radius: 5px;
    margin-right: 2px;
}
#tableList{
	background-color: rgba(35, 40, 59, 0.9);
    height: 210px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.tableHead{
	
}
.tableHead th{
	border-right: 1px solid #424369;
    box-sizing: border-box;
    height: 30px;
    width: 200px;
    border-top: 1px solid #424369;
}
.tableContent{

}
.tableContent td{
	border-right: 1px solid #424369;
    box-sizing: border-box;
    height: 25px;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    width: 200px;
}
.headDiv span{
	display:inline-block;
	width:200px;
}
.group i{
	background-image: url("/KnowledgeGraph/images/indexNew/listDir.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    height: 18px;
    position: absolute;
    right: 0;
    top: 4px;
    width: 18px;
}
.group .detailIcon{
	background-position: 0 -26px;
}
.showTable{
	position: absolute;
    right: 3px;
}
.tableTitle{
    font-size: 17px;
    height: 20px;
    margin-bottom: 5px;
    margin-left: 20px;
    margin-top: 5px;
}
.tableTitle li{
	float: left;
    margin-right: 16px;
    cursor: pointer;
}
.tableTitle .liSel{
	color:#FFFFFF
}
.tableBack{
	position: absolute;
    right: 30px;
    top: 0px;
    cursor: pointer;
}
</style>
</head>
<body class="bg1">
<div class="headCon">
	<jsp:include page="../top.jsp">
	<jsp:param name="index" value="4" />
	</jsp:include>
</div>
<div class="searchCon">
	<div class="searchDetail" id="searchDetail">
		<ul class="searchType" id="infoType">
			<li class="active" data-type="db">担保</li>
			<li data-type="gs">工商</li>
			<li data-type="gsdb">担保工商</li>
		</ul>
		<div class="clear"></div>
		<div class="" hidden></div>
		<div class="infoList" id="infoList">
			<ul id="infoListUl">
				
			</ul>
		</div>
	</div>
</div>
<!--  
<div id="tables">
	<table id="tableHead">
		<thead>
			<tr><th>公司名字</th><th>负面新闻</th><th></th></tr>
		</thead>
	</table>
</div>
-->
<div class="resultCon" style="margin-left:255px;position: relative;" >
	<div id="tableList">
		<div style="position:relative;">
			<ul class="tableTitle" id="tableTitle">
				
			</ul>
			<div class="tableBack">收起</div>
		</div>
		<div id="tableCon" style="position:relative">
			
		</div>
	</div>
	<div id="draw">
	
	</div>
</div>
<div id="footer" style="color:#FFFFFF">
	Copyright © 2016 - 2017 海南易建科技股份有限公司
</div>

<script type="text/html" id="List2_template"> 
	<!for(var i=0;i<data.length;i++){!>
		<li data-enable='0'>
			<p><!=data[i].name!></p>
			<div class="secList" hidden>
				<ul>
					<!for(var j=0;j<data[i].nodes.length;j++){!>
						<li data-id="<!=data[i].nodes[j].id!>" data-name="<!=data[i].name!>" title="<!=data[i].nodes[j].name!>"><!=(data[i].nodes[j].name.length>12?data[i].nodes[j].name.substring(0,10)+"..":data[i].nodes[j].name)!></li>
					<!}!>
				</ul>
			</div>
		</li>
	<!}!>
</script>
<script type="text/html" id="table_template"> 
<table class="tableHead" style="width:<!=(key.length)*200!>px">
				<thead>
					<tr>
						<!for(var i=0;i<key.length;i++){!>
							<th><!=keyCn[i]!></th>
						<!}!>
					</tr>
				</thead>
			</table>
			<table class="tableContent" style="width:<!=(key.length)*200!>px;height: 141px;display:block;position:relative">
				<tbody>
<!for(var i=0;i<data.length;i++ ){!>	
					<tr>
						<!for(var j=0;j<data[i].length;j++){!>					
							<td title="<!=data[i][j]!>"><!=data[i][j].length>10?data[i][j].substring(0,9)+"...":data[i][j]!></td>
						<!}!>
					</tr>
<!}!>
				</tbody>
			</table>
</script>
<script type="text/html" id="table2_template">
<table class="tableHead" style="width:<!=(key.length-1)*200+650!>px">
				<thead>
					<tr>
						<!for(var i=0;i<key.length;i++){!>
							<th style="width:<!=(key[i]=="content"?"650px":"200px")!>"><!=keyCn[i]!></th>
						<!}!>
					</tr>
				</thead>
			</table>
			<table class="tableContent" style="width:<!=(key.length-1)*200+650!>px;height: 141px;display:block;position:relative">
				<tbody>
<!for(var i=0;i<data.length;i++ ){!>	
					<tr>
						<!for(var j=0;j<data[i].length;j++){!>	
							<!
var keyItem = key[j];
var strLength = 10;
if(keyItem=="content"){
	strLength = 46;
}
!>				
							<td style="width:<!=(key[j]=="content"?"650px":"200px")!>" title="<!=data[i][j]!>"><!=data[i][j].length>strLength?data[i][j].substring(0,strLength-1)+"...":data[i][j]!></td>
						<!}!>
					</tr>
<!}!>
				</tbody>
			</table>
</script>
<script type="text/html" id="table3_template">
<table class="tableHead" style="width:1350px">
				<thead>
					<tr>
						<th rowspan="2" style="width:150px">企业名字</th>	
						<th rowspan="2" style="width:60px">资产总额</th>	
						<th rowspan="2" style="width:60px">负债总额</th>	
						<th rowspan="2" style="width:60px">授信额度</th>
						<th colspan="6" style="width:240px">授信额度</th>	
						<th rowspan="2" style="width:60px">不良率</th>
						<th colspan="2" style="width:120px">逾期30天以上贷款</th>
						<th colspan="5" style="width:300px">主要表外融资和信用</th>
						<th rowspan="2" style="width:60px">授信银行家数</th>
						<th rowspan="2" style="width:60px">贷款银行家数</th>
						<th rowspan="2" style="width:60px">财报时间</th>
						<th rowspan="2" style="width:60px">注册地区</th>
						<th rowspan="2" style="width:60px">企业所属行业</th>
					</tr>
					<tr>
						<th style="width:40px">合计</th>	
						<th style="width:40px">正常类</th>	
						<th style="width:40px">关注类</th>	
						<th style="width:40px">次级类</th>	
						<th style="width:40px">可疑类</th>	
						<th style="width:40px">损失类</th>	
						<th style="width:60px">余额</th>
						<th style="width:60px">比例</th>
						<th style="width:60px">银行承兑汇票</th>
						<th style="width:60px">信用证</th>
						<th style="width:60px">保函</th>
						<th style="width:60px">委托贷款</th>
						<th style="width:60px">委托投资</th>
					</tr>
				</thead>
			</table>
			<table class="tableContent" style="width:1350px">
				<tbody>
					<tr>
						<td style="width:150px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
						<td style="width:40px">1</td>
						<td style="width:40px">1</td>
						<td style="width:40px">1</td>
						<td style="width:40px">1</td>
						<td style="width:40px">1</td>
						<td style="width:40px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
						<td style="width:60px">1</td>
					</tr>
				</tbody>
			</table>
</script>
<script type="text/html" id="List_template"> 
	<!for(var prop in data){!>
		<li data-enable='0'>
		<p class="group" data-g="<!=prop!>"><!=prop!><i class=""></i></p>
		<div class="tipp">
			<ul>
				<li><span class="circle1"></span>负面新闻：<span class="num"><!=data[prop].newsNum!></span></li>	
		<!--		<li><span class="circle2"></span>案件：<span class="num"><!=data[prop].caseNum!></span>	</li> -->
				<li><span class="circle3"></span>信贷不良记录：<span class="num"><!=data[prop].assetNum!></span></li>
			</ul>
		</div>
		<div class="secList" hidden>
			<ul>
				<!for(var i=0;i<data[prop].data.length;i++){!>
				<li data-group="<!=prop!>" data-loop="<!=i+1!>">
					<div>
						<span>loop<!=i+1!></span>
						<!for(var j=0;j<data[prop].data[i].length-1;j++){!>
							<p title="<!=data[prop].data[i][j].name!>" data-group="<!=prop!>" data-id="<!=data[prop].data[i][j].id!>" data-name="<!=data[prop].data[i][j].name!>">
							<!=(data[prop].data[i][j].name.length>11?data[prop].data[i][j].name.substring(0,10)+"..":data[prop].data[i][j].name)!>
							<!if(data[prop].data[i][j].badNewNum>0){!>
								<span class="circle1" style="margin-left:2px"></span>
							<!}!>

							<!if(data[prop].data[i][j].casesNum>0){!>
	<!--							<span class="circle2" style="margin-left:2px"></span>-->
							<!}!>

							<!if(data[prop].data[i][j].badAsset==true){!>
								<span class="circle3" style="margin-left:2px"></span>
							<!}!>
							<! var contentArr = [];
								if(data[prop].data[i][j].badNewNum>0){
									contentArr.push("news");
								}
								if(data[prop].data[i][j].badAsset==true){
									contentArr.push("loan");
								}
								var contentStr = contentArr.join(";");
							 if(data[prop].data[i][j].badNewNum>0 || data[prop].data[i][j].badAsset==true){!>
								<span class="showTable" data-content="<!=contentStr!>">详情</span>
							<!}!>
							</p>
						<!}!>
					</div>
				</li>
				<!}!>
			</ul>
		</div>
		</li>
	<!}!>
</script>
	
<script src="${ctx}/js/lib/d3.v4.js"></script>
<script src="${ctx}/js/lib/jquery-1.11.1.min.js"></script>
<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
<script src="${ctx}/js/lib/core.js"></script>
<script src="${ctx}/js/lib/baiduTemplate.js"></script>
<script src="${ctx}/js/component/newGraph.js"></script>

<script>
(function(){
	var keyNameMap = {
			Name:"企业名称",Ratio:"不良率",assetTotal:"资产总额",
			debt:"负债总额",credit:"授信额度",loanTotal:"合计",
			loanNorm:"正常类",loanOther:"关注类",loanSec:"次级类",
			loanLoss:"损失类",loanPro:"可疑类",loanOver30:"逾期30天以上贷款余额",
			loanOver30Ratio:"逾期30天以上贷款比率",BankAccept:"银行承兑汇票",
			LetterOfGuarantee:"信用证",LoanByMandate:"保函",
			InvestByMandate:"委托投资",NumCreditBank:"授信银行家数",
			NumLoanBank:"贷款银行家数",date:"财报时间",
			registProvince:"注册地区",field:"企业所属行业"
	};
	
	$('#infoList').perfectScrollbar();
	$("#tableCon").perfectScrollbar();
	
	$("#infoType li").click(function(){
		//收起表格
		$("#tableList .tableBack").click();
		
		var type = $(this).data("type");
		
		$("#infoType li").removeClass("active");
		$(this).addClass("active");
		
		graph.clear();
		console.log(type);
		graph.loadData(urlPath+"/KG/findLoop.do",5,type);
	});
	
	/*根据窗口大小调整页面*/
	resize();
	$(window).resize(function(){
		resize();
	});
	function resize(){
		//获取窗口高度
		var windowheight=$(window).height();
		var searchCon = windowheight-40-146;
		$(".searchCon").css("height",windowheight-40);
		$(".resultCon").css("height",windowheight-40);
		$("#draw").css("height",windowheight-40);
		$(".infoList").css("height",windowheight-40-87);
		$('#infoList').perfectScrollbar("update");
	}
	
	var urlPath = "${ctx}"; //项目名路径
	var opt = {con:"draw",width:$("#draw").width(),height:$("#draw").height()};
	var graph = new NewGraph(opt); //新建关系图实例
		
	//点击图更新左侧边栏
	_.MessageManager.on("listChange",function($ev,data){
		var $group = $("#infoListUl > li > p[data-g='"+data.name+"']");
		if($group.parent().data("enable")==0){
			$group.click();
		}
		var $clickNode = $("#infoList p[data-id='"+data.id+"']").eq(0);
		$clickNode.click();
		
		//调整滚动轴位置
		var index = $clickNode.parent().parent().parent().parent().parent().index();
		var innerIndex = $clickNode.parent().parent().index();
		var $innerF = $clickNode.parent().parent();
		var px=0;
		for(var i=0;i<$innerF.siblings().length;i++){
			if(i<innerIndex){
				px = px + $innerF.siblings().eq(i).height()+8;
			}else{
				break;
			}
		}
		//index*(43+10+5)+px+24+36
		$('#infoList').scrollTop(index*(43+10+5)+px);
	});
	
	//清除公司选中
	_.MessageManager.on("clearSelect",function(){
		$("#infoListUl p[data-id]").removeClass("sel");
	});
	
	//点击类型，更新左侧边栏
	var tableList = null;
	_.MessageManager.on("addInfoList",function($ev,resultCon){
		console.log(resultCon);
		
		tableList = resultCon.list;
		var result = resultCon.data;
		var json = new Object();
		for(var prop in result){
			var caseNum = [];
			var newsNum = [];
			var assetNum = [];
			for(var i=0;i<result[prop].length;i++){
				for(var j=0;j<result[prop][i].length;j++){
					if(result[prop][i][j].badNewNum>0){
						if(newsNum.indexOf(result[prop][i][j].id)<0){
							newsNum.push(result[prop][i][j].id);
						}
					}
					if(result[prop][i][j].casesNum>0){
						if(caseNum.indexOf(result[prop][i][j].id)<0){
							caseNum.push(result[prop][i][j].id);
						}
					}
					if(result[prop][i][j].badAsset==true){
						if(assetNum.indexOf(result[prop][i][j].id)<0){
							assetNum.push(result[prop][i][j].id);
						}
					}
				}
			}
			json[prop] = new Object();
			json[prop].caseNum = caseNum.length;
			json[prop].newsNum = newsNum.length;
			json[prop].assetNum = assetNum.length;
			json[prop].data = result[prop];
		}
		
		console.log(json);
		$("#infoListUl").html("");
		var ht =baidu.template("List_template",{data:json});
		$("#infoListUl").html(ht);
		//更新滚动条
		$('#infoList').perfectScrollbar("update");
		
		//buildTable();
	});
	
	//新建表格
	function buildTable(type){
		console.log(type);
		var tableData = {
				key:[],
				keyCn:[],
				data:[]
		};
		if(type=="news"){
			tableData.key = ["name","transfer","time","numPage","start","content"];
			tableData.keyCn = ["新闻标题","新闻报道转载数量","时间跨度天数","互联网网页数","影响程度","内容"];
			tableData.data = [
				["兰州威立雅自来水苯超标","47500","20","488000","5","2014年4月11日，据新华网消息，10日兰州威立雅水务集团公司出厂水及自流沟水样被检测出苯含量严重超标，导致兰州市部分地区停水。4月22日下午，兰州威立雅水务集团公司首次向市民公开致歉。对此，有媒体评论称，此次苯超标事件，不仅暴露了兰州的城市饮水安全问题，同时也为其他城市敲响警钟。作为顶级水务公司的威立雅频频爆出安全事故，这无疑是在拷问企业的良知与责任。百姓的饮水安全问题，关乎民生大计，任重而道远，望威立雅切莫等闲视之。"],
				["光耀地产资金链告急","1619","8","4800","5","2014年5月6日22时许，据相关媒体报道，中国百强房产企业光耀地产的多个楼盘都无法按期交楼，恐难以支撑倒闭在即。5月7日，21世纪网 发布消息表示，据光耀地产一位可靠人士透露，由于公司资金链出现问题，很难向银行贷款，在惠州的少数楼盘确有延迟交付情况，但倒闭 的说法过于夸张。有分析认为，光耀地产近年来一直热衷于追求规模效应，在如今市场行情不好，三线城市需求过剩的情况下，将会受到很 大冲击。"],
				['腾中重工被传破产且老板“跑路”',"16119","5","5800","4","2014年5月5日，“蓝鲸财经记者工作平台”通过新浪微博称，2009年宣布收购悍马的四川著名民营企业腾中重工，已经停工破产。对此，腾中重工发表声明否认该传言，称公司仍正常运转。5月7日，另有相关媒体报道，由李炎掌控的包括腾中重工在内的华通系面临债务危机，其当事人已经“跑路”。新津一位制造业领军人物评价腾中重工的老板好玩资本运作，并未脚踏实地干实业，有此结果也属意料之中。"],
				["勤上光电遭证监会罚款","1611","2","5800","3","2014年5月13日，勤上光电公告称，5月12日收到中国证监会广东证监局的行政处罚决定书。决定书认定，2008年至2011年，勤上光电与广州市两家公司存在关联关系，涉嫌信息披露违法违规，责令勤上光电改正，予以警告，并处以40万元罚款，多位领导干部受到相应的行政及经济处罚。对此，该公司定于5月16日通过网络平台召开致歉会。5月13日，多位投资者表示，将通过法律手段向勤上光电索赔。"]           
			]
			console.log(tableData);
			var ht =baidu.template("table2_template",tableData);
			$("#tableCon").html(ht);
			$('.tableContent').perfectScrollbar();	
			$("#tableCon").perfectScrollbar();
		}else if(type=="loan"){
			console.log(tableList);
			var index = 0;
			//构建表头数据
			for(var prop in tableList){
				if(index==0){
					var oneItem = tableList[prop];
					for(var key in oneItem){
						if((typeof oneItem[key])!="object" && key !="ID"){
							tableData.key.push(key);
							tableData.keyCn.push(keyNameMap[key]);
						}
					}
				}
				index++;
			}
			//构建表body数据
			for(var prop in tableList){
				var oneItem = tableList[prop];
				var oneRow = new Array();
				for(var i=0;i<tableData.key.length;i++){
					oneRow.push(oneItem[tableData.key[i]]);
				}
				tableData.data.push(oneRow);
			}
			console.log(tableData);
			var ht =baidu.template("table_template",tableData);
			$("#tableCon").html(ht);
			$('.tableContent').perfectScrollbar();	
			$("#tableCon").perfectScrollbar();
		}
	}
	
	//展开group
	$("#infoList").delegate("li>.group","click",function(){
		var status = $(this).parent().data("enable");
		if(status==0){
			//初始化下拉列表
			$("#infoListUl>li").data("enable",0);
			$("#infoListUl .secList").hide();
			$("#infoListUl>li>.group>i").removeClass("detailIcon");
			//显示当前下拉列表
			$(this).parent().find(".secList").show();
			$(this).parent().data("enable",1);
			$(this).find("i").addClass("detailIcon");
		}else{
			$(this).parent().data("enable",0);
			$(this).parent().find(".secList").hide();
			$(this).find("i").removeClass("detailIcon");
		}
		$("#infoList").scrollTop(0);
		$('#infoList').perfectScrollbar("update");
	});
	
	//选中公司
	$("#infoList").delegate(".secList li div p","click",function(){
		var data = {
				id:$(this).data("id"),
				name:$(this).data("group")
		}
		_.MessageManager.fire("hoverLoop",data);
		
		$("#infoListUl p[data-id]").removeClass("sel");
		$("#infoListUl p[data-id='"+$(this).data("id")+"']").addClass("sel");
		
		console.log(tableList);
		
	});
	
	//点击详情出现列表
	$("#infoList").delegate(".showTable","click",function(e){
		e.stopPropagation();
		var map = {
				news:"负面新闻",
				loan:"信贷不良记录"
		}
		console.log($(this).data("content"));
		var typeStr = $(this).data("content");
		var typeArr = typeStr.split(":");
		$("#tableTitle").html("");
		for(var i=0;i<typeArr.length;i++){
			$("#tableTitle").append("<li data-type='"+typeArr[i]+"'>"+map[typeArr[i]]+"</li>");
		}
		$("#tableTitle li").eq(0).click();
		
		$("#tableList").animate({"top":"0px"},750,function(){
			$(this).css("z-index",1);
		});
	});
	
	//点击列表收起列表
	$("#tableList .tableBack").click(function(){
		$("#tableList").css("z-index",-1).animate({"top":"-250px"},750);
	});
	
	//
	$("#tableList .tableTitle").delegate("li","click",function(){
		$("#tableList .tableTitle li").removeClass("liSel");
		$(this).addClass("liSel");
		buildTable($(this).data("type"));
	});
	
	/*限制字符串长度*/
	function stringLimit(item,maxLength,limitLength){
		if(item.length<maxLength){
			return item;
		}else{
			return item.substring(0,limitLength)+"...";
		}
	}
	
	graph.init(); //初始化关系图
	graph.loadData(urlPath+"/KG/findLoop.do",5,"db");
})();
</script>
</body>
</html>
