<%@ 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/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/basicButton.css">
    <style>
        html,body{
            background-color: #F9F9F9 !important;
            overflow-x: hidden;
        }
        .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: 3px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
	<form class="form-inline">
		<div class="form-inline mr10 mt5 fr">
			<button id="btn_trend" type="button" class="btn themeBGColor" style="display:none;">
				<i class="glyphicon glyphicon-object-align-bottom"></i>实时趋势
			</button>
			<button id="btn_deal" type="button" class="btn themeBGColor" style="display:none;">
				<i class="glyphicon glyphicon-object-align-bottom"></i>谐波频谱
			</button>
		</div>
	</form>
    <div class="row">
        <%--实时数据--%>
        <div class="col-sm-12" id="sssj"></div>
    </div>
    <div  style="position:absolute;margin-bottom: 5px;margin-top: -20px;width:100%">
    	<label style="font-weight: bold;font-size: 15px;padding-left: 15%;" class="div-inline">电压有效值</label>
    	<label style="font-weight: bold;font-size: 15px;padding-left: 22%;" class="div-inline">基波电压/电流幅值(相位)</label>
    	<label style="font-weight: bold;font-size: 15px;padding-left: 20%;" class="div-inline">电流有效值</label>
    </div>
    <div id="table" class="col-sm-12">
                                <table id="areaTable" class="table table-striped table-bordered dataTable no-footer"
                                	style="width:100%;cellspacing:0;margin-bottom: 0px;" role="grid" aria-describedby="example_info">
                                    <thead>
                                    <tr role="row">
                                        <th class="table-middle" colspan="3">电压有效值(kV)</th>
                                        <th class="table-middle" colspan="3">电流有效值(A)</th>
                                        <th class="table-middle" colspan="3">基波电压幅值(kV)</th>
                                        <th class="table-middle" colspan="3">基波电压相位(°)</th>
                                        <th class="table-middle" colspan="3">基波电流幅值(A)</th>
                                        <th class="table-middle" colspan="3">基波电流相位(°)</th>
                                    </tr>
                                    <tr>
					            		<th id="title1" class="table-middle"></th>
					            		<th id="title2" class="table-middle"></th>
					            		<th id="title3" class="table-middle"></th>
					            		<th class="table-middle">A相</th>
					            		<th class="table-middle">B相</th>
					            		<th class="table-middle">C相</th>
					            		<th class="table-middle">A相</th>
					            		<th class="table-middle">B相</th>
					            		<th class="table-middle">C相</th>
					            		<th class="table-middle">A相</th>
					            		<th class="table-middle">B相</th>
					            		<th class="table-middle">C相</th>
					            		<th class="table-middle">A相</th>
					            		<th class="table-middle">B相</th>
					            		<th class="table-middle">C相</th>
					            		<th class="table-middle">A相</th>
					            		<th class="table-middle">B相</th>
					            		<th class="table-middle">C相</th>
					            	</tr>
                                    </thead>
                                    <tr>
                                        <td id="data1"></td>
                                        <td id="data2"></td>
                                        <td id="data3"></td>
                                        <td id="data4"></td>
                                        <td id="data5"></td>
                                        <td id="data6"></td>
                                        <td id="data7"></td>
                                        <td id="data8"></td>
                                        <td id="data9"></td>
                                        <td id="data10"></td>
                                        <td id="data11"></td>
                                        <td id="data12"></td>
                                        <td id="data13"></td>
                                        <td id="data14"></td>
                                        <td id="data15"></td>
                                        <td id="data16"></td>
                                        <td id="data17"></td>
                                        <td id="data18"></td>
                                    </tr>
                                    </table>
                                    </div>


    <div id="table2" class="col-sm-12">
                                <table id="areaTable2" class="table table-striped table-bordered dataTable no-footer"
                                	style="width:100%;cellspacing:0;margin-bottom: 0px;" role="grid" aria-describedby="example_info">
                                    <thead>
                                    <tr role="row">
                                        <th class="table-middle" colspan="3">电压偏差(%)</th>
                                        <th class="table-middle" colspan="3">电压总谐波畸变率(%)</th>
                                        <th class="table-middle" colspan="3">电流总谐波畸变率(%)</th>
                                        <th class="table-middle" rowspan="2">电压不平<br/>衡度(%)</th>
                                        <th class="table-middle" rowspan="2">电流不平<br/>衡度(%)</th>
                                        <th class="table-middle" rowspan="2">频率(Hz)</th>
                                    </tr>
                                    <tr>
					            		<th id="title4" class="table-middle"></th>
					            		<th id="title5" class="table-middle"></th>
					            		<th id="title6" class="table-middle"></th>
					            		<th id="title7" class="table-middle"></th>
					            		<th id="title8" class="table-middle"></th>
					            		<th id="title9" class="table-middle"></th>
					            		<th class="table-middle">A相</th>
					            		<th class="table-middle">B相</th>
					            		<th class="table-middle">C相</th>
					            	</tr>
                                    </thead>
                                    <tr>
                                        <td id="sdata1"></td>
                                        <td id="sdata2"></td>
                                        <td id="sdata3"></td>
                                        <td id="sdata4"></td>
                                        <td id="sdata5"></td>
                                        <td id="sdata6"></td>
                                        <td id="sdata7"></td>
                                        <td id="sdata8"></td>
                                        <td id="sdata9"></td>
                                        <td id="sdata10"></td>
                                        <td id="sdata11"></td>
                                        <td id="sdata12"></td>
                                    </tr>
                                </table>
                            </div>
    <div id="table3" class="col-sm-12">
        <table id="areaTable3" class="table table-striped table-bordered dataTable no-footer"
               style="width:100%;cellspacing:0;margin-bottom: 0px;" role="grid" aria-describedby="example_info">
            <thead>
            <tr role="row">
                <th class="table-middle" colspan="4">有功功率(kW)</th>
                <th class="table-middle" colspan="4">无功功率(kVar)</th>
                <th class="table-middle" colspan="4">视在功率(kVA)</th>
                <th class="table-middle" colspan="4">功率因数</th>
                <th class="table-middle" colspan="4">基波功率因数</th>
            </tr>
            <tr>
                <th class="table-middle">A相</th>
                <th class="table-middle">B相</th>
                <th class="table-middle">C相</th>
                <th class="table-middle">总有功功率</th>
                <th class="table-middle">A相</th>
                <th class="table-middle">B相</th>
                <th class="table-middle">C相</th>
                <th class="table-middle">总无功功率</th>
                <th class="table-middle">A相</th>
                <th class="table-middle">B相</th>
                <th class="table-middle">C相</th>
                <th class="table-middle">总视在功率</th>
                <th class="table-middle">A相</th>
                <th class="table-middle">B相</th>
                <th class="table-middle">C相</th>
                <th class="table-middle">总功率因数</th>
                <th class="table-middle">A相</th>
                <th class="table-middle">B相</th>
                <th class="table-middle">C相</th>
                <th class="table-middle">总基波功率因数</th>
            </tr>
            </thead>
            <tr>
                <td id="gdata1"></td>
                <td id="gdata2"></td>
                <td id="gdata3"></td>
                <td id="gdata4"></td>
                <td id="gdata5"></td>
                <td id="gdata6"></td>
                <td id="gdata7"></td>
                <td id="gdata8"></td>
                <td id="gdata9"></td>
                <td id="gdata10"></td>
                <td id="gdata11"></td>
                <td id="gdata12"></td>
                <td id="gdata13"></td>
                <td id="gdata14"></td>
                <td id="gdata15"></td>
                <td id="gdata16"></td>
                <td id="gdata17"></td>
                <td id="gdata18"></td>
                <td id="gdata19"></td>
                <td id="gdata20"></td>
            </tr>
        </table>
    </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/highcharts/highcharts.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/js/plugin/json/json2.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/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/getTime.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/jspJS/monitor/actualData.js"></script>
<script>
</script>
</body>
</html>
