hs
/
jsgkj


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
							<!DOCTYPE html >
<html >
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.text.SimpleDateFormat"%>
 <%@ include file="../../common.jsp"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>集装箱箱数统计</title>
</head>
<link rel="stylesheet" type="text/css"	href="${app }/static/css/public.css" />
<link rel="stylesheet" type="text/css"	href="${app }/static/css/other.css" />
<script type="text/javascript" src="${app }/static/js/highcharts.js"></script>
<script type="text/javascript" src="${app }/static/js/exporting.js"></script>
<script type="text/javascript" src="${app }/static/js/highcharts-3d.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		iFrameHeightIframe('${menuid}');//自适应高度
		
	});

	$(function () {
		var list = '${list}';
		var kxxl=[];
		var zxxl=[];
		var name=[];
		var zxl=[];
		var zbl=[]
	    $.each(JSON.parse(list), function (n, value) {
	    	name[n]=value.tjmonth+"月";
	    	kxxl[n]=value.kxxl;
	    	zxxl[n]=value.zxxl;
	    	zxl[n]=value.zxl;
	    	zbl[n]=value.zbl;
	  	});
	    $('#container').highcharts({
	    	title:{
	    		text:""
	    	},
	        chart: {
	        	type: 'column'
	        },
	        xAxis: [{
	            categories: eval(name)
	        }],
	        yAxis: [{ // Secondary yAxis
	            title: {
	                text: '箱数',
	                style: {
	                    color: '#4572A7'
	                }
	            },
	            labels: {
	                formatter: function() {
	                    return this.value +' 个';
	                },
	                style: {
	                    color: '#4572A7'
	                }
	            }

	        }, { // Tertiary yAxis
	            title: {
	                text: '空箱占比率',
	                style: {
	                    color: '#AA4643'
	                }
	            },
	            labels: {
	                formatter: function() {
	                    return this.value +' %';
	                },
	                style: {
	                    color: '#AA4643'
	                }
	            },
	            opposite: true
	        }],
	        tooltip: {
	            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
	            shared: true
	        },
	        plotOptions: {
	            column: {
	                stacking: 'percent'
	            }
	        },
	      /*   legend: {
	            layout: 'vertical',
	            align: 'left',
	            x: 80,
	            verticalAlign: 'top',
	            y: 80,
	            floating: true,
	            backgroundColor: '#FFFFFF'
	        }, */
	        series: [{
	            name: '空箱数量',
	            color: '#4572A7',
	            type: 'column',
	            data: eval('['+kxxl+']'),
	            tooltip: {
	                valueSuffix: ' 个'
	            }

	        }, {
	            name: '重箱箱数',
	            type: 'column',
	            color: '#AA4643',
	            data: eval('['+zxxl+']'),
	            tooltip: {
	                valueSuffix: ' 个'
	            }

	        }, {
	            name: '空箱占用率',
	            color: '#89A54E',
	            type: 'spline',
	            yAxis: 1,
	            data: eval('['+zbl+']'),
	            tooltip: {
	                valueSuffix: ' %'
	            }
	        }]
	    });
	});	
	
	
	function searchMain(){
		$("#jzxxltjform").submit();
	}
	
</script>
<style type="text/css">
.main_table td{
text-align:left;
padding-left:20px;
width:50px;
}
</style>
</head>
<body>
<div style="margin-top:30px;">
<form action="${app }/jzxxltj/main" id="jzxxltjform" method="post"> 	
<table class="search_table" cellpadding="0" cellspacing="0" align="center" >
		<tr>
				<th width="11%"></th>	
				<th width="22%"></th>
				<th width="11%"></th>
				<th width="22%"></th>
				<th width="12%"></th>
		</tr>
                      
			    <tr align="center">
				<td align="right" >报告时间起：&nbsp;</td>
                <td align="left" ><input id="d4311" class="Wdate" name="startDate" value="${startDate}"  type="text" onFocus="WdatePicker({lang:'zh-cn',skin:'default',dateFmt:'yyyy-MM',maxDate: '#F{$dp.$D(\'d4312\',{d:0})}'})"></td>
                <td align="right">报告时间止：&nbsp;</td>
                <td align="left" ><input id="d4312" class="Wdate" name="endDate" value="${endDate}" type="text" onFocus="WdatePicker({lang:'zh-cn',skin:'default',dateFmt:'yyyy-MM',minDate: '#F{$dp.$D(\'d4311\',{d:0})}'})"></td>
                <td align="left">
               	<a class="btn btn-default btn-sm" href="#" onclick="searchMain()">
				<i class="glyphicon glyphicon-search"></i>检索</a>
                </td>
		 	   </tr>
         <tr>
         </tr>
</table>
</form>
</div>
<h2 align="center" style="margin-top:20px;" ><font style="font-size:16px;color:#196794;font-family:微软雅黑;font-weight: bold;">
（${startDate}月——${endDate}月）集装箱空箱/重箱统计图</font></h2>
<br>
<div id="container" style="min-width: 200px; min-height:300px; margin: 0 auto;"></div>
</body>
</html>