hs
/
jsgkj


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							<!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/gkttlfx/hwttlmtmain.js"></script>
<script>
function inithwzlSelect(divid,existVal,width){
	$.post($.app + "/hwttlfz/selectHwzl", {
    }, function(data) {
    	var str = "";
    	str+="<select  class='hwzlselectpicker' name='hwzlid' >";
    	str+="<option></option>";
    	if(data){
    		for(var i=0;i<data.length;i++){
    			var hwzl = data[i];
    			if(hwzl.val==existVal){
    				str+=" <option selected='selected' value='"+hwzl.id+"' >"+hwzl.text+"</option>";
    			}else{
    				str+=" <option value='"+hwzl.id+"' >"+hwzl.text+"</option>";
    			}
    		}
    	}
    	str+="</select>";
    	$("#"+divid).empty();
    	$("#"+divid).append(str);
    	$('.hwzlselectpicker').selectpicker({
    		width:width
    	});
    	
    }, "json");
}
function initthbSelect(){
	    var str = "";
    	str+="<select  class='thbselectpicker' name='tonghuanbi' >";
    	str+="<option></option>";
    	if("tongbi"=='${tonghuanbi}'){
     	str+=" <option value='tongbi' selected='selected'>同比</option>";
     	str+=" <option value='huanbi'>环比</option>";
    	}
    	else{
    	str+=" <option value='tongbi'>同比</option>";
    	str+=" <option value='huanbi' selected='selected'>环比</option>";
    	}
		str+="</select>";
    	$("#thb").empty();
    	$("#thb").append(str);
    	$('.thbselectpicker').selectpicker({
    		width:'80%'
    	});
}
function initsfdwkfSelect(divid,existVal,width){
	$.post($.app + "/hwttlfz/selectSfdwkf", {
    }, function(data) {
    	var str = "";
    	str+="<select  class='sfdwkfselectpicker' name='sfdwkf' >";
    	str+="<option></option>";
    	if(data){
    		for(var i=0;i<data.length;i++){
    			var sf = data[i];
    			if(sf.id==existVal){
    				str+=" <option selected='selected' value='"+sf.id+"' >"+sf.text+"</option>";
    			}else{
    				str+=" <option value='"+sf.id+"' >"+sf.text+"</option>";
    			}
    		}
    	}
    	str+="</select>";
    	$("#"+divid).empty();
    	$("#"+divid).append(str);
    	$('.sfdwkfselectpicker').selectpicker({
    		width:width
    	});
    	
    }, "json");
}
$(function () {
	initthbSelect();
	initsfdwkfSelect('sfdwkf','${sfdwkf}','80%');
	inithwzlSelect('hwzl','${hwzl}','80%');
	initszdSelect('szdsel', '${szd}', 'showgk', '80%');
	initgkSelect('szgksel', '${szgk}', '${szd}', 'showgq', '80%');
	initgqSelect('szgqsel', '${szgq}','${szd}', '${szgk}', null, '80%');
	iFrameHeightIframe('${menuid}');//自适应高度
	var list = '${hwttllist}';
	var listhb='${hwttlhblist}';
	var zttl=[];
	var month=[];
	var hbzzl=[];
    $.each(JSON.parse(list), function (n, value) {
    	month[n]=value.month;
    	zttl[n]=value.zttl;
  	});
    $.each(JSON.parse(listhb), function (n, value) {
		hbzzl[n]=value.hwttlhb;
    });
     $('#container').highcharts({
         chart: {
             zoomType: 'xy'
         },
         lang : {
				contextButtonTitle : "图表菜单",
				resetRoom : "重置",
				printChart : "打印图片",
				downloadJPEG : "下载JPEG 图片",
				downloadPDF : "下载PDF文档",
				downloadPNG : "下载PNG 图片",
				downloadSVG : "下载SVG 矢量图",
				exportButtonTitle : "导出图片",
		},
         title: {
             text: '　'
         },
         xAxis: [{
             categories: eval(month)
         }],
         yAxis: [{ // Primary yAxis
             labels: {
                 format: '{value}吨',
                 style: {
                     color: '#89A54E'
                 }
             },
             title: {
                 text: '吞吐量',
                 style: {
                     color: '#89A54E'
                 }
             }
         }, { // Secondary yAxis
             title: {
                 text: '增长率',
                 style: {
                     color: '#4572A7'
                 }
             },
             labels: {
                 format: '{value}%',
                 style: {
                     color: '#4572A7'
                 }
             },
             opposite: true
         }],
         tooltip: {
             shared: true
         },
         legend: {
             layout: 'vertical',
             align: 'left',
             x: 120,
             verticalAlign: 'top',
             y: 100,
             floating: true,
             backgroundColor: '#FFFFFF'
         },
         series: [{
             name: '增长率',
             color: '#4572A7',
             type: 'column',
             yAxis: 1,
             data: eval('['+hbzzl+']'),
             tooltip: {
                 valueSuffix: ' %'
             }

         }, {
             name: '吞吐量',
             color: '#89A54E',
             type: 'spline',
             data:eval('['+zttl+']'),
             tooltip: {
                 valueSuffix: '吨'
             }
         }]
     });
});				
</script>
</head>
<body>
<div style="margin-top:30px;">
<form action="${app }/hwttlfz/hwttlmt" id="hwttlmtform" method="post"> 			
    			<!-- 查询条件 -->
 				<div >
   				   <table class="search_table" cellpadding="0" cellspacing="0">
   				   	   <tr>
							<th width="10%"></th>
							<th width="24%"></th>	
							<th width="10%"></th>
							<th width="24%"></th>
							<th width="10%"></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="szgksel">
								</span>
				            </td>
				            <td class="right">
			                	所在港区:&nbsp;
			                </td>
				            <td>
				            	<span id="szgqsel">
								</span>
				            </td>
		          		</tr>
						<tr>
							<td class="right">
			                	货物种类:&nbsp;
			                </td>
				            <td>
				            	<span id="hwzl">
								</span>
				            </td>
							<td class="right">
		                		报告时间起:&nbsp;
			                </td>
				            <td>
				            	<input id="d4311" class="Wdate" style="width:80%;" 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 class="right">
	                        	报告时间止:&nbsp;
	                        </td>
	                        <td>
	                        	<input id="d4312" class="Wdate" style="width:80%;" 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>
	                </tr>
	                <tr>
	               			 <td class="right">
			                	同比/环比:&nbsp;
			                 </td>
			                 <td>
				            	<span id="thb">
								</span>
				            </td>
				            
				             <td class="right">
			                	是否对外开放:&nbsp;
			                 </td>
			                 <td>
			                	<span id="sfdwkf"></span>
							</td>
	                </tr>
	                <tr>
	                        <td class="right" colspan="6">
							   	<a class="btn btn-default btn-sm" href="#"  onclick="hwttlmt.main.search()">
							   		<i class="glyphicon glyphicon-search"></i>查询
							   	</a>
	                        </td>
	                    </tr>
                    </table>
          		</div>
</form>
</div>
<h2 align="center" style="margin-top:20px;" ><font style="font-size:16px;color:#196794;font-family:微软雅黑;font-weight: bold;">
${szgkzw}<c:if test="${sfdwkf=='201'}">公用码头</c:if><c:if test="${sfdwkf=='202'}">货主码头</c:if>${hwzlzw}吞吐量发展<c:if test="${tonghuanbi=='tongbi'}">同比</c:if><c:if test="${tonghuanbi=='huanbi'||(tonghuanbi=='')}">环比</c:if>分析</font></h2>
<div id="container" style="min-width: 200px; min-height:300px; margin: 0 auto;"></div>
	
</body>
</html>