userMonitor.blade.php 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. @extends('admin.layouts')
  2. @section('content')
  3. <div class="page-content container-fluid">
  4. <div class="panel">
  5. <div class="panel-heading">
  6. <h2 class="panel-title">用户流量</h2>
  7. </div>
  8. <div class="alert alert-info alert-dismissible">
  9. <button class="close" data-dismiss="alert" aria-label="Close">
  10. <span aria-hidden="true">&times;</span><span class="sr-only">{{trans('common.close')}}</span>
  11. </button>
  12. <h4 class="block">{{$email}}</h4>
  13. <strong>提示:</strong> 如果无统计数据,请检查定时任务是否正常。
  14. </div>
  15. <div class="panel-body">
  16. <div class="row">
  17. <div class="col-md-6">
  18. <canvas id="dailyChart" aria-label="小时流量图" role="img"></canvas>
  19. </div>
  20. <div class="col-md-6">
  21. <canvas id="monthlyChart" aria-label="月流量图" role="img"></canvas>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. @endsection
  28. @section('javascript')
  29. <script src="/assets/global/vendor/chart-js/Chart.min.js"></script>
  30. <script>
  31. const dailyChart = new Chart(document.getElementById('dailyChart').getContext('2d'), {
  32. type: 'line',
  33. data: {
  34. labels: {{$dayHours}},
  35. datasets: [
  36. {
  37. fill: true,
  38. backgroundColor: 'rgba(98, 168, 234, .1)',
  39. borderColor: Config.colors('primary', 600),
  40. pointRadius: 4,
  41. borderDashOffset: 2,
  42. pointBorderColor: '#fff',
  43. pointBackgroundColor: Config.colors('primary', 600),
  44. pointHoverBackgroundColor: '#fff',
  45. pointHoverBorderColor: Config.colors('primary', 600),
  46. data: {{$trafficHourly}},
  47. }],
  48. },
  49. options: {
  50. legend: {
  51. display: false,
  52. },
  53. responsive: true,
  54. scales: {
  55. xAxes: [
  56. {
  57. display: true,
  58. scaleLabel: {
  59. display: true,
  60. labelString: '小时',
  61. },
  62. }],
  63. yAxes: [
  64. {
  65. display: true,
  66. ticks: {
  67. beginAtZero: true,
  68. userCallback: function(tick) {
  69. return tick.toString() + ' GB';
  70. },
  71. },
  72. scaleLabel: {
  73. display: true,
  74. labelString: '{{trans('user.traffic_logs.24hours')}}',
  75. },
  76. }],
  77. },
  78. },
  79. });
  80. const monthlyChart = new Chart(document.getElementById('monthlyChart').getContext('2d'), {
  81. type: 'line',
  82. data: {
  83. labels: {{$monthDays}},
  84. datasets: [
  85. {
  86. fill: true,
  87. backgroundColor: 'rgba(98, 168, 234, .1)',
  88. borderColor: Config.colors('primary', 600),
  89. pointRadius: 4,
  90. borderDashOffset: 2,
  91. pointBorderColor: '#fff',
  92. pointBackgroundColor: Config.colors('primary', 600),
  93. pointHoverBackgroundColor: '#fff',
  94. pointHoverBorderColor: Config.colors('primary', 600),
  95. data: {{$trafficDaily}},
  96. }],
  97. },
  98. options: {
  99. legend: {
  100. display: false,
  101. },
  102. responsive: true,
  103. scales: {
  104. xAxes: [
  105. {
  106. display: true,
  107. scaleLabel: {
  108. display: true,
  109. labelString: '天',
  110. },
  111. }],
  112. yAxes: [
  113. {
  114. display: true,
  115. ticks: {
  116. beginAtZero: true,
  117. userCallback: function(tick) {
  118. return tick.toString() + ' GB';
  119. },
  120. },
  121. scaleLabel: {
  122. display: true,
  123. labelString: '{{trans('user.traffic_logs.30days')}}',
  124. },
  125. }],
  126. },
  127. },
  128. });
  129. </script>
  130. @endsection