<%@ 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>
    <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/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/jquery/jquery-ui.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/metroStyle/metroStyle.css">
<link rel="stylesheet" href="${ctx}/css/plugin/checkbutton.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
	<link rel="stylesheet" href="${ctx}/css/plugin/dateSlider/dateSlider.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
    <style>
		html, body {
			background-color: #F9F9F9 !important;
			font-size: 12px;
			overflow: hidden;
		}
		
        ul {
            padding: 0 2px;
            border: 1px solid #696969;
            border-radius: 4px;
        }

        .xieboTtitle {
            clear: both;
        }

        .form-control {
            font-size: 12px;
            padding: 4px 12px !important;
        }
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
	    	padding: 5px;
	    }
	    .picDiv {
			clear: both;
			background-color: #fff;
			overflow-y: auto;
		}
    </style>
</head>
<body>
<div id="main" style="display: none;">
<div class="container-fluid">
    <div class="form-inline header fr" style="margin-top: 2px;padding-bottom:15px; position: relative; z-index: 99">
			<div class="form-group pdr10" id="timegroup">
				<label style="font-weight: bold; margin-top: 5px">总区间：</label>
				<div class="form-group" id="container0" style="height: 45px;"></div>
			</div>
			<div class="form-group">
			    <input type="text" class="form-control form_datetime con"  autocomplete="off"
			           id="startTime" style="width: 138px">
			</div>
			&nbsp;—
			<div class="form-group">
			    <input type="text" class="form-control form_datetime con" autocomplete="off"
			           id="endTime" style="width: 138px">
			</div>
			<%--查询--%>
			<div class="form-group">
				<button type="button" class="btn btn-primary" id="query">
					<i class="glyphicon glyphicon-search"></i>
				</button>
			</div>
		</div>
</div>
		<%--时间横轴--%>
		<label style="font-weight: bold; position: absolute;margin-top: -5px;font-size: 12px;padding-left: 25px;">时间段：</label>
       	<div class="dateSlider" id="dateSlider" style="height:50px;padding:0px 50px 0px 80px;">&nbsp;</div>
    <div class="container-fluid" id="outI">
        <ul class="nav nav-pills nav-justified mt10" id="qualifiedTab">
            <li class="active"><a href="#frequency" data-toggle="tab" id="allData">谐波电压含有率</a></li>
            <li><a href="#frequency" data-toggle="tab" id="vuDev">谐波电流幅值</a></li>
        </ul>
    </div>
    <table id="example"
           class="table table-striped table-bordered dataTable no-footer"
           cellspacing="0">
        <thead>
        <tr role="row">
            <th class="text-center">次数</th>
            <th class="text-center">2</th>
            <th class="text-center">3</th>
            <th class="text-center">4</th>
            <th class="text-center">5</th>
            <th class="text-center">6</th>
            <th class="text-center">7</th>
            <th class="text-center">8</th>
            <th class="text-center">9</th>
            <th class="text-center">10</th>
            <th class="text-center">11</th>
            <th class="text-center">12</th>
            <th class="text-center">13</th>
            <th class="text-center">14</th>
            <th class="text-center">15</th>
            <th class="text-center">16</th>
            <th class="text-center">17</th>
            <th class="text-center">18</th>
            <th class="text-center">19</th>
            <th class="text-center">20</th>
            <th class="text-center">21</th>
            <th class="text-center">22</th>
            <th class="text-center">23</th>
            <th class="text-center">24</th>
            <th class="text-center">25</th>
            <th class="text-center">26</th>
            <th class="text-center">27</th>
            <th class="text-center">28</th>
            <th class="text-center">29</th>
            <th class="text-center">30</th>
            <th class="text-center">31</th>
            <th class="text-center">32</th>
            <th class="text-center">33</th>
            <th class="text-center">34</th>
            <th class="text-center">35</th>
            <th class="text-center">36</th>
            <th class="text-center">37</th>
            <th class="text-center">38</th>
            <th class="text-center">39</th>
            <th class="text-center">40</th>
            <th class="text-center">41</th>
            <th class="text-center">42</th>
            <th class="text-center">43</th>
            <th class="text-center">44</th>
            <th class="text-center">45</th>
            <th class="text-center">46</th>
            <th class="text-center">47</th>
            <th class="text-center">48</th>
            <th class="text-center">49</th>
            <th class="text-center">50</th>
        </tr>
        </thead>
    </table>
    <div id="container" class="mt10"></div>
</div>
<div id="point" class="a"
	style="width: 100%; height: 100%;">
	<img src="${ctx}/images/timg.png" id="imgs"">
</div>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/jquery-ui/jquery-ui.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.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/ztree/jquery.ztree.core.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/timeControl.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/laydate/laydate.js"></script>
<script src="${ctx}/js/plugin/layui/layui.js"></script>
<script src="${ctx}/js/plugin/jquery/jquery.dataTables.js"></script>
<script src="${ctx}/js/plugin/highcharts/highstock.js"></script>
<script src="${ctx}/js/plugin/highcharts/timeline.js"></script>
<script src="${ctx}/js/plugin/highcharts/export.js"></script>
<script src="${ctx}/js/plugin/highcharts/highchart-ZH.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.excheck.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/js/plugin/dateSlider/dataSlider-hour.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/monitor/offxbpp.js"></script>
<script type="text/javascript">
$(function() {
	//执行一个laydate实例
	laydate.render({
		elem: '#startTime', //指定元素
		type: 'datetime'
	});
	
	laydate.render({
		elem: '#endTime', //指定元素
		type: 'datetime'
	});
})
</script>
</body>
</html>
