<%@ 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>
<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" />
<title>报表导出</title>
	<link rel="stylesheet" href="${ctx}/css/plugin/jquery/jquery-ui.css">
<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="${ctx}/css/plugin/jquery/jquery-ui.css">
<link rel="stylesheet" href="${ctx}/css/plugin/metroStyle/metroStyle.css">
<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="${ctx}/js/plugin/layerui/css/layui.css" media="all">
	<link rel="stylesheet" href="${ctx}/css/plugin/fontAwesome/font-awesome.min.css">
<link rel="stylesheet" href="${ctx}/css/plugin/ztree/zTreeStyle.css">
<link rel="stylesheet" href="${ctx}/css/basic.css">
<style type="text/css">
html, body {
	overflow: hidden;
}

#rightContent label {
	max-width: none;
}

.left-menu {
	top: 65px
}

.nav>li>a {
	padding: 3px 15px;
}

.table>tbody>tr>td {
	vertical-align: middle;
}

.layui-form-item {
	margin-bottom: 0px;
}

.layui-form-checked[lay-skin=primary] i {
	background-color: #006565;
}

.layui-form-checkbox[lay-skin=primary]:hover i {
	border-color: #006565;
}

.title {
	border: 1px solid #C9C9C9;
	height: 31px;
	width: 250PX;
	text-align: center;
	line-height: 32px;
}

.title_1 {
	border: 1px solid #C9C9C9;
	height: 31px;
	text-align: center;
	line-height: 32px;
}

.title:hover {
	border: 1px solid #006565;
	height: 31px;
	width: 250PX;
	text-align: center;
	line-height: 32px;
}

.reportPic {
	width: 714px;
	height: 300px;
	display: none;
}
</style>
</head>
<body class="pd10">
	<div class="row" style="background: #fff;">
		<form class="form-inline ml15">
			<div class="form-group has-feedback mr10">
				<label>区域：</label>
				<div class="disinlineb">
		            <input id="area" class="form-control" style="width: 140px" readonly>
		            <i class="fa fa-caret-down areaicon"></i>
		            <i class="fa fa-caret-up treeUpIcon disnone"
		               style="color: #C9CBCE;position: absolute;left: 60px;font-size: 18px;z-index: 9999;top: 20px"></i>
		            <div class=" ztree treeUpDiv disnone " id="areaTree"
		                 style="position: absolute;width: 140px;height: 147px;border: 2px solid #C9CBCE;overflow: auto;top: 32px;background: #fff;z-index: 100;border-radius: 2px">
		            </div>
		        </div>
			</div>
			<%@include file="../../include/time.jsp"%>
			<label class="form-group">模板策略:</label>
			<div class="form-group has-feedback">
				<select class="form-control" id="template">
				</select>
			</div>
			<div class="form-inline pdr15 fr">
				<button type="button" class="btn btn-primary" id="saveReport">
					报告生成</button>
			</div>
		</form>

		<form class="layui-form">
			<div id="myTabContent" class="tab-content">
				<div id="index" class="tab-pane fade in active">
					<div id="jcd-index">
						<div id="rightContent"
							style="position: absolute; left: 10px; right: 20px; top: 65px; bottom: 0; z-index: 1;">
							<table class="table" id="jcd" frame="border" rules="groups"
								style="font-size: 15px; border-collapse: initial;">
								<tr>
									<td align="center">
										<div class="title">监测网分布</div>
									</td>
									<td align="left"><input type="checkbox" id="jcwfb"
										title="图形" lay-skin="primary"></td>
								</tr>
								<tr>
									<td align="center"><div class="title">暂降事件统计</div></td>
									<td align="left"><input type="checkbox" title="表格"
										lay-skin="primary" id="zjsjbg"> <input type="checkbox"
										id="zjsjtx" title="图形" lay-skin="primary"></td>
								</tr>
								<tr>
									<td align="center"><div class="title">暂降密度</div></td>
									<td align="left"><input type="checkbox" id="zjmdbg"
										title="表格" lay-skin="primary"> <input type="checkbox"
										id="zjmdtx" title="图形" lay-skin="primary"></td>
								</tr>
								<tr>
									<td align="center"><div class="title">暂降事件点</div></td>
									<td align="left"><input type="checkbox" id="zjsjditic"
										title="ITIC" lay-skin="primary"> <input
										type="checkbox" id="zjsjdf47" title="F47" lay-skin="primary">
									</td>
								</tr>
								<tr>
									<td align="center"><div class="title">概率分布</div></td>
									<td align="left"><input type="checkbox" id="glfbzjfz"
										title="暂降幅值" lay-skin="primary"> <input
										type="checkbox" id="glfbcxsj" title="持续时间" lay-skin="primary">
									</td>
								</tr>
								<tr>
									<td align="center"><div class="title">事件关联统计</div></td>
									<td align="left"><input type="checkbox" id="sjglbg"
										title="表格" lay-skin="primary"></td>
								</tr>
								<tr>
									<td align="center"><div class="title">暂降原因</div></td>
									<td align="left"><input type="checkbox" id="zjyybg"
										title="表格" lay-skin="primary"> <input type="checkbox"
										id="zjyytx" title="图形" lay-skin="primary"></td>
								</tr>
								<tr>
									<td align="center"><div class="title">暂降类型</div></td>
									<td align="left"><input type="checkbox" id="zjlxbg"
										title="表格" lay-skin="primary"> <input type="checkbox"
										id="zjlxtx" title="图形" lay-skin="primary"></td>
								</tr>
								<tr>
									<td align="center"><div class="title">暂降热力图</div></td>
									<td align="left"><input type="checkbox" id="zjrlt"
										title="图形" lay-skin="primary"></td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
	<div class="reportPic" id="devMap"></div>
	<div class="reportPic" id="timeInterval"></div>
	<div class="reportPic" id="district"></div>
	<div class="reportPic" id="voltage"></div>
	<div class="reportPic" id="density"></div>
	<div class="reportPic" id="itic"></div>
	<div class="reportPic" id="f47"></div>
	<div class="reportPic" id="eventValue"></div>
	<div class="reportPic" id="persisttime"></div>
	<div class="reportPic" id="time"></div>
	<div class="reportPic" id="cause"></div>
	<div class="reportPic" id="type"></div>
	<div class="reportPic" id="eventMap"></div>
	<input type="hidden" id="lineIndex">
	<%--Common Modal --%>
	<script src="${ctx}/js/plugin/jquery.min.js"></script>
	<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
	<script src="${ctx}/js/plugin/layerui/layer.js"></script>
	<script src="${ctx}/js/plugin/layerui/layui.js"></script>
	<script src="${ctx}/js/plugin/xss/xss.js"></script>
	<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.min.js"></script>
	<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
	<script src="${ctx}/js/plugin/echarts3D/echarts.js"></script>
	<script src="${ctx}/js/plugin/echarts3D/echarts-gl.min.js"></script>
	<%--地图 --%>
	<script type="text/javascript" src="${ctx}/js/plugin/map/apiv2.0.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/plugin/map/SearchInfoWindow_min.js"></script>
	<script type="text/javascript" src="${ctx}/js/plugin/map/TextIconOverlay.js"></script>
	<script type="text/javascript" src="${ctx}/js/plugin/map/MarkerClusterer.js"></script>
	<script type="text/javascript" src="${ctx}/js/plugin/map/GeoUtils_min.js"></script>
	<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
	<script src="${ctx}/js/basic.js"></script>
	<script src="${ctx}/jspJS/utils/timeControl.js"></script>
	<script src="${ctx}/jspJS/utils/loading.js"></script>
	<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
	<script src="${ctx}/js/area.js"></script>
	<script src="${ctx}/js/mapCommon.js"></script>
	<script src="${ctx}/jspJS/utils/barUtil.js"></script>
	<script src="${ctx}/js/color.js"></script>

	<script type="text/javascript">
		var devmapImage, intervalImage, districtImage, voltageImage, eventValueImage, persisttimeImage, timeImage, causeImage, typeImage, templateDatas, eventmapImage;
		var itictips, f47tips;
		layui.use('form', function() {
			var form = layui.form;
		});
		var myChart, tolerance, tolerance1;

		$(document).ready(
				function() {
					$.ajax({
			            type: "POST",
			            url: "/pqs9200/user/getAreasInfo",
			            dataType: 'json',
			            success: function (data) {
			                $("#area").val(data[0].name);
			                $("#area").attr("index", data[0].id);
			                areaTree = $.fn.zTree.init($("#areaTree"), settingAreaTree, data);
			            }
			        })

					getTemplate();

					/*先画暂降密度图*/
					var datalist = []
					var sydy = [ '0-10', '10-20',
							'20-30', '30-40',
							'40-50', '50-60',
							'60-70', '70-80',
							'80-90', '90-100' ];
					var cysj = [ '0.02', '0.04',
							'0.06', '0.08', '0.1',
							'0.12~0.2', '0.2~0.4',
							'0.4~0.6', '0.6~1.2' ];
					Harmonic(sydy, cysj, datalist);
				});

		//初始化所有数据
		var allData = new Array();
		/***
		 * 导出报告操作
		 */
		$("#saveReport")
				.click(
						function() {
							var idea;
							idea = ityzl_SHOW_LOAD_LAYER();

							var startTime = $("#startTime").val();
							var endTime = $("#endTime").val();
							var area = $("#area").eq(0).attr("index");
							var nodes = $.fn.zTree.getZTreeObj("areaTree").getSelectedNodes();
							if(nodes == null || nodes.length == 0){
								nodes= $.fn.zTree.getZTreeObj("areaTree").getNodes();
							}
							var areaname = nodes[0].name;
							if ($("#jcwfb").is(":checked")) {
								var jcwfb = true;
							}
							if ($("#zjsjbg").is(":checked")) {
								var zjsjbg = true;
							}
							if ($("#zjsjtx").is(":checked")) {
								var zjsjtx = true;
							}
							if ($("#zjmdbg").is(":checked")) {
								var zjmdbg = true;
							}
							if ($("#zjmdtx").is(":checked")) {
								var zjmdtx = true;
							}
							if ($("#zjsjditic").is(":checked")) {
								var zjsjditic = true;
							}
							if ($("#zjsjdf47").is(":checked")) {
								var zjsjdf47 = true;
							}
							if ($("#glfbzjfz").is(":checked")) {
								var glfbzjfz = true;
							}
							if ($("#glfbcxsj").is(":checked")) {
								var glfbcxsj = true;
							}
							if ($("#sjglbg").is(":checked")) {
								var sjglbg = true;
							}
							if ($("#zjyybg").is(":checked")) {
								var zjyybg = true;
							}
							if ($("#zjyytx").is(":checked")) {
								var zjyytx = true;
							}
							if ($("#zjlxbg").is(":checked")) {
								var zjlxbg = true;
							}
							if ($("#zjlxtx").is(":checked")) {
								var zjlxtx = true;
							}
							if ($("#zjrlt").is(":checked")) {
								var zjrlt = true;
							}

							$
									.ajax({
										type : "POST",
										url : '/pqs9200/report/area',
										data : {
											startTime:startTime,
											endTime:endTime,
											area:area,
											areaname:areaname,
											jcwfb:jcwfb,
											zjsjbg:zjsjbg,
											zjsjtx:zjsjtx,
											zjmdbg:zjmdbg,
											zjmdtx:zjmdtx,
											zjsjditic:zjsjditic,
											zjsjdf47:zjsjdf47,
											glfbzjfz:glfbzjfz,
											glfbcxsj:glfbcxsj,
											sjglbg:sjglbg,
											zjyybg:zjyybg,
											zjyytx:zjyytx,
											zjlxbg:zjlxbg,
											zjlxtx:zjlxtx,
											zjrlt:zjrlt
										},
										dataType : 'json',
										success : function(data) {
											if (data.code == 500) {
												layer.msg(data.message, {
													icon : 2,
													time : 1000
												});
											} else {
												var data = data.body;
												/*监测点分布*/
												initMap(data[6]);
												/*画事件统计图*/
												initDistrict(data[0].area);
												initVoltage(data[0].vol);
												if (data[0].pro === "city") {
													initTimeInterval(data[0].interval);
												} else {
													initTimeIntervalTest(data[0].interval);
												}

												/*先画暂降密度图*/
												var datalist = []
												var sydy = [ '0-10', '10-20',
														'20-30', '30-40',
														'40-50', '50-60',
														'60-70', '70-80',
														'80-90', '90-100' ];
												var cysj = [ '0.02', '0.04',
														'0.06', '0.08', '0.1',
														'0.12~0.2', '0.2~0.4',
														'0.4~0.6', '0.6~1.2' ];
												for (var i = 0; i < data[1].length; i++) {
													var xxx = data[1][i].x;
													var yyy = data[1][i].y;
													var zzz = data[1][i].z;
													datalist[i] = [ xxx, yyy,
															zzz ]
												}
												Harmonic(sydy, cysj, datalist);
												/*开始画ITIC、F47曲线图*/
												allData = data[2];
												initLine();
												/*概率分布的两张图*/
												var eventValue = data[3].eventvalue;
												var persisttime = data[3].persisttime;
												initChance(eventValue,
														persisttime);
												/*按暂降原因统计*/
												var x2 = [];
												var y2 = [];
												for (var i = 0; i < data[4].length; i++) {
													x2.push(data[4][i].cause);
													y2.push(data[4][i].count);
												}
												causeSta(x2, y2);
												/*按暂降类型统计*/
												var x3 = [];
												var y3 = [];
												for (var i = 0; i < data[5].length; i++) {
													x3.push(data[5][i].type);
													y3.push(data[5][i].count);
												}
												typeSta(x3, y3);
												/*暂降热力图*/
												initeventMap(data[7]);
												setTimeout(function(){
												var densityImage = myChart
														.getDataURL();
												var iticImage = tolerance
														.getDataURL();
												var f47Image = tolerance1
														.getDataURL();
												var startTime = $(
														"#startTime").val();
												var endTime = $(
														"#endTime").val();
												$
														.ajax({
															type : 'POST',
															url : '/pqs9200/report/exportAreaReport',
															data : {
																devmapImage:devmapImage,
																intervalImage:intervalImage,
																districtImage:districtImage,
																voltageImage:voltageImage,
																densityImage:densityImage,
																iticImage:iticImage,
																f47Image:f47Image,
																eventValueImage:eventValueImage,
																persisttimeImage:persisttimeImage,
																timeImage:timeImage,
																causeImage:causeImage,
																typeImage:typeImage,
																eventmapImage:eventmapImage,
																itictips:itictips,
																f47tips:f47tips,
																startTime:startTime,
																endTime:endTime
															},
															dataType : 'text',
															success : function(
																	data) {
																//***********关闭loading
																ityzl_CLOSE_LOAD_LAYER(idea);
																var name = nodes[0].name + $("#template").val();
																name=filterXSS(name);
																self.location.href = "/pqs9200/report/downAreaReport?name="
																		+ name;
															}
														});
												},2000)
											}
										}
									})
						});

		function nothing() {}
		var option = null;
		function Harmonic(sydy, cysj, datalist) {
			myChart = echarts.init(document.getElementById('density'));
			option = {
				tooltip : {
					trigger : 'axis'
				},
				title : {
					text : '暂降密度图',
					x : 'center'

				},
				visualMap : {
					max : 20,
					show : false,
					inRange : {
						color : [ '#313695', '#00BB00', '#ff8000', '#a50026' ]
					}
				},
				xAxis3D : {
					type : 'category',
					name : '剩余电压(%)',
					data : sydy
				},
				yAxis3D : {
					type : 'category',
					name : '持续时间(s)',
					data : cysj
				},
				zAxis3D : {
					type : 'value',
					splitNumber : 10,
					minInterval : 10,
					name : '次数'
				},
				grid3D : {
					boxWidth : 200,
					boxDepth : 100,
					light : {
						main : {
							intensity : 1.2
						},
						ambient : {
							intensity : 0.8
						}
					}
				},
				series : [ {
					type : 'bar3D',
			        animation:false,
					data : datalist.map(function(item) {
						return {
							value : [ item[0], item[1], item[2] ]
						}
					}),
					shading : 'realistic',
					label : {
						show : false,
						textStyle : {
							fontSize : 16,
							borderWidth : 1
						}
					},
					itemStyle : {
						opacity : 1
					},
					emphasis : {
						label : {
							textStyle : {
								fontSize : 20,
								color : '#900'
							}
						},
						itemStyle : {
							color : '#900'
						}
					}
				} ]
			}
			// echarts.dispose($("#density")[0]);/**/
			// 使用刚指定的配置项和数据显示图表
			myChart.setOption(option);

		}

		function initLine() {
			var pointI = [];
			var pointIun = [];
			var pointF = [];
			var pointFun = [];
			var iticnum = 0;
			iticunnum = 0;
			var f47num = 0;
			f47unnum = 0;
			if (allData == null) {
			} else {
				for (var i = 0; i < allData.length; i++) {
					var point = [];
					var xx = allData[i].persisttime;
					var yy = allData[i].eventvalue;
					var time = allData[i].time;
					point = [ xx, yy, time ];
					if (xx <= 0.003) {
						var line = 0;
						line = 230 - 30000 * xx;
						if (yy > line) {
						} else {
							pointI.push({
								value : point
							});
							iticnum++;
						}
					} else if (xx <= 0.02) {
						if (yy > 120) {
							pointIun.push({
								value : point
							});
							iticunnum++;
						} else {
							pointI.push({
								value : point
							});
							iticnum++;
						}
					} else if (xx <= 0.5) {
						if (yy > 120 || yy < 70) {
							pointIun.push({
								value : point
							});
							iticunnum++;
						} else {
							pointI.push({
								value : point
							});
							iticnum++;
						}
					} else if (xx <= 10) {
						if (yy > 110 || yy < 80) {
							pointIun.push({
								value : point
							});
							iticunnum++;
						} else {
							pointI.push({
								value : point
							});
							iticnum++;
						}
					} else {
						if (yy > 110 || yy < 90) {
							pointIun.push({
								value : point
							});
							iticunnum++;
						} else {
							pointI.push({
								value : point
							});
							iticnum++;
						}
					}

					if (xx < 0.05) {
						pointF.push({
							value : point
						});
						f47num++;
					} else if (xx < 0.12) {
						if (yy > 50) {
							pointF.push({
								value : point
							});
							f47num++;
						} else {
							pointFun.push({
								value : point
							});
							f47unnum++;
						}
					} else if (xx < 0.16) {
						if (yy > 70) {
							pointF.push({
								value : point
							});
							f47num++;
						} else {
							pointFun.push({
								value : point
							});
							f47unnum++;
						}
					} else {
						if (yy > 80) {
							pointF.push({
								value : point
							});
							f47num++;
						} else {
							pointFun.push({
								value : point
							});
							f47unnum++;
						}
					}
				}
			}
			initItic(pointI, pointIun);
			initF47(pointF, pointFun);

			itictips = "ITIC曲线中可容忍暂降记录为：" + iticnum + "条；不可容忍暂降记录为："
					+ iticunnum + "条，具体见下表（图）：";
			f47tips = "F47曲线中可容忍暂降记录为：" + f47num + "条；不可容忍暂降记录为：" + f47unnum
					+ "条，具体见下表（图）：";
		}

		function initItic(pointI, pointIun) {
			var option = {
				backgroundColor : '#f9f9f9',// 背景色,
				title : {
					text : 'ITIC曲线',
					x : 'center'
				},
				animation : false,
				//控制图标在dataroom中的位置大小
				grid : {
					left : '2%',
					right : '6%',
					bottom : '3%',
					containLabel : true
				},
				legend : {
					data : [ '上限', '下限', '可容忍事件', '不可容忍事件' ],
					selectedMode : false,
					x : 'left'
				},
				xAxis : [ {
					type : 'log',
					min : '0.001',
					max : '1000',
					splitLine : {
						show : false
					},
					name : '(时间:s)'
				} ],
				yAxis : [ {
					type : 'value',
					splitNumber : 10,
					minInterval : 3,
					name : '(%)'
				} ],
				series : [
						{
							name : '可容忍事件',
							type : 'scatter',
							symbolSize : 8,
							symbol : 'circle',
							data : pointI
						},
						{
							name : '不可容忍事件',
							type : 'scatter',
							symbolSize : 8,
							symbol : 'circle',
							data : pointIun
						},
						{
							name : '上限',
							type : 'line',
							data : [ [ 0.001, 200 ], [ 0.003, 140 ],
									[ 0.003, 120 ], [ 0.5, 120 ], [ 0.5, 110 ],
									[ 10, 110 ], [ 100, 110 ], [ 1000, 110 ] ]
						},
						{
							name : '下限',
							type : 'line',
							data : [ [ 0.02, 0 ], [ 0.02, 70 ], [ 0.5, 70 ],
									[ 0.5, 80 ], [ 10, 80 ], [ 10, 90 ],
									[ 100, 90 ], [ 1000, 90 ] ]
						}

				],
				color : [ '#00DB00', '#FF0000', '#FF7E50', '#00E3E3' ]
			};
			echarts.dispose($("#itic")[0]);
			tolerance = echarts.init(document.getElementById('itic'));
			tolerance.setOption(option);
		}

		function initF47(pointF, pointFun) {
			var part = new Array();
			part[0] = [ 0.05, 0 ];
			part[1] = [ 0.05, 50 ];
			part[2] = [ 0.12, 50 ];
			part[3] = [ 0.12, 70 ];
			part[4] = [ 0.16, 70 ];
			part[5] = [ 0.16, 80 ];
			part[6] = [ 10, 80 ];
			part[7] = [ 1000, 80 ];
			var option = {
				backgroundColor : '#f9f9f9',//背景色,
				title : {
					text : 'SEMI F47曲线',
					x : 'center'
				},
				animation : false,
				//控制图标在dataroom中的位置大小
				grid : {
					left : '2%',
					right : '6%',
					bottom : '3%',
					containLabel : true
				},
				legend : {
					data : [ '分割线', '可容忍事件', '不可容忍事件' ],
					selectedMode : false,
					x : 'left'
				},
				xAxis : [ {
					type : 'log',
					min : '0.001',
					max : '1000',
					splitLine : {
						show : false
					},
					name : '(时间:s)'
				} ],
				yAxis : [ {
					type : 'value',
					splitNumber : 10
				} ],
				series : [ {
					name : '可容忍事件',
					type : 'scatter',
					symbolSize : 8,
					symbol : 'circle',
					data : pointF
				}, {
					name : '不可容忍事件',
					type : 'scatter',
					symbolSize : 8,
					symbol : 'circle',
					data : pointFun
				}, {
					name : '分割线',
					type : 'line',
					data : part
				} ],
				color : [ '#00DB00', '#FF0000', '#FF7E50' ]
			};
			echarts.dispose($("#f47")[0]);
			tolerance1 = echarts.init(document.getElementById('f47'));
			tolerance1.setOption(option);
		}

		function initChance(eventValue, persisttime) {
			var option1 = {
				backgroundColor : '#f9f9f9',//背景色,
				title : {
					text : '暂降幅值的概率分布函数',
					x : 'center'
				},
				animation : false,
				legend : {
					show : false,
					data : [ '暂降幅值' ]
				},
				calculable : true,
				xAxis : [ {
					type : 'category',
					boundaryGap : false,
					name : '暂降幅值',
					nameLocation : 'center',
					nameGap : 20,
					nameTextStyle : {
						fontSize : 15
					},
					data : [ '0', '10%', '20%', '30%', '40%', '50%', '60%',
							'70%', '80%', '90%' ]
				} ],
				yAxis : [ {
					type : 'value',
					name : '概率分布',
					nameLocation : 'center',
					nameGap : 40,
					nameTextStyle : {
						fontSize : 15
					},
					axisLabel : {
						formatter : '{value} %'
					}
				} ],
				series : [ {
					name : '暂降幅值',
					type : 'line',
					data : eventValue
				} ]
			};

			var option2 = {
				backgroundColor : '#f9f9f9',//背景色,
				title : {
					text : '持续时间的概率分布函数',
					x : 'center'
				},
				animation : false,
				legend : {
					show : false,
					data : [ '持续时间' ]
				},
				calculable : true,
				xAxis : [ {
					type : 'category',
					boundaryGap : false,
					name : '暂降持续时间(s)',
					nameLocation : 'center',
					nameGap : 20,
					nameTextStyle : {
						fontSize : 15
					},
					data : [ '0', '0.1', '0.25', '0.5', '1', 'inf' ]
				} ],
				yAxis : [ {
					type : 'value',
					name : '概率分布',
					nameLocation : 'center',
					nameGap : 40,
					nameTextStyle : {
						fontSize : 15
					},
					axisLabel : {
						formatter : '{value} %'
					}
				} ],
				series : [ {
					name : '持续时间',
					type : 'line',
					data : persisttime
				} ]
			};
			echarts.dispose($("#eventValue")[0]);
			echarts.dispose($("#persisttime")[0]);
			var eventValueChart = echarts.init(document
					.getElementById('eventValue'));
			eventValueChart.setOption(option1);
			var persisttimeChart = echarts.init(document
					.getElementById('persisttime'));
			persisttimeChart.setOption(option2);
			eventValueImage = eventValueChart.getDataURL();
			persisttimeImage = persisttimeChart.getDataURL();
		}

		function timeSta(interval) {
			echarts.dispose($("#time")[0]);
			var timeChart = echarts.init($("#time")[0]);
			var months = new Array();
			var handle = new Array();
			if (interval != null) {
				for (var i = 0; i < interval.length; i++) {
					if (interval[i].month == "01" | i == 0) {
						months[i] = interval[i].month + "\n("
								+ interval[i].year + ")";
					} else {
						months[i] = interval[i].month;
					}
					handle[i] = interval[i].times;
				}
			}
			var option = {
				backgroundColor : '#f9f9f9',//背景色,
				title : {
					text : '月份统计',
					x : 'center'
				},
				color : [ '#FF7E50' ],
				legend : {
					data : [ '暂降次数' ],
					x : 'left'
				},
				grid : {
					left : '3%',
					bottom : '3%',
					containLabel : true
				},
				xAxis : [ {
					type : 'category',
					data : months,
					name : '月份',
					splitLine : {
						show : false
					},
					axisLabel : {
						show : true,
						interval : 0
					}
				} ],
				yAxis : [ {
					type : 'value',
					name : '次'
				} ],
				series : [ {
					name : '暂降次数',
					type : 'bar',
					barMaxWidth : 50,
					itemStyle : {
						normal : {
							label : {
								show : true,
								textStyle : {
									label : {
										show : true,
										position : 'top'
									},
									color : '#800080'
								}
							}
						}
					},
					data : handle
				} ]
			};
			timeChart.setOption(option);
			timeImage = timeChart.getDataURL();
		}

		function causeSta(xx, yy) {
			echarts.dispose($("#cause")[0]);
			var causeChart = echarts.init($("#cause")[0]);
			var option = {
				backgroundColor : '#f9f9f9',//背景色,
				title : {
					text : '暂降原因',
					x : 'center'
				},
				legend : {
					data : [ '原因' ],
					selectedMode : false,
					x : 'left'
				},
				xAxis : [ {
					type : 'category',
					data : xx,
					splitLine : {
						show : false
					},
					name : '原因'
				} ],
				yAxis : [ {
					type : 'value',
					name : '次'
				} ],
				series : [ {
					name : '原因',
					type : 'bar',
					data : yy,
					itemStyle : {
						normal : {
							label : {
								show : true,
								position : 'top'
							},
							color : '#FF7E50'
						}
					},
					barMaxWidth : 50
				} ]
			};
			causeChart.setOption(option);
			causeImage = causeChart.getDataURL();
		}

		function typeSta(xx, yy) {
			echarts.dispose($("#type")[0]);
			var typeChart = echarts.init($("#type")[0]);
			var option = {
				backgroundColor : '#f9f9f9',//背景色,
				title : {
					text : '暂降类型',
					x : 'center'
				},
				legend : {
					data : [ '类型' ],
					selectedMode : false,
					x : 'left'
				},
				xAxis : [ {
					type : 'category',
					data : xx,
					splitLine : {
						show : false
					},
					name : '类型'
				} ],
				yAxis : [ {
					type : 'value',
					name : '次'
				} ],
				series : [ {
					name : '类型',
					type : 'bar',
					data : yy,
					itemStyle : {
						normal : {
							label : {
								show : true,
								position : 'top'
							},
							color : '#FF7E50'
						}
					},
					barMaxWidth : 50
				} ]
			};
			typeChart.setOption(option);
			typeImage = typeChart.getDataURL();
		}

		//省级查看数据
		function initTimeIntervalTest(interval) {
			echarts.dispose($("#timeInterval")[0]);
			var timetest = echarts
					.init(document.getElementById('timeInterval'));
			var months = [];
			var handle = [];
			var handled = [];
			if (interval != null) {
				for (var i = 0; i < interval.length; i++) {
					if (interval[i].month === "01" | i === 0) {
						months[i] = interval[i].month + "\n("
								+ interval[i].year + ")";
					} else {
						months[i] = interval[i].month;
					}
					handle[i] = interval[i].times;
					if (interval[i].handledTimes != null) {
						handled[i] = interval[i].handledTimes;
					}
				}
			}
			var timeOption = {
				backgroundColor : canvasBG,//背景色,
				title : {
					text : '月份统计',
					x : 'center'
				},
				tooltip : {
					trigger : 'axis',
					axisPointer : {
						type : 'shadow'
					},
					formatter : function(params) {
						var tips = "";
						tips += params[0].name + '月<br/>';
						for (var i = 0; i < params.length; i++) {
							tips += params[i].seriesName + ":"
									+ params[i].value + "<br/>";
						}
						return tips;
					}
				},
				grid : {
					left : '3%',
					bottom : '3%',
					containLabel : true
				},
				legend : {
					data : [ '暂降次数', '已关联处理事件' ],
					x : 'left'
				},
				xAxis : [ {
					type : 'category',
					data : months,
					name : '月份',
					splitLine : {
						show : false
					},
					axisLabel : {
						show : true,
						interval : 0
					}
				} ],
				yAxis : [ {
					type : 'value',
					name : '次'
				} ],
				series : [ {
					name : '暂降次数',
					type : 'bar',
					stack : '事件总数',
					barMaxWidth : barMax,
					itemStyle : {
						normal : {
							color : orange,
							barBorderColor : orange,
							barBorderWidth : 2,
							barBorderRadius : 0
						}
					},
					data : handle
				}, {
					name : '已关联处理事件',
					type : 'bar',
					stack : '事件总数',
					barMaxWidth : barMax,
					itemStyle : {
						normal : {
							color : lightgray,
							barBorderColor : orange,
							barBorderWidth : 2,
							barBorderRadius : 0
						}
					},
					data : handled
				} ]
			};
			timetest.setOption(timeOption);
			intervalImage = timetest.getDataURL();
		}
		//查看地市级数据
		function initTimeInterval(interval) {
			echarts.dispose($("#timeInterval")[0]);
			var timetest = echarts
					.init(document.getElementById('timeInterval'));
			var months = [];
			var handle = [];
			if (interval != null) {
				for (var i = 0; i < interval.length; i++) {
					if (interval[i].month === "01" | i === 0) {
						months[i] = interval[i].month + "\n("
								+ interval[i].year + ")";
					} else {
						months[i] = interval[i].month;
					}
					handle[i] = interval[i].times;
				}
			}
			var timeOption = {
				backgroundColor : canvasBG,//背景色,
				title : {
					text : '月份统计',
					x : 'center'
				},
				tooltip : {
					trigger : 'axis',
					axisPointer : {
						type : 'shadow'
					},
					formatter : function(params) {
						var tips = "";
						tips += params[0].name + '月</br/>';
						for (var i = 0; i < params.length; i++) {
							tips += params[i].seriesName + ":"
									+ params[i].value + "<br/>";
						}
						return tips;
					}
				},
				color : [ orange ],
				legend : {
					data : [ '暂降次数' ],
					x : 'left'
				},
				grid : {
					left : '3%',
					bottom : '3%',
					containLabel : true
				},
				xAxis : [ {
					type : 'category',
					data : months,
					name : '月份',
					splitLine : {
						show : false
					},
					axisLabel : {
						show : true,
						interval : 0
					}
				} ],
				yAxis : [ {
					type : 'value',
					name : '次'
				} ],
				series : [ {
					name : '暂降次数',
					type : 'bar',
					barMaxWidth : barMax,
					itemStyle : {
						normal : {
							label : {
								show : true,
								textStyle : {
									color : purple
								}
							}
						}
					},
					data : handle
				} ]
			};
			timetest.setOption(timeOption);
			intervalImage = timetest.getDataURL();
		}

		//初始化按区域
		function initDistrict(area) {
			if(area == null){
				return;
			}
			var feed,rot;
			if(Number(area.length)>Number(20)){
				feed = noLineFeed;
				rot = 35;
			}else{
				feed = lineFeed;
				rot = barRouteZero;
			}
			echarts.dispose($("#district")[0]);
			var district = echarts.init(document.getElementById('district'));
			var colorLists = [];
			var colorFontLists = [];
			var areas = [];
			var times = [];
			var cityName = $("#area").val();
			if (area != null) {
				for (var i = 0; i < area.length; i++) {
		            areas[i] = area[i].city +lineFeed+ "(" + area[i].amounts + ")";
					times[i] = area[i].times;
					if (area[i].city === cityName) {
						colorLists.push(dackRed);
						colorFontLists.push();
					} else {
						colorLists.push(orange);
						colorFontLists.push(purple);
					}
				}
				if (area.length === 1) {
					colorLists.length = 0;
					colorLists.push(orange);
				}
			}
			var disOption = {
				backgroundColor : canvasBG,
				title : {
					text : '区域统计',
					x : 'center'
				},
				tooltip : {
					trigger : 'axis',
					axisPointer : { // 坐标轴指示器，坐标轴触发有效
						type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					},
					formatter : function(params) {
						var tips = "";
						tips += params[0].name + '</br/>';
						for (var i = 0; i < params.length; i++) {
							tips += params[i].seriesName + ":"
									+ params[i].value + "<br/>";
						}
						return tips;
					}
				},
				//控制图表在dataroom中的位置大小
				grid : {
					left : '3%',
					right : '6%',
					bottom : '3%',
					containLabel : true
				},
				legend : {
					data : [ '暂降次数' ],
					selectedMode : false,
					x : 'left'
				},
				xAxis : [ {
					type : 'category',
					data : areas,
					splitLine : {
						show : false
					},
					name : '地区\n(监测点数)',
		            axisLabel: {
		                interval: 0,
		                show: true,
		                rotate:rot,
		                fontSize:8
		            }
				} ],
				yAxis : [ {
					type : 'value',
					name : '(次)'
				} ],
				series : [ {
					name : '暂降次数',
					type : 'bar',
					itemStyle : {
						normal : {
							color : function(params) {
								var colorList = colorLists;
								return colorList[params.dataIndex]
							},
							label : {
								show : true,
								textStyle : {
									color : purple
								}
							}
						}
					},
					data : times,
					barMaxWidth : barMax
				} ],
			};
			district.setOption(disOption);
			districtImage = district.getDataURL();
		}
		//初始化按电压等级
		function initVoltage(vol) {
			echarts.dispose($("#voltage")[0]);
			var voltage = echarts.init(document.getElementById('voltage'));
			var vols = [];
			var times = [];
			if (vol != null) {
				for (var i = 0; i < vol.length; i++) {
					vols[i] = vol[i].voltageValue + "\n(" + vol[i].amounts
							+ ")";
					times[i] = vol[i].times;
				}
			}
			var volOption = {
				backgroundColor : canvasBG,
				title : {
					text : '电压等级统计',
					x : 'center'
				},
				tooltip : {
					trigger : 'axis',
					axisPointer : { // 坐标轴指示器，坐标轴触发有效
						type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					},
					formatter : function(params) {
						var tips = "";
						tips += params[0].name + '</br/>';
						for (var i = 0; i < params.length; i++) {
							tips += params[i].seriesName + ":"
									+ params[i].value + "<br/>";
						}
						return tips;
					}
				},
				color : [ orange ],
				legend : {
					data : [ '暂降次数' ],
					selectedMode : false,
					x : 'left'
				},
				grid : {
					left : '3%',
					right : '12%',
					bottom : '3%',
					containLabel : true
				},
				xAxis : [ {
					type : 'category',
					data : vols,
					splitLine : {
						show : false
					},
					name : '电压等级\n(监测点数)',
					axisLabel : {
						show : true,
						interval : 0
					}
				} ],
				yAxis : [ {
					type : 'value',
					name : '(次)'
				} ],
				series : [ {
					name : '暂降次数',
					type : 'bar',
					itemStyle : {
						normal : {
							label : {
								show : true,
								textStyle : {
									color : purple
								}
							}
						}
					},
					data : times,
					barMaxWidth : barMax
				} ]
			};
			voltage.setOption(volOption);
			voltageImage = voltage.getDataURL();
		}

		/**
		 *获取模板策略
		 */
		function getTemplate() {
			$.ajax({
				type : "post",
				url : "/pqs9200/report/areaTemplate",
				dataType : "json",
				success : function(data) {
					if (data.code == 500) {
						$("#template").append(
								"<option value='noTemplate'>没有模板策略</option>");
					} else {
						templateDatas = data.body;
						for (var i = 0; i < templateDatas.length; i++) {
							$("#template").append(
									"<option value='"+templateDatas[i].rpName+"'>"
											+ templateDatas[i].rpName
											+ "</option>");
						}
						checkedByTemplate($("#template").val());
					}
				}
			})
		}

		/**
		 * 根据模板策略勾选
		 */
		function checkedByTemplate(templateName) {
			if (templateName != "noTemplate") {
				for (var i = 0; i < templateDatas.length; i++) {
					if (templateDatas[i].rpName === templateName) {
						//执行勾选项
						var rptDatas = templateDatas[i].rptDatas;
						for (var j = 0; j < rptDatas.length; j++) {
							$("#" + rptDatas[j].rdName).prop("checked", true);
							$("#" + rptDatas[j].rdName + "~div:first")
									.addClass("layui-form-checked");
						}
					}
				}
			}
		}

		function initMap(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 totalarea = $("#area").eq(0).attr("index");
			$.ajax({
		        url: '/pqs9200/area/getMapInfo',
		        type: 'post',
		        data: {
		            area: totalarea
		        },
		        async: false,
		        dataType: 'json',
		        success: function (data) {
		            pNode = data.body.name;
		            node = data.body.subName;
		        }
		    })
			var geoJson = getFullMapData(pNode,node);
			echarts.registerMap('监测点分布', geoJson);
			var option = {
				title : {
					text : '监测点分布',
					left : 'left',
					textStyle : {
						color : '#fff'
					}
				},
				tooltip : {
					trigger : 'item'
				},
				legend : {
					data : [ '正常', '中断' ],
					x : 'left',
					show : false
				},
				geo : {
					map : '监测点分布',
					roam : true
				},
				series : [ {
					name : '正常',
					type : 'scatter',
					coordinateSystem : 'geo',
					data : mapnor,
					symbolSize : 5
				}, {
					name : '中断',
					type : 'scatter',
					coordinateSystem : 'geo',
					data : mapbre,
					symbolSize : 5
				} ]
			};
			devmapChart.setOption(option, true);
			devmapImage = devmapChart.getDataURL();

		}

		function initeventMap(data) {
			var maxt = 0;
			var map = [];
			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 = [];
					if (maxt < info.eventcount) {
						maxt = info.eventcount;
					}
					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 ];
					datatmp = datatmp.concat(info.eventcount);
					map.push(datatmp);
				}
			}

			var interval = 0;
			if (maxt <= 10) {
				interval = 1;
			} else if (maxt <= 20) {
				interval = 2;
			} else {
				interval = 5;
			}
			echarts.dispose($("#eventMap")[0]);
			var dom = document.getElementById("eventMap");
			var eventmapChart = echarts.init(dom);
			$.ajaxSettings.async = false;
			var totalarea = $("#area").eq(0).attr("index");
			$.ajax({
		        url: '/pqs9200/area/getMapInfo',
		        type: 'post',
		        data: {
		            area: totalarea
		        },
		        async: false,
		        dataType: 'json',
		        success: function (data) {
		            pNode = data.body.name;
		            node = data.body.subName;
		        }
		    })
			var geoJson = getFullMapData(pNode,node);
			echarts.registerMap('暂降热力图', geoJson);
			var option = {
				title : {
					text : '暂降热力图',
					left : 'left',
					textStyle : {
						color : '#fff'
					}
				},
				grid : {
					left : '10%',
					right : '10%'
				},
				visualMap : {
					min : 0,
					max : maxt,
					splitNumber : interval,
					inRange : {
						color : [ '#d94e5d', '#eac736', '#50a3ba' ].reverse()
					},
					textStyle : {
						color : '#000'
					}
				},
				geo : {
					map : '暂降热力图',
					roam : true
				},
				series : [ {
					name : '监测点',
					type : 'heatmap',
					coordinateSystem : 'geo',
					data : map,
					pointSize : 5,
					blurSize : 6
				} ]
			};
			eventmapChart.setOption(option, true);
			eventmapImage = eventmapChart.getDataURL();

		}
		/**
		 * 模板切换
		 */
		$("#template").change(function() {
			//先清空其他所有的
			$(":checkbox").removeAttr("checked");
			$(".layui-form-checkbox").removeClass("layui-form-checked");
			checkedByTemplate($(this).val());
		});
	</script>
</body>
</html>