<%@ 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>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/jquery/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/js/plugin/layerui/css/layui.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style type="text/css">
        .layui-left {
            float: left;
        }

        body {
            overflow: hidden;
            font-size: 12px;
        }

        .self-style {
            margin: 0px;
            position: absolute;
            top: 3px;
            bottom: 0;
            z-index: 1;
        }

        .self-td > td {
            white-space: nowrap;
            padding: 1px !important
        }

        .table-condensed > thead > tr > th,
        .table-condensed > tbody > tr > th,
        .table-condensed > tfoot > tr > th,
        .table-condensed > thead > tr > td,
        .table-condensed > tbody > tr > td,
        .table-condensed > tfoot > tr > td {
            padding: 8px;
        }

        .self-td > thead > tr > th,
        .self-td > tbody > tr > th,
        .self-td > tfoot > tr > th,
        .self-td > thead > tr > td,
        .self-td > tbody > tr > td,
        .self-td > tfoot > tr > td {
            padding: 0px !important;
        }
        .styleFixd {
        	table-layout:fixed;
        }
        .fontStyle0{
        	font-weight:bold;
        }
        .fontStyle1{
        	font-size:20px;
        	font-weight:bold;
        }
        .fontStyle2{
        	font-size:10px;
        	font-weight:bold;
        }
        .fontStyle3{
        	font-size:15px;
        	font-weight:bold;
        }
        .wd50{
        	width:50px;
        }
        #allLineCheck {
            width: 18px;
            height: 18px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: 18px;
            margin-right: 10px;
            position: relative;
            margin-top: 0px;
        }

    </style>
</head>
<body>
<div class="layui-left layui-tab self-style" lay-filter="tab">
    <ul class="layui-tab-title" style="box-sizing: content-box;!important">
        <li class="layui-this" id="myLi" style="font-size: 12px;">暂态总体概况</li>
        <li style="font-size: 12px;">暂态严重度统计</li>
        <li style="font-size: 12px;">暂态原因统计</li>
        <li style="font-size: 12px;">详细事件列表</li>
        <li style="font-size: 12px;">暂降次数统计</li>
        <li style="font-size: 12px;">暂升次数统计</li>
        <li style="font-size: 12px;">短时中断次数统计</li>
    </ul>
    <div id="myTab" class="layui-tab-content"
         style="padding: 5px; overflow-y: auto; overflow-x: hidden; height: 100%;">
        <div class="layui-tab-item layui-show">
            <!-- 图表切换(表格/图表) -->
            <button type="button" class="btn btn-primary" id="table">
                <i class='glyphicon glyphicon-th'>&nbsp;表格</i>
            </button>
            <button type="button" class="btn btn-primary" id="pic">
                <i class='glyphicon glyphicon-stats'>&nbsp;图表</i>
            </button>
            <%-- 数据区域 --%>
            <div id="tableData">
                <div id="depts"></div>
                <div id="voltage"></div>
            </div>

            <%-- 图表区域 --%>
            <div id="picData" style="display: none;">
                <div id="deptsPic"></div>
                <div id="voltagePic"></div>
                <div id="deptsEvent"></div>
                <div id="voltageEvent"></div>
            </div>
        </div>
        <div class="layui-tab-item">
            <%-- 暂降严重度前五展示 --%>
            <div id="sagData"></div>
        </div>
        <div class="layui-tab-item">
            <%-- 暂降原因统计 --%>
            <div id="sagReason"></div>
            <div id="sagPic" style="margin-top: 10px;"></div>
        </div>
        <div class="layui-tab-item">
            <%-- 详细事件展示 --%>
            <div id="sagEvents">
                <table id="tableId"
                       class="table table-striped table-bordered dataTable no-footer table-hover table-condensed"
                       cellspacing="0" width="100%" role="grid"
                       aria-describedby="example_info">
                    <thead>
                    <tr role="row">
                        <th class="text-center">序号</th>
                        <th class="text-center">暂态事件发生时刻</th>
                        <th class="text-center">供电公司</th>
                        <th class="text-center">变电站</th>
                        <th class="text-center">监测点</th>
                        <th class="text-center">监测点电压等级</th>
                        <th class="text-center">干扰源类型</th>
                        <th class="text-center">监测点对象名称</th>
                        <th class="text-center">暂降(骤升)幅值(%)</th>
                        <th class="text-center">持续时间(s)</th>
                        <th class="text-center">暂态类型(机器判断)</th>
                        <th class="text-center">事件类型</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="layui-tab-item">
            <%-- 暂降次数 --%>
            <div id="tenList">
                <table id="tableId2"
                       class="table table-striped table-bordered dataTable no-footer table-hover table-condensed"
                       cellspacing="0" width="100%" role="grid"
                       aria-describedby="example_info">
                    <thead>
                    <tr role="row">
                        <th class="text-center">序号</th>
                        <th class="text-center">监测点</th>
                        <th class="text-center">干扰源类型</th>
                        <th class="text-center">接入电网侧变电站</th>
                        <th class="text-center">监测点对象名称</th>
                        <th class="text-center">监测点电压等级</th>
                        <th class="text-center">监测点所在变电站/场站名称</th>
                        <th class="text-center">监测点所在变电站/场站电压等级</th>
                        <th class="text-center">供电公司</th>
                        <th class="text-center">暂降次数</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="layui-tab-item">
            <%-- 暂升次数前十条 --%>
            <div id="tenUpList">
                <table id="tableId3"
                       class="table table-striped table-bordered dataTable no-footer table-hover table-condensed"
                       cellspacing="0" width="100%" role="grid"
                       aria-describedby="example_info">
                    <thead>
                    <tr role="row">
                        <th class="text-center">序号</th>
                        <th class="text-center">监测点</th>
                        <th class="text-center">干扰源类型</th>
                        <th class="text-center">接入电网侧变电站</th>
                        <th class="text-center">监测对象名称</th>
                        <th class="text-center">监测点电压等级</th>
                        <th class="text-center">监测点所在变电站/场站名称</th>
                        <th class="text-center">监测点所在变电站/场站电压等级</th>
                        <th class="text-center">供电公司</th>
                        <th class="text-center">暂升次数</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="layui-tab-item">
            <%-- 短时中断次数前十条 --%>
            <div id="tenBreakList">
                <table id="tableId4"
                       class="table table-striped table-bordered dataTable no-footer table-hover table-condensed"
                       cellspacing="0" width="100%" role="grid"
                       aria-describedby="example_info">
                    <thead>
                    <tr role="row">
                        <th class="text-center">序号</th>
                        <th class="text-center">监测点</th>
                        <th class="text-center">干扰源类型</th>
                        <th class="text-center">接入电网侧变电站</th>
                        <th class="text-center">监测对象名称</th>
                        <th class="text-center">监测点电压等级</th>
                        <th class="text-center">监测点所在变电站/场站名称</th>
                        <th class="text-center">监测点所在变电站/场站电压等级</th>
                        <th class="text-center">供电公司</th>
                        <th class="text-center">短时中断次数</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<form class="form-inline header mt10"
      style="float: right; position: relative; z-index: 99">
    <div class="form-group has-feedback ml10">
        <label style="margin-top: 3px">全部监测点：</label>
        <input type="checkbox" id="allLineCheck"/>
    </div>
    <%@include file="../../include/time.jsp" %>
    <div class="form-inline pdr15" style="display: inline-block;">
        <button type="button" class="btn btn-primary" id="query">
            <i class="glyphicon glyphicon-search"></i>
        </button>
        <%--导出按钮--%>
        <button type="button" class="btn btn-primary" id="export">
            <i class='glyphicon glyphicon-share'>导出</i>
        </button>
    </div>
</form>
<script src="${ctx}/js/plugin/jquery.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/bootstrap/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/buttons.html5.min.js"></script>
<script src="${ctx}/js/plugin/layerui/layui.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>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/js/plugin/jquery.gallery.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/js/plugin/echarts3D/echarts.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/jspJS/report/weeklyreport.js"></script>
</body>
</html>
