<%@ 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>
		<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: 50px;padding-left: 50px">次数</th>
				<th class="text-center">2</th>
				<th class="text-center">3</th>
				<th class="text-center">4</th>
				<th class="text-center">5</th>
				<th class="text-center">6</th>
				<th class="text-center">7</th>
				<th class="text-center">8</th>
				<th class="text-center">9</th>
				<th class="text-center">10</th>
				<th class="text-center">11</th>
				<th class="text-center">12</th>
				<th class="text-center">13</th>
				<th class="text-center">14</th>
				<th class="text-center">15</th>
				<th class="text-center">16</th>
				<th class="text-center">17</th>
				<th class="text-center">18</th>
				<th class="text-center">19</th>
				<th class="text-center">20</th>
				<th class="text-center">21</th>
				<th class="text-center">22</th>
				<th class="text-center">23</th>
				<th class="text-center">24</th>
				<th class="text-center">25</th>
				<th class="text-center">26</th>
				<th class="text-center">27</th>
				<th class="text-center">28</th>
				<th class="text-center">29</th>
				<th class="text-center">30</th>
				<th class="text-center">31</th>
				<th class="text-center">32</th>
				<th class="text-center">33</th>
				<th class="text-center">34</th>
				<th class="text-center">35</th>
				<th class="text-center">36</th>
				<th class="text-center">37</th>
				<th class="text-center">38</th>
				<th class="text-center">39</th>
				<th class="text-center">40</th>
				<th class="text-center">41</th>
				<th class="text-center">42</th>
				<th class="text-center">43</th>
				<th class="text-center">44</th>
				<th class="text-center">45</th>
				<th class="text-center">46</th>
				<th class="text-center">47</th>
				<th class="text-center">48</th>
				<th class="text-center">49</th>
				<th class="text-center">50</th>
			</tr>
			</thead>
		</table>
	</div>
	<div class="xieboTtitle" style="text-align: center; font-size: 20px"
		id="point"></div>
	<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}/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>
		var chart
		$("#container").css("height", $(window).height() - 115);
		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" : "180px"
						}, {
							"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 = 1; i < 50; i++) {
						serName.push([ parseFloat(null) ]);
						number.push([ i + 1 ]);
					}

					//画图
					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 : '谐波电流幅值(A)'
							}
						} ],
						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 + "A"
									return x + '<br>' + y2;
								} else {
									x = "谐波次数：" + this.points[0].x
									y1 = "谐波电流幅值(A):" + this.points[0].y + "A"
									y2 = "国际限值(A):" + this.points[1].y + "A"
									return x + '<br>' + y1+'<br>'+y2;
								}

							}
						},
						plotOptions : {
							column : {
								grouping : false,
								shadow : false,
								borderWidth : 0
							}
						},
						series : [ {
							name : '谐波电流幅值(A)',
							color : green,
							data : serName,
							tooltip : {
								valueSuffix : 'A'
							},
							pointPadding : 0.3,
							pointPlacement : -0.2
						}, {
                            name: '国标限值(A)',
                            color: yellow,
                            data: gb,
                            tooltip: {
                                valueSuffix: 'A'
                            },
                            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']);// 发生时刻

					var s = "时刻：" + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', timepoint);
					$("#timepoint").html(s);

					var vjson = json2['I'];// 电流相关数据,数组
					for (var i = 0; i < vjson.length; i++) {
						var tmplist = vjson[i];
						if (tmplist['SEQ'] == 'A') {
							for (var n = 2; n < 51; n++) {
								var name = 'I' + n;
								data.push(parseFloat((tmplist[name]*1).toFixed(2)));
								tmp.push((parseFloat(tmplist[name])*1).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=2;n<26;n++){
							let str = 'IHARM_'+n;
							gb.push(data.body[str])
						}
						console.log(gb)
						obj.series[1].update({data:gb})
					}else {
						layer.msg(data.message,{icon:2})
					}
				}
			})
		}


	</script>
</body>
</html>
