<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<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/jquery/jquery-ui.css">
    <link rel="stylesheet" href="${ctx}/js/plugin/layerui/css/layui.css">
    <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">
    <style type="text/css">
        html, body {
            background-color: #F9F9F9 !important;
        }

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

        .table > tbody > tr > td {
            padding: 4px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }

        .tongjiArea, .tongjiTime, .tongjiCounts {
            font-weight: bold;
        }
    </style>
</head>
<body class="pdt10">
<div class="container-fluid">
    <div class="form-inline pdb5">
        <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>
        <div class="form-group">
            <%@include file="../../include/time.jsp" %>
            <button type="button" class="btn btn-primary " id="query">
                <i class="glyphicon glyphicon-search"></i>
            </button>
        </div>
    </div>
    <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#tuxing" data-toggle="tab">图形</a></li>
        <li><a href="#biaoge" data-toggle="tab">表格</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div id="tuxing" 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>
                </ul>
            </span>

            <div class="fr mt10">
                <button type="button" class="btn themeBGColor" id="saveImage">
                    <i class="glyphicon glyphicon-floppy-save"></i>保存图片
                </button>
                <button type="button" class="btn themeBGColor ml10 disnone" id="backpro">
                    <i class="glyphicon glyphicon-share-alt"></i>返回上一级
                </button>
            </div>
            <div class="container-fluid">
                <div class="row mt10">
                    <div class="col-sm-12" id="district"></div>
                    <div class="col-sm-6" id="voltage"></div>
                    <div class="col-sm-6" id="timeInterval"></div>
                </div>
            </div>
        </div>
        <div id="biaoge" 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>
            <button type="button" class="btn btn-primary mt5 fr" id="exportData">
                <i class="glyphicon glyphicon-share"></i>导出
            </button>
            <div class="layui-collapse mt10">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">区域</h2>
                    <div class="layui-colla-content layui-show">
                        <table id="areaTable" class="table  table-bordered dataTable no-footer">
                            <thead>
                            <tr>
                                <th>区域名称</th>
                                <th>监测点个数</th>
                                <th>电压暂降次数</th>
                                <th>SARFI-90</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">电压等级</h2>
                    <div class="layui-colla-content">
                        <table id="valtageTable" class="table table-bordered  dataTable no-footer">
                            <thead>
                            <tr>
                                <th>电压等级</th>
                                <th>监测点个数</th>
                                <th>电压暂降次数</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">月份</h2>
                    <div class="layui-colla-content">
                        <table id="interTable" class="table  table-bordered dataTable no-footer">
                            <thead>
                            <tr>
                                <th>月份</th>
                                <th>电压暂降次数</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%--Common Modal --%>
<canvas id='canvasipal' width='2000' height='1000' 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/layerui/layui.all.js" charset="utf-8"></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}/js/plugin/jquery.gallery.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/jspJS/utils/threeImages.js"></script>
<script src="${ctx}/jspJS/utils/saveImage.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/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/barUtil.js"></script>
<script src="${ctx}/jspJS/area/general.js"></script>
</body>
</html>
