box
/
box-gm


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>欢迎页面-X-admin2.0</title>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
    </head>
    <body>
    指定服务器:
    <input id="server_id" type="text" name="服务器ID" value={{.Server_id}}>
    <br>
    <br>
    时间颗粒度(分钟):
    <input id="minutes" type="text" name="时间颗粒度" value={{.Minutes}}>
    <br>
    <br>
    过往天数:
    <input id="days" type="text" name="天数" value={{.Days}}>
    <br>
    <br>
    <input class="layui-btn" type="button" onclick="submitUpdate()" value=刷新>
        
    <input class="layui-btn" type="button" onclick="submitDownload()" value=下载>
    <br><br>
    

    <div class="layui-row layui-col-space20">
    <div class="layui-col-md4">
        <!-- 给具体的内容设置背景颜色 -->
        <div style="background-color: powderblue">
          <h1 id="today_regist" style = "text-align:center;" value = "">
          <span id ="cur_online" style="font-size:20px;"> 当前在线 : 0 </span>
          </h1>
        </div>
    </div>

    </div>

    <br><br>
    <div id="container" style="width: 1600px; height: 800px; margin: 0 auto"></div>
    <script language="JavaScript">
    $(document).ready(function() {
      var chart = {
        type: 'spline'
      };
      var title = {
          text: '在线人数分布'   
      };
      var subtitle = {
          text: 'Source: '
      };
      var xAxis = {
          title: {
            text: '时间'
          },
          tickPixelInterval: 1,
          categories: {{.Categories}}
      };
      var yAxis = {
          title: {
            text: '人数'
          },
          plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
          }]
      };   

      var tooltip = {
        valueSuffix: '人'
      }

      var legend = {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'middle',
          borderWidth: 0
      };

      var series =  [
      ];
      var list = {{.Series}}

      var onlineCount = {{.Online_count}};

      for ( var i= 0; i < list.length; i++){

        series.push({"name":list[i].Name, "data":eval(list[i].Data)})
      }
      
      updateCurrentOnline(onlineCount);

      var json = {};

      json.title = title;
      json.subtitle = subtitle;
      json.xAxis = xAxis;
      json.yAxis = yAxis;
      json.tooltip = tooltip;
      json.legend = legend;
      json.series = series;
      json.chart = chart;

      $('#container').highcharts(json);

    });
    
      function submitUpdate () {
        var sid = document.getElementById("server_id").value;
        var min = document.getElementById("minutes").value;
        var days = document.getElementById("days").value;
        var text = "server_id=" + encodeURI(sid)  + "&minutes=" + encodeURI(min) + "&days=" + encodeURI(days) ;
        
        $.ajax({
          type:"get",
          url:"/rtonline?" + text,
          success:function (data) {
            // alert(data.status);
            if (data.status){
              window.location.href="/rtonline?"+text;
            }else{
              if (data.info){
                alert(data.info);
              }else{
                window.location.href="/rtonline?"+text;
              }
            }
          }
        });
      }
      function submitDownload () {
        var sid = document.getElementById("server_id").value;
        var min = document.getElementById("minutes").value;
        var days = document.getElementById("days").value;
        var text = "server_id=" + encodeURI(sid)  + "&minutes=" + encodeURI(min) + "&days=" + encodeURI(days)+ "&querydata=rtonline";
        
        $.ajax({
          type:"get",
          url:"/rtonline?" + text,
          success:function (data) {
            // alert(data.status);
            if (data.status){
              window.location.href="/rtonline?"+text;
            }else{
              if (data.info){
                alert(data.info);
              }else{
                window.location.href="/rtonline?"+text;
              }
            }
          }
        });
      }

      function updateCurrentOnline (count) {
        document.getElementById('cur_online').innerText="当前在线: "+count;
      }
    </script>
    </body>
</html>