输入界面:
这个界面用来选择论文集合,在论文集合选择完成之后,分析出论文集合的一些性质,比如平均reference引用数目,平均字数等等论文集合的特征,并用柱状图等形象化表示出来。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基于规则嵌入的论文比对系统</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="./bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="./bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" />
<script src="./bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<style>
.jumbotron {
background: #d0e1f0;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron text-center" style="height: 220px;">
<h1>基于规则嵌入的论文比对系统</h1><br>
<!-- <span class="label label-success" style="font-size: large;">输入一篇科普文章,您将得到它的“主题”与“行文思路”</span> -->
</div>
<div class="row">
<div class="col-xs-3">
<div class="panel panel-info">
<div class="panel-heading">
<h3>查询历史</h3>
<span class="label label-default">历史记录</span>
</div>
</div>
</div>
<div class="col-xs-9">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="text-center">论文集合输入</h3>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
通过年份会议选择论文集合
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="form-group">
<div class="form-group">
<div class="col-sm-2 col-lg-offset-1">
<p>年份</p>
<input type="text" id="date" name="datetimepicker" value=" "
placeholder="选择年份" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-2 col-lg-offset-1">
<p>会议</p>
<div class="form-group">
<select class="form-control">
<option>会议1</option>
<option>会议2</option>
<option>会议3</option>
<option>会议4</option>
<option>会议5</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<button type="button submit" class="btn btn-info btn-lg btn-block">
详情</button>
</div>
</div>
<div class="col-sm-offset-2 col-sm-3">
<button type="button submit" class="btn btn-success btn-lg btn-block">
分析</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
输入论文名选择对应论文集合
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">论文名</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="请输入论文名" name="title">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<button type="button submit" class="btn btn-info btn-lg btn-block">
详情</button>
</div>
<div class="col-sm-offset-2 col-sm-3">
<button type="button submit" class="btn btn-success btn-lg btn-block">
分析</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#date').datetimepicker({
startView: 4,//日期时间选择器打开之后首先显示的视图。 可接受的值:0 - 小时 视图,1 - 天 视图,2 - 月 视图,3 - 年 视图,4 - 十年 视图
minView: 4,//Number, String. 默认值:0, ‘hour’,日期时间选择器所能够提供的最精确的时间选择视图
autoclose: true,//当选择一个日期之后是否立即关闭此日期时间选择器
todayBtn: true,//在日期时间选择器组件的底部显示一个 “Today” 按钮用以选择当前日期
format: 'yyyy'//日期显示格式
});
</script>
</body>
</html>