<%@ 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}" />
<!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></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <%--加载地图文件--%>
    <link rel="stylesheet" href="${ctx}/css/plugin/slide/reset.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/slide/slide.css">
	<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
	<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.min.css">
	<link rel="stylesheet" href="${ctx}/css/plugin/animate/Animate.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.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
	<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/basic.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: "微软雅黑";
        }

        #rightContent label {
            max-width: none;
        }

        .dg-sub b.red {

            border-bottom: solid 1px #98af9f;
            font-weight: bold;
        }

        .dg-sub b {
            padding: 2px 5px;
            color: #666;
            font-weight: normal;
        }
        .left-menu {
            top:60px
        }
	    li {
	        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
	        background: white;
	    }
	    .slide-carousel .controls a {
    		height: 80px; !important
    	}
    </style>
</head>
<body >
<div class="banner">
<div id="slide3d" class="slide-carousel slide-3d">
        <ul class="item-list clearfix">
            <li class="item0">
                <div class="item-content" onclick="echartEvent();" id="event" >
                </div>
            </li>
            <li class="item1">
                <div class="item-content" onclick="echartDensity();"  id="density" >
                </div>
            </li>
            <li class="item2">
                <div class="item-content" onclick="echartTime();" id="time" >

                </div>
            </li>
            <li class="item5">
                <div class="item-content" onclick="echartChance();" id="chance" >

                </div>
            </li>
        </ul>
        <%--indicators--%>
        <div class="indicator-list">
            <a href="javascript:void(0);" data-slide-index="0"></a>
            <a href="javascript:void(0);" data-slide-index="1"></a>
            <a href="javascript:void(0);" data-slide-index="2"></a>
            <a href="javascript:void(0);" data-slide-index="3"></a>
        </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/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/jquery.dataTables.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/dataTables.bootstrap.min.js"></script>
<%-- 图片切换 --%>
<script src="${ctx}/js/plugin/jquery.gallery.js"></script>
<script src="${ctx}/js/plugin/layerui/layer.js"></script>
<script src="${ctx}/js/plugin/jquery.contextMenu.js"></script>
<script src="${ctx}/js/plugin/jquery.cleverTabs.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.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>
<%--引入echarts3D文件--%>
<script src="${ctx}/js/plugin/echarts3D/echarts.js"></script>
<script src="${ctx}/js/plugin/echarts3D/echarts-gl.min.js"></script>
<script src="${ctx}/js/plugin/jquery.gallery.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/jspJS/monitor/tongji.js"></script>
<script type="text/javascript" charset="utf-8">
        var line_index = window.parent.document.getElementById("lineIndex").value;
        $(function () {
            $('#slide3d').slideCarsousel({slideType: '3d', indicatorEvent: 'click'});
            //获取当前内容的高度
            var height = $(parent.document.body).height();
            $(".banner").css("height", height * 0.8);
            $(".banner").css("margin-top", height * 0.1);
            $("li").css("height", height * 0.8);
            

            $("#event").css("height", $("li").height());
            $("#event").css("width", $("li").width());
            
            $("#time").css("height", $("li").height());
            $("#time").css("width", $("li").width());

            $("#density").css("height", $("li").height());
            $("#density").css("width", $("li").width());

            $("#chance").css("height", $("li").height());
            $("#chance").css("width", $("li").width());
        });
        function echartEvent(){
            if(window.screen.availHeight>799){
                layer.open({
                      type: 2,
                      title: '暂降事件点图',
                      maxmin: false,
                      shadeClose: true, //点击遮罩关闭层
                      area : ['100%' , '100%'],
                      offset: '0px',
                      content: 'showeventdatalist?lineIndex='+line_index,
                      scrollbar:true
                    });
            }else{
                layer.open({
                      type: 2,
                      title: '暂降事件点图',
                      maxmin: false,
                      shadeClose: true, //点击遮罩关闭层
                      area : ['100%' , '100%'],
                      offset: '0px',
                      content: 'showeventdatalist?lineIndex='+line_index,
                      scrollbar:true
                    });
            }
        }
        function echartTime(){
            layer.open({
              type: 2,
              title: '暂降原因、类型和时间分布统计',
              shadeClose: true, //点击遮罩关闭层
              area : ['100%' , '100%'],
              content: 'showeventtime?lineIndex='+line_index,
              scrollbar:false
            });
        }
        function echartDensity(){
            layer.open({
              type: 2,
              title: '电压暂降表及密度图',
              shadeClose: true, //点击遮罩关闭层
              area : ['100%' , '100%'],
              content: 'showeventdensity?lineIndex='+line_index,
              scrollbar:true
            });
        }
        function echartChance(){
            layer.open({
              type: 2,
              title: '暂降幅值/持续时间分布函数',
              shadeClose: true, //点击遮罩关闭层
              area : ['100%' , '100%'],
              content: 'showeventchance?lineIndex='+line_index,
              scrollbar:false
            });
        }
</script>
</body> 
</html>