controlIndex.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  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. <link rel="stylesheet" href="../../../../assets/module/uParas.css?v=312"/>
  11. </head>
  12. <body>
  13. <style type="text/css">
  14. </style>
  15. <!-- 加载动画 -->
  16. <div class="page-loading">
  17. <div class="ball-loader">
  18. <span></span><span></span><span></span><span></span>
  19. </div>
  20. </div>
  21. <!-- 正文开始 -->
  22. <div class="layui-fluid">
  23. <div class="layui-card">
  24. <div class="layui-card-body">
  25. <div class="layui-card-header">
  26. 风险管控措施清单
  27. <!-- <div class="layui-inline pull-right">
  28. <button onclick="history.back()" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal"><i class="layui-icon">&#xe65c;</i>返回</button>
  29. </div>-->
  30. </div>
  31. <div class="layui-card-body">
  32. <div class="layui-form toolbar" lay-filter="filterForm">
  33. <div class="layui-form-item">
  34. <div class="layui-row">
  35. <div class="layui-inline layui-col-md3 text-left" style="margin-left: -20px;">
  36. <label class="layui-form-label" style="width: 40px;">部门</label>
  37. <div class="layui-input-inline mr0">
  38. <input type="text" id="groupName" name="groupName" value=""
  39. placeholder="点击选择"
  40. class="layui-input" readonly>
  41. <input type="hidden" id="groupId" name="groupId">
  42. <div id="menuContent" class="menuContent">
  43. <ul id="groupTree" class="ztree" style="margin-top:0;"></ul>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. <table class="layui-table" id="datatable" lay-filter="datatable"></table>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. <!-- js部分 -->
  56. <script type="text/javascript" src="../../../../assets/libs/layui/layui.js"></script>
  57. <script type="text/javascript" src="../../../../assets/js/common.js?v=312"></script>
  58. <script>
  59. layui.use(['layer', 'form', 'table', 'util', '_zTree', 'admin', 'uParas', 'tableX', 'soulTable'], function () {
  60. var $ = layui.jquery;
  61. var layer = layui.layer;
  62. var form = layui.form;
  63. var util = layui.util;
  64. var table = layui.table;
  65. var admin = layui.admin;
  66. var uParas = layui.uParas;
  67. var tableX = layui.tableX;
  68. var _zTree = layui._zTree;
  69. var data = layui.data(uParas.tableName);
  70. var groupId = data.user.gId;
  71. var soulTable = layui.soulTable;
  72. var changeGroup = {
  73. reload: function (data) {
  74. groupId = data.where.gId;
  75. // console.log("groupId......" + groupId);
  76. insTb.reload({where: {"gId": groupId}}, 'data');
  77. }
  78. };
  79. /***单位选择*/
  80. _zTree._init('/admin/common/getGroupLists', 'gId', 'groupParent', 'groupName', 'gId', 0, "groupTree", changeGroup, "menuContent", "groupName", "groupId", groupId);
  81. // 渲染表格数据
  82. var insTb = table.render({
  83. elem: '#datatable',
  84. url: uParas.baseUrl + '/ent/riskPoint/controlIndex',
  85. where: {"gId": groupId},
  86. page: false,
  87. toolbar: true,
  88. defaultToolbar: ['filter', { //自定义导出
  89. title: '导出',
  90. layEvent: 'LAYTABLE_EXPORT_EXCEL',
  91. icon: 'layui-icon-export'
  92. }, 'print'],
  93. cellMinWidth: 120,
  94. title: "风险管控措施清单",
  95. cols: [[
  96. {field: 'riskPointName', sort: false, title: '风险点', rowspan: '2', merge: true},
  97. {field: 'riskCode', sort: false, title: '风险编号', rowspan: 2},
  98. {field: '', title: '危险源', align: 'center', align: 'center', colspan: 3},
  99. {field: 'riskReason', sort: false, title: '危害因素', rowspan: 2},
  100. {field: 'riskConsequence', sort: false, title: '危害后果', rowspan: 2},
  101. {
  102. field: 'riskLevel', align: 'center', sort: false, title: '风险等级', rowspan: 2,
  103. templet: function (d) {
  104. return setStatus(d);
  105. }
  106. },
  107. {field: 'riskCtrlLevelTitle', sort: false, title: '管控层级', rowspan: 2},
  108. {field: 'positionTitle', sort: false, title: '管控岗位', rowspan: 2},
  109. {field: 'personLiableName', sort: false, title: '责任人', rowspan: 2, merge: true},
  110. {field: '', title: '管控措施', align: 'center', colspan: 5},
  111. ], [
  112. {field: 'rootDangerSrcName', sort: false, title: '根危险源'},
  113. {field: 'parentDangerSrcName', sort: false, title: '一级危险源'},
  114. {field: 'dangerSrcName', sort: false, title: '二级危险源'},
  115. {field: 'project', sort: false, title: '工程技术措施'},
  116. {field: 'manage', sort: false, title: '管理措施'},
  117. {field: 'education', sort: false, title: '教育措施'},
  118. {field: 'emergency', sort: false, title: '应急措施'},
  119. {field: 'protection', sort: false, title: '个体防护'}
  120. ]],
  121. done: function () {
  122. // tableX.merges('datatable', [0]); // 在done回调里面调用
  123. soulTable.render(this)
  124. }
  125. });
  126. //监听头工具栏事件
  127. table.on('toolbar(datatable)', function (obj) {
  128. var checkStatus = table.checkStatus(obj.config.id);
  129. switch (obj.event) {
  130. //自定义头工具栏右侧图标 - 导出
  131. case 'LAYTABLE_EXPORT_EXCEL':
  132. soulTable.export(insTb, {filename: '风险管控措施清单.xlsx'},
  133. {
  134. mergeData: true,
  135. // mergeDataColumn: [
  136. // 'riskPointName',
  137. // 'riskCode',
  138. // 'rootDangerSrcName',
  139. // 'parentDangerSrcName',
  140. // 'dangerSrcName',
  141. // 'riskReason',
  142. // 'riskConsequence',
  143. // 'riskLevel',
  144. // 'riskCtrlLevelTitle',
  145. // 'positionTitle',
  146. // 'personLiableName',
  147. // 'project',
  148. // 'manage',
  149. // 'education',
  150. // 'emergency',
  151. // 'protection'
  152. // ],
  153. dependKey: 'riskPointName',
  154. lineStyleConfig: [
  155. {
  156. field: 'riskPointName', // 字段名称
  157. type: '1', // 字段设置类型 1=>直接设置样式属性, 2=> 根据数值类型设置属性
  158. style: { // 样式属性
  159. bgColor: 'ffffff',
  160. color: '666666'
  161. }
  162. },
  163. {
  164. field: 'riskLevel', // 字段名称
  165. type: '2', // 字段设置类型 1=>直接设置样式属性, 2=> 根据数值类型设置属性
  166. numericType: [
  167. {
  168. typeNumber: 1,
  169. style: { // 样式属性
  170. bgColor: 'F3565D',
  171. color: '666666'
  172. }
  173. },
  174. {
  175. typeNumber: 2,
  176. style: { // 样式属性
  177. bgColor: 'FFA500',
  178. color: '666666'
  179. }
  180. },
  181. {
  182. typeNumber: 3,
  183. style: { // 样式属性
  184. bgColor: 'dfba49',
  185. color: '666666'
  186. }
  187. },
  188. {
  189. typeNumber: 4,
  190. style: { // 样式属性
  191. bgColor: '89C4F4',
  192. color: '666666'
  193. }
  194. }
  195. ],
  196. }
  197. ]
  198. }
  199. );
  200. break;
  201. }
  202. ;
  203. });
  204. //状态
  205. function setStatus(row) {
  206. if (row.riskLevel == 1) {
  207. return "<div style=\"background-color:" + uParas.lvColour(1) + ";\">重大</div>";
  208. } else if (row.riskLevel == 2) {
  209. return "<div style=\"background-color:" + uParas.lvColour(2) + ";\">较大</div>";
  210. } else if (row.riskLevel == 3) {
  211. return "<div style=\"background-color:" + uParas.lvColour(3) + ";\">一般</div>";
  212. } else {
  213. return "<div style=\"background-color:" + uParas.lvColour(4) + ";\">低</div>"
  214. }
  215. }
  216. });
  217. </script>
  218. </body>
  219. </html>