index.jsp 6.73 KB
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";

    String page_type = request.getParameter("page_type");
    String page_url = request.getParameter("page_url");
    if(page_type==null)
        page_type="";
    if(page_url==null)
        page_url="";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap-datetimepicker.css"/>
    <link href="<%=basePath %>js/bootstrap-plugin/css/bootstrap.table.css" rel="stylesheet" media="screen"/>
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/fullcalendar.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css" class="skin-color"/>
    <link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
    <link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
	<link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/yoho.css"/>
    <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>/js/bootstrap.min.js"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/jstree/jstree.min.js"></script>
    <script src="<%=basePath %>js/jquery.toaster.js"></script>
    
    
    <script>
        var contextPath = '<%=basePath %>';
    </script>

    <title>YOHO!运维</title>
</head>
<body>

<!-- 头部 -->
<div id="head">
    <h5 style="color: #E0EEE0;font-style:oblique;font-weight:900;font-size:200%;margin-left: 45px;margin-top: 40px;">
        YOHO</h5>
</div>

<!-- 左侧菜单项 -->
<div id="sidebar">
    <ul>
        <li class=""><a href="#"><i class="icon icon-home"></i> <span>Dashboard</span></a></li>
        <li class="" id="mobjectInfo"><a href="?page_type=mobjectInfo"><i class="icon icon-th"></i><span>监控对象</span></a>
        </li>
        <li class="" id="hostGroupList"><a href="?page_type=hostGroupList"><i class="icon icon-th"></i><span>标签管理</span></a>
        </li>
        <li class="" id="hostInfoList"><a href="?page_type=hostInfoList"><i class="icon icon-th"></i> <span>主机管理</span></a>
        </li>
        <li class="" id="javaApi"><a href="?page_type=javaApi"><i class="icon icon-th"></i><span>JAVA服务信息</span></a>
        </li>
        <li class="" id="zkInfo"><a href="?page_type=zkInfo"><i class="icon icon-th"></i><span>ZK监控</span></a>
        </li>
        <li class="" id="redisInfo"><a href="?page_type=redisInfo"><i class="icon icon-th"></i><span>Redis监控</span></a>
        </li>
    </ul>
</div>
<!-- 右侧具体内容 -->
<div id="content">

</div>

<script type="text/javascript">
    var pages = {
        "mobjectInfo": 'jsp/mobject/mobjectInfo.jsp',
        "hostGroupList": 'jsp/host/hostGroupList.jsp',
        "hostInfoList": 'jsp/host/hostInfoList.jsp',
        "javaApi": 'jsp/javaapi/javaApi.jsp',
        "zkInfo": '/jsp/zkInfo/zkInfoList.jsp',
        "redisInfo": '/jsp/redisInfo/redisInfoList.jsp'
    }
    var page_type = "<%=page_type %>";
    var page_url = "<%=page_url %>";
    $(function () {
        loadPage();
    });

    var loadPage = function () {

        //直接根据url跳转
        if (page_url != undefined&&page_url != "") {
            $("#content").load(contextPath + page_url);
            if (page_type != undefined&&page_type != "") {
                console.log("load page : ", page_type);
                $("#" + page_type).addClass("active").siblings().removeClass("active");
            }
            return;
        }

        //根据菜单跳转
        var path = pages[page_type];
        if (path == undefined) {
            return;
        }
        console.log("load page : ", page_type);
        $("#" + page_type).addClass("active").siblings().removeClass("active");
        $("#content").load(contextPath + pages[page_type]);
    }


    function localAlert(title, message) {
        var dialog = $("<div>").appendTo($("body"));
        dialog.dialog({
            title: title,
            backdrop: "static",
            content: message,
            buttons: [{
                text: "确定",
                className: "btn-danger",
                onclick: function () {
                    $(dialog).dialog("hide");
                }
            }]
        });
    }
</script>
</body>
</html>