<%@ 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}/js/plugin/layui/css/layui.css">
<link rel="stylesheet"
	href="${ctx}/css/plugin/metroStyle/metroStyle.css">
<link rel="stylesheet" href="${ctx}/css/basic.css">
<style>
body, html {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
	background-color: #F9F9F9 !important;
}

.nav>li>a {
	padding: 3px 15px;
}
th,td {
	white-space:nowrap;
}
</style>
</head>
<body>
	<div class="container-fluid">
		<div class="header" id="timepoint"
			style="margin-top: 2px; text-align: center; height: 30px;font-weight: bolder;"></div>
	</div>
	<div class="xieboTtitle" style="text-align: center; font-size: 20px"
		id="point"></div>
	<table id="example"
		class="table table-striped table-bordered dataTable no-footer"
		cellspacing="0" id="ss">
		<thead>
			<tr role="row">
				<th class="text-center" style="white-space: nowrap;padding-right: 70px;padding-left: 70px">次数</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">0.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">2.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">3.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">4.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">5.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">6.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">7.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">8.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">9.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">10.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">11.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">12.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">13.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">14.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">15.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">16.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">17.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">18.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">19.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">20.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">21.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">22.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">23.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">24.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">25.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">26.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">27.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">28.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">29.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">30.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">31.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">32.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">33.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">34.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">35.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">36.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">37.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">38.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">39.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">40.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">41.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">42.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">43.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">44.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">45.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">46.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">47.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">48.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">49.5</th>
				<th class="text-center" style="white-space: nowrap;padding-right: 15px;padding-left: 15px">49.5</th>
			</tr>
		</thead>
	</table>
	<div id="container" class="mt10"></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/jquery/jquery.dataTables.js"></script>
	<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
	<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
	<script
		src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.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/loading.js"></script>

	<script>
		var lineIndex = window.parent.parent.parent.document
				.getElementById("lineIndex").value;
		var webSocket = window.parent.parent.parent.parent.webSocket;
		var obj=null;
		var gb = [];
		$(document).ready(
				function() {
					var oTable = $('#example').DataTable({
						info : false,
						paging : false,
						lengthChange : false,
						columns : [ {
							"width" : "130px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}, {
							"width" : "41px"
						}  ],
						ordering : false,
						// autoWidth:true,
						scrollX : true,
						destroy : true,
						language : {
							url : '/pqs9000/json/chine.json',
							"sEmptyTable" : "没有内容"
						},
					})

					var serName = [];
					var number = [];

					for (i = 0; i < 50; i++) {
						serName.push([ parseFloat(null) ]);
						number.push([ i+0.5 ])
					}

					$("#container").css("height", $(window).height() - 115);
					//画图
					var chart = Highcharts.chart('container', {
						chart : {
							type : 'column',
							events : {
								load : function(data) {
									var series = null, chart = this;

										if (obj == null) {
											obj = chart;
										}else{
											chart=obj;
										}

									series=chart.series[0];
									if (data.length > 0) {
										series.update({
											data:data
										});
									}
								}
							}
						},
						credits : {
							enabled : false
						},
						title : {
							text : ''
						},
						xAxis : {
							categories : number
						},
						yAxis : [ {
							min : 0,
							title : {
								text : '间谐波电压含有率(%)'
							}
						} ],
						legend : {
							shadow : false
						},
						tooltip : {
							shared : true,
							formatter : function() {
								var x, y1, y2;
								if (this.points.length == 1) {
									x = "间谐波次数：" + this.points[0].x
									y2 = this.points[0].series.name + ":"
											+ this.points[0].y + "%"
									return x + '<br>' + y2;
								} else {
									x = "间谐波次数：" + this.points[0].x
									y1 = "间谐波电压含有率(%):" + this.points[0].y + "%"
									y2 = "国际限值(%):" + this.points[1].y + "%"
									return x + '<br>' + y1+'<br>'+y2;
								}

							}
						},
						plotOptions : {
							column : {
								grouping : false,
								shadow : false,
								borderWidth : 0
							}
						},
						series : [ {
							name : '间谐波含有率(%)',
							color : green,
							data : serName,
							tooltip : {
								valueSuffix : '%'
							},
							pointPadding : 0.3,
							pointPlacement : -0.2
						}, {
                            name: '国标限值(%)',
                            color: yellow,
                            data: gb,
                            tooltip: {
                                valueSuffix: '%'
                            },
                            pointPadding: 0.4, // 通过 pointPadding 和 pointPlacement 控制柱子位置
                            pointPlacement: -0.2

                        }  ]
					});
					getOverLimit()
					getData();
				})
		Highcharts.setOptions({ global: { useUTC: false } });
		function getData() {
			webSocket.onmessage = function(event) {
				var data = [];
				var tabledata = [];
				var tmp=[];
				tmp.push("间谐波电压含有率(%)");
				 var json0 = $.parseJSON(event.data);
				var rescode = json0['resultcode']
				if(rescode == '10000'){
					var json1 = json0['resultmsg'];
				var json2 = json1[lineIndex];// 监测点数据
				var timepoint = parseInt(json2['TIME']);// 发生时刻
				$("#timepoint").html("时刻：" + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', timepoint));
				var vjson = json2['V'];// 电压相关数据,数组
				for (var i = 0; i < vjson.length; i++) {
					var tmplist = vjson[i];
					if (tmplist['SEQ'] === "A") {
						for (var n = 0; n < 50; n++) {
							var name = 'SV_' + (n+1);
							data.push(parseFloat((tmplist[name]*100/100).toFixed(2)));
							tmp.push((parseFloat(tmplist[name])*100/100).toFixed(2));
						}
					}

				}
				obj.hcEvents.load[0](data);
				tabledata.push(tmp);
				reloadTable(tabledata);
				}
			}
		}

		function reloadTable(tabledata){
			var table = $('#example').DataTable();
			var currentPage = table.page();
			table.clear();
			table.rows.add(tabledata);
			table.page(currentPage).draw( false );
		}

		//获取监测点国标限值
		function getOverLimit() {
			$.ajax({
				type:'get',
				url:'/pqs9000/getOverLimit',
				data:{
					pointIndex:lineIndex
				},
				success:function (data) {
					if(data.code == 200){
						gb = [];
						for(var n=1;n<17;n++){
							let str = 'INUHARM_'+n;
							gb.push(data.body[str])
						}
						obj.series[1].update({data:gb})
					}else {
						layer.msg(data.message,{icon:2})
					}
				}
			})
		}
	</script>
</body>
</html>
