节点流量监控

app/Http/Controllers/AdminController.php

@@ -548,7 +548,7 @@ class AdminController extends BaseController
         $hourlyData = [];
 
         // 节点30日内每天的流量
-        $nodeTrafficDaily = SsNodeTrafficDaily::query()->with(['info'])->where('node_id', $node->id)->orderBy('id', 'asc')->limit(24)->get();
+        $nodeTrafficDaily = SsNodeTrafficDaily::query()->with(['info'])->where('node_id', $node->id)->orderBy('id', 'asc')->limit(30)->get();
         foreach ($nodeTrafficDaily as $daily) {
             $dailyData[] = round($daily->total / (1024 * 1024), 2);
         }

app/Http/Controllers/UserController.php

@@ -12,15 +12,13 @@ use App\Http\Models\Order;
 use App\Http\Models\OrderGoods;
 use App\Http\Models\ReferralApply;
 use App\Http\Models\ReferralLog;
-use App\Http\Models\SsNodeInfo;
-use App\Http\Models\SsNodeOnlineLog;
 use App\Http\Models\Ticket;
 use App\Http\Models\TicketReply;
 use App\Http\Models\User;
 use App\Http\Models\UserBalanceLog;
 use App\Http\Models\UserScoreLog;
 use App\Http\Models\UserSubscribe;
-use App\Http\Models\UserTrafficLog;
+use App\Http\Models\UserTrafficDaily;
 use App\Http\Models\Verify;
 use App\Mail\activeUser;
 use App\Mail\resetPassword;
@@ -224,12 +222,14 @@ class UserController extends BaseController
         $user = $request->session()->get('user');
 
         // 30天内的流量
-        $trafficList = \DB::select("SELECT date(from_unixtime(log_time)) AS dd, SUM(u) AS u, SUM(d) AS d FROM `user_traffic_log` WHERE `user_id` = {$user['id']} GROUP BY `dd`");
-        foreach ($trafficList as $key => &$val) {
-            $val->total = ($val->u + $val->d) / (1024 * 1024); // 以M为单位
+        $userTrafficDaily = UserTrafficDaily::query()->where('user_id', $user['id'])->where('node_id', 0)->orderBy('id', 'asc')->limit(30)->get();
+
+        $dailyData = [];
+        foreach ($userTrafficDaily as $daily) {
+            $dailyData[] = round($daily->total / (1024 * 1024), 2); // 以M为单位
         }
 
-        $view['trafficList'] = $trafficList;
+        $view['trafficDaily'] = "'" . implode("','", $dailyData) . "'";
 
         return Response::view('user/trafficLog', $view);
     }

resources/views/user/trafficLog.blade.php

@@ -11,14 +11,8 @@
         <div class="row">
             <div class="col-md-12">
                 <div class="portlet light bordered">
-                    <div class="portlet-title">
-                        <div class="caption">
-                            <i class="icon-settings font-dark"></i>
-                            <span class="caption-subject font-dark sbold uppercase">流量日志</span>
-                        </div>
-                    </div>
                     <div class="portlet-body">
-                        <div id="chart" class="chart"> </div>
+                        <div id="chart1" style="width: auto;height:450px;"></div>
                     </div>
                 </div>
             </div>
@@ -28,125 +22,52 @@
     <!-- END CONTENT BODY -->
 @endsection
 @section('script')
-    <script src="/assets/global/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
-    <script src="/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
+    <script src="/assets/global/plugins/echarts/echarts.min.js" type="text/javascript"></script>
 
     <script type="text/javascript">
-        var ChartsFlotcharts = function() {
-            return {
-                init: function() {
-                    App.addResizeHandler(function() {
-                        Charts.initPieCharts();
-                    });
-                },
-
-                initCharts: function() {
-                    if (!jQuery.plot) {
-                        return;
-                    }
-
-                    function chart() {
-                        if ($('#chart').size() != 1) {
-                            return;
-                        }
-
-                        var chartData = [
-                            @if (!empty($trafficList))
-                                @foreach ($trafficList as $key => $vo)
-                                    [{{$key + 1}}, {{$vo->total}}],
-                                @endforeach
-                            @endif
-                        ];
-
-                        var plot = $.plot($("#chart"), [
-                                {data: chartData, label: "30日流量走势", lines: {lineWidth: 1}, shadowSize: 0},
-                            ], {
-                                series: {
-                                    lines: {
-                                        show: true,
-                                        lineWidth: 2,
-                                        fill: true,
-                                        fillColor: {
-                                            colors: [{
-                                                opacity: 0.05
-                                            }, {
-                                                opacity: 0.01
-                                            }]
-                                        }
-                                    },
-                                    points: {
-                                        show: true,
-                                        radius: 3,
-                                        lineWidth: 1
-                                    },
-                                    shadowSize: 2
-                                },
-                                grid: {
-                                    hoverable: true,
-                                    clickable: true,
-                                    tickColor: "#eee",
-                                    borderColor: "#eee",
-                                    borderWidth: 1
-                                },
-                                colors: ["#d12610", "#37b7f3", "#52e136"],
-                                xaxis: {
-                                    ticks: 11,
-                                    tickDecimals: 0,
-                                    tickColor: "#eee",
-                                },
-                                yaxis: {
-                                    ticks: 11,
-                                    tickDecimals: 0,
-                                    tickColor: "#eee",
-                                }
-                            });
-
+        var myChart = echarts.init(document.getElementById('chart1'));
 
-                        function showTooltip(x, y, contents) {
-                            $('<div id="tooltip">' + contents + '</div>').css({
-                                position: 'absolute',
-                                display: 'none',
-                                top: y + 5,
-                                left: x + 15,
-                                border: '1px solid #333',
-                                padding: '4px',
-                                color: '#fff',
-                                'border-radius': '3px',
-                                'background-color': '#333',
-                                opacity: 0.80
-                            }).appendTo("body").fadeIn(200);
-                        }
-
-                        var previousPoint = null;
-                        $("#chart").bind("plothover", function(event, pos, item) {
-                            $("#x").text(pos.x.toFixed(2));
-                            $("#y").text(pos.y.toFixed(2));
-
-                            if (item) {
-                                if (previousPoint != item.dataIndex) {
-                                    previousPoint = item.dataIndex;
-
-                                    $("#tooltip").remove();
-                                    var x = item.datapoint[0].toFixed(2),
-                                        y = item.datapoint[1].toFixed(2);
-
-                                    showTooltip(item.pageX, item.pageY, item.series.label + ": " + y + 'M');
-                                }
-                            } else {
-                                $("#tooltip").remove();
-                                previousPoint = null;
-                            }
-                        });
+        option = {
+            title: {
+                text: '30日内的流量',
+                subtext: '单位M'
+            },
+            tooltip: {
+                trigger: 'axis'
+            },
+            toolbox: {
+                show: true,
+                feature: {
+                    saveAsImage: {}
+                }
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                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']
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    formatter: '{value} M'
+                }
+            },
+            series: [
+                @if(!empty($trafficDaily))
+                {
+                    name:'消耗流量',
+                    type:'line',
+                    data:[{!! $trafficDaily !!}],
+                    markPoint: {
+                        data: [
+                            {type: 'max', name: '最大值'}
+                        ]
                     }
-
-                    chart();
                 }
-            };
-        }();
+                @endif
+            ]
+        };
 
-        jQuery(document).ready(function() {
-            ChartsFlotcharts.init();
-            ChartsFlotcharts.initCharts();
-        });
+        myChart.setOption(option);
     </script>
 @endsection