<%@ 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}"/>
<html lang="zh-CN">
<head>
    <title>终端状态</title>
    <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}/css/plugin/slide/reset.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrapSwitch/bootstrap-switch.min.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/plugin/basicButton.css">--%>
    <style>
        html, body {
            background-color: #F9F9F9 !important;
        }

        table {
            font-size: 12px !important;
        }

        #before, #next, #query {
            height: 20px !important;
        }

        .wanzhengdiv {
            position: absolute;
            z-index: 100;
            top: 70px;
        }
        .form-control{
            height: 27px!important;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="form-inline mt5 wanzhengdiv">
        <div class="form-group has-feedback mr10" id="charTitle">

        </div>
    </div>
    <div class="form-inline mt10">
        <div class="form-group has-feedback mr10">
            <label>分类方式：</label>
            <select class="width3 form-control" id="datatype">
                <option selected value="0">区域</option>
                <option value="1">电压等级</option>
                <option value="2">终端厂家</option>
                <option value="3">干扰源类型</option>
            </select>
        </div>
        <div class="form-group has-feedback mr10">
            <label>监测点等级：</label>
            <select class="width3 form-control" id="lineGrade">

            </select>
        </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 class="form-group">
            <button type="button" class="btn btn-primary ml15"  style="height: 20px" id="infomation">
                <i class="glyphicon glyphicon-question-sign"></i>
            </button>
        </div>


    </div>

    <div class="form-inline mt10">
        <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 has-feedback mr10">
            <label>电压等级：</label>
            <select class="width3 form-control" id="scale"></select>
        </div>
        <div class="form-group has-feedback mr10">
            <label>终端厂家：</label>
            <select class="width3 form-control" id="manc"></select>
        </div>
        <div class="form-group has-feedback mr10">
            <label>干扰源类型：</label>
            <select class="width3 form-control" id="loadtype"></select>
        </div>
    </div>
    <div class="row mt5">

        <%--区域模块--%>
        <div class="col-sm-7 col-md-7" id="areaDepts"></div>
        <div class="col-sm-5 col-md-5" id="areaT">
            <table id="areaTable" class="table table-striped table-bordered dataTable no-footer">
                <thead>
                <tr>
                    <th>区域</th>
                    <th>终端个数</th>
                    <th>投运</th>
                    <th>检修</th>
                    <th>退运</th>
                    <th>在线率(%)</th>
                </tr>
                </thead>
            </table>
        </div>
        <%--         终端厂家模块 --%>
        <div class="col-sm-7 col-md-7" id="company" style="display: none;"></div>
        <div class="col-sm-5 col-md-5" id="companyT" style="display: none;">
            <table id="companyTable" class="table table-striped table-bordered dataTable no-footer">
                <thead>
                <tr>
                    <th>厂家</th>
                    <th>终端个数</th>
                    <th>投运</th>
                    <th>检修</th>
                    <th>退运</th>
                    <th>在线率(%)</th>
                </tr>
                </thead>
            </table>
        </div>
        <%--         电压等级模块 --%>
        <div class="col-sm-7 col-md-7" id="vol" style="display: none;"></div>
        <div class="col-sm-5 col-md-5" id="volT" style="display: none;">
            <table id="volTable" class="table table-striped table-bordered dataTable no-footer">
                <thead>
                <tr>
                    <th>电压等级</th>
                    <th>终端个数</th>
                    <th>投运</th>
                    <th>检修</th>
                    <th>退运</th>
                    <th>在线率(%)</th>
                </tr>
                </thead>
            </table>
        </div>
        <%--         干扰源模块 --%>
        <div class="col-sm-7 col-md-7" id="loadtypep" style="display: none;"></div>
        <div class="col-sm-5 col-md-5" id="loadtypeT" style="display: none;">
            <table id="loadtypeTable" class="table table-striped table-bordered dataTable no-footer">
                <thead>
                <tr>
                    <th>干扰源类型</th>
                    <th>终端个数</th>
                    <th>投运</th>
                    <th>检修</th>
                    <th>退运</th>
                    <th>在线率(%)</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/echarts/echarts.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/jquery/jquery.contextMenu.js"></script>
<script src="${ctx}/js/plugin/jquery/jquery.cleverTabs.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.jquery.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/area.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/jspJS/utils/barUtil.js"></script>
<script src="${ctx}/jspJS/linedata/areaOnlineRate.js"></script>
</body>
</html>
