mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-11-01 16:44:45 +08:00
update 2026-05-10 09:48:30
This commit is contained in:
action committed
1 parent
95ac96413e
commit
0b362674f1
6244 files changed
+2992248
No files matched your search
@@ -0,0 +1,394 @@
|
||||
<link rel="stylesheet" href="<%=resource%>/css/common.css">
|
||||
<style type="text/css">
|
||||
<% local dsp=require "luci.dispatcher"
|
||||
|
||||
-%>#display {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#main {
|
||||
min-width: 600px;
|
||||
height: 300px;
|
||||
display: inline-block;
|
||||
flex: 2 2 10%;
|
||||
}
|
||||
|
||||
#main2 {
|
||||
min-width: 600px;
|
||||
height: 300px;
|
||||
display: inline-block;
|
||||
flex: 2 2 10%;
|
||||
}
|
||||
|
||||
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: ['58%', '70%'],
|
||||
clockwise: false,
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 2,
|
||||
borderColor: "#fff",
|
||||
borderWidth: 1,
|
||||
},
|
||||
|
||||
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: ['58%', '70%'],
|
||||
clockwise: false,
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 2,
|
||||
borderColor: "#fff",
|
||||
borderWidth: 1,
|
||||
},
|
||||
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" class="main left"></div>
|
||||
<div id="main2" class="main2 left"></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>
|
||||
Reference in new issue
Block a user