mirror of
https://github.com/kenzok8/small-package
synced 2025-09-20 19:11:30 +08:00
378 lines
10 KiB
HTML
Executable File
378 lines
10 KiB
HTML
Executable File
<style type="text/css">
|
|
<%
|
|
local dsp = require "luci.dispatcher"
|
|
-%>
|
|
|
|
#display{
|
|
padding: 10px;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-pack: center;
|
|
-webkit-box-align: center;
|
|
display: -moz-box;
|
|
-moz-box-orient: horizontal;
|
|
-moz-box-pack: center;
|
|
-moz-box-align: center;
|
|
display: -o-box;
|
|
-o-box-orient: horizontal;
|
|
-o-box-pack: center;
|
|
-o-box-align: center;
|
|
display: -ms-box;
|
|
-ms-box-orient: horizontal;
|
|
-ms-box-pack: center;
|
|
-ms-box-align: center;
|
|
display: box;
|
|
box-orient: horizontal;
|
|
box-pack: center;
|
|
box-align: center;
|
|
}
|
|
|
|
table.imagetable {
|
|
font-family: verdana,arial,sans-serif;
|
|
font-size:11px;
|
|
color:#333333;
|
|
border-width: 1px;
|
|
border-color: #999999;
|
|
border-collapse: collapse;
|
|
padding-top:10px;
|
|
}
|
|
<!--
|
|
table.imagetable th {
|
|
background:#f5f5f5
|
|
border-width: 0px;
|
|
padding: 5px;
|
|
border-style: solid;
|
|
border-color: #999999;
|
|
}
|
|
table.imagetable td {
|
|
background:#ffffffff
|
|
border-width: 0px;
|
|
padding: 5px;
|
|
border-style: solid;
|
|
border-color: #999999;
|
|
}-->
|
|
</style>
|
|
|
|
|
|
|
|
<script type="text/javascript" src="<%=resource%>/echarts.min.js?v=5.0"></script>
|
|
|
|
<script type="text/javascript">//<![CDATA[
|
|
window.onload =function(){
|
|
|
|
}
|
|
var app_class_data;
|
|
var app_time_data;
|
|
var mac='<%=self.mac%>';
|
|
function get_display_time(total_time){
|
|
var hour=parseInt(total_time / 3600);
|
|
var seconds=total_time % 3600;
|
|
var min=parseInt(seconds / 60)
|
|
var seconds2=seconds % 60;
|
|
var total_time_str;
|
|
|
|
if (hour > 0)
|
|
total_time_str=hour + "<%:h%>" + min + "<%:m%>"
|
|
else{
|
|
if (min == 0 && seconds2 != 0)
|
|
min = 1;
|
|
total_time_str=min + "<%:m%>"
|
|
}
|
|
return total_time_str;
|
|
}
|
|
|
|
function display_app_visit_view(data){
|
|
var myChart = echarts.init(document.getElementById('main2'));
|
|
var dev_array=new Array();
|
|
var m2R2Data=new Array()
|
|
var total_time=0
|
|
for(var i = 0; i < data.length; i++){
|
|
var dev_obj = data[i];
|
|
var m2_obj={};
|
|
m2_obj.value=dev_obj.visit_time;
|
|
m2_obj.legendname=dev_obj.app_id;
|
|
|
|
var tmp_time = get_display_time(dev_obj.visit_time);
|
|
|
|
m2_obj.name=dev_obj.app_id + " " + tmp_time;
|
|
total_time+=dev_obj.visit_time
|
|
m2R2Data.push(m2_obj);
|
|
}
|
|
|
|
var total_time_str = get_display_time(total_time);
|
|
option = {
|
|
title: [
|
|
{
|
|
text: "<%:App Time Statistics%>",
|
|
textStyle: {
|
|
fontSize: 16,
|
|
color: "black"
|
|
},
|
|
left: "2%"
|
|
},
|
|
{
|
|
text: '',
|
|
subtext: total_time_str,
|
|
textStyle:{
|
|
fontSize:15,
|
|
color:"black"
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 15,
|
|
color: 'black'
|
|
},
|
|
textAlign:"center",
|
|
x: '34.5%',
|
|
y: '44%',
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter:function (parms){
|
|
var total_time = get_display_time(parms.data.value);
|
|
var str= parms.seriesName+"</br>"+
|
|
parms.marker+""+parms.data.legendname+"</br>"+
|
|
"<%:Visit Time%>: "+ total_time+"</br>"+
|
|
"<%:Percentage%>: "+ parms.percent+"%";
|
|
return str ;
|
|
}
|
|
},
|
|
legend: {
|
|
type:"scroll",
|
|
orient: 'vertical',
|
|
left:'70%',
|
|
align:'left',
|
|
top:'middle',
|
|
textStyle: {
|
|
color:'#8C8C8C'
|
|
},
|
|
height:250
|
|
},
|
|
series: [
|
|
{
|
|
name: "<%:Visit Time%>",
|
|
type:'pie',
|
|
center: ['35%', '50%'],
|
|
radius: ['40%', '65%'],
|
|
clockwise: false,
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'outter',
|
|
formatter:function (parms){
|
|
return parms.data.legendname
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
length:8,
|
|
length2:7,
|
|
smooth:true,
|
|
}
|
|
},
|
|
data:m2R2Data
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
function display_app_class_view(data){
|
|
console.log("begin display.");
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
var dev_array=new Array();
|
|
var m2R2Data=new Array()
|
|
var total_time=0
|
|
for(var i = 0; i < data.length; i++){
|
|
var dev_obj = data[i];
|
|
if (dev_obj.visit_time == 0)
|
|
continue;
|
|
|
|
var m2_obj={};
|
|
m2_obj.value=dev_obj.visit_time;
|
|
m2_obj.legendname=dev_obj.name;
|
|
|
|
var tmp_time = get_display_time(dev_obj.visit_time);
|
|
|
|
m2_obj.name=dev_obj.name + " " + tmp_time;
|
|
total_time+=dev_obj.visit_time
|
|
m2R2Data.push(m2_obj);
|
|
}
|
|
|
|
var total_time_str = get_display_time(total_time);
|
|
|
|
option = {
|
|
title: [
|
|
{
|
|
text: "<%:App classification time statistics%>",
|
|
textStyle: {
|
|
fontSize: 16,
|
|
color: "black"
|
|
},
|
|
left: "2%"
|
|
},
|
|
{
|
|
text: '',
|
|
subtext: total_time_str,
|
|
textStyle:{
|
|
fontSize:15,
|
|
color:"black"
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 15,
|
|
color: 'black'
|
|
},
|
|
textAlign:"center",
|
|
x: '34.5%',
|
|
y: '44%',
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter:function (parms){
|
|
var total_time = get_display_time(parms.data.value);
|
|
var str= parms.seriesName+"</br>"+
|
|
parms.marker+""+parms.data.legendname+"</br>"+"<%:Visit Time%>: "+ total_time +"</br>" +
|
|
"<%:Percentage%>: "+ parms.percent+"%";
|
|
return str ;
|
|
}
|
|
},
|
|
legend: {
|
|
type:"scroll",
|
|
orient: 'vertical',
|
|
left:'70%',
|
|
align:'left',
|
|
top:'middle',
|
|
textStyle: {
|
|
color:'#8C8C8C'
|
|
},
|
|
height:250
|
|
},
|
|
series: [
|
|
{
|
|
name:"<%:Visit Time%>",
|
|
type:'pie',
|
|
center: ['35%', '50%'],
|
|
radius: ['40%', '65%'],
|
|
clockwise: false,
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'outter',
|
|
formatter:function (parms){
|
|
return parms.data.legendname
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
length:8,
|
|
length2:7,
|
|
smooth:true,
|
|
}
|
|
},
|
|
data:m2R2Data
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
new XHR().get('<%=url('admin/network/app_class_visit_time')%>/' + mac, null,
|
|
function(x, st)
|
|
{
|
|
display_app_class_view(st);
|
|
}
|
|
);
|
|
|
|
new XHR().get('<%=url('admin/network/dev_visit_time')%>/' + mac, null,
|
|
function(x, st)
|
|
{
|
|
display_app_visit_view(st);
|
|
}
|
|
);
|
|
|
|
|
|
new XHR().get('<%=url('admin/network/dev_visit_list')%>/' + mac, null,
|
|
function(x, st)
|
|
{
|
|
var tb = document.getElementById('user_status_table');
|
|
var str=JSON.stringify(st);
|
|
if (st && tb)
|
|
{
|
|
/* clear all rows */
|
|
while(tb.rows.length > 1)
|
|
tb.deleteRow(1);
|
|
for(var i = 0; i < st.length; i++ )
|
|
{
|
|
var action_status=""
|
|
if(st[i].latest_action == 1)
|
|
action_status="<%:Filtered%>"
|
|
else
|
|
action_status="<%:Unfiltered%>"
|
|
var hostname=""
|
|
if(st[i].hostname == "" || st[i].hostname == "*"){
|
|
hostname="--";
|
|
}
|
|
else{
|
|
hostname=st[i].hostname;
|
|
}
|
|
var tr = tb.insertRow(-1);
|
|
tr.className = 'tr cbi-rowstyle-' + ((i % 2) + 1);
|
|
tr.insertCell(-1).innerHTML = st[i].appname;
|
|
tr.insertCell(-1).innerHTML = hostname;
|
|
tr.insertCell(-1).innerHTML = st[i].mac;
|
|
tr.insertCell(-1).innerHTML = st[i].first_time;
|
|
var hour=parseInt(st[i].total_time / 3600);
|
|
var seconds=st[i].total_time % 3600;
|
|
var min=parseInt(seconds / 60)
|
|
var total_time_str;
|
|
if (st[i].latest_action == 1)
|
|
total_time_str="-"
|
|
else {
|
|
if (hour > 0)
|
|
total_time_str=hour + "<%:h%>" + min + "<%:m%>"
|
|
else{
|
|
if (min == 0)
|
|
min = 1;
|
|
total_time_str=min + "<%:m%>"
|
|
}
|
|
}
|
|
|
|
tr.insertCell(-1).innerHTML = total_time_str;
|
|
tr.insertCell(-1).innerHTML = action_status;
|
|
var childs = tr.childNodes;
|
|
Array.prototype.forEach.call(childs,function(child){
|
|
child.className = 'td';
|
|
|
|
});
|
|
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
//]]></script>
|
|
|
|
|
|
<div class="cbi-section cbi-tblsection">
|
|
<div id="display">
|
|
<div id="main" style="min-width: 600px;height:300px;"></div>
|
|
<div id="main2" style="min-width: 600px;height:300px;"></div>
|
|
</div>
|
|
<table class="table cbi-section-table" id="user_status_table">
|
|
<tr class="tr table-titles">
|
|
<th class="th"><%:App Name%></th>
|
|
<th class="th"><%:Hostname%></th>
|
|
<th class="th"><%:Mac%></th>
|
|
<th class="th"><%:Start Time%></th>
|
|
<th class="th"><%:Visit Time%></th>
|
|
<th class="th"><%:Filter Status%></th>
|
|
</tr>
|
|
<tr class="tr table-titles">
|
|
<td class="td" colspan="8"><em><br /><%:Collecting data...%></em></td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|