LandSupply-cr-query.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>历年供地出让合同查询</title>
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. <!-- 引入mui样式 -->
  9. <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
  10. <!-- 引入app样式 -->
  11. <link rel="stylesheet" type="text/css" href="../css/app.css" />
  12. <!-- 引入补充样式集合 -->
  13. <link rel="stylesheet" type="text/css" href="../css/app.new.css">
  14. <!-- 引入字体 -->
  15. <link rel="stylesheet" type="text/css" href="../fonts/TTTGB-Medium.css" />
  16. <link rel="stylesheet" type="text/css" href="../fonts/font-time.css" />
  17. <!-- 引入弹窗及选择器样式 -->
  18. <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
  19. <link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
  20. <!-- 本页独有样式 -->
  21. <link rel="stylesheet" href="../css/query_where.css">
  22. <link rel="stylesheet" href="../css/query_result.css">
  23. </head>
  24. <body>
  25. <!-- 具备侧滑功能 根容器 -->
  26. <div id="offCanvasWrapper" class="mui-off-canvas-wrap">
  27. <aside class="mui-off-canvas-right">
  28. <!-- 具体内容容器 -->
  29. <div class="jt-wrap-right-content" id="divContent">
  30. <div class="jt-query-where-group-label">项目名称</div>
  31. <input id="txtXMMC" class="jt-query-where-input" placeholder="输入项目名称" />
  32. <div class="jt-query-where-group-label">最小面积(公顷)</div>
  33. <input id="txtMinArea" class="jt-query-where-input" type="number" max="10000"
  34. placeholder="输入最小面积值" />
  35. <div class="jt-query-where-group-label">最大面积(公顷)</div>
  36. <input id="txtMaxArea" class="jt-query-where-input" type="number" max="10000"
  37. placeholder="输入最大面积值" />
  38. <div class="jt-query-where-row">
  39. <button class="jt-query-btn" onclick="submitQuery()"><span
  40. class="app-icon app-icon-menu-query"></span>开始查询</button>
  41. <button class="jt-reset-btn" onclick="reset()"><span
  42. class="app-icon app-icon-menu-query"></span>重置</button>
  43. </div>
  44. </div>
  45. </aside>
  46. <!-- 主要内容开始 -->
  47. <div class="mui-inner-wrap">
  48. <div class="jt-normal-main">
  49. <div>
  50. <div class="mui-scroll-wrapper">
  51. <div class="mui-scroll" id="divQueryResult"></div>
  52. </div>
  53. </div>
  54. <div class="jt-map-location-panel">
  55. <header class="mui-bar jt-bar" onclick="$(this).parent().hide();">图斑定位</header>
  56. <iframe src="map.esri.html?type=location" id="frameWrapper"></iframe>
  57. </div>
  58. </div>
  59. <!-- 蒙版 -->
  60. <div class="mui-off-canvas-backdrop"></div>
  61. </div>
  62. <!-- 主要内容结束 -->
  63. </div>
  64. </body>
  65. </html>
  66. <!-- 引入mui脚本 -->
  67. <script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
  68. <!-- 引入弹窗及选择器脚本 -->
  69. <script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
  70. <script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
  71. <!-- 引入jQuery脚本 -->
  72. <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
  73. <!-- 引入通用脚本 -->
  74. <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
  75. <!-- 进入webview脚本 -->
  76. <script src="../js/webview.js" type="text/javascript" charset="utf-8"></script>
  77. <!-- 引入存储脚本 -->
  78. <script src="../js/save.js" type="text/javascript" charset="utf-8"></script>
  79. <!-- 引入ajax脚本 -->
  80. <script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
  81. <!-- 引入地图嵌入脚本 -->
  82. <script src="../js/built-in-map.js"></script>
  83. <!-- 本页独有脚本 -->
  84. <script type="text/javascript">
  85. /* mui初始化 */
  86. mui.init();
  87. /* 必须加 否则将导致数据表无法滚动 */
  88. mui('.mui-scroll-wrapper').scroll({
  89. scrollY: true, //是否竖向滚动
  90. scrollX: true, //是否横向滚动
  91. startX: 0, //初始化时滚动至x
  92. startY: 0, //初始化时滚动至y
  93. indicators: false, //是否显示滚动条
  94. deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
  95. bounce: false, //是否启用回弹
  96. });
  97. /* 初始化 */
  98. plusInit(function() {
  99. var vw = plus.webview.currentWebview();
  100. vw.setStyle({
  101. "titleNView": {
  102. buttons: [{
  103. 'float': 'right',
  104. fontSrc: '../fonts/iconfont.ttf',
  105. text: '\ue6f0',
  106. onclick: showRightWindow,
  107. }]
  108. }
  109. });
  110. // /* 绑定选择器 */
  111. // bindListenerToSelectButton('selCRFS', 'view_app_gd', 'crfs');
  112. /* 默认打开查询窗口 */
  113. showRightWindow();
  114. });
  115. /**
  116. * 打开右侧侧滑菜单
  117. */
  118. function showRightWindow() {
  119. mui('.mui-off-canvas-wrap').offCanvas('show');
  120. }
  121. /**
  122. * 关闭右侧侧滑菜单
  123. */
  124. function hideRightWindow() {
  125. mui('.mui-off-canvas-wrap').offCanvas().close();
  126. }
  127. /**
  128. * 重置查询条件
  129. */
  130. function reset() {
  131. $(".jt-query-where-input").each(function(index, element) {
  132. var txt = $(".jt-query-where-input")[index];
  133. $(txt).val('');
  134. });
  135. $(".jt-query-where-select").each(function(index, element) {
  136. var btn = $(".jt-query-where-select")[index];
  137. $(btn).html($(btn).attr('value'));
  138. $(btn).attr('data-value', "");
  139. });
  140. }
  141. /* 查询模型 */
  142. var queryModel = {
  143. minArea: '',
  144. maxArea: '',
  145. contractNumber: '',
  146. itemName: '',
  147. transferWay: '出让',
  148. useUnit: '',
  149. start: '1',
  150. count: '10',
  151. }
  152. /**
  153. * 检查查询条件
  154. */
  155. function checkSubmitInfo() {
  156. queryModel.itemName = $("#txtXMMC").val().trim();
  157. queryModel.minArea = $("#txtMinArea").val().trim();
  158. queryModel.maxArea = $("#txtMaxArea").val().trim();
  159. queryModel.start = '1';
  160. if (queryModel.minArea != "" && queryModel.maxArea != "") {
  161. var minValue = parseFloat(queryModel.minArea);
  162. var maxValue = parseFloat(queryModel.maxArea);
  163. if (minValue > maxValue) {
  164. muiAlert("最小面积不能大于最大面积!", "警告");
  165. return false;
  166. }
  167. }
  168. return true;
  169. }
  170. /**
  171. * 提交查询
  172. */
  173. function submitQuery() {
  174. /* 清除原有展示内容 */
  175. $("#divQueryResult").html('');
  176. /* 滚动到顶部 */
  177. mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100); //100毫秒滚动到顶
  178. /* 关闭右滑窗口 */
  179. hideRightWindow();
  180. /* 进行参数检查 */
  181. checkSubmitInfo();
  182. /* 执行查询数据 */
  183. beginQueryLdCompensation();
  184. }
  185. /**
  186. * 查询数据
  187. */
  188. function beginQueryLdCompensation() {
  189. sendAjax({
  190. waitMessage: '查询中...',
  191. data: queryModel,
  192. url: 'appQueryLandSupplyData',
  193. success: function(resData) {
  194. showLdCompensationQueryResult('divQueryResult', resData[0]);
  195. },
  196. error: function(err) {
  197. muiAlertError(err);
  198. },
  199. nodata: function(msg) {
  200. muiAlertError(msg);
  201. }
  202. })
  203. }
  204. /**
  205. * 展示查询结果
  206. * @param {string} fatherDomId 父容器Id
  207. * @param {JSON} data 查询结果数据
  208. */
  209. function showLdCompensationQueryResult(fatherDomId, data) {
  210. var fatherDom = $("#" + fatherDomId);
  211. for (var i in data.dataList) {
  212. var item = data.dataList[i];
  213. /* 创建头 */
  214. var topDiv = document.createElement('div');
  215. topDiv.className = 'jt-query-result-title';
  216. fatherDom.append(topDiv);
  217. var topHtml = "";
  218. topHtml += "<span class='jt-icon'>" + item.rowNumber + "</span>";
  219. topHtml += "<span class='jt-title'>" + item.itemName + "</span>";
  220. /* 内容容器Id */
  221. let contentDivId = 'query_' + item.itemId;
  222. topHtml += "<button onclick=\"queryPolygonFeatures(this,'gd_dkxx','xmid','" + item.itemId +
  223. "','dkmc','" + contentDivId + "')\" class='jt-btn'>图斑</button>";
  224. topDiv.innerHTML = topHtml;
  225. /* 创建内容 */
  226. var contentDiv = document.createElement('div');
  227. contentDiv.className = 'jt-query-result-content';
  228. contentDiv.id = contentDivId;
  229. fatherDom.append(contentDiv);
  230. var contentHtml = "";
  231. contentHtml += "<div class='jt-query-result-row'>";
  232. contentHtml += "<span class='jt-title'>行政区</span>";
  233. contentHtml += "<span class='jt-value'>" + item.areaName + "</span>";
  234. contentHtml += "<span class='jt-title'>方式</span>";
  235. contentHtml += "<span class='jt-value'>" + item.transferWay + "</span>";
  236. contentHtml += "</div>";
  237. contentHtml += "<div class='jt-query-result-row'>";
  238. contentHtml += "<span class='jt-title'>监管号</span>";
  239. contentHtml += "<span class='jt-value'>" + item.electronicSuperviseNumber + "</span>";
  240. contentHtml += "<span class='jt-title'>合同号</span>";
  241. contentHtml += "<span class='jt-value'>" + item.contractNumber + "</span>";
  242. contentHtml += "</div>";
  243. contentHtml += "<div class='jt-query-result-row'>";
  244. contentHtml += "<span class='jt-title'>用地单位</span>";
  245. contentHtml += "<span class='jt-value'>" + item.useUnitName + "</span>";
  246. contentHtml += "<span class='jt-title'>土地用途</span>";
  247. contentHtml += "<span class='jt-value'>" + item.landUse + "</span>";
  248. contentHtml += "</div>";
  249. contentHtml += "<div class='jt-query-result-row'>";
  250. contentHtml += "<span class='jt-title'>出让面积</span>";
  251. contentHtml += "<span class='jt-value'>" + item.landArea + "</span>";
  252. contentHtml += "<span class='jt-title'>出让价款</span>";
  253. contentHtml += "<span class='jt-value'>" + item.landMoney + "</span>";
  254. contentHtml += "</div>";
  255. contentHtml += "<div class='jt-query-result-row'>";
  256. contentHtml += "<span class='jt-title'>出让年限</span>";
  257. contentHtml += "<span class='jt-value'>" + item.durableYears + "</span>";
  258. contentHtml += "<span class='jt-title'>受让人</span>";
  259. contentHtml += "<span class='jt-value'>" + item.assigns + "</span>";
  260. contentHtml += "</div>";
  261. contentHtml += "<div class='jt-query-result-row'>";
  262. contentHtml += "<span class='jt-title'>签订日期</span>";
  263. contentHtml += "<span class='jt-value'>" + item.dateOfSigning + "</span>";
  264. contentHtml += "</div>";
  265. contentDiv.innerHTML = contentHtml;
  266. }
  267. /* 加载更多按钮 */
  268. /* 移除显示更多按钮 */
  269. $("#lastDom").remove();
  270. if (data.isLast != "1") {
  271. /* 添加 加载更多按钮 */
  272. var btn = document.createElement('button');
  273. fatherDom.append(btn);
  274. btn.id = "lastDom";
  275. btn.className = 'mui-btn mui-btn-block jt-btn-load';
  276. btn.innerHTML = "加载更多";
  277. btn.onclick = function() {
  278. mui(this).button('loading');
  279. queryModel.start = parseInt(queryModel.start) + parseInt(queryModel.count);
  280. /* 开始查询数据 */
  281. beginQueryLdCompensation();
  282. }
  283. }
  284. appendClickEventByClassName('jt-value');
  285. }
  286. </script>