|
|
@@ -0,0 +1,177 @@
|
|
|
+<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
+ pageEncoding="UTF-8"%>
|
|
|
+<%@ page import="java.text.SimpleDateFormat"%>
|
|
|
+<%@ include file="../../common.jsp"%>
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>港口吞吐量分析</title>
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+ <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/highcharts-3d.js"></script>
|
|
|
+ <script type="text/javascript" src="${app }/static/js/exporting.js"></script>
|
|
|
+<script type="text/javascript">
|
|
|
+$(document).ready(function () {
|
|
|
+ initChart();
|
|
|
+ initSelect();
|
|
|
+ iFrameHeightIframe('${menuid}');//自适应高度
|
|
|
+});
|
|
|
+function initSelect(){
|
|
|
+ if('${tjx}'!=''){
|
|
|
+ $("#tjx").val('${tjx}');
|
|
|
+ }
|
|
|
+ if('${zzbl}'!=''){
|
|
|
+ $("#zzbl").val('${zzbl}');
|
|
|
+ }
|
|
|
+}
|
|
|
+function submitGyhzttlForm(){
|
|
|
+ if($("#tjx").val() == 'gy'){
|
|
|
+ $("#gyhzttlfxform").attr("action","${app }/gyhzttlfx/gymtttl/main");
|
|
|
+ }else{
|
|
|
+ $("#gyhzttlfxform").attr("action","${app }/gyhzttlfx/hzmtttl/main");
|
|
|
+ }
|
|
|
+ $("#gyhzttlfxform").submit();
|
|
|
+}
|
|
|
+function initChart(){
|
|
|
+ var ttl = ${ttl};
|
|
|
+ var month = ${dateList};
|
|
|
+ var bl = ${bl}
|
|
|
+ $('#container').highcharts({
|
|
|
+ chart: {
|
|
|
+ zoomType: 'xy'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '货物吞吐量分析'
|
|
|
+ },
|
|
|
+ /* subtitle: {副标题
|
|
|
+ text: 'Source: WorldClimate.com'
|
|
|
+ }, */
|
|
|
+ xAxis: [{
|
|
|
+ categories: month,//['Jan', 'Feb', 'Mar', 'Apr', 'May'],
|
|
|
+ crosshair: true
|
|
|
+ }],
|
|
|
+ yAxis: [{ // Primary yAxis
|
|
|
+ labels: {
|
|
|
+ format: '{value}%',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '百分比',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[1]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, { // Secondary yAxis
|
|
|
+ title: {
|
|
|
+ text: '货物吞吐量',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ format: '{value}吨',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ opposite: true
|
|
|
+ }],
|
|
|
+ tooltip: {
|
|
|
+ shared: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ layout: 'vertical',
|
|
|
+ align: 'left',
|
|
|
+ x: 120,
|
|
|
+ verticalAlign: 'top',
|
|
|
+ y: 100,
|
|
|
+ floating: true,
|
|
|
+ backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '吞吐量',
|
|
|
+ type: 'column',
|
|
|
+ yAxis: 1,
|
|
|
+ data: ttl,//[49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
|
|
|
+ tooltip: {
|
|
|
+ valueSuffix: '吨'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ name: '百分比',
|
|
|
+ type: 'spline',
|
|
|
+ data: bl,
|
|
|
+ tooltip: {
|
|
|
+ valueSuffix: '%'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ });
|
|
|
+}
|
|
|
+</script>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+
|
|
|
+<form id="gyhzttlfxform" 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">
|
|
|
+ 请选择统计项：
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span><select id="tjx" name="tjx" class="form-control" style="width: 80%">
|
|
|
+ <option value="gy">公用码头吞吐量</option>
|
|
|
+ <option value="hz">货主码头吞吐量</option>
|
|
|
+ </select></span>
|
|
|
+ </td>
|
|
|
+ <td class="right">
|
|
|
+ 选择日期：
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <input id="startDate" class="Wdate" style="width:80%;" name="startDate" value="${startDate}" type="text" onFocus="WdatePicker({lang:'zh-cn',skin:'default',dateFmt:'yyyy-MM'})">
|
|
|
+ </td>
|
|
|
+ <td class="middle">~</td>
|
|
|
+ <td>
|
|
|
+ <input id="endDate" class="Wdate" style="width:80%;" name="endDate" value="${endDate}" type="text" onFocus="WdatePicker({lang:'zh-cn',skin:'default',dateFmt:'yyyy-MM'})">
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="right">
|
|
|
+ 请选择增长比率：
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span><select id="zzbl" name="zzbl" class="form-control" style="width: 80%">
|
|
|
+ <option value="tb">同比</option>
|
|
|
+ <option value="hb">环比</option>
|
|
|
+ <option value="zs">增速</option>
|
|
|
+ </select></span>
|
|
|
+ </td>
|
|
|
+ <td></td>
|
|
|
+ <td></td>
|
|
|
+ <td></td>
|
|
|
+ <td>
|
|
|
+ <a class="btn btn-default btn-sm" href="#" onclick="submitGyhzttlForm()">
|
|
|
+ <i class="glyphicon glyphicon-search"></i>查询
|
|
|
+ </a>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+</form>
|
|
|
+ <div id="container" style="min-width:400px;height:400px"></div>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
ld_jiangxf