controlIndex_test.html 10 KB

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