box
/
box-gm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<!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>
    时间颗粒度(分钟):
    <input id="minutes" type="text" name="时间颗粒度" value={{.Minutes}}>
    <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>
    <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: '时(每30秒)'
          },
          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}}
      for ( var i= 0; i < list.length; i++){
        series.push({"name":list[i].Name, "data":eval(list[i].Data)})
      }

      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:"/onlinetime?" + text,
          success:function (data) {
            // alert(data.status);
            if (data.status){
              window.location.href="/onlinetime?"+text;
            }else{
              if (data.info){
                alert(data.info);
              }else{
                window.location.href="/onlinetime?"+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=onlinetime";
        
        $.ajax({
          type:"get",
          url:"/onlinetime?" + text,
          success:function (data) {
            // alert(data.status);
            if (data.status){
              window.location.href="/onlinetime?"+text;
            }else{
              if (data.info){
                alert(data.info);
              }else{
                window.location.href="/onlinetime?"+text;
              }
            }
          }
        });
      }
    </script>
    </body>
</html>