<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>监测网分布</title>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="${ctx}/js/plugin/layerui/css/layui.css"
	media="all">
<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
<link rel="stylesheet"
	href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
<link rel="stylesheet" href="${ctx}/css/basic.css">
<style type="text/css">
html {
	background-color: #fff;
}

thead tr th {
	text-align: center;
	width: 25%;
}
</style>
</head>
<body>
	<div class="container-fluid height100">
		<div class="row height100">
			<div class="col-md-6 height100">
				<div id="devMap" class="width100 height100" style="margin: 0 auto"></div>
			</div>
			<div class="col-md-6 height100 pdt5 pdb15">
				<%--表格数据--%>
				<div
					class="width100 height100 visible-md-inline-block visible-lg-inline-block ">
					<table id="areaTable"
						class="table table-striped table-bordered dataTable no-footer">
						<thead>
							<tr>
								<th>区域</th>
								<th>监测点数</th>
								<th>通讯正常点数</th>
								<th>通讯中断点数</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>

	<script src="${ctx}/js/plugin/jquery.min.js"></script>
	<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
	<script src="${ctx}/js/plugin/bootstrap/jquery.dataTables.min.js"></script>
	<script src="${ctx}/js/plugin/bootstrap/dataTables.bootstrap.min.js"></script>
	<script src="${ctx}/js/plugin/echarts3D/echarts.js"></script>
	<script src="${ctx}/js/plugin/layerui/layui.js"></script>
	<script src="${ctx}/js/color.js"></script>
	<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
    <script src="${ctx}/js/mapCommon.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var picHeight = $(window).height();
			$("#devMap").css("height", picHeight);
			var endTime = getEndTime();
			var startTime = getMonthStartTime(endTime);
			$.ajax({
				type : "POST",
				url : "/pqs9200/area/getDevMap",
				dataType : "text",
				data : {
					startTime : startTime,
					endTime : endTime
				},
				success : function(data) {
					var info = $.parseJSON(data);
					if (info.code == 500) {
						initDevMap(null);
					} else {
						initDevMap(info.body.maps);
						initTable(info.body.online);
					}
				}
			});
		})

		function initDevMap(data) {
			var mapnor = [];
			var mapbre = [];
			var tmpmap = {};
			for (var i = 0; i < data.length; i++) {
				//获取变电站名称（key，由变电站名称，经度，纬度组成：事例：变电站1,123.00,135.00）
				var key = data[i].subname + "," + data[i].longitude + ","
						+ data[i].latitude;
				//假如key已经存在了
				if (tmpmap[key]) {
					var tmpdata = tmpmap[key];
					tmpdata.push(data[i]);
				} else {
					var tmpdata = [];
					tmpdata.push(data[i]);
					tmpmap[key] = tmpdata;
				}
			}

			//根据分组后的监测点进行偏移算法
			var r = 0.035;
			for (tmpkey in tmpmap) {
				var arr = tmpmap[tmpkey];
				var tmplength = arr.length;
				var norarr = [];
				var brearr = [];
				for (var i = 0; i < tmplength; i++) {
					var info = arr[i];
					var datatmp = [];
					info.longitude = (info.longitude + r
							* Math.cos(2 * Math.PI * (i) / tmplength))
							.toFixed(3);
					info.latitude = (info.latitude + r
							* Math.sin(2 * Math.PI * (i) / tmplength))
							.toFixed(3);
					datatmp = [ info.longitude, info.latitude ];
					if (info.status == 1) {
						mapnor.push({
							value : datatmp,
							itemStyle : {
								normal : {
									color : green
								}
							}
						});
					} else {
						mapbre.push({
							value : datatmp,
							itemStyle : {
								normal : {
									color : red
								}
							}
						});
					}
				}
			}

			echarts.dispose($("#devMap")[0]);
			var dom = document.getElementById("devMap");
			var devmapChart = echarts.init(dom);
			$.ajaxSettings.async = false;
			var geoJson = getFullMapData();
			echarts.registerMap('监测网分布', geoJson);
			var option = {
				backgroundColor : '#fff',
				title : {
					text : '监测网分布',
					left : 'center'
				},
				legend : {
					data : [ '正常', '中断' ],
					x : 'left',
					y : 'bottom',
					orient : 'vertical',
					show : true
				},
				geo : {
					map : '监测网分布',
					label : {
						normal : {
							show : true,
							textStyle : {
								color : '#999',
								fontSize : 10
							}
						}
					},
					roam : false
				},
				series : [ {
					name : '正常',
					type : 'scatter',
					coordinateSystem : 'geo',
					data : mapnor,
					symbolSize : 5
				}, {
					name : '中断',
					type : 'scatter',
					coordinateSystem : 'geo',
					data : mapbre,
					symbolSize : 5
				} ],
				color : [ green, red ]
			};
			devmapChart.setOption(option, true);
		}

		function initTable(data) {
			var heightTemp = screen.height;
			var height = heightTemp / 864;
			height = height * 450;
			if (heightTemp === 768) {
				height = 160;
			}
			if (data == null) {
				data = [];
			}
			$("#areaTable").DataTable({
				data : data,
				autoWidth : false,
				columnDefs : [ {
					"width" : "25%",
					"targets" : 0
				}, {
					"width" : "25%",
					"targets" : 1
				}, {
					"width" : "25%",
					"targets" : 2
				}, {
					"width" : "25%",
					"targets" : 3
				} ],
				order : [ 1, "desc" ],
				paging : false,
				lengthChange : false,
				searching : false,
				destroy : true,
				scrollY : height,
				info : false,
				pageLength : 100,
				language : {
					url : '/pqs9200/json/chine.json',
				},
				columns : [ {
					data : 'name'
				}, {
					data : 'amounts'
				}, {
					data : 'oncount'
				}, {
					data : 'offcount'
				} ],
			})
		}

		function getEndTime() {
			var now = new Date();
			var sep = "-";
			var year = now.getFullYear();
			var month = now.getMonth() + 1;
			if (month < 10) {
				month = "0" + month;
			}
			var date = now.getDate();
			if (date < 10) {
				date = "0" + date;
			}
			//拼接当前的日期
			var endTime = year + sep + month + sep + date;
			return endTime;
		}

		//获取起始日期
		function getStartTime(endTime) {
			var now = new Date();
			var sep = "-";
			var arr = endTime.split("-");
			var year = arr[0];
			var month = "01";
			var date = "01";
			var startTime = year + sep + month + sep + date;
			return startTime;
		}
	</script>
</body>
</html>