Skip to content

Commit b541c11

Browse files
ScyllalyScyllaly
committed
节点流量监控
1 parent 22d3dd2 commit b541c11

File tree

5 files changed

+141
-150
lines changed

5 files changed

+141
-150
lines changed

‎app/Http/Controllers/AdminController.php‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -543,17 +543,36 @@ public function nodeMonitor(Request $request)
543543
return Redirect::back();
544544
}
545545

546-
// 30天内流量
547-
$daily_start_time = date('Y-m-d 00:00:00', strtotime("-30 days"));
548-
$daily_end_time = date('Y-m-d 23:59:59', strtotime("-1 day"));
549-
$view['trafficDaily'] = SsNodeTrafficDaily::query()->where('node_id', $node_id)->whereBetween('created_at', [$daily_start_time, $daily_end_time])->get();
546+
// 30天内的流量
547+
$trafficDaily = [];
548+
$trafficHourly = [];
549+
$dailyData = [];
550+
$hourlyData = [];
551+
552+
// 节点30日内每天的流量
553+
$nodeTrafficDaily = SsNodeTrafficDaily::query()->with(['info'])->where('node_id', $node->id)->where('created_at', '>=', date('Y-m-d 00:00:00', strtotime("-30 days")))->where('created_at', '<=', date('Y-m-d 00:00:00', strtotime("-1 day")))->get();
554+
foreach ($nodeTrafficDaily as $daily) {
555+
$dailyData[] = round($daily->total / (1024 * 1024), 2);
556+
}
550557

551-
// 24小时内流量
552-
$hourly_start_time = date('Y-m-d H:i:s', strtotime("-24 hours"));
553-
$hourly_end_time = date('Y-m-d H:i:s', strtotime("-1 hour"));
554-
$view['trafficHourly'] = SsNodeTrafficHourly::query()->where('node_id', $node_id)->whereBetween('created_at', [$hourly_start_time, $hourly_end_time])->get();
558+
// 节点24小时内每小时的流量
559+
$nodeTrafficHourly = SsNodeTrafficHourly::query()->with(['info'])->where('node_id', $node->id)->where('created_at', '>=', date('Y-m-d H:i:s', strtotime("-24 hours")))->where('created_at', '<=', date('Y-m-d H:i:s', strtotime("-1 hour")))->get();
560+
foreach ($nodeTrafficHourly as $hourly) {
561+
$hourlyData[] = round($hourly->total / (1024 * 1024), 2);
562+
}
563+
564+
$trafficDaily[$node->id] = [
565+
'nodeName' => $node->name,
566+
'dailyData' => "'" . implode("','", $dailyData) . "'"
567+
];
568+
569+
$trafficHourly[$node->id] = [
570+
'nodeName' => $node->name,
571+
'hourlyData' => "'" . implode("','", $hourlyData) . "'"
572+
];
555573

556-
$view['node'] = $node;
574+
$view['trafficDaily'] = $trafficDaily;
575+
$view['trafficHourly'] = $trafficHourly;
557576

558577
return Response::view('admin/nodeMonitor', $view);
559578
}

‎app/Http/Models/SsNodeTrafficDaily.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,9 @@ class SsNodeTrafficDaily extends Model
2121
'traffic'
2222
];
2323

24+
public function info()
25+
{
26+
return $this->hasOne(SsNode::class, 'id', 'node_id');
27+
}
28+
2429
}

‎app/Http/Models/SsNodeTrafficHourly.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,8 @@ class SsNodeTrafficHourly extends Model
2121
'traffic'
2222
];
2323

24+
public function info()
25+
{
26+
return $this->hasOne(SsNode::class, 'id', 'node_id');
27+
}
2428
}

‎resources/views/admin/nodeMonitor.blade.php‎

Lines changed: 103 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -25,161 +25,124 @@
2525
<!-- BEGIN PAGE BASE CONTENT -->
2626
<div class="row">
2727
<div class="col-md-12">
28-
@if (Session::has('errorMsg'))
29-
<div class="alert alert-danger">
30-
<button class="close" data-close="alert"></button>
31-
<strong>错误：</strong> {{Session::get('errorMsg')}}
28+
<div class="portlet light bordered">
29+
<div class="portlet-body">
30+
<div id="chart1" style="width: auto;height:450px;"></div>
3231
</div>
33-
@else
34-
<div class="portlet light bordered">
35-
<div class="portlet-title">
36-
<div class="caption">
37-
<span class="caption-subject font-dark sbold uppercase">节点流量监控<small>【{{$node->name}}】</small></span>
38-
</div>
39-
</div>
40-
<div class="portlet-body">
41-
<div class="alert alert-danger">
42-
<button class="close" data-close="alert"></button>
43-
<strong>提示：</strong> 仅统计SSR的流量，如果使用锐速或BBR等加速工具，可能跟VPS管理面板上看到的不一致（通常是VPS管理面板上看到实际消耗流量更多）。
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>
53-
54-
</div>
32+
</div>
33+
</div>
34+
</div>
35+
<div class="row">
36+
<div class="col-md-12">
37+
<div class="portlet light bordered">
38+
<div class="portlet-body">
39+
<div id="chart2" style="width: auto;height:450px;"></div>
5540
</div>
56-
@endif
41+
</div>
5742
</div>
5843
</div>
5944
<!-- END PAGE BASE CONTENT -->
6045
</div>
6146
<!-- END CONTENT BODY -->
6247
@endsection
6348
@section('script')
64-
<script src="/assets/global/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
65-
<script src="/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
49+
<script src="/assets/global/plugins/echarts/echarts.min.js" type="text/javascript"></script>
6650

6751
<script type="text/javascript">
68-
var ChartsFlotcharts = function() {
69-
return {
70-
init: function() {
71-
App.addResizeHandler(function() {
72-
Charts.initPieCharts();
73-
});
74-
},
75-
76-
initCharts: function() {
77-
if (!jQuery.plot) {
78-
return;
52+
var myChart = echarts.init(document.getElementById('chart1'));
53+
54+
option = {
55+
title: {
56+
text: '24小时内流量',
57+
subtext: '单位M'
58+
},
59+
tooltip: {
60+
trigger: 'axis'
61+
},
62+
toolbox: {
63+
show: true,
64+
feature: {
65+
saveAsImage: {}
66+
}
67+
},
68+
xAxis: {
69+
type: 'category',
70+
boundaryGap: false,
71+
data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
72+
},
73+
yAxis: {
74+
type: 'value',
75+
axisLabel: {
76+
formatter: '{value} M'
77+
}
78+
},
79+
series: [
80+
@if(!empty($trafficHourly))
81+
@foreach($trafficHourly as $traffic)
82+
{
83+
name:'{{$traffic['nodeName']}}',
84+
type:'line',
85+
data:[{!! $traffic['hourlyData'] !!}],
86+
markPoint: {
87+
data: [
88+
{type: 'max', name: '最大值'}
89+
]
7990
}
91+
},
92+
@endforeach
93+
@endif
94+
]
95+
};
8096
81-
function chart() {
82-
if ($('#chart').size() != 1) {
83-
return;
84-
}
85-
86-
var chartData = [
87-
@if (!empty($trafficHourly))
88-
@foreach ($trafficHourly as $key => $vo)
89-
[{{$key + 1}}, {{$vo->total}}],
90-
@endforeach
91-
@endif
92-
];
93-
94-
var plot = $.plot($("#chart"), [
95-
{data: chartData, label: "24小时内流量走势", lines: {lineWidth: 1}, shadowSize: 0},
96-
], {
97-
series: {
98-
lines: {
99-
show: true,
100-
lineWidth: 2,
101-
fill: true,
102-
fillColor: {
103-
colors: [{
104-
opacity: 0.05
105-
}, {
106-
opacity: 0.01
107-
}]
108-
}
109-
},
110-
points: {
111-
show: true,
112-
radius: 3,
113-
lineWidth: 1
114-
},
115-
shadowSize: 2
116-
},
117-
grid: {
118-
hoverable: true,
119-
clickable: true,
120-
tickColor: "#eee",
121-
borderColor: "#eee",
122-
borderWidth: 1
123-
},
124-
colors: ["#d12610", "#37b7f3", "#52e136"],
125-
xaxis: {
126-
ticks: 11,
127-
tickDecimals: 0,
128-
tickColor: "#eee",
129-
},
130-
yaxis: {
131-
ticks: 11,
132-
tickDecimals: 0,
133-
tickColor: "#eee",
134-
}
135-
});
136-
137-
138-
function showTooltip(x, y, contents) {
139-
$('<div id="tooltip">' + contents + '</div>').css({
140-
position: 'absolute',
141-
display: 'none',
142-
top: y + 5,
143-
left: x + 15,
144-
border: '1px solid #333',
145-
padding: '4px',
146-
color: '#fff',
147-
'border-radius': '3px',
148-
'background-color': '#333',
149-
opacity: 0.80
150-
}).appendTo("body").fadeIn(200);
151-
}
152-
153-
var previousPoint = null;
154-
$("#chart").bind("plothover", function(event, pos, item) {
155-
$("#x").text(pos.x.toFixed(2));
156-
$("#y").text(pos.y.toFixed(2));
157-
158-
if (item) {
159-
if (previousPoint != item.dataIndex) {
160-
previousPoint = item.dataIndex;
161-
162-
$("#tooltip").remove();
163-
var x = item.datapoint[0].toFixed(2),
164-
y = item.datapoint[1].toFixed(2);
165-
166-
showTooltip(item.pageX, item.pageY, item.series.label + ": " + y + 'M');
167-
}
168-
} else {
169-
$("#tooltip").remove();
170-
previousPoint = null;
171-
}
172-
});
173-
}
97+
myChart.setOption(option);
98+
</script>
17499

175-
chart();
100+
<script type="text/javascript">
101+
var myChart = echarts.init(document.getElementById('chart2'));
102+
103+
option = {
104+
title: {
105+
text: '30日内流量',
106+
subtext: '单位M'
107+
},
108+
tooltip: {
109+
trigger: 'axis'
110+
},
111+
toolbox: {
112+
show: true,
113+
feature: {
114+
saveAsImage: {}
115+
}
116+
},
117+
xAxis: {
118+
type: 'category',
119+
boundaryGap: false,
120+
data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30']
121+
},
122+
yAxis: {
123+
type: 'value',
124+
axisLabel: {
125+
formatter: '{value} M'
176126
}
177-
};
178-
}();
127+
},
128+
series: [
129+
@if(!empty($trafficDaily))
130+
@foreach($trafficDaily as $traffic)
131+
{
132+
name:'{{$traffic['nodeName']}}',
133+
type:'line',
134+
data:[{!! $traffic['dailyData'] !!}],
135+
markPoint: {
136+
data: [
137+
{type: 'max', name: '最大值'}
138+
]
139+
}
140+
},
141+
@endforeach
142+
@endif
143+
]
144+
};
179145
180-
jQuery(document).ready(function() {
181-
ChartsFlotcharts.init();
182-
ChartsFlotcharts.initCharts();
183-
});
146+
myChart.setOption(option);
184147
</script>
185148
@endsection

‎resources/views/admin/userMonitor.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
xAxis: {
118118
type: 'category',
119119
boundaryGap: false,
120-
data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
120+
data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30']
121121
},
122122
yAxis: {
123123
type: 'value',

0 commit comments

Comments
 (0)