hs
/
jsgkj


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
							<!DOCTYPE html >
<html >
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../common/base.jsp"%>
<%@ 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 }/css/public.css" />
<link rel="stylesheet" type="text/css"	href="${app }/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/dcttl/dcttltjmain.js"></script>
<script>
  $(function () {
	  var list = ${dcttltjlist};
	  var aqname=[];
	  var aqcount=[];
	  var aqsum=[];
      $.each(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: aqcount,
	            tooltip: {
	                valueSuffix: ' 个'
	            }

	        }, {
	            name: '<font style="font-size:12px;color:#5e5d5d;">单船作业吞吐量（万吨）</font>',
	            color: '#F4B620',
	            type: 'spline',
	            data: aqsum,
	            tooltip: {
	                valueSuffix: '万吨'
	            }
	        }]
	    });
	});
  /**
   * highcharts 主题
   */

  // Load the fonts
  Highcharts.createElement('link', {
  	href: 'http://fonts.googleapis.com/css?family=Signika:400,700',
  	rel: 'stylesheet',
  	type: 'text/css'
  }, null, document.getElementsByTagName('head')[0]);

  // Add the background image to the container
  Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
  	proceed.call(this);
  	this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)';
  });


  Highcharts.theme = {
  	colors: ["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
  		"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
  	chart: {
  		backgroundColor: null,
  		style: {
  			fontFamily: "Signika, serif"
  		}
  	},
  	title: {
  		style: {
  			color: 'black',
  			fontSize: '16px',
  			fontWeight: 'bold'
  		}
  	},
  	subtitle: {
  		style: {
  			color: 'black'
  		}
  	},
  	tooltip: {
  		borderWidth: 0
  	},
  	legend: {
  		itemStyle: {
  			fontWeight: 'bold',
  			fontSize: '13px'
  		}
  	},
  	xAxis: {
  		labels: {
  			style: {
  				color: '#6e6e70'
  			}
  		}
  	},
  	yAxis: {
  		labels: {
  			style: {
  				color: '#6e6e70'
  			}
  		}
  	},
  	plotOptions: {
  		series: {
  			shadow: true
  		},
  		candlestick: {
  			lineColor: '#404048'
  		},
  		map: {
  			shadow: false
  		}
  	},

  	// Highstock specific
  	navigator: {
  		xAxis: {
  			gridLineColor: '#D0D0D8'
  		}
  	},
  	rangeSelector: {
  		buttonTheme: {
  			fill: 'white',
  			stroke: '#C0C0C8',
  			'stroke-width': 1,
  			states: {
  				select: {
  					fill: '#D0D0D8'
  				}
  			}
  		}
  	},
  	scrollbar: {
  		trackBorderColor: '#C0C0C8'
  	},

  	// General
  	background2: '#E0E0E8'
  	
  };

  // Apply the theme
  Highcharts.setOptions(Highcharts.theme);
</script>
</head>
<body>
<div style="margin-top:30px;">
<form action="${app }/dcttltj/main.html" id="dcttltjform" method="post"> 	
<table class="search_table" cellpadding="0" cellspacing="0" align="center" >
		<tr>
				<th width="20%"></th>	
				<th width="20%"></th>
				<th width="20%"></th>
				<th width="10%"></th>
				<th width="10%"></th>
				<th width="20%"></th>
		</tr>
			   <tr align="center">
				<td align="right" ><font style="font-size:14px;color:#196794;font-family:微软雅黑;">报告时间起：&nbsp;</font></td>
                <td align="left" ><input id="d4311" class="Wdate" style="width: 201px;" 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"><font style="font-size:14px;color:#196794;font-family:微软雅黑;">报告时间止：&nbsp;</font></td>
                <td align="left" ><input id="d4312" class="Wdate" style="width: 201px;" 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="left" ></td>
                <td align="left">
               	<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;overflow:auto">
    <table class="table_ud">
			<tr >
				<th >所在地</th>
				<th >单船作业申报数量（个）</th>
				<th >单船作业吞吐量（万吨）</th>
			</tr>
			<c:forEach items="${dcttltj}" var="dcttltjlist">
			<tr>
				<td>${dcttltjlist.szd}</td>
				<td >${dcttltjlist.sbsl}</td>
				<td >${dcttltjlist.sum}</td>
			</tr>
			</c:forEach>
		</table>
	</div>
</body>
</html>