index.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519
  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. .width{
  15. width: auto;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <!-- 页面加载loading -->
  21. <div class="page-loading">
  22. <div class="ball-loader">
  23. <span></span><span></span><span></span><span></span>
  24. </div>
  25. </div>
  26. <!-- 正文开始 -->
  27. <div class="layui-fluid">
  28. <!--<div class="layui-card-header" style="background-color: #fff;padding-top: 10px;padding-bottom: 10px;">
  29. <div class="layui-inline pull-left" >
  30. <h3 id="htmlHeader">临时检查任务</h3>
  31. </div>
  32. <div class="layui-inline pull-right">
  33. <button id="btnBack" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">返回</button>
  34. </div>
  35. </div>-->
  36. <div class="layui-card">
  37. <div class="layui-card-body">
  38. <form class="layui-form m-top10px m-bottom10px" lay-filter="filterForm" id="filterForm">
  39. <div class="layui-form toolbar" lay-filter="filterForm" >
  40. <div class="layui-form-item">
  41. <div class="layui-row">
  42. <div class="layui-inline text-left" >
  43. <label class="layui-form-label width" >部门</label>
  44. <div class="layui-input-inline mr0">
  45. <input type="text" id="groupName" name="groupName" value=""
  46. placeholder="点击选择"
  47. class="layui-input" readonly>
  48. <input type="hidden" id="groupId" name="groupId">
  49. <div id="menuContent" class="menuContent">
  50. <ul id="groupTree" class="ztree" style="margin-top:0;"></ul>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="layui-inline text-left" >
  55. <label class="layui-form-label width">任务分类</label>
  56. <div class="layui-input-inline " style="width: 100px">
  57. <select name="checkType" lay-filter="formCheckType">
  58. <option value="">全部</option>
  59. <option value="random">临时</option>
  60. <option value="fixed">常规</option>
  61. </select>
  62. </div>
  63. <div class="layui-input-inline " style="margin-left: -13px;width: 100px;">
  64. <select name="checkMode" lay-filter="formCheckMode">
  65. <option value="">全部</option>
  66. <option value="1">现场任务</option>
  67. <option value="2">基础任务</option>
  68. </select>
  69. </div>
  70. </div>
  71. <div class="layui-inline ">
  72. <label class="layui-form-label width">岗位</label>
  73. <div class="layui-input-inline mr0">
  74. <select name="positionId" id="positionId" lay-filter="formPosition">
  75. </select>
  76. </div>
  77. </div>
  78. <div class="layui-inline text-left ">
  79. <label class="layui-form-label width">日期</label>
  80. <div class="layui-input-inline mr0">
  81. <input type="text" name="dateRange" id="dateRange" placeholder="开始 至 结束" autocomplete="off" class="layui-input">
  82. </div>
  83. </div>
  84. <!--<button type="button" lay-filter="formDateSubSearch" lay-submit class="layui-btn layui-btn-normal layui-btn-sm" style="height: 36px;margin-top: -4px">-->
  85. <!--<i class="layui-icon"></i>搜索-->
  86. <!--</button>-->
  87. <!--<button type="button" lay-filter="formDateSubEmpty" lay-submit class="layui-btn layui-btn-sm" style="height: 36px;margin-top: -4px">-->
  88. <!--<i class="layui-icon"></i>清空-->
  89. <!--</button>-->
  90. <div class="layui-inline text-left">
  91. <label class="layui-form-label width">关键字</label>
  92. <div class="layui-input-inline mr0">
  93. <input name="keyword" id="keyword" class="layui-input" type="text" placeholder="输入关键字"/>
  94. </div>
  95. </div>
  96. <button type="button" lay-filter="formSubSearch" lay-submit class="layui-btn layui-btn-normal layui-btn-sm" style="height: 36px;margin-top: -6px">
  97. <i class="layui-icon"></i>搜索
  98. </button>
  99. <!--<div class="layui-inline layui-col-md3 text-left">-->
  100. <!--<label class="layui-form-label">数据筛选</label>-->
  101. <!--<div class="layui-input-block">-->
  102. <!--<select name="delFlag">-->
  103. <!--<option value="0" selected>正常</option>-->
  104. <!--<option value="1">已删除</option>-->
  105. <!--</select>-->
  106. <!--</div>-->
  107. <!--</div>-->
  108. </div>
  109. <div class="layui-row" style="padding-top: 10px;">
  110. <!--<div class="layui-inline layui-col-md3 text-left" style="margin-left: -40px">-->
  111. <!--<label class="layui-form-label">日 期</label>-->
  112. <!--<div class="layui-input-inline mr0">-->
  113. <!--<input type="text" name="dateRange" class="layui-input" id="dateRange" placeholder=" - ">-->
  114. <!--</div>-->
  115. <!--</div>-->
  116. <!--<div class="text-right">-->
  117. <!--<div class="layui-inline">-->
  118. <!--<button class="layui-btn icon-btn" lay-filter="formSubSearch" lay-submit style="background-color: #007DDB;">-->
  119. <!--<i class="layui-icon">&#xe615;</i>搜索-->
  120. <!--</button>-->
  121. <!--</div>-->
  122. <!--</div>-->
  123. </div>
  124. </div>
  125. </div>
  126. </form>
  127. <div class="layui-tab" lay-filter="tabChange">
  128. <ul class="layui-tab-title">
  129. <li class="layui-this djc c-add" lay-id="wait">待检查</li>
  130. <li lay-id="already " class="yjc">已检查</li>
  131. <li lay-id="already " class="yyq">已逾期</li>
  132. </ul>
  133. <div class="layui-tab-content">
  134. <div class="layui-tab-item layui-show">
  135. <table class="layui-table" id="datatable" lay-filter="datatable"></table>
  136. </div>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. <!--数据TPL-->
  143. <script type="text/html" id="checkModeTpl">
  144. {{# if(d.checkMode != null && d.checkMode == '1'){ }}
  145. 现场检查
  146. {{# } else { }}
  147. 基础检查
  148. {{# } }}
  149. </script>
  150. <!-- 详情弹窗 -->
  151. <script type="text/html" id="viewTpl">
  152. <div class="layui-fluid">
  153. <div class="layui-card">
  154. <div class="layui-card-body">
  155. <div class="layui-tab-item layui-show">
  156. <div class="layui-row" >
  157. <table class="layui-table">
  158. <colgroup>
  159. <col width="150">
  160. <col>
  161. <thead>
  162. </thead>
  163. <tbody>
  164. <tr>
  165. <th width="150" >任务名称</th>
  166. <td id="riskCheckDefTitleView"></td>
  167. </tr>
  168. <tr>
  169. <th width="150" >任务类型</th>
  170. <td id="checkTypeView"></td>
  171. </tr>
  172. <tr>
  173. <th width="150" >检查类型</th>
  174. <td id="riskCheckTypeView"></td>
  175. </tr>
  176. <tr>
  177. <th width="150" >执行岗位</th>
  178. <td id="riskCheckPositionView"></td>
  179. </tr>
  180. <tr>
  181. <th width="150" >检查周期</th>
  182. <td id="checkCycleView"></td>
  183. </tr>
  184. <tr>
  185. <th width="150" >检查频率</th>
  186. <td id="scheduleFrequencyView"></td>
  187. </tr>
  188. <tr>
  189. <th width="150" >参与人员</th>
  190. <td id="riskCheckParticipantView"></td>
  191. </tr>
  192. <tr>
  193. <th width="150" >描述:</th>
  194. <td id="riskCheckDefDescView"></td>
  195. </tr>
  196. </tbody>
  197. </colgroup>
  198. </table>
  199. </div>
  200. </div>
  201. </div>
  202. </div>
  203. </div>
  204. </script>
  205. <!-- js部分 -->
  206. <script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
  207. <!--<script type="text/javascript" src="../../../assets/libs/jquery/jquery-3.2.1.min.js"></script>-->
  208. <script type="text/javascript" src="../../../assets/js/common.js?v=312"></script>
  209. <script>
  210. layui.use(['layer', 'form', 'table', 'admin', 'uParas','_groupTree','util','laydate','element'], function () {
  211. var $ = layui.jquery;
  212. var layer = layui.layer;
  213. var form = layui.form;
  214. var table = layui.table;
  215. var admin = layui.admin;
  216. var uParas = layui.uParas;
  217. var util = layui.util;
  218. var _groupTree = layui._groupTree;
  219. var laydate = layui.laydate;
  220. var element = layui.element;
  221. laydate.render({
  222. elem: '#dateRange',
  223. format: 'yyyy-MM-dd',
  224. range:true,
  225. type: 'date',
  226. change: function(value, date){ //监听日期被切换
  227. $("#dateRange").val(value);
  228. }
  229. });
  230. //岗位
  231. var getPositionList = uParas.getSendData("/admin/common/getPositionByGroup");
  232. uParas.initSimpleSelectX("positionId", "filterForm", getPositionList, "positionTitle", "pId");
  233. var action = "0";
  234. element.on('tab(tabChange)', function(data){
  235. // alert(data.index)
  236. if (data.index == 0){
  237. action = "0"; //未检查
  238. $(".djc").addClass("c-add");
  239. $(".yjc").removeClass("c-add");
  240. $(".yyq").removeClass("c-add");
  241. }else if (data.index == 1){
  242. action = "2"; //已检查
  243. $(".yjc").addClass("c-add");
  244. $(".djc").removeClass("c-add");
  245. $(".yyq").removeClass("c-add");
  246. }else if (data.index == 2){
  247. action = "3"; //已逾期
  248. $(".yyq").addClass("c-add");
  249. $(".djc").removeClass("c-add");
  250. $(".yjc").removeClass("c-add");
  251. }
  252. layer.load(2, { shade: [0.15, '#cccccc'] });
  253. insTb.reload({where: {"action":action}}, 'data');
  254. layer.closeAll('loading');
  255. });
  256. // 渲染表格数据
  257. var insTb = table.render({
  258. elem : '#datatable',
  259. url : uParas.baseUrl + '/ent/riskCheckedSchdule/queryGroupTask',
  260. page : true,
  261. toolbar: true,
  262. even:true,
  263. height:600,
  264. where:{"action":action},
  265. title:'任务列表',
  266. cellMinWidth: 100,
  267. cols : [[
  268. {type : 'numbers' , title :'序号'} ,
  269. {field: 'checkMode' ,sort:false , title:'任务分类',width:150,
  270. templet:function (d) {
  271. return setCheckMode(d);
  272. }
  273. },
  274. {field: 'riskCheckDefTitle' , sort:false , title:'任务名称'},
  275. {field: 'riskCheckTypeName' , sort:false , title:'检查类型',width:100},
  276. {field: 'checkDefName', sort:false , title:'安全专业检查表'},
  277. {field: 'groupName' , sort:false , title:'执行部门',},
  278. {field: 'riskCheckPositionName', sort: false, title: '执行岗位',width:100 },
  279. // {field: 'riskCheckGroupName', sort: false, title: '受检部门' },
  280. {field: 'frequency' , sort:false , title:'检查频率',width:100,
  281. templet:function (d) {
  282. return setFrequency(d);
  283. }
  284. },
  285. {field: 'status' , sort:false , title:'状态',width:100, templet:function (d) {
  286. return setStatus(d);
  287. }},
  288. {field: 'startTime' , sort:false , title:'开始时间',width:150,
  289. templet: function (d) {
  290. return d.startTime.substr(0,16);
  291. }
  292. },
  293. {field: 'endTime' , sort:false , title:'结束时间',width:150 ,
  294. templet: function (d) {
  295. if(d.checkType === "random"){
  296. if(d.status === 1 || d.status === 0){
  297. return setEndTime(d.endTimeStr,d.endTime);
  298. // return '<div class="countDown" data-date="' + (d.endTimeStr||'') + '"></div>';
  299. }else{
  300. return d.endTime.substr(0,16);
  301. }
  302. }else if(d.checkType === "fixed"){
  303. return d.endTime.substr(0,16);
  304. }
  305. }
  306. },
  307. {align: 'left', title:'操作', width: 110,fixed:'right',
  308. templet: function (d) {
  309. return setOperation(d);
  310. }
  311. }
  312. ]],
  313. // done: function (res, curr, count) {
  314. // // $(".iManageRiskCount").html(count);
  315. // // return '<div class="countDown" data-date="' + (d.countDown||'') + '">
  316. // var elem = this.elem.next();
  317. // var bodyElem = elem.find('.layui-table-main');
  318. // layui.each(bodyElem.find('.countDown'), function (index, domElem) {
  319. // domElem = $(domElem);
  320. // if (!domElem.data('date')) {
  321. // return;
  322. // }
  323. // var endTime = new Date(domElem.data('date')).getTime(),
  324. // serverTime = new Date().getTime();
  325. // util.countdown(endTime, serverTime, function (date, serverTime, timer) {
  326. // var str = date[0] + '<span style=\'color: red\'>天</span>' + date[1]
  327. // + '<span style=\'color: red\'>小时</span>'
  328. // + date[2] + '分'
  329. // + date[3] + '秒';
  330. // if(date[0]==0){
  331. // str="<span style='color: indianred;'>已逾期</span>"
  332. // }
  333. // domElem.html(str);
  334. // });
  335. // });
  336. // }
  337. });
  338. /*结束时间*/
  339. function setEndTime(endTimeStr,endTime) {
  340. var html = '';
  341. //示例
  342. var endTimeStr_ = new Date(endTimeStr).getTime() //假设为结束日期
  343. ,serverTime = new Date().getTime(); //假设为当前服务器时间,这里采用的是本地时间,实际使用一般是取服务端的
  344. var str = endTime.substr(0,16);
  345. util.countdown(endTimeStr_, serverTime, function(date, serverTime, timer){
  346. if (date[0] > 0 || date[1] > 0 || date[2] > 0 || date[3] > 0) {
  347. str = '<span class="font-weight">'+ date[0] + '</span>天' +
  348. '<span class="font-weight">' + date[1] + '</span>小时' +
  349. '<span class="font-weight">' + date[2] + '</span>分';
  350. }
  351. html = '<dev>'+str+'</dev>';
  352. });
  353. return str;
  354. }
  355. /***部门*/
  356. _groupTree.init(insTb);
  357. //检查类型
  358. function setCheckMode(row){
  359. var checkModeStr = "";
  360. var checkTypeStr = "";
  361. if(row.checkMode === 1){
  362. checkModeStr = "现场任务";
  363. }else if(row.checkMode === 2){
  364. checkModeStr = "基础任务";
  365. }
  366. if(row.checkType === "fixed"){
  367. checkTypeStr = "【常规】";
  368. }else if(row.checkType === "random"){
  369. checkTypeStr = "【临时】";
  370. }
  371. return checkTypeStr + checkModeStr ;
  372. }
  373. //检查频率
  374. function setFrequency(row){
  375. var totalCheckCount = row.totalCheckCount;
  376. var scheduleFrequency = row.scheduleFrequency;
  377. return '<i class="layui-icon" style="color: limegreen;">'+scheduleFrequency + '/' + totalCheckCount + '次' ;
  378. }
  379. //操作
  380. function setOperation(row) {
  381. var html = '';
  382. if (row.delFlag == 0){
  383. if (row.checkType === "random"){
  384. var curTime = new Date();
  385. var endtime = new Date(row.endTime);
  386. if (curTime < endtime) {
  387. html += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
  388. }
  389. }else{
  390. if (row.status == 0) {
  391. html += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
  392. }
  393. }
  394. }
  395. html += '<a class="layui-btn layui-btn-xs bg-c-add" lay-event="detail" >详情</a>';
  396. return html;
  397. }
  398. //状态
  399. function setStatus(row){
  400. if (row.checkType === "random") {
  401. var curTime = new Date();
  402. var endtime = new Date(row.endTime);
  403. if ((curTime >= endtime) && (row.status === 1 || row.status === 0)) {
  404. return "<i class=\"layui-icon\" style=\"color: indianred;\">&#xe617; 已逾期</i>";
  405. }
  406. }
  407. if (row.status === 2) {
  408. return "<i class=\"layui-icon\" style=\"color: goldenrod;\">&#x1005; 已检查</i>";
  409. } else if (row.status === 1) {
  410. return "<i class=\"layui-icon\" style=\"color: #BF79DB;\">&#xe617; 检查中</i>";
  411. } else if (row.status === 0) {
  412. return "<i class=\"layui-icon\" style=\"color: darkgrey;\">&#xe617; 未检查</i>";
  413. } else if (row.status === 3) {
  414. return "<i class=\"layui-icon\" style=\"color: indianred;\">&#xe617; 已逾期</i>";
  415. } else {
  416. return "未知"
  417. }
  418. }
  419. // 搜索
  420. form.on('submit(formSubSearch)', function(data) {
  421. if(($("#keyword").val() != null && $("#keyword").val() != '') || ($("#dateRange").val() != null && $("#dateRange").val() != '')){
  422. insTb.reload({where: {"keyword":$("#keyword").val(),"dateRange":$("#dateRange").val()}}, 'data');
  423. }
  424. });
  425. //任务类型
  426. form.on('select(formCheckMode)', function(data) {
  427. insTb.reload({where: {"checkMode":data.value}}, 'data');
  428. });
  429. //任务类型
  430. form.on('select(formCheckType)', function(data) {
  431. insTb.reload({where: {"checkType":data.value}}, 'data');
  432. });
  433. //岗位过滤
  434. form.on('select(formPosition)', function(data) {
  435. insTb.reload({where: {"positionId":data.value}}, 'data');
  436. });
  437. //隐患等级过滤
  438. form.on('select(formHdangerLevel)', function(data) {
  439. insTb.reload({where: {"hdangerLevel":data.value}}, 'data');
  440. });
  441. // 工具条点击事件
  442. table.on('tool(datatable)', function (obj) {
  443. var data = obj.data;
  444. var layEvent = obj.event;
  445. if(layEvent == 'del'){ // 删除
  446. doDel(data);
  447. }else if(layEvent == 'detail'){ // 详情
  448. detail(data);
  449. }
  450. });
  451. // 删除
  452. function doDel(data) {
  453. layer.confirm('确定要删除“' + data.riskCheckDefTitle + '”任务吗?', {
  454. skin: 'layui-layer-admin',
  455. shade: .1
  456. }
  457. , function (i) {
  458. layer.close(i);
  459. layer.load();
  460. admin.req(uParas.baseUrl + '/ent/riskCheckedSchdule/delete/'+ data.scheduleId,{},function (res) {
  461. layer.closeAll('loading');
  462. if (res.code == 1) {
  463. layer.msg(res.msg);
  464. insTb.reload({}, 'data');
  465. } else {
  466. layer.msg(res.msg);
  467. }
  468. },'GET');
  469. });
  470. }
  471. //详情
  472. function detail(data) {
  473. location.href = "./detail.html?scheduleId="+data.scheduleId;
  474. }
  475. });
  476. </script>
  477. </body>
  478. </html>