<%@ 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>
</head>
<body>
<div class="headCon">
	<div class="logo">
		<img src="${ctx}/images/indexNew/logo2.png">
	</div>
	<ul class="nav">
		<li>项目</li>
		<li>数据源</li>
		<li>模型</li>
	</ul>
</div>
<div class="searchCon">
	<div class="searchDetail" id="searchDetail">
		<ul class="searchType" id="searchType">
			<li class="active">全部</li>
			<!-- <li>查公司</li>
			<li>查人物</li>
			<li style="margin-right:0px">查关系</li> -->
		</ul>
		<input id="input" type="text" placeholder="请输入关键字"/>
		<div id="search-Btn">查询</div>
		<div id="reset">重置</div>
	</div>
	<div class="history" style="height:180px;">
		<ul class="">
		</ul>
	</div>
	<div class="dataSource">
		<p>数据源</p>
		<div id="dragDS">
			<span class="dataSourceActive" data-id="news" draggable="true">新闻数据源</span>
			<span data-id="people" draggable="true">人口数据源</span>
		</div>
		<img src="${ctx}/images/indexNew/ds.png" style="margin-top:15px;">
		<div class="dsList">
			<ul>
				
			</ul>
		</div>
	</div>
</div>
<div class="itemCon" hidden style="left:-82px">
	<img src="${ctx}/images/indexNew/x.png" class="searchConClose">
	<div class="filter">
		<div class="filterItem">
			<label>注册资本</label>
			<input id="" class="condition" type="text" />
			<img src="${ctx}/images/indexNew/sel.png">
		</div>
		<div class="filterItem">
			<label>注册时间</label>
			<input id="" class="condition" type="text" />
			<img src="${ctx}/images/indexNew/sel.png">
		</div>
	</div>
	<div class="allResult">
		<p>找到<span>0</span>家相关企业</p>
	</div>
	<div id="allResultContainer">
		<ul class="allResultList" id="allResultList">
			
		</ul>
	</div>
</div>
<div id="resultCon1" class="resultCon" style="margin-left:255px;" >
	<ul>
		<li>
			<div>
				<img src="${ctx}/images/indexNew/pad1.png">
				<p>深度挖掘</p>
				<span>企业关系人物关系深度挖掘</span>
			</div>
		</li>
		<li>
			<div>
				<img src="${ctx}/images/indexNew/pad2.png">
				<p>数据维度</p>
				<pan>丰富数据只能便捷的查询操作</span>
			</div>
		</li>
		<li>
			<div>
				<img src="${ctx}/images/indexNew/pad3.png">
				<p>全量数据</p>
				<span>企业信息股东信息全网罗</span>
			</div>
		</li>
	</ul>
</div>
<div id="resultCon2" class="resultCon" style="margin-left:255px;" hidden>
	<div class="cateCon" id="cateCon">
		<ul>
			<li>
				<div class="divc cateConHover" data-target="resultHead" data-image="1">
					<img src="${ctx}/images/indexNew/catea1.png">
					<p>企业信息</p>
				</div>
			</li>
			<li>
				<div class="divc" data-target="resultHead2" data-image="2">
					<img src="${ctx}/images/indexNew/cate2.png">
					<p>股东信息</p>
				</div>
			</li>
			<li>
				<div  class="divc" data-target="resultHead3" data-image="3">
					<img src="${ctx}/images/indexNew/cate3.png">
					<p>高管信息</p>
				</div>
			</li>
		</ul>
	</div>
	<div class="resultContainer">
		<div class="resultHead" id="resultHead">
			<img src="${ctx}/images/indexNew/company.png">
			<div class="infoDetail" style="margin-left:95px">
				<p class="infoName"></p>
				<ul>
					<li  style="border-right: 1px solid #e9e9e9; margin-right: 1%; width: 20%;">
						<p>法定代表人：<span></span></p>
						<p>行业：<span></span></p>
						<p>状态：<span></span></p>
					</li>
					<li  style="border-right: 1px solid #e9e9e9; margin-right: 1%; width: 25%;">
						<p>企业类型：<span></span></p>
						<p>工商注册号：<span></span></p>
						<p>注册资本：<span></span></p>
					</li>
					<li  style="margin-right: 1%; width: 47%;">
						<p style="line-height: 22px;">经营范围：<span></span></p>
					</li>
				</ul>
			</div>
			<div class="infoFoot">
				<ul>
					<li><p>电话：<span></span></p></li>
					<li><p>网址：<span></span></p></li>
					<li><p>地址：<span></span></p></li>
				</ul>
			</div>
		</div>
		<div class="resultHead" id="resultHead2" hidden>
			<p class="resultInfoTitle">股东人数<span id="invertorNum"></span></p>
			<div class="resultInfoList">
				<ul id="InvestorList">
					
				</ul>
			</div>
		</div>
		<div class="resultHead" id="resultHead3" hidden>
			<p class="resultInfoTitle">高管人数<span id="managerNum"></span></p>
			<div class="resultInfoList">
				<ul id="managerList">
					
				</ul>
			</div>
		</div>
		<div class="result">
			<div class="fullScreen-btn"></div>
			<div class="control-btns">
				<ul>
					<li>
						<div class="control-btn" data-type="sameType" data-level="2">
							<img src="${ctx}/images/indexNew/type1.png"> 企业
						</div>
					</li>
					<li>
						<div class="control-btn control-btnActive" data-type="normalType" data-level="2">
							<img src="${ctx}/images/indexNew/type3.png"> 展示
						</div>
					</li>
					
				</ul>
			</div>
			<div id="draw" style="height:500px;overflow: hidden;position: relative;width: 100%;">
		</div>
	</div>
</div>

<!--实体列表模板-->
<script type="text/html" id="managerList_template">
<!for(var i=0;i<data.length;i++){!>
					<li>
						<p><!=data[i].Name!></p>
						<p><!=data[i].Positions.join(";")!></p>
					</li>
<!}!>
</script>
<!--实体列表模板-->
<script type="text/html" id="investorList_template">
<!for(var i=0;i<name.length;i++){!>
					<li title="<!=name[i]!>">
						<p><!=subName[i]!></p>
						<p>投资方</p>
					</li>
<!}!>
</script>

<!--实体列表模板-->
<script type="text/html" id="allResultList_template">
<!for(var i=0;i<data.length;i++){!>
	<li data-id="<!=data[i].QYZCH!>" data-name="<!=data[i].QYMC!>">
		<div class="allResultItem" title="<!=data[i].QYMC!>">
			<p id="itemName<!=i!>" class="itemName"><!=data[i].subName!></p>
			<p class="itemDetail">法定代表人：<span><!=data[i].JYZXM!></span>
				行业：<span></span>
				状态：<span></span>
			</p>
		</div>
	</li>
<!}!>
</script>

<!--实体详情模板-->
<script type="text/html" id="infoDetail_template">
			<img src="${ctx}/images/indexNew/company.png">
			<div class="infoDetail" style="margin-left:95px">
				<p class="infoName"><!=(data.name==""?"无记录":data.name)!></p>
				<ul>
					<li  style="border-right: 1px solid #e9e9e9; margin-right: 1%; width: 20%;">
							<p>法定代表人：<span><!=(data.frdb==""?"无记录":data.frdb)!></span></p>
							<p>行业：<span><!=(data.Field==""?"无记录":data.Field)!></span></p>
							<p>状态：<span><!="无记录"!></span></p>
					</li>
					<li  style="border-right: 1px solid #e9e9e9; margin-right: 1%; width: 25%;">
							<p>企业类型：<span><!="无记录"!></span></p>
							<p>工商注册号：<span><!=(data.ID==""?"无记录":data.ID)!></span></p>
							<p>注册资本：<span><!=(data.invest==""?"无记录":data.invest)!></span></p>
					</li>
					<li  style="margin-right: 1%; width: 47%;">
							<p style="max-height: 66px;" title="<!=(data.range==""?"无记录":data.range)!>">经营范围：<span><!=(data.range==""?"无记录":data.range)!></span><p>
					</li>
				</ul>
			</div>
			<div class="infoFoot">
				<ul>
					<li><p>电话：<span><!="无记录"!></span></p></li>
					<li><p>网址：<span><!="无记录"!></span></p></li>
					<li><p>地址：<span><!=(data.address==""?"无记录":data.address)!></span></p></li>
				</ul>
			</div>
</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.js"></script>
<script src="${ctx}/js/lib/core.js"></script>
<script src="${ctx}/js/lib/baiduTemplate.js"></script>
<script src="${ctx}/js/lib/core.js"></script>
<script src="${ctx}/js/component/graph.v2.js"></script>

<script>
(function(){
	/*初始化图*/
	var searchIds = new Array(); 
	var searchNames = new Array();
	var opt = {con:"draw",width:$("#draw").width(),height:$("#draw").height()};
	var graph = new Graph(opt);
	graph.init();
	/*信息切换*/
	$("#cateCon .divc").click(function(){
		$("#cateCon").find(".divc").removeClass("cateConHover");
		$(this).addClass("cateConHover");
		var targetHead = $(this).data("target");
		$(".resultHead").hide();
		$("#"+targetHead).show();
		var index = $(this).data("image");
		$(".divc img").each(function(i,that){
			if((i+1)==index){
				$(that).attr("src","/KnowledgeGraph/images/indexNew/catea"+(i+1)+".png");
			}else{
				$(that).attr("src","/KnowledgeGraph/images/indexNew/cate"+(i+1)+".png");
			}
		});
	});
	/*数据源拖拽*/
	$("#dragDS").find("span").each(function(){
		$(this)[0].ondragstart = function(e){
			e.dataTransfer.setData("Text",$(this).data("id"));
		};
	});
	$("#draw")[0].ondragover = function(e){
		e.preventDefault();
	};
	$("#draw")[0].ondrop = function(e){
		e.preventDefault();
		e.stopPropagation(); 
		var id = e.dataTransfer.getData("Text");
		_.MessageManager.fire("addDataSource",id);
	};
	/*初始化数据源*/
	$(".control-btns li div").click(function(){
		if($(this).hasClass("control-btnActive")){
			return;
		}
		$(".control-btns li div").removeClass("control-btnActive");
		$(this).addClass("control-btnActive");
		console.log($(this).data("type"));
		_.MessageManager.fire("changeModel",{type:$(this).data("type")});
	});
	$(".dsList").delegate(".close","click",function(){
		$(this).parent().remove();
		_.MessageManager.fire("dataProcess");
	});
	/*重置*/
	$("#reset").click(function(){
		$("#resultCon2").hide();
		$("#resultCon1").show();
		searchIds.splice(0, searchIds.length);
		searchNames.splice(0, searchNames.length);
		$("#allResultList").html("");
		$(".allResult span").html("0");
		$(".searchConClose").click();
		$("#input").val("");
		$(".history ul").html("");
		$(".dsList ul").html("");
	});
	/*根据窗口大小调整页面*/
	resize();
	$(window).resize(function(){
		resize();
	});
	function resize(){
		//获取窗口高度
		var windowheight=$(window).height();
		var searchCon = windowheight-40-146;
		$(".searchCon").css("height",windowheight-40);
		//$(".history").css("height",searchCon*0.64-27);
		$(".dsList").css("height",windowheight-40-107-27-402+70-33);
		$(".itemCon").css("height",windowheight-40);
		$(".resultCon").css("height",windowheight-40);
		$("#allResultContainer").css("height",windowheight-153);
		$("#draw").css("height",windowheight-343+162);
		var pt = (windowheight-40)/2-90;
		$("#resultCon1").css("padding-top",pt);
		$(".cateCon").css("height",windowheight-40);
		graph.resize($("#draw").width(),$("#draw").height());
	}
	/*切换查询类型*/
	$("#searchType li").click(function(){
		$("#searchType").children().removeClass("active");
		$(this).addClass("active");
	});
	/*搜索实体*/
	$("#search-Btn").click(function(){
		var inputValue = $("#input").val();
		if(inputValue==null || inputValue==""){
			alert("请输入公司名字！");
			$("#input").focus();
		}else{
			$.post("/KnowledgeGraph/KG/showByKey.do",{QYMC:inputValue},function(result){
				for(var i=0;i<result.length;i++){
					result[i].subName = stringLimit(result[i].QYMC,14,13);
				}
				var ht = baidu.template("allResultList_template",{data:result});
				$("#allResultList").html(ht);
				$(".allResult p span").html(result.length);
				$(".itemCon").show().animate({left:"255px"},750,function(){
					$(this).css({"z-index":1});
					resize();
				});
				$(".resultCon").animate({"margin-left":"592px"},750);
				for(var i=0;i<result.length;i++){
					SearchHighlight("itemName"+i,inputValue);
				}
			},"json"); 
		}
	});
	/*回车触发搜索实体*/
	$("#input").keydown(function(e){
		if(e.keyCode==13){
			$("#search-Btn").click();
		}
	});
	/*收起搜索结果*/
	$(".searchConClose").click(function(){
		$(".itemCon").css({"z-index":-1}).animate({left:"-82px"},750,function(){
			$(this).hide();
			resize();
		});
		$(".resultCon").animate({"margin-left":"255px"},750);
	});
	/*点击结果列表查询实体*/
	$("#allResultList").delegate("li","click",function(){
		var thisId = $(this).data("id");
		var thisName = $(this).data("name");
		if(searchIds.indexOf(thisId)<0){
			searchNames.push(thisName);
			searchIds.push(thisId);
			var searchType = $(".control-btnActive").data("type");
			//$(".dsList ul").html("");
			$(".history ul").append("<li data-id='"+thisId+"' title='"+thisName+"'>"+stringLimit(thisName,13,11)+"<img class='close' src='${ctx}/images/close2.png'></li>");
			var data={
					ids:searchIds.join(";"),
					level:2,
					names:searchNames.join(";"),
					searchType:searchType
			};
			graph.loadData("/KnowledgeGraph/KG/getGraphd3rel.do",data);
			getDetail(thisId);
			getCompanyManager(thisId);
			getCompanyInvester(thisId);
			$("#resultCon1").hide();
			$("#resultCon2").show();
			$(".searchConClose").click();
		}else{
			alert("已添加！");	
		}
	});
	/*删除搜索项*/
	$(".history").delegate(".close","click",function(){
		var item = $(this).parent();
		item.remove();
		var itemId = item.data("id");
		var itemIndex = searchIds.indexOf(itemId);
		searchIds.splice(itemIndex,1);
		searchNames.splice(itemIndex,1);
		$(".dsList ul").html("");
		if(searchIds.length==0){
			graph.clear();
		}else{
			var data={
					ids:searchIds.join(";"),
					level:2
			};
			graph.loadData("/KnowledgeGraph/KG/getGraphd3rel.do",data);	
		}
	});
	//图中双击查询
	_.MessageManager.on("extend",function($ev,node){
		console.log(node);
		//graph.clear();
		//graph.loadData("/KnowledgeGraph/KG/getGraphd3rel.do",data);
	});
	//图中单击查询详情
	_.MessageManager.on("infoDetail",function($ev,data){
		getDetail(data.id);
		getCompanyManager(data.id);
		getCompanyInvester(data.id);
	});
	/*限制字符串长度*/
	function stringLimit(item,maxLength,limitLength){
		if(item.length<maxLength){
			return item;
		}else{
			return item.substring(0,limitLength)+"...";
		}
	}
	/*查找企业详情*/
	function getDetail(id){
		$.post("/KnowledgeGraph/KG/getEntityInfo.do",{key:id},function(result){
			console.log(result.data.invest);
			result.data.invest = (result.data.invest+"").replace(/(?=(?!^)(?:\d{3})+(?:\.|$))(\d{3}(\.\d+$)?)/g,',$1'); 
			console.log(result.data.invest);
			var ht = baidu.template("infoDetail_template",result);
			$("#resultHead").html(ht);
		},"json");
	}
	/*查找高管信息*/
	function getCompanyManager(id){
		$.post("/KnowledgeGraph/KG/getEntityManager.do",{key:id},function(result){
			$("#managerNum").html(result.data.length);
			var ht = baidu.template("managerList_template",result);
			$("#managerList").html(ht);
		},"json");
	}
	/*查找投资人信息*/
	function getCompanyInvester(id){
		$.post("/KnowledgeGraph/KG/getEntityInvestor.do",{key:id},function(result){
			$("#invertorNum").html(result.data.length);
			var input = {name:[],subName:[]};
			for(var i=0;i<result.data.length;i++){
				input.name[i] = result.data[i];
				input.subName[i] = stringLimit(result.data[i],10,8);
			}
			console.log(input)
			var ht = baidu.template("investorList_template",input);
			$("#InvestorList").html(ht);
		},"json");
	}
	/*高亮关键字*/
	function SearchHighlight(idVal,keyword){ 
	    var $pucl = $("#"+idVal); 
	    if("" == keyword) return; 
	    var temp=$pucl.html(); 
	    var htmlReg = new RegExp("\<.*?\>","i"); 
	    var arrA = new Array(); 
	    //替换HTML标签 
	    for(var i=0;true;i++){ 
	        var m=htmlReg.exec(temp); 
	        if(m){ 
	            arrA[i]=m; 
	        }else{ 
	            break; 
	        } 
	        temp=temp.replace(m,"{[("+i+")]}"); 
	    } 
	    words = unescape(keyword.replace(/\+/g,' ')).split(/\s+/); 
	    //替换关键字 
	    for (w=0;w<words.length;w++){ 
	        var r = new RegExp("("+words[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&")+")","ig"); 
	        temp = temp.replace(r,"<span>$1</span>"); 
	    } 
	    //恢复HTML标签 
	    for(var i=0;i<arrA.length;i++){ 
	        temp=temp.replace("{[("+i+")]}",arrA[i]); 
	    } 
        $pucl.html(temp); 
	} 
})();
</script>
</body>
</html>