<%@ 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/basic.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: 4px;
        }
        #tipTable,#tipTableAll{
            font-size:10px !important;
        }
        #tipTable td,#tipTableAll td{
            padding: 2px !important;
            vertical-align: center !important;
        }
        #tips,#tipsAll{
            display: none;
            position: absolute;
            top:0px;
            right: 0px;
            z-index: 999;
            background-color: #F9F9F9;
        }
    </style>
</head>
<body>
<%--绝对定位的提示--%>
<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 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 id="message">aaa</div>--%>
<div class="container-fluid">
    <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>
        <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="row">
        <div class="tab-content">
            <div class="tab-pane active" id="frequency">
                <%--区域模块--%>
                <div class="col-sm-5 col-md-5" id="map"></div>
               	<div style="position: relative">
					<button id="helper" type="button" style="z-index: 999;position: absolute;top: 2px;left:25%;" class="btn tip tip-bottom" data-tip="综合评估详解">
						<i class="glyphicon glyphicon-info-sign" style="margin-left: -3px;margin-right: -3px;"></i>
					</button>
               	</div>
                <div class="col-sm-7 col-md-7" >
                            <div class="col-sm-12 col-md-12" id="bar"></div>
                            <div class="col-sm-12 col-md-12" 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}/jspJS/utils/getTime.js"></script>
<script src="${ctx}/jspJS/area/powerCommon.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/js/mapCommon.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/barUtil.js"></script>
<script src="${ctx}/jspJS/overview/powerQuality.js"></script>
<script src="${ctx}/jspJS/utils/helper.js"></script>
<script>
$("#helper").click(function (){
	toHelper("#zhpg");
});  

//点击ul切换页面表格数据
$("#qualifiedTab a").on('click',function () {
    var html=$(this).html();
    parent.$("#target").text(html);
    //执行查询操作并画图
    var urlPart=$(this).prop("id");
    if(urlPart==="vuDev"){
    	$("#helper").css("display", "none");
    }else if (urlPart==="frequencyDeviation"){
    	$("#helper").css("display", "none");
    }else if (urlPart==="vthd"){
    	$("#helper").css("display", "none");
    }else if (urlPart==="vplt"){
    	$("#helper").css("display", "none");
    }else if (urlPart==="vUnbalance"){
    	$("#helper").css("display", "none");
    }else if(urlPart==="allData"){
    	$("#helper").css("display", "");
    }
})
</script>
</body>
</html>
