index.html 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <title>巡检信息列表</title>
  8. <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
  9. <link rel="stylesheet" href="../../../assets/module/admin.css?v=312"/>
  10. <style>
  11. .layui-table-cell {
  12. height: auto;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <!-- 页面加载loading -->
  18. <div class="page-loading">
  19. <div class="ball-loader">
  20. <span></span><span></span><span></span><span></span>
  21. </div>
  22. </div>
  23. <!-- 正文开始 -->
  24. <div class="layui-fluid">
  25. <div class="layui-card">
  26. <div class="layui-card-body">
  27. <form class="layui-form m-top10px m-bottom10px" lay-filter="filterForm" id="filterForm">
  28. <div class="layui-form toolbar">
  29. <div class="layui-form-item">
  30. <div class="layui-inline">
  31. <label class="layui-form-label w-auto w-padding">网格:</label>
  32. <div class="layui-input-inline mr0">
  33. <div id="grid"></div>
  34. <input type="hidden" name="gridId" id="gridId">
  35. </div>
  36. </div>
  37. <div class="layui-inline">
  38. <label class="layui-form-label ">站点:</label>
  39. <div class="layui-input-inline mr0">
  40. <div id="site"></div>
  41. <input type="hidden" name="parkId" id="parkId">
  42. </div>
  43. </div>
  44. <div class="layui-inline ">
  45. <label class="layui-form-label">日期</label>
  46. <div class="layui-input-block">
  47. <input type="text" name="hiddenTime" id="hiddenTime" autocomplete="off"
  48. placeholder="开始日期 至 结束日期" class="layui-input">
  49. </div>
  50. </div>
  51. <button type="button" lay-filter="formSubSearch" lay-submit
  52. class="layui-btn layui-btn-normal layui-btn-sm"
  53. style="height: 36px;width:80px;margin-left:15px;margin-top: 0px;position: relative;top: -5px">
  54. <i class="layui-icon"></i>搜索
  55. </button>
  56. </div>
  57. </div>
  58. </form>
  59. <table class="layui-table" id="datatable" lay-filter="datatable"></table>
  60. </div>
  61. </div>
  62. </div>
  63. <!-- js部分 -->
  64. <script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
  65. <script type="text/javascript" src="../../../assets/libs/jquery/jquery-3.2.1.min.js"></script>
  66. <script type="text/javascript" src="../../../assets/libs/leftTime/leftTime.js"></script>
  67. <script type="text/javascript" src="../../../assets/js/common.js?v=312"></script>
  68. <script>
  69. layui.use(['layer', 'form', 'table', 'admin', 'jquery', 'uParas', 'util', 'laydate', 'xmSelect'], function () {
  70. var $ = layui.jquery;
  71. var layer = layui.layer;
  72. var form = layui.form;
  73. var table = layui.table;
  74. var admin = layui.admin;
  75. var laydate = layui.laydate;
  76. var uParas = layui.uParas;
  77. var util = layui.util;
  78. var {cId, aId} = layui.data(uParas.tableName).user;
  79. var xmSelect = layui.xmSelect;
  80. // var _groupTree = layui._groupTree;
  81. var url1 = uParas.baseUrl + '/ent/parkConf/list';
  82. function toTree(data) {
  83. data.forEach(function (item) {
  84. delete item.children
  85. item.name = item.parkName
  86. item.value = item.parkId
  87. })
  88. var map = {}
  89. data.forEach(function (item) {
  90. map[item.parkId] = item
  91. })
  92. var val = []
  93. data.forEach(function (item) {
  94. var parent = map[item.parkParentId]
  95. if (parent) {
  96. (parent.children || (parent.children = [])).push(item)
  97. } else {
  98. val.push(item)
  99. }
  100. })
  101. return val
  102. }
  103. var gridSelect, siteSelect;
  104. var treeData = [];
  105. admin.req(url1, {}, function (resp) {
  106. if (resp.code == 1) {
  107. resp.data.forEach(function (item) {
  108. item.name = item.parkName
  109. item.value = item.parkId
  110. })
  111. var temp = JSON.parse(JSON.stringify(resp.data))
  112. var tempData = resp.data.filter(function (item) {
  113. return item.parkType === 1;
  114. })
  115. var treeData = toTree(temp);
  116. gridSelect = xmSelect.render({
  117. el: '#grid',
  118. radio: true,
  119. toolbar: {show: true},
  120. on: function (data) {
  121. //arr: 当前多选已选中的数据
  122. var arr = data.arr;
  123. if (arr.length > 0) {
  124. $('#gridId').val(arr[0].value);
  125. var childrenData = [];
  126. for (var i = 0; i < treeData.length; i++) {
  127. if (treeData[i].value === arr[0].value) {
  128. childrenData = treeData[i].children;
  129. }
  130. }
  131. initSiteSelect(childrenData);
  132. } else {
  133. $('#gridId').val("");
  134. initSiteSelect();
  135. }
  136. },
  137. data: tempData
  138. })
  139. }
  140. }, 'GET');
  141. function initSiteSelect(data = []) {
  142. siteSelect = xmSelect.render({
  143. el: '#site',
  144. radio: true,
  145. toolbar: {show: true},
  146. on: function (data) {
  147. //arr: 当前多选已选中的数据
  148. var arr = data.arr;
  149. if (arr.length > 0) {
  150. $('#parkId').val(arr[0].value);
  151. } else {
  152. $('#parkId').val("");
  153. }
  154. },
  155. data: data
  156. })
  157. }
  158. initSiteSelect();
  159. /*日期*/
  160. laydate.render({
  161. elem: '#hiddenTime',
  162. format: 'yyyy-MM-dd',
  163. range: '至',
  164. type: 'date',
  165. });
  166. // 搜索
  167. form.on('submit(formSubSearch)', function (data) {
  168. /*更新数据表*/
  169. // var data = {"hiddenTime":$("#hiddenTime").val(),"groupId":$("#selectedGroup").val()};
  170. var {field} = data;
  171. var timeArr = null;
  172. var timeArr = field.hiddenTime != "" ? field.hiddenTime.split("至") : null;
  173. var reqData = {
  174. gridId: field.gridId,
  175. startTime: timeArr ? timeArr[0].trim() : "",
  176. endTime: timeArr ? timeArr[1].trim() : "",
  177. parkId: field.parkId
  178. }
  179. insTb.reload({where: reqData}, 'data');
  180. });
  181. // 渲染表格数据
  182. var insTb = table.render({
  183. elem: '#datatable',
  184. url: uParas.baseUrl + '/ent/parkQrHiddenDanger/query',
  185. height: 687,
  186. even: true,
  187. page: true,
  188. toolbar: true,
  189. title: '隐患治理',
  190. cellMinWidth: 100,
  191. where: {
  192. cId: cId
  193. },
  194. cols: [[
  195. {type: 'numbers', title: '序号'},
  196. {
  197. field: 'hiddenDangerImg', align: 'center', sort: false, title: '图片', width: 70,
  198. templet: function (d) {
  199. return setHdangerImg(d.hiddenDangerImg);
  200. }
  201. },
  202. {field: 'gridName', sort: false, title: '网格'},
  203. {field: 'siteName', sort: false, title: '站点'},
  204. {field: 'createdTime', sort: false, title: '问题发现时间'},
  205. {field: 'hiddenDangerName', sort: false, title: '问题名称'},
  206. {field: 'hdType', sort: false, title: '问题类型'},
  207. {field: 'accountName', align: 'left', sort: false, title: '巡查人'},
  208. ]]
  209. });
  210. /*隐患附件*/
  211. function setHdangerImg(imgUrl) {
  212. var imgSrc = '/assets/images/error.jpg';
  213. if (imgUrl != null && imgUrl != '') {
  214. var hdImg = imgUrl.split(',');
  215. imgSrc = hdImg[0];
  216. }
  217. return '<a lay-event="showImg"><img style="display: inline-block;width: 40px;height: 40px;" src="' + imgSrc + '" ></a>'
  218. }
  219. // 工具条点击事件
  220. table.on('tool(datatable)', function (obj) {
  221. //debugger
  222. var data = obj.data;
  223. var layEvent = obj.event;
  224. if (layEvent == 'showImg') { // 展示附件
  225. var hdImg = data.hiddenDangerImg.split(',');
  226. showImg(hdImg[0]);
  227. }
  228. });
  229. function showImg(src) {
  230. openImage(src);
  231. }
  232. });
  233. </script>
  234. </body>
  235. </html>