个人中心流量监控完善

app/Http/Controllers/UserController.php

@@ -19,6 +19,7 @@ use App\Http\Models\UserBalanceLog;
 use App\Http\Models\UserScoreLog;
 use App\Http\Models\UserSubscribe;
 use App\Http\Models\UserTrafficDaily;
+use App\Http\Models\UserTrafficHourly;
 use App\Http\Models\Verify;
 use App\Mail\activeUser;
 use App\Mail\resetPassword;
@@ -222,14 +223,23 @@ class UserController extends BaseController
         $user = $request->session()->get('user');
 
         // 30天内的流量
-        $userTrafficDaily = UserTrafficDaily::query()->where('user_id', $user['id'])->where('node_id', 0)->orderBy('id', 'asc')->limit(30)->get();
+        $userTrafficDaily = UserTrafficDaily::query()->where('user_id', $user['id'])->where('node_id', 0)->orderBy('id', 'desc')->limit(30)->get();
 
         $dailyData = [];
         foreach ($userTrafficDaily as $daily) {
             $dailyData[] = round($daily->total / (1024 * 1024), 2); // 以M为单位
         }
 
+        // 24小时内的流量
+        $userTrafficHourly = UserTrafficHourly::query()->where('user_id', $user['id'])->where('node_id', 0)->orderBy('id', 'desc')->limit(24)->get();
+
+        $hourlyData = [];
+        foreach ($userTrafficHourly as $hourly) {
+            $hourlyData[] = round($hourly->total / (1024 * 1024), 2); // 以M为单位
+        }
+
         $view['trafficDaily'] = "'" . implode("','", $dailyData) . "'";
+        $view['trafficHourly'] = "'" . implode("','", $hourlyData) . "'";
 
         return Response::view('user/trafficLog', $view);
     }

resources/views/user/trafficLog.blade.php

@@ -17,6 +17,15 @@
                 </div>
             </div>
         </div>
+        <div class="row">
+            <div class="col-md-12">
+                <div class="portlet light bordered">
+                    <div class="portlet-body">
+                        <div id="chart2" style="width: auto;height:450px;"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <!-- END PAGE BASE CONTENT -->
     </div>
     <!-- END CONTENT BODY -->
@@ -68,6 +77,52 @@
             ]
         };
 
+        myChart.setOption(option);
+    </script>
+    <script type="text/javascript">
+        var myChart = echarts.init(document.getElementById('chart2'));
+
+        option = {
+            title: {
+                text: '24小时内流量消耗情况',
+                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']
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    formatter: '{value} M'
+                }
+            },
+            series: [
+                @if(!empty($trafficHourly))
+                {
+                    name:'消耗流量',
+                    type:'line',
+                    data:[{!! $trafficHourly !!}],
+                    markPoint: {
+                        data: [
+                            {type: 'max', name: '最大值'}
+                        ]
+                    }
+                }
+                @endif
+            ]
+        };
+
         myChart.setOption(option);
     </script>
 @endsection