<%@ 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"/>
    <link rel="stylesheet" href="${ctx}/js/plugin/layerui/css/layui.css" media="all">
    <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/bootstrap/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/ztree/zTreeStyle.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontAwesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/css/tip.css">
    <title>区域统计</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <style>
        html, body {
            background-color: #F9F9F9 !important;
        }

        .nav > li > a {
            padding: 3px 15px;
        }

        .eventTable {
            position: absolute;
            top: -20px;
            right: 120px;
            width: 300px;
            z-index: 999;
        }

        #eventTable {
            font-size: 10px;
        }

        thead tr th {
            text-align: center;
        }

        .table > thead > tr > th,
        .table > tbody > tr > th,
        .table > tfoot > tr > th,
        .table > thead > tr > td,
        .table > tbody > tr > td,
        .table > tfoot > tr > td {
            line-height: 1.42857143;
            vertical-align: center;
            border-top: 1px solid #ddd;
        }

		table.dataTable thead > tr > th{
			padding-left : 0px;
			padding-right : 0px;
		}
		
        .typeDiv {
            position: relative;
            top: -10px;
        }
    </style>
</head>
<body class="pdt10">
<div class="container-fluid">
    <div class="pdb5">
        <div class="form-inline">
            <div class="form-group has-feedback">
                <label>区域：</label>
                <div class="disinlineb">
                    <input id="area" class="form-control" style="width: 140px" readonly>
                    <i class="fa fa-caret-down areaicon"></i>
                    <i class="fa fa-caret-up treeUpIcon disnone"
                       style="color: #C9CBCE;position: absolute;left: 60px;font-size: 18px;z-index: 9999;top: 20px"></i>
                    <div class=" ztree treeUpDiv disnone " id="areaTree"
                         style="position: absolute;width: 140px;height: 147px;border: 2px solid #C9CBCE;overflow: auto;top: 32px;background: #fff;z-index: 100;border-radius: 2px">
                    </div>
                </div>
            </div>
            <%@include file="../../include/time.jsp" %>
            <div class="form-group">
                <button type="button" class="btn btn-primary" id="query">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
                <button id="helper" type="button" class="btn btn-primary tip tip-bottom" data-tip="电压容忍度曲线详解">
                    <i class="glyphicon glyphicon-info-sign" style="margin-left: -3px;margin-right: -3px;"></i>
                </button>
            </div>
        </div>
    </div>
    <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#tongji1" data-toggle="tab">暂降原因及类型统计</a></li>
        <li><a href="#tongji2" data-toggle="tab">电压容忍度曲线兼容性统计</a></li>
    </ul>
    <div id="myTabContent" class="tab-content pdt10">
        <div id="tongji1" class="tab-pane fade in active">
            <span class="visible-lg-inline-block visible-md-inline-block" id="title_1">
                <ul class='list-inline'>
                    <li>统计区域：<font class="tongjiArea"></font></li>
                    <li>统计时间：<font class="tongjiTime"></font></li>
                    <li>统计次数：<font class="tongjiCounts"></font>次</li>
                    <li><font style="color: #A52a2a">&nbsp;注:暂降类型仅统计暂降原因为短路故障事件</font></li>
                </ul>
            </span>
            <button type="button" class="btn themeBGColor fr " id="saveImage">
                <i class="glyphicon glyphicon-floppy-save"></i>保存图片
            </button>
            <button type="button" class="btn btn-primary fr mr10" id="exportData">
                <i class="glyphicon glyphicon-share"></i>导出
            </button>
            <div class="container-fluid mt10">
                <div class="row">
                    <div class="col-md-6">
                        <div id="cause" class="width100" ></div>
                    </div>
                    <div class="col-md-6">
                        <table id="causeTable" class="table  table-bordered dataTable no-footer">
                            <thead>
                            <tr>
                                <th>暂降原因</th>
                                <th>暂降次数</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="row  typeDiv">
                    <div class="col-md-6">
                        <div id="type" class="width100 " ></div>
                    </div>
                    <div class="col-md-6 mt15">
                        <table id="typeTable" class="table table-striped table-bordered dataTable no-footer">
                            <thead>
                            <tr>
                                <th>暂降类型</th>
                                <th>暂降次数</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div id="tongji2" class="tab-pane fade in">
            <span class="visible-lg-inline-block visible-md-inline-block" id="title_2">
                <ul class='list-inline'>
                    <li>统计区域：<font class="tongjiArea"></font></li>
                    <li>统计时间：<font class="tongjiTime"></font></li>
                    <li>统计次数：<font class="tongjiCounts"></font>次</li>
                </ul>
            </span>
            <div class="width100">
                <ul style="line-height:28px;" id="term">
                    <li class="form-inline " id="voltages"></li>
                    <li class="form-inline " id="loadTypes"></li>
                    <li class="form-inline ">兼容曲线：
                        <input type="radio" name="lineName" id="ITIC" value="ITIC" checked><label
                                for="ITIC">ITIC</label>
                        <input type="radio" class="ml20" id="F47" name="lineName" value="F47"><label
                                for="F47">F47</label>
                    </li>
                </ul>
                <div class="width100 pr">
                    <div id="tolerance" class="width100"></div>
                    <div class="eventTable">
                        <table id="eventTable" class="table table-striped table-bordered dataTable no-footer">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>事件总数</th>
                                <th>可容忍</th>
                                <th>不可容忍</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<canvas id='canvasipal' width='2000' height='400' style='display: none'></canvas>
<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/layerui/layer.js"></script>
<script src="${ctx}/js/plugin/xss/xss.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/echarts3D/echarts.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/jspJS/utils/twoImages.js"></script>
<script src="${ctx}/jspJS/utils/saveImage.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/area.js"></script>
<script src="${ctx}/jspJS/utils/helper.js"></script>
<script src="${ctx}/jspJS/area/areaStatistics.js"></script>
</body>
</html>