Skip to content

C
cmszMonitorAnalysis
Commit cb34f901 authored by liuna's avatar liuna
Browse files
Options

2018年2月1日 --智能分析平台

--实体厅流量监测：页面性能调整
parent 8e809dce
Hide whitespace changes
Inline Side-by-side
Showing with 1392 additions and 1188 deletions
src/main/webapp/WEB-INF/views/MonitorOperation/FlowMonitor.jsp
View file @ cb34f901
...@@ -255,19 +255,6 @@ ...@@ -255,19 +255,6 @@
<script type="text/javascript" src="${ctx}/static/js/echarts.min.js"></script> <script type="text/javascript" src="${ctx}/static/js/echarts.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
seatsActiveness();
performanceStability();
catonUser();
seatAnalysisTop();
businessOffice();
seatsReceptionUser();
userIp();
ipBusiness();
ipTrend();
serverExample();
clientCompatibility();
httpInformation();
//格式化日期 //格式化日期
function Format(){ function Format(){
this.jsjava_class="jsjava.text.Format"; this.jsjava_class="jsjava.text.Format";
...@@ -394,10 +381,122 @@ ...@@ -394,10 +381,122 @@
var sd=new SimpleDateFormat(); var sd=new SimpleDateFormat();
sd.applyPattern("dd"); sd.applyPattern("dd");
</script>
function seatsActivenessChart(city,cityValue) { <script type="">
var myChart = echarts.init(document.getElementById('seatsActiveness')); function userIp() {
var option = { $.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/userIp",
async: false,
success: function(data){
console.log("用户IP分析实时",data);
var tbody=$('<tbody></tbody>');
data.forEach(function(t) {
var tr = $('<tr></tr>');
tr.append('<td>'+t[0]+'</td>'+'<td>'+t[1]+'</td>'+'<td>'+t[2]+'</td>'+'<td>'+t[3]+'</td>'+'<td>'+t[4]+'</td>');
tbody.append(tr);
});
$('#userIpTable tbody').replaceWith(tbody);
}
});
}
function userIpMonth() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/userIpMonth",
async: false,
success: function(data){
console.log("用户IP分析当月",data);
var tbody=$('<tbody></tbody>');
data.forEach(function(t) {
var tr = $('<tr></tr>');
tr.append('<td>'+t[0]+'</td>'+'<td>'+t[1]+'</td>'+'<td>'+t[2]+'</td>'+'<td>'+t[3]+'</td>'+'<td>'+t[4]+'</td>');
tbody.append(tr);
});
$('#userIpTable tbody').replaceWith(tbody);
}
});
}
function serverExample() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/serverExample",
async: false,
success: function(data){
console.log("服务器实例实时",data);
var tbody=$('<tbody></tbody>');
data.forEach(function(t) {
var tr = $('<tr></tr>');
tr.append('<td>'+t[0]+'</td>'+'<td>'+t[1]+'</td>'+'<td>'+t[2]+'</td>'+'<td>'+t[3]+'</td>'+'<td>'+t[4]+'</td>');
tbody.append(tr);
});
$('#serverExampleTable tbody').replaceWith(tbody);
}
});
}
function serverExampleMonth() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/serverExampleMonth",
async: false,
success: function(data){
console.log("服务器实例当月",data);
var tbody=$('<tbody></tbody>');
data.forEach(function(t) {
var tr = $('<tr></tr>');
tr.append('<td>'+t[0]+'</td>'+'<td>'+t[1]+'</td>'+'<td>'+t[2]+'</td>'+'<td>'+t[3]+'</td>'+'<td>'+t[4]+'</td>');
tbody.append(tr);
});
$('#serverExampleTable tbody').replaceWith(tbody);
}
});
}
function clientCompatibility() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/clientCompatibility",
async: false,
success: function(data){
console.log("客户端兼容性实时",data);
var tbody=$('<tbody></tbody>');
data.forEach(function(t) {
var tr = $('<tr></tr>');
tr.append('<td>'+t[0]+'</td>'+'<td>'+t[1]+'</td>'+'<td>'+t[2]+'</td>'+'<td>'+t[3]+'</td>');
tbody.append(tr);
});
$('#browserInformationTable tbody').replaceWith(tbody);
}
});
}
function clientCompatibilityMonth() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/clientCompatibilityMonth",
async: false,
success: function(data){
console.log("客户端兼容性当月",data);
var tbody=$('<tbody></tbody>');
data.forEach(function(t) {
var tr = $('<tr></tr>');
tr.append('<td>'+t[0]+'</td>'+'<td>'+t[1]+'</td>'+'<td>'+t[2]+'</td>'+'<td>'+t[3]+'</td>');
tbody.append(tr);
});
$('#browserInformationTable tbody').replaceWith(tbody);
}
});
}
userIp();serverExample();clientCompatibility()
</script>
<script type="">
var myChartSeatsActiveness = echarts.init(document.getElementById('seatsActiveness'));
var option1 = {
title:{ title:{
text:null, text:null,
subtext:null subtext:null
...@@ -417,13 +516,13 @@ ...@@ -417,13 +516,13 @@
yAxis:[ yAxis:[
{ {
type:'category', type:'category',
data:city data:[]
} }
], ],
series:[ series:[
{ {
type:'bar', type:'bar',
data:cityValue, data:[],
itemStyle: { itemStyle: {
normal: { normal: {
color:'#7ecbf2', color:'#7ecbf2',
...@@ -442,11 +541,58 @@ ...@@ -442,11 +541,58 @@
], ],
} }
myChart.setOption(option); myChartSeatsActiveness.setOption(option1);
} function seatsActiveness() {
function performanceStabilityChart(city,boxValue,percent) { $.ajax({
var myChart = echarts.init(document.getElementById('performanceStability')); type : "GET",
var option = { contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/seatsActiveness",
async: false,
success: function(data){
console.log("地市业务量占比实时",data);
var city = new Array();
var cityValue = new Array();
for(var i=0; i<data.length; i++){
city.push(data[i][0]);
cityValue.push(data[i][1]);
}
city.reverse();
cityValue.reverse();
option1.series[0].data=cityValue;
option1.yAxis[0].data=city;
myChartSeatsActiveness.setOption(option1);
}
});
}
function seatsActivenessMonth() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/seatsActivenessMonth",
async: false,
success: function(data){
console.log("地市业务量占比当月",data);
var city = new Array();
var cityValue = new Array();
for(var i=0; i<data.length; i++){
city.push(data[i][0]);
cityValue.push(data[i][1]);
}
city.reverse();
cityValue.reverse();
option1.series[0].data=cityValue;
option1.yAxis.data=city;
myChartSeatsActiveness.setOption(option1);
}
});
}
seatsActiveness()
</script>
<script type="">
var myChartPerformanceStability = echarts.init(document.getElementById('performanceStability'));
var option2 = {
title:{ title:{
text:null, text:null,
subtext:null subtext:null
...@@ -470,7 +616,7 @@ ...@@ -470,7 +616,7 @@
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: city, data: [],
boundaryGap: true, boundaryGap: true,
splitArea: { splitArea: {
show: false show: false
...@@ -482,7 +628,7 @@ ...@@ -482,7 +628,7 @@
series: [ series: [
{ {
type: 'boxplot', type: 'boxplot',
data: boxValue, data: [],
tooltip: { tooltip: {
formatter: function (param) { formatter: function (param) {
return [ return [
...@@ -498,7 +644,7 @@ ...@@ -498,7 +644,7 @@
{ {
type:'bar', type:'bar',
show:false, show:false,
data:percent, data:[],
itemStyle: { itemStyle: {
normal: { normal: {
color:'#7ecbf2', color:'#7ecbf2',
...@@ -516,1039 +662,441 @@ ...@@ -516,1039 +662,441 @@
} }
], ],
} }
myChart.setOption(option); myChartPerformanceStability.setOption(option2);
} function performanceStability() {
function catonUserChart(time,time1Account,time2Account,time3Account) { $.ajax({
var myChart = echarts.init(document.getElementById('catonUser')); type : "GET",
var option = { contentType : "application/json",
title:{ url: "${ctx}/MonitorOperation/FlowMonitor/performanceStability",
text:null, async: false,
subtext:null success: function(data){
}, console.log("地市性能稳定性实时",data);
tooltip: { var city = new Array();
trigger: 'axis', var boxValue = [];
}, var percent = new Array();
grid:{ for(var i=0; i<data.length; i++){
x:80, city.push(data[i][0]);
y:40, percent.push(data[i][6]);
x2:80, boxValue.push([data[i][1],data[i][2],data[i][3],data[i][4],data[i][5]]);
y2:40,
},
legend: {
data:['无法使用','可容忍','不满意']
},
xAxis:[
{
type: 'category',
data: time,
splitLine: {
show: false
},
axisLabel: {
show: true,
formatter: function (data,i) {
if(i%4==0){
return sdf.format(new Date(data));
}
},
},
}
],
yAxis:[
{
type:'value',
splitLine:{
show:false
} }
city.reverse();
percent.reverse();
boxValue.reverse();
option2.yAxis.data=city;
option2.series[0].data=boxValue;
option2.series[1].data=percent;
myChartPerformanceStability.setOption(option2);
} }
], });
series:[ }
{ performanceStability();
name:'无法使用', </script>
type:'line',
data:time1Account, <script>
smooth: true var myChartCatonUser = echarts.init(document.getElementById('catonUser'));
var option3 = {
title:{
text:null,
subtext:null
},
tooltip: {
trigger: 'axis',
},
grid:{
x:80,
y:40,
x2:80,
y2:40,
},
legend: {
data:['无法使用','可容忍','不满意']
},
xAxis:[
{
type: 'category',
data: [],
splitLine: {
show: false
}, },
{ axisLabel: {
name:'可容忍', show: true,
type:'line', formatter: function (data,i) {
data:time2Account, if(i%4==0){
smooth: true return sdf.format(new Date(data));
}
},
}, },
{ }
name:'不满意', ],
type:'line', yAxis:[
data:time3Account, {
smooth: true type:'value',
splitLine:{
show:false
} }
], }
} ],
myChart.setOption(option); series:[
} {
function catonUserChartMonth(time,time1Account,time2Account,time3Account) { name:'无法使用',
var myChart = echarts.init(document.getElementById('catonUser')); type:'line',
var option = { data:[],
title:{ smooth: true
text:null,
subtext:null
}, },
tooltip: { {
trigger: 'axis', name:'可容忍',
type:'line',
data:[],
smooth: true
}, },
grid:{ {
x:80, name:'不满意',
y:40, type:'line',
x2:80, data:[],
y2:40, smooth: true
}
],
};
myChartCatonUser.setOption(option3);
function performanceStabilityMonth() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/performanceStabilityMonth",
async: false,
success: function(data){
console.log("地市性能稳定性当月",data);
var city = new Array();
var boxValue = [];
var percent = new Array();
for(var i=0; i<data.length; i++){
city.push(data[i][0]);
percent.push(data[i][6]);
boxValue.push([data[i][1],data[i][2],data[i][3],data[i][4],data[i][5]]);
}
city.reverse();
percent.reverse();
boxValue.reverse();
option2.yAxis.data=city;
option2.series[0].data=boxValue;
option2.series[1].data=percent;
myChartPerformanceStability.setOption(option2);
}
});
}
// performanceStabilityMonth()
</script>
<script>
var myChartCatonUserMonth = echarts.init(document.getElementById('catonUser'));
var option4 = {
title:{
text:null,
subtext:null
},
tooltip: {
trigger: 'axis',
},
grid:{
x:80,
y:40,
x2:80,
y2:40,
},
legend: {
data:['无法使用','可容忍','不满意']
},
xAxis:[
{
type: 'category',
data: [],
splitLine: {
show: false
},
axisLabel: {
show: true,
formatter: function (data,i) {
if(i%4==0){
return sd.format(new Date(data));
}
},
},
}
],
yAxis:[
{
type:'value',
splitLine:{
show:false
}
}
],
series:[
{
name:'无法使用',
type:'line',
data:[],
smooth: true
}, },
legend: { {
data:['无法使用','可容忍','不满意'] name:'可容忍',
type:'line',
data:[],
smooth: true
}, },
xAxis:[ {
{ name:'不满意',
type: 'category', type:'line',
data: time, data:[],
splitLine: { smooth: true
show: false }
}, ],
axisLabel: { }
show: true, myChartCatonUserMonth.setOption(option4);
formatter: function (data,i) { function catonUser() {
if(i%4==0){ $.ajax({
return sd.format(new Date(data)); type : "GET",
} contentType : "application/json",
}, url: "${ctx}/MonitorOperation/FlowMonitor/catonUser",
}, async: false,
success: function(data){
console.log("卡顿用户实时",data);
var time = new Array();
var time1Account = new Array();
var time2Account = new Array();
var time3Account = new Array();
for(var i=0; i<data.length; i++){
time.push(df.format(new Date(data[i][0])));
time1Account.push(data[i][1]);
time2Account.push(data[i][2]);
time3Account.push(data[i][3]);
} }
], option3.xAxis[0].data=time;
yAxis:[ option3.series[0].data=time1Account;
{ option3.series[1].data=time2Account;
type:'value', option3.series[2].data=time3Account;
splitLine:{ myChartCatonUser.setOption(option3);
show:false }
} });
}
function catonUserMonth() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/catonUserMonth",
async: false,
success: function(data){
console.log("卡顿用户当月",data);
var time = new Array();
var time1Account = new Array();
var time2Account = new Array();
var time3Account = new Array();
for(var i=0; i<data.length; i++){
time.push(df.format(new Date(data[i][0])));
time1Account.push(data[i][1]);
time2Account.push(data[i][2]);
time3Account.push(data[i][3]);
} }
], option4.xAxis[0].data=time;
series:[ option4.series[0].data=time1Account;
{ option4.series[1].data=time2Account;
name:'无法使用', option4.series[2].data=time3Account;
type:'line', myChartCatonUserMonth.setOption(option4);
data:time1Account, }
smooth: true });
}
catonUser()
</script>
<script>
var myChartSeatAnalysis = echarts.init(document.getElementById('seatAnalysis'));
var option5 = {
title:{
text:null,
subtext:null
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['业务量','成功量','均时长']
},
xAxis : [
{
type : 'category',
splitLine:{
show:false
}, },
{ data : ['坐\n席\n一','坐\n席\n二','坐\n席\n三','坐\n席\n四','坐\n席\n五','坐\n席\n六','坐\n席\n七','坐\n席\n八','坐\n席\n九','坐\n席\n十']
name:'可容忍', }
type:'line', ],
data:time2Account, yAxis : [
smooth: true {
type : 'value',
splitLine:{
show:false
}, },
{
name:'不满意',
type:'line',
data:time3Account,
smooth: true
}
],
}
myChart.setOption(option);
}
function seatAnalysisChart(account,transCnt,transAvail,transTime) {
var myChart = echarts.init(document.getElementById('seatAnalysis'));
var option = {
title:{
text:null,
subtext:null
}, },
tooltip : { {
trigger: 'axis' type : 'value',
splitLine:{
show:false
},
}
],
series : [
{
name:'业务量',
type:'bar',
data:[]
}, },
legend: { {
data:['业务量','成功量','均时长'] name:'成功量',
type:'bar',
data:[]
}, },
xAxis : [ {
{ name:'均时长',
type : 'category', type:'line',
splitLine:{ yAxisIndex: 1,
show:false data:[]
}, }
data : ['坐\n席\n一','坐\n席\n二','坐\n席\n三','坐\n席\n四','坐\n席\n五','坐\n席\n六','坐\n席\n七','坐\n席\n八','坐\n席\n九','坐\n席\n十'] ]
}
myChartSeatAnalysis.setOption(option5);
function seatAnalysisTop() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/seatAnalysisTop",
async: false,
success: function(data){
data.sort(function(t1,t2){return t2[1]-t1[1]})
console.log("坐席分析前top10",data);
var account = new Array();
var transCnt = new Array();
var transAvail = new Array();
var transTime = new Array();
for(var i=0; i<data.length; i++){
account.push(data[i][0]);
transCnt.push(data[i][1]);
transAvail.push(data[i][2]);
transTime.push(data[i][3]);
} }
], option5.series[0].data=transCnt;
yAxis : [ option5.series[1].data= transAvail;
{ option5.series[2].data=transTime;
type : 'value', myChartSeatAnalysis.setOption(option5);
splitLine:{ }
show:false });
}, }
}, function seatAnalysisLast() {
{ $.ajax({
type : 'value', type : "GET",
splitLine:{ contentType : "application/json",
show:false url: "${ctx}/MonitorOperation/FlowMonitor/seatAnalysisLast",
}, async: false,
success: function(data){
console.log("坐席分析后top10",data);
var account = new Array();
var transCnt = new Array();
var transAvail = new Array();
var transTime = new Array();
for(var i=0; i<data.length; i++){
account.push(data[i][0]);
transCnt.push(data[i][1]);
transAvail.push(data[i][2]);
transTime.push(data[i][3]);
} }
], option5.series[0].data=transCnt;
series : [ option5.series[0].data= transAvail;
option5.series[0].data=transTime;
myChartSeatAnalysis.setOption(option5);
}
});
}
seatAnalysisTop()
</script>
{ <script>
name:'业务量', var myChartBusinessOffice = echarts.init(document.getElementById('businessOffice'));
type:'bar', var option6 = {
data:transCnt title:{
text:null,
subtext:null
},
tooltip : {
trigger: 'axis'
},
grid:{
x:80,
y:20,
x2:20,
y2:20,
},
legend: {
data:['营业厅1','营业厅2','营业厅3','营业厅4','营业厅5']
},
xAxis:[
{
type: 'category',
data: [],
splitLine: {
show: false
}, },
{ axisLabel: {
name:'成功量', show: true,
type:'bar', interval:0,
data:transAvail formatter: function (data,i) {
if(i%4==0){
return sdf.format(new Date(data));
}
},
}, },
{ }
name:'均时长', ],
type:'line', yAxis:[
yAxisIndex: 1, {
data:transTime type:'value',
splitLine:{
show:false
} }
] }
} ],
myChart.setOption(option); series:[
} {
function businessOfficeChart(hallList,dataList,time){ name:'营业厅1',
var myChart = echarts.init(document.getElementById('businessOffice')); type:'line',
var option = { data:[],
title:{ smooth: true
text:null,
subtext:null
}, },
tooltip : { {
trigger: 'axis' name:'营业厅2',
type:'line',
data:[],
smooth: true
}, },
grid:{ {
x:80, name:'营业厅3',
y:20, type:'line',
x2:20, data:[],
y2:20, smooth: true
}, },
legend: { {
data:['营业厅1','营业厅2','营业厅3','营业厅4','营业厅5'] name:'营业厅4',
type:'line',
data:[],
smooth: true
}, },
xAxis:[ {
{ name:'营业厅5',
type: 'category', type:'line',
data: time, data:[],
splitLine: { smooth: true
show: false
},
axisLabel: {
show: true,
interval:0,
formatter: function (data,i) {
if(i%4==0){
return sdf.format(new Date(data));
}
},
},
}
],
yAxis:[
{
type:'value',
splitLine:{
show:false
}
}
],
series:[
{
name:'营业厅1',
type:'line',
data:dataList[0],
smooth: true
},
{
name:'营业厅2',
type:'line',
data:dataList[1],
smooth: true
},
{
name:'营业厅3',
type:'line',
data:dataList[2],
smooth: true
},
{
name:'营业厅4',
type:'line',
data:dataList[3],
smooth: true
},
{
name:'营业厅5',
type:'line',
data:dataList[4],
smooth: true
}
],
}
myChart.setOption(option);
}
function businessOfficeChartMonth(hallList,dataList,time){
var myChart = echarts.init(document.getElementById('businessOffice'));
var option = {
title:{
text:null,
subtext:null
},
tooltip : {
trigger: 'axis'
},
grid:{
x:80,
y:20,
x2:20,
y2:20,
},
legend: {
data:['营业厅1','营业厅2','营业厅3','营业厅4','营业厅5']
},
xAxis:[
{
type: 'category',
data: time,
splitLine: {
show: false
},
axisLabel: {
show: true,
interval:0,
formatter: function (data,i) {
if(i%4==0){
return sd.format(new Date(data));
}
},
},
}
],
yAxis:[
{
type:'value',
splitLine:{
show:false
}
}
],
series:[
{
name:'营业厅1',
type:'line',
data:dataList[0],
smooth: true
},
{
name:'营业厅2',
type:'line',
data:dataList[1],
smooth: true
},
{
name:'营业厅3',
type:'line',
data:dataList[2],
smooth: true
},
{
name:'营业厅4',
type:'line',
data:dataList[3],
smooth: true
},
{
name:'营业厅5',
type:'line',
data:dataList[4],
smooth: true
}
],
}
myChart.setOption(option);
}
function seatsReceptionUserChart(time,time1Account,time2Account,time3Account){
var myChart = echarts.init(document.getElementById('seatsReceptionUser'));
var option = {
title:{
text:null,
subtext:null
},
tooltip: {
trigger: 'axis',
},
grid:{
x:80,
x2:20,
},
legend: {
data:['无法使用','可容忍','不满意']
},
xAxis:[
{
type: 'category',
data: time,
splitLine: {
show: false
},
axisLabel: {
show: true,
formatter: function (data,i) {
if(i%4==0){
return sdf.format(new Date(data));
}
},
},
}
],
yAxis:[
{
type:'value',
splitLine:{
show:false
}
}
],
series:[
{
name:'无法使用',
type:'line',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data:time1Account,
smooth: true
},
{
name:'可容忍',
type:'line',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data:time2Account,
smooth: true
},
{
name:'不满意',
type:'line',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data:time3Account,
smooth: true
}
],
}
myChart.setOption(option);
}
function seatsReceptionUserChartMonth(time,time1Account,time2Account,time3Account){
var myChart = echarts.init(document.getElementById('seatsReceptionUser'));
var option = {
title:{
text:null,
subtext:null
},
tooltip: {
trigger: 'axis',
},
grid:{
x:80,
x2:80,
},
legend: {
data:['无法使用','可容忍','不满意']
},
xAxis:[
{
type: 'category',
data: time,
splitLine: {
show: false
},
axisLabel: {
show: true,
formatter: function (data,i) {
if(i%4==0){
return sd.format(new Date(data));
}
},
},
}
],
yAxis:[
{
type:'value',
splitLine:{
show:false
}
}
],
series:[
{
name:'无法使用',
type:'line',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data:time1Account,
smooth: true
},
{
name:'可容忍',
type:'line',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data:time2Account,
smooth: true
},
{
name:'不满意',
type:'line',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data:time3Account,
smooth: true
}
],
}
myChart.setOption(option);
}
function ipBusinessChart(cnt1,cnt2,cnt3,cnt4,cnt5,cnt6,cnt7,cnt8,cnt9,cnt10,clientIp,cnt){
var myChart = echarts.init(document.getElementById('ipBusiness'));
var option = {
title: {
text: null,
subtext: null
},
tooltip : {
trigger: 'axis',
},
grid:{
x:100,
x2:20
},
legend: {
data:['宽带开户', '资料变更','产品变更','套餐变更','综合账单查询','充值缴费','资金变化查询','详单查询','积分查询','其他']
},
xAxis : [
{
type : 'value',
splitLine:{
show:false
},
}
],
yAxis : [
{
type : 'category',
data : clientIp,
splitLine:{
show:false
},
}
],
series : [
{
name:'宽带开户',
type:'bar',
stack: '总量',
data:cnt1
},
{
name:'资料变更',
type:'bar',
stack: '总量',
data:cnt2
},
{
name:'产品变更',
type:'bar',
stack: '总量',
data:cnt3
},
{
name:'套餐变更',
type:'bar',
stack: '总量',
data:cnt4
},
{
name:'综合账单查询',
type:'bar',
stack: '总量',
data:cnt5
},
{
name:'充值缴费',
type:'bar',
stack: '总量',
data:cnt6
},
{
name:'资金变化查询',
type:'bar',
stack: '总量',
data:cnt7
},
{
name:'详单查询',
type:'bar',
stack: '总量',
data:cnt8
},
{
name:'积分查询',
type:'bar',
stack: '总量',
data:cnt9
},
{
name:'其他',
type:'bar',
stack: '总量',
data:cnt10
}
]
}
myChart.setOption(option);
}
function httpInformationChart(serverIp,sotherCnt){
var myChart = echarts.init(document.getElementById('httpState'));
var option = {
title: {
text: null,
subtext: null
},
tooltip : {
trigger: 'axis',
},
grid:{
x2:60
},
legend: {
data:['200', '302','404','空白']
},
xAxis : [
{
type : 'category',
data : serverIp,
splitLine:{
show:false
},
}
],
yAxis : [
{
type : 'value',
splitLine:{
show:false
},
}
],
series : [
{
name:'200',
type:'bar',
stack: '总量',
data:sotherCnt
},
{
name:'302',
type:'bar',
stack: '总量',
data:sotherCnt
},
{
name:'404',
type:'bar',
stack: '总量',
data:sotherCnt
},
{
name:'空白',
type:'bar',
stack: '总量',
data:sotherCnt
},
],
}
myChart.setOption(option);
}
function ipTrendChart(time,dataList,ipList) {
var myChart = echarts.init(document.getElementById('ipTrend'));
var option = {
title:{
text:null,
subtext:null
},
tooltip : {
trigger: 'axis'
},
grid:{
x:50,
y:40,
x2:10,
y2:30,
},
legend: {
data:ipList,
},
xAxis:[
{
type: 'category',
data: time,
splitLine: {
show: false
},
axisLabel: {
show: true,
interval:0,
formatter: function (data,i) {
if(i%4==0){
return sdf.format(new Date(data));
}
},
},
}
],
yAxis:[
{
type:'value',
splitLine:{
show:false
}
}
],
series:[
{
name:ipList[0],
type:'line',
data:dataList[0],
smooth: true
},
{
name:ipList[1],
type:'line',
data:dataList[1],
smooth: true
},
{
name:ipList[2],
type:'line',
data:dataList[2],
smooth: true
},
{
name:ipList[3],
type:'line',
data:dataList[3],
smooth: true
},
{
name:ipList[4],
type:'line',
data:dataList[4],
smooth: true
},
{
name:ipList[5],
type:'line',
data:dataList[5],
smooth: true
}
],
}
myChart.setOption(option);
}
function ipTrendChartMonth(time,dataList,ipList) {
var myChart = echarts.init(document.getElementById('ipTrend'));
var option = {
title:{
text:null,
subtext:null
},
tooltip : {
trigger: 'axis'
},
grid:{
x:50,
y:40,
x2:10,
y2:30,
},
legend: {
data:ipList,
},
xAxis:[
{
type: 'category',
data: time,
splitLine: {
show: false
},
axisLabel: {
show: true,
interval:0,
formatter: function (data,i) {
if(i%4==0){
return sd.format(new Date(data));
}
},
},
}
],
yAxis:[
{
type:'value',
splitLine:{
show:false
}
}
],
series:[
{
name:ipList[0],
type:'line',
data:dataList[0],
smooth: true
},
{
name:ipList[1],
type:'line',
data:dataList[1],
smooth: true
},
{
name:ipList[2],
type:'line',
data:dataList[2],
smooth: true
},
{
name:ipList[3],
type:'line',
data:dataList[3],
smooth: true
},
{
name:ipList[4],
type:'line',
data:dataList[4],
smooth: true
},
{
name:ipList[5],
type:'line',
data:dataList[5],
smooth: true
}
],
}
myChart.setOption(option);
}
function seatsActiveness() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/seatsActiveness",
async: false,
success: function(data){
console.log("地市业务量占比实时",data);
var city = new Array();
var cityValue = new Array();
for(var i=0; i<data.length; i++){
city.push(data[i][0]);
cityValue.push(data[i][1]);
}
city.reverse();
cityValue.reverse();
seatsActivenessChart(city,cityValue);
}
});
}
function seatsActivenessMonth() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/seatsActivenessMonth",
async: false,
success: function(data){
console.log("地市业务量占比当月",data);
var city = new Array();
var cityValue = new Array();
for(var i=0; i<data.length; i++){
city.push(data[i][0]);
cityValue.push(data[i][1]);
}
city.reverse();
cityValue.reverse();
seatsActivenessChart(city,cityValue);
}
});
}
function performanceStability() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/performanceStability",
async: false,
success: function(data){
console.log("地市性能稳定性实时",data);
var city = new Array();
var boxValue = [];
var percent = new Array();
for(var i=0; i<data.length; i++){
city.push(data[i][0]);
percent.push(data[i][6]);
boxValue.push([data[i][1],data[i][2],data[i][3],data[i][4],data[i][5]]);
}
city.reverse();
percent.reverse();
boxValue.reverse();
performanceStabilityChart(city,boxValue,percent);
}
});
}
function performanceStabilityMonth() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/performanceStabilityMonth",
async: false,
success: function(data){
console.log("地市性能稳定性当月",data);
var city = new Array();
var boxValue = [];
var percent = new Array();
for(var i=0; i<data.length; i++){
city.push(data[i][0]);
percent.push(data[i][6]);
boxValue.push([data[i][1],data[i][2],data[i][3],data[i][4],data[i][5]]);
}
city.reverse();
percent.reverse();
boxValue.reverse();
performanceStabilityChart(city,boxValue,percent);
}
});
}
function catonUser() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/catonUser",
async: false,
success: function(data){
console.log("卡顿用户实时",data);
var time = new Array();
var time1Account = new Array();
var time2Account = new Array();
var time3Account = new Array();
for(var i=0; i<data.length; i++){
time.push(df.format(new Date(data[i][0])));
time1Account.push(data[i][1]);
time2Account.push(data[i][2]);
time3Account.push(data[i][3]);
}
catonUserChart(time,time1Account,time2Account,time3Account);
}
});
}
function catonUserMonth() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/catonUserMonth",
async: false,
success: function(data){
console.log("卡顿用户当月",data);
var time = new Array();
var time1Account = new Array();
var time2Account = new Array();
var time3Account = new Array();
for(var i=0; i<data.length; i++){
time.push(df.format(new Date(data[i][0])));
time1Account.push(data[i][1]);
time2Account.push(data[i][2]);
time3Account.push(data[i][3]);
}
catonUserChartMonth(time,time1Account,time2Account,time3Account);
}
});
}
function seatAnalysisTop() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/seatAnalysisTop",
async: false,
success: function(data){
console.log("坐席分析前top10",data);
var account = new Array();
var transCnt = new Array();
var transAvail = new Array();
var transTime = new Array();
for(var i=0; i<data.length; i++){
account.push(data[i][0]);
transCnt.push(data[i][1]);
transAvail.push(data[i][2]);
transTime.push(data[i][3]);
}
seatAnalysisChart(account,transCnt,transAvail,transTime);
} }
}); ],
}
function seatAnalysisLast() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/seatAnalysisLast",
async: false,
success: function(data){
console.log("坐席分析后top10",data);
var account = new Array();
var transCnt = new Array();
var transAvail = new Array();
var transTime = new Array();
for(var i=0; i<data.length; i++){
account.push(data[i][0]);
transCnt.push(data[i][1]);
transAvail.push(data[i][2]);
transTime.push(data[i][3]);
}
seatAnalysisChart(account,transCnt,transAvail,transTime);
}
});
} }
function businessOffice() { function businessOffice() {
$.ajax({ $.ajax({
...@@ -1575,10 +1123,97 @@ ...@@ -1575,10 +1123,97 @@
dataList[i].push(t1[0]) dataList[i].push(t1[0])
}) })
}) })
businessOfficeChart(hallList,dataList,time); option6.xAxis[0].data=time;
option6.series[0].data=dataList[0];
option6.series[1].data=dataList[1];
option6.series[2].data=dataList[2];
option6.series[3].data=dataList[3];
option6.series[4].data=dataList[4];
myChartBusinessOffice.setOption(option6);
} }
}); });
} }
businessOffice()
</script>
<script>
var myChartBusinessOfficeMonth = echarts.init(document.getElementById('businessOffice'));
var option7 = {
title:{
text:null,
subtext:null
},
tooltip : {
trigger: 'axis'
},
grid:{
x:80,
y:20,
x2:20,
y2:20,
},
legend: {
data:['营业厅1','营业厅2','营业厅3','营业厅4','营业厅5']
},
xAxis:[
{
type: 'category',
data: [],
splitLine: {
show: false
},
axisLabel: {
show: true,
interval:0,
formatter: function (data,i) {
if(i%4==0){
return sd.format(new Date(data));
}
},
},
}
],
yAxis:[
{
type:'value',
splitLine:{
show:false
}
}
],
series:[
{
name:'营业厅1',
type:'line',
data:[],
smooth: true
},
{
name:'营业厅2',
type:'line',
data:[],
smooth: true
},
{
name:'营业厅3',
type:'line',
data:[],
smooth: true
},
{
name:'营业厅4',
type:'line',
data:[],
smooth: true
},
{
name:'营业厅5',
type:'line',
data:[],
smooth: true
}
],
}
function businessOfficeMonth() { function businessOfficeMonth() {
$.ajax({ $.ajax({
type : "GET", type : "GET",
...@@ -1604,10 +1239,103 @@ ...@@ -1604,10 +1239,103 @@
dataList[i].push(t1[0]) dataList[i].push(t1[0])
}) })
}) })
businessOfficeChartMonth(hallList,dataList,time); option7.xAxis[0].data=time;
option7.series[0].data=dataList[0];
option7.series[1].data=dataList[1];
option7.series[2].data=dataList[2];
option7.series[3].data=dataList[3];
option7.series[4].data=dataList[4];
myChartBusinessOfficeMonth.setOption(option7);
} }
}); });
} }
</script>
<script>
var myChartSeatsReceptionUser = echarts.init(document.getElementById('seatsReceptionUser'));
var option8 = {
title:{
text:null,
subtext:null
},
tooltip: {
trigger: 'axis',
},
grid:{
x:80,
x2:20,
},
legend: {
data:['无法使用','可容忍','不满意']
},
xAxis:[
{
type: 'category',
data: [],
splitLine: {
show: false
},
axisLabel: {
show: true,
formatter: function (data,i) {
if(i%4==0){
return sdf.format(new Date(data));
}
},
},
}
],
yAxis:[
{
type:'value',
splitLine:{
show:false
}
}
],
series:[
{
name:'无法使用',
type:'line',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data:[],
smooth: true
},
{
name:'可容忍',
type:'line',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data:[],
smooth: true
},
{
name:'不满意',
type:'line',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data:[],
smooth: true
}
],
}
function seatsReceptionUser() { function seatsReceptionUser() {
$.ajax({ $.ajax({
type : "GET", type : "GET",
...@@ -1626,10 +1354,102 @@ ...@@ -1626,10 +1354,102 @@
time2Account.push(data[i][2]); time2Account.push(data[i][2]);
time3Account.push(data[i][3]); time3Account.push(data[i][3]);
} }
seatsReceptionUserChart(time,time1Account,time2Account,time3Account); option8.xAxis[0].data=time;
option8.series[0].data=time1Account;
option8.series[1].data=time2Account;
option8.series[2].data=time3Account;
myChartSeatsReceptionUser.setOption(option8);
} }
}); });
} }
seatsReceptionUser()
</script>
<script>
var myChartSeatsReceptionUserMonth = echarts.init(document.getElementById('seatsReceptionUser'));
var option9 = {
title:{
text:null,
subtext:null
},
tooltip: {
trigger: 'axis',
},
grid:{
x:80,
x2:80,
},
legend: {
data:['无法使用','可容忍','不满意']
},
xAxis:[
{
type: 'category',
data: [],
splitLine: {
show: false
},
axisLabel: {
show: true,
formatter: function (data,i) {
if(i%4==0){
return sd.format(new Date(data));
}
},
},
}
],
yAxis:[
{
type:'value',
splitLine:{
show:false
}
}
],
series:[
{
name:'无法使用',
type:'line',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data:[],
smooth: true
},
{
name:'可容忍',
type:'line',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data:[],
smooth: true
},
{
name:'不满意',
type:'line',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data:[],
smooth: true
}
],
}
function seatsReceptionUserMonth() { function seatsReceptionUserMonth() {
$.ajax({ $.ajax({
type : "GET", type : "GET",
...@@ -1648,54 +1468,123 @@ ...@@ -1648,54 +1468,123 @@
time2Account.push(data[i][2]); time2Account.push(data[i][2]);
time3Account.push(data[i][3]); time3Account.push(data[i][3]);
} }
seatsReceptionUserChartMonth(time,time1Account,time2Account,time3Account); option9.xAxis[0].data=time;
option9.series[0].data=time1Account;
option9.series[1].data=time2Account;
option9.series[2].data=time3Account;
myChartSeatsReceptionUserMonth.setOption(option9);
} }
}); });
} }
function userIp() { </script>
$.ajax({
type : "GET",
contentType : "application/json", <script>
url: "${ctx}/MonitorOperation/FlowMonitor/userIp", var myChartIpBusiness = echarts.init(document.getElementById('ipBusiness'));
async: false, var option10 = {
success: function(data){ title: {
console.log("用户IP分析实时",data); text: null,
var tbody=$('<tbody></tbody>'); subtext: null
data.forEach(function(t) { },
var tr = $('<tr></tr>'); tooltip : {
tr.append('<td>'+t[0]+'</td>'+'<td>'+t[1]+'</td>'+'<td>'+t[2]+'</td>'+'<td>'+t[3]+'</td>'+'<td>'+t[4]+'</td>'); trigger: 'axis',
tbody.append(tr); },
}); grid:{
$('#userIpTable tbody').replaceWith(tbody); x:100,
x2:20
},
legend: {
data:['宽带开户', '资料变更','产品变更','套餐变更','综合账单查询','充值缴费','资金变化查询','详单查询','积分查询','其他']
},
xAxis : [
{
type : 'value',
splitLine:{
show:false
},
} }
}); ],
} yAxis : [
function userIpMonth() { {
$.ajax({ type : 'category',
type : "GET", data : [],
contentType : "application/json", splitLine:{
url: "${ctx}/MonitorOperation/FlowMonitor/userIpMonth", show:false
async: false, },
success: function(data){
console.log("用户IP分析当月",data);
var tbody=$('<tbody></tbody>');
data.forEach(function(t) {
var tr = $('<tr></tr>');
tr.append('<td>'+t[0]+'</td>'+'<td>'+t[1]+'</td>'+'<td>'+t[2]+'</td>'+'<td>'+t[3]+'</td>'+'<td>'+t[4]+'</td>');
tbody.append(tr);
});
$('#userIpTable tbody').replaceWith(tbody);
} }
}); ],
series : [
{
name:'宽带开户',
type:'bar',
stack: '总量',
data:[]
},
{
name:'资料变更',
type:'bar',
stack: '总量',
data:[]
},
{
name:'产品变更',
type:'bar',
stack: '总量',
data:[]
},
{
name:'套餐变更',
type:'bar',
stack: '总量',
data:[]
},
{
name:'综合账单查询',
type:'bar',
stack: '总量',
data:[]
},
{
name:'充值缴费',
type:'bar',
stack: '总量',
data:[]
},
{
name:'资金变化查询',
type:'bar',
stack: '总量',
data:[]
},
{
name:'详单查询',
type:'bar',
stack: '总量',
data:[]
},
{
name:'积分查询',
type:'bar',
stack: '总量',
data:[]
},
{
name:'其他',
type:'bar',
stack: '总量',
data:[]
}
]
} }
function ipBusiness() { function ipBusinessMonth() {
$.ajax({ $.ajax({
type : "GET", type : "GET",
contentType : "application/json", contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/ipBusiness", url: "${ctx}/MonitorOperation/FlowMonitor/ipBusinessMonth",
async: false, async: false,
success: function(data){ success: function(data){
console.log("用户IP业务实时",data); data[i].sort(function(t1,t2){return t1[2]-t2[2]});
console.log("用户IP业务当月",data);
var cnt1 = new Array(); var cnt1 = new Array();
var cnt2 = new Array(); var cnt2 = new Array();
var cnt3 = new Array(); var cnt3 = new Array();
...@@ -1722,18 +1611,32 @@ ...@@ -1722,18 +1611,32 @@
clientIp.push(data[i][10]); clientIp.push(data[i][10]);
cnt.push(data[i][11]); cnt.push(data[i][11]);
} }
ipBusinessChart(cnt1,cnt2,cnt3,cnt4,cnt5,cnt6,cnt7,cnt8,cnt9,cnt10,clientIp,cnt); option10.yAxis[0].data=clientIp;
option10.series[0].data=cnt1;
option10.series[1].data=cnt2;
option10.series[2].data=cnt3;
option10.series[3].data=cnt4;
option10.series[4].data=cnt5;
option10.series[5].data=cnt6;
option10.series[6].data=cnt7;
option10.series[7].data=cnt8;
option10.series[8].data=cnt9;
option10.series[9].data=cnt10;
myChartIpBusiness.setOption(option10);
} }
}); });
} }
function ipBusinessMonth() { function ipBusiness() {
$.ajax({ $.ajax({
type : "GET", type : "GET",
contentType : "application/json", contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/ipBusinessMonth", url: "${ctx}/MonitorOperation/FlowMonitor/ipBusiness",
async: false, async: false,
success: function(data){ success: function(data){
console.log("用户IP业务当月",data);
console.log("用户IP业务实时",data);
var cnt1 = new Array(); var cnt1 = new Array();
var cnt2 = new Array(); var cnt2 = new Array();
var cnt3 = new Array(); var cnt3 = new Array();
...@@ -1747,6 +1650,8 @@ ...@@ -1747,6 +1650,8 @@
var clientIp = new Array(); var clientIp = new Array();
var cnt = new Array(); var cnt = new Array();
for(var i=0; i<data.length; i++){ for(var i=0; i<data.length; i++){
data[i].sort(function(t1,t2){return t1[2]-t2[2]});
cnt1.push(data[i][0]); cnt1.push(data[i][0]);
cnt2.push(data[i][1]); cnt2.push(data[i][1]);
cnt3.push(data[i][2]); cnt3.push(data[i][2]);
...@@ -1760,10 +1665,257 @@ ...@@ -1760,10 +1665,257 @@
clientIp.push(data[i][10]); clientIp.push(data[i][10]);
cnt.push(data[i][11]); cnt.push(data[i][11]);
} }
ipBusinessChart(cnt1,cnt2,cnt3,cnt4,cnt5,cnt6,cnt7,cnt8,cnt9,cnt10,clientIp,cnt); option10.yAxis[0].data=clientIp;
option10.series[0].data=cnt1;
option10.series[1].data=cnt2;
option10.series[2].data=cnt3;
option10.series[3].data=cnt4;
option10.series[4].data=cnt5;
option10.series[5].data=cnt6;
option10.series[6].data=cnt7;
option10.series[7].data=cnt8;
option10.series[8].data=cnt9;
option10.series[9].data=cnt10;
myChartIpBusiness.setOption(option10);
}
});
}
ipBusiness()
</script>
<script>
var myChartHttpInformation = echarts.init(document.getElementById('httpState'));
var option11 = {
title: {
text: null,
subtext: null
},
tooltip : {
trigger: 'axis',
},
grid:{
x2:60
},
legend: {
data:['200', '302','404','空白']
},
xAxis : [
{
type : 'category',
data : [],
splitLine:{
show:false
},
}
],
yAxis : [
{
type : 'value',
splitLine:{
show:false
},
}
],
series : [
{
name:'200',
type:'bar',
stack: '总量',
data:[]
},
{
name:'302',
type:'bar',
stack: '总量',
data:[]
},
{
name:'404',
type:'bar',
stack: '总量',
data:[]
},
{
name:'空白',
type:'bar',
stack: '总量',
data:[]
},
],
}
function httpInformation() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/httpInformation",
async: false,
success: function(data){
console.log("HTTP状态码实时",data);
var serverIp = [];
var twoOtwo = [];
var threeOtwo = [];
var fourOfour = [];
var space = [];
for(var i=0; i<data.length; i++){
serverIp.push(data[i][0]);
twoOtwo.push(data[i][1]);
threeOtwo.push(data[i][2]);
fourOfour.push(data[i][3]);
space.push(data[i][4]);
}
option11.xAxis[0].data=serverIp;
option11.series[0].data=twoOtwo;
option11.series[1].data=threeOtwo;
option11.series[2].data=fourOfour;
option11.series[3].data=space;
myChartHttpInformation.setOption(option11);
}
});
}
function httpInformationMonth() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/httpInformationMonth",
async: false,
success: function(data){
console.log("HTTP状态码当月",data);
var serverIp = [];
var twoOtwo = [];
var threeOtwo = [];
var fourOfour = [];
var space = [];
for(var i=0; i<data.length; i++){
serverIp.push(data[i][0]);
twoOtwo.push(data[i][1]);
threeOtwo.push(data[i][2]);
fourOfour.push(data[i][3]);
space.push(data[i][4]);
}
option11.xAxis[0].data=serverIp;
option11.series[0].data=twoOtwo;
option11.series[1].data=threeOtwo;
option11.series[2].data=fourOfour;
option11.series[3].data=space;
myChartHttpInformation.setOption(option11);
} }
}); });
} }
httpInformation()
</script>
<script>
var myChartIpTrend = echarts.init(document.getElementById('ipTrend'));
var option12 = {
title:{
text:null,
subtext:null
},
tooltip : {
trigger: 'axis'
},
grid:{
x:50,
y:40,
x2:10,
y2:30,
},
legend: {
data:[],
},
xAxis:[
{
type: 'category',
data: [],
splitLine: {
show: false
},
axisLabel: {
show: true,
interval:0,
formatter: function (data,i) {
if(i%4==0){
return sdf.format(new Date(data));
}
},
},
}
],
yAxis:[
{
type:'value',
splitLine:{
show:false
}
}
],
series:[
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
}
],
}
function ipTrend() { function ipTrend() {
$.ajax({ $.ajax({
type : "GET", type : "GET",
...@@ -1776,6 +1928,7 @@ ...@@ -1776,6 +1928,7 @@
var time=[]; var time=[];
var ipList=[]; var ipList=[];
data.forEach(function(t,i){ data.forEach(function(t,i){
t.sort(function(t1,t2){return t1[2]-t2[2]});
if(i===0){ if(i===0){
t.forEach(function(t1){ t.forEach(function(t1){
time.push(df.format(new Date(t1[2]))) time.push(df.format(new Date(t1[2])))
...@@ -1788,11 +1941,145 @@ ...@@ -1788,11 +1941,145 @@
} }
dataList[i].push(t1[0]) dataList[i].push(t1[0])
}) })
}) });
ipTrendChart(time,dataList,ipList); option12.legend.data=ipList;
option12.xAxis[0].data=time;
option12.series[0].data=dataList[0];
option12.series[0].name=ipList[0];
option12.series[1].data=dataList[1];
option12.series[1].name=ipList[1];
option12.series[2].data=dataList[2];
option12.series[2].name=ipList[2];
option12.series[3].data=dataList[3];
option12.series[3].name=ipList[3];
option12.series[4].data=dataList[4];
option12.series[4].name=ipList[4];
option12.series[5].data=dataList[5];
option12.series[5].name=ipList[5];
option12.series[6].data=dataList[6];
option12.series[6].name=ipList[6];
option12.series[7].data=dataList[7];
option12.series[7].name=ipList[7];
option12.series[8].data=dataList[8];
option12.series[8].name=ipList[8];
option12.series[9].data=dataList[9];
option12.series[9].name=ipList[9];
myChartIpTrend.setOption(option12);
} }
}); });
} }
ipTrend()
</script>
<script>
var myChartIpTrendMonth = echarts.init(document.getElementById('ipTrend'));
var option13 = {
title:{
text:null,
subtext:null
},
tooltip : {
trigger: 'axis'
},
grid:{
x:50,
y:40,
x2:10,
y2:30,
},
legend: {
data:[],
},
xAxis:[
{
type: 'category',
data: [],
splitLine: {
show: false
},
axisLabel: {
show: true,
interval:0,
formatter: function (data,i) {
if(i%4==0){
return sd.format(new Date(data));
}
},
},
}
],
yAxis:[
{
type:'value',
splitLine:{
show:false
}
}
],
series:[
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
},
{
name:[],
type:'line',
data:[],
smooth: true
}
],
}
function ipTrendMonth() { function ipTrendMonth() {
$.ajax({ $.ajax({
type : "GET", type : "GET",
...@@ -1805,6 +2092,7 @@ ...@@ -1805,6 +2092,7 @@
var time=[]; var time=[];
var ipList=[]; var ipList=[];
data.forEach(function(t,i){ data.forEach(function(t,i){
t.sort(function(t1,t2){return t1[2]-t2[2]});
if(i===0){ if(i===0){
t.forEach(function(t1){ t.forEach(function(t1){
time.push(df.format(new Date(t1[2]))) time.push(df.format(new Date(t1[2])))
...@@ -1818,115 +2106,31 @@ ...@@ -1818,115 +2106,31 @@
dataList[i].push(t1[0]) dataList[i].push(t1[0])
}) })
}); });
ipTrendChartMonth(time,dataList,ipList); option13.legend.data=ipList;
}
});
} option13.xAxis[0].data=time;
function serverExample() { option13.series[0].data=dataList[0];
$.ajax({ option13.series[0].name=ipList[0];
type : "GET", option13.series[1].data=dataList[1];
contentType : "application/json", option13.series[1].name=ipList[1];
url: "${ctx}/MonitorOperation/FlowMonitor/serverExample", option13.series[2].data=dataList[2];
async: false, option13.series[2].name=ipList[2];
success: function(data){ option13.series[3].data=dataList[3];
console.log("服务器实例实时",data); option13.series[3].name=ipList[3];
var tbody=$('<tbody></tbody>'); option13.series[4].data=dataList[4];
data.forEach(function(t) { option13.series[4].name=ipList[4];
var tr = $('<tr></tr>'); option13.series[5].data=dataList[5];
tr.append('<td>'+t[0]+'</td>'+'<td>'+t[1]+'</td>'+'<td>'+t[2]+'</td>'+'<td>'+t[3]+'</td>'+'<td>'+t[4]+'</td>'); option13.series[5].name=ipList[5];
tbody.append(tr); option12.series[6].data=dataList[6];
}); option12.series[6].name=ipList[6];
$('#serverExampleTable tbody').replaceWith(tbody); option12.series[7].data=dataList[7];
} option12.series[7].name=ipList[7];
}); option12.series[8].data=dataList[8];
} option12.series[8].name=ipList[8];
function serverExampleMonth() { option12.series[9].data=dataList[9];
$.ajax({ option12.series[9].name=ipList[9];
type : "GET", myChartIpTrendMonth.setOption(option13);
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/serverExampleMonth",
async: false,
success: function(data){
console.log("服务器实例当月",data);
var tbody=$('<tbody></tbody>');
data.forEach(function(t) {
var tr = $('<tr></tr>');
tr.append('<td>'+t[0]+'</td>'+'<td>'+t[1]+'</td>'+'<td>'+t[2]+'</td>'+'<td>'+t[3]+'</td>'+'<td>'+t[4]+'</td>');
tbody.append(tr);
});
$('#serverExampleTable tbody').replaceWith(tbody);
}
});
}
function clientCompatibility() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/clientCompatibility",
async: false,
success: function(data){
console.log("客户端兼容性实时",data);
var tbody=$('<tbody></tbody>');
data.forEach(function(t) {
var tr = $('<tr></tr>');
tr.append('<td>'+t[0]+'</td>'+'<td>'+t[1]+'</td>'+'<td>'+t[2]+'</td>'+'<td>'+t[3]+'</td>');
tbody.append(tr);
});
$('#browserInformationTable tbody').replaceWith(tbody);
}
});
}
function clientCompatibilityMonth() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/clientCompatibilityMonth",
async: false,
success: function(data){
console.log("客户端兼容性当月",data);
var tbody=$('<tbody></tbody>');
data.forEach(function(t) {
var tr = $('<tr></tr>');
tr.append('<td>'+t[0]+'</td>'+'<td>'+t[1]+'</td>'+'<td>'+t[2]+'</td>'+'<td>'+t[3]+'</td>');
tbody.append(tr);
});
$('#browserInformationTable tbody').replaceWith(tbody);
}
});
}
function httpInformation() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/httpInformation",
async: false,
success: function(data){
console.log("HTTP状态码实时",data);
var serverIp = new Array();
var sotherCnt = new Array();
for(var i=0; i<data.length; i++){
serverIp.push(data[i][0]);
sotherCnt.push(data[i][1]);
}
httpInformationChart(serverIp,sotherCnt)
}
});
}
function httpInformationMonth() {
$.ajax({
type : "GET",
contentType : "application/json",
url: "${ctx}/MonitorOperation/FlowMonitor/httpInformationMonth",
async: false,
success: function(data){
console.log("HTTP状态码当月",data);
var serverIp = new Array();
var sotherCnt = new Array();
for(var i=0; i<data.length; i++){
serverIp.push(data[i][0]);
sotherCnt.push(data[i][1]);
}
httpInformationChart(serverIp,sotherCnt)
} }
}); });
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment