onlinetime.tpl 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>欢迎页面-X-admin2.0</title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  8. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  9. <link rel="stylesheet" href="./static/css/font.css">
  10. <link rel="stylesheet" href="./static/css/xadmin.css">
  11. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  12. <script src="http://code.highcharts.com/highcharts.js"></script>
  13. </head>
  14. <body onload="InitParams({{.Server_id}}, {{.Minutes}}, {{.Days}})">
  15. <div class="x-body layui-anim layui-anim-up">
  16. <blockquote class="layui-elem-quote">
  17. 指定服务器:<input id="server_id" type="text" name="服务器ID" />
  18. 时间颗粒度(分钟):<input id="minutes" type="text" name="时间颗粒度" />
  19. 过往天数:<input id="days" type="text" name="天数" />
  20. <br>
  21. <br>
  22. <input class="layui-btn" type="button" onclick="submitUpdate()" value=刷新>
  23. <input class="layui-btn" type="button" onclick="submitDownload()" value=下载>
  24. </blockquote>
  25. </div>
  26. <div id="container" style="width: 1600px; height: 800px; margin: 0 auto"></div>
  27. <script language="JavaScript">
  28. $(document).ready(function() {
  29. var chart = {
  30. type: 'spline'
  31. };
  32. var title = {
  33. text: '在线时长'
  34. };
  35. var subtitle = {
  36. text: '来源:游戏服'
  37. };
  38. var xAxis = {
  39. title: {
  40. text: '时(每30秒)'
  41. },
  42. categories: {{.Categories}}
  43. };
  44. var yAxis = {
  45. title: {
  46. text: '人数'
  47. },
  48. plotLines: [{
  49. value: 0,
  50. width: 1,
  51. color: '#808080'
  52. }]
  53. };
  54. var tooltip = {
  55. valueSuffix: '人'
  56. }
  57. var legend = {
  58. layout: 'vertical',
  59. align: 'right',
  60. verticalAlign: 'middle',
  61. borderWidth: 0
  62. };
  63. var series = [
  64. ];
  65. var list = {{.Series}}
  66. for ( var i= 0; i < list.length; i++){
  67. series.push({"name":list[i].Name, "data":eval(list[i].Data)})
  68. }
  69. var json = {};
  70. json.title = title;
  71. json.subtitle = subtitle;
  72. json.xAxis = xAxis;
  73. json.yAxis = yAxis;
  74. json.tooltip = tooltip;
  75. json.legend = legend;
  76. json.series = series;
  77. json.chart = chart;
  78. $('#container').highcharts(json);
  79. });
  80. function InitParams(ServerId, Minutes, Days) {
  81. if (ServerId.length > 0) {
  82. document.getElementById("server_id").value = ServerId;
  83. }
  84. if (Minutes > 0) {
  85. document.getElementById("minutes").value = Minutes;
  86. }
  87. if (Days > 0) {
  88. document.getElementById("days").value = Days;
  89. }
  90. }
  91. function submitUpdate () {
  92. var sid = document.getElementById("server_id").value;
  93. var min = document.getElementById("minutes").value;
  94. var days = document.getElementById("days").value;
  95. var text = "server_id=" + encodeURI(sid) + "&minutes=" + encodeURI(min) + "&days=" + encodeURI(days);
  96. $.ajax({
  97. type:"get",
  98. url:"/onlinetime?" + text,
  99. success:function (data) {
  100. // alert(data.status);
  101. if (data.status){
  102. window.location.href="/onlinetime?"+text;
  103. if (data.info){
  104. layer.msg(data.info,{icon:1,time:1000});
  105. }
  106. }else{
  107. if (data.info){
  108. alert(data.info);
  109. }else{
  110. window.location.href="/onlinetime?"+text;
  111. }
  112. }
  113. }
  114. });
  115. }
  116. function submitDownload () {
  117. var sid = document.getElementById("server_id").value;
  118. var min = document.getElementById("minutes").value;
  119. var days = document.getElementById("days").value;
  120. var text = "server_id=" + encodeURI(sid) + "&minutes=" + encodeURI(min) + "&days=" + encodeURI(days) + "&querydata=onlinetime";
  121. $.ajax({
  122. type:"get",
  123. url:"/onlinetime?" + text,
  124. success:function (data) {
  125. // alert(data.status);
  126. if (data.status){
  127. window.location.href="/onlinetime?"+text;
  128. if (data.info){
  129. layer.msg(data.info,{icon:1,time:1000});
  130. }
  131. }else{
  132. if (data.info){
  133. alert(data.info);
  134. }else{
  135. window.location.href="/onlinetime?"+text;
  136. }
  137. }
  138. }
  139. });
  140. }
  141. </script>
  142. </body>
  143. </html>