<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>概览页面</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <%-- 地图切换 --%>
    <link rel="stylesheet" href="${ctx}/css/plugin/slide/reset.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/slide/slide.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/css/plugin/map/SearchInfoWindow_min.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/css/plugin/map/bmap.css">
    <link rel="stylesheet" href="${ctx}/js/plugin/layerui/css/layui.css">
    <link rel="stylesheet" href="${ctx}/jspCSS/overview/glindex.css">
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
            background-color: white;
        }

        #rightContent label {
            max-width: none;
        }

        .dg-sub b.red {
            color: #98af9f;
            border-bottom: solid 1px #98af9f;
            font-weight: bold;
        }

        .dg-sub b {
            padding: 2px 5px;
            color: #666;
            font-weight: normal;
        }

        li {
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
            background: white;
        }
    </style>
    <script type="text/javascript">
    </script>
</head>
<body>
<div class="banner">
    <div id="divinfo" class="alert alert-info" role="alert"
         style="position:absolute;width:180px;top:0px;left:5px;padding:0px 15px 0px 15px;">
        <div id="msgInfo" class="alert alert-info"
             style="position:absolute;white-space:pre;width:180px;left: 0px;"></div>
    </div>
    <div id="slide3d" class="slide-carousel slide-3d">
        <ul class="item-list clearfix">
            <shiro:hasPermission name="/pqs9200/business/sbyxzt">
                <li id="item0">
                    <div style="position:absolute;z-index: 99">
                        <div>
                            <span class=' font12 fontBold  ' style="display: block;margin-left: 10px">终端状态(左柱) <span class='run'><span  class='inB bg-run smallBlock'></span> 投运 </span><span class='breaks'><span  class='inB bg-breaks smallBlock'></span> 检修 </span><span class='grey'><span  class='inB bg-grey smallBlock'></span> 退运 &nbsp;</span></span>
                            <span  class=' font12 fontBold' style="display: block;margin-left: 10px;margin-top: 8px" > 终端在线率(右柱) <span class='info'><span  class='inB  smallBlock' style="background-color:#2E8B57 "></span> 在线率≥90%</span><span class='warn'> <span class='inB bg-warn smallBlock'></span> 60%≤在线率<90% </span><span class='error'> <span class='inB bg-error smallBlock'></span> 在线率<60%</span> </span>
                        </div>
                    </div>
                    <div class="item-content" id="run">
                    </div>
                </li>
            </shiro:hasPermission>
            <shiro:hasPermission name="/pqs9200/business/dlxxt">
                <li id="item1">
                    <div style="text-align: center;font-family: '微软雅黑 Light';font-weight:bold;font-size: 20px;position: absolute;width: 100%;background-color: #fff;z-index: 199">
                        地理信息与电网拓扑图
                    </div>
                    <div class="item-content" id="map">
                    </div>
                </li>
            </shiro:hasPermission>
            <shiro:hasPermission name="/pqs9200/business/qypg">
                <li id="item2">
                    <div class="item-content" id="qypg">

                    </div>
                </li>
            </shiro:hasPermission>
            <shiro:hasPermission name="/pqs9200/business/qygk">
                <li id="item3">
                    <div class="item-content" id="sagevent">

                    </div>
                </li>
            </shiro:hasPermission>
            <%-- 网络拓扑图 --%>
            <shiro:hasPermission name="/pqs9200/business/ycjxt">
                <li id="item4">
                    <div class="item-content" id="ycjxt">

                    </div>
                </li>
            </shiro:hasPermission>
        </ul>
        <%--indicators--%>
        <div class="indicator-list">
            <shiro:hasPermission name="/pqs9200/business/sbyxzt">
                <a href="javascript:void(0);" data-slide-index="0" class="selected"></a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/pqs9200/business/dlxxt">
                <a href="javascript:void(0);" data-slide-index="1"></a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/pqs9200/business/qypg">
                <a href="javascript:void(0);" data-slide-index="2"></a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/pqs9200/business/qygk">
                <a href="javascript:void(0);" data-slide-index="3"></a>
            </shiro:hasPermission>
            <%-- 网络拓扑图 --%>
            <shiro:hasPermission name="/pqs9200/business/ycjxt">
                <a href="javascript:void(0);" data-slide-index="4"></a>
            </shiro:hasPermission>
        </div>
        <%--controls--%>
        <div class="controls">
            <a class="item-prev glyphicon glyphicon-menu-left" href="javascript:void(0);"></a>
            <a class="item-next glyphicon glyphicon-menu-right" href="javascript:void(0);"></a>
        </div>
    </div>
</div>
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/slide.min.js"></script>
<script src="${ctx}/js/plugin/layerui/layer.js"></script>
<script src="${ctx}/js/plugin/map/map_load.js"></script>
<script src="${ctx}/js/plugin/jquery.gallery.js"></script>
<script src="${ctx}/js/plugin/map/SearchInfoWindow_min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<%--引入echarts文件--%>
<script src="${ctx}/js/plugin/layerui/layui.js"></script>
<script src="${ctx}/js/plugin/echarts/echarts.js"></script>
<script src="${ctx}/jspJS/utils/positionOffset.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/js/mapCommon.js"></script>
<script src="${ctx}/jspJS/utils/getTime.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/jspJS/overview/glindex.js"></script>
<script>
    $('#slide3d').slideCarsousel({slideType: '3d', indicatorEvent: 'click'});
    //获取当前内容的高度
    var height = $(window).height();
    $(".banner").css("height", height * 0.8);
    $(".banner").css("margin-top", height * 0.1);
    $("li").css("height", height * 0.8);
</script>
</body>
</html>
