hs
/
jsgkj


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
							<!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" src="${app }/static/biz/js/gkyxtjyfx/dcttltj/dcttltjmain.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		dcttltj.main.hwzlbackData='${hwzl}';
		dcttltj.main.hwzldedlbackData='${dedlid}';
		dcttltj.main.nwm='${nwmid}';
		dcttltj.main.jcg='${jcgid}';
		initszdSelect('szdsel','${szdid }', 'showgk', '80%');
		initgkSelect('gksel','${szgkid }','${szdid }','showgq','80%');
		initgqSelect('gqsel','${szgqid }','${szdid }','${szgkid }',null,'80%');
		dcttltj.main.init();
	});
	function showgk(){
		initgkSelect('gksel','${szgk }',$('.szdselectpicker').val(),"showgq",'80%');
		showgq();
	}

	function showgq(){
		initgqSelect('gqsel','${szgq }',$('.szdselectpicker').val(),$('.gkselectpicker').val(),null,'80%');
	}
	
  $(function () {
	  iFrameHeightIframe('${menuid}');//自适应高度
	  var list = '${dcttltjlist}';
	  var aqname=[];
	  var aqcount=[];
	  var aqsum=[];
      $.each(JSON.parse(list), function (n, value) {  
    	  aqname[n]=value.szd;
    	  aqcount[n]=value.sbsl;
    	  aqsum[n]=value.sum; 
      });
      var myDate = new Date();
		year=myDate.getFullYear();    //获取完整的年份(4位,1970-????)
		month=myDate.getMonth()+1;       //获取当前月份(0-11,0代表1月)
		day=("0"+myDate.getDate()).substr(-2);        //获取当前日(1-31)
		nextDay=myDate.getDate()+1;
		if (month<10){
	        month = "0"+month;
	    }
	    var firstDay = "01";
	    	if($('#d4311').val()==null||$('#d4311').val()==''){
			$('#d4311').val(year+'-'+month+'-'+firstDay);
		}
		if($('#d4312').val()==null||$('#d4312').val()==''){
			$('#d4312').val(year+'-'+month+'-'+day);
		}
	    $('#container').highcharts({
	        chart: {
	            zoomType: 'xy'
	        },
	        plotOptions:{
	        	series:{pointWidth:16}
	        },
	        credits:{//右下角的文本  
	            enabled: true,  
	            position: {//位置设置  
	                align: 'right',  
	                x: -10,  
	                y: -10  
	            },  
	            href: "",//点击文本时的链接  
	            style: {  
	                color:'blue'  
	            },  
	            text: ""//显示的内容  
	        }, 
	        title: {
	            text: '　'
	        },
	        lang :{ 
	        contextButtonTitle:"图表菜单",
	        resetRoom:"重置",
	        printChart:"打印图片",
            downloadJPEG: "下载JPEG 图片", 
            downloadPDF: "下载PDF文档", 
            downloadPNG: "下载PNG 图片", 
            downloadSVG: "下载SVG 矢量图",
            exportButtonTitle: "导出图片",
	        },
	        xAxis: [{
	            categories: aqname,
	            labels: {
	            	rotation: 0,
	            	style: {
	            	color: '#262626',//刻度颜色
	            	fontSize:'12px', //刻度字体大小
	            	fontFamily:'宋体'
	            	}
	            	}
	        }],
	        yAxis: [{ // Primary yAxis
	            labels: {
	                format: '{value}',
	                style: {
	                    color: '#262626'
	                }
	            },
	            title: {
	                text: '',
	                style: {
	                    color: '#262626'
	                }
	            }
	        }, { // Secondary yAxis
	            title: {
	                text: '',
	                style: {
	                    color: '#262626'
	                }
	            },
	            labels: {
	                format: '{value}',
	                style: {
	                    color: '#262626'
	                }
	            },
	            opposite: true
	        }],
	        tooltip: {
	            shared: true
	        },
	        legend: {
	            align: 'left',
	            x: 50,
	            verticalAlign: 'top',
	            y: -15,
	            floating: true,
	            backgroundColor: 'transparent'
	        },
	        series: [{
	            name: '<font style="font-size:12px;color:#5e5d5d;">单船作业申报数量（个）</font>',
	            color: '#5F49E4',
	            type: 'column',
	            yAxis: 1,
	            data: eval('['+aqcount+']'),
	            tooltip: {
	                valueSuffix: ' 个'
	            }

	        }, {
	            name: '<font style="font-size:12px;color:#5e5d5d;">单船作业吞吐量（万吨）</font>',
	            color: '#F4B620',
	            type: 'spline',
	            data: eval('['+aqsum+']'),
	            tooltip: {
	                valueSuffix: '万吨'
	            }
	        }]
	    });
	});
</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 }/dcttltj/main" id="dcttltjform" 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>
				<th width="22%"></th>
		</tr>
		<tr>
                        <td class="right">
                         	所在地：&nbsp;
                        </td>
						<td>
			            	<span id="szdsel">
							</span>
			            </td>
                        <td class="right">
                         	所在港口：&nbsp;
                        </td>
						<td>
			            	<span id="gksel">
							</span>
			            </td>
			            <td class="right">
                         	所在港区：&nbsp;
                        </td>
						<td>
			            	<span id="gqsel">
							</span>
			            </td>
                    </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-dd',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-dd',minDate: '#F{$dp.$D(\'d4311\',{d:0})}'})"></td>
                <td align="right">进出港：&nbsp;</td>
		     	<td align="left">
				<div id="jcgsel"></div>
			    </td>
                </tr>
                <tr align="center">
                <td align="right" >货物种类第一大类：&nbsp;</td>
              	<td align="left" ><span id="hwzldydl"></span></td>
              	<td align="right" >货物种类第二大类：&nbsp;</td>
              	<td align="left" ><span id="hwzldedl"></span></td>
              	<td align="right" >内外贸：&nbsp;</td>
              	<td align="left"><span id="nwmsel"></span></td>
                <td align="right">
               	<a class="btn btn-default btn-sm" href="#" onclick="dcttltj.main.search()">
				<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;">
${queryTime1}<c:if test="${queryTime2!=''&&(queryTime2!=queryTime1)}">-${queryTime2}</c:if>单船吞吐量统计图</font></h2>
<div id="container" style="min-width: 200px; min-height:300px; margin: 0 auto;"></div>
	<div style="margin:28px 35px ;height:40%;min-height:200px;">
    <table id="dctjtb" class="main_table" style="width:99%" border="1">
			<tr >
				<th rowspan="2">货物种类</th>
				<th colspan="3">总计</th>
				<th colspan="3">出港</th>
				<th colspan="3">进港</th>
			</tr>
			<tr >
				<th >合计</th>
				<th >外贸</th>
				<th >内贸</th>
				<th >合计</th>
				<th >外贸</th>
				<th >内贸</th>
				<th >合计</th>
				<th >外贸</th>
				<th >内贸</th>
			</tr>
			<c:forEach items="${voList}" var="dcttltj" varStatus="status">
			<tr class="tr_bg">
			    <td>${dcttltj.hwzl }</td>
			    <td style="text-align:center;padding-left:0px">${dcttltj.hj }</td> 
			    <td style="text-align:center;padding-left:0px">${dcttltj.wmhj }</td>
			    <td style="text-align:center;padding-left:0px">${dcttltj.nmhj }</td>
			    <td style="text-align:center;padding-left:0px">${dcttltj.cghj }</td>
			    <td style="text-align:center;padding-left:0px">${dcttltj.cgwmzysl }</td>
			    <td style="text-align:center;padding-left:0px">${dcttltj.cgnmzysl }</td>
			    <td style="text-align:center;padding-left:0px">${dcttltj.jghj }</td>
			    <td style="text-align:center;padding-left:0px">${dcttltj.jgwmzysl }</td>
			    <td style="text-align:center;padding-left:0px">${dcttltj.jgnmzysl }</td>
			</tr>
			</c:forEach>
		</table>
	</div>
</body>
</html>