<%@ 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/basic.css">
<style>
html, body {
	background-color: #F9F9F9 !important;
	font-size: 20px;
	overflow: hidden;
}

.picDiv{
        clear:both;
        background-color: #fff;
        overflow-y: auto;
}
a {
            color: #003078;
        }
</style>
</head>
<body>
<div class="container-fluid">
    <div class="header" id="timepoint" style="margin-top:2px;text-align: center;height:30px;">
    </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%;max-height:100%;">
    <div class="bxfx" id="container1"></div>
    <div class="bxfx" id="container2"></div>
    <div class="bxfx" id="container3"></div>
</div>

	<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
	<script src="${ctx}/js/plugin/highcharts/highcharts.js"></script>
	<script src="${ctx}/js/color.js"></script>
	<script src="${ctx}/js/plugin/highcharts/highchart-ZH.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/json/json2.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/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
	<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
	<script src="${ctx}/js/basic.js"></script>
	<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
	<script src="${ctx}/jspJS/utils/loading.js"></script>
	<script src="${ctx}/jspJS/monitor/trend.js"></script>
	
	<script>
    $("#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);
        });
    });
	</script>
</body>
</html>
