<%@ 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>
    <title>地理信息和电网拓扑图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
    <%--加载地图文件--%>
    <link rel="stylesheet" href="${ctx}/css/plugin/map/SearchInfoWindow_min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/map/bmap.css">
    <%-- jquery-ui --%>
    <link rel="stylesheet" href="${ctx}/css/plugin/jquery/jquery-ui.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/js/plugin/layerui/css/layui.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <style type="text/css">
        .ui-autocomplete {
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .mystyle > label {
            background: #006565;
            color: #FFFFFF;
        }

        .alert-info {
            background-color: #f5f5f5;
        }

        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
            padding: 5px;
        }
    </style>
</head>
<body style="overflow:hidden;height: 100%;">
<div class="position:relative;" style="height: 100%;">
    <div style="width: 58%;height:100%;position:absolute;">
        <div id="rightContent" style="width:100%; height:100%;position:absolute;"></div>
        <div class="btn-group" role="group" aria-label="54..." style="float:right;position:absolute;right:0;top:1px;">

            <div class="ui-widget" style="float:right;margin-top:1px;width:160px;">
                <input type="text" id="input_searchpoint" placeholder="请输入监测点名称"
                       style="width:160px;font-size:12px;height:24px;">
            </div>
            <button type="button" class="btn btn-default" aria-label="Left Align"
                    style="float:right;margin-right:-159px;margin-top:2px;font-size:12px;height:22px;"
                    onclick="searchPoint(0)">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            </button>
        </div>

    </div>
    <div style="width:41.8%;height: 100%;float: right;">
        <button type="button" class="btn themeBGColor fr mr10" id="exportData">
            <i class="glyphicon glyphicon-share"></i>导出
        </button>
        <div style="width:100%;height: 20%;">
            <table id="deviceError" class="table table-bordered dataTable no-footer">
                <thead>
                <tr>
                    <th colspan="6">离线终端列表</th>
                </tr>
                <tr>
                    <th>序号</th>
                    <th>中断时间</th>
                    <th>供电公司</th>
                    <th>变电站</th>
                    <th>网络参数</th>
                </tr>
                </thead>
            </table>
        </div>
        <div style="width:100%;height: 40%;">
            <table id="things" class="table table-bordered dataTable no-footer">
                <thead>
                <tr>
                    <th colspan="5">未处理暂降事件列表</th>
                </tr>
                <tr>
                    <th>序号</th>
                    <th>发生时刻</th>
                    <th>监测点</th>
                    <th>暂降(骤升)幅值(%)</th>
                    <th>持续时间(S)</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

    <div id="divevent" class="alert alert-info" role="alert"
         style="overflow-y:auto;overflow-x:hidden;position:absolute;width:100%;bottom:-20px;padding:5px;display:none;max-height:250px">
        <span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>
        <span class="sr-only">Error:</span>
        <span>暂降事件列表</span>

        <button id="btnshrink" style="margin:0px 0px 5px 0px;float:right;" onclick="shrinkdiv()">
            <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
            <span style="margin:0px 0px 0px 5px;">收缩</span>
        </button>

        <button type="button" class="btn btn-primary btn-xs" id="query" style="float:right;margin:2px 5px 0px 0px;">
            <i class="glyphicon glyphicon-random"></i>事件处理
        </button>

        <table id="example"
               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">
                <%-- 监测点ID，该列隐藏 --%>
                <th class="text-center">监测点ID</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>
                <th class="text-center">变电站</th>
                <th class="text-center">监测点</th>
            </tr>
            </thead>
        </table>
    </div>

    <div id="divexpan" class="alert alert-info" role="alert"
         style="position:absolute;width:55px;bottom:0px;right:0px;padding:0px;margin:1px;display:none;">
        <button id="btnexpan" onclick="expandiv()">
            <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
            <span>展开</span>
        </button>
    </div>
</div>
<script src="${ctx}/js/plugin/map/map_load.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/map/map_load.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/map/SearchInfoWindow_min.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/map/TextIconOverlay.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/map/MarkerClusterer.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/map/AreaRestriction_min.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/map/GeoUtils_min.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/bootstrap/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/bootstrap/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="${ctx}/jspJS/utils/publicUtils.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/jquery.cleverTabs.js"></script>
<%--Common Modal --%>
<script src="${ctx}/js/plugin/layerui/layui.js"></script>
<script src="${ctx}/js/plugin/layerui/layer.js"></script>
<script type="text/javascript" src="${ctx}/jspJS/utils/loading.js"></script>
<script type="text/javascript" src="${ctx}/jspJS/utils/positionOffset.js"></script>
<script type="text/javascript" src="${ctx}/js/color.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script type="text/javascript" src="${ctx}/jspJS/overview/dlxxt.js"></script>
</body>

</html>
