<%@ Page Language="C#" CodeBehind="Default.aspx.cs" Inherits="SmartLogonServer._Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8">
    <link rel="shortcut icon" href="Images/favicon.ico" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>智能卡登录系统</title>
    <!--Bootstrap-->
    <link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Font Awesome -->
    <link href="Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <!--[if IE 7]>
    <link href="/Content/font-awesome/css/font-awesome-ie7.min.css" rel="stylesheet" />
    <![endif]-->
    <link href="Content/sidebar-menu/sidebar-menu.css" rel="stylesheet" />
    <link href="Content/ace/css/ace-rtl.min.css" rel="stylesheet" />
    <link href="Content/ace/css/ace-skins.min.css" rel="stylesheet" />
    <link href="Content/toastr/toastr.min.css" rel="stylesheet" />

    <script src="Content/jquery-1.9.1.min.js"></script>
    <script src="Content/bootstrap/js/bootstrap.min.js"></script>
    <script src="Content/sidebar-menu/sidebar-menu.js"></script>
    <script src="Content/bootstrap/js/bootstrap-tab.js"></script>
    <script src="Content/chart.umd.min.js"></script>
    <!--[if lt IE 9]>
    <script src="/Scripts/html5shiv.js"></script>
    <script src="/Scripts/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        html {
            overflow-x:hidden;
            overflow-y: hidden; 
        }
        body {
            font-size: 12px;
            margin-right: -15px;
        }

        .nav > li > a {
            padding: 5px 10px;
        }

        .tab-content {
            padding-top: 3px;
        }
         /*.tab-content .tab-pane {
            top: 0px;
            left: 0px;
            right: inherit;
            bottom: inherit;
            position: absolute;
        }*/
    </style>
</head>
<body>
    <div class="navbar navbar-default" id="navbar">
       
            <ul class="navbar-header pull-left">
               
                    <a class="fa fa-list-ul menu-toggler" id="menu-toggler" href="#">
                        <i class="icon-reorder" style="font-size:20px;margin-left:-18px;margin-top:8px;display:flex;"></i>
                    </a>
               
             <a href="#" class="navbar-brand">
                    <small>
                       
                        智能卡登录通用网络版管理系统
                    </small>
              </a>
                <a href="https://www.youwokeji.com.cn" class="navbar-text" >
                    
                       
                        北京友我科技有限公司
                    
              </a>
                
            </ul>
        <div class="navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">
             
                <li class="light-blue" style="height:50px;margin-right:15px;">
                   
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="Content/ace/avatars/avatar2.png" alt="Admin's Photo" />
                        <span class="user-info">
                            <small>欢迎光临,</small>
                            <%=Session["UserName"] %>
                        </span>

                        <i class="icon-caret-down"></i>
                    </a>
                    <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">

                        <li class="divider"></li>
                        <li>
                            <a href="Logout.aspx">
                                <i class="icon-off"></i>
                                退出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        </div>

    <div class="main-container" id="main-container">
        <div class="main-container-inner">
           
            <div class="sidebar" id="sidebar">
                 <div class="sidebar-collapse" id="sidebar-collapse" style="display:none;">
                    <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
                </div>
                <ul class="nav nav-list" id="menu"></ul>
                <div  class="navbar-fixed-bottom"><p>
                    &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.youwokeji.com.cn">北京友我科技有限公司</a><br/>&nbsp;&nbsp;&nbsp;&nbsp;&copy; 2023–2024<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;V3.2<br/>
                    </p></div>
             
            </div>
            <div class="main-content">
                <div class="page-content">
                    <div class="row">
                        <div class="col-xs-12" style="padding-left:5px;">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="active"><a href="#Index" role="tab" data-toggle="tab">系统首页</a></li>
                            </ul>
                            <div class="tab-content" >
                                <div role="tabpanel" class="tab-pane active" id="Index" style="height:100%">
					<h2>欢迎进入智能卡登录通用网络版管理系统</h2>
                                    <div class="hero-unit">
				<h1>
					<%=Session["UserName"] %>
				</h1>
				<h3>
					<%=groupdisp %>
				</h3>
<div>
<canvas id="canvas" width="600" height="300"></canvas>
</div>
			</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
      
    </div>
    <script type="text/javascript">
        //toastr.options.positionClass = 'toast-bottom-right';
       
        $(function () {
            $('#menu').sidebarMenu({
                data: [<%=usermenu%>]
               
            });

            $('ul.submenu').attr('style','display: block;');

            $("#menu-toggler").click(function () {
                var children = $("#sidebar-collapse").children("i");
                if ($(children).hasClass("icon-double-angle-left")) {
                    $(children).removeClass("icon-double-angle-left").addClass("icon-double-angle-right");
                    $("#sidebar").attr("class", "sidebar menu-min display");
                    
                }
                else {
                    $(children).removeClass("icon-double-angle-right").addClass("icon-double-angle-left");
                    $("#sidebar").attr("class", "sidebar display");
                    
                }
            });
        

            var countdata = [];
            var thischart;

            //图表的结构配置
            var config = {
                type: 'bar',
                data: {
                    labels: ["计算机", "智能卡", "已同步", "未同步","待删除"],//X轴显示的标签 
                    datasets: [{//数据格式 多少人每个人什么标签 图例 样式是什么json格式
                        label: "数量",//图例 每个人的曲线名字
                        // backgroundColor: window.chartColors.red,//代表这个人的数据夜色
                        // borderColor: window.chartColors.red,
                        data: countdata,
                        backgroundColor: [
              'rgba(0, 0, 255, 0.8)',
              'rgba(0, 255, 255, 0.8)',
              'rgba(255, 205, 86, 0.8)',
              'rgba(255, 0, 0, 0.8)',
              'rgba(0, 0, 0, 0.8)'
                        ],
                        fill: false,//是否填充 是否用背景色填充表格
                    }]
                },
                options: {//表格样式
                    responsive: false,//是否自适应
                    title:{
                        display:false,//是否展示标题
                        text:'数量统计'//图表标题
                    },
                    tooltips: {//工具提示
                        mode: 'index',
                        intersect: false,
                    },
                    hover: {//鼠标悬停的时候的数据展示
                        mode: 'nearest',
                        intersect: true
                    }
                }
            };

            
            function updatechart(chart)
            {
                
                $.ajax({
                    url: "GetCounts.ashx",
                    type: 'GET',
                    data: {
                        'mode': 'all'
                    },
                    async: true,
                    datatype: 'JSON',
                    success: function (data) {
                        if (data) {
                            countdata[0] = data.computer;
                            countdata[1] = data.card;
                            countdata[2] = data.trans;
                            countdata[3] = data.waittrans;
                            countdata[4] = data.waitdelete;
                            
                            //chart.data.datasets.forEach(ds=>ds.data.push(countdata));
                            //chart.data.datasets[0].data = countdata;
                            thischart.update();
                        }
                    },
                    error: function () {
                       
                    }
                });
            }

            window.onload = function () {
                var ctx = document.getElementById("canvas").getContext("2d");
                thischart = new Chart(ctx, config);

                updatechart(thischart);
            }

            setInterval(updatechart,5000);
        });
    </script>
    <script src="Content/ace/js/ace-extra.min.js"></script>
    <script src="Content/ace/js/ace.min.js"></script>
</body>
</html>