paynum.tpl 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>欢迎页面-X-admin2.0</title>
  6. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  7. <script src="http://code.highcharts.com/highcharts.js"></script>
  8. </head>
  9. <body>
  10. 指定服务器:
  11. <input id="server_id" type="text" name="服务器ID" value={{.Server_id}}>
  12. <br>
  13. <br>
  14. 时间颗粒度(分钟):
  15. <input id="minutes" type="text" name="时间颗粒度" value={{.Minutes}}>
  16. <br>
  17. <br>
  18. 过往天数:
  19. <input id="days" type="text" name="天数" value={{.Days}}>
  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. <br><br>
  25. <br><br>
  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: 'Source: '
  37. };
  38. var xAxis = {
  39. title: {
  40. text: '时间'
  41. },
  42. tickPixelInterval: 1,
  43. categories: {{.Categories}}
  44. };
  45. var yAxis = {
  46. title: {
  47. text: '人数'
  48. },
  49. plotLines: [{
  50. value: 0,
  51. width: 1,
  52. color: '#808080'
  53. }]
  54. };
  55. var tooltip = {
  56. valueSuffix: '人'
  57. }
  58. var legend = {
  59. layout: 'vertical',
  60. align: 'right',
  61. verticalAlign: 'middle',
  62. borderWidth: 0
  63. };
  64. var series = [
  65. ];
  66. var list = {{.Series}}
  67. for ( var i= 0; i < list.length; i++){
  68. series.push({"name":list[i].Name, "data":eval(list[i].Data)})
  69. }
  70. var json = {};
  71. json.title = title;
  72. json.subtitle = subtitle;
  73. json.xAxis = xAxis;
  74. json.yAxis = yAxis;
  75. json.tooltip = tooltip;
  76. json.legend = legend;
  77. json.series = series;
  78. json.chart = chart;
  79. $('#container').highcharts(json);
  80. });
  81. function submitUpdate () {
  82. var sid = document.getElementById("server_id").value;
  83. var min = document.getElementById("minutes").value;
  84. var days = document.getElementById("days").value;
  85. var text = "server_id=" + encodeURI(sid) + "&minutes=" + encodeURI(min) + "&days=" + encodeURI(days) ;
  86. $.ajax({
  87. type:"get",
  88. url:"/paynum?" + text,
  89. success:function (data) {
  90. // alert(data.status);
  91. if (data.status){
  92. window.location.href="/paynum?"+text;
  93. }else{
  94. if (data.info){
  95. alert(data.info);
  96. }else{
  97. window.location.href="/paynum?"+text;
  98. }
  99. }
  100. }
  101. });
  102. }
  103. function submitDownload () {
  104. var sid = document.getElementById("server_id").value;
  105. var min = document.getElementById("minutes").value;
  106. var days = document.getElementById("days").value;
  107. var text = "server_id=" + encodeURI(sid) + "&minutes=" + encodeURI(min) + "&days=" + encodeURI(days) + "&querydata=paynum";
  108. $.ajax({
  109. type:"get",
  110. url:"/paynum?" + text,
  111. success:function (data) {
  112. // alert(data.status);
  113. if (data.status){
  114. window.location.href="/paynum?"+text;
  115. }else{
  116. if (data.info){
  117. alert(data.info);
  118. }else{
  119. window.location.href="/paynum?"+text;
  120. }
  121. }
  122. }
  123. });
  124. }
  125. </script>
  126. </body>
  127. </html>