<%@ 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>PQS9000电能质量监测系统</title>
    <link rel="shortcut icon" href="/pqs9900/images/favicon.ico" type="image/x-icon"/>
    <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: 53px;
        }


        @-webkit-keyframes rotation {
            rom {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }


    </style>

</head>
<body class="bg-main">
<header id="page_header">
    <div class="logow fadeInLeft f20 fb fl mt-3" id="logo">
        <img src="/pqs9900/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-9000谐波监测系统v1.1.0</span>
        <div id="userDiv">
            <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>
            <span onclick="addTab('userhelp','帮助中心')" id="_help">
            <ul>
            <i class="fa fa-question-circle-o" style="margin-right: 3px;z-index: -10">
            </i>帮助
            </ul>
        	</span>
        </div>
        <ul class="f20 ml10 menu">
            <shiro:hasPermission name="/pqs9000/business/overview">
                <li>
                    <a href="javascript:void(0);" onclick="addTab('overview','概览')" class="menuone"><i
                            class="icon iconfont icon-shouye mr10"></i>概览 </a>
                </li>
            </shiro:hasPermission>
            <shiro:hasPermission name="/point">
                <li><a href="javascript:void(0);" class="menuone"><i class="icon iconfont icon-jiance mr10"></i>监测点</a>
                    <div class="menutwo">
                        <shiro:hasPermission name="/pqs9000/business/monitor">
                            <a href="javascript:void(0);" onclick="addTabs('monitor','在线监测点')">在线监测点 </a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/business/offlinemonitor">
                            <a href="javascript:void(0);" onclick="addTab('offlinemonitor','离线监测点')">离线监测点 </a>
                        </shiro:hasPermission>
                    </div>
                </li>
            </shiro:hasPermission>
            <shiro:hasPermission name="/area">
                <li><a href="javascript:void(0);" class="menuone"><i class="icon iconfont icon-ditu mr10"></i>区域</a>
                    <div class="menutwo">
                        <shiro:hasPermission name="/pqs9000/area/quality">
                            <a href="javascript:void(0)" onclick="addTab('/pqs9000/area/quality','电能质量评估')">电能质量评估</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/area/steady">
                            <a href="javascript:void(0)" onclick="addTab('/pqs9000/area/steady','指标合格率统计')">指标合格率统计</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/area/steadystat">
                            <a href="javascript:void(0)" onclick="addTab('/pqs9000/area/steadystat','稳态指标超标占比')">稳态指标超标占比</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/area/integrality">
                            <a href="javascript:void(0)"
                               onclick="addTab('/pqs9000/area/integrality','数据完整性统计')">数据完整性统计</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/area/status">
                            <a href="javascript:void(0)" onclick="addTab('/pqs9000/area/status','终端状态统计')">终端状态统计</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/area/harmonicrate">
                            <a href="javascript:void(0)" onclick="addTab('/pqs9000/area/harmonicrate','谐波总畸变率统计')">谐波总畸变率统计</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/area/tomonitorscope">
                            <a href="javascript:void(0)" onclick="addTab('/pqs9000/business/tomonitorscope','监测点信息图')">监测点信息图</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/area/vdlist">
                            <a href="javascript:void(0)" onclick="addTab('/pqs9000/area/vdlist','暂态事件列表')">暂态事件列表</a>
                        </shiro:hasPermission>
                    </div>
                </li>
            </shiro:hasPermission>
            <shiro:hasPermission name="/advanced">
                <li><a href="javascript:void(0);" class="menuone"><i class="icon iconfont icon-tongji mr10"></i>详细分析</a>
                    <div class="menutwo">
                        <shiro:hasPermission name="/pqs9000/business/norm">
                            <a href="javascript:void(0)" onclick="addTab('norm','稳态趋势对比')">稳态趋势对比</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/business/normlimit">
                            <a href="javascript:void(0)" onclick="addTab('normlimit','稳态指标统计')">稳态指标统计</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/business/abnormlimit">
                            <a href="javascript:void(0)" onclick="addTab('abnormlimit','异常数据统计')">异常数据统计</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/business/harmonic">
                            <a href="javascript:void(0)" onclick="addTab('harmonic','历史谐波频谱')">历史谐波频谱</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/responsibility/responsibilitylist">
                            <a href="javascript:void(0)"
                               onclick="addTab('/pqs9000/responsibility/responsibilitylist','谐波责任划分')">谐波责任划分</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/responsibility/areaovernoraml">
                            <a href="javascript:void(0)"
                               onclick="addTab('/pqs9000/responsibility/areaovernoraml','区域稳态指标超标分类')">区域稳态指标超标</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/responsibility/warningsubstation">
                            <a href="javascript:void(0)"
                               onclick="addTab('/pqs9000/responsibility/warningsubstation','告警变电站明细')">告警变电站明细</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/responsibility/overlimitmonitor">
                            <a href="javascript:void(0)"
                               onclick="addTab('/pqs9000/responsibility/overlimitmonitor','监测点稳态超标')">监测点稳态超标</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/business/platenormal">
                            <a href="javascript:void(0)" onclick="addTab('platenormal','电度数据展示')">电度数据展示</a>
                        </shiro:hasPermission>
                    </div>
                </li>
            </shiro:hasPermission>
            <shiro:hasPermission name="/run">
                <li><a href="javascript:void(0);" class="menuone"><i class="icon iconfont icon-caidan mr10"></i>运行管理</a>
                    <div class="menutwo">

                        <shiro:hasPermission name="/pqs9000/area/ledger">
                            <a href="javascript:void(0)" onclick="addTab('/pqs9000/area/ledger','终端台账统计')">终端台账统计</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/business/runtime">
                            <a href="javascript:void(0)" onclick="addTab('runtime','终端运行列表')">终端运行列表</a>
                        </shiro:hasPermission>
<%--                        <shiro:hasPermission name="/pqs9000/business/terminallog">--%>
<%--                            <a href="javascript:void(0)" onclick="addTab('terminallog','终端状态更新列表')">终端状态更新列表</a>--%>
<%--                        </shiro:hasPermission>--%>
                       <%-- <shiro:hasPermission name="/pqs9000/business/lineledger">--%>
                            <a href="javascript:void(0)" onclick="addTab('/pqs9000/business/lineledger','监测点台账信息')">监测点台账信息</a>
                        <%--</shiro:hasPermission>--%>
                        <shiro:hasPermission name="/pqs9000/area/steadytable">
                            <a href="javascript:void(0)"
                               onclick="addTab('/pqs9000/area/steadytable','指标合格率列表')">指标合格率列表</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/area/integralitytable">
                            <a href="javascript:void(0)" onclick="addTab('/pqs9000/area/integralitytable','数据完整性列表')">数据完整性列表</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/area/onlineratetable">
                            <a href="javascript:void(0)"
                               onclick="addTab('/pqs9000/area/onlineratetable','终端在线率列表')">终端在线率列表</a>
                        </shiro:hasPermission>
                    </div>
                </li>
            </shiro:hasPermission>
            <shiro:hasPermission name="/report">
                <li><a href="javascript:void(0);" class="menuone"><i class="fa fa-file-excel-o mr10"></i>稳态报表</a>
                    <div class="menutwo">
                        <shiro:hasPermission name="/pqs9000/business/excel">
                            <a href="javascript:void(0)" onclick="addTab('excel','Excel报表')">Excel报表</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/business/expmodel">
                            <a href="javascript:void(0)" onclick="addTab('expmodel','Word报告')">Word报告</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/business/percent">
                            <a href="javascript:void(0)" onclick="addTab('percent','合格率报告')">合格率报告</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/business/fpyreport">
                            <a href="javascript:void(0)" onclick="addTab('fpyreport','合格率报告')">合格率报告</a>
                        </shiro:hasPermission>
                        <shiro:hasPermission name="/pqs9000/business/platereports">
                            <a href="javascript:void(0)" onclick="addTab('platereports','电度报告')">电度报告</a>
                        </shiro:hasPermission>
                            <%--<a href="javascript:void(0)" onclick="addTab('report/word','Word报表')">Word报告</a>--%>
                    </div>
                </li>
            </shiro:hasPermission>
            <shiro:hasPermission name="/pqs9000/business/sourcemanage">
                <li><a href="javascript:void(0);" onclick="addTab('sourcemanage','资源管理')" class="menuone"><i
                        class="fa fa-cloud-download" aria-hidden="true"></i>资源管理</a>
                </li>
            </shiro:hasPermission>
        </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="/pqs9000/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 == 'pqs9300'}">
                                    <img class="dz" item="${item.item}" src="/pqs9000/images/switchSystem/pqs9300.png"/>
                                </c:if>
                                <c:if test="${item.item == 'pqs9200'}">
                                    <img class="dz" item="${item.item}" src="/pqs9000/images/switchSystem/pqs9200.png"/>
                                </c:if>
                            </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</c:if>
</div>
<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>
