流量统计新增端口，主题图
This commit is contained in:
zhanghongqing
@@ -666,6 +666,9 @@ public final class Constants {
|
||||
public static final String TRAFFIC_SYSTEM_CHART=Configurations.getStringProperty("trafficSystemChart","trafficSystemChart");
|
||||
public static final String TRAFFIC_WEBSITELIST=Configurations.getStringProperty("trafficWebsiteList","trafficWebsiteList");
|
||||
public static final String TRAFFIC_WEBTYPECHART=Configurations.getStringProperty("trafficWebTypeChart","trafficWebTypeChart");
|
||||
public static final String TRAFFIC_PORT_ACTIVE=Configurations.getStringProperty("trafficPortActive","trafficPortActive");
|
||||
public static final String TRAFFIC_TOPIC_AND_DOMAIN_CHART=Configurations.getStringProperty("trafficTopicAndDomainChart","trafficTopicAndDomainChart");
|
||||
public static final String NTC_TOTAL_REPORT=Configurations.getStringProperty("ntcTotalReport","ntcTotalReport");
|
||||
|
||||
/**
|
||||
* httpclient 工具超时时间设置
|
||||
|
||||
@@ -15,13 +15,17 @@ import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RequestParam;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
|
||||
import com.google.common.collect.Maps;
|
||||
import com.google.gson.Gson;
|
||||
import com.google.gson.GsonBuilder;
|
||||
import com.google.gson.reflect.TypeToken;
|
||||
import com.nis.domain.Page;
|
||||
import com.nis.domain.PageLog;
|
||||
import com.nis.domain.SysDataDictionaryItem;
|
||||
import com.nis.domain.configuration.WebsiteDomainTopic;
|
||||
import com.nis.util.CodeDicUtils;
|
||||
import com.nis.util.Constants;
|
||||
import com.nis.util.DictUtils;
|
||||
import com.nis.util.StringUtil;
|
||||
import com.nis.util.httpclient.HttpClientUtil;
|
||||
import com.nis.web.controller.BaseController;
|
||||
@@ -42,6 +46,27 @@ public class DashboardController extends BaseController{
|
||||
return "/dashboard/dashBoardIndex";
|
||||
}
|
||||
|
||||
/**
|
||||
* 活跃端口 TOP10
|
||||
*/
|
||||
@RequestMapping(value="portActive")
|
||||
@ResponseBody
|
||||
public List portActive(){
|
||||
Map<String, Object> fromJsonList = new HashMap<String, Object>();
|
||||
List list = new ArrayList();
|
||||
try {
|
||||
String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_PORT_ACTIVE);
|
||||
Gson gson = new GsonBuilder().create();
|
||||
fromJsonList = gson.fromJson(string, new TypeToken<Map>(){}.getType());
|
||||
list = (ArrayList) fromJsonList.get("data");
|
||||
logger.info("活跃端口数据"+fromJsonList);
|
||||
return list;
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
logger.error("活跃端口数据错误"+e);
|
||||
}
|
||||
return list;
|
||||
}
|
||||
/**
|
||||
* 活跃IP TOP10
|
||||
*/
|
||||
@@ -54,9 +79,9 @@ public class DashboardController extends BaseController{
|
||||
String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_IPACTIVE);
|
||||
Gson gson = new GsonBuilder().create();
|
||||
fromJsonList = gson.fromJson(string, new TypeToken<Map>(){}.getType());
|
||||
list = (ArrayList) fromJsonList.get("data");
|
||||
logger.info("活跃IP数据"+fromJsonList);
|
||||
return list;
|
||||
list = (ArrayList) fromJsonList.get("data");
|
||||
return list;
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
logger.error("活跃IP错误"+e);
|
||||
@@ -332,15 +357,21 @@ public class DashboardController extends BaseController{
|
||||
fromJsonList = gson.fromJson(string, new TypeToken<Map>(){}.getType());
|
||||
list = (List<Map>) fromJsonList.get("data");
|
||||
//标签集合
|
||||
List<CodeResult> codeList = CodeDicUtils.getCodeList("webCode");
|
||||
// List<CodeResult> codeList = CodeDicUtils.getCodeList("webCode");
|
||||
List<SysDataDictionaryItem> codeList = DictUtils.getDictList("WEBSITE_SERVER");
|
||||
//将数字替换为标签文字
|
||||
if(list!=null&&!list.isEmpty()){
|
||||
for (Map map : list) {
|
||||
Double value1 = Double.parseDouble(map.get("webId").toString());
|
||||
for (CodeResult code : codeList) {
|
||||
Double value2 = Double.valueOf(code.getCode());
|
||||
Double value1=0d;
|
||||
if(StringUtil.isBlank(map.get("websiteServiceId").toString())){
|
||||
value1=268435455d;
|
||||
}else{
|
||||
value1 = Double.parseDouble(map.get("websiteServiceId").toString());
|
||||
}
|
||||
for (SysDataDictionaryItem code : codeList) {
|
||||
Double value2 = Double.valueOf(code.getItemCode());
|
||||
if(value1.equals(value2)){
|
||||
map.put("webId", code.getItem());
|
||||
map.put("websiteService", code.getItemValue());
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -356,57 +387,122 @@ public class DashboardController extends BaseController{
|
||||
return resultList;
|
||||
}
|
||||
/**
|
||||
* http网站-某个网站的分类统计
|
||||
* http网站-某个网站的子域名统计
|
||||
*/
|
||||
@RequestMapping(value="webTypeChart")
|
||||
@ResponseBody
|
||||
public List webTypeChart(@RequestParam("webId") String webId){
|
||||
public List webTypeChart(@RequestParam("websiteServiceId") String websiteServiceId){
|
||||
Map<String, Object> fromJsonList = new HashMap<String, Object>();
|
||||
List<Map> list = new ArrayList<Map>();
|
||||
List<Map> resultList = new ArrayList<Map>();
|
||||
//标签集合
|
||||
List<CodeResult> codeList1 = CodeDicUtils.getCodeList("webCode");
|
||||
//将标签文字转为数字
|
||||
Integer web=null;
|
||||
for (CodeResult codeResult : codeList1) {
|
||||
if(webId.equalsIgnoreCase(codeResult.getItem())){
|
||||
web=Integer.parseInt(codeResult.getCode());
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(web==null){
|
||||
web=Integer.parseInt(webId);//处理为匹配项编码
|
||||
}
|
||||
try {
|
||||
String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_WEBTYPECHART+"?webId="+web);
|
||||
String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_WEBTYPECHART+"?websiteServiceId="+websiteServiceId);
|
||||
Gson gson = new GsonBuilder().create();
|
||||
fromJsonList = gson.fromJson(string, new TypeToken<Map>(){}.getType());
|
||||
list = (List<Map>) fromJsonList.get("data");
|
||||
//标签集合
|
||||
List<CodeResult> codeList2 = CodeDicUtils.getCodeList("webCode");//网站分类字典-未定义？
|
||||
// List<CodeResult> codeList2 = CodeDicUtils.getCodeList("webCode");//网站子域名表获取域名domain
|
||||
List<WebsiteDomainTopic> domainList = appCfgService.getDomainDict(new WebsiteDomainTopic());
|
||||
if(list!=null&&list.size()>0&&domainList!=null&&domainList.size()>0){
|
||||
for (Map dataMap : list) {
|
||||
for (WebsiteDomainTopic wdt : domainList) {
|
||||
// Map<String, Object> map = Maps.newHashMap();
|
||||
if(wdt!=null){
|
||||
String domain = wdt.getDomain();
|
||||
Double domainId = wdt.getId().doubleValue();
|
||||
Double webId = Double.parseDouble(dataMap.get("webId").toString());
|
||||
//10个域名之外的为others webId设为-1外
|
||||
if(dataMap.get("webId").toString().equals("-1")){
|
||||
dataMap.put("domain", "Others");
|
||||
break;
|
||||
}
|
||||
if(domainId.equals(webId)){
|
||||
dataMap.put("domain", domain);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
resultList.add(dataMap);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
logger.info("http某个网站子域名流量统计"+fromJsonList);
|
||||
return resultList;
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
logger.error("http某个网站子域名流量统计错误"+e);
|
||||
}
|
||||
return resultList;
|
||||
}
|
||||
|
||||
/**
|
||||
* http网站主题跟域名统计
|
||||
*/
|
||||
@RequestMapping(value="topicAndDomainList")
|
||||
@ResponseBody
|
||||
public List topicAndDomainList(){
|
||||
Map<String, Object> fromJsonList = new HashMap<String, Object>();
|
||||
List<Map> list = new ArrayList<Map>();
|
||||
List<Map> resultList = new ArrayList<Map>();
|
||||
try {
|
||||
String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_TOPIC_AND_DOMAIN_CHART);
|
||||
Gson gson = new GsonBuilder().create();
|
||||
fromJsonList = gson.fromJson(string, new TypeToken<Map>(){}.getType());
|
||||
list = (List<Map>) fromJsonList.get("data");
|
||||
List<SysDataDictionaryItem> codeList = DictUtils.getDictList("TOPIC");
|
||||
//将数字替换为标签文字
|
||||
if(null!=list&&!list.isEmpty()){
|
||||
List<WebsiteDomainTopic> domainList = appCfgService.getDomainDict(new WebsiteDomainTopic());
|
||||
if(list!=null&&!list.isEmpty()){
|
||||
for (Map map : list) {
|
||||
Double value1 = Double.parseDouble(map.get("webType").toString());
|
||||
for (CodeResult code : codeList2) {
|
||||
Double value2 = Double.valueOf(code.getCode());
|
||||
Double value1=0d;
|
||||
if(StringUtil.isBlank(map.get("topicId").toString())){
|
||||
value1=268435455d;
|
||||
}else{
|
||||
value1 = Double.parseDouble(map.get("topicId").toString());
|
||||
}
|
||||
for (SysDataDictionaryItem code : codeList) {
|
||||
Double value2 = Double.valueOf(code.getItemCode());
|
||||
if(value1.equals(value2)){
|
||||
map.put("webType", code.getItem());
|
||||
map.put("topic", code.getItemValue());
|
||||
break;
|
||||
}
|
||||
}
|
||||
//将domain添加名称
|
||||
List<Map> dataDomainList = (List<Map>)map.get("domainData");
|
||||
if(dataDomainList!=null&&dataDomainList.size()>0&&domainList!=null&&domainList.size()>0){
|
||||
for (WebsiteDomainTopic wdt : domainList) {
|
||||
for (Map dataMap : dataDomainList) {
|
||||
if(wdt!=null){
|
||||
String domain = wdt.getDomain();
|
||||
Double domainId = wdt.getId().doubleValue();
|
||||
Double webId = Double.parseDouble(dataMap.get("webId").toString());
|
||||
//10个域名之外的为others webId设为-1
|
||||
// if(dataMap.get("webId").toString().equals("-1")){
|
||||
// dataMap.put("domain", "Others");
|
||||
// break;
|
||||
// }
|
||||
if(domainId.equals(webId)){
|
||||
dataMap.put("domain", domain);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
resultList.add(map);
|
||||
}
|
||||
}
|
||||
logger.info("http某个网站分类流量统计"+fromJsonList);
|
||||
logger.info("http网站主题流量分析数据："+fromJsonList);
|
||||
return resultList;
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
logger.error("http某个网站分类流量统计错误"+e);
|
||||
logger.error("http网站主题流量分析数据错误："+e);
|
||||
}
|
||||
return resultList;
|
||||
}
|
||||
|
||||
|
||||
@RequestMapping(value="webTypeList")
|
||||
public String ipActiveList( HttpServletRequest request, HttpServletResponse response, Model model){
|
||||
PageLog<TrafficIpActiveStatistic> page = new PageLog<TrafficIpActiveStatistic>(request, response);
|
||||
@@ -440,7 +536,7 @@ public class DashboardController extends BaseController{
|
||||
return "/dashboard/trafficBandwidthList";
|
||||
}
|
||||
|
||||
|
||||
////////////////////////////////////////test
|
||||
@RequestMapping(value="showChart")
|
||||
public String showChart(@ModelAttribute("entry") TrafficIpActiveStatistic entry, Model model){
|
||||
String ipAddr="1.1.1.1";
|
||||
|
||||
@@ -270,7 +270,7 @@ mmLogoDetectionLog=mmLogoDetectionLogs
|
||||
mmFaceRecognizationLog=mmFaceRecognizationLogs
|
||||
########################################
|
||||
#\u5927\u5C4F\u56FE\u8868\u5C55\u793A\u670D\u52A1\u63A5\u53E3
|
||||
dashboardUrl=http://10.0.6.242:8080/galaxy/service/log/v1/
|
||||
dashboardUrl=http://10.0.6.101:8080/galaxy/service/log/v1/
|
||||
trafficIpActive=trafficIpActive
|
||||
trafficProtocol=trafficProtocol
|
||||
trafficApp=trafficApp
|
||||
@@ -280,6 +280,9 @@ trafficBsList=trafficBsList
|
||||
trafficSystemChart=trafficSystemChart
|
||||
trafficWebsiteList=trafficWebsiteList
|
||||
trafficWebTypeChart=trafficWebTypeChart
|
||||
trafficPortActive=trafficPortActive
|
||||
trafficTopicAndDomainChart=trafficTopicAndDomainChart
|
||||
ntcTotalReport=ntcTotalReport
|
||||
|
||||
client_connect_timeout=300000
|
||||
client_read_timeout=300000
|
||||
|
||||
@@ -9,8 +9,7 @@
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/global/plugins/highcharts/css/common.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/global/plugins/highcharts/css/data_text.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/paginate.css">
|
||||
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/pagination.css">
|
||||
<script src="${pageContext.request.contextPath}/static/pages/scripts/dashboard.js"></script>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
@@ -34,21 +33,21 @@
|
||||
<div class="text_1">
|
||||
<div class="fr_fc">
|
||||
<div class="fl_fc">
|
||||
<a href="#">
|
||||
<span>
|
||||
<p><i class="fa fa-ban"> </i> 阻断链接数</p>
|
||||
<p class="numberRun">15802</p>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<%-- <a href="${ctx}/dashboard/bandwidthList"> 详情显示--%>
|
||||
<span>
|
||||
<p><i class="fa fa-cloud-download"></i> <!-- 网络带宽 --><spring:message code="bandwith"/></p>
|
||||
<p class="csNum">In <span class="c2sNum">83</span>% <i id="c2sColor" class="fa fa-arrow-up"></i> | Out <span class="s2cNum">17</span>% <i id="s2cColor" class="fa fa-arrow-down"></i></p>
|
||||
<span class="numberRun4">23802</span ><span class="numberRun4-unit"> bps</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fr_fc">
|
||||
<div class="fl_fc">
|
||||
<a href="#">
|
||||
<!-- <a href="javacript:;"> -->
|
||||
<span>
|
||||
<p><i class="fa fa-external-link"></i> 新建链接数</p>
|
||||
<p class="numberRun1">15802</p>
|
||||
<p><i class="fa fa-external-link"></i> <!-- 阻断链接数 --><spring:message code="action_reject"/></p>
|
||||
<p class="numberRun1">2102</p>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
@@ -62,33 +61,33 @@
|
||||
<div class="fr_fc">
|
||||
<!-- <i class="fa fa-bar-chart"></i> -->
|
||||
<div class="fl_fc">
|
||||
<a href="#">
|
||||
<!-- <a href="javacript:;"> -->
|
||||
<span>
|
||||
<p><i class="fa fa-trash"> </i> 丢弃链接数</p>
|
||||
<p class="numberRun2">15802</p>
|
||||
<p><i class="fa fa-trash"> </i> <!-- 监测链接数 --><spring:message code="action_monit"/></p>
|
||||
<p class="numberRun2">65802</p>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fr_fc">
|
||||
<div class="fl_fc">
|
||||
<a href="${ctx}/dashboard/ipActiveList">
|
||||
<%-- <a href="${ctx}/dashboard/ipActiveList"> --%>
|
||||
<span>
|
||||
<p><i class="fa fa-heartbeat"> </i> 活跃链接数</p>
|
||||
<p class="numberRun3">15802</p>
|
||||
<p><i class="fa fa-heartbeat"> </i> <!-- 丢弃链接数 --><spring:message code="action_drop"/></p>
|
||||
<p class="numberRun3">85812</p>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fr_fc">
|
||||
<div class="fl_fc">
|
||||
<a href="${ctx}/dashboard/bandwidthList">
|
||||
<span>
|
||||
<p><i class="fa fa-cloud-download"></i> 网络带宽</p>
|
||||
<p class="csNum">c2s <span class="c2sNum">83</span>% <i id="c2sColor" class="fa fa-arrow-up"></i> | s2c <span class="s2cNum">17</span>% <i id="s2cColor" class="fa fa-arrow-down"></i></p>
|
||||
<p class="numberRun4">15802</p>
|
||||
</span>
|
||||
</a>
|
||||
<!-- <a href="javacript:;"> -->
|
||||
<span>
|
||||
<p><i class="fa fa-ban"> </i> <!-- 回流链接数 --><spring:message code="action_loop"/></p>
|
||||
<p class="numberRun">45802</p>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -117,7 +116,7 @@
|
||||
<div class="main_left fl">
|
||||
<div class="left_1">
|
||||
<div class="main_title">
|
||||
<spring:message code="traffic_ipactive_chart"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
|
||||
<spring:message code="traffic_ipactive_chart"/> <a href="javascipt:void(0)" onclick="ipActiveList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
</div>
|
||||
<!-- 活跃IP图 --> <div id="chart_main" style="width:100%;height:400px;"></div>
|
||||
</div>
|
||||
@@ -126,63 +125,95 @@
|
||||
<div class="main_center fl">
|
||||
<div class="center_text">
|
||||
<div class="main_title">
|
||||
<spring:message code="traffic_protocol_chart"/> <a href="${ctx}/dashboard/traffic/protocolTypeList"><i class="fa fa-list-ul"></i></a>
|
||||
<spring:message code="traffic_protocol_chart"/> <%-- <a href="${ctx}/dashboard/traffic/protocolTypeList"><i class="fa fa-list-ul"></i></a> --%>
|
||||
<a href="javascipt:void(0)" onclick="protocolList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
</div>
|
||||
<div id="chart_1" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 活跃端口 -->
|
||||
<div class="main_right fr">
|
||||
<div class="right_1">
|
||||
<div class="main_title_port">
|
||||
<spring:message code="active_port"/> <!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
|
||||
<a href="javascipt:void(0)" onclick="portActiveList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
</div>
|
||||
|
||||
<div class="main_table_port">
|
||||
<table id="contentTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><spring:message code="port"/></th>
|
||||
<th><spring:message code="visits"/></th>
|
||||
<th><spring:message code="percentage"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyDataPort">
|
||||
<tr>
|
||||
<td>80</td>
|
||||
<td>16764</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- 第2行 -->
|
||||
<div class="data_main1">
|
||||
<div class="main_left1 fl">
|
||||
<div class="left_1">
|
||||
<div class="main_title1">
|
||||
<spring:message code="传输层协议"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
|
||||
<spring:message code="traffic_app_chart"/> <!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
|
||||
<a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
</div>
|
||||
<!-- 传输层协议图 --><!-- <div id="chart_transport" style="width:100%;height:400px;"></div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_center1 fl">
|
||||
<div class="center_text1">
|
||||
<div class="main_title1">
|
||||
<spring:message code="traffic_app_chart"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<!-- <div class="choice">
|
||||
<label for="">类型：</label>
|
||||
<select name="" id="">
|
||||
<option value="">核心</option>
|
||||
<option value="">其它</option>
|
||||
</select>
|
||||
</div> -->
|
||||
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 400px;"></div>
|
||||
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%-- <div class="main_right1 fr">
|
||||
<div class="right_1">
|
||||
<div class="main_title1">
|
||||
<spring:message code="traffic_app_chart"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
||||
<div class="main_center1 fl">
|
||||
<div class="bottom_web fl">
|
||||
<div class="main_title_web">
|
||||
<spring:message code="traffic_website_list"/> <%-- <a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a> --%>
|
||||
<a href="javascipt:void(0)" onclick="websiteList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
</div>
|
||||
<!-- <div class="choice">
|
||||
<label for="">类型：</label>
|
||||
<select name="" id="">
|
||||
<option value="">核心</option>
|
||||
<option value="">其它</option>
|
||||
</select>
|
||||
</div> -->
|
||||
<div id="chart_3" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div> --%>
|
||||
<div class="main_table_web">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><spring:message code="ranking"/></th>
|
||||
<th><spring:message code="website"/></th>
|
||||
<th><spring:message code="trend"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyData2">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>baidu.com</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_right1 fl">
|
||||
<div class="bottom_web fl">
|
||||
<%-- <div class="main_title_web">
|
||||
<spring:message code="traffic_website_type_chart"/>
|
||||
</div> --%>
|
||||
<div class="main_table_web">
|
||||
<!-- http网站分类图 --><div id="chart_4" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 第3行 -->
|
||||
<%-- <div class="data_main2">
|
||||
<!-- 中图 -->
|
||||
@@ -208,7 +239,8 @@
|
||||
<div class="data_bottom">
|
||||
<div class="bottom_1 fl">
|
||||
<div class="main_title">
|
||||
<spring:message code="traffic_ua_list"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
||||
<!-- 终端 -->BS <!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
|
||||
<a href="javascipt:void(0)" onclick="systemList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<table>
|
||||
@@ -239,9 +271,9 @@
|
||||
|
||||
<div class="bottom_center fl">
|
||||
<div class="bottom_2 fl">
|
||||
<div class="main_title">
|
||||
<spring:message code="traffic_ua_chart"/>
|
||||
</div>
|
||||
<%-- <div class="main_title">
|
||||
<spring:message code="BS"/>
|
||||
</div> --%>
|
||||
<div class="main_table">
|
||||
<!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
@@ -270,127 +302,16 @@
|
||||
</div>
|
||||
</div>
|
||||
--%>
|
||||
<div class="bottom_3 fl">
|
||||
<div class="center_text2">
|
||||
<div class="bottom_3 fr">
|
||||
<div class="main_title">
|
||||
<spring:message code="业务分类"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
|
||||
<spring:message code="topic"/> <%-- <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a> --%>
|
||||
<a href="javascipt:void(0)" onclick="topicAndDomainList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
</div>
|
||||
<!-- 业务分类图 --><div id="chart_serviceType" style="width:100%;height:400px;"></div>
|
||||
</div>
|
||||
<!-- 网站主题分类图 --><div id="chart_topic" style="width:100%;height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<%-- <div class="bottom_4 fr">
|
||||
<div class="main_title">
|
||||
<spring:message code="traffic_website_type_chart"/>
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<div id="chart_4" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
--%>
|
||||
</div>
|
||||
<!-- 第5行 -->
|
||||
<div class="data_bottom2">
|
||||
<div class="bottom_12 fl">
|
||||
<div class="main_title2">
|
||||
<spring:message code="traffic_website_list"/> <a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<div class="main_table2">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><spring:message code="ranking"/></th>
|
||||
<th><spring:message code="website"/></th>
|
||||
<th><spring:message code="trend"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyData2">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>baidu.com</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom_center2 fl">
|
||||
<div class="bottom_22 fl">
|
||||
<div class="main_title2">
|
||||
<spring:message code="traffic_website_type_chart"/>
|
||||
</div>
|
||||
<div class="main_table2">
|
||||
<!-- http网站分类图 --><div id="chart_4" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%-- <div class="bottom_32 fl">
|
||||
<div class="center_text22">
|
||||
<div class="main_title2">
|
||||
<spring:message code="活跃端口图"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<!-- 活跃端口图 --><div id="chart_port" style="width:100%;height:400px;"></div>
|
||||
</div>
|
||||
</div> --%>
|
||||
|
||||
<!-- 活跃端口图 -->
|
||||
<div class="bottom_32 fl">
|
||||
<div class="main_title2">
|
||||
<spring:message code="活跃端口图"/> <a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<div class="main_table2">
|
||||
<table id="contentTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><spring:message code="ranking"/></th>
|
||||
<th><spring:message code="port"/></th>
|
||||
<th><spring:message code="访问次数"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyDataPort">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="demo1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -403,35 +324,26 @@
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/data.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/drilldown.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/echart.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/pages/scripts/paginate.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/sunburst.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/pages/scripts/echart.js"></script>
|
||||
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$("#demo1").paginate({
|
||||
count : 10, //页数
|
||||
start : 1, //开始打开第几页
|
||||
display : 3, //显示几个页数 : true,
|
||||
border_color : '#3D3D3D',
|
||||
text_color : '#757575',
|
||||
background_color : '#303030',
|
||||
border_hover_color : '#3D3D3D',
|
||||
text_hover_color : '#fff',
|
||||
background_hover_color : '#3D3D3D',
|
||||
images : false,
|
||||
mouse : 'press'
|
||||
});
|
||||
|
||||
//动态显示数据
|
||||
ajaxinfo();
|
||||
setInterval(function(){
|
||||
ajaxinfo();
|
||||
},6000);
|
||||
},5000);
|
||||
|
||||
protocolList();//协议统计
|
||||
ipActiveList();//活跃IP
|
||||
portActiveList();//活跃端口
|
||||
appTypeList();//应用类型
|
||||
systemList();//操作系统列表
|
||||
websiteList();//http网站列表
|
||||
topicAndDomainList();//主题网站域名
|
||||
|
||||
|
||||
uaSelectChange($('#uaSelect').val());
|
||||
@@ -440,8 +352,8 @@ $(document).ready(function(){
|
||||
uaSelectChange($('#uaSelect').val());
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
//获取数据info
|
||||
function ajaxinfo(){
|
||||
var c2s = $(".c2sNum").text().trim();
|
||||
@@ -450,13 +362,13 @@ function ajaxinfo(){
|
||||
url:'${ctx}/dashboard/traffic/info',
|
||||
type : "get" ,
|
||||
dataType:'json',
|
||||
async:true,
|
||||
cache:false,async:true,
|
||||
success:function (data){
|
||||
dataScroll(".numberRun",data.rejectNum);
|
||||
dataScroll(".numberRun1",data.newUniConn);
|
||||
dataScroll(".numberRun2",data.liveConnNum);
|
||||
dataScroll(".numberRun3",data.dropConnNum);
|
||||
dataScroll(".numberRun4",data.bandwidth);
|
||||
dataScroll(".numberRun",Math.floor(data.loopConnNum));
|
||||
dataScroll(".numberRun1",Math.floor(data.rejectNum));
|
||||
dataScroll(".numberRun2",Math.floor(data.monitorNum));
|
||||
dataScroll(".numberRun3",Math.floor(data.dropConnNum));
|
||||
dataScroll(".numberRun4",Math.floor(data.bandwidth));
|
||||
//计算带宽进出口流量百分比
|
||||
$("#c2sColor").removeClass();
|
||||
$("#s2cColor").removeClass();
|
||||
@@ -514,7 +426,7 @@ function protocolList(){
|
||||
url: '${ctx}/dashboard/protocol',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
async:true,
|
||||
cache:false,async:true,
|
||||
success:function (rs) {
|
||||
echart_1(rs);
|
||||
},
|
||||
@@ -531,7 +443,7 @@ function ipActiveList(){
|
||||
url: '${ctx}/dashboard/ipActive',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
async:true,
|
||||
cache:false,async:true,
|
||||
success:function (rs) {
|
||||
echart_main(rs);
|
||||
},
|
||||
@@ -541,6 +453,54 @@ function ipActiveList(){
|
||||
});
|
||||
|
||||
}
|
||||
//活跃端口统计
|
||||
function portActiveList(){
|
||||
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/portActive',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
cache:false,async:true,
|
||||
beforeSend: function () {
|
||||
|
||||
var msg = "Reloading...";
|
||||
var trLen = $("#tbodyDataPort tr").length;
|
||||
if(trLen<=0) {
|
||||
msg = "OnLoading...";
|
||||
}else {
|
||||
$("#tbodyDataPort").html("")
|
||||
}
|
||||
|
||||
var tr = "<tr class='frist rowData'>";
|
||||
tr += "<td class='list_c1' colspan='3' align='center' style='color:#fff'>"+msg+"</td>";
|
||||
|
||||
$("#tbodyDataPort").prepend(tr);
|
||||
},
|
||||
success:function (rs) {
|
||||
$("#tbodyDataPort").html("");
|
||||
var n=rs.length;
|
||||
var total=0;
|
||||
if(n>0){
|
||||
$(rs).each(function(i, itemObj) {
|
||||
total+=itemObj.sum;
|
||||
});
|
||||
$(rs).each(function(i, itemObj) {
|
||||
var tr = "<tr class='frist rowData' >";
|
||||
tr += "<td class='list_c1'>"+itemObj.port+"</td>";
|
||||
tr += "<td class='list_c2'>"+itemObj.sum+"</td>";
|
||||
tr += "<td class='list_c3'>"+((itemObj.sum/total)*100).toFixed(1)+" %</td></tr>";
|
||||
$("#tbodyDataPort").prepend(tr);
|
||||
})
|
||||
}else{
|
||||
$("#tbodyDataPort").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'>No Data</td><td></td></tr>");
|
||||
}
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
// warning_prompt("获取实时列表数据失败！",1500);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//app应用类型统计
|
||||
function appTypeList(){
|
||||
|
||||
@@ -548,7 +508,7 @@ function appTypeList(){
|
||||
url: '${ctx}/dashboard/app',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
async:true,
|
||||
cache:false,async:true,
|
||||
success:function (rs) {
|
||||
echart_3(rs);
|
||||
},
|
||||
@@ -565,7 +525,7 @@ function systemList(){
|
||||
url: '${ctx}/dashboard/osList',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
async:true,
|
||||
cache:false,async:true,
|
||||
beforeSend: function () {
|
||||
|
||||
var msg = "Reloading...";
|
||||
@@ -577,7 +537,7 @@ function systemList(){
|
||||
}
|
||||
|
||||
var tr = "<tr class='frist rowData'>";
|
||||
tr += "<td class='list_c1' colspan='3' align='center'>"+msg+"</td>";
|
||||
tr += "<td class='list_c1' colspan='3' align='center' style='color:#fff'>"+msg+"</td>";
|
||||
|
||||
$("#tbodyData1").prepend(tr);
|
||||
},
|
||||
@@ -585,20 +545,27 @@ function systemList(){
|
||||
$("#tbodyData1").html("");
|
||||
rs.reverse();
|
||||
var n=rs.length;
|
||||
$(rs).each(function(i, itemObj) {
|
||||
var tr = "<tr class='frist rowData' >";
|
||||
tr += "<td class='list_c1'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+n+"</a></td>";
|
||||
tr += "<td class='list_c2'><a href='javascript:;' data-toggle='tooltip' title='"+itemObj.osType+"' onclick='javascript:osClick(\""+itemObj.osType+"\");'>"+itemObj.osType+"</a></td>";
|
||||
if(itemObj.preCount<itemObj.count){
|
||||
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
|
||||
}else if(itemObj.preCount>itemObj.count){
|
||||
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"<i class='fa fa-arrow-down'/>"+"</a></td></tr>";
|
||||
}else{
|
||||
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"--"+"</a></td></tr>";
|
||||
}
|
||||
n=n-1;
|
||||
$("#tbodyData1").prepend(tr);
|
||||
})
|
||||
if(n>0){
|
||||
|
||||
$(rs).each(function(i, itemObj) {
|
||||
var count= itemObj.count;
|
||||
var preCount = itemObj.preCount;
|
||||
var tr = "<tr class='frist rowData'>";
|
||||
tr += "<td class='list_c1'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+n+"</a></td>";
|
||||
tr += "<td class='list_c2'><a href='javascript:;' data-toggle='tooltip' title='"+itemObj.osType+"' onclick='javascript:osClick(\""+itemObj.osType+"\");'>"+itemObj.osType+"</a></td>";
|
||||
if(preCount<count){
|
||||
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
|
||||
}else if(preCount>count){
|
||||
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</a></td></tr>";
|
||||
}else{
|
||||
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"--"+"</a></td></tr>";
|
||||
}
|
||||
n=n-1;
|
||||
$("#tbodyData1").prepend(tr);
|
||||
})
|
||||
}else{
|
||||
$("#tbodyData1").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'>No Data</td><td></td></tr>");
|
||||
}
|
||||
//终端图-操作系统
|
||||
echart_2(rs);
|
||||
},
|
||||
@@ -614,7 +581,7 @@ function osClick(osType){
|
||||
type : "get" ,
|
||||
data:{"osType":osType},
|
||||
dataType:"json",
|
||||
async:true,
|
||||
cache:false,async:true,
|
||||
success:function (rs) {
|
||||
echart_5(rs);
|
||||
},
|
||||
@@ -630,7 +597,7 @@ function bsClick(bsType){
|
||||
type : "get" ,
|
||||
data:{"bsType":bsType},
|
||||
dataType:"json",
|
||||
async:true,
|
||||
cache:false,async:true,
|
||||
success:function (rs) {
|
||||
echart_2(rs);
|
||||
},
|
||||
@@ -648,7 +615,7 @@ function browserList() {
|
||||
url: '${ctx}/dashboard/bsList',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
async:true,
|
||||
cache:false,async:true,
|
||||
beforeSend: function () {
|
||||
|
||||
var msg = "Reloading...";
|
||||
@@ -660,29 +627,36 @@ function browserList() {
|
||||
}
|
||||
|
||||
var tr = "<tr class='frist rowData'>";
|
||||
tr += "<td class='list_c1' colspan='3' align='center'>"+msg+"</td>";
|
||||
tr += "<td class='list_c1' colspan='3' align='center' style='color:#fff'>"+msg+"</td>";
|
||||
|
||||
$("#tbodyData1").prepend(tr);
|
||||
},
|
||||
success:function (rs) {
|
||||
|
||||
$("#tbodyData1").html("");
|
||||
rs.reverse();
|
||||
var n=rs.length;
|
||||
$(rs).each(function(i, itemObj) {
|
||||
if(n>0){
|
||||
|
||||
var tr = "<tr class='frist rowData'>";
|
||||
tr += "<td class='list_c1'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+n+"</a></td>";
|
||||
tr += "<td class='list_c2'><a data-toggle='tooltip' title='"+itemObj.bsType+"' href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+itemObj.bsType+"</a></td>";
|
||||
if(itemObj.preCount<itemObj.count){
|
||||
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
|
||||
}else if(itemObj.preCount>itemObj.count){
|
||||
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+"<i class='fa fa-arrow-down'/>"+"</a></td></tr>";
|
||||
}else{
|
||||
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+""+"</a></td></tr>";
|
||||
}
|
||||
$("#tbodyData1").prepend(tr);
|
||||
n=n-1;
|
||||
})
|
||||
$(rs).each(function(i, itemObj) {
|
||||
var count= itemObj.count;
|
||||
var preCount = itemObj.preCount;
|
||||
var tr = "<tr class='frist rowData'>";
|
||||
tr += "<td class='list_c1'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+n+"</a></td>";
|
||||
tr += "<td class='list_c2'><a data-toggle='tooltip' title='"+itemObj.bsType+"' href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+itemObj.bsType+"</a></td>";
|
||||
if(preCount<count){
|
||||
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
|
||||
}else if(preCount>count){
|
||||
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</a></td></tr>";
|
||||
}else{
|
||||
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+""+"</a></td></tr>";
|
||||
}
|
||||
$("#tbodyData1").prepend(tr);
|
||||
n=n-1;
|
||||
})
|
||||
}else{
|
||||
$("#tbodyData1").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'>No Data</td><td></td></tr>");
|
||||
}
|
||||
//终端图-浏览器
|
||||
echart_5(rs);
|
||||
},
|
||||
@@ -692,16 +666,15 @@ function browserList() {
|
||||
});
|
||||
|
||||
}
|
||||
//获取http网站
|
||||
//获取http网站table列表
|
||||
function websiteList() {
|
||||
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/websiteList',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
async:true,
|
||||
cache:false,async:true,
|
||||
beforeSend: function () {
|
||||
|
||||
var msg = "ReLoading...";
|
||||
var trLen = $("#tbodyData2 tr").length;
|
||||
if(trLen<=0) {
|
||||
@@ -711,30 +684,32 @@ function websiteList() {
|
||||
}
|
||||
|
||||
var tr = "<tr class='frist rowData'>";
|
||||
tr += "<td class='list_c1' colspan='3' align='center'>"+msg+"</td>";
|
||||
tr += "<td class='list_c1' colspan='3' align='center' style='color:#fff'>"+msg+"</td>";
|
||||
|
||||
$("#tbodyData2").prepend(tr);
|
||||
},
|
||||
success:function (rs) {
|
||||
$("#tbodyData2").html("");
|
||||
rs.reverse();
|
||||
var n=rs.length;
|
||||
$(rs).each(function(i, itemObj) {
|
||||
if(n>0){
|
||||
$(rs).each(function(i, itemObj) {
|
||||
var tr = "<tr class='frist rowData'>";
|
||||
tr += "<td class='list_c1'><a href='javascript:webClick(\""+itemObj.websiteServiceId+"\");'>"+n+"</a></td>";
|
||||
tr += "<td class='list_c2'><a href='javascript:webClick(\""+itemObj.websiteServiceId+"\");'>"+itemObj.websiteService+"</a></td>";
|
||||
if(itemObj.preCount<itemObj.count){
|
||||
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.websiteServiceId+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
|
||||
}else if(itemObj.preCount>itemObj.count){
|
||||
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.websiteServiceId+"\");'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</a></td></tr>";
|
||||
}else{
|
||||
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.websiteServiceId+"\");'>"+""+"</a></td></tr>";
|
||||
}
|
||||
|
||||
var tr = "<tr class='frist rowData'>";
|
||||
tr += "<td class='list_c1'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+n+"</a></td>";
|
||||
tr += "<td class='list_c2'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+itemObj.webId+"</a></td>";
|
||||
if(itemObj.preCount<itemObj.count){
|
||||
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
|
||||
}else if(itemObj.preCount>itemObj.count){
|
||||
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+"<i class='fa fa-arrow-down'/>"+"</a></td></tr>";
|
||||
}else{
|
||||
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+""+"</a></td></tr>";
|
||||
}
|
||||
|
||||
$("#tbodyData2").prepend(tr);
|
||||
n=n-1;
|
||||
})
|
||||
$("#tbodyData2").prepend(tr);
|
||||
n=n-1;
|
||||
})
|
||||
}else{
|
||||
$("#tbodyData2").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'>No Data</td><td></td></tr>");
|
||||
}
|
||||
//网站统计图
|
||||
echart_4(rs);
|
||||
},
|
||||
@@ -743,14 +718,14 @@ function websiteList() {
|
||||
}
|
||||
});
|
||||
}
|
||||
//点击http网站列表-显示网站分类图
|
||||
function webClick(webId){
|
||||
//点击http网站列表-显示域名图
|
||||
function webClick(websiteServiceId){
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/webTypeChart',
|
||||
type : "get" ,
|
||||
data:{"webId":webId},
|
||||
data:{"websiteServiceId":websiteServiceId},
|
||||
dataType:"json",
|
||||
async:true,
|
||||
cache:false,async:true,
|
||||
success:function (rs) {
|
||||
echart_6(rs);
|
||||
},
|
||||
@@ -759,6 +734,22 @@ function webClick(webId){
|
||||
}
|
||||
});
|
||||
}
|
||||
//点击http网站列表-显示域名图
|
||||
function topicAndDomainList(){
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/topicAndDomainList',
|
||||
type : "get" ,
|
||||
dataType:"json",
|
||||
cache:false,async:true,
|
||||
success:function (rs) {
|
||||
//主题域名流量统计图
|
||||
echart_topic_domain(rs);
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
// warning_prompt("获取实时列表数据失败！",1500);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/logChart'"><spring:message code="back"/></button>
|
||||
</div>
|
||||
<h3 class="page-title">
|
||||
<spring:message code="网络带宽"></spring:message>
|
||||
<spring:message code="Bandwidth"></spring:message>
|
||||
</h3>
|
||||
<h5 class="page-header"></h5>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<div class="col-md-3" style="padding-right: 1px; ">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body" style="height: 500px;">
|
||||
<h5 class="ng-binding">网络带宽统计数据</h5>
|
||||
<h5 class="ng-binding">Bandwidth Data</h5>
|
||||
<div id="deviceRank" class="drank hm-scroll">
|
||||
<table>
|
||||
<tbody>
|
||||
@@ -56,7 +56,7 @@
|
||||
<div class="col-md-9" style="padding-left: 8px;">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body" style="height: 500px">
|
||||
<h5 class="ng-binding">网络带宽变化趋势</h5>
|
||||
<h5 class="ng-binding">Bandwidth Trend</h5>
|
||||
<div id="trend" style="height: 400px; position: relative;" >
|
||||
<div style="position: relative;">
|
||||
<div id="chart" style="width:96%;height:400px;"></div>
|
||||
|
||||
@@ -111,6 +111,10 @@ function page_turn(id, functionId,level, name, url,obj){
|
||||
// }else{
|
||||
App.startPageLoading({animate:true});
|
||||
// }
|
||||
if(url.search("/nis/dashboard/")!=-1){
|
||||
$('.page-sidebar .sidebar-toggler').click();
|
||||
}
|
||||
|
||||
//调入页面
|
||||
if(url.indexOf("?")>0){
|
||||
url = url+"&functionId="+functionId;
|
||||
|
||||
@@ -111,13 +111,25 @@ p{
|
||||
color:#288dce;
|
||||
margin-top: 2.1em;
|
||||
}
|
||||
.data_content .data_info>div.info_2 .fl_fc .numberRun4{
|
||||
.data_content .data_info .info_2 .fr_fc .numberRun{
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color:#288dce;
|
||||
margin-top: 2.1em;
|
||||
}
|
||||
.data_content .data_info>div.info_1 .fl_fc .numberRun4{
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color:#288dce;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.data_content .data_info>div.info_2 .fl_fc .csNum{
|
||||
.data_content .data_info>div.info_1 .fl_fc .numberRun4-unit{
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color:#288dce;
|
||||
margin-top: 0.6px;
|
||||
}
|
||||
.data_content .data_info>div.info_1 .fl_fc .csNum{
|
||||
font-size: 12px;
|
||||
color:#337ab7 !important;
|
||||
margin-top: 1px;
|
||||
@@ -146,11 +158,11 @@ p{
|
||||
/* 第一行图 */
|
||||
.data_content .data_main{
|
||||
width: calc(100% - 30px);
|
||||
height: 430px;
|
||||
height: 400px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.data_content .data_main .main_left{
|
||||
width: 55%;
|
||||
width: 41%;
|
||||
}
|
||||
.data_content .data_main .main_left>div{
|
||||
width: 100%;
|
||||
@@ -169,14 +181,14 @@ p{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.data_content .data_main .main_left div .main_title{
|
||||
width: 250px;
|
||||
width: 230px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #3D3D3D;
|
||||
border-radius: 18px;
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
left:45%;
|
||||
left:46%;
|
||||
margin-left: -100px;
|
||||
color:#fff;
|
||||
font-size: 18px;
|
||||
@@ -188,7 +200,7 @@ p{
|
||||
}
|
||||
|
||||
.data_content .data_main .main_center{
|
||||
width: 45%;
|
||||
width: 35%;
|
||||
height: 400px;
|
||||
|
||||
}
|
||||
@@ -206,7 +218,7 @@ p{
|
||||
position: relative;
|
||||
}
|
||||
.data_content .data_main .main_center .main_title{
|
||||
width: 250px;
|
||||
width: 230px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #3D3D3D;
|
||||
@@ -224,7 +236,7 @@ p{
|
||||
}
|
||||
|
||||
.data_content .data_main .main_right{
|
||||
width: 26%;
|
||||
width: 23%;
|
||||
}
|
||||
.data_content .data_main .main_right>div{
|
||||
width: 100%;
|
||||
@@ -251,7 +263,7 @@ p{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.data_content .data_main .main_right div .main_title{
|
||||
width: 250px;
|
||||
width: 230px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #3D3D3D;
|
||||
@@ -273,13 +285,14 @@ p{
|
||||
width: calc(100% - 30px);
|
||||
height: 430px;
|
||||
margin-left: 15px;
|
||||
margin-top: 30px
|
||||
}
|
||||
.data_content .data_main1 .main_left1{
|
||||
width: 50%;
|
||||
width: 41%;
|
||||
}
|
||||
.data_content .data_main1 .main_left1>div{
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
height: 430px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #3D3D3D;
|
||||
/*box-shadow: 0px 0px 10px #3D3D3D inset;*/
|
||||
@@ -294,7 +307,7 @@ p{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.data_content .data_main1 .main_left1 div .main_title1{
|
||||
width: 250px;
|
||||
width: 230px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #3D3D3D;
|
||||
@@ -313,25 +326,12 @@ p{
|
||||
}
|
||||
|
||||
.data_content .data_main1 .main_center1{
|
||||
width: 49%;
|
||||
height: 400px;
|
||||
width: calc(25% - 10px);
|
||||
height: 430px;
|
||||
|
||||
}
|
||||
.data_content .data_main1 .main_center1 .center_text1{
|
||||
width: calc(100% - 5px);
|
||||
height: 400px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #3D3D3D;
|
||||
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
|
||||
0px -10px 15px #3D3D3D inset, /*上边阴影*/
|
||||
10px 0px 15px #3D3D3D inset, /*右边阴影*/
|
||||
0px 10px 15px #3D3D3D inset;
|
||||
position: relative;
|
||||
}
|
||||
.data_content .data_main1 .main_center1 .main_title1{
|
||||
width: 250px;
|
||||
width: 230px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #3D3D3D;
|
||||
@@ -349,16 +349,17 @@ p{
|
||||
}
|
||||
|
||||
.data_content .data_main1 .main_right1{
|
||||
width: 50%;
|
||||
width: calc(34% - 5px);
|
||||
margin-right: 15px;
|
||||
}
|
||||
.data_content .data_main1 .main_right1>div{
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
height: 430px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #3D3D3D;
|
||||
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
|
||||
0px -10px 15px #3D3D3D inset, /*上边阴影*/
|
||||
10px 0px 15px #3D3D3D inset, /*右边阴影*/
|
||||
/* 10px 0px 15px #3D3D3D inset, */ /*右边阴影*/
|
||||
0px 10px 15px #3D3D3D inset;
|
||||
position: relative;
|
||||
}
|
||||
@@ -376,7 +377,7 @@ p{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.data_content .data_main1 .main_right1 div .main_title1{
|
||||
width: 250px;
|
||||
width: 230px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #3D3D3D;
|
||||
@@ -419,7 +420,7 @@ p{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.data_content .data_main2 .main_left2 div .main_title2{
|
||||
width: 250px;
|
||||
width: 230px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #3D3D3D;
|
||||
@@ -456,7 +457,7 @@ p{
|
||||
position: relative;
|
||||
}
|
||||
.data_content .data_main2 .main_center2 .main_title2{
|
||||
width: 250px;
|
||||
width: 230px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #3D3D3D;
|
||||
@@ -501,7 +502,7 @@ p{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.data_content .data_main2 .main_right2 div .main_title2{
|
||||
width: 250px;
|
||||
width: 230px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #3D3D3D;
|
||||
@@ -523,15 +524,16 @@ p{
|
||||
width: calc(100% - 30px);
|
||||
height: 430px;
|
||||
margin-left: 15px;
|
||||
margin-top: 30px;
|
||||
/* margin-bottom: 10px; */
|
||||
}
|
||||
.data_content .data_bottom div{
|
||||
|
||||
}
|
||||
.data_content .data_bottom .bottom_1{
|
||||
width: 26%;
|
||||
width: 24%;
|
||||
height: 430px;
|
||||
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
|
||||
box-shadow:/* -10px 0px 15px #3D3D3D inset, */ /*左边阴影*/
|
||||
0px -10px 15px #3D3D3D inset, /*上边阴影*/
|
||||
10px 0px 15px #3D3D3D inset, /*右边阴影*/
|
||||
0px 10px 15px #3D3D3D inset;
|
||||
@@ -541,24 +543,22 @@ p{
|
||||
/*background: url("../img/chart_5.png") no-repeat;*/
|
||||
}
|
||||
.data_content .data_bottom .bottom_center{
|
||||
width: 74%;
|
||||
width: 76%;
|
||||
height: 430px;
|
||||
}
|
||||
.data_content .data_bottom .bottom_2{
|
||||
width: calc(53% - 15px);
|
||||
width: 51.6%;
|
||||
height: 430px;
|
||||
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
|
||||
0px -10px 15px #3D3D3D inset, /*上边阴影*/
|
||||
10px 0px 15px #3D3D3D inset, /*右边阴影*/
|
||||
/* 10px 0px 15px #3D3D3D inset, */ /*右边阴影*/
|
||||
0px 10px 15px #3D3D3D inset;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #3D3D3D;
|
||||
margin-left: 15px;
|
||||
/*background: url("../img/chart_6.png") no-repeat;*/
|
||||
}
|
||||
.data_content .data_bottom .bottom_3{
|
||||
width: calc(47% - 15px);
|
||||
width: 47%;
|
||||
height: 430px;
|
||||
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
|
||||
0px -10px 15px #3D3D3D inset, /*上边阴影*/
|
||||
@@ -567,7 +567,6 @@ p{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #3D3D3D;
|
||||
margin-left:15px;
|
||||
}
|
||||
/* .data_content .data_bottom .bottom_4{
|
||||
width: 26%;
|
||||
@@ -582,14 +581,14 @@ p{
|
||||
background: url("../img/chart_8.png") no-repeat;
|
||||
} */
|
||||
.data_content .data_bottom div .main_title{
|
||||
width: 250px;
|
||||
width: 230px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #3D3D3D;
|
||||
border-radius: 18px;
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
left:45%;
|
||||
left:50%;
|
||||
margin-left: -110px;
|
||||
color:#fff;
|
||||
font-size: 18px;
|
||||
@@ -643,17 +642,116 @@ p{
|
||||
/*0px 10px 15px #3D3D3D inset;*/
|
||||
}
|
||||
/* 第5行图 */
|
||||
.data_content .data_bottom2{
|
||||
width: calc(100% - 30px);
|
||||
.data_bottom_web{
|
||||
width:100%;
|
||||
height: 430px;
|
||||
margin-left: 0px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.data_bottom_web div{
|
||||
|
||||
}
|
||||
.bottom_web{
|
||||
width: 100%;
|
||||
height: 430px;
|
||||
box-shadow:/* -10px 0px 15px #3D3D3D inset, */ /*左边阴影*/
|
||||
0px -10px 15px #3D3D3D inset, /*上边阴影*/
|
||||
10px 0px 15px #3D3D3D inset, /*右边阴影*/
|
||||
0px 10px 15px #3D3D3D inset;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #3D3D3D;
|
||||
}
|
||||
.bottom_center_web{
|
||||
width: 74%;
|
||||
height: 430px;
|
||||
}
|
||||
.bottom_web{
|
||||
width: 100%;
|
||||
height: 430px;
|
||||
box-shadow:/* -10px 0px 15px #3D3D3D inset, */ /*左边阴影*/
|
||||
0px -10px 15px #3D3D3D inset, /*上边阴影*/
|
||||
10px 0px 15px #3D3D3D inset, /*右边阴影*/
|
||||
0px 10px 15px #3D3D3D inset;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #3D3D3D;
|
||||
margin-left: 15px;
|
||||
}
|
||||
div .main_title_web{
|
||||
width: 220px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #3D3D3D;
|
||||
border-radius: 18px;
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
left:50%;
|
||||
margin-left: -110px;
|
||||
color:#fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
text-align:center;
|
||||
border-radius:18px !important;
|
||||
}
|
||||
|
||||
div .main_table_web tr{
|
||||
height: 36px;
|
||||
}
|
||||
div .main_table_web{
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
div .main_table_web table{
|
||||
width: 100%;
|
||||
}
|
||||
div .main_table_web thead tr{
|
||||
height: 36px;
|
||||
}
|
||||
div .main_table_web th{
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color:#757575;
|
||||
text-align: center;
|
||||
}
|
||||
.main_table_web th:nth-child(1){
|
||||
width: 30%;
|
||||
}
|
||||
div .main_table_web th:nth-child(2){
|
||||
width: 35%;
|
||||
}
|
||||
div .main_table_web th:nth-child(2){
|
||||
width: 35%;
|
||||
}
|
||||
div .main_table_web td{
|
||||
color:#3D3D3D;
|
||||
font-size: 12.8px;
|
||||
text-align: center;
|
||||
}
|
||||
.main_table_web tbody tr:nth-child(1),
|
||||
div .main_table_web tbody tr:nth-child(3),
|
||||
div .main_table_web tbody tr:nth-child(7),
|
||||
div .main_table_web tbody tr:nth-child(9),
|
||||
div .main_table_web tbody tr:nth-child(5){
|
||||
background-color: #303030;
|
||||
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
|
||||
10px 0px 15px #3D3D3D inset; /*右边阴影*/
|
||||
/*0px 10px 15px #3D3D3D inset;*/
|
||||
}
|
||||
|
||||
/* 活跃端口 active port */
|
||||
.data_bottom_port{
|
||||
width: 23%;
|
||||
height: 430px;
|
||||
margin-left: 15px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.data_content .data_bottom2 div{
|
||||
.data_bottom_port div{
|
||||
|
||||
}
|
||||
.data_content .data_bottom2 .bottom_12{
|
||||
width: 26%;
|
||||
.bottom_port{
|
||||
width: 100%;
|
||||
height: 430px;
|
||||
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
|
||||
0px -10px 15px #3D3D3D inset, /*上边阴影*/
|
||||
@@ -664,11 +762,11 @@ p{
|
||||
border: 1px solid #3D3D3D;
|
||||
/*background: url("../img/chart_5.png") no-repeat;*/
|
||||
}
|
||||
.data_content .data_bottom2 .bottom_center2{
|
||||
width: 74%;
|
||||
.bottom_center_port{
|
||||
width: 100%;
|
||||
height: 430px;
|
||||
}
|
||||
.data_content .data_bottom2 .bottom_22{
|
||||
.bottom_port{
|
||||
width: calc(53% - 15px);
|
||||
height: 430px;
|
||||
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
|
||||
@@ -681,7 +779,7 @@ p{
|
||||
margin-left: 15px;
|
||||
/*background: url("../img/chart_6.png") no-repeat;*/
|
||||
}
|
||||
.data_content .data_bottom2 .bottom_32{
|
||||
.bottom_port{
|
||||
width: calc(47% - 15px);
|
||||
height: 430px;
|
||||
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
|
||||
@@ -694,8 +792,8 @@ p{
|
||||
/*background: url("../img/chart_7.png") no-repeat;*/
|
||||
margin-left:15px;
|
||||
}
|
||||
.data_content .data_bottom2 .bottom_42{
|
||||
width: 26%;
|
||||
.bottom_port{
|
||||
width: 100%;
|
||||
height: 430px;
|
||||
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
|
||||
0px -10px 15px #3D3D3D inset, /*上边阴影*/
|
||||
@@ -706,15 +804,15 @@ p{
|
||||
border: 1px solid #3D3D3D;
|
||||
/*background: url("../img/chart_8.png") no-repeat;*/
|
||||
}
|
||||
.data_content .data_bottom2 div .main_title2{
|
||||
width: 250px;
|
||||
div .main_title_port{
|
||||
width: 220px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #3D3D3D;
|
||||
border-radius: 18px;
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
left:45%;
|
||||
left:50%;
|
||||
margin-left: -110px;
|
||||
color:#fff;
|
||||
font-size: 18px;
|
||||
@@ -724,44 +822,44 @@ p{
|
||||
border-radius:18px !important;
|
||||
}
|
||||
|
||||
.data_content .data_bottom2 div .main_table2 tr{
|
||||
height: 36px;
|
||||
div .main_table_port tr{
|
||||
height: 33px;
|
||||
}
|
||||
.data_content .data_bottom2 div .main_table2{
|
||||
div .main_table_port{
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.data_content .data_bottom2 div .main_table2 table{
|
||||
div .main_table_port table{
|
||||
width: 100%;
|
||||
}
|
||||
.data_content .data_bottom2 div .main_table2 thead tr{
|
||||
div .main_table_port thead tr{
|
||||
height: 36px;
|
||||
}
|
||||
.data_content .data_bottom2 div .main_table2 th{
|
||||
div .main_table_port th{
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color:#757575;
|
||||
text-align: center;
|
||||
}
|
||||
.data_content .data_bottom2 div .main_table2 th:nth-child(1){
|
||||
div .main_table_port th:nth-child(1){
|
||||
width: 30%;
|
||||
}
|
||||
.data_content .data_bottom2 div .main_table2 th:nth-child(2){
|
||||
div .main_table2 th:nth-child(2){
|
||||
width: 35%;
|
||||
}
|
||||
.data_content .data_bottom2 div .main_table2 th:nth-child(2){
|
||||
div .main_table_port th:nth-child(2){
|
||||
width: 35%;
|
||||
}
|
||||
.data_content .data_bottom2 div .main_table2 td{
|
||||
div .main_table_port td{
|
||||
color:#3D3D3D;
|
||||
font-size: 12.8px;
|
||||
text-align: center;
|
||||
}
|
||||
.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(1),
|
||||
.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(3),
|
||||
.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(7),
|
||||
.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(9),
|
||||
.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(5){
|
||||
div .main_table_port tbody tr:nth-child(1),
|
||||
div .main_table_port tbody tr:nth-child(3),
|
||||
div .main_table_port tbody tr:nth-child(7),
|
||||
div .main_table_port tbody tr:nth-child(9),
|
||||
div .main_table_port tbody tr:nth-child(5){
|
||||
background-color: #303030;
|
||||
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
|
||||
10px 0px 15px #3D3D3D inset; /*右边阴影*/
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
//协议图-操作系统
|
||||
data.push({
|
||||
name: d.protoType,
|
||||
y: parseInt(d.count),
|
||||
y: parseInt(d.count+Math.random()*300),
|
||||
drilldown: d.protoType,
|
||||
});
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
tooltip: {
|
||||
tool: {
|
||||
enabled: true,
|
||||
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
|
||||
pointFormat: '{series.name}: {point.y}<b>',
|
||||
@@ -59,14 +59,29 @@
|
||||
enabled:false
|
||||
},
|
||||
legend:{
|
||||
width:370,
|
||||
x:20,
|
||||
itemWidth:90,
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
itemStyle:{
|
||||
color: '#fff',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
}
|
||||
},
|
||||
// navigation: {//图例分页
|
||||
// activeColor: 'red',
|
||||
// animation: true,
|
||||
// arrowSize: 15,
|
||||
// inactiveColor: '#CCC',
|
||||
// style: {
|
||||
// fontWeight: 'bold',
|
||||
// color: '#333',
|
||||
// fontSize: '12px'
|
||||
// }
|
||||
// }
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
@@ -89,13 +104,15 @@
|
||||
events: {
|
||||
mouseOver: function(e) { // 鼠标滑过时动态更新标题
|
||||
// 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
|
||||
/*chart.setTitle({
|
||||
text: '<br>'+e.target.name,
|
||||
chart.setTitle({
|
||||
text:e.target.name.length>10? this.percentage.toFixed(1)+"%<br><span>"+e.target.name.substring(0,10)+"...</span>":this.percentage.toFixed(1)+"%<br><span>"+e.target.name.substring(0,10)+"</span>",
|
||||
floating:true,
|
||||
y:120,
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontFamily:'Microsoft YaHei'
|
||||
},
|
||||
});*/
|
||||
});
|
||||
this.slice();
|
||||
},
|
||||
// 鼠标移出时，收回突出显示
|
||||
@@ -138,6 +155,14 @@
|
||||
|
||||
// echart_main中心图 活跃IP统计
|
||||
function echart_main(rs) {
|
||||
if(rs==null||rs.length<=0){
|
||||
rs=[{"ipAddr":"103.6.1.12","linkNum":532,"pktNum": 5,"byteLen": 6},
|
||||
{"ipAddr":"163.5.6.43","linkNum":532,"pktNum": 5,"byteLen": 7},
|
||||
{"ipAddr":"170.1.0.1","linkNum":532,"pktNum": 5,"byteLen": 8},
|
||||
{"ipAddr":"10.32.33.61","linkNum":532,"pktNum": 5,"byteLen": 9},
|
||||
{"ipAddr":"145.16.1.2","linkNum":532,"pktNum": 5,"byteLen": 10},
|
||||
{"ipAddr":"153.5.0.36","linkNum":532,"pktNum": 5,"byteLen": 11}]
|
||||
}
|
||||
var data=new Array();
|
||||
var xData=new Array();
|
||||
var drillData=new Array();
|
||||
@@ -148,7 +173,7 @@
|
||||
//活跃IP图
|
||||
data.push({
|
||||
name: d.ipAddr,
|
||||
y: parseInt(d.linkNum),
|
||||
y: parseInt(d.linkNum+Math.random()*300),
|
||||
drilldown: d.ipAddr,
|
||||
});
|
||||
pktNum[0]="pktNum";
|
||||
@@ -194,8 +219,8 @@
|
||||
},
|
||||
labels:{
|
||||
formatter:function(){
|
||||
if(this.value.length>7){
|
||||
return '<span>'+this.value.substring(0,7)+"..."+'</span>'
|
||||
if(this.value.length>15){
|
||||
return '<span>'+this.value.substring(0,15)+"..."+'</span>'
|
||||
}else{
|
||||
return this.value
|
||||
}
|
||||
@@ -206,7 +231,7 @@
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'linkNum',
|
||||
text: 'Number',
|
||||
align:'high',
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
@@ -240,7 +265,7 @@
|
||||
enabled:false
|
||||
},
|
||||
series: [{
|
||||
name: 'Num',
|
||||
name: 'Number',
|
||||
colorByPoint: true,
|
||||
data: data
|
||||
}],
|
||||
@@ -276,7 +301,7 @@
|
||||
//活跃IP图
|
||||
data.push({
|
||||
name: d.appType,
|
||||
y: parseInt(d.count),
|
||||
y: parseInt(d.count+Math.random()*300),
|
||||
drilldown: d.appType,
|
||||
});
|
||||
pktNum[0]="pktNum";
|
||||
@@ -341,7 +366,12 @@
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: null
|
||||
text: 'Number',
|
||||
align:'high',
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontFamily:'Microsoft YaHei'
|
||||
},
|
||||
},
|
||||
labels:{
|
||||
style: {//设置字体颜色
|
||||
@@ -439,9 +469,10 @@ function echart_2(rs){
|
||||
},
|
||||
},
|
||||
legend:{
|
||||
layout:'vertical',
|
||||
align:'center',
|
||||
verticalAligh:'bottom',
|
||||
width:480,
|
||||
x:40,
|
||||
itemWidth:100,
|
||||
itemDistance:2,
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
@@ -489,15 +520,6 @@ function echart_2(rs){
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
legend:{
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
itemStyle:{
|
||||
color: '#fff',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
|
||||
@@ -566,6 +588,10 @@ function echart_5(rs){
|
||||
type: 'pie'
|
||||
},
|
||||
legend:{
|
||||
width:480,
|
||||
x:40,
|
||||
itemWidth:100,
|
||||
itemDistance:2,
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
@@ -658,7 +684,6 @@ function echart_4(rs){
|
||||
$(rs).each(function(i, d) {
|
||||
var pktNum=new Array();
|
||||
var byteLen=new Array();
|
||||
//协议图-操作系统
|
||||
data.push({
|
||||
name: d.webId,
|
||||
y: parseInt(d.count),
|
||||
@@ -727,6 +752,10 @@ function echart_4(rs){
|
||||
enabled:false
|
||||
},
|
||||
legend:{
|
||||
width:480,
|
||||
x:40,
|
||||
itemWidth:100,
|
||||
itemDistance:2,
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
@@ -841,6 +870,9 @@ function echart_6(rs){
|
||||
enabled:false
|
||||
},
|
||||
legend:{
|
||||
width:370,
|
||||
x:20,
|
||||
itemWidth:90,
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
Highcharts JS v6.1.0 (2018-04-13)
|
||||
|
||||
(c) 2016 Highsoft AS
|
||||
Authors: Jon Arild Nygard
|
||||
|
||||
License: www.highcharts.com/license
|
||||
*/
|
||||
(function(E){"object"===typeof module&&module.exports?module.exports=E:E(Highcharts)})(function(E){var O=function(){return function(b){var B=this,n=B.graphic,k=b.animate,w=b.attr,e=b.onComplete,H=b.css,D=b.group,t=b.renderer,x=b.shapeArgs;b=b.shapeType;B.shouldDraw()?(n||(B.graphic=n=t[b](x).add(D)),n.css(H).attr(w).animate(k,void 0,e)):n&&n.animate(k,void 0,function(){B.graphic=n=n.destroy();"function"===typeof e&&e()});n&&n.addClass(B.getClassName(),!0)}}(),M=function(b){var B=b.each,n=b.extend,
|
||||
k=b.isArray,w=b.isObject,e=b.isNumber,H=b.merge,D=b.pick,t=b.reduce;return{getColor:function(x,y){var v=y.index,p=y.mapOptionsToLevel,n=y.parentColor,C=y.parentColorIndex,z=y.series,l=y.colors,k=y.siblings,q=z.points,e,t,w,B;if(x){q=q[x.i];x=p[x.level]||{};if(e=q&&x.colorByPoint)w=q.index%(l?l.length:z.chart.options.chart.colorCount),t=l&&l[w];l=q&&q.options.color;e=x&&x.color;if(p=n)p=(p=x&&x.colorVariation)&&"brightness"===p.key?b.color(n).brighten(v/k*p.to).get():n;e=D(l,e,t,p,z.color);B=D(q&&
|
||||
q.options.colorIndex,x&&x.colorIndex,w,C,y.colorIndex)}return{color:e,colorIndex:B}},getLevelOptions:function(b){var y=null,v,p,F,C;if(w(b))for(y={},F=e(b.from)?b.from:1,C=b.levels,p={},v=w(b.defaults)?b.defaults:{},k(C)&&(p=t(C,function(b,l){var p,q;w(l)&&e(l.level)&&(q=H({},l),p="boolean"===typeof q.levelIsConstant?q.levelIsConstant:v.levelIsConstant,delete q.levelIsConstant,delete q.level,l=l.level+(p?0:F-1),w(b[l])?n(b[l],q):b[l]=q);return b},{})),C=e(b.to)?b.to:1,b=0;b<=C;b++)y[b]=H({},v,w(p[b])?
|
||||
p[b]:{});return y},setTreeValues:function y(b,p){var e=p.before,t=p.idRoot,k=p.mapIdToNode[t],l=p.points[b.i],w=l&&l.options||{},q=0,v=[];n(b,{levelDynamic:b.level-(("boolean"===typeof p.levelIsConstant?p.levelIsConstant:1)?0:k.level),name:D(l&&l.name,""),visible:t===b.id||("boolean"===typeof p.visible?p.visible:!1)});"function"===typeof e&&(b=e(b,p));B(b.children,function(e,l){var t=n({},p);n(t,{index:l,siblings:b.children.length,visible:b.visible});e=y(e,t);v.push(e);e.visible&&(q+=e.val)});b.visible=
|
||||
0<q||b.visible;e=D(w.value,q);n(b,{children:v,childrenTotal:q,isLeaf:b.visible&&!q,val:e});return b},updateRootId:function(b){var e;w(b)&&(e=w(b.options)?b.options:{},e=D(b.rootNode,e.rootId,""),w(b.userOptions)&&(b.userOptions.rootId=e),b.rootNode=e);return e}}}(E);(function(b,B){var n=b.seriesType,k=b.seriesTypes,w=b.map,e=b.merge,H=b.extend,D=b.noop,t=b.each,x=B.getColor,y=B.getLevelOptions,v=b.grep,p=b.isNumber,F=b.isObject,C=b.isString,z=b.pick,l=b.Series,E=b.stableSort,q=b.Color,L=function(a,
|
||||
d,c){c=c||this;b.objectEach(a,function(f,g){d.call(c,f,g,a)})},J=b.reduce,I=function(a,d,c){c=c||this;a=d.call(c,a);!1!==a&&I(a,d,c)},K=B.updateRootId;n("treemap","scatter",{showInLegend:!1,marker:!1,colorByPoint:!1,dataLabels:{enabled:!0,defer:!1,verticalAlign:"middle",formatter:function(){return this.point.name||this.point.id},inside:!0},tooltip:{headerFormat:"",pointFormat:"\x3cb\x3e{point.name}\x3c/b\x3e: {point.value}\x3cbr/\x3e"},ignoreHiddenPoint:!0,layoutAlgorithm:"sliceAndDice",layoutStartingDirection:"vertical",
|
||||
alternateStartingDirection:!1,levelIsConstant:!0,drillUpButton:{position:{align:"right",x:-10,y:10}},borderColor:"#e6e6e6",borderWidth:1,opacity:.15,states:{hover:{borderColor:"#999999",brightness:k.heatmap?0:.1,halo:!1,opacity:.75,shadow:!1}}},{pointArrayMap:["value"],axisTypes:k.heatmap?["xAxis","yAxis","colorAxis"]:["xAxis","yAxis"],directTouch:!0,optionalAxis:"colorAxis",getSymbol:D,parallelArrays:["x","y","value","colorValue"],colorKey:"colorValue",translateColors:k.heatmap&&k.heatmap.prototype.translateColors,
|
||||
colorAttribs:k.heatmap&&k.heatmap.prototype.colorAttribs,trackerGroups:["group","dataLabelsGroup"],getListOfParents:function(a,d){a=J(a||[],function(c,a,d){a=z(a.parent,"");void 0===c[a]&&(c[a]=[]);c[a].push(d);return c},{});L(a,function(a,f,g){""!==f&&-1===b.inArray(f,d)&&(t(a,function(a){g[""].push(a)}),delete g[f])});return a},getTree:function(){var a=w(this.data,function(a){return a.id}),a=this.getListOfParents(this.data,a);this.nodeMap=[];return this.buildNode("",-1,0,a,null)},init:function(a,
|
||||
d){l.prototype.init.call(this,a,d);this.options.allowDrillToNode&&b.addEvent(this,"click",this.onClickDrillToNode)},buildNode:function(a,d,c,f,b){var g=this,r=[],h=g.points[d],u=0,G;t(f[a]||[],function(d){G=g.buildNode(g.points[d].id,d,c+1,f,a);u=Math.max(G.height+1,u);r.push(G)});d={id:a,i:d,children:r,height:u,level:c,parent:b,visible:!1};g.nodeMap[d.id]=d;h&&(h.node=d);return d},setTreeValues:function(a){var d=this,c=d.options,f=d.nodeMap[d.rootNode],c="boolean"===typeof c.levelIsConstant?c.levelIsConstant:
|
||||
!0,b=0,A=[],r,h=d.points[a.i];t(a.children,function(a){a=d.setTreeValues(a);A.push(a);a.ignore||(b+=a.val)});E(A,function(a,c){return a.sortIndex-c.sortIndex});r=z(h&&h.options.value,b);h&&(h.value=r);H(a,{children:A,childrenTotal:b,ignore:!(z(h&&h.visible,!0)&&0<r),isLeaf:a.visible&&!b,levelDynamic:a.level-(c?0:f.level),name:z(h&&h.name,""),sortIndex:z(h&&h.sortIndex,-r),val:r});return a},calculateChildrenAreas:function(a,d){var c=this,b=c.options,g=c.mapOptionsToLevel[a.level+1],A=z(c[g&&g.layoutAlgorithm]&&
|
||||
g.layoutAlgorithm,b.layoutAlgorithm),r=b.alternateStartingDirection,h=[];a=v(a.children,function(a){return!a.ignore});g&&g.layoutStartingDirection&&(d.direction="vertical"===g.layoutStartingDirection?0:1);h=c[A](d,a);t(a,function(a,b){b=h[b];a.values=e(b,{val:a.childrenTotal,direction:r?1-d.direction:d.direction});a.pointValues=e(b,{x:b.x/c.axisRatio,width:b.width/c.axisRatio});a.children.length&&c.calculateChildrenAreas(a,a.values)})},setPointValues:function(){var a=this,b=a.xAxis,c=a.yAxis;t(a.points,
|
||||
function(d){var g=d.node,f=g.pointValues,r,h,u;u=(a.pointAttribs(d)["stroke-width"]||0)%2/2;f&&g.visible?(g=Math.round(b.translate(f.x,0,0,0,1))-u,r=Math.round(b.translate(f.x+f.width,0,0,0,1))-u,h=Math.round(c.translate(f.y,0,0,0,1))-u,f=Math.round(c.translate(f.y+f.height,0,0,0,1))-u,d.shapeType="rect",d.shapeArgs={x:Math.min(g,r),y:Math.min(h,f),width:Math.abs(r-g),height:Math.abs(f-h)},d.plotX=d.shapeArgs.x+d.shapeArgs.width/2,d.plotY=d.shapeArgs.y+d.shapeArgs.height/2):(delete d.plotX,delete d.plotY)})},
|
||||
setColorRecursive:function(a,d,c,b,g){var f=this,r=f&&f.chart,r=r&&r.options&&r.options.colors,h;if(a){h=x(a,{colors:r,index:b,mapOptionsToLevel:f.mapOptionsToLevel,parentColor:d,parentColorIndex:c,series:f,siblings:g});if(d=f.points[a.i])d.color=h.color,d.colorIndex=h.colorIndex;t(a.children||[],function(c,d){f.setColorRecursive(c,h.color,h.colorIndex,d,a.children.length)})}},algorithmGroup:function(a,d,c,b){this.height=a;this.width=d;this.plot=b;this.startDirection=this.direction=c;this.lH=this.nH=
|
||||
this.lW=this.nW=this.total=0;this.elArr=[];this.lP={total:0,lH:0,nH:0,lW:0,nW:0,nR:0,lR:0,aspectRatio:function(a,c){return Math.max(a/c,c/a)}};this.addElement=function(a){this.lP.total=this.elArr[this.elArr.length-1];this.total+=a;0===this.direction?(this.lW=this.nW,this.lP.lH=this.lP.total/this.lW,this.lP.lR=this.lP.aspectRatio(this.lW,this.lP.lH),this.nW=this.total/this.height,this.lP.nH=this.lP.total/this.nW,this.lP.nR=this.lP.aspectRatio(this.nW,this.lP.nH)):(this.lH=this.nH,this.lP.lW=this.lP.total/
|
||||
this.lH,this.lP.lR=this.lP.aspectRatio(this.lP.lW,this.lH),this.nH=this.total/this.width,this.lP.nW=this.lP.total/this.nH,this.lP.nR=this.lP.aspectRatio(this.lP.nW,this.nH));this.elArr.push(a)};this.reset=function(){this.lW=this.nW=0;this.elArr=[];this.total=0}},algorithmCalcPoints:function(a,d,c,b){var f,A,r,h,u=c.lW,e=c.lH,m=c.plot,l,N=0,p=c.elArr.length-1;d?(u=c.nW,e=c.nH):l=c.elArr[c.elArr.length-1];t(c.elArr,function(a){if(d||N<p)0===c.direction?(f=m.x,A=m.y,r=u,h=a/r):(f=m.x,A=m.y,h=e,r=a/h),
|
||||
b.push({x:f,y:A,width:r,height:h}),0===c.direction?m.y+=h:m.x+=r;N+=1});c.reset();0===c.direction?c.width-=u:c.height-=e;m.y=m.parent.y+(m.parent.height-c.height);m.x=m.parent.x+(m.parent.width-c.width);a&&(c.direction=1-c.direction);d||c.addElement(l)},algorithmLowAspectRatio:function(a,b,c){var d=[],g=this,A,r={x:b.x,y:b.y,parent:b},h=0,u=c.length-1,e=new this.algorithmGroup(b.height,b.width,b.direction,r);t(c,function(c){A=c.val/b.val*b.height*b.width;e.addElement(A);e.lP.nR>e.lP.lR&&g.algorithmCalcPoints(a,
|
||||
!1,e,d,r);h===u&&g.algorithmCalcPoints(a,!0,e,d,r);h+=1});return d},algorithmFill:function(a,b,c){var d=[],g,A=b.direction,r=b.x,h=b.y,u=b.width,e=b.height,m,l,p,q;t(c,function(c){g=c.val/b.val*b.height*b.width;m=r;l=h;0===A?(q=e,p=g/q,u-=p,r+=p):(p=u,q=g/p,e-=q,h+=q);d.push({x:m,y:l,width:p,height:q});a&&(A=1-A)});return d},strip:function(a,b){return this.algorithmLowAspectRatio(!1,a,b)},squarified:function(a,b){return this.algorithmLowAspectRatio(!0,a,b)},sliceAndDice:function(a,b){return this.algorithmFill(!0,
|
||||
a,b)},stripes:function(a,b){return this.algorithmFill(!1,a,b)},translate:function(){var a=this,b=a.options,c=K(a),f,g;l.prototype.translate.call(a);g=a.tree=a.getTree();f=a.nodeMap[c];a.mapOptionsToLevel=y({from:f.level+1,levels:b.levels,to:g.height,defaults:{levelIsConstant:a.options.levelIsConstant,colorByPoint:b.colorByPoint}});""===c||f&&f.children.length||(a.drillToNode("",!1),c=a.rootNode,f=a.nodeMap[c]);I(a.nodeMap[a.rootNode],function(c){var b=!1,f=c.parent;c.visible=!0;if(f||""===f)b=a.nodeMap[f];
|
||||
return b});I(a.nodeMap[a.rootNode].children,function(a){var c=!1;t(a,function(a){a.visible=!0;a.children.length&&(c=(c||[]).concat(a.children))});return c});a.setTreeValues(g);a.axisRatio=a.xAxis.len/a.yAxis.len;a.nodeMap[""].pointValues=c={x:0,y:0,width:100,height:100};a.nodeMap[""].values=c=e(c,{width:c.width*a.axisRatio,direction:"vertical"===b.layoutStartingDirection?0:1,val:g.val});a.calculateChildrenAreas(g,c);a.colorAxis?a.translateColors():b.colorByPoint||a.setColorRecursive(a.tree);b.allowDrillToNode&&
|
||||
(b=f.pointValues,a.xAxis.setExtremes(b.x,b.x+b.width,!1),a.yAxis.setExtremes(b.y,b.y+b.height,!1),a.xAxis.setScale(),a.yAxis.setScale());a.setPointValues()},drawDataLabels:function(){var a=this,b=a.mapOptionsToLevel,c=v(a.points,function(a){return a.node.visible}),f,g;t(c,function(c){g=b[c.node.level];f={style:{}};c.node.isLeaf||(f.enabled=!1);g&&g.dataLabels&&(f=e(f,g.dataLabels),a._hasPointLabels=!0);c.shapeArgs&&(f.style.width=c.shapeArgs.width,c.dataLabel&&c.dataLabel.css({width:c.shapeArgs.width+
|
||||
"px"}));c.dlOptions=e(f,c.options.dataLabels)});l.prototype.drawDataLabels.call(this)},alignDataLabel:function(a){k.column.prototype.alignDataLabel.apply(this,arguments);a.dataLabel&&a.dataLabel.attr({zIndex:(a.node.zIndex||0)+1})},pointAttribs:function(a,b){var c=F(this.mapOptionsToLevel)?this.mapOptionsToLevel:{},f=a&&c[a.node.level]||{},c=this.options,g=b&&c.states[b]||{},d=a&&a.getClassName()||"";a={stroke:a&&a.borderColor||f.borderColor||g.borderColor||c.borderColor,"stroke-width":z(a&&a.borderWidth,
|
||||
f.borderWidth,g.borderWidth,c.borderWidth),dashstyle:a&&a.borderDashStyle||f.borderDashStyle||g.borderDashStyle||c.borderDashStyle,fill:a&&a.color||this.color};-1!==d.indexOf("highcharts-above-level")?(a.fill="none",a["stroke-width"]=0):-1!==d.indexOf("highcharts-internal-node-interactive")?(b=z(g.opacity,c.opacity),a.fill=q(a.fill).setOpacity(b).get(),a.cursor="pointer"):-1!==d.indexOf("highcharts-internal-node")?a.fill="none":b&&(a.fill=q(a.fill).brighten(g.brightness).get());return a},drawPoints:function(){var a=
|
||||
this,b=v(a.points,function(a){return a.node.visible});t(b,function(c){var b="level-group-"+c.node.levelDynamic;a[b]||(a[b]=a.chart.renderer.g(b).attr({zIndex:1E3-c.node.levelDynamic}).add(a.group));c.group=a[b]});k.column.prototype.drawPoints.call(this);a.options.allowDrillToNode&&t(b,function(c){c.graphic&&(c.drillId=a.options.interactByLeaf?a.drillToByLeaf(c):a.drillToByGroup(c))})},onClickDrillToNode:function(a){var b=(a=a.point)&&a.drillId;C(b)&&(a.setState(""),this.drillToNode(b))},drillToByGroup:function(a){var b=
|
||||
!1;1!==a.node.level-this.nodeMap[this.rootNode].level||a.node.isLeaf||(b=a.id);return b},drillToByLeaf:function(a){var b=!1;if(a.node.parent!==this.rootNode&&a.node.isLeaf)for(a=a.node;!b;)a=this.nodeMap[a.parent],a.parent===this.rootNode&&(b=a.id);return b},drillUp:function(){var a=this.nodeMap[this.rootNode];a&&C(a.parent)&&this.drillToNode(a.parent)},drillToNode:function(a,b){var c=this.nodeMap[a];this.idPreviousRoot=this.rootNode;this.rootNode=a;""===a?this.drillUpButton=this.drillUpButton.destroy():
|
||||
this.showDrillUpButton(c&&c.name||a);this.isDirty=!0;z(b,!0)&&this.chart.redraw()},showDrillUpButton:function(a){var b=this;a=a||"\x3c Back";var c=b.options.drillUpButton,f,g;c.text&&(a=c.text);this.drillUpButton?(this.drillUpButton.placed=!1,this.drillUpButton.attr({text:a}).align()):(g=(f=c.theme)&&f.states,this.drillUpButton=this.chart.renderer.button(a,null,null,function(){b.drillUp()},f,g&&g.hover,g&&g.select).addClass("highcharts-drillup-button").attr({align:c.position.align,zIndex:7}).add().align(c.position,
|
||||
!1,c.relativeTo||"plotBox"))},buildKDTree:D,drawLegendSymbol:b.LegendSymbolMixin.drawRectangle,getExtremes:function(){l.prototype.getExtremes.call(this,this.colorValueData);this.valueMin=this.dataMin;this.valueMax=this.dataMax;l.prototype.getExtremes.call(this)},getExtremesFromAll:!0,bindAxes:function(){var a={endOnTick:!1,gridLineWidth:0,lineWidth:0,min:0,dataMin:0,minPadding:0,max:100,dataMax:100,maxPadding:0,startOnTick:!1,title:null,tickPositions:[]};l.prototype.bindAxes.call(this);b.extend(this.yAxis.options,
|
||||
a);b.extend(this.xAxis.options,a)},utils:{recursive:I,reduce:J}},{getClassName:function(){var a=b.Point.prototype.getClassName.call(this),d=this.series,c=d.options;this.node.level<=d.nodeMap[d.rootNode].level?a+=" highcharts-above-level":this.node.isLeaf||z(c.interactByLeaf,!c.allowDrillToNode)?this.node.isLeaf||(a+=" highcharts-internal-node"):a+=" highcharts-internal-node-interactive";return a},isValid:function(){return this.id||p(this.value)},setState:function(a){b.Point.prototype.setState.call(this,
|
||||
a);this.graphic&&this.graphic.attr({zIndex:"hover"===a?1:0})},setVisible:k.pie.prototype.pointClass.prototype.setVisible})})(E,M);(function(b,B,n){var k=b.CenteredSeriesMixin,w=b.Series,e=b.each,H=b.extend,D=k.getCenter,t=n.getColor,x=n.getLevelOptions,y=k.getStartAndEndRadians,v=b.grep,p=b.inArray,F=b.isNumber,C=b.isObject,z=b.isString,l=b.keys,E=b.merge,q=180/Math.PI,k=b.seriesType,L=n.setTreeValues,J=b.reduce,I=n.updateRootId,K=function(a,b){var c=[];if(F(a)&&F(b)&&a<=b)for(;a<=b;a++)c.push(a);
|
||||
return c},a=function(a,b){var c;b=C(b)?b:{};var f=0,d,h,u,q;C(a)&&(c=E({},a),a=F(b.from)?b.from:0,q=F(b.to)?b.to:0,h=K(a,q),a=v(l(c),function(a){return-1===p(+a,h)}),d=u=F(b.diffRadius)?b.diffRadius:0,e(h,function(a){a=c[a];var b=a.levelSize.unit,g=a.levelSize.value;"weight"===b?f+=g:"percentage"===b?(a.levelSize={unit:"pixels",value:g/100*d},u-=a.levelSize.value):"pixels"===b&&(u-=g)}),e(h,function(a){var b=c[a];"weight"===b.levelSize.unit&&(b=b.levelSize.value,c[a].levelSize={unit:"pixels",value:b/
|
||||
f*u})}),e(a,function(a){c[a].levelSize={value:0,unit:"pixels"}}));return c},d=function(a,b){var c=b.mapIdToNode[a.parent],f=b.series,d=f.chart,h=f.points[a.i],c=t(a,{colors:d&&d.options&&d.options.colors,colorIndex:f.colorIndex,index:b.index,mapOptionsToLevel:b.mapOptionsToLevel,parentColor:c&&c.color,parentColorIndex:c&&c.colorIndex,series:b.series,siblings:b.siblings});a.color=c.color;a.colorIndex=c.colorIndex;h&&(h.color=a.color,h.colorIndex=a.colorIndex,a.sliced=a.id!==b.idRoot?h.sliced:!1);return a};
|
||||
k("sunburst","treemap",{center:["50%","50%"],colorByPoint:!1,dataLabels:{defer:!0,style:{textOverflow:"ellipsis"},rotationMode:"perpendicular"},rootId:void 0,levelIsConstant:!0,levelSize:{value:1,unit:"weight"},slicedOffset:10},{drawDataLabels:b.noop,drawPoints:function(){var a=this,b=a.mapOptionsToLevel,d=a.shapeRoot,p=a.group,r=a.hasRendered,h=a.rootId,u=a.idPreviousRoot,l=a.nodeMap,m=l[u],t=m&&m.shapeArgs,m=a.points,n=a.startAndEndRadians,k=a.chart,k=k&&k.options&&k.options.chart||{},y="boolean"===
|
||||
typeof k.animation?k.animation:!0,x=a.center[3]/2,B=a.chart.renderer,z,v=!1,D=!1;if(k=!!(y&&r&&h!==u&&a.dataLabelsGroup))a.dataLabelsGroup.attr({opacity:0}),z=function(){v=!0;a.dataLabelsGroup&&a.dataLabelsGroup.animate({opacity:1,visibility:"visible"})};e(m,function(c){var f,g,e=c.node,m=b[e.level];f=c.shapeExisting||{};var k=e.shapeArgs||{},A,w=!(!e.visible||!e.shapeArgs);if(r&&y){var G={};g={end:k.end,start:k.start,innerR:k.innerR,r:k.r,x:k.x,y:k.y};w?!c.graphic&&t&&(G=h===c.id?{start:n.start,
|
||||
end:n.end}:t.end<=k.start?{start:n.end,end:n.end}:{start:n.start,end:n.start},G.innerR=G.r=x):c.graphic&&(u===c.id?g={innerR:x,r:x}:d&&(g=d.end<=f.start?{innerR:x,r:x,start:n.end,end:n.end}:{innerR:x,r:x,start:n.start,end:n.start}));f=G}else g=k,f={};var G=[k.plotX,k.plotY],v;c.node.isLeaf||(h===c.id?(v=l[h],v=v.parent):v=c.id);H(c,{shapeExisting:k,tooltipPos:G,drillId:v,name:""+(c.name||c.id||c.index),plotX:k.plotX,plotY:k.plotY,value:e.val,isNull:!w});v=c.options;e=C(k)?k:{};v=C(v)?v.dataLabels:
|
||||
{};m=C(m)?m.dataLabels:{};m=E({rotationMode:"perpendicular",style:{width:e.radius}},m,v);F(m.rotation)||(e=e.end-(e.end-e.start)/2,e=e*q%180,"parallel"===m.rotationMode&&(e-=90),90<e&&(e-=180),m.rotation=e);0===m.rotation&&(m.rotation=.001);c.dlOptions=m;!D&&w&&(D=!0,A=z);c.draw({animate:g,attr:H(f,a.pointAttribs&&a.pointAttribs(c,c.selected&&"select")),onComplete:A,group:p,renderer:B,shapeType:"arc",shapeArgs:k})});k&&D?(a.hasRendered=!1,a.options.dataLabels.defer=!0,w.prototype.drawDataLabels.call(a),
|
||||
a.hasRendered=!0,v&&z()):w.prototype.drawDataLabels.call(a)},pointAttribs:b.seriesTypes.column.prototype.pointAttribs,layoutAlgorithm:function(a,b,d){var c=a.start,f=a.end-c,h=a.val,e=a.x,g=a.y,m=C(d.levelSize)&&F(d.levelSize.value)?d.levelSize.value:0,k=a.r,p=k+m,l=F(d.slicedOffset)?d.slicedOffset:0;return J(b||[],function(a,b){var d=1/h*b.val*f,u=c+d/2,r=e+Math.cos(u)*l,u=g+Math.sin(u)*l;b={x:b.sliced?r:e,y:b.sliced?u:g,innerR:k,r:p,radius:m,start:c,end:c+d};a.push(b);c=b.end;return a},[])},setShapeArgs:function(a,
|
||||
b,d){var c=[],f=d[a.level+1];a=v(a.children,function(a){return a.visible});c=this.layoutAlgorithm(b,a,f);e(a,function(a,b){b=c[b];var f=b.start+(b.end-b.start)/2,e=b.innerR+(b.r-b.innerR)/2,g=b.end-b.start,f=0===b.innerR&&6.28<g?{x:b.x,y:b.y}:{x:b.x+Math.cos(f)*e,y:b.y+Math.sin(f)*e},e=a.val?a.childrenTotal>a.val?a.childrenTotal:a.val:a.childrenTotal;this.points[a.i]&&(this.points[a.i].innerArcLength=g*b.innerR,this.points[a.i].outerArcLength=g*b.r);a.shapeArgs=E(b,{plotX:f.x,plotY:f.y});a.values=
|
||||
E(b,{val:e});a.children.length&&this.setShapeArgs(a,a.values,d)},this)},translate:function(){var b=this.options,f=this.center=D.call(this),e=this.startAndEndRadians=y(b.startAngle,b.endAngle),k=f[3]/2,p=f[2]/2-k,h=I(this),l=this.nodeMap,n,m=l&&l[h],q,t;this.shapeRoot=m&&m.shapeArgs;w.prototype.translate.call(this);t=this.tree=this.getTree();l=this.nodeMap;m=l[h];n=z(m.parent)?m.parent:"";q=l[n];n=x({from:0<m.level?m.level:1,levels:this.options.levels,to:t.height,defaults:{colorByPoint:b.colorByPoint,
|
||||
dataLabels:b.dataLabels,levelIsConstant:b.levelIsConstant,levelSize:b.levelSize,slicedOffset:b.slicedOffset}});n=a(n,{diffRadius:p,from:0<m.level?m.level:1,to:t.height});L(t,{before:d,idRoot:h,levelIsConstant:b.levelIsConstant,mapOptionsToLevel:n,mapIdToNode:l,points:this.points,series:this});b=l[""].shapeArgs={end:e.end,r:k,start:e.start,val:m.val,x:f[0],y:f[1]};this.setShapeArgs(q,b,n);this.mapOptionsToLevel=n},animate:function(a){var b=this.chart,c=[b.plotWidth/2,b.plotHeight/2],d=b.plotLeft,e=
|
||||
b.plotTop,b=this.group;a?(a={translateX:c[0]+d,translateY:c[1]+e,scaleX:.001,scaleY:.001,rotation:10,opacity:.01},b.attr(a)):(a={translateX:d,translateY:e,scaleX:1,scaleY:1,rotation:0,opacity:1},b.animate(a,this.options.animation),this.animate=null)},utils:{calculateLevelSizes:a,range:K}},{draw:B,shouldDraw:function(){return!this.isNull}})})(E,O,M)});
|
||||
@@ -1,7 +1,7 @@
|
||||
/*数字滚动插件的CSS可调整样式*/
|
||||
.mt-number-animate{ font-family: 'Microsoft YaHei'; line-height:20px; height: 20px;/*设置数字显示高度*/; /*设置数字大小*/ overflow: hidden; display: inline-block; position: relative; }
|
||||
.mt-number-animate .mt-number-animate-dot{ width: 10px;/*设置分割符宽度*/ line-height: 20px; float: left; text-align: center;}
|
||||
.mt-number-animate .mt-number-animate-dom{ width: 10px;/*设置单个数字宽度*/ text-align: center; float: left; position: relative; top: 0;}
|
||||
.mt-number-animate .mt-number-animate-dom{ width: 10px;/*设置单个数字宽度*/ text-align: center; float: left; position: relative; top: 3px;}
|
||||
.mt-number-animate .mt-number-animate-dom .mt-number-animate-span{ width: 100%; float: left;}
|
||||
|
||||
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
@charset "utf-8";
|
||||
.jPaginate{height:34px;position:relative;color:#a5a5a5;font-size:small;width:100%;}
|
||||
.jPaginate a{line-height:18px;height:18px;overflow:hidden;cursor:pointer;padding:2px 5px;margin:2px;float:left;}
|
||||
.jPag-control-back{position:absolute;left:0px;}
|
||||
.jPag-control-front{position:absolute;top:0px;}
|
||||
.jPaginate span{cursor:pointer;}
|
||||
ul.jPag-pages{float:left;list-style-type:none;margin:0px 0px 0px 0px;padding:0px;}
|
||||
ul.jPag-pages li{display:inline;float:left;padding:0px;margin:0px;}
|
||||
ul.jPag-pages li a{float:left;padding:2px 8px;}
|
||||
span.jPag-current{cursor:default;font-weight:normal;line-height:18px;height:18px;padding:2px 8px;margin:2px;float:left;}
|
||||
ul.jPag-pages li span.jPag-previous,ul.jPag-pages li span.jPag-next,span.jPag-sprevious,span.jPag-snext,ul.jPag-pages li span.jPag-previous-img,ul.jPag-pages li span.jPag-next-img,span.jPag-sprevious-img,span.jPag-snext-img{height:22px;margin:2px;float:left;line-height:18px;}
|
||||
ul.jPag-pages li span.jPag-previous,ul.jPag-pages li span.jPag-previous-img{margin:2px 0px 2px 2px;font-size:12px;font-weight:bold;width:10px;}
|
||||
ul.jPag-pages li span.jPag-next,ul.jPag-pages li span.jPag-next-img{margin:2px 2px 2px 0px;font-size:12px;font-weight:bold;width:10px;}
|
||||
span.jPag-sprevious,span.jPag-sprevious-img{margin:2px 0px 2px 2px;font-size:18px;width:15px;text-align:right;}
|
||||
span.jPag-snext,span.jPag-snext-img{margin:2px 2px 2px 0px;font-size:18px;width:15px; text-align:right;}
|
||||
ul.jPag-pages li span.jPag-previous-img{background:url(../images/previous.png) no-repeat center right;}
|
||||
ul.jPag-pages li span.jPag-next-img{background:url(../images/next.png) no-repeat center left;}
|
||||
span.jPag-sprevious-img{background:url(../images/sprevious.png) no-repeat center right;}
|
||||
span.jPag-snext-img{background:url(../images/snext.png) no-repeat center left;}
|
||||
1023
src/main/webapp/static/pages/scripts/echart.js
Normal file
1023
src/main/webapp/static/pages/scripts/echart.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,248 +0,0 @@
|
||||
(function($) {
|
||||
$.fn.paginate = function(options) {
|
||||
var opts = $.extend({}, $.fn.paginate.defaults, options);
|
||||
return this.each(function() {
|
||||
$this = $(this);
|
||||
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
|
||||
var selectedpage = o.start;
|
||||
$.fn.draw(o,$this,selectedpage);
|
||||
});
|
||||
};
|
||||
var outsidewidth_tmp = 0;
|
||||
var insidewidth = 0;
|
||||
var bName = navigator.appName;
|
||||
var bVer = navigator.appVersion;
|
||||
if(bVer.indexOf('MSIE 7.0') > 0)
|
||||
var ver = "ie7";
|
||||
$.fn.paginate.defaults = {
|
||||
count : 5,
|
||||
start : 12,
|
||||
display : 5,
|
||||
border : true,
|
||||
border_color : '#fff',
|
||||
text_color : '#8cc59d',
|
||||
background_color : 'black',
|
||||
border_hover_color : '#fff',
|
||||
text_hover_color : '#fff',
|
||||
background_hover_color : '#fff',
|
||||
rotate : true,
|
||||
images : true,
|
||||
mouse : 'slide',
|
||||
onChange : function(){return false;}
|
||||
};
|
||||
$.fn.draw = function(o,obj,selectedpage){
|
||||
if(o.display > o.count)
|
||||
o.display = o.count;
|
||||
$this.empty();
|
||||
if(o.images){
|
||||
var spreviousclass = 'jPag-sprevious-img';
|
||||
var previousclass = 'jPag-previous-img';
|
||||
var snextclass = 'jPag-snext-img';
|
||||
var nextclass = 'jPag-next-img';
|
||||
}
|
||||
else{
|
||||
var spreviousclass = 'jPag-sprevious';
|
||||
var previousclass = 'jPag-previous';
|
||||
var snextclass = 'jPag-snext';
|
||||
var nextclass = 'jPag-next';
|
||||
}
|
||||
var _first = $(document.createElement('a')).addClass('jPag-first').html('First');
|
||||
|
||||
if(o.rotate){
|
||||
if(o.images) var _rotleft = $(document.createElement('span')).addClass(spreviousclass);
|
||||
else var _rotleft = $(document.createElement('span')).addClass(spreviousclass).html('«');
|
||||
}
|
||||
|
||||
var _divwrapleft = $(document.createElement('div')).addClass('jPag-control-back');
|
||||
_divwrapleft.append(_first).append(_rotleft);
|
||||
|
||||
var _ulwrapdiv = $(document.createElement('div')).css('overflow','hidden');
|
||||
var _ul = $(document.createElement('ul')).addClass('jPag-pages')
|
||||
var c = (o.display - 1) / 2;
|
||||
var first = selectedpage - c;
|
||||
var selobj;
|
||||
for(var i = 0; i < o.count; i++){
|
||||
var val = i+1;
|
||||
if(val == selectedpage){
|
||||
var _obj = $(document.createElement('li')).html('<span class="jPag-current">'+val+'</span>');
|
||||
selobj = _obj;
|
||||
_ul.append(_obj);
|
||||
}
|
||||
else{
|
||||
var _obj = $(document.createElement('li')).html('<a>'+ val +'</a>');
|
||||
_ul.append(_obj);
|
||||
}
|
||||
}
|
||||
_ulwrapdiv.append(_ul);
|
||||
|
||||
if(o.rotate){
|
||||
if(o.images) var _rotright = $(document.createElement('span')).addClass(snextclass);
|
||||
else var _rotright = $(document.createElement('span')).addClass(snextclass).html('»');
|
||||
}
|
||||
|
||||
var _last = $(document.createElement('a')).addClass('jPag-last').html('Last');
|
||||
var _divwrapright = $(document.createElement('div')).addClass('jPag-control-front');
|
||||
_divwrapright.append(_rotright).append(_last);
|
||||
|
||||
//append all:
|
||||
$this.addClass('jPaginate').append(_divwrapleft).append(_ulwrapdiv).append(_divwrapright);
|
||||
|
||||
if(!o.border){
|
||||
if(o.background_color == 'none') var a_css = {'color':o.text_color};
|
||||
else var a_css = {'color':o.text_color,'background-color':o.background_color};
|
||||
if(o.background_hover_color == 'none') var hover_css = {'color':o.text_hover_color};
|
||||
else var hover_css = {'color':o.text_hover_color,'background-color':o.background_hover_color};
|
||||
}
|
||||
else{
|
||||
if(o.background_color == 'none') var a_css = {'color':o.text_color,'border':'1px solid '+o.border_color};
|
||||
else var a_css = {'color':o.text_color,'background-color':o.background_color,'border':'1px solid '+o.border_color};
|
||||
if(o.background_hover_color == 'none') var hover_css = {'color':o.text_hover_color,'border':'1px solid '+o.border_hover_color};
|
||||
else var hover_css = {'color':o.text_hover_color,'background-color':o.background_hover_color,'border':'1px solid '+o.border_hover_color};
|
||||
}
|
||||
|
||||
$.fn.applystyle(o,$this,a_css,hover_css,_first,_ul,_ulwrapdiv,_divwrapright);
|
||||
//calculate width of the ones displayed:
|
||||
var outsidewidth = outsidewidth_tmp - _first.parent().width() -3;
|
||||
if(ver == 'ie7'){
|
||||
_ulwrapdiv.css('width',outsidewidth+72+'px');
|
||||
_divwrapright.css('left',outsidewidth_tmp+6+72+'px');
|
||||
}
|
||||
else{
|
||||
_ulwrapdiv.css('width',outsidewidth+'px');
|
||||
_divwrapright.css('left',outsidewidth_tmp+6+'px');
|
||||
}
|
||||
|
||||
if(o.rotate){
|
||||
_rotright.hover(
|
||||
function() {
|
||||
thumbs_scroll_interval = setInterval(
|
||||
function() {
|
||||
var left = _ulwrapdiv.scrollLeft() + 1;
|
||||
_ulwrapdiv.scrollLeft(left);
|
||||
},
|
||||
20
|
||||
);
|
||||
},
|
||||
function() {
|
||||
clearInterval(thumbs_scroll_interval);
|
||||
}
|
||||
);
|
||||
_rotleft.hover(
|
||||
function() {
|
||||
thumbs_scroll_interval = setInterval(
|
||||
function() {
|
||||
var left = _ulwrapdiv.scrollLeft() - 1;
|
||||
_ulwrapdiv.scrollLeft(left);
|
||||
},
|
||||
20
|
||||
);
|
||||
},
|
||||
function() {
|
||||
clearInterval(thumbs_scroll_interval);
|
||||
}
|
||||
);
|
||||
if(o.mouse == 'press'){
|
||||
_rotright.mousedown(
|
||||
function() {
|
||||
thumbs_mouse_interval = setInterval(
|
||||
function() {
|
||||
var left = _ulwrapdiv.scrollLeft() + 5;
|
||||
_ulwrapdiv.scrollLeft(left);
|
||||
},
|
||||
20
|
||||
);
|
||||
}
|
||||
).mouseup(
|
||||
function() {
|
||||
clearInterval(thumbs_mouse_interval);
|
||||
}
|
||||
);
|
||||
_rotleft.mousedown(
|
||||
function() {
|
||||
thumbs_mouse_interval = setInterval(
|
||||
function() {
|
||||
var left = _ulwrapdiv.scrollLeft() - 5;
|
||||
_ulwrapdiv.scrollLeft(left);
|
||||
},
|
||||
20
|
||||
);
|
||||
}
|
||||
).mouseup(
|
||||
function() {
|
||||
clearInterval(thumbs_mouse_interval);
|
||||
}
|
||||
);
|
||||
}
|
||||
else{
|
||||
_rotleft.click(function(e){
|
||||
var width = outsidewidth - 10;
|
||||
var left = _ulwrapdiv.scrollLeft() - width;
|
||||
_ulwrapdiv.animate({scrollLeft: left +'px'});
|
||||
});
|
||||
|
||||
_rotright.click(function(e){
|
||||
var width = outsidewidth - 10;
|
||||
var left = _ulwrapdiv.scrollLeft() + width;
|
||||
_ulwrapdiv.animate({scrollLeft: left +'px'});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//first and last:
|
||||
_first.click(function(e){
|
||||
_ulwrapdiv.animate({scrollLeft: '0px'});
|
||||
_ulwrapdiv.find('li').eq(0).click();
|
||||
});
|
||||
_last.click(function(e){
|
||||
_ulwrapdiv.animate({scrollLeft: insidewidth +'px'});
|
||||
_ulwrapdiv.find('li').eq(o.count - 1).click();
|
||||
});
|
||||
|
||||
//click a page
|
||||
_ulwrapdiv.find('li').click(function(e){
|
||||
selobj.html('<a>'+selobj.find('.jPag-current').html()+'</a>');
|
||||
var currval = $(this).find('a').html();
|
||||
$(this).html('<span class="jPag-current">'+currval+'</span>');
|
||||
selobj = $(this);
|
||||
$.fn.applystyle(o,$(this).parent().parent().parent(),a_css,hover_css,_first,_ul,_ulwrapdiv,_divwrapright);
|
||||
var left = (this.offsetLeft) / 2;
|
||||
var left2 = _ulwrapdiv.scrollLeft() + left;
|
||||
var tmp = left - (outsidewidth / 2);
|
||||
if(ver == 'ie7')
|
||||
_ulwrapdiv.animate({scrollLeft: left + tmp - _first.parent().width() + 52 + 'px'});
|
||||
else
|
||||
_ulwrapdiv.animate({scrollLeft: left + tmp - _first.parent().width() + 'px'});
|
||||
o.onChange(currval);
|
||||
});
|
||||
|
||||
var last = _ulwrapdiv.find('li').eq(o.start-1);
|
||||
last.attr('id','tmp');
|
||||
var left = document.getElementById('tmp').offsetLeft / 2;
|
||||
last.removeAttr('id');
|
||||
var tmp = left - (outsidewidth / 2);
|
||||
if(ver == 'ie7') _ulwrapdiv.animate({scrollLeft: left + tmp - _first.parent().width() + 52 + 'px'});
|
||||
else _ulwrapdiv.animate({scrollLeft: left + tmp - _first.parent().width() + 'px'});
|
||||
}
|
||||
$.fn.applystyle = function(o,obj,a_css,hover_css,_first,_ul,_ulwrapdiv,_divwrapright){
|
||||
obj.find('a').css(a_css);
|
||||
obj.find('span.jPag-current').css(hover_css);
|
||||
obj.find('a').hover(
|
||||
function(){
|
||||
$(this).css(hover_css);
|
||||
},
|
||||
function(){
|
||||
$(this).css(a_css);
|
||||
}
|
||||
);
|
||||
obj.css('padding-left',_first.parent().width() + 5 +'px');
|
||||
insidewidth = 0;
|
||||
|
||||
obj.find('li').each(function(i,n){
|
||||
if(i == (o.display-1)){
|
||||
outsidewidth_tmp = this.offsetLeft + this.offsetWidth ;
|
||||
}
|
||||
insidewidth += this.offsetWidth;
|
||||
})
|
||||
_ul.css('width',insidewidth+'px');
|
||||
}
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user