<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<base href="<%=basePath%>">
<!--// echarts CDN-->
<!--//<script src='https://cdn.bootcss.com/echarts/3.7.0/echarts.simple.js'></script>-->
<script src="${pageContext.request.contextPath}/plug-ins/js/echarts.js"></script>
<script src="${pageContext.request.contextPath}/plug-ins/js/echarts.min.js"></script>
<!--// 下载wordcloud.js文件
// https://github.com/ecomfe/echarts-wordcloud-->
<script src="${pageContext.request.contextPath}/plug-ins/js/echarts-wordcloud.js"></script>
<script src="${pageContext.request.contextPath}/plug-ins/js/jquery-1.10.2.min.js"></script>
</head>
<body>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
th
{
height:50px;
}
html, body{
width: 100%;
height: 100%;
margin: 0;
}
#main{
width: 600px;
height: 500px;
background: rgba(70, 120, 200, 0.2)
}
.box{
width: 600px;
height: 500px;
background: rgba(70, 120, 200, 0.2)
}
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button4 {
background-color: white;
color: black;
border: 2px solid #e7e7e7;
}
.button4:hover {background-color: #e7e7e7;}
input[type=text] {
width: 160px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('https://static.runoob.com/images/mix/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 70%;
}
</style>
<div id='select'>
<p>多条件查询（如果没有可不查）:</p>
<script>
$(document).ready(function(){
$("#hide1").click(function(event){
$("#keyword2,#hide2,#show2").hide();
event.preventDefault();
});
$("#show1").click(function(event){
$("#keyword2,#hide2,#show2").show();
event.preventDefault();
});
$("#hide2").click(function(event){
$("#keyword3").hide();
event.preventDefault();
});
$("#show2").click(function(event){
$("#keyword3").show();
event.preventDefault();
});
});
</script>
<form action="ClickServlet"method="post">
<input type="text" name="name" placeholder="输入关键词">
<button id="show1">+</button>
<button id="hide1">-</button></p>
<input type="text" id="keyword2"name="keyword2" placeholder="输入作者"hidden>
<button id="show2"hidden>+</button>
<button id="hide2"hidden>-</button></p>
<input type="text"id="keyword3" name="keyword3" placeholder="输入标题"hidden></p>
<button class="button button4"onsubmit="ClickServlet">查询</button>
</form>
</div>
<div id='main'>
<script>
var chart1 = echarts.init(document.getElementById('main'));
var postURL = "/lunwen/ShowServlet";
var mydata = new Array();
$.ajaxSettings.async = false;
$.post(postURL, {}, function(rs) {
var dataList = JSON.parse(rs);
for (var i = 0; i < dataList.length; i++) {
var d = {};
d['name'] = dataList[i].name;
d['value'] = dataList[i].value;
mydata.push(d);
}
});
$.ajaxSettings.async = true;
var option = {
tooltip : {},
series : [ {
type : 'wordCloud',
gridSize : 2,
sizeRange : [ 10, 30 ],
rotationRange : [ -90, 90 ],
shape : 'pentagon',
width : 800,
height : 600,
drawOutOfBound : false,
textStyle : {
normal : {
color : function() {
return 'rgb('
+ [ Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160) ]
.join(',') + ')';
}
},
emphasis : {
shadowBlur : 10,
shadowColor : '#333'
}
},
data : mydata
} ]
};
chart1.setOption(option);
chart.on('click', function(params) {
var url = "ClickServlet?name=" + params.name;
window.location.href = url;
});
</script>
</div>
<div>
<table class="table table-hover">
<tr>
<th>论文名称</th>
<th>关键词</th>
<th>来源</th>
<th> </th>
</tr>
<tbody>
<c:forEach items="${list2}" var="data" varStatus="vs">
<tr>
<td><a href="${data.link}">${data.title}</a></td>
<td>${data.keyword}</td>
<td>cvpr</td>
<td><a href="DeleteServlet?name=${data.keyword}">delete </a></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</body>
</html>
