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

.form-control {
	font-size: 12px;
	padding: 4px 12px;
}

.picDiv {
	clear: both;
	background-color: #fff;
	overflow-y: auto;
}

a {
	color: #003078;
}

</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="container" style="height: 45px;"></div>
			</div>
			<div class="form-group " style="width:130px;">
			<div class="form-group " id="harmonicSelect">
				<label style="font-weight: bold; margin-top: 5px">谐波次数：</label> <select
					class="form-control" id="harmonicId"
					onchange="harmonicState(this[selectedIndex].value)">

				</select>
			</div>
			</div>
			<div class="form-group ">
				<label style="font-weight: bold; margin-top: 5px">值类型：</label> <select
					class="form-control" id="choo"
					onchange='targetState(this[selectedIndex].value)'>
					<option value="0">平均值</option>
					<option value="1">最大值</option>
					<option value="2">最小值</option>
					<option value="3">CP95</option>
				</select>
			</div>
			<div class="form-group has-feedback" style="display:none">
			    <select class="form-control" id="interval">
			        <option value="年份">年份</option>
			        <option value="季度">季度</option>
			        <option value="月份">月份</option>
			        <option value="周">周</option>
			        <option value="自定义">自定义</option>
			    </select>
			</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>
	<%-- 指标 --%>
	<div class="float-open" id="float-open"
		style="right: 7px; float: right;">

		<a id="open-btn" href="javascript:void(0);"><i
			class="fa fa-arrow-circle-o-left" style="font-size: 33px"></i></a>
	</div>
	<div class="float-news" id="float-news"
		style="right: -450px; float: right; height: 65%">
		<a id="float-close" href="javascript:void(0);"><i
			class="fa fa-remove" style="font-size: 33px; margin-left: 160px;"></i></a>
		<div class="newslist" style="margin-top: -46px;">
			<h3>指标</h3>
			<div id="target" class="ztree"></div>
		</div>
	</div>
	<div class="picDiv" id="echartId" style="width: 98%">
		<div class="bxfx" id="container1"></div>
		<div class="bxfx" id="container2"></div>
		<div class="bxfx" id="container3"></div>
	</div>
	<div id="point" class="a"
			style="max-width: 100%;height:100%">
			<li id="pointInfo" style="font-size: 20px; text-align: center"></li>
			<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/highcharts/highstock.js"></script>
	<script src="${ctx}/js/plugin/highcharts/timeline.js"></script>
	<script src="${ctx}/js/color.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/laydate/laydate.js"></script>
	<script src="${ctx}/js/plugin/layui/layer.js"></script>
	<script src="${ctx}/js/plugin/layui/layui.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}/js/plugin/ztree/jquery.ztree.excheck.js"></script>
	<script src="${ctx}/js/basic.js"></script>
	<script src="${ctx}/js/plugin/dateSlider/dataSlider-hour.js"></script>
	<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
	<script src="${ctx}/jspJS/utils/loading.js"></script>
	<script src="${ctx}/jspJS/utils/historyUtils.js"></script>
	<script src="${ctx}/jspJS/monitor/offwtqs.js"></script>

	<script>
		$(function() {
			$("#float-close").click(function() {
				$(".float-news").animate({
					right : '-450px'
				}, 300, function() {
					$(".float-open").delay(50).animate({
						right : '7px'
					}, 300);
				});
			});
			$("#open-btn").click(function() {
				$(".float-open").animate({
					right : '-70px'
				}, 100, function() {
					$(".float-news").delay(50).animate({
						right : '10px'
					}, 300);
				});
			});
			
			//执行一个laydate实例
			laydate.render({
				elem: '#startTime', //指定元素
				type: 'datetime'
			});
			
			laydate.render({
				elem: '#endTime', //指定元素
				type: 'datetime'
			});
		})
	</script>
</body>
</html>
