|
|
|
|
@@ -14,7 +14,6 @@
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div class="page-content">
|
|
|
|
|
<div class="theme-panel hidden-xs hidden-sm">
|
|
|
|
|
<button type="button" class="btn btn-default"
|
|
|
|
|
@@ -154,12 +153,28 @@
|
|
|
|
|
<!-- 搜索内容与操作按钮栏 -->
|
|
|
|
|
</form:form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-12 " id="appSelect">
|
|
|
|
|
<select id="unitType" class="selectpicker select2 input-small">
|
|
|
|
|
<option value="Unique Ip">Unique Ip</option>
|
|
|
|
|
<option value="Gbps">Gbps</option>
|
|
|
|
|
<option value="pps">pps</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row chart-realTime">
|
|
|
|
|
<div id="chart-realTime" style="width: 97%; height: 430px; margin-top: 20px"></div>
|
|
|
|
|
<input id="total" type="hidden" />
|
|
|
|
|
<input id="sipData" type="hidden" />
|
|
|
|
|
<input id="dipData" type="hidden" />
|
|
|
|
|
<input id="timeData" type="hidden" />
|
|
|
|
|
<input id="c2sData" type="hidden" />
|
|
|
|
|
<input id="s2cData" type="hidden" />
|
|
|
|
|
<input id="totalData" type="hidden" />
|
|
|
|
|
<input id="appType" name="appType" type="hidden" value="${appType}" />
|
|
|
|
|
<input id="beginDateh" type="hidden" value="${beginDate}" />
|
|
|
|
|
<input id="endDateh" type="hidden" value="${endDate}" />
|
|
|
|
|
@@ -230,10 +245,11 @@
|
|
|
|
|
var entranceId2=$("#entranceId2").val();
|
|
|
|
|
var isp1=$("#isp1").val();
|
|
|
|
|
var isp2=$("#isp2").val();
|
|
|
|
|
var unitType=$("#unitType").val();
|
|
|
|
|
var searchQuota=$(".searchQuota[class~='active']").val();
|
|
|
|
|
showRealTimeTransChart(appType,entranceId1,isp1);// 实时折线
|
|
|
|
|
appTransAjax(starth,endh,appType,entranceId2,isp2);
|
|
|
|
|
appTop100List(starth,endh,appType,entranceId2,searchQuota,isp2);
|
|
|
|
|
showRealTimeTransChart(appType,entranceId1,isp1,unitType);// 实时折线
|
|
|
|
|
appTransAjax(starth,endh,appType,entranceId2,isp2,unitType);
|
|
|
|
|
appTop100List(starth,endh,appType,entranceId2,searchQuota,isp2,unitType);
|
|
|
|
|
//筛选功能初始化
|
|
|
|
|
$("#resetBtn1").on("click",function() {
|
|
|
|
|
$("#searchForm1 select.selectpicker").each(function() {
|
|
|
|
|
@@ -242,6 +258,12 @@
|
|
|
|
|
// $(this).find("option:first").attr("selected",true);
|
|
|
|
|
});
|
|
|
|
|
$("#searchForm1")[0].reset();
|
|
|
|
|
$("#appSelect select.selectpicker").each(function() {
|
|
|
|
|
$(this).selectpicker('val',"Unique Ip");
|
|
|
|
|
$(this).find("option").attr("selected",false);
|
|
|
|
|
$(this).find("option:first").attr("selected",true);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
//筛选功能初始化
|
|
|
|
|
$("#resetBtn2").on("click",function() {
|
|
|
|
|
@@ -251,10 +273,14 @@
|
|
|
|
|
// $(this).find("option:first").attr("selected",true);
|
|
|
|
|
});
|
|
|
|
|
// $(".Wdate").attr("value", '');
|
|
|
|
|
$("#appSelect select.selectpicker").each(function() {
|
|
|
|
|
$(this).selectpicker('val',"Unique Ip");
|
|
|
|
|
$(this).find("option").attr("selected",false);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var deftime=(new Date().getTime())-(1000 * 60 * 60);
|
|
|
|
|
var defbegin=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(deftime)); // 默认一小时
|
|
|
|
|
var defend=dateFtt("yyyy-MM-dd hh:mm:ss",new Date());
|
|
|
|
|
|
|
|
|
|
$("#searchForm2")[0].reset();
|
|
|
|
|
$("#beginDate").val(defbegin);
|
|
|
|
|
$("#endDate").val(defend);
|
|
|
|
|
@@ -265,32 +291,82 @@
|
|
|
|
|
})
|
|
|
|
|
$(".chart-history").addClass("hidden");
|
|
|
|
|
$(".chart-realTime").removeClass("hidden");
|
|
|
|
|
|
|
|
|
|
$(".changeData").on("click",function(){
|
|
|
|
|
loading();
|
|
|
|
|
$(".changeData").removeClass("active");
|
|
|
|
|
$(this).addClass("active");
|
|
|
|
|
$("#appSelect select.selectpicker").each(function() {
|
|
|
|
|
$(this).selectpicker('val',"Unique Ip");
|
|
|
|
|
$(this).find("option").attr("selected",false);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var starth = $("#beginDateh").val();
|
|
|
|
|
var endh = $("#endDateh").val();
|
|
|
|
|
$("#beginDate").val(starth);
|
|
|
|
|
$("#endDate").val(endh);
|
|
|
|
|
var appType=$("#appType").val();
|
|
|
|
|
var entranceId1=$("#entranceId1").val();
|
|
|
|
|
var entranceId2=$("#entranceId2").val();
|
|
|
|
|
var isp1=$("#isp1").val();
|
|
|
|
|
var isp2=$("#isp2").val();
|
|
|
|
|
var unitType=$("#unitType").val();
|
|
|
|
|
var searchQuota=$(".searchQuota[class~='active']").val();
|
|
|
|
|
if($(this).val()==1){
|
|
|
|
|
showRealTimeTransChart(appType,entranceId1,isp1,unitType);// 实时折线
|
|
|
|
|
$(".chart-realTime").removeClass("hidden");
|
|
|
|
|
$(".chart-history").addClass("hidden");
|
|
|
|
|
}else{
|
|
|
|
|
appTransAjax(starth,endh,appType,entranceId2,isp2,unitType);
|
|
|
|
|
$(".chart-realTime").addClass("hidden");
|
|
|
|
|
$(".chart-history").removeClass("hidden");
|
|
|
|
|
}
|
|
|
|
|
/* if($(this).val()==1){
|
|
|
|
|
$(".chart-realTime").removeClass("hidden");
|
|
|
|
|
$(".chart-history").addClass("hidden");
|
|
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
$(".chart-realTime").addClass("hidden");
|
|
|
|
|
$(".chart-history").removeClass("hidden");
|
|
|
|
|
|
|
|
|
|
} */
|
|
|
|
|
})
|
|
|
|
|
$('.pageView').hide();
|
|
|
|
|
|
|
|
|
|
$("#unitType").on("change",function(){
|
|
|
|
|
loading();
|
|
|
|
|
var starth = $("#beginDateh").val();
|
|
|
|
|
var endh = $("#endDateh").val();
|
|
|
|
|
$("#beginDate").val(starth);
|
|
|
|
|
$("#endDate").val(endh);
|
|
|
|
|
var appType=$("#appType").val();
|
|
|
|
|
var entranceId1=$("#entranceId1").val();
|
|
|
|
|
var entranceId2=$("#entranceId2").val();
|
|
|
|
|
var isp1=$("#isp1").val();
|
|
|
|
|
var isp2=$("#isp2").val();
|
|
|
|
|
var unitType=$("#unitType").val();
|
|
|
|
|
var searchQuota=$(".searchQuota[class~='active']").val();
|
|
|
|
|
showRealTimeTransChart(appType,entranceId1,isp1,unitType);// 实时折线
|
|
|
|
|
appTransAjax(starth,endh,appType,entranceId2,isp2,unitType);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 改变排序字段
|
|
|
|
|
function changeOrderby(searchQuota) {
|
|
|
|
|
loading();
|
|
|
|
|
appTop100List($("#beginDate").val(),$("#endDate").val(),$("#appType").val(),$("#entranceId2").val(),searchQuota,$("#isp2").val());
|
|
|
|
|
appTop100List($("#beginDate").val(),$("#endDate").val(),$("#appType").val(),$("#entranceId2").val(),searchQuota,$("#isp2").val(),unitType=$("#unitType").val());
|
|
|
|
|
}
|
|
|
|
|
function searchList1() {
|
|
|
|
|
loading();
|
|
|
|
|
var unitType=$("#unitType").val();
|
|
|
|
|
var appType=$("#appType").val();
|
|
|
|
|
var entranceId1=$("#entranceId1").val();
|
|
|
|
|
var isp1=$("#isp1").val();
|
|
|
|
|
showRealTimeTransChart(appType,entranceId1,isp1);// 折线
|
|
|
|
|
showRealTimeTransChart(appType,entranceId1,isp1,unitType);// 折线
|
|
|
|
|
}
|
|
|
|
|
function searchList2() {
|
|
|
|
|
var unitType=$("#unitType").val();
|
|
|
|
|
var start = $("#beginDate").val();
|
|
|
|
|
var end = $("#endDate").val();
|
|
|
|
|
$("#beginDateh").val(start);
|
|
|
|
|
@@ -302,7 +378,7 @@
|
|
|
|
|
var entranceId2=$("#entranceId2").val();
|
|
|
|
|
var isp2=$("#isp2").val();
|
|
|
|
|
var searchQuota=$(".searchQuota[class~='active']").val();
|
|
|
|
|
appTransAjax(start,end,appType,entranceId2,isp2);// 折线
|
|
|
|
|
appTransAjax(start,end,appType,entranceId2,isp2,unitType);// 折线
|
|
|
|
|
appTop100List(start,end,appType,entranceId2,searchQuota,isp2);// 列表
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@@ -318,7 +394,7 @@
|
|
|
|
|
"appType" : appType,
|
|
|
|
|
"entranceId" : entranceId,
|
|
|
|
|
"searchQuota":searchQuota,
|
|
|
|
|
"searchIspCode":isp
|
|
|
|
|
"searchIspCode":isp,
|
|
|
|
|
},
|
|
|
|
|
async : true,
|
|
|
|
|
timeout : 50000,
|
|
|
|
|
@@ -403,7 +479,7 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// app曲线图
|
|
|
|
|
function appTransAjax(beginDate, endDate,appType,entranceId,isp) {
|
|
|
|
|
function appTransAjax(beginDate, endDate,appType,entranceId,isp,unitType) {
|
|
|
|
|
loading();
|
|
|
|
|
$.ajax({ url : "${ctx}/dashboard/traffic/ajaxAppTrend",
|
|
|
|
|
type : "get",
|
|
|
|
|
@@ -414,18 +490,29 @@
|
|
|
|
|
"endDate" : endDate,
|
|
|
|
|
"appType" : appType,
|
|
|
|
|
"entranceId" : entranceId,
|
|
|
|
|
"searchIspCode":isp
|
|
|
|
|
"searchIspCode":isp,
|
|
|
|
|
"searchQuotaType":unitType
|
|
|
|
|
},
|
|
|
|
|
traditional:true,
|
|
|
|
|
success : function(rs) {
|
|
|
|
|
var series=new Array();
|
|
|
|
|
var sipResult=new Array();
|
|
|
|
|
var dipResult=new Array();
|
|
|
|
|
|
|
|
|
|
var c2sResult=new Array();
|
|
|
|
|
var s2cResult=new Array();
|
|
|
|
|
var totalResult=new Array();
|
|
|
|
|
|
|
|
|
|
var sipData=new Array();
|
|
|
|
|
var dipData=new Array();
|
|
|
|
|
var timeData=new Array();
|
|
|
|
|
|
|
|
|
|
var c2sData=new Array();
|
|
|
|
|
var s2cData=new Array();
|
|
|
|
|
var totalData=new Array();
|
|
|
|
|
var total=[];
|
|
|
|
|
if(rs!=null&&Object.keys(rs).length>0){
|
|
|
|
|
if(unitType=='Unique Ip'){
|
|
|
|
|
sipResult=rs.sipResult;
|
|
|
|
|
dipResult=rs.dipResult
|
|
|
|
|
total.push(rs.sipSum,rs.dipSum);
|
|
|
|
|
@@ -437,15 +524,41 @@
|
|
|
|
|
$(dipResult).each(function(i,d){
|
|
|
|
|
dipData.push(d[1])
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
total.push(0,0);
|
|
|
|
|
}
|
|
|
|
|
showActionHistoryChart(sipResult,dipResult);
|
|
|
|
|
}else{
|
|
|
|
|
c2sResult=rs.c2sResult
|
|
|
|
|
s2cResult=rs.s2cResult
|
|
|
|
|
totalResult=rs.totalResult
|
|
|
|
|
|
|
|
|
|
// 图表导出用列
|
|
|
|
|
$(c2sResult).each(function(i,d){
|
|
|
|
|
c2sData.push(d[1])
|
|
|
|
|
timeData.push(d[0])
|
|
|
|
|
})
|
|
|
|
|
$(s2cResult).each(function(i,d){
|
|
|
|
|
s2cData.push(d[1])
|
|
|
|
|
})
|
|
|
|
|
$(totalResult).each(function(i,d){
|
|
|
|
|
totalData.push(d[1])
|
|
|
|
|
})
|
|
|
|
|
total.push('--','--','--');
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
if(unitType=='Unique Ip'){
|
|
|
|
|
total.push(0,0);
|
|
|
|
|
}else{
|
|
|
|
|
total.push('--','--','--');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
showActionHistoryChart(sipResult,dipResult,c2sResult,s2cResult,totalResult);
|
|
|
|
|
$("#total").val(JSON.stringify(total));
|
|
|
|
|
$("#sipData").val(JSON.stringify(sipData));
|
|
|
|
|
$("#dipData").val(JSON.stringify(dipData));
|
|
|
|
|
$("#timeData").val(JSON.stringify(timeData));
|
|
|
|
|
|
|
|
|
|
$("#c2sData").val(JSON.stringify(c2sData));
|
|
|
|
|
$("#s2cData").val(JSON.stringify(s2cData));
|
|
|
|
|
$("#totalData").val(JSON.stringify(totalData));
|
|
|
|
|
|
|
|
|
|
closeTip();
|
|
|
|
|
},
|
|
|
|
|
error : function(data, textStatus, errorThrown) {
|
|
|
|
|
@@ -571,7 +684,8 @@
|
|
|
|
|
$(".pageNum").text(Math.ceil(totalData/10));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function realTimeTrendAjax(beginDate, endDate,appType,entranceId,isp){
|
|
|
|
|
|
|
|
|
|
function realTimeTrendAjax(beginDate, endDate,appType,entranceId,isp,unitType){
|
|
|
|
|
var result={};
|
|
|
|
|
$.ajax({
|
|
|
|
|
url : "${ctx}/dashboard/traffic/ajaxAppTrend",
|
|
|
|
|
@@ -582,7 +696,8 @@
|
|
|
|
|
"endDate" : endDate,
|
|
|
|
|
"appType" : appType,
|
|
|
|
|
"entranceId" : entranceId,
|
|
|
|
|
"searchIspCode":isp
|
|
|
|
|
"searchIspCode":isp,
|
|
|
|
|
"searchQuotaType":unitType
|
|
|
|
|
},
|
|
|
|
|
async : false,
|
|
|
|
|
traditional:true,
|
|
|
|
|
@@ -601,16 +716,207 @@
|
|
|
|
|
}
|
|
|
|
|
var timer=null;
|
|
|
|
|
// 局点信息
|
|
|
|
|
function showRealTimeTransChart(appType,entranceId,isp) {
|
|
|
|
|
function showRealTimeTransChart(appType,entranceId,isp,unitType) {
|
|
|
|
|
var time1=(new Date().getTime())-(1000 * 60 * 10+1000 * 60 * 5);
|
|
|
|
|
var time2=(new Date().getTime())-(1000 * 60 * 5);//推迟五分钟
|
|
|
|
|
var beginDate=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time1)); //获取十个点
|
|
|
|
|
var endDate=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time2)); // 少算一分钟
|
|
|
|
|
var sipResult=new Array();
|
|
|
|
|
var dipResult=new Array();
|
|
|
|
|
var intData = realTimeTrendAjax(beginDate, endDate,appType,entranceId,isp); //初始化数据 为10个点
|
|
|
|
|
sipResult=intData.sipResult;
|
|
|
|
|
dipResult=intData.dipResult;
|
|
|
|
|
|
|
|
|
|
var c2sResult=new Array();
|
|
|
|
|
var s2cResult=new Array();
|
|
|
|
|
var totalResult=new Array();
|
|
|
|
|
var unitType=$("#unitType").val();
|
|
|
|
|
var intData = realTimeTrendAjax(beginDate, endDate,appType,entranceId,isp,unitType); //初始化数据 为10个点
|
|
|
|
|
var zxchart=null;
|
|
|
|
|
if(unitType=='Unique Ip'){
|
|
|
|
|
sipResult=intData.sipResult;
|
|
|
|
|
dipResult=intData.dipResult;
|
|
|
|
|
|
|
|
|
|
zxchart=[{
|
|
|
|
|
name: '<spring:message code="client_ip"/>',
|
|
|
|
|
lineColor:'#a9d4cf',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
},
|
|
|
|
|
data: (function () {
|
|
|
|
|
var data = [];
|
|
|
|
|
if(sipResult!=null&&sipResult.length>0){
|
|
|
|
|
var count=10;
|
|
|
|
|
if(sipResult.length<10){
|
|
|
|
|
count=sipResult.length;
|
|
|
|
|
}
|
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
|
var d =sipResult[i];
|
|
|
|
|
var x = d[0], // 时间
|
|
|
|
|
y = d[1];
|
|
|
|
|
data.push({
|
|
|
|
|
x: x,
|
|
|
|
|
y: y
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
} else{
|
|
|
|
|
var time = (new Date()).getTime()-(1000 * 60 * 10+1000 * 60 * 5);
|
|
|
|
|
for (var i = 0; i <10; i++) {
|
|
|
|
|
data.push({
|
|
|
|
|
x: time + i * 1000*60,
|
|
|
|
|
y: 0
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return data;
|
|
|
|
|
}())
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '<spring:message code="server_ip"/>',
|
|
|
|
|
lineColor:'#eecf8d',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
},
|
|
|
|
|
data: (function () {
|
|
|
|
|
var data = [];
|
|
|
|
|
if(dipResult!=null&&dipResult.length>0){
|
|
|
|
|
var count=10;
|
|
|
|
|
if(dipResult.length<10){
|
|
|
|
|
count=dipResult.length;
|
|
|
|
|
}
|
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
|
var d =dipResult[i];
|
|
|
|
|
var x = d[0], // 当前时间
|
|
|
|
|
y = d[1];
|
|
|
|
|
data.push({
|
|
|
|
|
x: x,
|
|
|
|
|
y: y
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
var time = (new Date()).getTime()-(1000 * 60 * 10+1000 * 60 * 5);
|
|
|
|
|
for (var i = 0; i <10; i++) {
|
|
|
|
|
data.push({
|
|
|
|
|
x: time + i * 1000*60,
|
|
|
|
|
y: 0
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return data;
|
|
|
|
|
}())
|
|
|
|
|
}]
|
|
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
c2sResult=intData.c2sResult;
|
|
|
|
|
s2cResult=intData.s2cResult;
|
|
|
|
|
totalResult=intData.totalResult;
|
|
|
|
|
|
|
|
|
|
zxchart=[{
|
|
|
|
|
name: 'c2s',
|
|
|
|
|
lineColor:'#a9d4cf',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
},
|
|
|
|
|
data: (function () {
|
|
|
|
|
var data = [];
|
|
|
|
|
if(c2sResult!=null&&c2sResult.length>0){
|
|
|
|
|
var count=10;
|
|
|
|
|
if(c2sResult.length<10){
|
|
|
|
|
count=c2sResult.length;
|
|
|
|
|
}
|
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
|
var d =c2sResult[i];
|
|
|
|
|
var x = d[0], // 时间
|
|
|
|
|
y = d[1];
|
|
|
|
|
data.push({
|
|
|
|
|
x: x,
|
|
|
|
|
y: y
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
} else{
|
|
|
|
|
var time = (new Date()).getTime()-(1000 * 60 * 10+1000 * 60 * 5);
|
|
|
|
|
for (var i = 0; i <10; i++) {
|
|
|
|
|
data.push({
|
|
|
|
|
x: time + i * 1000*60,
|
|
|
|
|
y: 0
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return data;
|
|
|
|
|
}())
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 's2c',
|
|
|
|
|
lineColor:'#eecf8d',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
},
|
|
|
|
|
data: (function () {
|
|
|
|
|
var data = [];
|
|
|
|
|
if(s2cResult!=null&&s2cResult.length>0){
|
|
|
|
|
var count=10;
|
|
|
|
|
if(s2cResult.length<10){
|
|
|
|
|
count=s2cResult.length;
|
|
|
|
|
}
|
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
|
var d =s2cResult[i];
|
|
|
|
|
var x = d[0], // 当前时间
|
|
|
|
|
y = d[1];
|
|
|
|
|
data.push({
|
|
|
|
|
x: x,
|
|
|
|
|
y: y
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
var time = (new Date()).getTime()-(1000 * 60 * 10+1000 * 60 * 5);
|
|
|
|
|
for (var i = 0; i <10; i++) {
|
|
|
|
|
data.push({
|
|
|
|
|
x: time + i * 1000*60,
|
|
|
|
|
y: 0
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return data;
|
|
|
|
|
}())
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'total',
|
|
|
|
|
lineColor:'#ebb093',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
},
|
|
|
|
|
data: (function () {
|
|
|
|
|
var data = [];
|
|
|
|
|
if(totalResult!=null&&totalResult.length>0){
|
|
|
|
|
var count=10;
|
|
|
|
|
if(totalResult.length<10){
|
|
|
|
|
count=totalResult.length;
|
|
|
|
|
}
|
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
|
var d =totalResult[i];
|
|
|
|
|
var x = d[0], // 当前时间
|
|
|
|
|
y = d[1];
|
|
|
|
|
data.push({
|
|
|
|
|
x: x,
|
|
|
|
|
y: y
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
var time = (new Date()).getTime()-(1000 * 60 * 10+1000 * 60 * 5);
|
|
|
|
|
for (var i = 0; i <10; i++) {
|
|
|
|
|
data.push({
|
|
|
|
|
x: time + i * 1000*60,
|
|
|
|
|
y: 0
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return data;
|
|
|
|
|
}())
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var nowDate=new Date();
|
|
|
|
|
Highcharts.setOptions({ global: { useUTC: false } });
|
|
|
|
|
var num=0;
|
|
|
|
|
@@ -650,9 +956,18 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
colors:['#a9d4cf','#eecf8d'],
|
|
|
|
|
colors:['#a9d4cf','#eecf8d','#ebb093'],
|
|
|
|
|
title : {
|
|
|
|
|
text : null
|
|
|
|
|
text : (function () {
|
|
|
|
|
var timebe=(new Date().getTime())-(1000 * 60 * 6);
|
|
|
|
|
var start=(new Date().getTime())-(1000 * 60 * 10+1000 * 60 * 5);
|
|
|
|
|
var begin=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(start)); //获取1个点少算一分钟
|
|
|
|
|
var end=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(timebe));
|
|
|
|
|
var tlt='<spring:message code="${appName}"></spring:message> '+begin+'--'+end+''
|
|
|
|
|
return tlt;
|
|
|
|
|
}())
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type:'datetime',
|
|
|
|
|
@@ -707,85 +1022,24 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [{
|
|
|
|
|
name: '<spring:message code="client_ip"/>',
|
|
|
|
|
lineColor:'#a9d4cf',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
},
|
|
|
|
|
data: (function () {
|
|
|
|
|
var data = [];
|
|
|
|
|
if(sipResult!=null&&sipResult.length>0){
|
|
|
|
|
var count=10;
|
|
|
|
|
if(sipResult.length<10){
|
|
|
|
|
count=sipResult.length;
|
|
|
|
|
}
|
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
|
var d =sipResult[i];
|
|
|
|
|
var x = d[0], // 时间
|
|
|
|
|
y = d[1];
|
|
|
|
|
data.push({
|
|
|
|
|
x: x,
|
|
|
|
|
y: y
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
} else{
|
|
|
|
|
var time = (new Date()).getTime()-(1000 * 60 * 10+1000 * 60 * 5);
|
|
|
|
|
for (var i = 0; i <10; i++) {
|
|
|
|
|
data.push({
|
|
|
|
|
x: time + i * 1000*60,
|
|
|
|
|
y: 0
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return data;
|
|
|
|
|
}())
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '<spring:message code="server_ip"/>',
|
|
|
|
|
lineColor:'#a9d4cf',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
},
|
|
|
|
|
data: (function () {
|
|
|
|
|
var data = [];
|
|
|
|
|
if(dipResult!=null&&dipResult.length>0){
|
|
|
|
|
var count=10;
|
|
|
|
|
if(dipResult.length<10){
|
|
|
|
|
count=dipResult.length;
|
|
|
|
|
}
|
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
|
var d =dipResult[i];
|
|
|
|
|
var x = d[0], // 当前时间
|
|
|
|
|
y = d[1];
|
|
|
|
|
data.push({
|
|
|
|
|
x: x,
|
|
|
|
|
y: y
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
var time = (new Date()).getTime()-(1000 * 60 * 10+1000 * 60 * 5);
|
|
|
|
|
for (var i = 0; i <10; i++) {
|
|
|
|
|
data.push({
|
|
|
|
|
x: time + i * 1000*60,
|
|
|
|
|
y: 0
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return data;
|
|
|
|
|
}())
|
|
|
|
|
}]
|
|
|
|
|
series: zxchart
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var series = chart.series[0];
|
|
|
|
|
var series1 = chart.series[1];
|
|
|
|
|
if(unitType!='Unique Ip'){
|
|
|
|
|
var series2 = chart.series[2];
|
|
|
|
|
}
|
|
|
|
|
window.clearInterval(timer);
|
|
|
|
|
// if(sipResult!=null&&sipResult.length>0){
|
|
|
|
|
var nu=0;
|
|
|
|
|
var unitType=$("#unitType").val();
|
|
|
|
|
timer=setInterval(function() {
|
|
|
|
|
var time3=(new Date().getTime())-(1000 * 60 * 5);
|
|
|
|
|
var time4=(new Date().getTime())-(1000 * 60 * 4);
|
|
|
|
|
var c2sResult=new Array();
|
|
|
|
|
var s2cResult=new Array();
|
|
|
|
|
var totalResult=new Array();
|
|
|
|
|
var begin=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time3)); //获取1个点少算一分钟
|
|
|
|
|
var end=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time4));
|
|
|
|
|
$.ajax({
|
|
|
|
|
@@ -798,26 +1052,53 @@
|
|
|
|
|
"endDate" : end,
|
|
|
|
|
"appType" : appType,
|
|
|
|
|
"entranceId" : entranceId,
|
|
|
|
|
"searchIspCode":isp
|
|
|
|
|
"searchIspCode":isp,
|
|
|
|
|
"searchQuotaType":unitType
|
|
|
|
|
},
|
|
|
|
|
async : true,
|
|
|
|
|
traditional:true,
|
|
|
|
|
success : function(rs) {
|
|
|
|
|
var realTimeData=rs;
|
|
|
|
|
if(realTimeData!=null&&Object.keys(realTimeData).length>0){
|
|
|
|
|
var sipReal=realTimeData.sipResult;
|
|
|
|
|
var dipReal=realTimeData.dipResult;
|
|
|
|
|
var d =sipReal[0];
|
|
|
|
|
if(unitType=='Unique Ip'){
|
|
|
|
|
var sipReal=realTimeData.sipResult;
|
|
|
|
|
var dipReal=realTimeData.dipResult;
|
|
|
|
|
|
|
|
|
|
var d =sipReal[0];
|
|
|
|
|
series.addPoint([d[0], d[1]], true, true);
|
|
|
|
|
var t =dipReal[0];
|
|
|
|
|
var t =dipReal[0];
|
|
|
|
|
series1.addPoint([t[0], t[1]], true, true);
|
|
|
|
|
}else{
|
|
|
|
|
var c2sRes=realTimeData.c2sResult;
|
|
|
|
|
var s2cRes=realTimeData.s2cResult;
|
|
|
|
|
var totalRes=realTimeData.totalResult;
|
|
|
|
|
|
|
|
|
|
var d =c2sRes[0];
|
|
|
|
|
series.addPoint([d[0], d[1]], true, true);
|
|
|
|
|
var t =s2cRes[0];
|
|
|
|
|
series1.addPoint([t[0], t[1]], true, true);
|
|
|
|
|
var s =totalRes[0];
|
|
|
|
|
series2.addPoint([s[0], s[1]], true, true);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
var x=(new Date()).getTime()-(1000 * 60 * 5);
|
|
|
|
|
var y=0;
|
|
|
|
|
series.addPoint([x, y], true, true);
|
|
|
|
|
series1.addPoint([x, y], true, true);
|
|
|
|
|
if(unitType=='Unique Ip'){
|
|
|
|
|
series.addPoint([x, y], true, true);
|
|
|
|
|
series1.addPoint([x, y], true, true);
|
|
|
|
|
}else{
|
|
|
|
|
series.addPoint([x, y], true, true);
|
|
|
|
|
series1.addPoint([x, y], true, true);
|
|
|
|
|
series2.addPoint([x, y], true, true);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var start=(new Date().getTime())-(1000 * 60 * 10+1000 * 60 * 5);
|
|
|
|
|
var startTime=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(start));
|
|
|
|
|
var ends=(new Date().getTime())-(1000 * 60 * 5);
|
|
|
|
|
var endTime=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(ends));
|
|
|
|
|
chart.title.update({ text: '<spring:message code="${appName}"></spring:message> '+startTime+'--'+endTime+''});
|
|
|
|
|
closeTip();
|
|
|
|
|
},
|
|
|
|
|
error : function(data, textStatus, errorThrown) {
|
|
|
|
|
@@ -833,10 +1114,61 @@
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
// 历史信息
|
|
|
|
|
function showActionHistoryChart(sipResult,dipResult) {
|
|
|
|
|
function showActionHistoryChart(sipResult,dipResult,c2sResult,s2cResult,totalResult) {
|
|
|
|
|
var nowDate=new Date();
|
|
|
|
|
Highcharts.setOptions({ global: { useUTC: false } });
|
|
|
|
|
var num=0;
|
|
|
|
|
var lsChart=null;
|
|
|
|
|
var unitType=$("#unitType").val();
|
|
|
|
|
if(unitType=='Unique Ip'){
|
|
|
|
|
lsChart= [{
|
|
|
|
|
name: '<spring:message code="client_ip"/>',
|
|
|
|
|
data: sipResult,
|
|
|
|
|
lineColor:'#a9d4cf',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '<spring:message code="server_ip"/>',
|
|
|
|
|
data: dipResult,
|
|
|
|
|
lineColor:'#eecf8d',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
}
|
|
|
|
|
}]
|
|
|
|
|
}else{
|
|
|
|
|
lsChart= [{
|
|
|
|
|
name: 'c2s',
|
|
|
|
|
data: c2sResult,
|
|
|
|
|
lineColor:'#a9d4cf',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 's2c',
|
|
|
|
|
data: s2cResult,
|
|
|
|
|
lineColor:'#eecf8d',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'total',
|
|
|
|
|
data: totalResult,
|
|
|
|
|
lineColor:'#ebb093',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
}
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var chart = Highcharts.chart('chart-history',
|
|
|
|
|
{
|
|
|
|
|
chart: {
|
|
|
|
|
@@ -867,9 +1199,9 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
colors:['#a9d4cf','#eecf8d'],
|
|
|
|
|
colors:['#a9d4cf','#eecf8d','#ebb093'],
|
|
|
|
|
title : {
|
|
|
|
|
text : null
|
|
|
|
|
text : '<spring:message code="${appName}"></spring:message> '+$("#beginDateh").val()+'--'+$("#endDateh").val()+''
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type:'datetime',
|
|
|
|
|
@@ -924,24 +1256,7 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [{
|
|
|
|
|
name: '<spring:message code="client_ip"/>',
|
|
|
|
|
data: sipResult,
|
|
|
|
|
lineColor:'#a9d4cf',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '<spring:message code="server_ip"/>',
|
|
|
|
|
data: dipResult,
|
|
|
|
|
lineColor:'#eecf8d',
|
|
|
|
|
lineWidth:1,
|
|
|
|
|
marker: {
|
|
|
|
|
enabled: false
|
|
|
|
|
}
|
|
|
|
|
}]
|
|
|
|
|
series:lsChart
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
(function(H) {
|
|
|
|
|
@@ -954,6 +1269,7 @@
|
|
|
|
|
rows.shift(); // 删除一个重复行
|
|
|
|
|
var total=[];
|
|
|
|
|
var map={};
|
|
|
|
|
var unitType=$("#unitType").val();
|
|
|
|
|
if(heard[0].indexOf("History") != -1){
|
|
|
|
|
rows = [];
|
|
|
|
|
/* 调用后台接口导出 */
|
|
|
|
|
@@ -961,13 +1277,27 @@
|
|
|
|
|
var timeData = JSON.parse($("#timeData").val());
|
|
|
|
|
var sipData = JSON.parse($("#sipData").val());
|
|
|
|
|
var dipData = JSON.parse($("#dipData").val());
|
|
|
|
|
for(var i=0;i<sipData.length;i++){
|
|
|
|
|
var colData=[];
|
|
|
|
|
var time=new Date(timeData[i]); //
|
|
|
|
|
var ftime=dateFtt("yyyy-MM-dd hh:mm:ss",time);
|
|
|
|
|
colData.push(ftime,sipData[i],dipData[i])
|
|
|
|
|
rows.push(colData)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var c2sData = JSON.parse($("#c2sData").val());
|
|
|
|
|
var s2cData = JSON.parse($("#s2cData").val());
|
|
|
|
|
var totalData = JSON.parse($("#totalData").val());
|
|
|
|
|
if(unitType=='Unique Ip'){
|
|
|
|
|
for(var i=0;i<sipData.length;i++){
|
|
|
|
|
var colData=[];
|
|
|
|
|
var time=new Date(timeData[i]); //
|
|
|
|
|
var ftime=dateFtt("yyyy-MM-dd hh:mm:ss",time);
|
|
|
|
|
colData.push(ftime,sipData[i],dipData[i]);
|
|
|
|
|
rows.push(colData)
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
for(var i=0;i<c2sData.length;i++){
|
|
|
|
|
var colData=[];
|
|
|
|
|
var time=new Date(timeData[i]); //
|
|
|
|
|
var ftime=dateFtt("yyyy-MM-dd hh:mm:ss",time);
|
|
|
|
|
colData.push(ftime,c2sData[i],c2sData[i],totalData[i])
|
|
|
|
|
rows.push(colData)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
var siptotal=0;
|
|
|
|
|
var diptotal=0;
|
|
|
|
|
@@ -983,7 +1313,12 @@
|
|
|
|
|
diptotal=diptotal+Number(d[2]);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
total.push(siptotal,diptotal);
|
|
|
|
|
if(unitType=='Unique Ip'){
|
|
|
|
|
total.push(siptotal,diptotal);
|
|
|
|
|
}else{
|
|
|
|
|
total.push('--','--','--');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
total.unshift('<spring:message code="report_total"/>');
|
|
|
|
|
rows.push(total)
|
|
|
|
|
@@ -1005,6 +1340,7 @@
|
|
|
|
|
var total=[];
|
|
|
|
|
var start = "";
|
|
|
|
|
var end = "";
|
|
|
|
|
var unitType=$("#unitType").val();
|
|
|
|
|
if(heard[0].indexOf("History") != -1){
|
|
|
|
|
start = $("#beginDateh").val();
|
|
|
|
|
end = $("#endDateh").val();
|
|
|
|
|
@@ -1012,27 +1348,68 @@
|
|
|
|
|
var timeData = JSON.parse($("#timeData").val());
|
|
|
|
|
var sipData = JSON.parse($("#sipData").val());
|
|
|
|
|
var dipData = JSON.parse($("#dipData").val());
|
|
|
|
|
for(var i=0;i<sipData.length;i++){
|
|
|
|
|
var colData=[];
|
|
|
|
|
var time=new Date(timeData[i]); //
|
|
|
|
|
var ftime=dateFtt("yyyy-MM-dd hh:mm:ss",time);
|
|
|
|
|
colData.push(ftime,sipData[i],dipData[i])
|
|
|
|
|
data.push({
|
|
|
|
|
num1:ftime,
|
|
|
|
|
num2:sipData[i],
|
|
|
|
|
num3:dipData[i],
|
|
|
|
|
|
|
|
|
|
var c2sData = JSON.parse($("#c2sData").val());
|
|
|
|
|
var s2cData = JSON.parse($("#s2cData").val());
|
|
|
|
|
var totalData = JSON.parse($("#totalData").val());
|
|
|
|
|
if(unitType=='Unique Ip'){
|
|
|
|
|
for(var i=0;i<sipData.length;i++){
|
|
|
|
|
var colData=[];
|
|
|
|
|
var time=new Date(timeData[i]); //
|
|
|
|
|
var ftime=dateFtt("yyyy-MM-dd hh:mm:ss",time);
|
|
|
|
|
colData.push(ftime,sipData[i],dipData[i])
|
|
|
|
|
data.push({
|
|
|
|
|
num1:ftime,
|
|
|
|
|
num2:sipData[i],
|
|
|
|
|
num3:dipData[i],
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
data.unshift({
|
|
|
|
|
num1:'RealTime',
|
|
|
|
|
num2:'<spring:message code="client_ip"/>',
|
|
|
|
|
num3:'<spring:message code="server_ip"/>',
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
for(var i=0;i<c2sData.length;i++){
|
|
|
|
|
var colData=[];
|
|
|
|
|
var time=new Date(timeData[i]); //
|
|
|
|
|
var ftime=dateFtt("yyyy-MM-dd hh:mm:ss",time);
|
|
|
|
|
colData.push(ftime,c2sData[i],s2cData[i],totalData[i])
|
|
|
|
|
data.push({
|
|
|
|
|
num1:ftime,
|
|
|
|
|
num2:c2sData[i],
|
|
|
|
|
num3:s2cData[i],
|
|
|
|
|
num4:totalData[i],
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
data.unshift({
|
|
|
|
|
num1:'RealTime',
|
|
|
|
|
num2:'c2s',
|
|
|
|
|
num3:'s2c',
|
|
|
|
|
num4:'total',
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
var siptotal=0;
|
|
|
|
|
var diptotal=0;
|
|
|
|
|
$(rows).each(function (i,d){
|
|
|
|
|
if(d!=null){
|
|
|
|
|
if(unitType=='Unique Ip'){
|
|
|
|
|
data.push({
|
|
|
|
|
num1:d[0],
|
|
|
|
|
num2:d[1],
|
|
|
|
|
num3:d[2],
|
|
|
|
|
});
|
|
|
|
|
}else{
|
|
|
|
|
data.push({
|
|
|
|
|
num1:d[0],
|
|
|
|
|
num2:d[1],
|
|
|
|
|
num3:d[2],
|
|
|
|
|
num4:d[3],
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
if(i>0){
|
|
|
|
|
if(i==1){
|
|
|
|
|
start=d[0];
|
|
|
|
|
@@ -1045,17 +1422,26 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
total.push(siptotal,diptotal);
|
|
|
|
|
if(unitType=='Unique Ip'){
|
|
|
|
|
total.push(siptotal,diptotal);
|
|
|
|
|
}else{
|
|
|
|
|
total.push('--','--','--');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
data.push({
|
|
|
|
|
num1:"<spring:message code='report_total'/>",
|
|
|
|
|
num2:total
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var titleKey=null;
|
|
|
|
|
if(unitType=='Unique Ip'){
|
|
|
|
|
titleKey=["num1","num2","num3"];
|
|
|
|
|
}else{
|
|
|
|
|
titleKey=["num1","num2","num3","num4"];
|
|
|
|
|
}
|
|
|
|
|
exportCsv({
|
|
|
|
|
title:["<spring:message code='${appName}'/>",start+"--"+end],
|
|
|
|
|
titleForKey:["num1","num2","num3"],
|
|
|
|
|
titleForKey:titleKey,
|
|
|
|
|
data:data
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|