report/app/admin/view/layout/right.html

<input type="hidden" id="avatar"
       {if condition="!$user['avatar']"}
       value="/static/img/girl.gif"
       {else/}
       value="{$user.avatar}"
       {/if}
    />
<input type="hidden" id="name" value="{$user.name}">
<input type="hidden" id="roleName" value="{$user.rolename}">
<div id="page-wrapper" class="gray-bg dashbard-1">
    <div class="row border-bottom">
        <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
            <ul class="nav navbar-top-links navbar-right">
                <!--
                <li class="dropdown">
                    <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#" onmouseover="$('.dropdown-toggle').dropdown()">
                        <i class="fa fa-bell"></i>
                        @if(dbsx>0){
                            <span class="label label-danger">${dbsx}</span>
                        @}
                    </a>
                    @if(tool.isEmpty(tasks)){
                    @}else{
                        <ul class="dropdown-menu dropdown-alerts" style="height: 300px;overflow: auto">
                            @for(item in tasks){
                                <li>
                                    <a href="javascript:void(0)">
                                        <div>
                                            <i class="fa fa-envelope fa-fw"></i> ${item.description}
                                            <span class="pull-right text-muted small">${item.createTime}</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                            @}
                        </ul>
                    @}
                </li>-->
                <li class="dropdown hidden-xs">
                    <a class="dropdown-toggle" aria-expanded="false" style="font-weight: 900" onclick="javascript:lockScreen();">
                        <i class="fa fa-lock"></i> 锁屏
                    </a>
                </li>
                <li class="dropdown hidden-xs">
                    <a class="right-sidebar-toggle" aria-expanded="false">
                        <i class="fa fa-tasks"></i> 主题
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="row content-tabs">
        <button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i>
        </button>
        <nav class="page-tabs J_menuTabs">
            <div class="page-tabs-content">
                <a href="javascript:;" class="active J_menuTab" data-id="/common/notice">公告栏</a>
            </div>
        </nav>
        <div class="btn-group roll-nav roll-right">
            <button class="dropdown J_tabClose" data-toggle="dropdown">关闭操作<span class="caret"></span>
            </button>
            <ul role="menu" class="dropdown-menu dropdown-menu-right">
                <li class="J_tabShowActive"><a>定位当前选项卡</a>
                </li>
                <li class="divider"></li>
                <li class="J_tabCloseAll"><a>关闭全部选项卡</a>
                </li>
                <li class="J_tabCloseOther"><a>关闭其他选项卡</a>
                </li>
            </ul>
        </div>
        <a href="/index/auth/logout" class="roll-nav roll-right J_tabExit"><i class="fa fa fa-sign-out"></i> 退出</a>
    </div>

    <div class="row J_mainContent" id="content-main">
        <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="/common/notice" frameborder="0" data-id="/common/notice" seamless></iframe>
    </div>
</div>
<link href="/static/css/lockScreen.css" rel="stylesheet">
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/js/common/Feng.js"></script>
<style type="text/css">
    .dbsx{
        line-height: 12px;
        padding: 1px 3px;
        position: absolute;
        top: 8px;
        background-color: #1ab394;
        color: #FFFFFF;
        font-size: 3px;
    }
    .dropdown-menu .divider {
        height: 1px;
        overflow: hidden;
        background-color: #333;
    }
</style>
<script type="text/javascript">
    var task = null;
    var time = 10;
    window.onload=function (){
        var locked = sessionStorage.getItem('locked');
        if(locked)lockScreen();
        // setTimeLockScreen();
        initTime(time);
    }

    // 锁屏
    function lockScreen() {
        document.onkeydown = function () {
            var e = window.event || arguments[0];
            // 屏蔽 F12
            if (e.keyCode === 123) {
                return false;
                // 屏蔽 Ctrl+Shift+I
            } else if ((e.ctrlKey) && (e.shiftKey) && (e.keyCode === 73)) {
                return false;
                // 屏蔽 Shift+F10
            } else if ((e.shiftKey) && (e.keyCode === 121)) {
                return false;
            }
        };
        // 屏蔽右键单击
        document.oncontextmenu = function () {
            return false;
        };
        $('#locking').remove();
        if ($("#avatar").val()) {
            $('body').append('<div id="locking"><figure onclick="lockInput(this);"><img src="' +$("#avatar").val() + '" ></figure><h3>' + $("#name").val() + '</h3></div>');
        }
        setTimeout(function () {
            $('#locking').addClass('lock-ani');
        }, 200);
        sessionStorage.setItem('locked', true);
    }

    // 锁屏输入
    function lockInput(dom) {
        $(dom).find('img').unwrap();
        $('#locking').append('<div class="input-group">' +
            '                   <input class="form-control form-control-lg" id="lockPassword" style="color: #333;" type="password" placeholder="请输入登录密码解锁">' +
            '                   <div class="input-group-addon" style="background-color: #ccc;border: 1px solid #ccc;" onclick="unlockScreen();">' +
            '                       <span class="input-group-text">' +
            '                           <i class="fa fa-key " style="color: #555;font-weight: 900;"></i>' +
            '                       </span>' +
            '                   </div>' +
            '                  </div>');
        setTimeout(function () {
            $('#locking .input-group').addClass('lock-input-ani');
        }, 200);
        $('#locking input').focus();
    }

    // 解锁
    function unlockScreen() {
        var password = $('#lockPassword').val();
        var url = "/index/auth/valid_password";
        $.ajax({
            type: "post",
            url: url,
            dataType: "json",
            async: false,
            data: {"password":password},
            contentType : 'application/x-www-form-urlencoded ',
            success: function(data) {
                if(data.code==200){
                    $('#locking').fadeOut(300, function () {
                        $('#locking').remove();
                    });
                    sessionStorage.removeItem('locked');
                    document.onkeydown = function () {
                        var e = window.event || arguments[0];
                        // 屏蔽 F12
                        if (e.keyCode === 123) {
                            return true;
                            // 屏蔽 Ctrl+Shift+I
                        } else if ((e.ctrlKey) && (e.shiftKey) && (e.keyCode === 73)) {
                            return true;
                            // 屏蔽 Shift+F10
                        } else if ((e.shiftKey) && (e.keyCode === 121)) {
                            return true;
                        }
                    };
                    // 屏蔽右键单击
                    document.oncontextmenu = function () {
                        return true;
                    };
                }else{
                    if(data.status==1){
                        Feng.error(data.msg);
                    }else if(data.status==2){
                        window.location.href = "/index/auth/login";
                    }
                }
            },
            error: function(data) {
                window.location.href = "/index/auth/login";
            }
        });
    }

    function initTime(time) {
        var locked = sessionStorage.getItem('locked');
        var maxTime = 60*time;
        task = setInterval(function () {
            if(!locked){
                lockScreen();
            }
        },1000*maxTime);
        listenTime();
    }
    function listenTime() {
        var body = document.querySelector('html');
        body.addEventListener("click",restTime);
        body.addEventListener("keyup",restTime);
        body.addEventListener("keypress",restTime);
        body.addEventListener("keydown",restTime);
        body.addEventListener("mousemove",restTime);
        body.addEventListener("mousewheel",restTime);
    }
    function restTime(){
        if (task!=null){
            clearInterval(task);
        }
        initTime(time);
    }



    // function setTimeLockScreen(){
    //     var locked = sessionStorage.getItem('locked');
    //     (function($){
    //         funObj = {
    //             timeUserFun:'timeUserFun',
    //         }
    //         $[funObj.timeUserFun] = function(time){
    //             var time = time || 5;    // 默认参数
    //             var userTime = time*60;
    //             var testUser = "";
    //             var objTime = {
    //                 init:0,
    //                 time:function(){
    //                     objTime.init += 1;
    //                     if(objTime.init == userTime && !locked){
    //                         lockScreen();
    //                     }
    //                 },
    //                 eventFun:function(){
    //                     clearInterval(testUser);
    //                     objTime.init = 0;
    //                     testUser = setInterval(objTime.time,1000);
    //                 }
    //             }
    //             testUser = setInterval(objTime.time,1000);
    //             var body = document.querySelector('html');
    //             body.addEventListener("click",objTime.eventFun);
    //             body.addEventListener("keyup",objTime.eventFun);
    //             body.addEventListener("keypress",objTime.eventFun);
    //             body.addEventListener("keydown",objTime.eventFun);
    //             body.addEventListener("mousemove",objTime.eventFun);
    //             body.addEventListener("mousewheel",objTime.eventFun);
    //         }
    //     })(window);
    //     timeUserFun(5);
    // }
</script>