<%@ 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/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/map/SearchInfoWindow_min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/bootstrap-select.css"/>
    <!--加载地图文件-->

</head>
<style type="text/css">

    html {
        height: 100%
    }

    body {
        height: 100%;
        margin: 0px;
        padding: 0px
    }

    #container {
        height: 100%
    }

    .divs {
        display: flex;
        margin-bottom: 5px;
    }

    .imgs {
        height: 25px;
        margin-right: 5px;
    }

    .iconBox {
        position: absolute;
        bottom: 7px;
        left: 5px;
        z-index: 2000;
        width: 120px;
        height: 260px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.75) !important;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    }

    .selectBox {
        top: 11.5px;
        position: absolute;
        right: 180px;
        z-index: 2000;
        width: 180px;
    }
    #container .anchorBL img {
        display: none;
    }

    #container .BMap_cpyCtrl span {
        display: none !important;
    ;
    }
    .rightTitle{

        position: absolute;
        top: 11px;
        left: 5px;
        z-index: 2000;
        width: 270px;
        height: 240px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.75) !important;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    }
    .btn-default{
        padding: 3px 9px;
        color: #333;
        background-color: #fff;
    }

    .icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        color: #0088CC;
        background-color:#fff;
        border: none;
        padding: 1px 1px;
        cursor: pointer;
    }



    #rightIcon {
        right: 10px;
    }

    #leftIcon {
        right: 10px;
    }
</style>

<body>
<!-- 右上角搜索框 -->
<div class="selectBox">
    <select class="selectpicker" style="outline: none;width:150px;" data-live-search="true"
            id="select_article" name="select_article">
        <option value="" data-name="">---请选择监测点---</option>
    </select>
</div>


<div class="rightTitle" id="leftT">
    <button id="rightIcon"  onclick="rightBox()" class="icon">&#9668;</button>
    <button id="leftIcon" style="display: none" onclick="leftBox()" class="icon">&#9658;</button>
    <div style="margin-bottom: 10px">

    </div>


    <div  id="leftContent">
    <label>总数:</label>
    <label>在线:</label>
    <label>离线:</label>
    <label>暂降事件个数:</label>


    </div>


</div>

<div class="iconBox">

    <div class="divs">
        <img style="margin-right:9px;height: 15px" src="../images/img/pyellow.png" alt=""/> <label>检修</label>
    </div>
    <div class="divs">
        <img style="margin-right:5px;height: 15px" src="../images/img/pgray.png" alt=""/> <label>退运</label>
    </div>
    <label class="divs">投运</label>
    <div class="divs" style="padding-left: 10px">
        <label>通讯正常</label>
    </div>
    <div class="divs" style="padding-left: 15px">
        <img class="imgs" src="../images/img/wingreen.gif" alt=""/> <label style="padding-top: 3px">有暂降</label>
    </div>
    <div class="divs" style="padding-left: 15px">
        <img style="margin-right:5px;height: 25px" src="../images/img/pgreen.png" alt=""/> <label style="padding-top: 3px">无暂降</label>
    </div>
    <div class="divs" style="padding-left: 10px">
        <label>通讯异常</label>
    </div>
    <div class="divs" class="divs" style="padding-left: 15px">
        <img class="imgs" src="../images/img/winred.gif" alt=""/> <label style="padding-top: 3px">有暂降</label>
    </div>
    <div class="divs" style="padding-left: 20px">
        <img style="margin-right:5px;height: 15px" src="../images/img/pred.png" alt=""/> <label>无暂降</label>
    </div>
</div>

<div id="container"></div>


<%--Common Modal --%>
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/3.3.7/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-select.js"></script>
<script src="${ctx}/js/plugin/map/map_load.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/plugin/map/SearchInfoWindow_min.js"></script>
<script src="${ctx}/jspJS/area/moinitorMap.js"></script>
<script type="text/javascript">


    /*var tileLayer = new BMap.TileLayer();
    tileLayer.getTilesUrl = function (tileCoord, zoom) {
        var x = tileCoord.x;
        var y = tileCoord.y;
        var url = outputPath + zoom + '/' + x + '/' + y + fromat;
        return url;
    }
    var tileMapType = new BMap.MapType('tileMapType', tileLayer);*/





    $('.selectpicker').selectpicker({
        noneSelectedText: '',
        width:250,
        noneResultsText: '',
        liveSearch: true,
        size: 8   //设置select高度，同时显示5个值
    });




</script>
</body>
</html>
