hwttlfz.jsp 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478
  1. <!DOCTYPE html >
  2. <html >
  3. <%@ page language="java" contentType="text/html; charset=UTF-8"
  4. pageEncoding="UTF-8"%>
  5. <%@ page import="java.text.SimpleDateFormat"%>
  6. <%@ include file="../../common.jsp"%>
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <title>货物吞吐量发展分析</title>
  10. </head>
  11. <link rel="stylesheet" type="text/css" href="${app }/static/css/public.css" />
  12. <link rel="stylesheet" type="text/css" href="${app }/static/css/other.css" />
  13. <script type="text/javascript" src="${app }/static/js/highcharts.js"></script>
  14. <script type="text/javascript" src="${app }/static/js/exporting.js"></script>
  15. <script type="text/javascript" src="${app }/static/js/highcharts-3d.js"></script>
  16. <script type="text/javascript" src="${app }/static/biz/js/gkyxtjyfx/gkttlfx/hwttlfzmain.js"></script>
  17. <script>
  18. $(document).ready(function () {
  19. /* inithwzlSelect('hwzl','${hwzl}','80%'); */
  20. initHwzldydlSelect('hwzldydl','${dydlid}','showdedl','80%');
  21. initHwzldedlSelect('hwzldedl','${dedlid}','${dydlid}','80%');
  22. initszdSelect('szdsel', '${szd}', 'showgk', '80%');
  23. initgkSelect('gksel', '${szgk}', '${szd}', 'showgq', '80%');
  24. initgqSelect('gqsel', '${szgq}','${szd}', '${szgk}', null, '80%');
  25. hwttlfz.main.init();
  26. iFrameHeightIframe('${menuid}');//自适应高度
  27. });
  28. function showgk(){
  29. initgkSelect('gksel','${szgk }',$('.szdselectpicker').val(),"showgq",'80%');
  30. showgq();
  31. }
  32. function showdedl(){
  33. initHwzldedlSelect('hwzldedl','',$('.dydlselectpicker').val(),'80%')
  34. }
  35. function showgq(){
  36. initgqSelect('gqsel','${szgq }',$('.szdselectpicker').val(),$('.gkselectpicker').val(),null,'80%');
  37. }
  38. function inithwzlSelect(divid,existVal,width){
  39. $.post($.app + "/hwttlfz/selectHwzl", {
  40. }, function(data) {
  41. var str = "";
  42. str+="<select class='hwzlselectpicker' name='hwzlid' >";
  43. str+="<option></option>";
  44. if(data){
  45. for(var i=0;i<data.length;i++){
  46. var hwzl = data[i];
  47. if(hwzl.id==existVal){
  48. str+=" <option selected='selected' value='"+hwzl.id+"' >"+hwzl.text+"</option>";
  49. }else{
  50. str+=" <option value='"+hwzl.id+"' >"+hwzl.text+"</option>";
  51. }
  52. }
  53. }
  54. str+="</select>";
  55. $("#"+divid).empty();
  56. $("#"+divid).append(str);
  57. $('.hwzlselectpicker').selectpicker({
  58. width:width
  59. });
  60. }, "json");
  61. }
  62. function initthbSelect(){
  63. var str = "";
  64. str+="<select class='thbselectpicker' name='tonghuanbi' >";
  65. str+="<option></option>";
  66. if("tongbi"=='${tonghuanbi}'){
  67. str+=" <option value='tongbi' selected='selected'>同比</option>";
  68. str+=" <option value='huanbi'>环比</option>";
  69. }
  70. else{
  71. str+=" <option value='tongbi'>同比</option>";
  72. str+=" <option value='huanbi' selected='selected'>环比</option>";
  73. }
  74. str+="</select>";
  75. $("#thb").empty();
  76. $("#thb").append(str);
  77. $('.thbselectpicker').selectpicker({
  78. width:'80%'
  79. });
  80. }
  81. function initsfdwkfSelect(divid,existVal,width){
  82. $.post($.app + "/hwttlfz/selectSfdwkf", {
  83. }, function(data) {
  84. var str = "";
  85. str+="<select class='sfdwkfselectpicker' name='sfdwkf' >";
  86. str+="<option></option>";
  87. if(data){
  88. for(var i=0;i<data.length;i++){
  89. var sf = data[i];
  90. if(sf.id==existVal){
  91. str+=" <option selected='selected' value='"+sf.id+"' >"+sf.text+"</option>";
  92. }else{
  93. str+=" <option value='"+sf.id+"' >"+sf.text+"</option>";
  94. }
  95. }
  96. }
  97. str+="</select>";
  98. $("#"+divid).empty();
  99. $("#"+divid).append(str);
  100. $('.sfdwkfselectpicker').selectpicker({
  101. width:width
  102. });
  103. }, "json");
  104. }
  105. //构建货物种类第一大类下拉
  106. function initHwzldydlSelect(divid,existVal,changefunc,width){
  107. $.post($.app+"/dcsb/selectHwlxdydl",{
  108. },function(data) {
  109. var str="";
  110. if(changefunc!=null&&changefunc!=""){
  111. str+="<select class='dydlselectpicker' name='dydlid' onchange='"+changefunc+"()' id='dydlid'>";
  112. }else{
  113. str+="<select class='dydlselectpicker' name='dydlid' id='dydlid'>";
  114. }
  115. str+="<option></option>";
  116. if(data){
  117. for(var i=0;i<data.length;i++){
  118. var dydl=data[i];
  119. if(dydl.id==existVal){
  120. str+=" <option selected='selected' value='"+dydl.id+"' >"+dydl.text+"</option>";
  121. }else{
  122. str+="<option value='"+dydl.id+"'>"+dydl.text+"</option>" ;
  123. }
  124. }
  125. }
  126. str+="</select>";
  127. $("#"+divid).empty();
  128. $("#"+divid).append(str);
  129. $('.dydlselectpicker').selectpicker({
  130. width:width
  131. });
  132. }, "json");
  133. }
  134. //构建货物种类第二大类下拉
  135. //existVal:默认值,dydlid:第一大类id
  136. function initHwzldedlSelect(divid,existVal,dydlid,width){
  137. $.post($.app+"/dcsb/selectHwlxdedl",{
  138. dydlid:dydlid
  139. },function(data) {
  140. var str="";
  141. str+="<select class='dedlselectpicker' name='dedlid' id='dedlid'>";
  142. str+="<option></option>";
  143. if(data){
  144. for(var i=0;i<data.length;i++){
  145. var dedl=data[i];
  146. if(dedl.id==existVal){
  147. str+=" <option selected='selected' value='"+dedl.id+"' >"+dedl.text+"</option>";
  148. }else{
  149. str+="<option value='"+dedl.id+"'>"+dedl.text+"</option>" ;
  150. }
  151. }
  152. }
  153. str+="</select>";
  154. $("#"+divid).empty();
  155. $("#"+divid).append(str);
  156. $('.dedlselectpicker').selectpicker({
  157. width:width
  158. });
  159. }, "json");
  160. }
  161. $(function () {
  162. var list = '${list}';
  163. var zttl=[];
  164. var name=[];
  165. var hb=[];
  166. var tb=[]
  167. var aa='${zcl}';
  168. var bb=-+'${zcl}';
  169. $.each(JSON.parse(list), function (n, value) {
  170. name[n]=value.name;
  171. zttl[n]=value.zttl;
  172. hb[n]=value.hwttlhb;
  173. tb[n]=value.hwttltb;
  174. });
  175. $('#container').highcharts({
  176. title:{
  177. text:""
  178. },
  179. chart: {
  180. zoomType: 'xy'
  181. },
  182. lang : {
  183. contextButtonTitle : "图表菜单",
  184. resetRoom : "重置",
  185. printChart : "打印图片",
  186. downloadJPEG : "下载JPEG 图片",
  187. downloadPDF : "下载PDF文档",
  188. downloadPNG : "下载PNG 图片",
  189. downloadSVG : "下载SVG 矢量图",
  190. exportButtonTitle : "导出图片",
  191. },
  192. xAxis: [{
  193. categories: eval(name)
  194. }],
  195. yAxis: [{ // Primary yAxis
  196. min:-20,
  197. max:50,
  198. labels: {
  199. formatter: function() {
  200. return this.value +'%';
  201. },
  202. style: {
  203. color: '#89A54E'
  204. }
  205. },
  206. title: {
  207. text: '同比增长率',
  208. style: {
  209. color: '#89A54E'
  210. }
  211. },
  212. opposite: true,
  213. plotLines:[{
  214. color:'red', //线的颜色,定义为红色
  215. dashStyle:'ShortDash', //默认值,这里定义为实线
  216. value:aa, //定义在那个值上显示标示线,这里是在x轴上刻度为3的值处垂直化一条线
  217. width:2 //标示线的宽度,2px
  218. },{
  219. color:'yellow', //线的颜色,定义为红色
  220. dashStyle:'ShortDash', //默认值,这里定义为实线
  221. value:bb, //定义在那个值上显示标示线,这里是在x轴上刻度为1的值处垂直化一条线
  222. width:2 //标示线的宽度,2px
  223. }]
  224. }, { // Secondary yAxis
  225. min:0,
  226. max:100,
  227. gridLineWidth: 0,
  228. title: {
  229. text: '吞吐量',
  230. style: {
  231. color: '#4572A7'
  232. }
  233. },
  234. labels: {
  235. formatter: function() {
  236. return this.value +' 万吨';
  237. },
  238. style: {
  239. color: '#4572A7'
  240. }
  241. }
  242. }, { // Tertiary yAxis
  243. min:-20,
  244. max:50,
  245. gridLineWidth: 0,
  246. title: {
  247. text: '环比增长率',
  248. style: {
  249. color: '#AA4643'
  250. }
  251. },
  252. labels: {
  253. formatter: function() {
  254. return this.value +' %';
  255. },
  256. style: {
  257. color: '#AA4643'
  258. }
  259. },
  260. opposite: true
  261. }],
  262. tooltip: {
  263. shared: true
  264. },
  265. legend: {
  266. layout: 'vertical',
  267. align: 'left',
  268. x: 120,
  269. verticalAlign: 'top',
  270. y: 80,
  271. floating: true,
  272. backgroundColor: '#FFFFFF'
  273. },
  274. series: [{
  275. name: '吞吐量',
  276. color: '#4572A7',
  277. type: 'column',
  278. yAxis: 1,
  279. data: eval('['+zttl+']'),
  280. tooltip: {
  281. valueSuffix: ' 万吨'
  282. }
  283. }, {
  284. name: '环比增长率',
  285. type: 'spline',
  286. color: '#AA4643',
  287. yAxis: 2,
  288. data: eval('['+hb+']'),
  289. marker: {
  290. enabled: false
  291. },
  292. dashStyle: 'shortdot',
  293. tooltip: {
  294. valueSuffix: ' %'
  295. }
  296. }, {
  297. name: '同比增长率',
  298. color: '#89A54E',
  299. type: 'spline',
  300. data: eval('['+tb+']'),
  301. tooltip: {
  302. valueSuffix: ' %'
  303. }
  304. }]
  305. });
  306. });
  307. </script>
  308. <style type="text/css">
  309. .main_table td{
  310. text-align:left;
  311. padding-left:50px;
  312. width:50px;
  313. }
  314. </style>
  315. </head>
  316. <body >
  317. <div class="box">
  318. <div class="box-content">
  319. <form action="${app }/hwttlfz/main" id="hwttlfzform" method="post">
  320. <!-- 查询条件 -->
  321. <div class="searchdiv">
  322. <table class="search_table" cellpadding="0" cellspacing="0">
  323. <tr>
  324. <th width="11%"></th>
  325. <th width="22%"></th>
  326. <th width="11%"></th>
  327. <th width="22%"></th>
  328. <th width="12%"></th>
  329. <th width="22%"></th>
  330. </tr>
  331. <tr>
  332. <td class="right">
  333. 所在地:&nbsp;
  334. </td>
  335. <td>
  336. <span id="szdsel">
  337. </span>
  338. </td>
  339. <td class="right">
  340. 所在港口:&nbsp;
  341. </td>
  342. <td>
  343. <span id="gksel">
  344. </span>
  345. </td>
  346. <td class="right">
  347. 所在港区:&nbsp;
  348. </td>
  349. <td>
  350. <span id="gqsel">
  351. </span>
  352. </td>
  353. </tr>
  354. <tr>
  355. <td class="right">
  356. 货物种类第一大类:&nbsp;
  357. </td>
  358. <td>
  359. <span id="hwzldydl">
  360. </span>
  361. </td>
  362. <td class="right">
  363. 货物种类第二大类:&nbsp;
  364. </td>
  365. <td>
  366. <span id="hwzldedl">
  367. </span>
  368. </td>
  369. <td class="right">
  370. 报告时间起:&nbsp;
  371. </td>
  372. <td>
  373. <input id="d4311" class="Wdate" name="startDate" value="${startDate}" type="text" onFocus="WdatePicker({lang:'zh-cn',skin:'default',dateFmt:'yyyy-MM'})">
  374. </td>
  375. </tr>
  376. <tr>
  377. <td class="right">
  378. 增长率阈值:&nbsp;
  379. </td>
  380. <td>
  381. <select class='selectpicker' name="zcl" style="width:80%">
  382. <c:if test="${zcl ==10 }">
  383. <option value="10" selected="selected">10%</option>
  384. <option value="20">20%</option>
  385. </c:if>
  386. <c:if test="${zcl ==20 }">
  387. <option value="10" >10%</option>
  388. <option value="20" selected="selected">20%</option>
  389. </c:if>
  390. </select>
  391. </td>
  392. <td align="right" colspan="6">
  393. <a class="btn btn-default btn-sm" href="#" onclick="hwttlfz.main.search()">
  394. <i class="glyphicon glyphicon-search"></i>查询
  395. </a>
  396. </td>
  397. </tr>
  398. </table>
  399. </div>
  400. </form>
  401. <h2 align="center" style="margin-top:20px;" ><font style="font-size:16px;color:#196794;font-family:微软雅黑;font-weight: bold;">
  402. ${szgkzw}${hwzlzw}吞吐量发展<c:if test="${tonghuanbi=='tongbi'}">同比</c:if><c:if test="${tonghuanbi=='huanbi'||(tonghuanbi=='')}">环比</c:if>分析</font></h2>
  403. <div id="container" style="min-width: 200px; min-height:300px; margin: 0 auto;"></div>
  404. <div class="box">
  405. <div style="background-color:#f4f4f4;">
  406. <table class="main_table" id="hwttlfz" cellpadding="0" cellspacing="0" border="1">
  407. <tr>
  408. <th rowspan="2" width="20%">货物种类</th>
  409. <th colspan="3">合计</th>
  410. <th colspan="3">进港</th>
  411. <th colspan="3">出港</th>
  412. </tr>
  413. <tr>
  414. <th>万吨</th>
  415. <th>同比(%)</th>
  416. <th>环比(%)</th>
  417. <th>万吨</th>
  418. <th>同比(%)</th>
  419. <th>环比(%)</th>
  420. <th>万吨</th>
  421. <th>同比(%)</th>
  422. <th>环比(%)</th>
  423. </tr>
  424. <tr>
  425. <td>合计</td>
  426. <td>${sum.zttl }</td>
  427. <td>${sum.ztb }</td>
  428. <td>${sum.zhb }</td>
  429. <td>${sum.jgttl }</td>
  430. <td>${sum.jgtb}</td>
  431. <td>${sum.jghb }</td>
  432. <td>${sum.cgttl }</td>
  433. <td>${sum.cgtb}</td>
  434. <td>${sum.cghb }</td>
  435. </tr>
  436. <c:forEach items="${slist}" var="s" varStatus="status">
  437. <tr>
  438. <td>${s.hwzlname }</td>
  439. <td style="text-align:center;padding-left:0px">${s.zttl }</td>
  440. <td style="text-align:center;padding-left:0px">${s.ztb }</td>
  441. <td style="text-align:center;padding-left:0px">${s.zhb }</td>
  442. <td style="text-align:center;padding-left:0px">${s.jgttl }</td>
  443. <td style="text-align:center;padding-left:0px">${s.jgtb}</td>
  444. <td style="text-align:center;padding-left:0px">${s.jghb }</td>
  445. <td style="text-align:center;padding-left:0px">${s.cgttl }</td>
  446. <td style="text-align:center;padding-left:0px">${s.cgtb}</td>
  447. <td style="text-align:center;padding-left:0px">${s.cghb }</td>
  448. </tr>
  449. </c:forEach>
  450. </table>
  451. </div>
  452. </div>
  453. </div>
  454. </div>
  455. </body>
  456. </html>