2018-11-05 10:17:14 +08:00
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<html>
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/global/css/layout.css" type="text/css" media="screen">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/global/plugins/jquery-ui/jquery-ui.min.js"></script>
2018-12-28 17:28:22 +08:00
<script src="${ctxStatic }/pages/scripts/jQuery.print.js"></script>
2019-01-16 18:07:16 +08:00
<script src="${ctxStatic }/login/assets/js/jquery.dataTables.min.js"></script>
2018-11-05 10:17:14 +08:00
<title><spring:message code="traffic_user_behavior"></spring:message></title>
2018-11-09 15:10:40 +08:00
<style>
2019-01-16 18:07:16 +08:00
.process-noyear:hover{
2018-11-09 15:10:40 +08:00
cursor: pointer;
}
2018-11-15 16:19:22 +08:00
.Wdate {
width: 200px !important;
}
2018-11-09 15:10:40 +08:00
</style>
2018-11-05 10:17:14 +08:00
<script>
$(document).ready(function() {
// 获取查询类型
if($("#searchBusinessType").val()==3){
$(".userBtn").removeClass("active");
$(".ipBtn").addClass("active");
$(".httpReqCfg").addClass("hidden").addClass("disabled");
// $(".httpResCfg").removeClass("hidden").removeClass("disabled");
$(".accountSearch").addClass("hidden").addClass("disabled");
$(".nasIpSearch").removeClass("hidden").removeClass("disabled");
}else {
$(".nasIpSearch").addClass("hidden").addClass("disabled");
$(".accountSearch").removeClass("hidden").removeClass("disabled");
$(".httpResCfg").addClass("hidden").addClass("disabled");
$(".httpReqCfg").removeClass("hidden").removeClass("disabled");
}
//筛选功能初始化
$("#resetBtn").on("click",function(){
$("select.selectpicker").each(function(){
$(this).selectpicker('val',$(this).find('option:first').val());
$(this).find("option").attr("selected",false);
$(this).find("option:first").attr("selected",true);
});
$(".Wdate").attr("value",'');
$("#searchForm")[0].reset();
});
$(".configType").on("click", function() {
var region = ($(this).find("a").attr("for"));
if(region=="httpReqCfg"){
$(".nasIpSearch").addClass("hidden").addClass("disabled");
$(".httpResCfg").addClass("hidden").addClass("disabled");
$(".httpReqCfg").removeClass("hidden").removeClass("disabled");
$(".accountSearch").removeClass("hidden").removeClass("disabled");
}else{
$(".accountSearch").addClass("hidden").addClass("disabled");
$(".httpReqCfg").addClass("hidden").addClass("disabled");
$(".httpResCfg").removeClass("hidden").removeClass("disabled");
$(".nasIpSearch").removeClass("hidden").removeClass("disabled");
}
});
/* */
var aboutWidth = $(".about").width();
$(".process-timeline").width(aboutWidth);
var lastRightSpeed = 40; //控制拖动到最右边点是否对准时间刻度线上
var processtimelineW = $(".process-timeline").width();
var processrowLength = $(".process-body").find('.process-row').length;
var processbodyNumber = processrowLength*150;
$(".process-body").css({"width":processbodyNumber});
if(processrowLength < 5)
{
$("#draggable").draggable({
disabled: true
});;
return;
}
$("#processLeft").click(function(){
var processContentW = $(".process-content").width();
var processBodyW = $(".process-body").width();
var processBodyML = parseInt($(".ui-draggable").css("left"));
if ( (Math.abs(processBodyML)+processtimelineW) >= processBodyW ) {
return;
}
$(".ui-draggable").css({"left":processBodyML-50});
});
$("#processRight").click(function(){
var processBodyML = parseInt($(".ui-draggable").css("left"));
if (processBodyML == 0) {
return;
}
$(".ui-draggable").css({"left":processBodyML+50});
});
$(document).keydown(function(event){
if (event.keyCode == 39) {
$("#processLeft").click();
}
if (event.keyCode == 37) {
$("#processRight").click();
}
});
$("#draggable").draggable({
cursor: "move",
axis: 'x',
grid: [50, 20],
stop: function(event, ui){
var FleftNumber = parseInt($("#draggable").css("left"));
if (FleftNumber > 0) {
$("#draggable").animate({"left": 0}, 500);
return;
};
var leftNumber = Math.abs(FleftNumber);
leftNumber = leftNumber + processtimelineW;
if (leftNumber > processbodyNumber)
{
leftNumber = processbodyNumber;
$("#draggable").animate({"left": -(leftNumber-processtimelineW + lastRightSpeed)}, 500);
}
}
});
});
2019-01-16 18:07:16 +08:00
function page(n,s){
2018-11-05 10:17:14 +08:00
if($(".httpReqCfg").hasClass("hidden")){
$("#searchBusinessType").val(3);
}
if($(".httpResCfg").hasClass("hidden")){
$("#searchBusinessType").val(2);
}
2019-01-16 18:07:16 +08:00
$("#pageNo").val(n);
$("#pageSize").val(s);
2018-11-09 15:10:40 +08:00
$("#searchForm").submit();
return false;
}
function searchAccountForList(param){
if($(".httpReqCfg").hasClass("hidden")){
$("#searchBusinessType").val(3);
}
if($(".httpResCfg").hasClass("hidden")){
$("#searchBusinessType").val(2);
}
2019-01-16 18:07:16 +08:00
var beginDate=$('#searchFoundStartTime').val();
var endDate=$('#searchFoundEndTime').val();
var url="${ctx}/traffic/getUserBehaviorList?searchFoundStartTime="+beginDate+"&searchFoundEndTime="+endDate+"&account="+param+"&searchBusinessType="+2;
$.jBox("iframe:"+url, {
title: null,
top: '1%',
showClose: false,
draggable:false,
width: $(document).width()*0.5,
height:$(document).height()*0.8,
showScrolling: true, /* 是否显示浏览的滚动条 */
iframeScrolling: 'yes',
buttons: { 'close': true },
loaded:function(h){
$(".jbox-content,top.document").css("overflow-y","hidden");
}
});
2018-11-09 15:10:40 +08:00
}
2019-01-16 18:07:16 +08:00
var dtable;
2018-11-09 15:10:40 +08:00
function searchNasIpForList(param){
if($(".httpReqCfg").hasClass("hidden")){
$("#searchBusinessType").val(3);
}
if($(".httpResCfg").hasClass("hidden")){
$("#searchBusinessType").val(2);
}
2019-01-16 18:07:16 +08:00
var beginDate=$('#searchFoundStartTime').val();
var endDate=$('#searchFoundEndTime').val();
var url="${ctx}/traffic/getUserBehaviorList?searchFoundStartTime="+beginDate+"&searchFoundEndTime="+endDate+"&nasIp="+param+"&searchBusinessType="+3;
$.jBox("iframe:"+url, {
title: null,
top: '1%',
showClose: false,
draggable:false,
width: $(document).width()*0.5,
height:$(document).height()*0.8,
showScrolling: true, /* 是否显示浏览的滚动条 */
iframeScrolling: 'yes',
buttons: { 'close': true },
loaded:function(h){
$(".jbox-content,top.document").css("overflow-y","hidden");
}
});
}
2018-11-09 15:10:40 +08:00
2018-12-27 18:06:07 +08:00
function setReportTime(){
var chooseDate=new Date($('#searchFoundStartTime').val());
chooseDate=chooseDate.setDate(chooseDate.getDate()+7);
var modifyTime=new Date(chooseDate);
$('#searchFoundEndTime').val(modifyTime.getFullYear()+"-"+((modifyTime.getMonth()+1)>=10?(modifyTime.getMonth()+1):"0"+(modifyTime.getMonth()+1))+"-"+(modifyTime.getDate()>=10?modifyTime.getDate():'0'+modifyTime.getDate())+' '+(modifyTime.getHours()>=10?modifyTime.getHours():'0'+modifyTime.getHours())+':'+(modifyTime.getMinutes()>=10?modifyTime.getMinutes():'0'+modifyTime.getMinutes())+':'+(modifyTime.getSeconds()>=10?modifyTime.getSeconds():'0'+modifyTime.getSeconds()));
}
2018-12-28 17:28:22 +08:00
//打印列表
function doPrint() {
if($('.httpResCfg').is(':hidden')){
$(".httpReqCfg").print({
globalStyles: true,
iframe: true,
append: null
});
}else{
$(".httpResCfg").print({
globalStyles: true,
iframe: true,
append: null
});
}
}
2018-11-05 10:17:14 +08:00
</script>
</head>
<body>
<div class="page-content">
<h3 class="page-title">
<spring:message code="traffic_user_behavior"></spring:message>
</h3>
<h5 class="page-header"></h5>
<div class="row">
<div class="col-md-12">
<div class="portlet">
<div class="portlet-body">
2018-12-13 14:01:06 +08:00
<sys:message content="${message}" type="${messageType }"/>
2018-11-05 10:17:14 +08:00
<div class="row">
<ul class="nav nav-tabs">
<li class="userBtn active configType">
<a data-toggle="tab" for="httpReqCfg" data_dldk="<spring:message code="user"/>">
<spring:message code="user" /></a></li>
<li class="ipBtn configType"><a data-toggle="tab" for="httpResCfg" data_dldk="<spring:message code="ip"/>">
<spring:message code="ip"/></a></li>
</ul>
<br>
<!-- searchform -->
<div class="row" >
<form:form id="searchForm" modelAttribute="log" action="${ctx}/traffic/userBehavior" method="post" class="form-search">
<input id="searchBusinessType" name="searchBusinessType" type="hidden" value="${searchBusinessType}"/>
2019-01-16 18:07:16 +08:00
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
2018-11-05 10:17:14 +08:00
<!-- 搜索内容与操作按钮栏 -->
<div class="col-md-12">
<div class="pull-left">
<div class="input-group">
<div class="input-group-btn">
<span class="selectpicker form-control" ><spring:message code="begin_date"/></span>
2019-01-16 18:07:16 +08:00
</div>
2018-12-27 10:47:30 +08:00
<input id="searchFoundStartTime" name="searchFoundStartTime" type="text" readonly="readonly" maxlength="20" class="form-control Wdate"
2019-04-25 14:40:12 +08:00
value="${log.searchFoundStartTime}" onclick="WdatePicker({onpicked:function(){this.onchange()},dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{\'new Date()\'}'});" onchange="setStartTimeByFormat('#searchFoundStartTime','#searchFoundEndTime',1,'m','yyyy-MM-dd hh:mm:ss',false,'yyyy-MM-dd hh')"/>
2018-11-05 10:17:14 +08:00
</div>
</div>
<div class="pull-left">
<div class="input-group">
<div class="input-group-btn">
<span class="selectpicker form-control" ><spring:message code="end_date"/></span>
</div>
2018-12-27 10:47:30 +08:00
<input id="searchFoundEndTime" name="searchFoundEndTime" type="text" readonly="readonly" maxlength="20" class="form-control Wdate"
2019-04-25 14:40:12 +08:00
value="${log.searchFoundEndTime}" onclick="WdatePicker({onpicked:function(){this.onchange()},dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{\'new Date()\'}'});" onchange="setEndTimeByFormat('#searchFoundStartTime','#searchFoundEndTime',1,'m','yyyy-MM-dd hh:mm:ss',false,'yyyy-MM-dd hh')"/>
2018-11-05 10:17:14 +08:00
</div>
</div>
2018-11-07 14:00:09 +08:00
<div class="pull-left accountSearch">
2019-01-18 09:33:23 +08:00
<form:input path="account" class="form-control required"/>
2018-11-07 14:00:09 +08:00
</div>
<div class="pull-left nasIpSearch">
2019-01-18 09:33:23 +08:00
<form:input path="nasIp" class="form-control required"/>
2018-11-07 14:00:09 +08:00
</div>
2018-11-05 10:17:14 +08:00
<div class="pull-left">
2019-01-16 18:07:16 +08:00
<button type="button" class="btn blue" onClick="return page()"> <i class="fa fa-search"></i> <spring:message code="search"/> </button>
2018-11-05 10:17:14 +08:00
<button type="button" class="btn btn-default" id="resetBtn" > <i class="fa fa-refresh"></i> <spring:message code="reset"/> </button>
</div>
2019-01-16 18:07:16 +08:00
<div class="pull-right" hidden>
2018-12-24 15:57:49 +08:00
<div class="btn-group">
2019-01-16 18:07:16 +08:00
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
2018-12-24 15:57:49 +08:00
<i class="fa fa-wrench"></i>
<spring:message code="export"></spring:message>
<i class="fa fa-angle-down"></i>
</button>
2019-01-16 18:07:16 +08:00
<ul class="dropdown-menu pull-right" style="min-width: 81px;right: 2px;">
<li><sys:delRow url="${ctx}/traffic/userBehaviorExport?type=excel"
2018-12-24 15:57:49 +08:00
searchUrl="${ctx}/traffic/userBehavior" id="contentTable"
maxRow="10000" label="excel"></sys:delRow></li>
2019-01-16 18:07:16 +08:00
<li><sys:delRow url="${ctx}/traffic/userBehaviorExport?type=csv"
2018-12-24 15:57:49 +08:00
searchUrl="${ctx}/traffic/userBehavior" id="contentTable"
maxRow="10000" label="csv"></sys:delRow></li>
</ul>
</div>
2018-12-28 17:28:22 +08:00
<div class="btn-group">
<button type="button" class="btn btn-default css-print" onClick="doPrint()"><i class="fa glyphicon glyphicon-print" style="top:3px;margin-right: 3px;"></i><spring:message code="print"/></button>
</div>
2019-01-16 18:07:16 +08:00
2018-12-24 15:57:49 +08:00
</div>
2018-11-05 10:17:14 +08:00
</div>
<!-- 搜索内容与操作按钮栏 -->
</form:form>
</div>
<br>
<div class="httpReqCfg">
<div class="row">
2019-01-16 18:07:16 +08:00
<c:if test="${!empty userList}">
<div class="col-md-12" >
2018-11-08 14:52:58 +08:00
<div class=" ">
2019-01-16 18:07:16 +08:00
<div class="panel-body">
2018-11-07 14:00:09 +08:00
<h5 class="ng-binding"><spring:message code="account"/> : ${searchAccount}</h5>
2019-01-16 18:07:16 +08:00
<div id="trend" style="position: relative;" >
2018-11-05 10:17:14 +08:00
<!-- ===================1============== -->
<div class="scrollMouse text-center">
2019-01-16 18:07:16 +08:00
<span id="processRight" style="display:inline-block"> <i class="fa fa-caret-left"></i> </span>
2018-11-05 10:17:14 +08:00
<i class="icon icon-mouse"></i>
2019-01-16 18:07:16 +08:00
<span id="processLeft" style="display:inline-block"> <i class="fa fa-caret-right"></i> </span>
2018-11-05 10:17:14 +08:00
</div>
<div class="about">
<div class="about-body">
<div class="about-content process-content">
<!-- 鼠标点击 滚动 -->
<div class="process-timeline draggable">
<div id="draggable">
<div class="process-body" width="auto">
2019-01-16 18:07:16 +08:00
<c:forEach items="${page.list}" var="us">
2018-11-05 10:17:14 +08:00
<div class="process-row">
<div class="process-time">
<div class="time-con">
2018-11-09 15:10:40 +08:00
<span class="year" title="<spring:message code="visits"/>: <fmt:formatNumber type='number' value='${us.num}' minFractionDigits='0'/>">${us.reportTime}</span>
2018-11-05 10:17:14 +08:00
</div>
</div>
2019-01-16 18:07:16 +08:00
<div class="process-noyear" title="${us.nasIp}" onClick="return searchNasIpForList('${us.nasIp}')">
2018-11-05 10:17:14 +08:00
${us.nasIp}
</div>
</div>
</c:forEach>
</div>
</div>
</div>
</div>
</div>
2019-01-16 18:07:16 +08:00
<div class="page">${page}</div>
2018-11-05 10:17:14 +08:00
</div>
</div>
</div>
</div>
2019-01-16 18:07:16 +08:00
</div>
</c:if>
<c:if test="${empty userList}">
2018-11-14 19:28:26 +08:00
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i> <spring:message code="noneData"/></div>
</c:if>
2018-11-05 10:17:14 +08:00
</div>
</div>
<!-- IP -->
<div class="httpResCfg">
<div class="row">
2019-01-16 18:07:16 +08:00
<c:if test="${!empty ipList}">
<div class="col-md-12" >
2018-11-08 14:52:58 +08:00
<div class=" ">
2019-01-16 18:07:16 +08:00
<div class="panel-body">
2018-11-07 14:00:09 +08:00
<h5 class="ng-binding"><spring:message code="ip"/> : ${searchNasIp}</h5>
2019-01-16 18:07:16 +08:00
<div id="trend" style="position: relative;" >
2018-11-05 10:17:14 +08:00
<!-- ===================2============== -->
<div class="scrollMouse text-center">
2019-01-16 18:07:16 +08:00
<span id="processRight" style="display:inline-block"> <i class="fa fa-caret-left"></i> </span>
2018-11-05 10:17:14 +08:00
<i class="icon icon-mouse"></i>
2019-01-16 18:07:16 +08:00
<span id="processLeft" style="display:inline-block"> <i class="fa fa-caret-right"></i> </span>
2018-11-05 10:17:14 +08:00
</div>
<!-- -->
<div class="about">
<div class="about-body">
<div class="about-content process-content">
<!-- 鼠标点击 滚动 -->
<div class="process-timeline draggable">
<div id="draggable">
<div class="process-body" width="auto">
<c:forEach items="${ipList}" var="it">
<div class="process-row">
<div class="process-time">
<div class="time-con">
2018-11-09 15:10:40 +08:00
<span class="year" title="<spring:message code="visits"/>: <fmt:formatNumber type='number' value='${it.num}' minFractionDigits='0'/>">${it.reportTime}
2018-11-07 14:00:09 +08:00
</span>
2018-11-05 10:17:14 +08:00
</div>
</div>
2019-01-16 18:07:16 +08:00
<div class="process-noyear" title="${it.account}" onClick="return searchAccountForList('${it.account}')">
2018-11-05 10:17:14 +08:00
${it.account}
</div>
</div>
</c:forEach>
</div>
</div>
</div>
</div>
</div>
2019-01-16 18:07:16 +08:00
<div class="page">${page}</div>
2018-11-05 10:17:14 +08:00
</div>
<!-- ===================2============== -->
</div>
</div>
</div>
2018-11-14 19:28:26 +08:00
</div></c:if>
2019-01-16 18:07:16 +08:00
<c:if test="${empty ipList}">
2018-11-14 19:28:26 +08:00
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i> <spring:message code="noneData"/></div>
2019-01-16 18:07:16 +08:00
</c:if>
2018-11-05 10:17:14 +08:00
</div>
</div>
</div>
<!-- IP end -->
</div>
</div>
</div>
</div>
</body>
</html>
