易展版的UI设计有点自己给自己加戏，把原本传统的表格式流量统计界面改成了卡片式，反倒让人很难去搞清楚网络里面谁的流量最大、谁的流量异常这种问题。实在忍受不了了，然后自己手动做了下调整，以方便排查故障。
这个画面说实在的真的是难用，每个设备所在位置不固定，想一目了然看到谁大谁小很困难。
经过稍加改造，在开发者工具的命令行上，重新用表格形式显示了各个设备的流量，方便多了。
基本思路
登录了易展版路由器的管理界面后，F12调出开发工具仔细观察了一下，发现它用的jQuery完成的XHR通讯。每次请求的地址都是ds，应答回来的数据都是json。具体内容每次会有差异，应该源自不同的请求格式。其中包含了设备流量信息的字段位于hosts_info.online_host中，以
{ 0: { ’host_info_xx' : 主机信息对象 }, 1: { ’host_info_xx' : 主机信息对象 }, ... }
形式的JSON Object组成，其中主机信息对象上存储了各个主机的ip, mac, hostname, 上下行速率. 结构搞得稍微有点绕, 处理的时候稍微要整理一下.
然后接下来的思路就简单了，监听全局的AJAX的onComplete事件，检索应答消息中的responseJSON，看有没有主机信息，有就拿来整理输出即可。
中间稍微做了一些小优化，比如缓存主机清单、根据mac映射具体使用者，都比较简单，看代码即可。
代码及使用方法
登录了易展版管理web后，F12调出开发者工具，切换到 console 选项卡，直接粘贴以下代码回车即可。
$(document).on('ajaxComplete', function (evt, xhr, settings) {
function descDown(x, y) {
return y.down_speed - x.down_speed
}
function speedFormatter(v) {
let x = v * 1.0
if (x <= 0) return toFixedLength('0 B/s', 9)
if (x <= 1024) return toFixedLength(x.toFixed(0) + ' B/s', 9)
if (x <= 1024*1024) return toFixedLength((x/1024).toFixed(0) + ' KB/s', 9)
return toFixedLength((x / 1024 / 1024).toFixed(0) + ' MB/s', 9)
}
function toFixedLength(x, len, tail = false) {
while (x.length < len)
x = !!tail ? x + ' ' : ' ' + x
return x
}
function findName(mac) {
// 这里填写 MAC - 使用者 的映射关系, 如果这里没有,
// 将会展示机器自己上报的信息或手动在路由器上做的MAC绑定信息
let names = {
'mac地址': '使用者',
}
return names[mac]
}
function restoreHosts(hosts) {
let known = Object.assign({}, window.known_hosts || {})
for (let host of hosts) {
let mac = host.mac
known[mac] = host
}
window.known_hosts = known
let result = []
for (let mac of Object.keys(known)) {
let host = known[mac]
host.hostname = findName(mac) || host.hostname
result.push(host)
}
return result
}
let json = xhr.responseJSON
if (!json.hosts_info) return
if (!json.hosts_info.online_host) return
if (!!window.flow_debug)
debugger
if (!window.flow_watch)
return
let items = json.hosts_info.online_host
let hosts = []
for (let item of items) {
let host = item[Object.keys(item)[0]]
hosts.push(host)
}
hosts = restoreHosts(hosts)
hosts = hosts.sort(descDown)
let results = []
for (let host of hosts) {
let row = [
`Down: ${speedFormatter(host.down_speed)}`,
`Up: ${speedFormatter(host.up_speed)}`,
`MAC: ${host.mac}`,
`IP: ${toFixedLength(host.ip, 14, 'tail')}`,
`HostName: ${host.hostname}`
].join(', ')
results.push(row)
}
let result = results.join('\r\n')
console.clear()
console.info(result)
})
window.flow_watch = true
在命令行输入 window.flow_watch = false 可以暂停刷新。
如果想自行调整代码，可以在命令行输入 window.flow_debug = true 打开调试。
目前的排序是下行降序，需要的话可以自行修改，或者在这个基础上增加命令行调控功能。
此外，特别说明一下restoreHosts()函数的作用：因为不是每次ds查询回来的设备清单都是完整的，因此做一下缓存，避免表格剧烈抖动。当然这个可能造成显示的数据并不一定全都是同一时刻的。不过这个不是很影响，有点误差也没关系。
