servers.tpl 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. {include file='user/tabler_header.tpl'}
  2. <div class="page-wrapper">
  3. <div class="container-xl">
  4. <div class="page-header d-print-none text-white">
  5. <div class="row align-items-center">
  6. <div class="col">
  7. <h2 class="page-title">
  8. <span class="home-title">节点列表</span>
  9. </h2>
  10. <div class="page-pretitle">
  11. <span class="home-subtitle">查看节点在线情况</span>
  12. </div>
  13. </div>
  14. </div>
  15. </div>
  16. </div>
  17. <div class="page-body">
  18. <div class="container-xl">
  19. <div class="row row-cards">
  20. <div class="col-12">
  21. <div class="card">
  22. <div class="card-body">
  23. <div class="m-0 my-2">
  24. 描述中分别表述为:该节点的在线人数,该节点的流量倍率,该节点当月可用流量 / 该节点当月已用流量
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. <div class="col-12">
  30. <div class="card">
  31. <ul class="nav nav-tabs nav-fill" data-bs-toggle="tabs">
  32. {foreach $class as $grade}
  33. <li class="nav-item">
  34. <a href="#class-{$grade['node_class']}"
  35. class="nav-link {if $grade['node_class'] == '0'}active{/if}" data-bs-toggle="tab">
  36. <i class="ti ti-box-multiple-{$grade['node_class']}"></i>&nbsp;
  37. 等级 {$grade['node_class']}
  38. </a>
  39. </li>
  40. {/foreach}
  41. </ul>
  42. <div class="card-body">
  43. <div class="tab-content">
  44. {foreach $class as $grade}
  45. <div class="tab-pane {if $grade['node_class'] == '0'}active show{/if}"
  46. id="class-{$grade['node_class']}">
  47. <div class="row row-cards">
  48. {foreach $servers as $server}
  49. {if $server->node_class == $grade['node_class']}
  50. <div class="col-md-3 col-sm-12">
  51. <div class="card">
  52. <div class="card-body">
  53. <div class="row g-3 align-items-center">
  54. <div class="col-auto">
  55. <span
  56. class="status-indicator status-{if ($server->get_node_online_status() == '1')}green{else}red{/if} status-indicator-animated">
  57. <span class="status-indicator-circle"></span>
  58. <span class="status-indicator-circle"></span>
  59. <span class="status-indicator-circle"></span>
  60. </span>
  61. </div>
  62. <div class="col">
  63. <h2 class="page-title" style="font-size: 16px;">
  64. {$server->name}&nbsp;
  65. <span class="card-subtitle my-2"
  66. style="font-size: 10px;">
  67. {if $server->node_bandwidth_limit == '0'}
  68. 不限流量
  69. {else}
  70. {round($server->node_bandwidth / 1073741824)}
  71. GB /
  72. {round($server->node_bandwidth_limit / 1073741824)}
  73. GB
  74. {/if}
  75. </span>
  76. </h2>
  77. <div class="text-muted">
  78. <ul class="list-inline list-inline-dots mb-0">
  79. {if ($server->get_node_online_status() == '1')}
  80. <li class="list-inline-item"><span
  81. class="text-green">Up</span></li>
  82. {else}
  83. <li class="list-inline-item"><span
  84. class="text-red">Down</span></li>
  85. {/if}
  86. <li class="list-inline-item">
  87. <i class="ti ti-users"></i>&nbsp;
  88. {$server->get_node_online_user_count()}
  89. </li>
  90. <li class="list-inline-item">
  91. <i class="ti ti-rocket"></i>&nbsp;
  92. {$server->traffic_rate}x
  93. </li>
  94. </ul>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. {/if}
  102. {/foreach}
  103. </div>
  104. </div>
  105. {/foreach}
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. {include file='user/tabler_footer.tpl'}