<%@ page language="java" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!doctype html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>苏州太湖新城管廊综合信息管理</title>
    <link type="text/css" rel="stylesheet" href="bootstrap/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
    <h3>
        苏州太湖新城管廊综合信息管理
    </h3>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 left-nav">
            <ul class="list-group">
                <li class="list-group-item level-1">管廊综合信息管理</li>
                <li class="list-group-item level-2 selected" id="power">配电柜<img alt="" src="images/left.png" class="icon-right"></li>
                <li class="list-group-item level-2" id="light">照明<img alt="" src="images/left.png" class="icon-right"></li>
                <li class="list-group-item level-2" id="fan">风机<img alt="" src="images/left.png" class="icon-right"></li>
                <li class="list-group-item level-2" id="well">井盖<img alt="" src="images/left.png" class="icon-right"></li>
                <li class="list-group-item level-2" id="pump">水泵<img alt="" src="images/left.png" class="icon-right"></li>
                <li class="list-group-item level-2" id="water">爆管液位<img alt="" src="images/left.png" class="icon-right"></li>
                <li class="list-group-item level-2" id="ch4">甲烷<img alt="" src="images/left.png" class="icon-right"></li>
                <li class="list-group-item level-2" id="hs">硫化氢<img alt="" src="images/left.png" class="icon-right"></li>
                <li class="list-group-item level-2" id="temp">温湿度<img alt="" src="images/left.png" class="icon-right"></li>
                <li class="list-group-item level-2" id="o2">氧气<img alt="" src="images/left.png" class="icon-right"></li>
                <li class="list-group-item level-2" id="co">一氧化碳<img alt="" src="images/left.png" class="icon-right"></li>
                <li class="list-group-item level-2" id="alarm">对射<img alt="" src="images/left.png" class="icon-right"></li>
            </ul>
        </div>

        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 right-content">
            <iframe id="content" name="content" class="content-frame" src="device/power.jsp"></iframe>
        </div>
    </div>
</div>

<footer class="footer">版权所有：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;技术支持：</footer>

<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
<script type="text/javascript">

    $(document).ready(function() {

        $("#power").click(function() {
            $("#content").attr("src", "device/power.jsp");
        });

        // 初始化时右侧的三角图标隐藏
        $(".icon-right").hide();
        $(".icon-right").eq(0).show();

        // 为点中的链接添加选中样式，其他的链接去除样式
        $(".level-2").click(function() {
            $("#content").attr("src", "device/" + $(this).attr("id") + ".jsp");

            $(".level-2, selected").removeClass("selected");
            $(".level-2, selected").children(".icon-right").hide();

            $(this).addClass("selected");
            $(this).children(".icon-right").show();
        });
    });
</script>
</body>
</html>