新增用户统计

This commit is contained in:
zhanghongqing
2018-11-05 10:17:14 +08:00
parent feaef70c3c
commit 051d16bfc9
11 changed files with 1837 additions and 1050 deletions

View File

@@ -0,0 +1,140 @@
package com.nis.domain.dashboard;
import java.io.Serializable;
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.annotation.JsonInclude.Include;
import com.google.gson.annotations.SerializedName;
import com.wordnik.swagger.annotations.ApiModelProperty;
public class NtcRadiusReport implements Serializable{
private static final long serialVersionUID = 7635016645942704971L;
@JsonInclude(value = Include.NON_NULL)
@ApiModelProperty(value = "接入IP", required = true)
protected String nasIp;
@JsonInclude(value = Include.NON_NULL)
@ApiModelProperty(value = "用户名", required = true)
protected String account;
@JsonInclude(value = Include.NON_NULL)
@ApiModelProperty(value = "次数", required = true)
protected Long num;
@JsonInclude(value = Include.NON_NULL)
@ApiModelProperty(value = "统计时间", required = true)
protected String reportTime;
/**
* 业务类型1:用户名和接口IP列表 2:根据用户统计IP变化趋势 3IP根据统计用户变化趋势
*/
protected String searchBusinessType = "1";
@SerializedName("searchReportStartTime")
protected String searchFoundStartTime;
@SerializedName("searchReportEndTime")
protected String searchFoundEndTime;
protected Long searchReportStartTimeCluster;
protected Long searchReportEndTimeCluster;
protected String searchNasIp;
protected String searchAccount;
protected String groupType;
public String getNasIp() {
return nasIp;
}
public void setNasIp(String nasIp) {
this.nasIp = nasIp;
}
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public Long getNum() {
return num;
}
public void setNum(Long num) {
this.num = num;
}
public String getReportTime() {
return reportTime;
}
public void setReportTime(String reportTime) {
this.reportTime = reportTime;
}
public String getSearchBusinessType() {
return searchBusinessType;
}
@JsonIgnore
public void setSearchBusinessType(String searchBusinessType) {
this.searchBusinessType = searchBusinessType;
}
@JsonIgnore
public String getSearchFoundStartTime() {
return searchFoundStartTime;
}
public void setSearchFoundStartTime(String searchFoundStartTime) {
this.searchFoundStartTime = searchFoundStartTime;
}
@JsonIgnore
public String getSearchFoundEndTime() {
return searchFoundEndTime;
}
public void setSearchFoundEndTime(String searchFoundEndTime) {
this.searchFoundEndTime = searchFoundEndTime;
}
@JsonIgnore
public Long getSearchReportStartTimeCluster() {
return searchReportStartTimeCluster;
}
public void setSearchReportStartTimeCluster(
Long searchReportStartTimeCluster) {
this.searchReportStartTimeCluster = searchReportStartTimeCluster;
}
@JsonIgnore
public Long getSearchReportEndTimeCluster() {
return searchReportEndTimeCluster;
}
public void setSearchReportEndTimeCluster(Long searchReportEndTimeCluster) {
this.searchReportEndTimeCluster = searchReportEndTimeCluster;
}
@JsonIgnore
public String getSearchNasIp() {
return searchNasIp;
}
public void setSearchNasIp(String searchNasIp) {
this.searchNasIp = searchNasIp;
}
@JsonIgnore
public String getSearchAccount() {
return searchAccount;
}
public void setSearchAccount(String searchAccount) {
this.searchAccount = searchAccount;
}
@JsonIgnore
public String getGroupType() {
return groupType;
}
public void setGroupType(String groupType) {
this.groupType = groupType;
}
}

View File

@@ -680,6 +680,7 @@ public final class Constants {
public static final String NTC_TOTAL_REPORT=Configurations.getStringProperty("ntcTotalReport","ntcTotalReport");
public static final String TRAFFIC_IPACTIVE_FIVEMINUTE=Configurations.getStringProperty("trafficIpActiveFiveMinute","trafficIpActiveFiveMinute");
public static final String TRAFFIC_IPACTIVE_ONEHOUR=Configurations.getStringProperty("trafficIpActiveOneHour","trafficIpActiveOneHour");
public static final String NTC_RADIUS_REPORT=Configurations.getStringProperty("ntcRadiusReport","ntcRadiusReport");
/**
* httpclient 工具超时时间设置

View File

@@ -51,6 +51,7 @@ import com.alibaba.fastjson.JSON;
import com.nis.exceptions.MaatConvertException;
import com.nis.util.Constants;
import com.nis.util.Encodes;
import com.nis.util.StringUtil;
/**
* @ClassName: HttpClientBean.java
@@ -193,8 +194,12 @@ public class HttpClientUtil {
String url = "";
try {
URIBuilder uriBuilder = new URIBuilder(destUrl);
for (String param : params.keySet()) {
uriBuilder.addParameter(param, params.get(param).toString());
if(params!=null) {
for (String param : params.keySet()) {
if(!StringUtil.isBlank(param)&&params.get(param)!=null) {
uriBuilder.addParameter(param, params.get(param).toString());
}
}
}
System.err.println(uriBuilder);
url=uriBuilder.toString();

View File

@@ -6,31 +6,17 @@ import java.util.List;
import java.util.Map;
import java.util.Random;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.reflect.TypeToken;
import com.nis.domain.FunctionServiceDict;
import com.nis.domain.Page;
import com.nis.domain.PageLog;
import com.nis.domain.configuration.RequestInfo;
import com.nis.domain.log.NtcIpLog;
import com.nis.domain.log.SearchReport;
import com.nis.domain.maat.LogRecvData;
import com.nis.util.Constants;
import com.nis.util.DictUtils;
import com.nis.util.httpclient.HttpClientUtil;
import com.nis.web.controller.BaseController;
import com.nis.web.controller.report.TestBean;
@Controller
@RequestMapping("${adminPath}/dashboard/traffic")
@@ -111,17 +97,5 @@ public class TrafficStatisticsInfoController extends BaseController {
}
return m;
}
@RequestMapping("userBehavior")
public String list(@ModelAttribute("bean") SearchReport bean,Model model, HttpServletRequest request, HttpServletResponse response) {
List<RequestInfo> requestInfos = requestInfoService.getAllRequestInfo();
model.addAttribute("requestInfos", requestInfos);
Page<TestBean> page=new Page<TestBean>(request, response);
List<TestBean> list=new ArrayList<>();
list.add(new TestBean());
page.setList(list);
model.addAttribute("page", page);
model.addAttribute("bean", bean);
return "/dashboard/trafficUserBehavior";
}
}

View File

@@ -0,0 +1,132 @@
package com.nis.web.controller.dashboard;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.reflect.TypeToken;
import com.nis.domain.dashboard.NtcRadiusReport;
import com.nis.util.Constants;
import com.nis.util.DateUtils;
import com.nis.util.StringUtil;
import com.nis.util.httpclient.HttpClientUtil;
import com.nis.web.controller.BaseController;
@Controller
@RequestMapping("${adminPath}/traffic")
public class TrafficStatisticsReportController extends BaseController {
/**
* 用户行为查询
* @param bean
* @param model
* @param request
* @param response
* @return
*/
@RequestMapping("userBehavior")
public String list(@ModelAttribute("log") NtcRadiusReport bean,Model model, HttpServletRequest request, HttpServletResponse response) {
Map<String, Object> fromJsonList = new HashMap<String, Object>();
Map<String, Object> userJsonList = new HashMap<String, Object>();
Map<String, Object> ipJsonList = new HashMap<String, Object>();
String searchBusinessType = bean.getSearchBusinessType();
if("2".endsWith(searchBusinessType)) {
model.addAttribute("searchBusinessType", 2);// 用户查询
}
if("3".endsWith(searchBusinessType)) {
model.addAttribute("searchBusinessType", 3);// IP查询
}
String url = Constants.DASHBOARD_URL+Constants.NTC_RADIUS_REPORT;
String statTime = bean.getSearchFoundStartTime();
String endTime = bean.getSearchFoundEndTime();
String account = bean.getAccount();
String nasIp = bean.getNasIp();
String destUrl = url+ "?searchBusinessType=1";
String userUrl = url+ "?searchBusinessType=2";
String ipUrl =url + "?searchBusinessType=3";
List list = new ArrayList();
List userList = new ArrayList();
List ipList = new ArrayList();
try {
if(StringUtil.isBlank(statTime)&&StringUtil.isBlank(endTime)) {
statTime=DateUtils.getDate()+" 00:00:00"; // 默认今天
endTime=DateUtils.getDateTime();
bean.setSearchFoundStartTime(statTime);
bean.setSearchFoundEndTime(endTime);
}else {
statTime=URLEncoder.encode(statTime, "UTF-8");
endTime=URLEncoder.encode(endTime, "UTF-8");
String paramUrl="&searchReportStartTime="+statTime+"&searchReportEndTime="+endTime;
destUrl=destUrl+paramUrl;
userUrl=userUrl+paramUrl;
ipUrl=ipUrl+paramUrl;
}
// 用户及IP数据
String string = HttpClientUtil.get(destUrl);
Gson gson = new GsonBuilder().create();
fromJsonList = gson.fromJson(string, new TypeToken<Map>(){}.getType());
list = (ArrayList) fromJsonList.get("data");
Map map = (Map) list.get(0);
List nasIpList=(List) map.get("nasIpList");
List accountList=(List) map.get("accountList");
model.addAttribute("nasIpList", nasIpList);
model.addAttribute("accountList", accountList);
if("2".endsWith(searchBusinessType)&&!StringUtil.isBlank(account)) {
String userString = HttpClientUtil.get(userUrl+"&searchAccount="+account);
// 指定用户 查询
Gson usergson = new GsonBuilder().create();
userJsonList = usergson.fromJson(userString, new TypeToken<Map>(){}.getType());
userList = (ArrayList) userJsonList.get("data");
model.addAttribute("userList", userList);
}
if ("3".endsWith(searchBusinessType)&&!StringUtil.isBlank(nasIp)) {
String ipString = HttpClientUtil.get(ipUrl+"&searchNasIp="+nasIp);
// 指定IP查询
Gson ipgson = new GsonBuilder().create();
ipJsonList = ipgson.fromJson(ipString, new TypeToken<Map>(){}.getType());
ipList = (ArrayList) ipJsonList.get("data");
model.addAttribute("ipList", ipList);
}
} catch (Exception e) {
e.printStackTrace();
}
return "/dashboard/trafficUserBehavior";
}
public static void main(String[] args) {
Map<String, Object> fromJsonList = new HashMap<String, Object>();
HashMap<String, Object> m = new HashMap<String, Object>();
List list = new ArrayList();
String string;
try {
string = HttpClientUtil.get("http://localhost:8082/galaxy-service/service/log/v1/ntcRadiusReport?"
+ "searchBusinessType=1&searchReportStartTime=2018-06-01+15%3A41%3A21&searchReportEndTime=2018-10-30+15%3A46%3A21");
Gson gson = new GsonBuilder().create();
fromJsonList = gson.fromJson(string, new TypeToken<Map>(){}.getType());
list = (ArrayList) fromJsonList.get("data");
Map map = (Map) list.get(0);
List nasIpList=(List) map.get("nasIpList");
List accountList=(List) map.get("accountList");
System.err.println(map.get("nasIpList"));
System.err.println(map.get("accountList"));
} catch (Exception e) {
e.printStackTrace();
}
}
}

View File

@@ -1321,4 +1321,7 @@ ethernet=Ethernet
http_req_body_keywords=Request Body Keyword
http_res_body_keywords=Response Body Keyword
http_req_hdr_keywords=Request Header Keyword
http_res_hdr_keywords=Response Header Keyword
http_res_hdr_keywords=Response Header Keyword
traffic_user_behavior=Traffic Account Behavior
user_behavior_data=Account statistics
ip_behavior_data=IP statistics

File diff suppressed because it is too large Load Diff

View File

@@ -1313,4 +1313,7 @@ http_res_body_keywords=\u5E94\u7B54\u5185\u5BB9\u5173\u952E\u5B57
http_req_hdr_keywords=\u8BF7\u6C42\u5934\u57DF\u5173\u952E\u5B57
http_res_hdr_keywords=\u5E94\u7B54\u5934\u57DF\u5173\u952E\u5B57
p2p_eMule_keywords=eMule\u641C\u7D22\u5173\u952E\u5B57
p2p_hash_keywords=\u6587\u4EF6\u6807\u8BC6\u5173\u952E\u5B57
p2p_hash_keywords=\u6587\u4EF6\u6807\u8BC6\u5173\u952E\u5B57
traffic_user_behavior=\u7528\u6237\u884C\u4E3A\u7EDF\u8BA1
user_behavior_data=\u7528\u6237\u7EDF\u8BA1
ip_behavior_data=\u7528\u6237IP\u7EDF\u8BA1

View File

@@ -0,0 +1,451 @@
<%@ 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>
<title><spring:message code="traffic_user_behavior"></spring:message></title>
<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);
}
}
});
});
function searchList(){
if($(".httpReqCfg").hasClass("hidden")){
$("#searchBusinessType").val(3);
}
if($(".httpResCfg").hasClass("hidden")){
$("#searchBusinessType").val(2);
}
$("#searchForm").submit();
return false;
}
</script>
</head>
<body>
<div class="page-content">
<div class="theme-panel hidden-xs hidden-sm">
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/traffic/userBehavior'"><spring:message code="refresh"/></button>
<button type="button" class="btn btn-default" onClick="javascript:window.history.go(-1)"><spring:message code="back"/></button>
</div>
<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">
<sys:message content="${message}"/>
<!-- top -->
<div class="row">
<div class="col-md-6">
<h4 class="ng-binding"><spring:message code="user_behavior_data"/></h4>
<div class="row">
<div class="col-md-12">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>
<th><spring:message code="account"/></th>
<th><spring:message code="link_num"/></th>
</tr>
</thead>
<tbody>
<c:forEach items="${accountList}" var="data">
<tr>
<td>${data.account}</td>
<td><fmt:formatNumber type="number" value="${data.num}" minFractionDigits="0"></fmt:formatNumber></td>
</tr>
</c:forEach>
</tbody>
</table>
<c:if test="${empty accountList}">
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;<spring:message code="noneData"/></div>
</c:if>
</div>
</div>
</div>
<div class="col-md-6">
<h4 class="ng-binding"><spring:message code="ip_behavior_data"/></h4>
<div class="row">
<div class="col-md-12">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>
<th><spring:message code="ip"/></th>
<th><spring:message code="link_num"/></th>
</tr>
</thead>
<tbody>
<c:forEach items="${nasIpList}" var="data">
<tr>
<td>${data.nasIp}</td>
<td><fmt:formatNumber type="number" value="${data.num}" minFractionDigits="0"></fmt:formatNumber></td>
</tr>
</c:forEach>
</tbody>
</table>
<c:if test="${empty nasIpList}">
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;<spring:message code="noneData"/></div>
</c:if>
</div>
</div>
</div>
</div>
<!-- top end -->
<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}"/>
<!-- 搜索内容与操作按钮栏 -->
<div class="col-md-12">
<div class="pull-left accountSearch">
<form:select path="account" class="selectpicker select2 input-medium" data-live-search="true" data-live-search-placeholder="search">
<form:option value=""><spring:message code="select"/> <spring:message code="user"/></form:option>
<c:forEach items="${accountList}" var="acc" >
<form:option value="${acc.account}">${acc.account}</form:option>
</c:forEach>
</form:select>
</div>
<div class="pull-left nasIpSearch">
<form:select path="nasIp" class="selectpicker select2 input-medium" data-live-search="true" data-live-search-placeholder="search">
<form:option value=""><spring:message code="select"/> <spring:message code="ip"/></form:option>
<c:forEach items="${nasIpList}" var="nIp">
<form:option value="${nIp.nasIp}" >${nIp.nasIp}</form:option>
</c:forEach>
</form:select>
</div>
<div class="pull-left">
<div class="input-group">
<div class="input-group-btn">
<span class="selectpicker form-control" ><spring:message code="begin_date"/></span>
</div>
<input id="searchFoundStartTime" name="searchFoundStartTime" type="text" readonly="readonly" class="form-control input-medium Wdate "
value="${log.searchFoundStartTime}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true});"/>
</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>
<input id="searchFoundEndTime" name="searchFoundEndTime" type="text" readonly="readonly" class="form-control input-medium Wdate "
value="${log.searchFoundEndTime}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true});"/>
</div>
</div>
<div class="pull-left">
<button type="button" class="btn blue" onClick="return searchList()"> <i class="fa fa-search"></i> <spring:message code="search"/> </button>
<button type="button" class="btn btn-default" id="resetBtn" > <i class="fa fa-refresh"></i> <spring:message code="reset"/> </button>
</div>
</div>
<!-- 搜索内容与操作按钮栏 -->
</form:form>
</div>
<br>
<!-- searchform end-->
<div class="httpReqCfg">
<div class="row">
<div class="col-md-5" style="padding-right: 1px;">
<div class="panel panel-default" style="height: 500px;">
<div class="panel-body" style="max-height:420px;overflow-y:auto;overflow-x:hidden;">
<h5 class="ng-binding"><spring:message code="account"/></h5>
<div id="deviceRank" class="drank hm-scroll">
<!-- <div class="table-responsive"> -->
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>
<th><spring:message code="ip"/></th>
<th><spring:message code="stat_time"/></th>
<th><spring:message code="link_num"/></th>
</tr>
</thead>
<tbody>
<c:forEach items="${userList}" var="us">
<tr>
<td>${us.nasIp}</td>
<td>${us.reportTime}</td>
<td><fmt:formatNumber type="number" value="${us.num}" minFractionDigits="0"></fmt:formatNumber></td>
</tr>
</c:forEach>
</tbody>
</table>
<c:if test="${empty userList}">
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;<spring:message code="noneData"/></div>
</c:if>
<!-- </div> -->
</div>
</div>
</div>
</div>
<div class="col-md-7" style="padding-left: 8px;">
<div class="panel panel-default">
<div class="panel-body" style="height:500px">
<h5 class="ng-binding"><spring:message code="account"/></h5>
<div id="trend" style="height: 400px; position: relative;" >
<!-- ===================1============== -->
<div class="scrollMouse text-center">
<span id="processLeft" style="display:inline-block"> <i class="fa fa-caret-left"></i> </span>
<i class="icon icon-mouse"></i>
<span id="processRight" style="display:inline-block"> <i class="fa fa-caret-right"></i> </span>
</div>
<c:if test="${!empty userList}">
<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="${userList}" var="us">
<div class="process-row">
<div class="process-time">
<div class="time-con">
<span class="year">${us.reportTime}</span>
</div>
</div>
<div class="process-noyear">
${us.nasIp}
</div>
</div>
</c:forEach>
</div>
</div>
</div>
</div>
</div>
</div>
</c:if>
<!-- ===================1============== -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- IP -->
<div class="httpResCfg">
<div class="row">
<div class="col-md-5" style="padding-right: 1px; ">
<div class="panel panel-default" style="height: 500px;">
<div class="panel-body" style="max-height:420px;overflow-y:auto;overflow-x:hidden;">
<h5 class="ng-binding"><spring:message code="ip"/></h5>
<div id="deviceRank" class="drank hm-scroll">
<!-- <div class="table-responsive"> -->
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>
<th><spring:message code="account"/></th>
<th><spring:message code="stat_time"/></th>
<th><spring:message code="link_num"/></th>
</tr>
</thead>
<tbody>
<c:forEach items="${ipList}" var="it">
<tr>
<td>${it.account}</td>
<td>${it.reportTime}</td>
<td><fmt:formatNumber type="number" value="${it.num}" minFractionDigits="0"></fmt:formatNumber></td>
</tr>
</c:forEach>
</tbody>
</table>
<c:if test="${empty ipList}">
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;<spring:message code="noneData"/></div>
</c:if>
<!-- </div> -->
</div>
</div>
</div>
</div>
<div class="col-md-7" style="padding-left: 8px;">
<div class="panel panel-default">
<div class="panel-body" style="height: 500px">
<h5 class="ng-binding"><spring:message code="ip"/></h5>
<div id="trend" style="height: 400px; position: relative;" >
<!-- ===================2============== -->
<div class="scrollMouse text-center">
<span id="processLeft" style="display:inline-block"> <i class="fa fa-caret-left"></i> </span>
<i class="icon icon-mouse"></i>
<span id="processRight" style="display:inline-block"> <i class="fa fa-caret-right"></i> </span>
</div>
<!-- -->
<c:if test="${!empty ipList}">
<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">
<span class="year">${it.reportTime}</span>
</div>
</div>
<div class="process-noyear">
${it.account}
</div>
</div>
</c:forEach>
</div>
</div>
</div>
</div>
</div>
</div>
</c:if>
<!-- ===================2============== -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- IP end -->
</div>
</div>
</div>
</div>
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<!-- END PAGE LEVEL SCRIPTS -->
</body>
</html>

View File

@@ -0,0 +1,75 @@
/**
* common
*/
body { font-family: "微软雅黑","Helvetica Neue",Helvetica,Arial,sans-serif}
input,button{ outline: none}
input:active,button:active{outline:none;}
::-moz-focus-inner{outline:none;}
ul,li,dl,dt,dd,ol{list-style: none; margin: 0; padding: 0;}
hr{ border-color:#D0D0D0;}
a{outline:none;}
a:hover,a:focus{outline:none;text-decoration: none;}
.color-349aff{color:#349aff;}
.color-ffcc33{color:#ffcc33;}
.color-fe9900{color:#fe9900;}
.pr{ position: relative;}
.pa{position: absolute;}
.pd-15{ padding-bottom: 15px;}
.pb-50{padding-bottom: 50px;}
.pt-15{ padding-top: 15px;}
.mb-50{margin-bottom: 50px;}
.about .about-body {overflow: hidden;width: 98%}
.about .about-body{display: table-cell; vertical-align: top;overflow: hidden;}
.about .about-body .about-title h1{ font-size:30px; color: #666; }
.about .about-body .about-title .help-block{ color: #cbcbcb; font-size: 20px;}
.about .about-body .about-content{ position: relative; color: #666;line-height: 180%; font-size: 16px; padding-bottom: 200px;}
.about .about-body .tree-bg{ background: url('../img/about_tree_bg.png') no-repeat right bottom;}
.about .about-body .about-content p{ color: #666; text-indent: 2em; line-height: 180%; font-size: 16px;}
/**
* 发展历程
*/
.process-timeline{ height: 387px; width: 98%; position: relative; overflow:hidden;margin-right: 10px}
.process-timeline:after{content:"";position:absolute;top:48%;left:0;margin-left:0;background:url('../img/development_timeline.png') repeat-x; height:15px; width:98%; display:block}
.process-timeline .process-body{ position: relative; height: 100%; margin-left: 0;}
.process-timeline .process-row{ cursor:move; display: inline-block; width: 150px; float: left; margin-top: 30px; position: relative; height: 300px;overflow:hidden;}
.process-timeline .process-row .process-time{ position: absolute; top: 48.7%; left: 10%; -wekit-top:48.8%;}
.process-timeline .process-row .process-time .time-con{ position: relative; text-align: center; }
.process-timeline .process-row .process-time .time-con .pic{position: absolute; }
.process-timeline .process-row .process-time .time-con .pic i{ font-size: 100px; color: #666; }
.process-timeline .process-row .process-time .time-con .year{ position: absolute; font-size: 9px; color:#000; padding: 20px 5px 0 5px;margin-left: 5px;}
.process-timeline .process-row .process-time .time-con .bgcolor{ position: absolute; border-radius: 100%; margin-top: 48px; margin-left: 10px; width: 40px; height: 40px; }
.process-timeline .process-row .process-time .time-con .bgcolor.red{ background: red;}
.process-timeline .process-row .process-time .time-con .bgcolor.blue{ background: #3399fe;}
.process-timeline .process-row .process-time .time-con .bgcolor.orange{ background: #ff9900;}
.process-timeline .process-row .process-time .time-con .red i{ color: red;}
.process-timeline .process-row .process-time .time-con .blue i{ color: #3399fe;}
.process-timeline .process-row .process-time .time-con .orange i{ color: #ff9900;}
.process-timeline .process-row .process-noyear { position: absolute; top: 43%; width: 200px; font-size: 16px;margin-left: 20px}
.process-timeline .process-row .process-content{padding-bottom: 40px; }
.process-timeline .process-row .process-content h2{ font-size: 16px; text-align: center;}
.process-timeline .process-row .process-content p{text-indent: 0 !important; font-size: 11px !important; height: 180px;color: #888; white-space:normal; }
/* .process-timeline .process-row:nth-child(even) .process-time{ top: 33.7%;}
.process-timeline .process-row:nth-child(even) .process-time .time-con .year{ padding: 15px 0 0 5px;}
.process-timeline .process-row:nth-child(even) .process-noyear { top:53%}
.process-timeline .process-row:nth-child(even) .process-content{padding-top: 380px; padding-bottom: 0;}
.process-timeline .process-row:nth-child(odd) .process-time .time-con .pic i{-moz-transform:scaleY(-1); -webkit-transform:scaleY(-1); -o-transform:scaleY(-1);transform:scaleY(-1);filter:FlipV();垂直翻转
} */
.process-timeline .process-row:nth-child(even) .process-time .time-con .bgcolor{ margin-top: 15px; margin-left: 10px;}
.scrollMouse i{color: #b5b5b5; display: inline-block;margin: 0 5px; vertical-align: middle;z-index: 5;font-size: 26px}
.scrollMouse #processLeft,
.scrollMouse #processRight{cursor: pointer;}
.scrollMouse i:hover{ color: #666;}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB