index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  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/icon/icon.css" media="all">
  11. <link rel="stylesheet" href="../../../assets/module/icon/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  12. <style>
  13. .layui-table-cell {
  14. height: auto;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <!-- 页面加载loading -->
  20. <div class="page-loading">
  21. <div class="ball-loader">
  22. <span></span><span></span><span></span><span></span>
  23. </div>
  24. </div>
  25. <!-- 正文开始 -->
  26. <div class="layui-fluid">
  27. <div class="layui-card-header" style="height: 50px;">
  28. <div class="layui-inline pull-left">
  29. <span style="font-size: 1.17em" id="htmlHeader">项目管理</span>
  30. </div>
  31. <div class="layui-inline pull-right">
  32. <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>新增</button>
  33. </div>
  34. </div>
  35. <div class="layui-card">
  36. <div class="layui-card-body">
  37. <div class="layui-form toolbar" lay-filter="filterForm">
  38. <div class="layui-form-item">
  39. <div class="text-right">
  40. <div class="layui-inline">
  41. <label class="layui-form-label w-auto">搜索:</label>
  42. <div class="layui-input-inline mr0">
  43. <input name="keyword" id="keyword" class="layui-input" type="text" placeholder="输入关键字"/>
  44. </div>
  45. </div>
  46. <div class="layui-inline">
  47. <button class="layui-btn icon-btn" lay-filter="formSubSearch" lay-submit
  48. style="background-color: #007DDB;">
  49. <i class="layui-icon">&#xe615;</i>搜索
  50. </button>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. <table class="layui-table" id="datatable" lay-filter="datatable"></table>
  56. </div>
  57. </div>
  58. </div>
  59. <!--等级TPL-->
  60. <script type="text/html" id="levelTpl">
  61. {{# var imgs="",title=""; var lv=d.riskLevel;}}
  62. {{# if(lv==1){ imgs="../../../assets/images/lv/red.png" ;title="重大" } }}
  63. {{# if(lv==2){ imgs="../../../assets/images/lv/orange.png";title="较大"} }}
  64. {{# if(lv==3){ imgs="../../../assets/images/lv/yellow.png";title="一般"} }}
  65. {{# if(lv==4){ imgs="../../../assets/images/lv/blue.png";title="较低"} }}
  66. {{# if(lv==null || lv == ''){ }}
  67. {{# }else{ }}
  68. {{# if(lv==1){ }}
  69. <div class='notify'>
  70. <span class='heartbit'></span>
  71. <span>
  72. <img style="display: inline-block; width: 28px;height: 28px;" src={{ imgs }}>&nbsp;{{ title }}
  73. </span>
  74. </div>
  75. {{# }else{ }}
  76. <img style="display: inline-block; width: 28px;height: 28px;" src={{ imgs }}>&nbsp;{{ title }}
  77. {{# } }}
  78. {{# } }}
  79. </script>
  80. <!-- 弹窗 -->
  81. <script type="text/html" id="viewTpl">
  82. <div class="layui-fluid">
  83. <div class="layui-card">
  84. <div class="layui-card-body">
  85. <div class="layui-tab-item layui-show">
  86. <div class="layui-row">
  87. <table class="layui-table">
  88. </table>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </script>
  95. <!-- js部分 -->
  96. <script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
  97. <!--<script type="text/javascript" src="../../../assets/libs/jquery/jquery-3.2.1.min.js"></script>-->
  98. <script type="text/javascript" src="../../../assets/js/common.js?v=312"></script>
  99. <script>
  100. layui.use(['layer', 'form', 'table', 'admin', 'uParas', 'util'], function () {
  101. var $ = layui.jquery;
  102. var layer = layui.layer;
  103. var form = layui.form;
  104. var table = layui.table;
  105. var admin = layui.admin;
  106. var uParas = layui.uParas;
  107. var util = layui.util;
  108. // 渲染表格数据
  109. var insTb = table.render({
  110. elem: '#datatable',
  111. url: uParas.baseUrl + '/org/project/queryPage',
  112. //where: {"checkType":checkType},
  113. page: true,
  114. cellMinWidth: 100,
  115. cols: [[
  116. {type: 'numbers', title: '序号'},
  117. {field: 'projectName', sort: false, title: '项目名称'},
  118. {field: 'projectCode', sort: false, title: '项目代号'},
  119. /*{field: 'projectDesc' ,sort:false , title:'项目概述' },*/
  120. {field: 'projectCost', sort: false, title: '项目造价'},
  121. {field: 'projectAddress', sort: false, title: '项目地址'},
  122. {
  123. field: 'status', sort: false, title: '项目状态', templet: function (d) {
  124. return setStatus(d);
  125. }
  126. },
  127. {field: 'planStartTime', sort: false, title: '计划开始时间', width: 120},
  128. {field: 'planEndTime', sort: false, title: '计划结束时间', width: 120},
  129. {field: 'startTime', sort: false, title: '实际开始时间', width: 120},
  130. {field: 'endTime', sort: false, title: '实际结束时间', width: 120},
  131. {
  132. field: 'riskLevel', sort: false, title: '风险等级', align: 'center', templet: function (d) {
  133. return risk_level(d);
  134. }
  135. },
  136. {
  137. align: 'center', title: '标注', templet: function (d) {
  138. if (d.mapCount == 0) {
  139. return '<a href="#" class="a-txt" lay-event="mapData">添加位置</a>';
  140. }
  141. return '<a href="#" class="a-txt" lay-event="mapData"><i class="fa fa-map-marker" ></i></a>';
  142. }, width: 90
  143. },
  144. {
  145. align: 'center', title: '操作', width: 110, fixed: 'right',
  146. templet: function (d) {
  147. return setOperation(d);
  148. }
  149. }
  150. ]]
  151. });
  152. //操作
  153. function setOperation(row) {
  154. var html = '';
  155. html += '<a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>';
  156. html += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
  157. return html;
  158. }
  159. //状态
  160. function setStatus(data) {
  161. var value = data.status;
  162. var html = "";
  163. if (value === 0) {
  164. html = "未启动";
  165. } else if (value === 1) {
  166. html = "施工中";
  167. } else if (value === 2) {
  168. html = "暂停";
  169. } else if (value === 3) {
  170. html = "已撤销";
  171. } else if (value === 4) {
  172. html = "待验收";
  173. } else if (value === 5) {
  174. html = "项目结束";
  175. } else {
  176. html = "暂无状态";
  177. }
  178. return html;
  179. }
  180. //等级
  181. function risk_level(data) {
  182. var value = data.riskLevel;
  183. var opts = '';
  184. if (value != null && value != '') {
  185. if (value >= 20) {
  186. opts = "<div class='notify'>" +
  187. "<span class='heartbit'></span>" +
  188. "<span>" +
  189. "<img src='../../../assets/images/lv/red.png' style='width: 28px;height: 28px;'/>" +
  190. "</span>" +
  191. "&nbsp;<span>重大</span>" +
  192. "</div>";
  193. } else if (value >= 13 && value <= 19) {
  194. opts = "<img src='../../../assets/images/lv/orange.png' style='width: 28px;height: 28px;'/>较大";
  195. } else if (value >= 8 && value <= 12) {
  196. opts = "<img src='../../../assets/images/lv/yellow.png' style='width: 28px;height: 28px;'/>一般";
  197. } else if (value <= 7) {
  198. opts = "<img src='../../../assets/images/lv/blue.png' style='width: 28px;height: 28px;'/>较低";
  199. }
  200. } else {
  201. opts = "无";
  202. }
  203. return opts;
  204. }
  205. // 搜索
  206. form.on('submit(formSubSearch)', function (data) {
  207. insTb.reload({where: data.field}, 'data');
  208. });
  209. // 工具条点击事件
  210. table.on('tool(datatable)', function (obj) {
  211. var data = obj.data;
  212. var layEvent = obj.event;
  213. if (layEvent == 'del') { // 删除
  214. doDel(data);
  215. } else if (layEvent == 'edit') { // 编辑
  216. goEdit(data);
  217. } else if (layEvent == 'mapData') {
  218. addMapData(data);
  219. }
  220. });
  221. // 删除
  222. function doDel(data) {
  223. layer.confirm('确定要删除“' + data.projectName + '”吗?', {
  224. skin: 'layui-layer-admin',
  225. shade: .1
  226. }
  227. , function (i) {
  228. layer.close(i);
  229. layer.load();
  230. admin.req(uParas.baseUrl + '/org/project/delete/' + data.projectId, {}, function (res) {
  231. layer.closeAll('loading');
  232. if (res.code == 1) {
  233. layer.msg(res.msg);
  234. insTb.reload({}, 'data');
  235. } else {
  236. layer.msg(res.msg);
  237. }
  238. }, 'GET');
  239. });
  240. }
  241. // 新增
  242. $('#btnAdd').click(function () {
  243. location.href = "./add.html";
  244. });
  245. // 编辑
  246. function goEdit(data) {
  247. location.href = "./edit.html?projectId=" + data.projectId;
  248. }
  249. //标注位置
  250. function addMapData(data) {
  251. layer.open({
  252. type: 2,
  253. zIndex: 1000,
  254. title: "添加/编辑位置(如需编辑原数据,删除全部,重新标点)",
  255. shadeClose: true,
  256. area: ['900px', '600px'],
  257. content: "./addMap.html?projectId=" + data.projectId,
  258. fixed: false
  259. });
  260. }
  261. $.extend(window, {
  262. closeReload: function (e) {
  263. insTb.reload({}, 'data');
  264. }
  265. });
  266. //详情
  267. /*function detail(data) {
  268. var projectId = data.projectId;
  269. admin.open({
  270. type: 1,
  271. title: '基本信息',
  272. offset: 'auto',
  273. area: '600px',
  274. content: $('#viewTpl').html(),
  275. success: function (layero, dIndex) {
  276. var url = uParas.baseUrl + '/ent/project/get/'+projectId;
  277. admin.req(url, null, function(resp) {
  278. layer.closeAll('loading');
  279. if (resp.code == 1) {
  280. } else {
  281. layer.msg(resp.msg);
  282. }
  283. },'GET');
  284. }
  285. });
  286. }*/
  287. });
  288. </script>
  289. </body>
  290. </html>