<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp" %>
<%@page import="java.util.*"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="shortcut icon" href="${ctx}/images/favicon.ico">
		<link rel="stylesheet" type="text/css" href="${ctx}/css/indexNew/jquery.monthpicker.css"> <!--选月份的样式-->
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/base.css" />
		<!-- <link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/all.css" /> -->
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/perfect-scrollbar.css" />
		
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/static.css" />
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/newCss/top.css">
		
		<title>打假通</title>
		<style>
			.bg1 {
			    overflow: auto;
			}
			.allNumber {
			    width: 25%;
			}
			.allNumber1 {
			    width: 19%;
			}
			#statisExport{
				position: absolute;
				right: 20px;
				top: 60px;
				background-color: rgba(0,222,223,0.5);
				color: #fff;
				padding: 5px;
				width: 30px;
				height: 30px;
				border-radius: 30px;
				line-height: 30px;
				cursor: pointer;
			}
			#statisExport:hover{ 
				background-color:#286090;
			}
			.headRight {
			    line-height: 40px;
			}
			/*年份可选的数据*/
			ul.selResult li {
			    float: left;
			    width: 24%;
			    text-align: center;
			    border-right: 1px solid #11576b;
			}
			ul.selResult li:last-child {
			    border-right: none;
			}
			.selResult li p{
				line-height: 30px;
			}
			.selResult{
				overflow: hidden;
				padding: 10px;
			}
			.myNum {
			    font-size: 20px;
			    font-weight: bold;
			}
			.pictureRange span, .modelRange span {
			    padding: 3px 10px;
			    /*border: 1px solid #0B2F48;*/
			    border-radius: 5px;
			    cursor: pointer;
			}
			.btn{
				padding: 3px 5px;
			    background: #0097e5;
			    border-radius: 3px;
			    color: #eee;
			    cursor: pointer;
			    margin-left: 5px;
			    vertical-align: middle;
			}
			/*规则选择弹出框*/
			.backg {
			    position: fixed;
			    top: 0;
			    left: 0;
			    right: 0;
			    bottom: 0;
			    overflow-y: auto;
			    -webkit-perspective: 500px;
			    perspective: 500px;
			    -webkit-perspective-origin: center;
			    perspective-origin: center;
			    background: rgba(22, 20, 60, 0.7);
			    justify-content: center;
			    display: flex;
			    align-items: center;
			    color: #fff;
			    z-index: 20000;
			}
			.filterType {
			    max-width: 500px;
			    height: 380px;
			    background: #0A1531;
			    box-shadow: 3px 4px 10px #999;
			    border-radius: 5px;
			}
			p.filter_title {
			    line-height: 30px;
			    padding: 10px 0 0 15px;
			    font-size: 16px;
			    border-bottom: 1px solid #7a8baa;
			    white-space: nowrap;
			    overflow: hidden;
			    text-overflow: ellipsis;
			}
			span.rule_sel {
			    padding: 0px 10px;
			    background: #0097e5;
			    border-radius: 3px;
			}
			.sel_con {
			    margin: 15px;
			    height: 275px;
			}
			.sel_con ul li {
			    padding: 3px 0px;
			    white-space: nowrap;
			    overflow: hidden;
			    text-overflow: ellipsis;
			}
			.confirmBtn {
			    display: flex;
			    justify-content: center;
			    align-items: center;
			}
			input.confirm_btn, input.delete_btn {
			    border: none;
			    padding: 5px 10px;
			    color: #fff;
			    border-radius: 3px;
			}
			input.confirm_btn {
			    background-color: #337ab7;
			    margin-right: 10px;
			}
			input.delete_btn {
			    background-color: #F56904;
			}
		</style>
	</head>
	<body class="bg1">
		<!--头部-->
		<div class="headCon">
			<jsp:include page="../top2.jsp">
				<jsp:param name="index" value="统计" />
			</jsp:include>
		</div>
		<hna:permission privilege="sysTask.statisExport">
		<div id="statisExport">
			导出
		</div>
		</hna:permission>
		<div class="clear"></div>
		
		<!--内容-->
		<div class="fullScren">
			<div class="container">
				<div class="block">
					<div class="allNumber involve_m">
						<div class="factorCon">
							<img class="block_l" src="${ctx}/images/indexNew/moneysj.png">
							<div class="block_r">
							    <p><b id="sjje" data-type="sjje">0</b></p>
							    <p>模型涉案总金额</p>
							</div>
						</div>
					</div>
					<div class="allNumber reduce_m">
						<div class="factorCon">
							<img class="block_l" src="${ctx}/images/indexNew/moneyback.png">
							<div class="block_r">
							   <p><b id="ajzs" data-type="ajzs">0</b></p>
							   <p>可疑案件总数</p>
							</div>
						</div>	
					</div>
					<!-- <div class="allNumber caseNum">
						<div class="factorCon">
							<img class="block_l" src="${ctx}/images/indexNew/allCase.png">
							<div class="block_r">
							    <p><b id="ajzs" data-type="ajzs">0</b></p>
							    <p>可疑报案总数</p>
							</div>
						</div>	
					</div> -->
					<div class="allNumber renNum">
						<div class="factorCon">
							<img class="block_l" src="${ctx}/images/indexNew/interactivity.png"><!-- allPeople.png -->
							<div class="block_r">
								<p><b id="jhl" data-type="jhl">0</b></p>
							    <p>交互量</p>
							   <!--  <p><b id="kyrnzs" data-type="kyrnzs">0</b></p>
							    <p>标注可疑人物总数</p>
							    <p><b id="qzrnzs" data-type="qzrnzs">0</b></p>
							    <p style="margin-left:50px;">标注欺诈人物总数</p> -->
							</div>
						</div>	
					</div>
					<div class="allNumber1 userNum">
						<div class="factorCon">
							<img class="block_l" src="${ctx}/images/indexNew/allUser.png">
							<div class="block_r">
							    <p><b id="yhzs" data-type="yhzs">0</b></p>
							    <p>用户总数</p>
							</div>
						</div>
					</div>
				</div>
				<!--可选年份数据-->
				<div class="block">
					<div class="backg2">
						<div class="selectYear" style="margin: 10px 0 0 10px;">
							<span class="model_sel" style="color: #666;">
								<label style="color: #fff;">可选年份：</label>
								<select style="border-radius:3px;" id="yearChages">
									<option data-year="2018">2018</option>
									<option data-year="2017">2017</option>
									<option data-year="2016">2016</option>
									<option data-year="2015">2015</option>
									<option data-year="2014">2014</option>
								</select>
							</span>
							<span class="btn year_sel" data-id="yearChages">确定</span>
						</div>
						<ul class="selResult">
							<li><p>可疑案件金额</p><p class="myNum" id="kyajje" data-type="kyajje">0</p></li>
							<li><p>欺诈案件金额</p><p class="myNum" id="qzajje" data-type="qzajje">0</p></li>
							<li><p>可疑人物总数</p><p class="myNum" id="kyrwzs" data-type="kyrwzs">0</p></li>
							<!-- <li><p>欺诈人物总数</p><p class="myNum" id="qzrwzs" data-type="qzrwzs">2435</p></li> -->
							<li><p>追偿金额</p><p class="myNum" id="zcje" data-type="zcje">0</p></li>
						</ul>
					</div>
				</div>
				<div class="block">
					<div class="hotMark backg2" style="width:60%;">
						<p class="title">近一个月活跃用户</p>
						<div class="timeRange">
							<span data-time="7" data-string="Week">一周</span>
							<span class="active" data-time="30" data-string="Month">一个月</span>
							<span data-time="180" data-string="halfYear">半年</span>
						</div>
						<div class="basicTab td50" id="" style="position:relative;">
							<table style="border:none" id="hotUser">
								<thead>
									<tr>
										<th>排名</th><th>用户名称</th><th>P13账号</th><th>部门</th><th>公司</th><th>活跃指数</th>
									</tr>
								</thead>
								<tbody>
									
								</tbody>
							</table>
						</div>
					</div>
					<div class="user_pic backg2" style="height:460px;width:38%;">
						<p class="title">用户Top 10统计</p>
						<div>
							<div id="user" style="height:420px;width:100%;">
								
							</div>
						</div>
					</div>
				</div>
				
				<div class="block">
					<div class="case_pic backg2" style=""><!--height:351px;-->
						<p class="title">当月串案模型案件相关图</p>
						<!--可选时间-->
						<div class="monthSelect" style="color: #666;margin: 10px 0 0 10px;">
							<span>
								<label style="color: #eee;">可选择月份：</label>
								<input type="text" class="input" id="case_month">
							</span>
							<span class="model_sel">
								<select style="border-radius:3px;">
									<option data-model="floop">串案模型</option>
									<option data-model="special">专项模型</option>
								</select>
							</span>
							<span class="confirm-btn" data-id="case_month">确定</span>
						</div> 
						<div id="cateGroup" style="height:200px;width:100%;">
							
						</div>	
						<!--金额与标注切换，2018-06-04-->
						<div class="pictureRange" style="margin: 15px 0px 10px 10px;">
							<span class="active" data-string="markRate">标注比</span>
							<span data-string="moneyRate">金额比</span>
						</div>					
						<div id="smallpie" style="height:130px;"></div>
					</div>
					<!--隐藏了的，可以不要了-->
					<div class="case_add backg2" style="height:351px;display: none;" >
						<p class="title">案件增长</p>
						<div id="caseNum" style="height:250px;width:100%;"></div>
						<div class="innerContentBox" id="caseNumDes">
							<span>本月案件数：<b>2000</b>件</span>
							<span style="margin-left:15px;">比上月增长：<b>5%</b></span>
						</div>
					</div>
				</div>
				<!-- 专项模型，2018-5-22 -->
				<!-- <div class="block">
					<div class="case_pic backg2" style="">
						<p class="title">当月专项模型案件相关图</p>
						<div class="monthSelect" style="color: #666;margin: 10px 0 0 10px;">
							<label style="color: #eee;">可选择月份：</label>
							<input type="text" class="input" id="modal_month">
							<span class="confirm-btn" data-id="modal_month">确定</span>
						</div> 
						<div id="modalCaseGroup" style="height:200px;width:100%;">
							
						</div>						
						<div id="modalCaseSmallpie" style="height:130px;"></div>
						<div id="modalCaseMoney" style="height:200px;"></div>
					</div>
				</div> -->
				<div class="block">
					<div class="typeTimeNum backg2">
						<p class="title">当前月标注趋势</p>
						<!--可选时间-->
						<div class="monthSelect" style="color: #666;margin: 10px 0 0 10px;">
							<label style="color: #eee;">可选择月份：</label>
							<input type="text" class="input" id="mark_month">
							<span class="confirm-btn" data-id="mark_month">确定</span>
						</div> 
						<div id="caseMark" style="height:320px;width:100%;">
							
						</div>
						<div class="markNum" style="overflow:hidden;margin: 15px;">
							<div style="float:left;margin-right: 5%;">
								当月总的标注量：
								<span class="allmarkNum" id="bz" style="font-size:20px;color:#fb7312;">0</span>
							</div>
							<div style="float:left;">
								当月总的处理量：
								<span class="alldealNum" id="cl" style="font-size:20px;color:#fb7312;">0</span>
							</div>
						</div>
					</div>
				</div>
				<div class="block">
					<div class="typeTimeNum backg2">
						<p class="title">近30天类型统计<span style="float:right;" class="rule_sel" data-block="30day"></span></p>
						<!--模型切换，2018-06-05-->
						<div class="modelRange" style="margin: 15px 0px 10px 10px;">
							<span class="active" data-model="floop">串案模型</span>
							<span data-model="special">专项模型</span>
						</div>
						<div id="cateTime" style="height:200px;width:100%;">
							
						</div>
						<div class="basicTab">
							<table border="1"> 
								<thead id="theadCon">
									
								</thead>
								<tbody id="tbodyCon">
									
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="block">
					<div class="hotMark backg2">
						<p class="title">近一周热区标识</p>
						<div class="basicTab td50" id="isScroll2" style="position:relative;">
							<table style="border:none" id="hotRang2">
								<thead>
									<tr>
										<th>排名</th><th>实体名称</th><th>查询次数</th>
									</tr>
								</thead>
								<tbody id="hotM">
									
								</tbody>
							</table>
						</div>
					</div>
					<div class="user_pic backg2">
						<p class="title">近一个月系统使用频次</p>
						<div>
							<div id="userOperate" style="height:420px;width:100%;">
								
							</div>
						</div>
					</div>
				</div>				
			</div>
		</div>
		<div class="backg" style="display:none;" id="selRule">
			<div class="filterType" style="height: 395px;">
				<p class="filter_title overflowEllipsis"><span class="filter_titleCon">规则选择</span></p>
				<div class="sel_con">
					<ul>
						<li><input type="checkbox" class="check_box" data-modelid="1" data-ruleid="1">同一电话报案2次及以上人伤案件</li>
						<li><input type="checkbox" class="check_box" data-modelid="1" data-ruleid="2">同一伤者在不同案件中出现次数大于等于2次</li>
						<li><input type="checkbox" class="check_box" data-modelid="1" data-ruleid="4">同一车牌号出险次数3次以上的人伤案件</li>
						<li><input type="checkbox" class="check_box" data-modelid="2" data-ruleid="8">夜间出险的车险人伤案件</li>
						<li><input type="checkbox" class="check_box" data-modelid="2" data-ruleid="16">人伤损失较小，车损较大</li>
					</ul>
				</div>
				<div class="confirmBtn">
					<input type="button" class="confirm_btn" value="确定">
					<input type="button" class="btn delete_btn" value="取消">
				</div>
			</div>
		</div>
		
		<script src="${ctx}/js/lib/jquery-1.11.1.min.js"></script>
		<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
		<script src="${ctx}/js/lib/echarts.min.js"></script>
		<script src="${ctx}/js/lib/countUp.js"></script>
		<script type="text/javascript" src="${ctx}/js/lib/clipboard.min.js"></script>
		<!-- <script src="${ctx}/js/page/macarons.js"></script> -->
		<script src="${ctx}/js/lib/jquery.monthpicker.js"></script> <!--选月份的插件-->
		<script src="${ctx}/js/lib/core.js"></script>
		
		<script>
			var dateMonth="";
			var changeId="";
			var rateData="";//金额比和标注比的数据
			(function(){
				//全选
				$(".check_all").click(function(){
					if(this.checked){
						$(".check_box").prop("checked",true);
					}else{
						$(".check_box").prop("checked",false);
					}		
				});
				//判断是否全选
				$("#filterCon").delegate(".check_box","click",function(){
					var n=0;
					$(".check_box").each(function(){
						if(this.checked){
							n++;
						}
					});
					if(n==$(".check_box").size()){
						$(".check_all").prop("checked",true);
					}else{
						$(".check_all").prop("checked",false);
					}
				});
				$(".block").delegate(".rule_sel","click",function(){
					var block=$(this).data("block");
					$("#selRule").data("block",block);
					$("#selRule").show();
				})
				/*$(".rule_sel").click(function(){
					var block=$(this).data("block");
					$("#selRule").data("block",block);
					$("#selRule").show();
				})*/
				$("#selRule .confirm_btn").click(function(){
					var data=[];
					$(".check_box").each(function(){
						if(this.checked){
							data.push({"ruleId":$(this).data("ruleid"),"modelId":$(this).data("modelid")});
						}
					});
					var block=$("#selRule").data("block");
					if(data.length<=0){
						alert("请选择需要展示的数据！");
					}
					if(block=="casePic"){
						alert(block);
					}else{//30day
						alert(block);
					}
					console.log(data);
					$("#selRule").hide();
				})
				$(".confirmBtn .delete_btn").click(function(){
					$("#selRule").hide();
				})
				//时间的切换
				$(".timeRange span").click(function(){
					$(".timeRange").children().removeClass("active");
					$(this).addClass("active");
					var timeval = $(this).data("time");
					var st = $(this).data("string");
					var ht="近"+$(this).text()+"活跃用户";
					$(this).parent().parent().find("p").html(ht);
					$.ajax({
						type:"POST",
						url:"${ctx}/sysTask/analyzePage/6.do",
						data:{date:timeval},
						success:function(result){
							hotUser(result);
							
						}
					});
				})
				//近30天类型统计切换,2018-06-05
				$(".modelRange span").click(function(){
					$(".modelRange").children().removeClass("active");
					$(this).addClass("active");
					var model=$(this).data("model");
					var ht="近30天"+$(this).text()+"类型统计";
					if($(this).text()=="专项模型"){
						ht+='<span style="float:right;" class="rule_sel" data-block="30day">规则选择</span>';
					}
					
					$(this).parent().parent().find("p").html(ht);
					if(model=="floop"){
						$.ajax({
							type:"POST",
							url:"${ctx}/sysTask/analyzePage/34.do",
							data:{},
							success:function(result){
								setCateTime(result.data3);
								setCaseTable(result.data4);
							},
							error:function(){

							}
						});
					}else{
						$.ajax({
							type:"POST",
							url:"${ctx}/sysTask/analyzePage/340.do",
							data:{},
							success:function(result){
								setCateTime(result.data3);
								setCaseTable(result.data4);
							},
							error:function(){

							}
						});
						/*var result={
							"data4": {
								"data": [
									{
										"data": {
											"同一电话": {
												"fraud": 18,
												"name": "同一电话",
												"suspicious": 95
											},
											"同一伤者": {
												"fraud": 1,
												"name": "同一伤者",
												"suspicious": 4
											},
											"同一车牌": {
												"fraud": 1,
												"name": "同一车牌",
												"suspicious": 13
											},
											"机器学习": {
												"fraud": 3,
												"name": "机器学习",
												"suspicious": 24
											},
											"天眼1": {
												"fraud": 15,
												"name": "天眼1",
												"suspicious": 84
											},
											"天眼2": {
												"fraud": 20,
												"name": "天眼2",
												"suspicious": 50
											},
											"天眼3": {
												"fraud": 40,
												"name": "天眼3",
												"suspicious": 70
											}
										},
										"time": "2018-05-08"
									}
								],
								"title": [			
									"同一电话",
									"同一伤者",
									"同一车牌",
									"机器学习",
									"天眼1",
									"天眼2",
									"天眼3"
								]
							},
							"data3": {
								"legend": [
									"同一电话",
									"同一伤者",
									"同一车牌",
									"机器学习",
									"天眼1",
									"天眼2",
									"天眼3"
								],
								"x": [
									"2018-05-08"
								],
								"y": {
									"同一电话": [
										169
									],
									"同一伤者": [
										14
									],
									"同一车牌": [
										20
									],
									"机器学习": [
										52
									],
									"天眼1": [
										142
									],
									"天眼2": [
										167
									],
									"天眼3": [
										66
									]
								}
							}
						};
						setCateTime(result.data3);
						setCaseTable(result.data4);*/
					}
					
				});
				//当月案件相关图中的小饼图的金额比和标注比
				$(".pictureRange span").click(function(){
					$(".pictureRange").children().removeClass("active");
					$(this).addClass("active");
					var rate=$(this).data("string");
					if(rate=="markRate"){
						smallpieG(rateData.data7);
					}else{//moneyRate
						/*var data=[{fraudRate: 0, total: 148, fraud: 0, name: "同一电话", suspicious: 3, suspiciousRate: 2},{fraudRate: 0, total: 148, fraud: 0, name: "同一伤者", suspicious: 3, suspiciousRate: 2},{fraudRate: 0, total: 148, fraud: 0, name: "同一车牌", suspicious: 3, suspiciousRate: 2}];*/
						smallpieG(rateData.data0);/*rateData.data0*/
					}
				})
				//标注趋势月份可选
				var time = new Date();
				var ye = time.getFullYear(),mo=(time.getMonth() + 1)<9?"0"+(time.getMonth() + 1):(time.getMonth() + 1);
				var reTime=ye+"-"+mo;				
				var year=[];
				for(var i=0;i<5;i++){
					year.push(ye);
					ye--;
				}
				//5年可选择数据切换,2018-6-05
				var opt='';
				for(var i=0;i<year.length;i++){
					if(i==0){
						opt+='<option data-year="'+year[i]+'" selected="selected">'+year[i]+'</option>';
					}else{
						opt+='<option data-year="'+year[i]+'">'+year[i]+'</option>';
					}
				}
				$("#yearChages").html(opt);
				//年份可选
				$(".year_sel").click(function(){
					var year_val=$("#"+$(this).data("id")+" option:selected").data("year");
					$.ajax({
			    		type:"POST",
			    		url:"${ctx}/sysTask/analyzePage/00.do",
			    		data:{date:year_val},
			    		success:function(result){
			    			setNumChange(result);				    			
			    		}
			    	});
				})

				//标注趋势
				$('#mark_month').attr("value",reTime);
				$('#mark_month').monthpicker({ 
			        years: year, 
			        topOffset: 6, 
			        onMonthSelect: function(m, y) { 
			          console.log('Month: ' + m + ', year: ' + y); 
			        } 
			    }); 
			   //多个小饼图的月份可选 
			   $('#case_month').attr("value",reTime);
			   $('#case_month').monthpicker({ 
			        years: year, 
			        topOffset: 6, 
			        onMonthSelect: function(m, y) { 
			          console.log('Month: ' + m + ', year: ' + y); 
			        } 
			    });
			   //专项模型相关图，2018-5-22 
			   $('#modal_month').attr("value",reTime);
			   $('#modal_month').monthpicker({ 
			        years: year, 
			        topOffset: 6, 
			        onMonthSelect: function(m, y) { 
			          console.log('Month: ' + m + ', year: ' + y); 
			        } 
			    });
			    //点击确定切换，
			    $(".confirm-btn").click(function(){
			    	var idVal=$("#"+$(this).data("id")).val();
			    	changeId=$(this).data("id");
			    	if($(this).data("id")=="mark_month"){ //标注趋势月份可选
			    		var ht=idVal+"标注趋势";
			    		$(this).parent().parent().find("p").html(ht);
			    		caseMarkChart.showLoading();
				    	$.ajax({
				    		type:"POST",
				    		url:"${ctx}/sysTask/analyzePage/7.do",
				    		data:{date:idVal},
				    		success:function(result){
				    			setCaseMark(result);				    			
				    		}
				    	});
				    }else if($(this).data("id")=="case_month"){  //多个小饼图
				    	//默认标注比
				    	$(".pictureRange").children().removeClass("active");
						$(".pictureRange span:first-child").addClass("active");
				    	//alert("多个小饼图");
				    	var model_sel=$(this).parent().find(".model_sel select option:selected").data("model");
				    	var model_val=$(this).parent().find(".model_sel select option:selected").text();
				    	var ht=idVal+model_val+"案件相关图";
				    	if(model_val="专项模型"){
				    		ht+='<span style="float:right;" class="rule_sel" data-block="casePic">规则选择</span>';
				    	}
				    	cateGroupChart.showLoading();
				    	smallpie.showLoading();
				    	$(this).parent().parent().find("p").html(ht);
				    	if(model_sel=="floop"){
					    	$.ajax({
					    		type:"POST",
					    		url:"${ctx}/sysTask/analyzePage/27.do",
					    		data:{date:idVal},
					    		success:function(result){
					    			rateData=result;
					    			setCateGroup(result.data2);
									smallpieG(result.data7);
									
					    		}
					    	});
				    	}else{
				    		$.ajax({
					    		type:"POST",
					    		url:"${ctx}/sysTask/analyzePage/270.do",
					    		data:{date:idVal},
					    		success:function(result){
					    			rateData=result;
					    			setCateGroup(result.data2);
									smallpieG(result.data7);
					    		}
					    	});
				    	}
				    	
				    }				    	
			    })
			   //单击点击复制内容
				var clipboard = new Clipboard("body .cocyCon");
				//复制成功执行的回调，可选
				clipboard.on('success', function(e) {
					var left = getLeft(e.trigger)-28;
					var top = getTop(e.trigger)+27;
					$(".tooltips1").remove();
					$("body").append('<div class="tooltips1">复制成功! </div>');
					$(".tooltips1").css({top:top,left:left});
					setTimeout(function(){
						$(".tooltips1").remove();
					},1000);
				});

				//复制失败执行的回调，可选
				clipboard.on('error', function(e) {
					var left = getLeft(e.trigger)-28;
					var top = getTop(e.trigger)+27;
					$(".tooltips1").remove();
					var flag = Clipboard.isSupported();
					var status = flag==false?"浏览器版本不支持！":"复制失败！"
					$("body").append('<div class="tooltips1">'+status+'</div>');
					$(".tooltips1").css({top:top,left:left});
					setTimeout(function(){
						$(".tooltips1").remove();
					},1000);
				}); 
				
				function getTop(e){
					var offset = e.offsetTop;//e.offsetTop-e.scrollTop
					if(e.offsetParent!=null){
						offset+=getTop(e.offsetParent);
					}
					return offset;
				}
				function getLeft(e){
					var offset = e.offsetLeft-e.scrollLeft;
					if(e.offsetParent!=null){
						offset+=getLeft(e.offsetParent);
					}
					return offset;
				}
			})();
			//导出
			$("#statisExport").click(function(){
				var $form = $("<form style='display:none' target='downloadframe' action='${ctx}/sysTask/download/analyzePage.do' method='post'><input type='date' name='date' value="+dateMonth+" id="+changeId+" hidden>");
				$("body").append($form);
				$form.submit();
				$form.remove();
			});
			resize();
			$(window).resize(function(){	
				resize();
			});
			function resize(){
				//获取窗口高度
				var windowheight=$(window).height();
				  
				if(caseNumChart != null && caseNumChart != undefined){
					caseNumChart.resize(); //案件数量
				}
				if(cateGroupChart != null && cateGroupChart != undefined){
					cateGroupChart.resize();
				}
				if(cateTimeChart != null && cateTimeChart != undefined){
					cateTimeChart.resize();
				}
				if(userChart != null && userChart != undefined){
					userChart.resize();
				}
				if(smallpie != null && smallpie != undefined){
					smallpie.resize();
				}
				if(userOperateChart != null && userOperateChart != undefined){
					userOperateChart.resize();
				}
				$('#isScroll').perfectScrollbar();
				$('#isScroll').perfectScrollbar("update");
			}
			//0.do的接口数据
			var numbers = new Object();
			function setNumbers(result){
				$(".factorCon [data-type]").each(function(){
					var type = $(this).data("type");
					var num = result[type] || 0;
					if(numbers[type] == undefined){
						numbers[type] = new CountUp(type,0,num);
						numbers[type].start();
						$(this).data("val",num);
					}else{
						num = num || $(this).data("val");
						numbers[type].update(num);
					}
					$(this).attr("title",num);
				});
			}
			//年份可选的的统计,2018-06-06
			var numChange = new Object();
			function setNumChange(result){
				//var result={"kyajje":252.67,"qzajje":533.56,"kyrwzs":1420825,"qzrwzs":5214085,"zcje":6634910.25};
				$(".selResult li [data-type]").each(function(){
					var type = $(this).data("type");
					var num = result[type] || 0;
					if(numChange[type] == undefined){
						numChange[type] = new CountUp(type,0,num);
						numChange[type].start();
						$(this).data("val",num);
					}else{
						num = num || $(this).data("val");
						numChange[type].update(num);
					}
					$(this).attr("title",num);
				});
			}
			//获取当前时间
			function nowDate(ti){
				if(ti==undefined){
					var time=new Date(),
					y=time.getFullYear(),
					m=z(time.getMonth()+1),
					d=z(time.getDate());		    
				}else{
					var t=new Date(ti),
					y=t.getFullYear(),
					m=z(t.getMonth()+1),
					d=z(t.getDate());
				}
				return y+'/'+m+'/'+d;
				//console.log(ss);
			}
			function z(s){
				return s<10?'0'+s:s;
			}

			var money1 = null;
			var money2 = null;
			function setNum(){
				var num1=198897;
				var num2=2987672893;
				money1 = new CountUp("money1",$("#money1").data("num"),num1);
				money2 = new CountUp("money2",$("#money2").data("num"),num2);
				money1.start();
				money2.start();
			}
			var userChart = echarts.init(document.getElementById("user"));
			function setUserChart(data){
				userChart.setOption(getUserOption(data));
				userChart.hideLoading();
			}
			//活跃用户
			function hotUser(data){
				console.log(data[0]);
				/*var result = {
						data:[
						      {name:"用户",dept:"上海运营部",time:1000},
						      {name:"用户",dept:"上海分公司",time:1000},
						      {name:"用户",dept:"上海运营部",time:1000},
						      {name:"用户",dept:"上海分公司",time:1000},
						      {name:"用户",dept:"上海分公司",time:1000},
						      {name:"用户",dept:"上海分公司",time:1000},
						      {name:"用户",dept:"上海分公司",time:1000},
						      {name:"用户",dept:"上海分公司",time:1000},
						      {name:"用户",dept:"上海分公司",time:1000},
						      {name:"用户",dept:"上海分公司",time:1000}
				        ]
				}*/
				var str = "";
				for(var i=0;i<data[0].length;i++){
					var maxTime=10;
					var time=((data[0][i].time/data[0][0].time)*10).toFixed(2);
					if(i==0){
						str += "<tr><td><i class='icon2 jin'></i></td><td>"+data[0][i].userCnName+"</td><td>"+data[0][i].name+"</td><td>"+data[0][i].deptName+"</td><td>"+data[0][i].companyName+"</td><td>"+maxTime+"</td></tr>";
					}else if(i==1){
						str += "<tr><td><i class='icon2 yin'></i></td><td>"+data[0][i].userCnName+"</td><td>"+data[0][i].name+"</td><td>"+data[0][i].deptName+"</td><td>"+data[0][i].companyName+"</td><td>"+time+"</td></tr>";
					}else if(i==2){
						str += "<tr><td><i class='icon2 tong'></i></td><td>"+data[0][i].userCnName+"</td><td>"+data[0][i].name+"</td><td>"+data[0][i].deptName+"</td><td>"+data[0][i].companyName+"</td><td>"+time+"</td></tr>";
					}else{
						str += "<tr><td>"+(i+1)+"</td><td>"+data[0][i].userCnName+"</td><td>"+data[0][i].name+"</td><td>"+data[0][i].deptName+"</td><td>"+data[0][i].companyName+"</td><td>"+time+"</td></tr>";
					}
				}
				$("#hotUser tbody").html(str);
			}
			//案件数量
			var caseNumChart = echarts.init(document.getElementById("caseNum"));
			function setCaseNum(data){
				caseNumChart.setOption(getLineOption(data));
				caseNumChart.hideLoading();
				$("#thisMonthCase").html(data.thisMonth);
				$("#thisMonthRatio").html(data.ratio+"%");
			}
			//当月案件相关图,串案模型
			var cateGroupChart = echarts.init(document.getElementById("cateGroup"));
			function setCateGroup(data){
				cateGroupChart.setOption(getBarOption(data));
				cateGroupChart.hideLoading();
			}

			/*//当月案件相关图,专项模型，2018-5-22
			var modalCaseGroupChart = echarts.init(document.getElementById("modalCaseGroup"));
			function setmodalCaseGroup(data){
				modalCaseGroupChart.setOption(getBarOption(data));
				modalCaseGroupChart.hideLoading();
			}
			var modalCaseSmallChart = echarts.init(document.getElementById('modalCaseSmallpie'));//小饼图 
		   	function modalCaseSmall(data){
				modalCaseSmallChart.setOption(samllBarsOption(data));
				modalCaseSmallChart.hideLoading();
		   	}
		   	//可疑/欺诈的金额						
			var modalCaseMoneyChart = echarts.init(document.getElementById("modalCaseMoney"));
			function setCaseMoney(result){				
				modalCaseMoneyChart.setOption(getLineMoneyOption(result));
				modalCaseMoneyChart.hideLoading();
			}//以上是专项模型的
			*/
			var cateTimeChart = echarts.init(document.getElementById("cateTime"));
			function setCateTime(data){	
				var nowTime=nowDate();
				var t=new Date(nowTime);
				var ti=t.getTime();
				var tim=ti-(24*60*60*30*1000);
				data.x[0]=nowDate(tim)+"—至今";
				cateTimeChart.clear();//清除历史数据
				cateTimeChart.setOption(getCateTimeOption(data));
				cateTimeChart.hideLoading();
			}
			
			function setCaseTable(result){
				var len = result.title.length+1;
				var ratio = Math.floor(100/len);
				var tableTitle = "<tr><th rowspan='2' style='width:"+ratio+"%'></th>";
				for(var i=0;i<result.title.length;i++){
					tableTitle +=  "<th colspan='2' style='width:"+ratio+"%'>"+result.title[i]+"</th>";
				}
				tableTitle += "</tr><tr>";
				for(var i=0;i<result.title.length;i++){
					tableTitle +=  "<th>可疑</th><th>欺诈</th>";
				}
				tableTitle += "</tr>";
				$("#theadCon").html(tableTitle);
				
				var nowTime=nowDate();
				var t=new Date(nowTime);
				var ti=t.getTime();
				var tim=ti-(24*60*60*30*1000);
				
				var str="";
				for(var i=0;i<result.data.length;i++){
					result.data[i].time=nowDate(tim);
					str+="<tr>"
						+"<td>"+result.data[i].time+"—至今</td>";
					for(var j=0;j<result.title.length;j++){
						var susp = result.data[i].data[result.title[j]]==undefined?'-':result.data[i].data[result.title[j]].suspicious;
						var fraud = result.data[i].data[result.title[j]]==undefined?'-':result.data[i].data[result.title[j]].fraud;
						str	+=	"<td>"+susp+"</td>"
							+	"<td>"+fraud+"</td>";
					}
					str	+= "</tr>";

				}
				$("#tbodyCon").html(str);
			}

			var smallpie = echarts.init(document.getElementById('smallpie')); 
		   	function smallpieG(data){
		   		smallpie.clear();//清除历史数据
				smallpie.setOption(samllBarsOption(data));
				smallpie.hideLoading();
		   	}
		   	//标注统计，曲线的图，还未写请求						
			var caseMarkChart = echarts.init(document.getElementById("caseMark"));
			function setCaseMark(result){
				/*var result = {
					data:{
						title:{text: '近一周标注趋势'},
						legend:["总标注趋势","已处理趋势"],
						x:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],
						y:{
							"总标注趋势":[1098,980,1308,450,234,880,1000],
							"已处理趋势":[109,90,308,450,234,880,100]
						},
						data:{
								data1:[1098,980,1308,450,234,880,1000],
								data2:[109,90,308,450,234,880,100]
							},
						col:["#C23531"]
					}
				};*/
				/*$(".allmarkNum").text(Number(result.markCount));
				$(".alldealNum").text(Number(result.finishCount));*/
				var bzNum=new CountUp("bz",0,Number(result.markCount));
				var clNum=new CountUp("cl",0,Number(result.finishCount));
				bzNum.start();
				clNum.start();
				caseMarkChart.setOption(getLineMarkOption(result));
				caseMarkChart.hideLoading();
			}
			
			/*//算总的标注量和处理量，2018-5-22
			function countSum(data){

			}*/
			
			//热区标识
			function hotMark(data){
				//var result = {data:data};
				var str = "";
				for(var i=0;i<data.length;i++){
					str += "<tr><td>"+(i+1)+"</td><td title="+data[i].name+" style='width=50%;' ><span class='cocyCon spEllipsis' data-clipboard-text="+data[i].name+">"+data[i].name+"</span></td><td>"+data[i].time+"</td></tr>";
				}
				$("#hotM").html(str);
				$('#hotMarkCon').perfectScrollbar();
			}
			//操作次数统计
			var userOperateChart = echarts.init(document.getElementById("userOperate"));
			function setUserOperateOption(data){
				userOperateChart.setOption(getUserOperateOption(data));
				userOperateChart.hideLoading();
			}

			
			function init(){
				caseMarkChart.showLoading();
				//setCaseMark();				
				//caseNumChart.showLoading();
				cateGroupChart.showLoading();
				cateTimeChart.showLoading();
				userChart.showLoading();
				smallpie.showLoading();
				userOperateChart.showLoading();//新加的
				/*modalCaseGroupChart.showLoading();//专项模型的案件相关图，2018-5-22
				modalCaseSmallChart.showLoading();//专项模型的小饼图
				modalCaseMoneyChart.showLoading();//专项模型的金额曲线图
				//专项模型的案件相关图，2018-5-22
				var re={"data7":[{"fraudRate":2,"total":138,"fraud":4,"name":"同一电话","suspicious":20,"suspiciousRate":14},{"fraudRate":7,"total":210,"fraud":16,"name":"同一伤者","suspicious":93,"suspiciousRate":44},{"fraudRate":11,"total":124,"fraud":14,"name":"同一车牌","suspicious":86,"suspiciousRate":69},{"fraudRate":7,"total":14,"fraud":1,"name":"机器学习","suspicious":4,"suspiciousRate":28},{"fraudRate":6,"total":15,"fraud":1,"name":"天眼1","suspicious":13,"suspiciousRate":86},{"fraudRate":6,"total":15,"fraud":1,"name":"天眼2","suspicious":13,"suspiciousRate":86},{"fraudRate":6,"total":15,"fraud":1,"name":"天眼3","suspicious":13,"suspiciousRate":86}],"data2":{"col":{"案件数":"#5793f3","涉及金额":"#d14a61"},"legend":["案件数","涉及金额"],"x":["同一电话","同一伤者","同一车牌","机器学习","天眼1","天眼2","天眼3"],"y":{"案件数":[110,2211,2569,424,265,4543,432],"涉及金额":[798500.0000,7326900.0000,8580700.0000,993400.0000,1665500.0000,3424232.0000,6466354.0000]}}};
				var re2 = {
					data:{
						title:{text: ''},
						legend:["可疑涉案金额","欺诈涉案金额"],
						x:["同一电话","同一伤者","同一车牌","机器学习","天眼1","天眼2","天眼3"],
						y:{
							"可疑涉案金额":[10198,94380,1308,45350,2335234,880,1000],
							"欺诈涉案金额":[10349,9325430,3035328,453240,23432,880,1330]
						},
						data:{
								data1:[10198,94380,1308,45350,2335234,880,1000],
								data2:[10349,9325430,3035328,453240,23432,880,1330]
							},
						col:["#C23531"]
					}
				};
				setmodalCaseGroup(re.data2);
				modalCaseSmall(re.data7);
				setCaseMoney(re2.data);*/
				
				//可选年份的初始化数据
				$.ajax({
		    		type:"POST",
		    		url:"${ctx}/sysTask/analyzePage/00.do",
		    		data:{},
		    		success:function(result){
		    			setNumChange(result);				    			
		    		}
		    	});

				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage/0.do",
					data:{},
					dataType:"json",
					success:function(result){
						setNumbers(result);
					},
					error:function(){
						
					}
				});
				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage/1.do",
					data:{},
					dataType:"json",
					success:function(result){
						setCaseNum(result);
					},
					error:function(){
						
					}
				});
				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage/27.do",
					data:{},
					dataType:"json",
					success:function(result){
						rateData=result;
						setCateGroup(result.data2);
						smallpieG(result.data7);
					},
					error:function(){
						
					}
				});
				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage/34.do",
					data:{},
					dataType:"json",
					success:function(result){
						setCateTime(result.data3);
						setCaseTable(result.data4);
					},
					error:function(){
						
					}
				});
				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage/5.do",
					data:{},
					dataType:"json",
					success:function(result){
						setUserChart(result);//用户分布
						setUserOperateOption(result);//用户操作次数
					},
					error:function(){
						
					}
				});
				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage/6.do",
					data:{},
					dataType:"json",
					success:function(result){
						hotUser(result); //活跃用户
						//hotMark(result);//热区标识
					},
					error:function(){
						
					}
				});
				//标注统计
				//var time=$('#monthpicker').val();
				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage/7.do",
					data:{},
					dataType:"json",
					success:function(result){
						setCaseMark(result);
					},
					error:function(){
						
					}
				});

				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage/9.do",
					data:{},
					dataType:"json",
					success:function(result){
						hotMark(result);//热区标识
					},
					error:function(){
						
					}
				});
			}
			init();
		 
			
		 	/*
			 *  画折线图
			 */
			function getLineOption(data){
				var option = {
					grid: {
						top: '15%',
						left: '2%',
						right: '8%',
						bottom: '5%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: data.x,
						axisTick:{show:true,inside:true},
						splitLine:{show:false},
						axisLine:{
							lineStyle:{
								color:"#344f6b"
							}
						},
						axisLabel:{
							textStyle:{color:"#ffffff",fontSize:12}
						}
					},
					yAxis: {
						type: 'value',
						axisTick:{show:false},
						splitLine:{
							show:false,
						},
						axisLine:{
							lineStyle:{
								color:"#344f6b"
							}
						},
						axisLabel:{
							textStyle:{color:"#ffffff",fontSize:12}
						}
					},
					series:[1245,3456,345,3256,678,973,2984]
				};
				for(var i=0;i<data.legend.length;i++){
					option.series.push({		
						clipOverflow:false, 			
						symbol:'circle',
						symbolSize:6,
						name:data.legend[i],
						type:'line',
						//stack: '总量',
						data:data.y[data.legend[i]],
						lineStyle:{
							normal:{
								color:data.col[i],
								opacity:0.5
							}
						},
						itemStyle:{
							normal:{
								color:data.col[i],
								opacity:0.7
							}
						},
						areaStyle:{
							normal:{
								opacity:0.3
							}
						},
						smooth:true
					})
				}
				// 使用刚指定的配置项和数据显示图表。
				return option;
			}
			/*
			 *  画折线图2
			 */
			function getLineMarkOption(data){
				option = {
				    title :[{
				    	text:"标注趋势和已处理趋势",
				    	x:'center',
				    	textStyle:{
				        	color:"#fff"
				        }
				    }],
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				    	right:6,
				    	data:['总标注数','总已处理数'],
				    	textStyle:{
				    		color:'#fff'
				    	}
				    },
				    /*toolbox: {
				        show : true,
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            magicType : {show: true, type: ['line', 'bar']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },*/
				    calculable : true,
				    xAxis : [
				        {
				            type: 'category',
				            data: data.x,
				            boundaryGap:false,
					        axisTick:{show:true,inside:true},
							splitLine:{show:false},
							axisLine:{
								lineStyle:{
									color:"#344f6b"
								}
							},
							axisLabel:{
								interval:0,
								rotate:45,
								textStyle:{color:"#ffffff",fontSize:8}
							},
							axisPointer:{
								show:true
							}
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            axisLabel : {
				                formatter: '{value} ',
				                textStyle:{color:"#ffffff",fontSize:8}
				            },
				            splitLine:{
				            	show:false
				            },
				            axisLine:{
								lineStyle:{
									color:"#344f6b"
								}
							}
				        }
				    ],
				    series : [
				        {
				            name:'总标注数',
				            type:'line',
				            data:data.data.data1,
				            markPoint : {
				                data : [
				                    {type : 'max', name: '最大值'},
				                    {type : 'min', name: '最小值'}
				                ]
				            },
				            markLine : {
				                data : [
				                    {type : 'average', name: '平均值'}
				                ]
				            },
				            lineStyle:{
				            	normal:{
				            		color:"rgb(243, 88, 51)"
				            	}
				            },
				            itemStyle:{
				            	normal:{
				            		color:"rgb(243, 88, 51)"
				            	}
				            },
				            smooth:true	
				        },
				        {
				            name:'总已处理数',
				            type:'line',
				            data:data.data.data2,
				            markPoint : {
				                data : [
				                    {type : 'max', name: '最大值'},
				                    {type : 'min', name: '最小值'}
				                ]
				            },
				            markLine : {
				                data : [
				                    {type : 'average', name: '平均值'}
				                ]
				            },
							lineStyle:{
				            	normal:{
				            		color:"rgb(255, 204, 0)"
				            	}
				            },
				            itemStyle:{
				            	normal:{
				            		color:"rgb(255, 204, 0)"
				            	}
				            },
				            smooth:true	
				        }
				    ]
				};
				return option;
			}
			
		 	function getBarOption(data){
		 		var option = {
					grid: {
						top: '18%',
						left: '4%',
						right: '4%',
						bottom: '5%',
						containLabel: true
					},
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            crossStyle: {
				                color: '#fff'
				            }
				        }
				    },
				    legend: {
				        data:data.legend,
				        textStyle:{
				        	color:"#ffffff"
				        }
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: data.x,
					        axisTick:{show:true,inside:true},
							splitLine:{show:false},
							axisLine:{
								lineStyle:{
									color:"#344f6b"
								}
							},
							axisLabel:{
								interval:0,
								textStyle:{color:"#ffffff",fontSize:8}
							},
							axisPointer:{
								show:true
							}
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value',
				            name: '数量',
				            nameTextStyle: {
				            	color:"#ffffff"
				            },
				            axisTick:{show:false},
							splitLine:{
								show:false,
							},
							axisLine:{
								lineStyle:{
									color:"#344f6b"
								}
							},
							axisLabel:{
								textStyle:{
									color:"#ffffff",
									fontSize:12
								}
							},
							axisPointer:{
								label:{
									backgroundColor:data.col["案件数"]
								}
							}
				        },
				        {
				            type: 'value',
				            name: 'rmb',
				            nameTextStyle: {
				            	color:"#ffffff"
				            },
				            axisTick:{show:false},
							splitLine:{
								show:false,
							},
							axisLine:{
								lineStyle:{
									color:"#344f6b"
								}
							},
							axisLabel:{
								textStyle:{color:"#ffffff",fontSize:12}
							},
							axisPointer:{
								label:{
									backgroundColor:data.col["涉及金额"]
								}
							}
				        }
				    ],
				    series: []
				};
		 		for(var i=0;i<data.legend.length;i++){
					option.series.push({		
						name:data.legend[i],
			            type:'bar',
			            data:data.y[data.legend[i]],
			            yAxisIndex: data.legend[i]=="案件数"?0:1,
			            itemStyle:{
			            	normal:{
			            		color:data.col[data.legend[i]],
			            		opacity:0.9
			            	}
			            }
					});
				}
		 		return option;
		 	}
		 	
		 	function getCateTimeOption(data){
		 		var option = {
					grid: {
						top: '18%',
						left: '4%',
						right: '4%',
						bottom: '5%',
						containLabel: true
					},
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            crossStyle: {
				                color: '#fff'
				            }
				        }
				    },
				    legend: {
				        data:data.legend,
				        textStyle:{
				        	color:"#ffffff"
				        },
				        top:10
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: data.x,
					        axisTick:{show:true,inside:true},
							splitLine:{show:false},
							axisLine:{
								lineStyle:{
									color:"#344f6b"
								}
							},
							axisLabel:{
								interval:0,
								textStyle:{color:"#ffffff",fontSize:8}
							},
							axisPointer:{
								show:true
							}
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value',
				            name: '数量',
				            nameTextStyle: {
				            	color:"#ffffff"
				            },
				            axisTick:{show:false},
							splitLine:{
								show:false,
							},
							axisLine:{
								lineStyle:{
									color:"#344f6b"
								}
							},
							axisLabel:{
								textStyle:{
									color:"#ffffff",
									fontSize:12
								}
							},
							axisPointer:{
								label:{
									//backgroundColor:data.col["案件数"]
								}
							}
				        }
				    ],
				    series: []
				};
		 		for(var i=0;i<data.legend.length;i++){
					option.series.push({		
						name:data.legend[i],
			            type:'bar',
			            data:data.y[data.legend[i]],
			            itemStyle:{
			            	normal:{
			            		//color:data.col[data.legend[i]],
			            		opacity:0.9
			            	}
			            }
					});
				}
		 		return option;
		 	}
		 	
		 	function getUserOption(data){
		 		Array.prototype.push.apply(data.leftData.legend);
		 		var option = {
				    title : [{
				        text: '用户分布Top 10',
				       /* subtext: '总计'+data.leftData.num+'人',*/
				        x:'50%',
				        y:"5%",
				        textStyle:{
				        	color:"#fff",
				        },
				        textAlign: 'center'
				    }],
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            crossStyle: {
				                color: '#fff'
				            }
				        }
				    },
				    legend: [{
				        orient: 'horizontal',
				        bottom: 0,
				        data: data.leftData.legend,
				    	textStyle:{
				    		color:"#fff"
				    	}
				    }],
				    /*grid:[{
				    	top:60,
				    	width:'60%',
				    	bottom:30,
				    	right:8,
				    	containLabel:true
				    }],				    
				    yAxis: [
				        {
				            type: 'value',
				            name: '次数',
				            nameTextStyle: {
				            	color:"#ffffff"
				            },
				            axisTick:{show:false},
							splitLine:{
								show:false,
							},
							axisLine:{
								lineStyle:{
									color:"#1C3042"
								}
							},
							axisLabel:{
								textStyle:{
									color:"#ffffff",
									fontSize:12
								}
							}
				        }
				    ],*/
				    series : [
				        {
				        	tooltip : {
						        trigger: 'item',
						        formatter: "{a} <br/>{b} : {c} ({d}%)"
						    },
				            name: '用户统计',
				            type: 'pie',
				            radius : '45%',
				            center: ['50%', '55%'],
				            data:data.leftData.data,
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				};
				/*for(var i=0;i<data.rightData.legend.length;i++){
					option.series.push({
						type:"bar",
						name:data.rightData.legend[i],
						data:data.rightData.y[data.rightData.legend[i]]
					})
				}*/
		 		return option;
		 	}
		 	//操作次数
		 	function getUserOperateOption(data){
		 		Array.prototype.push.apply(data.rightData.legend);
		 		var option = {
				   /* title : [{
				        text: '系统操作统计',
				        subtext: '',
				        x:'center',
				        y:"1%",
				        textStyle:{
				        	color:"#fff",
				        },
				        textAlign: 'center'
				    }],*/
				    legend: [{
				        orient: 'horizontal',
				        top:"5",
				        data: data.rightData.legend,
				    	textStyle:{
				    		color:"#fff"
				    	}
				    }],
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            crossStyle: {
				                color: '#fff'
				            }
				        }
				    },
				    grid:[{
				    	top:40,
				    	width:'97%',
				    	bottom:80,
				    	right:8,
				    	containLabel:true
				    }],
					dataZoom:{
						show:true,
						height:25,
						dataBackground:{
							lineStyle:{
								color:"rgb(255, 204, 0)"
							},
							areaStyle:{
								color:"rgba(222, 147, 37,0.5)"
							}
						},
						fillerColor:'rgba(255, 204, 0,0.5)',
						realtime:true,
						textStyle:{
							color:'#fff'
						},
						start:0,
						end:100,
						bottom:0
					},
				    xAxis: [
					        {
					            type: 'category',
					            data: data.rightData.x,
						        axisTick:{show:true,inside:true},
								splitLine:{show:false},
								axisLine:{
									lineStyle:{
										color:"#344f6b"
									}
								},
								axisLabel:{
									interval:0,
									rotate:45,
									textStyle:{color:"#ffffff",fontSize:8}
								},
								axisPointer:{
									show:true
								}
					        }
					    ],
					    yAxis: [
					        {
					            type: 'value',
					            name: '次数',
					            nameTextStyle: {
					            	color:"#ffffff"
					            },
					            axisTick:{show:false},
								splitLine:{
									show:false,
								},
								axisLine:{
									lineStyle:{
										color:"#344f6b"
									}
								},
								axisLabel:{
									textStyle:{
										color:"#ffffff",
										fontSize:12
									}
								}
					        }
					    ],
					series : []
				};
				for(var i=0;i<data.rightData.legend.length;i++){
					option.series.push({
						type:"bar",
						name:data.rightData.legend[i],
						data:data.rightData.y[data.rightData.legend[i]]
					})
				}
		 		return option;
		 	}
		 	
		 	function samllBarsOption(data){
		 		var option = { 
		 			title:[],
				    tooltip: {
				        trigger: 'item',
				        formatter: "{b} : {d}%"
				    },
				    legend: {
				        orient: 'horizontal',
				        left: 'center',
				        textStyle:{
				        	color:"#fff"
				        },
				        data: ['可疑','欺诈']
				    },
				    series: []
				};
		 		var ratio = Math.floor(100/data.length);
		 		var margin = 100-ratio*data.length;
		 		for(var i=0;i<data.length;i++){

		 			option.title.push({
				        text: data[i].name,
				        left:ratio*(i+0.5)+'%',
				        bottom:0,
				        textStyle:{
				        	color:"#fff",
				        	fontSize:12
				        },
				       	textAlign: 'center'
				    });
		 			option.series.push({
		 				//name:data[i].name,
				        type: 'pie',
				        center:[ratio*(i+0.5)+margin/2+'%','50%'],
				        radius: ['50%', '58%'],
				        avoidLabelOverlap: false,
				        label: {
				            normal: {
				            	show:false,
				                position: 'center'
				            },
				            emphasis:{
				            	show:true,
				            	position:'center',
				            	textStyle:{
				            		fontSize:'12'
				            	},
				            	formatter:'{b}:{d}%'
				            }
				        },
				        data: [{
				            value: data[i].suspiciousRate,
				            name: '可疑',
				            itemStyle:{
				            	normal:{
				            		color:"#ffcc00"
				            	}
				            }
				        },{
				            value: data[i].fraudRate,
				            name: '欺诈',
				            itemStyle:{
				            	normal:{
				            		color:"#f35833"
				            	}
				            }
				        }, {
				            value: 100-data[i].fraudRate-data[i].suspiciousRate,
				            name: '占位',
				         	label:{
				         		emphasis:{
				         			show:false
				         		}
				         	},
				            tooltip: {
				                show: false
				            },
				            itemStyle: {
				                normal: {
				                    color: '#aaa'
				                },
				                emphasis: {
				                    color: '#aaa'
				                }
				            },
				            hoverAnimation: false
				        }]
				    });
		 		}
		 		return option;
		 	}

		 	/*
			 *  画折线图3,可疑/欺诈金额
			 */
			function getLineMoneyOption(data){
				option = {
				    title :[{
				    	text:data.title.text,
				    	x:'center',
				    	textStyle:{
				        	color:"#fff"
				        }
				    }],
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				    	left:6,
				    	data:data.legend,
				    	textStyle:{
				    		color:'#fff'
				    	}
				    },
				    calculable : true,
				    xAxis : [
				        {
				            type: 'category',
				            data: data.x,
				            boundaryGap:false,
					        axisTick:{show:true,inside:true},
							splitLine:{show:false},
							axisLine:{
								lineStyle:{
									color:"#344f6b"
								}
							},
							axisLabel:{
								interval:0,
								rotate:45,
								textStyle:{color:"#ffffff",fontSize:8}
							},
							axisPointer:{
								show:true
							}
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            axisLabel : {
				                formatter: '{value} ',
				                textStyle:{color:"#ffffff",fontSize:8}
				            },
				            splitLine:{
				            	show:false
				            },
				            axisLine:{
								lineStyle:{
									color:"#344f6b"
								}
							}
				        }
				    ],
				    series : [
				        {
				            name:data.legend[0],
				            type:'line',
				            data:data.data.data1,
				            markPoint : {
				                data : [
				                    {type : 'max', name: '最大值'},
				                    {type : 'min', name: '最小值'}
				                ]
				            },
				            markLine : {
				                data : [
				                    {type : 'average', name: '平均值'}
				                ]
				            },
				            lineStyle:{
				            	normal:{
				            		color:"rgb(255, 204, 0)"//rgb(243, 88, 51)
				            	}
				            },
				            itemStyle:{
				            	normal:{
				            		color:"rgb(255, 204, 0)"
				            	}
				            }//,smooth:true	
				        },
				        {
				            name:data.legend[1],
				            type:'line',
				            data:data.data.data2,
				            markPoint : {
				                data : [
				                    {type : 'max', name: '最大值'},
				                    {type : 'min', name: '最小值'}
				                ]
				            },
				            markLine : {
				                data : [
				                    {type : 'average', name: '平均值'}
				                ]
				            },
							lineStyle:{
				            	normal:{
				            		color:"rgb(243, 88, 51)"//rgb(255, 204, 0)
				            	}
				            },
				            itemStyle:{
				            	normal:{
				            		color:"rgb(243, 88, 51)"
				            	}
				            }//,smooth:true	
				        }
				    ]
				};
				return option;
			}
		 	
		 	/*
		 	var result=[
		   		         {
		   		        	name:'同地多案',
		   		        	data:{	        	    	
		   		        	    	caseNormal:'正常',
		   		        	    	normalVal:562,	        	    		        	    	
		   		        	    	suspicious:'可疑',
		   		        	    	suspiciousVal:230,	        	    	
		   		        	   		fraud:'欺诈',
		   		        	    	fraudVal:126	        	    	
		   		        	   }
		   		        },
		   		        {
		   		        	name:'同号多案',
		   		        	data:{	        	    	
		   		        	    	caseNormal:'正常',
		   		        	    	normalVal:562,	        	    		        	    	
		   		        	    	suspicious:'可疑',
		   		        	    	suspiciousVal:230,	        	    	
		   		        	   		fraud:'欺诈',
		   		        	    	fraudVal:126	        	    	
		   		        	   }
		   		        },
		   		        {
		   		        	name:'同车多案',
		   		        	data:{	        	    	
		   		        	    	caseNormal:'正常',
		   		        	    	normalVal:456,	        	    		        	    	
		   		        	    	suspicious:'可疑',
		   		        	    	suspiciousVal:230,	        	    	
		   		        	   		fraud:'欺诈',
		   		        	    	fraudVal:355	        	    	
		   		        	   }
		   		        },
		   		        {
		   		        	name:'可疑时间',
		   		        	data:{	        	    	
		   		        	    	caseNormal:'正常',
		   		        	    	normalVal:1254,	        	    		        	    	
		   		        	    	suspicious:'可疑',
		   		        	    	suspiciousVal:869,	        	    	
		   		        	   		fraud:'欺诈',
		   		        	    	fraudVal:356	        	    	
		   		        	   }
		   		        },
		   		        {
		   		        	name:'可疑三者',
		   		        	data:{	        	    	
		   		        	    	caseNormal:'正常',
		   		        	    	normalVal:134,	        	    		        	    	
		   		        	    	suspicious:'可疑',
		   		        	    	suspiciousVal:78,	        	    	
		   		        	   		fraud:'欺诈',
		   		        	    	fraudVal:126	        	    	
		   		        	   }
		   		        },
		   		        {
		   		        	name:'复杂联通图',
		   		        	data:{	        	    	
		   		        	    	caseNormal:'正常',
		   		        	    	normalVal:366,	        	    		        	    	
		   		        	    	suspicious:'可疑',
		   		        	    	suspiciousVal:426,	        	    	
		   		        	   		fraud:'欺诈',
		   		        	    	fraudVal:320	        	    	
		   		        	   }
		   		        },
		   		        {
		   		        	name:'可疑案件',
		   		        	data:{	        	    	
		   		        	    	caseNormal:'正常',
		   		        	    	normalVal:423,	        	    		        	    	
		   		        	    	suspicious:'可疑',
		   		        	    	suspiciousVal:100,	        	    	
		   		        	   		fraud:'欺诈',
		   		        	    	fraudVal:322	        	    	
		   		        	   }
		   		        }
		        ];
			    		
		   		var labelTop = {
				    normal : {
				    	color:'#3399cc',
				    	label : {
				    		show : false
				    	},
				    	labelLine :{ 
				    		show : false
				    	}
				    }
				};
				var labelFromatter = {
					normal:{
		           		label : {show : false},
		           		labelLine : {show : false}
		               }
				}
				var labelCeter = {
				    normal : {
				    	color:'#ff9800',
				    	label : {
				    		show : false
				    	},
				    	labelLine :{ 
				    		show : false
				    	}
				    }
				};
				var labelBottom = {
				    normal : {
				    	color:'#f00',
				    	label : {
				    		show : false
				    	},
				    	labelLine :{ 
				    		show : false
				    	}
				    }
				};
				var radius = [20, 25];
				var arr=[];
				for(var i=0;i<result.length;i++){
					var x=10*i+10;
					var val={
				        	name:result[i].name,
				            type : 'pie',
				            center : [x+'%', '50%'],
				            radius : radius,
				            itemStyle : labelFromatter,
				            data : [
				                {name:result[i].data.caseNormal, value:result[i].data.normalVal, itemStyle:labelTop},
				            	{name:result[i].data.suspicious, value:result[i].data.suspiciousVal, itemStyle:labelCeter},
				                {name:result[i].data.fraud, value:result[i].data.fraudVal, itemStyle:labelBottom}
				            ]
				      	}
		   			arr.push(val);
		   		}
				option3 = {	
					legend: {
				        orient : 'vertical',
				        x : 'right',
				        textStyle:{
				        	color:'#ddd'
				        },
				        data:['正常','可疑','欺诈']
				    },
					tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    series :arr
				};
		 	*/
		 </script>
	</body>
</html>
