<%@ 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.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.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">
    <link rel="stylesheet" href="${ctx}/css/tip.css">
    <style>
        html, body {
            background-color: #F9F9F9 !important;
            overflow: hidden;
        }

        ul {
            padding: 0 2px;
            border: 1px solid #696969;
            border-radius: 0px;
        }

        .tips {
            color: red;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
        }

        #tipTable, #tipTableAll {
            font-size: 10px !important;
        }

        #tipTable td, #tipTableAll td {
            padding: 2px !important;
            vertical-align: center !important;
        }

        #tips, #tipsAll {
            display: none;
            position: absolute;
            top: 30px;
            right: 0px;
            z-index: 999;
            background-color: #F9F9F9;
        }

        #areaTable {
            width: 100% !important;
        }
        
        #area {
            background-color: #fff !important;
        }

        #treeDemo ul{
            border: transparent !important;
        }
    </style>
</head>
<body>

<%--<div id="message">aaa</div>--%>
<div class="container-fluid">
    <div class="form-inline mt10">
        <div class="form-group has-feedback mr10">
            <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">
            <%@include file="../../include/time.jsp" %>
            <button type="button" class="btn btn-primary " id="query">
                <i class="glyphicon glyphicon-search"></i>
            </button>
			<button id="helper" type="button" class="btn btn-primary tip tip-bottom" data-tip="综合评估详解">
				<i class="glyphicon glyphicon-info-sign" style="margin-left: -3px;margin-right: -3px;"></i>
			</button>
        </div>
        <div class="form-group fr tips">
            <span onMouseOver='divdangerMouseOver()' onMouseOut='divdangerMouseOut()'>详细电能质量评估等级划分</span>
        </div>
        <div id="tips">
            <table id="tipTable" class="table table-striped table-bordered dataTable no-footer">
                <thead>
                <tr>
                    <td>电能指标评估</td>
                    <td>特质</td>
                    <td>优质</td>
                    <td>优良</td>
                    <td>良好</td>
                    <td>轻度污染</td>
                    <td>中度污染</td>
                    <td>重度污染</td>
                    <td>极度污染</td>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <div id="tipsAll">
        <table id="tipTableAll" class="table table-striped table-bordered dataTable no-footer">
            <thead>
            <tr>
                <td>电能指标评估</td>
                <td>极差</td>
                <td>较差</td>
                <td>合格</td>
                <td>良好</td>
                <td>优质</td>
            </tr>
            </thead>
        </table>
    </div>
    <div class="row" style="padding-right: 15px !important;padding-left: 15px !important;">
        <ul class="nav nav-pills nav-justified mt10" id="qualifiedTab" style="border-radius: 3px">
            <li class="active"><a href="#frequency" data-toggle="tab" id="allData">综合评估</a></li>
            <li><a href="#frequency" data-toggle="tab" id="vuDev">电压偏差</a></li>
            <li><a href="#frequency" data-toggle="tab" id="frequencyDeviation">频率偏差</a></li>
            <li><a href="#frequency" data-toggle="tab" id="vthd">谐波含量</a></li>
            <li><a href="#frequency" data-toggle="tab" id="vplt">电压闪变</a></li>
            <li><a href="#frequency" data-toggle="tab" id="vUnbalance">三相电压不平衡度</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="frequency">
                <%--区域模块--%>
                <div class="col-sm-5 col-md-5" id="map"></div>
                <div class="col-sm-7 col-md-7">
                    <div class="width100" id="bar"></div>
                    <div class="width100  " id="table">
                        <table id="areaTable" class="table table-striped table-bordered dataTable no-footer">
                            <thead>
                            <tr>
                                <th>区域</th>
                                <th id="norm">电压偏差</th>
                                <th>等级</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </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/bootstrap/bootstrap.min.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/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}/jspJS/area/powerCommon.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}/js/basic.js"></script>
<script src="${ctx}/js/mapCommon.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/area.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/barUtil.js"></script>
<script src="${ctx}/jspJS/area/powerQuality.js"></script>
<script src="${ctx}/jspJS/utils/helper.js"></script>
<script>
$("#helper").click(function (){
	toHelper("#zhpg");
});
</script>
</body>
</html>
