case-info.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  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. <link href="../css/mui.css" rel="stylesheet" />
  9. <link href="../css/mui.picker.css" rel="stylesheet" />
  10. <link href="../css/mui.poppicker.css" rel="stylesheet" />
  11. <!-- 引入APP样式 -->
  12. <link href="../css/app.css" type="text/css" rel="stylesheet" />
  13. <link rel="stylesheet" href="../css/app.new.css">
  14. <!-- 引入案件详情样式 -->
  15. <link rel="stylesheet" type="text/css" href="../css/case.info.css" />
  16. <!-- 引入腾讯字体 -->
  17. <link rel="stylesheet" type="text/css" href="../fonts/TTTGB-Medium.css" />
  18. <link rel="stylesheet" href="../fonts/font-jt.css">
  19. <!-- 本页面独有样式 -->
  20. <style type="text/css">
  21. </style>
  22. </head>
  23. <body>
  24. <div class="mui-content" style="padding: 4px;">
  25. <div style="padding: 10px 10px;">
  26. <div class="mui-segmented-control" style="margin: 0px;padding: 0px;">
  27. <a class="mui-control-item" href="#item1" id="seg1">
  28. 基础信息
  29. </a>
  30. <a class="mui-control-item" href="#item2" id="seg2">
  31. 案件清单
  32. </a>
  33. </div>
  34. </div>
  35. <div class="mui-scroll-wrapper" style="top: 60px;padding: 10px;">
  36. <div id="item1" class="mui-control-content">
  37. <div class="mui-content-padded">
  38. <form class="mui-input-group">
  39. <div class="mui-input-row">
  40. <label class="key">案件编号</label>
  41. <label class="value" id="lblCaseNum">JJKCQ20210126123452</label>
  42. </div>
  43. <div class="mui-input-row">
  44. <label class="key">所属乡镇</label>
  45. <label class="value" id="lblSSXZ">经济技术开发</label>
  46. </div>
  47. <div class="mui-input-row">
  48. <label class="key">所属村庄</label>
  49. <label class="value" id="lblSSCZ">经济技术开发</label>
  50. </div>
  51. <div class="mui-input-row">
  52. <label class="key">现状地类</label>
  53. <label class="value" id="lblXZDL">经济技术开发</label>
  54. </div>
  55. <div class="mui-input-row">
  56. <label class="key">规划地类</label>
  57. <label class="value" id="lblGHDL">经济技术开发</label>
  58. </div>
  59. <div class="mui-input-row">
  60. <label class="key">占地面积</label>
  61. <label class="value" id="lblTBMJ">123.5亩</label>
  62. </div>
  63. </form>
  64. </div>
  65. </div>
  66. <div id="item2" class="mui-control-content mui-scroll">
  67. <div class="mui-content-padded">
  68. <ul id="listTable" class="layui-timeline">
  69. </ul>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </body>
  75. </html>
  76. <!-- 引入mui脚本 -->
  77. <script src="../js/mui.min.js"></script>
  78. <!-- 引入网络交互脚本 -->
  79. <script src="../js/ajax.js"></script>
  80. <!-- 引入通用脚本 -->
  81. <script src="../js/common.js"></script>
  82. <!-- 引入存储脚本 -->
  83. <script src="../js/save.js" type="text/javascript" charset="utf-8"></script>
  84. <!-- 引入案件脚本 -->
  85. <script src="../js/case.js" type="text/javascript" charset="utf-8"></script>
  86. <!-- 引入webview脚本 -->
  87. <script src="../js/webview.js"></script>
  88. <!-- 引入案件详情脚本 -->
  89. <script src="../js/case-info.js" type="text/javascript" charset="utf-8"></script>
  90. <script type="text/javascript">
  91. mui.init();
  92. /* 设置滚动条 否则无法滚动 */
  93. mui(".mui-scroll-wrapper").scroll({
  94. scrollY: true, //是否竖向滚动
  95. scrollX: true, //是否横向滚动
  96. startX: 0, //初始化时滚动至x
  97. startY: 0, //初始化时滚动至y
  98. indicators: false, //是否显示滚动条
  99. deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
  100. bounce: false, //是否启用回弹
  101. });
  102. /* 获取变量 */
  103. var domTable = document.getElementById("listTable");
  104. var domCaseNum = document.getElementById("lblCaseNum");
  105. var domSSXZ = document.getElementById("lblSSXZ");
  106. var domSSCZ = document.getElementById("lblSSCZ");
  107. var domXZDL = document.getElementById("lblXZDL");
  108. var domGHDL = document.getElementById("lblGHDL");
  109. var domTBMJ = document.getElementById("lblTBMJ");
  110. var userInfo;
  111. let caseId = GetQueryString('caseId');
  112. /* 页面加载完成 Plus初始化完成 */
  113. plusInit(function() {
  114. if (caseId) {
  115. queryLifeData(caseId);
  116. } else {
  117. var self = plus.webview.currentWebview();
  118. queryLifeData(self.casenum);
  119. }
  120. });
  121. /**
  122. * 根据案件Id获取案件生命周期数据
  123. * @param {string} caseId
  124. */
  125. function queryLifeData(caseId) {
  126. //删除所有子节点
  127. domTable.innerHTML = "";
  128. /* 获取本地用户信息 */
  129. getSaveUserInfo({
  130. success: function(uInfo) {
  131. userInfo = uInfo;
  132. sendAjax({
  133. url: 'appQueryCaseLifes',
  134. type: 'post',
  135. waitMessage: '正在查询...',
  136. data: {
  137. casenum: caseId,
  138. },
  139. success: function(resData) {
  140. let baseInfo = {
  141. state: '1000',
  142. };
  143. /* 展示基础数据 */
  144. if (resData[0].caseBaseInfo) {
  145. baseInfo = resData[0].caseBaseInfo;
  146. domCaseNum.innerHTML = baseInfo.casenum;
  147. domSSXZ.innerHTML = baseInfo.caseVillagesAndTowns;
  148. domSSCZ.innerHTML = baseInfo.caseVillage;
  149. domXZDL.innerHTML = baseInfo.xzdl;
  150. domGHDL.innerHTML = baseInfo.ghdl;
  151. domTBMJ.innerHTML = baseInfo.tbmj + '亩';
  152. }
  153. /* 展示生命周期数据 */
  154. for (let caseLife of resData[0].caseLifes) {
  155. var li = CreateItem(caseLife);
  156. domTable.appendChild(li);
  157. }
  158. /* 加载最后一项 */
  159. var li = CtreateNextLi(baseInfo.state);
  160. domTable.appendChild(li);
  161. },
  162. error: function(err) {
  163. muiAlertError(err);
  164. }
  165. })
  166. },
  167. error: function(err) {
  168. muiAlertError(err);
  169. }
  170. })
  171. /* 切换选项卡 主要是第二次加载时页面已经存在 */
  172. mui.trigger(document.getElementById("seg2"), 'touchstart');
  173. mui.trigger(document.getElementById("seg2"), 'tap');
  174. }
  175. </script>