﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>PQS9300技术监督管理系统</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/animate/animate.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/jquery/jquery-ui.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/iconfont/iconfont.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/jquery/jquery.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/switchCss.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: "微软雅黑";
        }

        .scroll li {
            width: 200px;
            float: left;
            line-height: 15px;
            text-align: center;
        }

        .layui-layer-setwin .layui-layer-close2 {
            position: absolute;
            right: -14px;
            top: -14px;
            width: 30px;
            height: 30px;
            margin-left: 0;
            background-position: -149px -31px;
        }

        #swapSystem {
            color: #FFF;
            cursor: pointer;
        }

        .subSystem {
            /*display: block !important;*/
            top: 18px !important;
            opacity: 1 !important;
            left: -70px !important;
            padding: 5px;
            border: 1px solid;
            border-radius: 3px !important;
            width: 140px;
        }

        .subSystem a {
            color: #fff;
            font-size: 12px !important;
            display: block;
            height: 20px !important;
            line-height: 20px !important;
            width: 130px !important;
            text-align: center;
            /*border-bottom: 1 !important;*/
        }

        .small_traggle {
            width: 0;
            height: 0;
            border: 8px solid;
            border-color: transparent transparent #fff;
            position: relative;
            top: -12px;
            left: 25px;
            display: none;
        }

        .switchSystem {
            margin-right: 0px !important;
            right: 10px;
        }

        #userDiv {
            position: fixed;
            right: 10px;
            top: 10px;
            width: 110px;
        }
    </style>

</head>
<body class="bg-main">
<header id="page_header">
    <div class="logow fadeInLeft f20 fb fl mt-3" id="logo">
        <img src="\pqs9300\images\logo.png" style="height: 68px"/>
    </div>
    <div class="fl top-menu">
        <span class="ml10 disinlineb mt-6" id="bigTitle">电能质量监测系统</span>
        <span class="f14" id="smallTitle">PQS-9300技术监督管理v1.1.0</span>
        <div id="userDiv" style="width: 70px">
            <c:if test="${false}">
            <span id="swapSystem">
                <ul>
                 <li class="switchSystem">
                      <i class="fa fa-exchange">
                        </i>
                        <a href="javascript:void(0)" class="menuone switchSystem">模块切换</a>
                     <div class="small_traggle"></div>
                        <div class="menutwo subSystem">
                            <c:forEach items="${webItems }" var="item">
                                <a href="javascript:void(0)" item="${item.item}">${item.name}</a>
                            </c:forEach>
                        </div>
                    </li>
                </ul>
             </span>
            </c:if>
        </div>
        <ul class="f20 ml10 menu">
            <li>
                <a href="javascript:void(0);" onclick="addTab('index','首页')" class="menuone"><i
                        class="icon iconfont icon-shouye mr10"></i>首页 </a>
            </li>
            <li><a href="javascript:void(0);" class="menuone"><i class="icon iconfont icon-tongji mr10"></i>技术监督管理</a>
                <div class="menutwo">
                    <a href="javascript:void(0);" onclick="addTab('technical','技术监督管理')">技术监督管理</a>
                </div>
            </li>
            <li><a href="javascript:void(0);" class="menuone"><i class="icon iconfont icon-caidan mr10"></i>策略管理</a>
                <div class="menutwo">
                    <a href="javascript:void(0);" onclick="addTab('earlywaring','预警单生成策略')">预警单生成策略</a>
                    <a href="javascript:void(0);" onclick="addTab('alarmwarning','告警单生成策略')">告警单生成策略</a>
                </div>
            </li>

        </ul>
        <ul class="user-checkout pa" style="right: 5px;z-index: -10">
            <li style="margin-right: 0px" id="selectUserUpdatePass">
                <input id="user_name" type='hidden' value=<shiro:principal property="loginName"/>/>
                <input id="user_index" type='hidden' value=<shiro:principal property="userIndex"/>/>
                <i class="fa fa-user" style="color: #fff;font-size: 12px"></i>
                <shiro:authenticated>
                    <shiro:principal property="name"/>
                </shiro:authenticated>&nbsp;
            </li>
            <li id="destory"><i class="fa fa-power-off" style="margin-right: 5px"></i>注销</li>
        </ul>
    </div>
</header>
<div class="footer-copy clearfix">
    <div class="fr f13"></div>
</div>
<div id="rightContent" style="position: absolute; left: 270px; right: 20px; top: 80px;">
    <div id="tabs" style="width: 100%; height: 100%;">
        <ul>
        </ul>
    </div>
</div>

<c:if test="${displayFlag eq true}">
    <img class="switchImg" src="/pqs9200/images/switchSystem/switch.png" onclick="openDiv('div1')">
    <div id="div1" class="opendiv">
        <div class="switchTitle">系统切换 <p class="closeX" onclick="tkClose()">x</p></div>
        <c:choose>
        <c:when test="${fn:length(webItems) == 2}">
        <div id="switchDiv" class="fdz2">
            </c:when>
            <c:otherwise>
            <div id="switchDiv" class="fdz1">
                </c:otherwise>
                </c:choose>
                <div class="container-fluid">
                    <div class="row">
                        <c:forEach items="${webItems}" var="item">
                        <c:choose>
                        <c:when test="${fn:length(webItems) == 2}">
                        <div class="col-md-6" style="text-align: center">
                            </c:when>
                            <c:otherwise>
                            <div class="col-md-12" style="text-align: center">
                                </c:otherwise>
                                </c:choose>
                                <c:if test="${item.item == 'pqs9000'}">
                                    <img class="dz" item="${item.item}" src="/pqs9200/images/switchSystem/pqs9000.png"/>
                                </c:if>
                                <c:if test="${item.item == 'pqs9200'}">
                                    <img class="dz" item="${item.item}" src="/pqs9200/images/switchSystem/pqs9200.png"/>
                                </c:if>
                            </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</c:if>
<div id="bgdiv"></div>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/jquery/jquery.dataTables.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap-table/dataTables.bootstrap.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/jquery/jquery.contextMenu.js"></script>
<script src="${ctx}/js/plugin/jquery/jquery.cleverTabs.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/main.js"></script>
<script>
    $("#swapSystem").on('mouseover', function () {
        $(".small_traggle").css("display", "block")
    })
    $("#swapSystem").on('mouseleave', function () {
        $(".small_traggle").css("display", "none")
    })

    $("#switchDiv img").on("click", function () {
        window.location.href = "/sso/user/judgeLogin?item=" + $(this).attr("item");
    })


    function getDiv(id) {
        return document.getElementById(id);
    }

    function openDiv(obj) {
        if (!getDiv(obj)) return false;
        var b = getDiv('bgdiv');
        var d = getDiv(obj);
        b.style.visibility = 'visible';
        d.style.visibility = 'visible';
        var wd = window.top.document.documentElement.clientWidth - d.offsetWidth;
        var ht = window.top.document.documentElement.clientHeight - d.offsetHeight;
        d.style.left = (wd / 2) + 'px';//横向居中
        d.style.top = (ht / 2) + 'px';//垂直居中
        b.onclick = function () {
            closeDiv(obj);
            window.onresize = null;
        };  //点击背景关闭弹出层
    }

    //关闭弹出层
    function closeDiv(obj) {
        var b = getDiv('bgdiv');
        var d = getDiv(obj);
        b.style.visibility = 'hidden';
        d.style.visibility = 'hidden';
    }

    function tkClose() {
        var tk = document.getElementById("div1");
        var tk2 = document.getElementById("bgdiv");
        tk.style.visibility = 'hidden';
        tk2.style.visibility = 'hidden';
    }

</script>
</body>
</html>
