lanproxy/proxy-server/webpages/lanproxy-config/html/statistics/list.html

<div class="layui-tab layui-tab-brief">
	<ul class="layui-tab-title site-demo-title">
		<li class="layui-this tab-title"></li>
	</ul>
	<div class="main-content"></div>
</div>
<script id="stat-tpl" type="text/html">
<table class="layui-table" lay-skin="line">
    <thead>
        <tr>
            <th class="i18n-inetport"></th>
            <th class="i18n-inflow"></th>
            <th class="i18n-outflow"></th>
            <th class="i18n-channels"></th>
        </tr>
    </thead>
    <tbody>
    <%for(var i = 0; i < data.length; i++) {%>
        <tr>
            <td><%:=data[i].port%></td>
            <td><%:=bytesToSize(data[i].readBytes)%></td>
            <td><%:=bytesToSize(data[i].wroteBytes)%></td>
            <td><%:=data[i].channels%></td>
        </tr>
    <%}%>
    </tbody>
</table>
</script>
<script>
    $(".tab-title").html($.i18n.prop('menu.client.statistics'));
	function bytesToSize(bytes) {
		if (bytes === 0)
			return '0 B';
		var k = 1000, // or 1024
		sizes = [ 'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB' ], i = Math
				.floor(Math.log(bytes) / Math.log(k));

		return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
	}

	api_invoke("/metrics/get", {}, function(data) {
		var html = template($("#stat-tpl").html(), {
			data : data.data
		});
		$(".main-content").html(html);
		$(".i18n-inetport").html($.i18n.prop('statistics.inetport'));
		$(".i18n-inflow").html($.i18n.prop('statistics.inflow'));
		$(".i18n-outflow").html($.i18n.prop('statistics.outflow'));
		$(".i18n-channels").html($.i18n.prop('statistics.channels'));
	});
</script>