|
34 | 34 | <div class="portlet light bordered"> |
35 | 35 | <div class="portlet-title"> |
36 | 36 | <div class="caption"> |
37 | | - <span class="caption-subject font-dark sbold uppercase">【{{$node->name}}】</span> |
| 37 | + <span class="caption-subject font-dark sbold uppercase">节点流量监控<small>【{{$node->name}}】</small></span> |
38 | 38 | </div> |
39 | 39 | </div> |
40 | 40 | <div class="portlet-body"> |
41 | 41 | <div class="alert alert-danger"> |
42 | 42 | <button class="close" data-close="alert"></button> |
43 | 43 | <strong>提示:</strong> 仅统计SSR的流量,如果使用锐速或BBR等加速工具,可能跟VPS管理面板上看到的不一致(通常是VPS管理面板上看到实际消耗流量更多)。 |
44 | 44 | </div> |
| 45 | + <div class="note note-info"> |
| 46 | + <h4>24小时内流量</h4> |
| 47 | + <div id="chart" class="chart"> </div> |
| 48 | + </div> |
| 49 | + <div class="note note-info"> |
| 50 | + <h4>30天内流量</h4> |
| 51 | + <div id="chart2" class="chart"> </div> |
| 52 | + </div> |
45 | 53 |
|
46 | | - <h4>24小时内流量(未统计本小时)</h4> |
47 | | - <div id="chart1" class="chart"> </div> |
48 | | - |
49 | | - <h4>30天内流量(未统计今日)</h4> |
50 | | - <div id="chart2" class="chart"> </div> |
51 | 54 | </div> |
52 | 55 | </div> |
53 | 56 | @endif |
|
76 | 79 | } |
77 | 80 |
|
78 | 81 | function chart() { |
79 | | - if ($('#chart1').size() != 1) { |
| 82 | + if ($('#chart').size() != 1) { |
80 | 83 | return; |
81 | 84 | } |
82 | 85 |
|
83 | | - @if (!empty($traffic)) |
84 | | - @foreach ($traffic as $node_id => $node_traffic_list) |
85 | | - {{ 'var node_' . $node_id}} = [ |
86 | | - @foreach ($node_traffic_list as $key => $vo) |
87 | | - [{{$key + 1}}, {{$vo->total}}], |
88 | | - @endforeach |
89 | | - ]; |
90 | | - @endforeach |
91 | | - @endif |
92 | | -
|
93 | | - var plot = $.plot($("#chart1"), [ |
94 | | - @if (!empty($nodeList)) |
95 | | - @foreach($nodeList as $node) |
96 | | - {data: {{'node_' . $node->id}}, label: "{{$node->name}}", lines: {lineWidth: 1}, shadowSize: 0}, |
| 86 | + var chartData = [ |
| 87 | + @if (!empty($trafficHourly)) |
| 88 | + @foreach ($trafficHourly as $key => $vo) |
| 89 | + [{{$key + 1}}, {{$vo->total}}], |
97 | 90 | @endforeach |
98 | 91 | @endif |
99 | | - ], { |
| 92 | + ]; |
| 93 | +
|
| 94 | + var plot = $.plot($("#chart"), [ |
| 95 | + {data: chartData, label: "24小时内流量走势", lines: {lineWidth: 1}, shadowSize: 0}, |
| 96 | + ], { |
100 | 97 | series: { |
101 | 98 | lines: { |
102 | 99 | show: true, |
@@ -154,7 +151,7 @@ function showTooltip(x, y, contents) { |
154 | 151 | } |
155 | 152 |
|
156 | 153 | var previousPoint = null; |
157 | | - $("#chart1").bind("plothover", function(event, pos, item) { |
| 154 | + $("#chart").bind("plothover", function(event, pos, item) { |
158 | 155 | $("#x").text(pos.x.toFixed(2)); |
159 | 156 | $("#y").text(pos.y.toFixed(2)); |
160 | 157 |
|
|
0 commit comments