indexmain.jsp 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <meta charset="utf-8">
  7. <title>江苏省港口建设与经营管理信息系统</title>
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <%@ include file="../common.jsp"%>
  10. <script type="text/javascript" src="${app }/static/biz/js/index/indexmain.js"></script>
  11. <script type="text/javascript" src="${app }/static/biz/js/jquery.rwdImageMaps.min.js"></script>
  12. <script type="text/javascript">
  13. $(document).ready(function () {
  14. index.main.citycode='${citycode}';
  15. index.main.init();
  16. iFrameHeightIframe('index');//自适应高度
  17. $('img[usemap]').rwdImageMaps();
  18. });
  19. </script>
  20. <style type="text/css">
  21. .largeimage{
  22. position: relative;
  23. z-index: 1000;
  24. }
  25. .apply th{
  26. width: 65%;
  27. }
  28. .apply td{
  29. width: 35%;
  30. }
  31. .qsxx{
  32. z-index:3; top:0px;right:2px; width: 300px;height: 280px; position:absolute;
  33. border-radius:5px;
  34. background-color:#fff;
  35. -ms-border-radius:8px 8px 0 0;-moz-border-radius:8px 8px 0 0;-webkit-border-radius:8px 8px 0 0;-o-border-radius:8px 8px 0 0;
  36. }
  37. </style>
  38. </head>
  39. <body >
  40. <div class="box" style="overflow:hidden;">
  41. <!-- 全省信息 -->
  42. <div class="qsxx" id="all" >
  43. <div class="theme-poptit" style="margin-bottom:0px;height: 35px;">
  44. <div class="popTitle" style="padding: 0px 0 0 10px">
  45. <%-- <h4>${cityname }信息</h4> --%>
  46. <h4 style="margin-bottom: 0px;">全省港口概况</h4>
  47. </div>
  48. </div>
  49. <table class="apply" cellpadding="0" cellspacing="0">
  50. <tr>
  51. <th>经营人个数:&nbsp;</th>
  52. <td id="projyrgs">
  53. </td>
  54. </tr>
  55. <tr>
  56. <th>危货企业个数:&nbsp;</th>
  57. <td id="prowxqygs">
  58. </td>
  59. </tr>
  60. <tr>
  61. <th>泊位个数:&nbsp;</th>
  62. <td id="probwgs">
  63. </td>
  64. </tr>
  65. <tr>
  66. <th>万吨级以上泊位个数&nbsp;&nbsp;<br>(内河千吨级):&nbsp;</th>
  67. <td id="prowdbwgs">
  68. </td>
  69. </tr>
  70. <tr>
  71. <th>设计总通过能力(万吨):&nbsp;</th>
  72. <td id="prottl">
  73. </td>
  74. </tr>
  75. <tr>
  76. <th>当日单船作业申请数:&nbsp;</th>
  77. <td id="prodcsqs">
  78. </td>
  79. </tr>
  80. <tr>
  81. <th>当日总吞吐量:&nbsp;</th>
  82. <td id="prodrzttl">
  83. </td>
  84. </tr>
  85. <%-- <tr>
  86. <th>经营人个数:&nbsp;</th>
  87. <td>
  88. ${jyrnum }
  89. </td>
  90. </tr>
  91. <tr>
  92. <th>危货企业个数:&nbsp;</th>
  93. <td>
  94. ${whjyr }
  95. </td>
  96. </tr>
  97. <tr>
  98. <th>泊位个数:&nbsp;</th>
  99. <td >
  100. ${bwnum }
  101. </td>
  102. </tr>
  103. <tr>
  104. <th>万吨级以上泊位个数:&nbsp;</th>
  105. <td >
  106. ${wdjysbw }
  107. </td>
  108. </tr>
  109. <tr>
  110. <th>泊位总吞吐量(万吨):&nbsp;</th>
  111. <td >
  112. ${bwztul }
  113. </td>
  114. </tr>
  115. <tr>
  116. <th>当日单船作业申请数:&nbsp;</th>
  117. <td>
  118. ${drphsqs }
  119. </td>
  120. </tr> --%>
  121. </table>
  122. <!-- 列表 -->
  123. </div>
  124. <!-- 省级 -->
  125. <div id="province" style="display:none;">
  126. <img alt="" usemap="#provincemap" style="position:absolute;width:100%;height:100%; top: 0;left: 0;overflow: hidden;" src="${app }/static/biz/image/index/map.jpg">
  127. <map name="provincemap" id="provincemap">
  128. <!-- <area id="czgk" shape="circle" coords="381,188,11" onclick="index.main.getData('E8FFA9E619AA4A1BB560876281FBC27C','','czgk')" href="#" > -->
  129. <area id="cznhgk" shape="circle" coords="722,575,11" onclick="index.main.getData('6806736F9463483B97DEAAD549A8DAC4','','cznhgk')" href="#" >
  130. <area id="hagk" shape="circle" coords="597,325,11" onclick="index.main.getData('C92E3C8D6AF845C6B41117A280C64CCF','','hagk')" href="#" >
  131. <area id="jygk" shape="circle" coords="754,554,11" onclick="index.main.getData('B79F862FE3EB4C769D25B5DB0FB0B7BC','','jygk')" href="#" >
  132. <area id="lyggk" shape="circle" coords="682,145,11" onclick="index.main.getData('583C76313E4149339C46D588F32D32DF','','lyggk')" href="#" >
  133. <area id="lygnhgk" shape="circle" coords="616,168,11" onclick="index.main.getData('85FAB5FE87464F0FB9031F39AE47F217','','lygnhgk')" href="#" >
  134. <area id="njgk" shape="circle" coords="568,518,11" onclick="index.main.getData('8A6FCE4E301642DBAC708114C60EA252','','njgk')" href="#" >
  135. <area id="njnhgk" shape="circle" coords="575,576,11" onclick="index.main.getData('5D094A81394540E5A81076459134F8D0','','njnhgk')" href="#" >
  136. <area id="ntgk" shape="circle" coords="838,548,11" onclick="index.main.getData('6343A57E7C8B4CE98AC56981B5F78580','','ntgk')" href="#" >
  137. <area id="ntnhgk" shape="circle" coords="825,507,11" onclick="index.main.getData('0224947E09A044BCB4BF4611B00497EC','','ntnhgk')" href="#" >
  138. <area id="szgk" shape="circle" coords="828,579,11" onclick="index.main.getData('9CB496AD12DF4C899086AFC1D8A95B13','','szgk')" href="#" >
  139. <area id="sznhgk" shape="circle" coords="804,673,11" onclick="index.main.getData('A0994A1F80DB42D7AC7C6916588263F0','','sznhgk')" href="#" >
  140. <area id="tzgk" shape="circle" coords="732,527,11" onclick="index.main.getData('44A778FA40564317AF661CEC78D8E21D','','tzgk')" href="#" >
  141. <area id="tznhgk" shape="circle" coords="710,454,11" onclick="index.main.getData('BCC103BAFB0042DCA39F8684A37314D6','','tznhgk')" href="#" >
  142. <area id="wxgk" shape="circle" coords="738,604,11" onclick="index.main.getData('7D6837A76EF240658CCBBAC01C970862','','wxgk')" href="#" >
  143. <area id="sqgk" shape="circle" coords="529,287,11" onclick="index.main.getData('579F3A7E566E4A86924DBA290F22ECE1','','sqgk')" href="#" >
  144. <area id="xzgk" shape="circle" coords="381,188,11" onclick="index.main.getData('659D99470458492C89F45D6C757AFEAD','','xzgk')" href="#" >
  145. <area id="ycgk" shape="circle" coords="812,324,11" onclick="index.main.getData('2B5F56FB8EFC40538437442DC9F58C48','','ycgk')" href="#" >
  146. <area id="ycnhgk" shape="circle" coords="690,303,11" onclick="index.main.getData('2A13C4A53FEC4159BBA7800370FD09A6','','ycnhgk')" href="#" >
  147. <area id="yzgk" shape="circle" coords="668,485,11" onclick="index.main.getData('820E961344AA480DB4AAA9E43130918E','','yzgk')" href="#" >
  148. <area id="yznhgk" shape="circle" coords="643,427,11" onclick="index.main.getData('CB8C7F6DD3C1491C9F8F4461080F5273','','yznhgk')" href="#" >
  149. <area id="zjgk" shape="circle" coords="648,513,11" onclick="index.main.getData('BEA06E3449714B79A1CD28B5600A4AFC','','zjgk')" href="#" >
  150. <area id="zjnhgk" shape="circle" coords="676,546,11" onclick="index.main.getData('9B2ACF86744D467F8FB28AB7DF86E250','','zjnhgk')" href="#" >
  151. </map>
  152. </div>
  153. <!-- 南京 -->
  154. <div id="nanjing" style="display: none;">
  155. <img alt="" usemap="#nanjingmap" style="position:absolute;width:100%;height:100%; top: 0;left: 0;overflow: hidden;" src="${app }/static/biz/image/index/nanjing.jpg">
  156. <map name="nanjingmap" id="nanjingmap">
  157. <area id="njqbgq" shape="rect" coords="65,380,158,404" onclick="index.main.getData('','834C35B30744460FA85F51AB14599BFC','njqbgq')" href="#" >
  158. <area id="njbqgq" shape="rect" coords="160,531,255,551" onclick="index.main.getData('','EB7A205AD9C34AC1A4FCFCBF6B3E4D53','njbqgq')" href="#" >
  159. <area id="njmzzgq" shape="rect" coords="429,411,525,431" onclick="index.main.getData('','C439A690717A483CB6F1AA040CCD7D3F','njmzzgq')" href="#" >
  160. <area id="njpkgq" shape="rect" coords="500,205,597,227" onclick="index.main.getData('','265C0DF8789B4274BA84A014058257E1','njpkgq')" href="#" >
  161. <area id="njxggq" shape="rect" coords="548,364,644,383" onclick="index.main.getData('','1BE948247BA24EDF9DBABBBCFBA1BD3A','njxggq')" href="#" >
  162. <area id="njsymgq" shape="rect" coords="672,308,768,328" onclick="index.main.getData('','759DF99526FD4F7F934EF2DEC3C6CFF3','njsymgq')" href="#" >
  163. <area id="njdcgq" shape="rect" coords="789,42,885,64" onclick="index.main.getData('','9CE798065DCF48989CE9D6095EA77868','njdcgq')" href="#" >
  164. <area id="njxswgq" shape="rect" coords="814,322,909,342" onclick="index.main.getData('','95FFD3B84247464FAB32389A2B802DFF','njxswgq')" href="#" >
  165. <area id="njxbgq" shape="rect" coords="969,221,1065,241" onclick="index.main.getData('','146BCA17B5794F7D8BA8E8EB7C4C7202','njxbgq')" href="#" >
  166. <area id="njxxgq" shape="rect" coords="977,417,1073,437" onclick="index.main.getData('','2B74E3B45CE04EB58440BFDD44A96387','njxxgq')" href="#" >
  167. <area id="njltgq" shape="rect" coords="1160,422,1256,442" onclick="index.main.getData('','4C7359F3F188412289C1B3590D64DA04','njltgq')" href="#" >
  168. <area id="njyzgq" shape="rect" coords="1381,316,1476,336" onclick="index.main.getData('','559C0BB5C11B43E9AC93B2C666B60373','njyzgq')" href="#" >
  169. <area id="njmdgq" shape="rect" coords="1318,490,1414,512" onclick="index.main.getData('','4B19E8F155784D31BEE44DCB8C459D96','njmdgq')" href="#" >
  170. </map>
  171. </div>
  172. <!-- 图表 -->
  173. <div id="gridData" align="center" style="display: none;">
  174. <table class="main_table" style="width:90%;" cellpadding="0" cellspacing="0">
  175. <tr>
  176. <th width="3%">序号</th>
  177. <th width="10%">所在港区</th>
  178. <th width="10%">经营人个数</th>
  179. <th width="10%">危货企业个数</th>
  180. <th width="8%">泊位个数</th>
  181. <th width="12%">万吨级以上泊位个数<br>(内河千吨级)</th>
  182. <th width="13%">设计总靠泊能力(万吨)</th>
  183. <th width="13%">当日单船作业申请数</th>
  184. <th width="8%">当日总吞吐量</th>
  185. </tr>
  186. <c:forEach items="${list}" var="citygqdata" varStatus="status">
  187. <tr>
  188. <td>${status.index+1 }</td>
  189. <td>${citygqdata.szgq}</td>
  190. <td>${citygqdata.jyrnum }</td>
  191. <td>${citygqdata.whjyr}</td>
  192. <td>${citygqdata.bwnum}</td>
  193. <td>${citygqdata.wdjysbw}</td>
  194. <td>${citygqdata.bwztul}</td>
  195. <td>${citygqdata.drphsqs}</td>
  196. <td>${citygqdata.drzttl}</td>
  197. </tr>
  198. </c:forEach>
  199. </table>
  200. </div>
  201. <!-- 苏州 -->
  202. <div id="suzhou" style="display: none;">
  203. <img alt="" usemap="#suzhoumap" style="position:absolute;width:100%;height:100%; top: 0;left: 0;overflow: hidden;" src="${app }/static/biz/image/index/suzhou.png">
  204. <map name="suzhoumap" id="suzhoumap">
  205. </map>
  206. </div>
  207. <!-- 连云港 -->
  208. <div id="lianyungang" style="display: none;">
  209. <img alt="" usemap="#lianyungangmap" style="position:absolute;width:100%;height:100%; top: 0;left: 0;overflow: hidden;" src="${app }/static/biz/image/index/lianyungang.jpg">
  210. <map name="lianyungangmap" id="lianyungangmap" >
  211. <area id="lygzygq" shape="rect" coords="1134,51,1230,63" onclick="index.main.getData('','3C00D41476874B64A29B75EB6547474D','lygzygq')" href="#" >
  212. <area id="lyggq" shape="rect" coords="1323,203,1420,214" onclick="index.main.getData('','C84C5CFAD0B0454C99A1D35F8D56673A','lyggq')" href="#" >
  213. <area id="lygghgq" shape="rect" coords="1491,564,1575,573" onclick="index.main.getData('','58CE3217EF0E4FEC959B8FDF8D4CCDB0','lygghgq')" href="#" >
  214. <area id="lygxygq" shape="rect" coords="1578,317,1673,331" onclick="index.main.getData('','E548CDE607064C2591DF924C57F40A33','lygxygq')" href="#" >
  215. </map>
  216. </div>
  217. <!-- 淮安 -->
  218. <div id="huaian" style="display: none;">
  219. <img alt="" usemap="#huaianmap" style="position:absolute;width:100%;height:100%; top: 0;left: 0;overflow: hidden;" src="${app }/static/biz/image/index/huaian.jpg">
  220. <map name="huaianmap" id="huaianmap">
  221. </map>
  222. </div>
  223. <!-- 扬州 -->
  224. <div id="yangzhou" style="display: none;">
  225. <img alt="" usemap="#yangzhoumap" style="position:absolute;width:100%;height:100%; top: 0;left: 0;overflow: hidden;" src="${app }/static/biz/image/index/yangzhou.jpg">
  226. <map name="yangzhoumap" id="yangzhoumap">
  227. </map>
  228. </div>
  229. <!-- 泰兴 -->
  230. <div id="taixing" style="display: none;">
  231. <img alt="" usemap="#taixingmap" style="position:absolute;width:100%;height:100%; top: 0;left: 0;overflow: hidden;" src="${app }/static/biz/image/index/taixing.jpg">
  232. <map name="taixingmap" id="taixingmap">
  233. </map>
  234. </div>
  235. </div>
  236. <div class="theme-popover" id="jyrselectdiv" style="width: 300px;height: 280px; ">
  237. <div class="theme-poptit" style="margin-bottom: 0px;">
  238. <div class="popTitle" >
  239. <h4 id="title"></h4>
  240. </div>
  241. <div class="close">
  242. <a href="#" title="关闭" onclick="guanbipop()" >×</a>
  243. </div>
  244. </div>
  245. <table class="apply" cellpadding="0" cellspacing="0">
  246. <tr>
  247. <th>经营人个数:&nbsp;</th>
  248. <td id="jyrgs">
  249. </td>
  250. </tr>
  251. <tr>
  252. <th>危货企业个数:&nbsp;</th>
  253. <td id="wxqygs">
  254. </td>
  255. </tr>
  256. <tr>
  257. <th>泊位个数:&nbsp;</th>
  258. <td id="bwgs">
  259. </td>
  260. </tr>
  261. <tr>
  262. <th>万吨级以上泊位个数&nbsp;<br>(内河千吨级):&nbsp;</th>
  263. <td id="wdbwgs">
  264. </td>
  265. </tr>
  266. <tr>
  267. <th>设计总靠泊能力(万吨):&nbsp;</th>
  268. <td id="ttl">
  269. </td>
  270. </tr>
  271. <tr>
  272. <th>当日单船作业申请数:&nbsp;</th>
  273. <td id="dcsqs">
  274. </td>
  275. </tr>
  276. <tr>
  277. <th>当日总吞吐量:&nbsp;</th>
  278. <td id="drzttl">
  279. </td>
  280. </tr>
  281. </table>
  282. <!-- 列表 -->
  283. </div>
  284. </body>
  285. </html>