details.html 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572
  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/formSelects/formSelects-v4.css"/>
  10. <link rel="stylesheet" href="../../../assets/module/admin.css?v=312"/>
  11. <link rel="stylesheet" href="../../../assets/module/uParas.css?v=312"/>
  12. <!--[if lt IE 9]>
  13. <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  14. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  15. <![endif]-->
  16. <style>
  17. [v-cloak] {
  18. display: none;
  19. }
  20. #tableTbImg + .layui-table-view .layui-table-body tbody > tr > td {
  21. padding: 0;
  22. }
  23. #tableTbImg + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
  24. height: 60px;
  25. line-height: 60px;
  26. }
  27. .tdImg {
  28. width: 50px;
  29. height: 50px;
  30. max-width: none;
  31. cursor: zoom-in;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <!-- 加载动画 -->
  37. <div class="page-loading">
  38. <div class="ball-loader">
  39. <span></span><span></span><span></span><span></span>
  40. </div>
  41. </div>
  42. <!-- 正文开始 -->
  43. <div class="layui-fluid">
  44. <div class="layui-card">
  45. <div class="layui-card-body">
  46. <div class="layui-card-header">
  47. 风险点详情
  48. <div class="layui-inline pull-right">
  49. <!-- <button onclick="history.back()" id="back" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal"><i class="layui-icon">&#xe65c;</i>返回</button>-->
  50. <button ew-event="back" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal"><i
  51. class="layui-icon">&#xe65c;</i>返回
  52. </button>
  53. </div>
  54. </div>
  55. <div class="layui-card-body">
  56. <input type="hidden" name="ipCameraUrl" id="ipCameraUrl">
  57. <div class="layui-tab layui-tab-brief" lay-filter="detailsTab">
  58. <ul class="layui-tab-title">
  59. <li class="layui-this" lay-id="baseInfo">风险点详情</li>
  60. <li lay-id="risk">风险表</li>
  61. <li lay-id="riskMeasure">安全检查表</li>
  62. <li lay-id="riskCheck">检查记录</li>
  63. <li lay-id="hiddenDanger">隐患</li>
  64. </ul>
  65. <div class="layui-tab-content" style="height: auto;">
  66. <div class="layui-tab-item layui-show">
  67. <fieldset class="layui-elem-field layui-field-title">
  68. <legend>基本信息</legend>
  69. </fieldset>
  70. <div class="layui-row" id="riskPointView">
  71. <script type="text/html" id="riskPointTpl">
  72. <div class="layui-col-xs2">
  73. {{#if(d.riskPointImg!=undefined && d.riskPointImg!="" && d.riskPointImg!=null){
  74. }}
  75. {{#if(d.riskPointImg.indexOf("http://")!=-1||d.riskPointImg.indexOf("https://")!=-1){}}
  76. <img src="{{d.riskPointImg}}" style="width:50%;max-height:200px;">
  77. {{# }else{ }}
  78. <img src="{{d.baseUrl}}{{d.riskPointImg}}" style="width:50%;max-height:200px;">
  79. {{# } }}
  80. {{# }else{ }}
  81. <div style="width:50%;max-height:200px;">&nbsp;</div>
  82. {{# } }}
  83. </div>
  84. <div class="layui-col-xs10">
  85. <div class="layui-form">
  86. <table class="layui-table">
  87. <colgroup>
  88. <col width="150">
  89. </colgroup>
  90. <thead>
  91. </thead>
  92. <tbody>
  93. <tr>
  94. <td>名称</td>
  95. <td>{{d.riskPointName}}</td>
  96. <td>风险点等级</td>
  97. <td>
  98. {{# var imgs="",title=""; var lv=d.riskPointLevel;}}
  99. {{# if(lv==1){ imgs="../../../assets/images/lv/red.png"
  100. ;title="重大" } }}
  101. {{# if(lv==2){
  102. imgs="../../../assets/images/lv/orange.png";title="较大"} }}
  103. {{# if(lv==3){
  104. imgs="../../../assets/images/lv/yellow.png";title="一般"} }}
  105. {{# if(lv==4){
  106. imgs="../../../assets/images/lv/blue.png";title="较低"} }}
  107. {{# if(lv==1){ }}
  108. <div class='notify'><span class='heartbit'></span><span>
  109. <img style="display: inline-block; width: 28px;height: 28px;"
  110. src={{ imgs }}>&nbsp;{{ title }}
  111. </span>
  112. </div>
  113. {{# }else{ }}
  114. <img style="display: inline-block; width: 28px;height: 28px;"
  115. src={{ imgs }}>&nbsp;{{ title }}
  116. {{# } }}
  117. </td>
  118. </tr>
  119. <tr>
  120. <td>企业名称</td>
  121. <td>{{d.cName}}</td>
  122. <!--<td>单位名称</td>-->
  123. <!--<td>{{d.liableGroupIdName==null?"":d.liableGroupIdName}}</td>-->
  124. <td>是否激活</td>
  125. <td>
  126. {{# if (d.isActive == 0) {}}
  127. 未激活
  128. {{# } else if (d.isActive == 1) {}}
  129. 激活
  130. {{# }}}
  131. </td>
  132. </tr>
  133. {{# if (d.isActive == 1) {}}
  134. <tr>
  135. <td>激活开始时间</td>
  136. <td>{{d.activeStartTime==null?"":d.activeStartTime}}</td>
  137. <td>激活结束时间</td>
  138. <td>{{d.activeEndTime==null?"":d.activeEndTime}}</td>
  139. </tr>
  140. {{# }}}
  141. <tr>
  142. <td>风险点位置</td>
  143. <td colspan="3">{{d.riskPointPlaces==null?"":d.riskPointPlaces}}
  144. </td>
  145. </tr>
  146. <tr>
  147. <td>描述</td>
  148. <td colspan="3">{{d.riskPointDesc==null?"":d.riskPointDesc}}</td>
  149. </tr>
  150. </tbody>
  151. </table>
  152. </div>
  153. </div>
  154. </script>
  155. </div>
  156. <fieldset class="layui-elem-field layui-field-title">
  157. <legend>告警信息</legend>
  158. </fieldset>
  159. <div class="layui-row" id="riskPointWarn">
  160. <script type="text/html" id="riskPointWarnTpl">
  161. <div class="layui-col-xs12">
  162. <div class="layui-form">
  163. <table class="layui-table">
  164. <colgroup>
  165. <col width="20">
  166. <col width="200">
  167. <col width="100">
  168. <col width="200">
  169. <col>
  170. </colgroup>
  171. <thead>
  172. <tr>
  173. <th></th>
  174. <th>时间</th>
  175. <th>状态</th>
  176. <th>类型</th>
  177. <th>描述</th>
  178. </tr>
  179. </thead>
  180. <tbody>
  181. {{# layui.each(d, function(index, item){ }}
  182. <tr>
  183. <td>{{index + 1}}</td>
  184. <td>{{item.createdTime}}</td>
  185. <td>
  186. {{# if (item.isControl == 0) {}}
  187. 预警
  188. {{# } else if (item.isControl == 1) {}}
  189. 受控
  190. {{# }}}
  191. </td>
  192. <td>
  193. {{# if (item.detailType == 1) {}}
  194. 隐患告警
  195. {{# } else if (item.detailType == 2) {}}
  196. 任务逾期告警
  197. {{# } else if (item.detailType == 3) {}}
  198. 传感器告警
  199. {{# }}}
  200. </td>
  201. <td>{{item.causeDesc}}</td>
  202. </tr>
  203. {{# }); }}
  204. </tbody>
  205. </table>
  206. </div>
  207. </div>
  208. </script>
  209. </div>
  210. </div>
  211. <div class="layui-tab-item">
  212. <div class="layui-row" id="riskRecordDiv" v-cloak>
  213. <div class="layui-col-xs12">
  214. <div class="layui-form">
  215. <table class="layui-table">
  216. <thead>
  217. <tr>
  218. <th></th>
  219. <th>危险源</th>
  220. <th>风险编号</th>
  221. <th>风险等级</th>
  222. <th>危害因素</th>
  223. <th>未达标的情况及后果</th>
  224. </tr>
  225. </thead>
  226. <tr v-for="(item,index) in riskRecord">
  227. <td>{{index+1}}</td>
  228. <td>{{item.dangerSrcName}}</td>
  229. <td>{{item.riskCode}}</td>
  230. <td>
  231. <div v-if="item.riskLevel==1" class='notify'><span
  232. class='heartbit'></span>
  233. <span>
  234. <img style="display: inline-block; width: 28px;height: 28px;"
  235. src="../../../assets/images/lv/red.png">&nbsp;重大
  236. </span>
  237. </div>
  238. <div v-if="item.riskLevel==2">
  239. <img style="display: inline-block; width: 28px;height: 28px;"
  240. src="../../../assets/images/lv/orange.png">&nbsp;较大
  241. </div>
  242. <div v-if="item.riskLevel==3">
  243. <img style="display: inline-block; width: 28px;height: 28px;"
  244. src="../../../assets/images/lv/yellow.png">&nbsp;一般
  245. </div>
  246. <div v-if="item.riskLevel==4">
  247. <img style="display: inline-block; width: 28px;height: 28px;"
  248. src="../../../assets/images/lv/blue.png">&nbsp;较低
  249. </div>
  250. </td>
  251. <td>{{item.riskReason}}</td>
  252. <td>{{item.riskConsequence}}</td>
  253. </tr>
  254. </table>
  255. </div>
  256. </div>
  257. </div>
  258. </div>
  259. <div class="layui-tab-item">
  260. <div class="layui-row" id="measureListDiv" v-cloak>
  261. <div class="layui-col-xs12">
  262. <div v-for="(item,index) in measureList" class="layui-form">
  263. <blockquote class="layui-elem-quote">{{item.rootName}}</blockquote>
  264. <fieldset class="layui-elem-field" v-for="(item_,index) in item.list">
  265. <legend>{{index+1}}.{{item_.riskName}}</legend>
  266. <div class="layui-field-box">
  267. <table class="layui-table">
  268. <colgroup>
  269. <col width="200">
  270. <col width="200">
  271. <col width="200">
  272. <col width="200">
  273. <col width="200">
  274. <col>
  275. </colgroup>
  276. <thead>
  277. <tr>
  278. <th>工程技术</th>
  279. <th>管理</th>
  280. <th>教育</th>
  281. <th>应急</th>
  282. <th>个体防护</th>
  283. </tr>
  284. </thead>
  285. <tr>
  286. <td>{{riskMeasureContent(item_.riskMeasureContent,1)}}</td>
  287. <td>{{riskMeasureContent(item_.riskMeasureContent,2)}}</td>
  288. <td>{{riskMeasureContent(item_.riskMeasureContent,3)}}</td>
  289. <td>{{riskMeasureContent(item_.riskMeasureContent,4)}}</td>
  290. <td>{{riskMeasureContent(item_.riskMeasureContent,5)}}</td>
  291. </tr>
  292. </table>
  293. </div>
  294. </fieldset>
  295. </div>
  296. </div>
  297. </div>
  298. </div>
  299. <div class="layui-tab-item">
  300. <div class="layui-row" id="riskCheck">
  301. <script type="text/html" id="riskCheckTpl">
  302. <div class="layui-col-xs12">
  303. <div class="layui-form">
  304. <table class="layui-table">
  305. <thead>
  306. <tr>
  307. <th></th>
  308. <th>所属部门</th>
  309. <th>检查时间</th>
  310. <th>执行人</th>
  311. <th>检查表</th>
  312. <th>检查结果</th>
  313. <th>操作</th>
  314. </tr>
  315. </thead>
  316. <tbody>
  317. {{# layui.each(d, function(index, item){ }}
  318. <tr>
  319. <td>{{index + 1}}</td>
  320. <td>{{item.checkedGroupName}}</td>
  321. <td>{{item.createdTime}}</td>
  322. <td>{{item.checkedUserName}}</td>
  323. <td>{{item.checkDefName}}</td>
  324. <td>
  325. {{# if (item.checkResult == 1) {}}
  326. 正常
  327. {{# } else if (item.checkResult == 2) {}}
  328. 发现隐患
  329. {{# } else if (item.checkResult == 3) {}}
  330. 未涉及
  331. {{# }}}
  332. </td>
  333. <td>
  334. <a href="checkRecordDetail.html?checkRecordNo={{item.checkRecordNo}}&riskPointId={{item.riskPointId}}"
  335. style="color: #009688">查看详情</a>
  336. </td>
  337. </tr>
  338. {{# }); }}
  339. </tbody>
  340. </table>
  341. </div>
  342. </div>
  343. </script>
  344. </div>
  345. </div>
  346. <div class="layui-tab-item">
  347. <div class="layui-row" id="hdangerDiv" v-cloak>
  348. <div class="layui-col-xs12">
  349. <div class="layui-form">
  350. <table class="layui-table">
  351. <thead>
  352. <tr>
  353. <th></th>
  354. <th>隐患图片</th>
  355. <th>隐患标题</th>
  356. <th>隐患状态</th>
  357. <th>整改期限</th>
  358. <th>当前处理人</th>
  359. <th>操作</th>
  360. </tr>
  361. </thead>
  362. <tr v-for="(item,index) in hdangerRecord">
  363. <td>{{index+1}}</td>
  364. <td><img :src="item.imgUrl" width="50px" class="tdImg" tb-img></td>
  365. <td>{{item.hdangerCatTitle}}</td>
  366. <td>
  367. <div v-if="item.status==2">
  368. 待整改
  369. </div>
  370. <div v-if="item.status==3">
  371. 待验收
  372. </div>
  373. <div v-if="item.status==5">
  374. 验收不通过
  375. </div>
  376. </td>
  377. <td>{{item.hdangerRetifyDeadline}}</td>
  378. <td>{{item.executor}}</td>
  379. <td>
  380. <!-- <a :href="'../hiddenDanger/details.html?hdangerId='+ item.hdangerId">🔎详情</a>-->
  381. <a :href="'hddetails.html?hdangerId='+ item.hdangerId">🔎详情</a>
  382. </td>
  383. </tr>
  384. </table>
  385. </div>
  386. </div>
  387. </div>
  388. </div>
  389. </div>
  390. </div>
  391. </div>
  392. </div>
  393. </div>
  394. </div>
  395. <!-- js部分 -->
  396. <script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
  397. <script type="text/javascript" src="../../../assets/js/common.js?v=312"></script>
  398. <script>
  399. layui.use(['layer', 'form', 'table', 'util', 'zTree', 'admin', 'uParas', 'element', 'laytpl', 'vue'], function () {
  400. var $ = layui.jquery;
  401. var layer = layui.layer;
  402. var form = layui.form;
  403. var util = layui.util;
  404. var admin = layui.admin;
  405. var uParas = layui.uParas;
  406. var element = layui.element, laytpl = layui.laytpl;
  407. var riskPointId = uParas.getUrlParam("riskPointId");
  408. var tabId = uParas.getUrlParam("tabId");
  409. var type = uParas.getUrlParam("type");
  410. if (type != undefined) {
  411. $("#back").hide();
  412. }
  413. var hiddenDangerList;
  414. admin.req(uParas.baseUrl + '/org/riskPoint/details/' + riskPointId, null, function (res) {
  415. if (res.code == 1) {
  416. var getTpl = riskPointTpl.innerHTML
  417. , view = document.getElementById('riskPointView')
  418. res.data.baseUrl = uParas.baseUrl;
  419. laytpl(getTpl).render(res.data, function (html) {
  420. view.innerHTML = html;
  421. });
  422. getTpl = riskPointWarnTpl.innerHTML
  423. , view = document.getElementById('riskPointWarn')
  424. res.data.baseUrl = uParas.baseUrl;
  425. laytpl(getTpl).render(res.data.riskPointWarn, function (html) {
  426. view.innerHTML = html;
  427. })
  428. ;
  429. getTpl = riskCheckTpl.innerHTML
  430. , view = document.getElementById('riskCheck')
  431. res.data.baseUrl = uParas.baseUrl;
  432. laytpl(getTpl).render(res.data.riskCheckedRecord, function (html) {
  433. view.innerHTML = html;
  434. });
  435. $("#vRiskPointImg").attr("src", uParas.baseUrl + res.data.riskPointImg);
  436. if (res.data.isOutOfControl == 0) {
  437. $(".pull-right").prepend("<img src='../../../assets/images/icon/icon_shoukong@3x.png' style='width: 20px;'/>&nbsp;受控");
  438. } else if (res.data.isOutOfControl == 1) {
  439. $(".pull-right").prepend("<img src='../../../assets/images/icon/icon_shikong@3x.png' style='width: 20px;'/>&nbsp;预警");
  440. }
  441. if (res.data.hasIpCamera == 1) {
  442. $("#ipCameraUrl").val(res.data.ipCameraUrl + res.data.token.accessToken);
  443. // $(".pull-right").prepend("<a href='" + res.data.ipCameraUrl + "' ><img src='../../../assets/images/icon/camera.png' style='width: 20px;'/>&nbsp;&nbsp;</a> ");
  444. $(".pull-right").prepend("<a href='javascript:;' onclick='openCamera()' ><img src='../../../assets/images/icon/camera.png' style='width: 20px;'/>&nbsp;&nbsp;</a> ");
  445. }
  446. hiddenDangerList = res.data.hiddenDangerList;
  447. }
  448. }, 'post');
  449. if (tabId != null) {
  450. element.tabChange('detailsTab', tabId);
  451. vueLoad(tabId);
  452. }
  453. function vueLoad(layId) {
  454. if (layId == "risk") {
  455. admin.req(uParas.baseUrl + '/org/riskPoint/queryRiskRecord', {
  456. page: 1,
  457. limit: 1000,
  458. riskPointId: riskPointId
  459. }, function (res) {
  460. new Vue({
  461. el: '#riskRecordDiv',
  462. data() {
  463. return {
  464. riskRecord: res.data,
  465. measureList: [],
  466. rootName: ""
  467. };
  468. }
  469. })
  470. }, 'get');
  471. }
  472. if (layId == "hiddenDanger") {
  473. // admin.req(uParas.baseUrl + '/ent/riskPoint/details/' + riskPointId, {page: 1, limit: 1000, riskPointId: riskPointId}, function (res) {
  474. new Vue({
  475. el: '#hdangerDiv',
  476. data() {
  477. return {
  478. hdangerRecord: hiddenDangerList,
  479. measureList: [],
  480. riskRecord: [],
  481. rootName: "",
  482. baseUrl: uParas.baseUrl
  483. };
  484. }
  485. })
  486. // }, 'post');
  487. }
  488. if (layId == "riskMeasure") {
  489. admin.req(uParas.baseUrl + '/org/riskPoint/measureList', {
  490. page: 1,
  491. limit: 1000,
  492. riskPointId: riskPointId
  493. }, function (res) {
  494. new Vue({
  495. el: '#measureListDiv',
  496. data() {
  497. return {
  498. riskRecord: [],
  499. measureList: res.data,
  500. rootName: "",
  501. parentDangerSrcName: "",
  502. };
  503. }, methods: {
  504. riskMeasureContent: function (riskMeasureContent, itype) {
  505. var out = new Array();
  506. var content = riskMeasureContent;
  507. if (content != null) {
  508. var contents = content.split(",");
  509. for (var i = 0; i < contents.length; i++) {
  510. var one = contents[i];
  511. var type = Number(one.split("#")[0]);
  512. var contentText = one.split("#")[1];
  513. if (type === itype) {
  514. out.push(contentText);
  515. }
  516. }
  517. }
  518. return out.join(",");
  519. }, ifRootName: function (index, parentDangerSrcName) {
  520. let _this = this;
  521. if (index == 1) {
  522. _this.parentDangerSrcName = parentDangerSrcName;
  523. return parentDangerSrcName;
  524. } else {
  525. return parentDangerSrcName;
  526. }
  527. }
  528. }
  529. })
  530. }, 'get');
  531. }
  532. }
  533. element.on('tab(detailsTab)', function () {
  534. vueLoad(this.getAttribute('lay-id'));
  535. });
  536. $.extend(window, {
  537. openCamera: function (e) {
  538. layer.open({
  539. type: 2,
  540. zIndex: 1000,
  541. title: "在线直播",
  542. shadeClose: true,
  543. area: ['650px', '530px'],
  544. content: $("#ipCameraUrl").val(),
  545. fixed: false
  546. });
  547. }
  548. });
  549. });
  550. </script>
  551. </body>
  552. </html>