hs
/
jsgkj


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
							<!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/hwttlfzmain.js"></script>
<script>
$(document).ready(function () {
	/* inithwzlSelect('hwzl','${hwzl}','80%'); */
	initHwzldydlSelect('hwzldydl','${dydlid}','showdedl','80%');
	initHwzldedlSelect('hwzldedl','${dedlid}','${dydlid}','80%');
	initszdSelect('szdsel', '${szd}', 'showgk', '80%');
	initgkSelect('gksel', '${szgk}', '${szd}', 'showgq', '80%');
	initgqSelect('gqsel', '${szgq}','${szd}', '${szgk}', null, '80%');
	hwttlfz.main.init();
	iFrameHeightIframe('${menuid}');//自适应高度
});
function showgk(){
	initgkSelect('gksel','${szgk }',$('.szdselectpicker').val(),"showgq",'80%');
	showgq();
}

function showdedl(){
	initHwzldedlSelect('hwzldedl','',$('.dydlselectpicker').val(),'80%')
}

function showgq(){
	initgqSelect('gqsel','${szgq }',$('.szdselectpicker').val(),$('.gkselectpicker').val(),null,'80%');
}


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.id==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 initHwzldydlSelect(divid,existVal,changefunc,width){
	$.post($.app+"/dcsb/selectHwlxdydl",{
	},function(data) {
		var str="";
		if(changefunc!=null&&changefunc!=""){
			str+="<select class='dydlselectpicker' name='dydlid' onchange='"+changefunc+"()' id='dydlid'>";
		}else{
			str+="<select class='dydlselectpicker' name='dydlid' id='dydlid'>";
		}
		str+="<option></option>";
		if(data){
			for(var i=0;i<data.length;i++){
				var dydl=data[i];
				if(dydl.id==existVal){
					str+=" <option selected='selected' value='"+dydl.id+"' >"+dydl.text+"</option>";
				}else{
					str+="<option value='"+dydl.id+"'>"+dydl.text+"</option>" ;
				}
			}
		}
		str+="</select>";
		$("#"+divid).empty();
		$("#"+divid).append(str);
		$('.dydlselectpicker').selectpicker({
    		width:width
    	});
	}, "json");
}	

//构建货物种类第二大类下拉	
//existVal：默认值，dydlid：第一大类id
function initHwzldedlSelect(divid,existVal,dydlid,width){
	$.post($.app+"/dcsb/selectHwlxdedl",{
	dydlid:dydlid
	},function(data) {
		var str="";
		str+="<select class='dedlselectpicker' name='dedlid' id='dedlid'>";
		str+="<option></option>";
		if(data){
			for(var i=0;i<data.length;i++){
				var dedl=data[i];
				if(dedl.id==existVal){
					str+=" <option selected='selected' value='"+dedl.id+"' >"+dedl.text+"</option>";
				}else{
					str+="<option value='"+dedl.id+"'>"+dedl.text+"</option>" ;
				}
			}
		}
		str+="</select>";
		$("#"+divid).empty();
		$("#"+divid).append(str);
		$('.dedlselectpicker').selectpicker({
  		width:width
  	});
	}, "json");
}		

$(function () {
	var list = '${list}';
	var zttl=[];
	var name=[];
	var hb=[];
	var tb=[]
	var aa='${zcl}';
	var bb=-+'${zcl}';
    $.each(JSON.parse(list), function (n, value) {
    	name[n]=value.name;
    	zttl[n]=value.zttl;
    	hb[n]=value.hwttlhb;
    	tb[n]=value.hwttltb;
  	});
    $('#container').highcharts({
    	title:{
    		text:""
    	},
        chart: {
            zoomType: 'xy'
        },
        xAxis: [{
            categories: eval(name)
        }],
        yAxis: [{ // Primary yAxis
        	min:-20,
        	max:50,
            labels: {
                formatter: function() {
                    return this.value +'%';
                },
                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: '同比增长率',
                style: {
                    color: '#89A54E'
                }
            },
            opposite: true,
            plotLines:[{
                color:'red',           //线的颜色，定义为红色
                dashStyle:'ShortDash',     //默认值，这里定义为实线
                value:aa,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
                width:2                //标示线的宽度，2px
            },{
                color:'yellow',           //线的颜色，定义为红色
                dashStyle:'ShortDash',     //默认值，这里定义为实线
                value:bb,               //定义在那个值上显示标示线，这里是在x轴上刻度为1的值处垂直化一条线
                width:2                //标示线的宽度，2px
            }]

        }, { // Secondary yAxis
        	min:0,
        	max:100,
            gridLineWidth: 0,
            title: {
                text: '吞吐量',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                formatter: function() {
                    return this.value +' 万吨';
                },
                style: {
                    color: '#4572A7'
                }
            }

        }, { // Tertiary yAxis
        	min:-20,
        	max:50,
            gridLineWidth: 0,
            title: {
                text: '环比增长率',
                style: {
                    color: '#AA4643'
                }
            },
            labels: {
                formatter: function() {
                    return this.value +' %';
                },
                style: {
                    color: '#AA4643'
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 80,
            floating: true,
            backgroundColor: '#FFFFFF'
        },
        series: [{
            name: '吞吐量',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: eval('['+zttl+']'),
            tooltip: {
                valueSuffix: ' 万吨'
            }

        }, {
            name: '环比增长率',
            type: 'spline',
            color: '#AA4643',
            yAxis: 2,
            data: eval('['+hb+']'),
            marker: {
                enabled: false
            },
            dashStyle: 'shortdot',
            tooltip: {
                valueSuffix: ' %'
            }

        }, {
            name: '同比增长率',
            color: '#89A54E',
            type: 'spline',
            data: eval('['+tb+']'),
            tooltip: {
                valueSuffix: ' %'
            }
        }]
    });
});	

</script>
<style type="text/css">
.main_table td{
text-align:left;
padding-left:50px;
width:50px;
}
</style>
</head>
<body>
<div style="margin-top:30px;">
<form action="${app }/hwttlfz/main" id="hwttlfzform" method="post"> 			
    			<!-- 查询条件 -->
 				<div >
   				   <table class="search_table" cellpadding="0" cellspacing="0">
   				   	   <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>
							<td class="right">
			                	货物种类第一大类：&nbsp;
			                </td>
				            <td>
				            	<span id="hwzldydl">
								</span>
				            </td>
				            <td class="right">
			                	货物种类第二大类：&nbsp;
			                </td>
				            <td>
				            	<span id="hwzldedl">
								</span>
				            </td>
							<td class="right">
		                		报告时间起：&nbsp;
			                </td>
				            <td>
				            	<input id="d4311" class="Wdate" name="startDate"  value="${startDate}"  type="text" onFocus="WdatePicker({lang:'zh-cn',skin:'default',dateFmt:'yyyy-MM'})">
				            </td>
				            
	                </tr>
	                <tr>
	                        <td class="right">
		                		增长率阈值：&nbsp;
			                </td>
				            <td>
				            	
				            	<select class='selectpicker' name="zcl" style="width:80%">
				            	<c:if test="${zcl ==10 }">
				            	  <option value="10" selected="selected">10%</option>
				            	  <option value="20">20%</option>
				            	  </c:if>
				            	  
				            	 <c:if test="${zcl ==20 }">
				            	  <option value="10" >10%</option>
				            	  <option value="20" selected="selected">20%</option>
				            	  </c:if>
				            	</select>
				            </td>
	                        <td align="right"  colspan="6">
							   	<a class="btn btn-default btn-sm" href="#"  onclick="hwttlfz.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}${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>


	<div class="box">
		<div  style="background-color:#f4f4f4;">
<table class="main_table" id="hwttlfz" cellpadding="0" cellspacing="0" border="1">
	<tr>
		<th rowspan="2" width="20%">货物种类</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>
		<tr>
			<td>合计</td>
			<td>${sum.zttl }</td>
			<td>${sum.ztb }</td>
			<td>${sum.zhb }</td>
			<td>${sum.jgttl }</td>
			<td>${sum.jgtb}</td>
			<td>${sum.jghb }</td>
			<td>${sum.cgttl }</td>
			<td>${sum.cgtb}</td>
			<td>${sum.cghb }</td>
		</tr>
	 <c:forEach items="${slist}" var="s" varStatus="status">
		<tr>
			<td>${s.hwzlname }</td>
			<td style="text-align:center;padding-left:0px">${s.zttl }</td>
			<td style="text-align:center;padding-left:0px">${s.ztb }</td>
			<td style="text-align:center;padding-left:0px">${s.zhb }</td>
			<td style="text-align:center;padding-left:0px">${s.jgttl }</td>
			<td style="text-align:center;padding-left:0px">${s.jgtb}</td>
			<td style="text-align:center;padding-left:0px">${s.jghb }</td>
			<td style="text-align:center;padding-left:0px">${s.cgttl }</td>
			<td style="text-align:center;padding-left:0px">${s.cgtb}</td>
			<td style="text-align:center;padding-left:0px">${s.cghb }</td>
			
		</tr>
	</c:forEach>
</table>	
</div>
</div>

</body>
</html>