<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html lang="zh-CN">
<head>
	<title>终端运行统计</title>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="${ctx}/css/plugin/slide/reset.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/jquery/jquery-ui.css">
    <link rel="stylesheet" href="${ctx}/js/plugin/layerui/css/layui.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/ztree/zTreeStyle.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontAwesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
	<style>
		html,body{
			background-color: #F9F9F9 !important;
		}
		table{
			font-size: 12px !important;
		}
		#query,#before,#next{
			height: 20px;
		}
        .wanzhengdiv {
            position: absolute;
            z-index: 100;
            /*left: 25px;*/
            top:30px;
        }
	</style>
</head>
<body >
<div class="container-fluid">
    <div class="form-inline mt10 wanzhengdiv">
        <div class="form-group has-feedback mr10">
            <span class=' font12 fontBold'>终端状态(左柱) <span class='run'><span  class='inB bg-run smallBlock'></span> 投运 </span><span class='breaks'><span  class='inB bg-breaks smallBlock'></span> 检修 </span><span class='grey'><span  class='inB bg-grey smallBlock'></span> 退运 &nbsp;</span></span>
            <span  class=' font12 fontBold' > 终端在线率(右柱) <span class='info'><span  class='inB  smallBlock' style="background-color:#2E8B57 "></span> 在线率≥90%</span><span class='warn'> <span class='inB bg-warn smallBlock'></span> 60%≤在线率<90% </span><span class='error'> <span class='inB bg-error smallBlock'></span> 在线率<60%</span> </span>
        </div>
    </div>
	<div class="form-inline mt10">
        <div class="form-group has-feedback">
            <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>
        <div class="form-group">
            <%@include file="../../include/time.jsp" %>
            <button type="button" class="btn btn-primary " id="query">
                <i class="glyphicon glyphicon-search"></i>
            </button>
        </div>
		<div class="form-group fr mt5 mr15">
			<button type="button" class="btn themeBGColor fr " id="saveImage">
				<i class="glyphicon glyphicon-floppy-save"></i>保存图片
			</button>
			<button type="button" class="btn btn-primary fr mr10" id="exportData"  >
				<i class="glyphicon glyphicon-share"></i>导出
			</button>
		</div>
	</div>
	<div class="row">
		<%--区域模块--%>
		<div class="col-sm-7" id="areaDepts"></div>
		<div class="col-sm-5" id="areaT">
			<table id="areaTable" class="table table-striped table-bordered dataTable no-footer">
				<thead>
				<tr>
					<th>区域</th>
					<th>终端个数</th>
					<th>投运</th>
					<th>检修</th>
					<th>退运</th>
					<th>在线率(%)</th>
				</tr>
				</thead>
			</table>
		</div>
		<%--终端厂家模块--%>
		<div class="col-sm-7" id="company"></div>
		<div class="col-sm-5" id="companyT">
			<table id="companyTable" class="table table-striped table-bordered dataTable no-footer">
				<thead>
				<tr>
					<th>厂家</th>
					<th>终端个数</th>
					<th>投运</th>
					<th>检修</th>
					<th>退运</th>
					<th>在线率(%)</th>
				</tr>
				</thead>
			</table>
		</div>
	</div>
</div>
<canvas id='canvasipal' width='2000' height='1000' style='display: none'></canvas>
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/echarts3D/echarts.js"></script>
<script src="${ctx}/js/plugin/layerui/layer.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.jquery.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.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}/jspJS/utils/verticalTwoImages.js"></script>
<script src="${ctx}/jspJS/utils/saveImage.js"></script>
<script src="${ctx}/jspJS/utils/barUtil.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/area.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script>
	var picHeight,areaImage,companyImage,cityName;
	var $area=$("#area");
	var $startTime=$("#startTime");
	var $endTime=$("#endTime");
	var areaResult=null;
	var companyResult=null;
	var areLength;//区域的个数
	var companyLength;//厂家个数
	$("#interval").val("月份");
	$(function () {
		picHeight=($(window).height()-40)*0.5;
		$.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);
				//初始化页面内容
				var area = $area.eq(0).attr("index");
				var startTime = $startTime.eq(0).val();
				var endTime = $endTime.eq(0).val();
				cityName=$area.val();
				refresh(startTime, endTime,area);
			}
		})
	})

	$("#query").click(function() {
		var area = $area.eq(0).attr("index");
		var startTime = $startTime.eq(0).val();
		var endTime = $endTime.eq(0).val();
		cityName=$area.val();
		refresh(startTime, endTime,area);
	});

	function refresh(startTime,endTime,area) {
		var i;
		$.ajax({
			url:'/pqs9200/area/deviceStatus',
			type:'post',
			data:{
				startTime:startTime,
				endTime:endTime,
				area:area
			},
			dataType:'json',
			beforeSend: function () {
				i = ityzl_SHOW_LOAD_LAYER();
			},
			success:function (data) {
				if (data.code===500||data.body===null){
					companyResult=null;
					areaResult=null;
				}else{
					companyResult=data.body.interval;
					areaResult=data.body.area;
					areLength = areaResult===null?0:areaResult.length;
					companyLength = companyResult===null?0:companyResult.length;
				}
				startQuery();
				//***********关闭loading
				ityzl_CLOSE_LOAD_LAYER(i);
			}
		})
	}

	//按区域进行统计
	function drawAreaPic (area,lineFeed,route) {
		//给div指定宽高
		$("#areaDepts").css("height",picHeight);
		var run=[];
		var breaks=[];
		var shutdown=[];
		var rate=[];
		var areas=[];
		if(null!=area){
			for(var i=0;i<area.length;i++){
				areas[i]=area[i].name+lineFeed+"("+area[i].amounts+")";
				var monitors=area[i].amounts;
				if(Number(monitors)===0){
					var singleData={};
					var normal={};
					var itemStyle={};
					singleData.value=3.1415;
					normal.color=noMonitor;
					itemStyle.normal=normal;
					singleData.itemStyle=itemStyle;
					run[i]=singleData;
					rate[i]=singleData;
					breaks[i]=0;
					shutdown[i]=0;
				}else{
					run[i]=area[i].status.normal;
					breaks[i]=area[i].status.breaks;
					shutdown[i]=area[i].status.shutdown;
					var onlineRate;
					onlineRate=Number(area[i].online);
					var singleData={};
					var normal={};
					var itemStyle={};
					normal.color = getColor(onlineRate);
					if(onlineRate<3.1414){
						singleData.value = 3.1415;
						// item.actual = onlineRate;
					}else{
						singleData.value = onlineRate;
					}
					itemStyle.normal=normal;
					singleData.itemStyle=itemStyle;
					rate[i]=singleData;
				}
			}
		}
		var option = {
			backgroundColor: canvasBG,//背景色
			title: {
				text: cityName,
				x: 'center',
				padding: [
					25,  // 上
					0, // 右
					0,  // 下
					0, // 左
				]
			},
            color: [runColor, breaksColor, grey],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				},
                position:  function (point, params, dom, rect, size) {
                    // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
                    // 提示框位置
                    var x = 0; // x坐标位置
                    var y = 0; // y坐标位置
                    // 当前鼠标位置
                    var pointX = point[0];
                    var pointY = point[1];
                    // 外层div大小
                    // var viewWidth = size.viewSize[0];
                    // var viewHeight = size.viewSize[1];
                    // 提示框大小
                    var boxWidth = size.contentSize[0];
                    var boxHeight = size.contentSize[1];
                    // boxWidth > pointX 说明鼠标左边放不下提示框
                    if (boxWidth > pointX) {
                        x = 5;
                    } else { // 左边放的下
                        x = pointX - boxWidth;
                    }
                    // boxHeight > pointY 说明鼠标上边放不下提示框
                    if (boxHeight > pointY) {
                        y = 5;
                    } else { // 上边放得下
                        y = pointY - boxHeight;
                    }
                    return [x, y];
                },
				formatter: function (params) {
					var tips="";
					tips+='<font style="font-size: 12px">'+params[0].name+'</font>';
					var color = params[0].color;
					tips +='<br/><font style="font-size: 12px">终端状态(%)</font>';
					if (color === noMonitor) {
						tips += '<br/><font style="font-size: 10px">投运 : /</font>';
						tips += '<br/><font style="font-size: 10px">检修 : /</font>';
						tips += '<br/><font style="font-size: 10px">退运 : /</font>';
						tips += '<br/><font style="font-size: 12px">终端在线率(%)</font>';
						tips+='<br/><font style="font-size: 10px">/</font>';
					}else{
						for (var i = 0; i < 3; i++) {
							tips+='<br/><font style="font-size: 10px">'+params[i].seriesName+' : '+params[i].value+'</font>';
						}
                        tips += '<br/><font style="font-size: 12px">终端在线率(%)</font>';
						var onlineRate;
						if(Number(params[3].value)===3.14159){
                            onlineRate='暂无数据';
                        }else if(Number(params[3].value)===3.1415){
							onlineRate='/';
						}else{
                            onlineRate=params[3].value;
                        }
                        tips+='<br/><font style="font-size: 10px">'+onlineRate+'</font>';
					}
					return tips;
				}
			},
			//控制图标在dataroom中的位置大小
			grid: {
				left: '1%',
				right: '11%',
				bottom: '10%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: areas,
				name: '地区\n(终端个数)\n',
				splitLine: {
					show: false
				},
				axisLabel : {
					interval: 0,
					rotate:route,
					show:true,
					fontSize:10
				}
			}],
			yAxis: [{
				type: 'value',
				name: '%',
				max:100
			}],
			series: [{
				name: '投运',
				type: 'bar',
				stack: 'sum',
				barMaxWidth: barMax,
				data: run
			}, {
				name: '检修',
				type: 'bar',
				stack: 'sum',
				barMaxWidth:barMax,
				data: breaks
			},{
				name: '退运',
				type: 'bar',
				stack: 'sum',
				barMaxWidth: barMax,
				data: shutdown
			},{
				name: '在线率',
				type: 'bar',
				barGap: 0,
				barMaxWidth: barMax,
				data: rate
			}]
		};
		var district = echarts.init(document.getElementById('areaDepts'));
		district.setOption(option);
		areaImage=district.getDataURL();
	}

	//填充区域表格
	function initAreaTable(data) {
		var height=picHeight-50;
		if(data==null){
			data=[];
		}else{
			//计算总计
			var name='总计';
			var amounts=0;
			var normalData=0;
			var breaksData=0;
			var shutdownData=0;
			var totalOnline=-1;
			var onlineFlag=false;
			for(var i=0;i<data.length;i++){
				amounts=Number(data[i].amounts)+amounts;
				normalData=Number(data[i].status.normalData)+normalData;
				breaksData=Number(data[i].status.breaksData)+breaksData;
				shutdownData=Number(data[i].status.shutdownData)+shutdownData;
				if(Number(data[i].online)!==3.1415&Number(data[i].online)!==3.14159){
                    onlineFlag=true;
					totalOnline=totalOnline+Number(data[i].online)*Number(data[i].status.normalData);
                }
			}
			if(onlineFlag){
                totalOnline=totalOnline+1;
            }
			if(totalOnline===-1){
                totalOnline="(暂无数据)";
            }else{
				if(normalData===0){
					totalOnline=0;
				}else{
					totalOnline=(totalOnline/normalData).toFixed(2);
				}
            }
            var area={};
			area.name=name;
			area.amounts=amounts;
			var status={};
			status.normalData=normalData;
			status.breaksData=breaksData;
			status.shutdownData=shutdownData;
			area.status=status;
			area.online=totalOnline;
			data.push(area);
			data.reverse();
		}
		$("#areaTable").DataTable({
			data: data,
			autoWidth:false,
			order:[1,"desc"],
			columnDefs : [
				{ orderable: false, targets: [0,2,3,4] }
			],
			paging:false,
			lengthChange: false,
			searching:false,
			destroy : true,
			scrollY: height,
			info:false,
			language : {
				url:'/pqs9200/json/chine.json',
			},
			columns: [
				{ data: 'name' },
				{ data: 'amounts'},
				{data:'status.normalData', render:function (data, type, full, meta) {
						if(Number(full.amounts)===0){
							return "/";
						}
						return data;
					}},
				{data:'status.breaksData', render:function (data, type, full, meta) {
						if(Number(full.amounts)===0){
							return "/";
						}
						return data;
					}},
				{data:'status.shutdownData', render:function (data, type, full, meta) {
						if(Number(full.amounts)===0){
							return "/";
						}
						return data;
					}},
				{data:'online', render:function (data, type, full, meta) {
						if(Number(data)===3.1415){
							return "/";
						}else if(Number(data)===3.14159){
							return "（暂无数据）";
						}else{
							return data;
						}
					}},
			],
		})
	}


	//按终端厂家进行统计
	function  drawCompanyPic(companys,lineFeed,route) {
		$("#company").css("height",picHeight);
		var run=[];
		var breaks=[];
		var shutdown=[];
		var rate=[];
		var areas=[];
		if(null!=companys){
			for(var i=0;i<companys.length;i++){
				areas[i]=companys[i].name+lineFeed+"("+companys[i].amounts+")";
				var monitors=companys[i].amounts;
				if(Number(monitors)===0){
					var singleData={};
					var normal={};
					var itemStyle={};
					singleData.value=3.1415;
					normal.color=noMonitor;
					itemStyle.normal=normal;
					singleData.itemStyle=itemStyle;
					run[i]=singleData;
					rate[i]=singleData;
					breaks[i]=0;
					shutdown[i]=0;
				}else{
					run[i]=companys[i].status.normal;
					breaks[i]=companys[i].status.breaks;
					shutdown[i]=companys[i].status.shutdown;
					var onlineRate;
					onlineRate=Number(companys[i].online);
					var singleData={};
					var normal={};
					var itemStyle={};
					normal.color = getColor(onlineRate);
					if(onlineRate<3.1414){
						singleData.value = 3.1415;
						// item.actual = onlineRate;
					}else{
						singleData.value = onlineRate;
					}
					itemStyle.normal=normal;
					singleData.itemStyle=itemStyle;
					rate[i]=singleData;
				}
			}
		}
		var option = {
			backgroundColor: canvasBG,//背景色
			title: {
				text: '终端厂家',
				left :'46%',
				padding: [
					15,  // 上
					0, // 右
					0,  // 下
					0, // 左
				]
			},
            color: [runColor, breaksColor, grey],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				},
                position:  function (point, params, dom, rect, size) {
                    // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
                    // 提示框位置
                    var x = 0; // x坐标位置
                    var y = 0; // y坐标位置
                    // 当前鼠标位置
                    var pointX = point[0];
                    var pointY = point[1];
                    // 外层div大小
                    // var viewWidth = size.viewSize[0];
                    // var viewHeight = size.viewSize[1];
                    // 提示框大小
                    var boxWidth = size.contentSize[0];
                    var boxHeight = size.contentSize[1];
                    // boxWidth > pointX 说明鼠标左边放不下提示框
                    if (boxWidth > pointX) {
                        x = 5;
                    } else { // 左边放的下
                        x = pointX - boxWidth;
                    }
                    // boxHeight > pointY 说明鼠标上边放不下提示框
                    if (boxHeight > pointY) {
                        y = 5;
                    } else { // 上边放得下
                        y = pointY - boxHeight;
                    }
                    return [x, y];
                },
				formatter: function (params) {
                    var tips="";
                    tips+='<font style="font-size: 12px">'+params[0].name+'</font>';
                    var color = params[0].color;
                    tips +='<br/><font style="font-size: 12px">终端状态(%)</font>';
                    if (color === noMonitor) {
                        tips += '<br/><font style="font-size: 10px">投运 : /</font>';
                        tips += '<br/><font style="font-size: 10px">检修 : /</font>';
                        tips += '<br/><font style="font-size: 10px">退运 : /</font>';
                        tips += '<br/><font style="font-size: 12px">终端在线率(%)</font>';
                        tips+='<br/><font style="font-size: 10px">/</font>';
                    }else{
                        for (var i = 0; i < 3; i++) {
                            tips+='<br/><font style="font-size: 10px">'+params[i].seriesName+' : '+params[i].value+'</font>';
                        }
                        tips += '<br/><font style="font-size: 12px">终端在线率(%)</font>';
                        var onlineRate;
                        if(Number(params[3].value)===3.14159){
                            onlineRate='暂无数据';
                        }else if(Number(params[3].value)===3.1415){
							onlineRate='/';
						}else{
                            onlineRate=params[3].value;
                        }
                        tips+='<br/><font style="font-size: 10px">'+onlineRate+'</font>';
                    }
                    return tips;
				}
			},
			//控制图标在dataroom中的位置大小
			grid: {
				left: '1%',
				right: '11%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: areas,
				name: '终端厂家\n(终端个数)\n',
				splitLine: {
					show: false
				},
				axisLabel : {
					show:true,
					interval: 0,
					route:route,
					fontSize:10
				}
			}],
			yAxis: [{
				type: 'value',
				name: '%',
				max:100
			}],
			series: [{
				name: '投运',
				type: 'bar',
				stack: 'sum',
				barMaxWidth: barMax,
				data: run
			}, {
				name: '检修',
				type: 'bar',
				stack: 'sum',
				barMaxWidth: barMax,
				data: breaks
			},{
				name: '退运',
				type: 'bar',
				stack: 'sum',
				barMaxWidth: barMax,
				data: shutdown
			},{
				name: '在线率',
				type: 'bar',
				barGap: 0,
				barMaxWidth: barMax,
				data: rate
			}]
		};
		var factory = echarts.init(document.getElementById('company'));
		factory.setOption(option);
		companyImage=factory.getDataURL();
	}
	//填充终端厂家表格
	function initCompanyTable(data) {
		var height=picHeight-50;
		if(data==null){
			data=[];
		}else{
			//计算总计
			var name='总计';
			var amounts=0;
			var normalData=0;
			var breaksData=0;
			var shutdownData=0;
			var totalOnline=-1;
			var onlineFlag=false;
			var counts=0;
			for(var i=0;i<data.length;i++){
				amounts=Number(data[i].amounts)+amounts;
				normalData=Number(data[i].status.normalData)+normalData;
				breaksData=Number(data[i].status.breaksData)+breaksData;
				shutdownData=Number(data[i].status.shutdownData)+shutdownData;
				if(Number(data[i].online)!==3.1415&Number(data[i].online)!==3.14159){
					onlineFlag=true;
					totalOnline=totalOnline+Number(data[i].online)*Number(data[i].status.normalData);
				}
			}
			if(onlineFlag){
				totalOnline=totalOnline+1;
			}
			if(totalOnline===-1){
				totalOnline="(暂无数据)";
			}else{
				if(normalData===0){
					totalOnline=0;
				}else{
					totalOnline=(totalOnline/normalData).toFixed(2);
				}
			}
			var area={};
			area.name=name;
			area.amounts=amounts;
			var status={};
			status.normalData=normalData;
			status.breaksData=breaksData;
			status.shutdownData=shutdownData;
			area.status=status;
			area.online=totalOnline;
			data.push(area);
			data.reverse();
		}
		$("#companyTable").DataTable({
			data: data,
			autoWidth:false,
			order:[1,"desc"],
			columnDefs : [
				{ orderable: false, targets: [0,2,3,4] }
			],
			paging:false,
			lengthChange: false,
			searching:false,
			destroy : true,
			scrollY: height,
			info:false,
			language : {
				url:'/pqs9200/json/chine.json',
			},
			columns: [
				{ data: 'name' },
				{ data: 'amounts'},
				{data:'status.normalData', render:function (data, type, full, meta) {
						if(Number(full.amounts)===0){
							return "/";
						}
						return data;
					}},
				{data:'status.breaksData', render:function (data, type, full, meta) {
						if(Number(full.amounts)===0){
							return "/";
						}
						return data;
					}},
				{data:'status.shutdownData', render:function (data, type, full, meta) {
						if(Number(full.amounts)===0){
							return "/";
						}
						return data;
					}},
				{data:'online', render:function (data, type, full, meta) {
						if(Number(data)===3.1415){
							return "/";
						}else if(Number(data)===3.14159){
							return "（暂无数据）";
						}else{
							return data;
						}
					}},
			],
		})
	}

	//特殊处理，表头紧缩问题--start
	var it=null;
	function startQuery() {
		//实时刷新时间单位为毫秒
		it= setInterval('refreshQuery()',100);

	}
	/* 刷新查询 */
	function refreshQuery(){
		var width=$("#companyT").width();
		if(width>100){
			if(parseInt(areLength)>parseInt(barUpperLimit7)){
				drawAreaPic(areaResult,noLineFeed,barRouteIncline);
			}else {
				drawAreaPic(areaResult,lineFeed,barRouteZero);
			}
			if(parseInt(companyLength)>parseInt(barUpperLimit7)){
				drawCompanyPic(companyResult,noLineFeed,barRouteIncline);
			}else {
				drawCompanyPic(companyResult,lineFeed,barRouteZero);
			}
			initAreaTable(areaResult);
			initCompanyTable(companyResult);
			window.clearInterval(it)
		}
	}

	//点击保存图片
	$('#saveImage').on('click', function () {
		var area = $area.find("option:selected").text();
		var name = area+"终端运行统计";
		drawOnCanvas(areaImage, companyImage, name);
	});

	//点击导出报表数据
	$("#exportData").on("click",function () {
		var xhr = new XMLHttpRequest();
		var area = $area.eq(0).attr("index");
		var startTime = $startTime.eq(0).val();
		var endTime = $endTime.eq(0).val();
		var name = $area.eq(0).val();
		xhr.open('post', '/pqs9200/overview/downloadRuntimeStatusData', true);
		xhr.responseType = 'blob';
		xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
		var commontParamter={};
		commontParamter.area=area;
		commontParamter.startTime=startTime;
		commontParamter.endTime=endTime;
		var i = ityzl_SHOW_LOAD_LAYER();
		xhr.send(JSON.stringify(commontParamter))
		xhr.onload = function () {
			if (this.status === 200) {
				var blob = this.response;
				var a = document.createElement('a');
				var url = window.URL.createObjectURL(blob);
				a.href = url;
				//设置文件名称
				a.download = name+'终端运行统计.xlsx';
				a.click();
				a.remove();
			}
			//***********关闭loading
			ityzl_CLOSE_LOAD_LAYER(i);
		}

	})

	//根据在线率获取颜色
	function getColor(data) {
		if (data >= 90) {
			return green;
		} else if (data === 3.1415) {
			return noMonitor;
		} else if (data === 3.14159) {
			return noData;
		} else if (data < 60) {
			return red;
		} else {
			return yellow;
		}
	}
</script>
</body>
</html>
