small-package/luci-app-oaf/luasrc/view/admin_network/dev_status.htm

<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>