index.html 64 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309
  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/css/editormap.css?v=312"/>
  11. <link rel="stylesheet" type="text/css" href="../../../../assets/libs/leaflet/leaflet-draw/leaflet.draw-src.css">
  12. <link rel="stylesheet" type="text/css" href="../../../../assets/libs/leaflet/leaflet.css">
  13. <link rel="stylesheet" href="../../../../assets/module/formSelects/formSelects-v4.css"/>
  14. <style>
  15. .risk_point_dot {
  16. width: 30px;
  17. height: 30px;
  18. border-radius: 15px !important;
  19. text-align: center;
  20. color: #fff;
  21. vertical-align: middle;
  22. display: table-cell;
  23. }
  24. .level_ {
  25. background-color: #0b0b0b;
  26. }
  27. .level1_ {
  28. background-color: red;
  29. }
  30. .level2_ {
  31. background-color: #FB7437;
  32. }
  33. .level3_ {
  34. background-color: #FFDC44;
  35. }
  36. .level4_ {
  37. background-color: #14C2FB;
  38. }
  39. .risk_point_text {
  40. display: table-cell;
  41. vertical-align: middle;
  42. height: 30px;
  43. padding-left: 10px;
  44. }
  45. .info li {
  46. font-size: 15px;
  47. color: #222;
  48. line-height: 29px;
  49. margin-top: 10px;
  50. }
  51. .layui-layer-content {
  52. overflow: auto !important;
  53. }
  54. </style>
  55. </head>
  56. <body>
  57. <!-- 页面加载loading -->
  58. <div class="page-loading">
  59. <div class="ball-loader">
  60. <span></span><span></span><span></span><span></span>
  61. </div>
  62. </div>
  63. <!-- 正文开始 -->
  64. <div class="layui-fluid">
  65. <div class="layui-card">
  66. <div class="layui-card-header">
  67. 可视化编辑
  68. </div>
  69. <div class="layui-card-body">
  70. <div class="layui-form toolbar" lay-filter="formFilter">
  71. <div class="layui-row">
  72. <div class="layui-col-md5">
  73. <div class="layui-form-item">
  74. <div class="layui-inline">
  75. <label class="layui-form-label w-auto w-padding">部门:</label>
  76. <div class="layui-input-inline mr0">
  77. <input type="text" id="groupName" name="groupName" value=""
  78. placeholder="点击选择"
  79. class="layui-input" readonly>
  80. <input type="hidden" id="groupId" name="groupId">
  81. <div id="menuContent" class="menuContent">
  82. <ul id="groupTree" class="ztree" style="margin-top:0;"></ul>
  83. </div>
  84. </div>
  85. </div>
  86. <div class="layui-inline">
  87. <label class="layui-form-label w-auto w-padding">选择背景图:</label>
  88. <div class="layui-input-inline mr0">
  89. <select id="entMapList" name="entMapList" lay-filter="entMapList" lay-verType="tips"
  90. class="layui-input-block">
  91. <option value="">选择背景图</option>
  92. </select>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="layui-col-md1">
  98. <span class="risk_point_text">总计&nbsp;&nbsp;</span>
  99. <div class="risk_point_dot level_">0</div>
  100. </div>
  101. <div class="layui-col-md1">
  102. <span class="risk_point_text">重大&nbsp;&nbsp;</span>
  103. <div class="risk_point_dot level1_">0</div>
  104. </div>
  105. <div class="layui-col-md1">
  106. <span class="risk_point_text">较大&nbsp;&nbsp;</span>
  107. <div class="risk_point_dot level2_">0</div>
  108. </div>
  109. <div class="layui-col-md1">
  110. <span class="risk_point_text">一般&nbsp;&nbsp;</span>
  111. <div class="risk_point_dot level3_">0</div>
  112. </div>
  113. <div class="layui-col-md1">
  114. <span class="risk_point_text">较低&nbsp;&nbsp;</span>
  115. <div class="risk_point_dot level4_">0</div>
  116. </div>
  117. <div class="col-md-2 pull-right">
  118. <a id="showUploadDlg1" class="layui-link" href="javascript:;">➕更换地图背景</a>
  119. </div>
  120. </div>
  121. </div>
  122. <div class="layui-row">
  123. <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
  124. <div class="layui-tab layui-tab-card" lay-filter="dangerSource" style="height: 715px;overflow:auto">
  125. <ul class="layui-tab-title">
  126. <li class="layui-this" lay-id="1">设备设施</li>
  127. <li lay-id="2">作业活动</li>
  128. </ul>
  129. <div class="layui-tab-content" style="height: 655px;">
  130. <div class="layui-tab-item layui-show">
  131. <ul id="facilityIconList" class="icon-box-ul">
  132. </ul>
  133. </div>
  134. <div class="layui-tab-item">
  135. <ul id="jobIconList" class="icon-box-ul">
  136. </ul>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  141. <div class="layui-col-xs6 layui-col-sm6 layui-col-md8">
  142. <div class="right-map" style="height: 715px">
  143. <div class="map-container" id="map"></div>
  144. </div>
  145. </div>
  146. <div class="layui-col-xs4 layui-col-sm12 layui-col-md2">
  147. <div class="icon-form-box" style="display: none">
  148. <form class="layui-form">
  149. <input type="hidden" name="entMapId" id="entMapId">
  150. <div class="my-form-group">
  151. <h3 class="riskp-detail">风险点基本信息:</h3>
  152. <div class="my-form-item">
  153. <label>主危险源:</label>
  154. <div id="my-marker">
  155. </div>
  156. <div id="my-marker-title">
  157. </div>
  158. </div>
  159. <div class="my-form-item my-marker-type">
  160. <label>类型:</label>
  161. <span id="markerType"></span>
  162. </div>
  163. <div class="my-form-item">
  164. <label for="riskPointName" class="marker-name">名称:</label>
  165. <input type="text" id="riskPointName" name="riskPointName" placeholder="请输入风险点名称">
  166. </div>
  167. <div class="my-form-item">
  168. <label class="control-label">责任部门:</label>
  169. <div style="position: relative;float: left;">
  170. <input type="text" id="liableGroupIdName" name="liableGroupIdName" value=""
  171. placeholder="点击选择" class="form-control" readonly>
  172. <input type="hidden" id="liableGroupId" name="liableGroupId">
  173. <div id="menuContent_" class="menuContent">
  174. <ul id="groupTree_" class="ztree" style="margin-top:0;"></ul>
  175. </div>
  176. </div>
  177. </div>
  178. <div class="my-form-item">
  179. <label for="riskPointName" class="marker-name">责任人:</label>
  180. <!-- <select class="form-control bs-select" id="liablePerson" name="liablePerson" data-live-search="true"></select>-->
  181. <select id="liablePerson" name="liablePerson" lay-verType="tips"
  182. class="layui-input-block" xm-select="liablePerson" xm-select-search>
  183. <option value="">直接选择责任人或搜索选择责任人</option>
  184. </select>
  185. </div>
  186. <div class="my-form-item">
  187. <label for="riskPointPlaces" class="marker-name">位置:</label>
  188. <input type="text" id="riskPointPlaces" name="riskPointPlaces" autocomplete="off"
  189. placeholder="请输入风险点位置">
  190. </div>
  191. <div class="my-form-item">
  192. <label for="riskPointName" class="marker-name">描述:</label>
  193. <textarea placeholder="请输入内容" name="riskPointDesc" id="riskPointDesc"
  194. class="layui-textarea"></textarea>
  195. </div>
  196. <div class="my-form-item">
  197. <label for="riskPointName" class="marker-name">是否激活:</label>
  198. <input type="radio" lay-filter="isActive" name="isActive" value="1" title="激活"
  199. checked>
  200. <input type="radio" lay-filter="isActive" name="isActive" value="0" title="未激活">  
  201. </div>
  202. <div id="activeTime">
  203. <div class="my-form-item">
  204. <label for="riskPointName" class="marker-name">开始时间:</label>
  205. <input type="text" id="activeStartTime" name="activeStartTime" readonly
  206. placeholder="激活开始时间">
  207. </div>
  208. <div class="my-form-item">
  209. <label for="riskPointName" class="marker-name">结束时间:</label>
  210. <input type="text" id="activeEndTime" name="activeEndTime" readonly
  211. placeholder="激活结束时间">
  212. </div>
  213. </div>
  214. <p class="danger-title">附加危险源:</p>
  215. <div class="my-form-item my-marker-box" id="myMarkerBox">
  216. <ul style="max-height: 200px; overflow-y: auto">
  217. <li class="add-subIcon" id="addMarker">+</li>
  218. </ul>
  219. </div>
  220. </div>
  221. <!-- <div class="btn-group my-btn-group">-->
  222. <div class="layui-btn-group my-btn-group">
  223. <a href="javascript:;" class="layui-btn " id="saveMarker" lay-filter="saveMarker"
  224. lay-submit>保存</a>
  225. <a href="javascript:;" class="layui-btn layui-btn-primary " id="deleteMarker">撤销</a>
  226. <a href="javascript:;" class="layui-btn layui-btn-danger " id="deleteMarker_"
  227. style="display: none">删除</a>
  228. </div>
  229. </form>
  230. </div>
  231. <div id="info" class="info">
  232. <fieldset class="layui-elem-field">
  233. <legend>使用说明</legend>
  234. <div class="layui-field-box">
  235. <ul>
  236. <li>1.点击选中设备设施或者作业活动分组下面的图标</li>
  237. <li>2.点击地图绘制点</li>
  238. <li>3.编辑信息保存风险点</li>
  239. </ul>
  240. </div>
  241. </fieldset>
  242. </div>
  243. </div>
  244. </div>
  245. </div>
  246. </div>
  247. </div>
  248. <!-- js部分 -->
  249. <script type="text/javascript" src="../../../../assets/libs/layui/layui.js"></script>
  250. <script type="text/javascript" src="../../../../assets/js/common.js?v=312"></script>
  251. <script type="text/javascript" src="../../../../assets/libs/jquery/jquery-3.2.1.min.js"></script>
  252. <script src="../../../../assets/libs/leaflet/leaflet.js"></script>
  253. <script src="../../../../assets/libs/leaflet/leaflet-draw/leaflet.draw-src.js"></script>
  254. <script src="../../../../assets/libs/leaflet/leaflet-draw/local.js"></script>
  255. <script src="../../../../assets/libs/leaflet/proj4-compressed.js"></script>
  256. <script src="../../../../assets/libs/leaflet/proj4leaflet.js"></script>
  257. <script type="text/html" id="upTpl">
  258. <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form">
  259. <div class="layui-form-item">
  260. <label class="layui-form-label w-padding">名称:</label>
  261. <div class="layui-input-block">
  262. <input name="entMapName" id="entMapName" placeholder="请输入名称" type="text" class="layui-input"/>
  263. </div>
  264. </div>
  265. <div class="layui-form-item">
  266. <label class="layui-form-label w-padding">背景图:</label>
  267. <div class="layui-input-block" id="uploadImg">
  268. <div class="layui-upload-drag">
  269. <i class="layui-icon"></i>
  270. <p>点击上传,或将文件拖拽到此处</p>
  271. </div>
  272. <img src="" id="vMapImg" width="100px">
  273. </div>
  274. <input name="mapImg" id="mapImg" type="hidden" class="layui-input">
  275. </div>
  276. <div class="layui-form-item text-right">
  277. <button class="layui-btn" lay-filter="modelSubmit" lay-submit>保存</button>
  278. <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
  279. </div>
  280. </form>
  281. </script>
  282. <script>
  283. var resultData;
  284. var imgPath, viewImgPath, map;
  285. var entMapList;
  286. var loadFlag = true;
  287. layui.use(['index', 'layer', 'form', 'table', 'util', 'admin', 'zTree', 'uParas', '_groupTree', 'element', 'laydate', 'notice', '_zTree', 'upload'], function () {
  288. var $ = layui.jquery;
  289. var layer = layui.layer;
  290. var element = layui.element;
  291. var form = layui.form;
  292. var index = layui.index;
  293. var table = layui.table;
  294. var util = layui.util;
  295. var admin = layui.admin;
  296. var uParas = layui.uParas;
  297. var _groupTree = layui._groupTree;
  298. var laydate = layui.laydate;
  299. var notice = layui.notice;
  300. var _zTree = layui._zTree;
  301. var upload = layui.upload;
  302. date = new Date();
  303. var insTb = {
  304. reload: function (obj, p) {
  305. $.getJSON(uParas.baseUrl + "/ent/riskPoint/riskPointLvCount", {gId: $("#groupId").val()}, function (result) {
  306. if (result.code == 1) {
  307. var allCount = 0, lv1Count = 0, lv2Count = 0, lv3Count = 0, lv4Count = 0;
  308. $.each(result.data, function (i, field) {
  309. if (field.riskPointLevel == 1) {
  310. lv1Count = field.lvCount;
  311. }
  312. if (field.riskPointLevel == 2) {
  313. lv2Count = field.lvCount;
  314. }
  315. if (field.riskPointLevel == 3) {
  316. lv3Count = field.lvCount;
  317. }
  318. if (field.riskPointLevel == 4) {
  319. lv4Count = field.lvCount;
  320. }
  321. if (field.riskPointLevel != null) {
  322. allCount += field.lvCount;
  323. }
  324. });
  325. $(".risk_point_dot.level1_").html(lv1Count);
  326. $(".risk_point_dot.level2_").html(lv2Count);
  327. $(".risk_point_dot.level3_").html(lv3Count);
  328. $(".risk_point_dot.level4_").html(lv4Count);
  329. $(".risk_point_dot.level_").html(allCount);
  330. setTimeout(function () {
  331. loadMapData.init(_riskPointType, uParas, riskPointLevelFunc, _zTree);
  332. }, 1000)
  333. }
  334. });
  335. }
  336. }
  337. _groupTree.init(insTb);
  338. insTb.reload();
  339. var entMapId = uParas.getUrlParam("entMapId");
  340. if (entMapId != null && entMapId != undefined) {
  341. $("#entMapId").val(entMapId);
  342. }
  343. $.getJSON(uParas.baseUrl + "/ent/map/getList", {mapType: 2}, function (result) {
  344. var entMap;
  345. if (result.data != null) {
  346. entMapList = result.data;
  347. if (entMapId != null && entMapId != undefined) {
  348. $.each(result.data, function (i, field) {
  349. if (field.mapId.toString() === entMapId) {
  350. imgPath = field.mapRasterLayer;
  351. uParas.initSimpleSelectX("entMapList", "formFilter", result, "mapName", "mapId", entMapId);
  352. return;
  353. }
  354. });
  355. } else {
  356. entMap = result.data[0];
  357. imgPath = entMap.mapRasterLayer;
  358. uParas.initSimpleSelectX("entMapList", "formFilter", result, "mapName", "mapId", entMap.mapId);
  359. $("#entMapId").val(entMap.mapId);
  360. }
  361. }
  362. });
  363. var url = uParas.baseUrl + "/ent/dangerSource/query?limit=1000";
  364. /*初始化危险源数据*/
  365. $.getJSON(url, function (result) {
  366. resultData = result;
  367. loadDangerSource(result, 1);
  368. uParas.cache("dangerSourceList", result.data);
  369. });
  370. //监听下拉选择
  371. form.on('select(entMapList)', function (data) {
  372. if (data.value != "") {
  373. $.each(entMapList, function (i, field) {
  374. if (field.mapId.toString() === data.value) {
  375. imgPath = field.mapRasterLayer;
  376. return;
  377. }
  378. });
  379. $("#entMapId").val(data.value);
  380. myBmap.clearMapController();
  381. myBmap.init(form, uParas, riskPointLevelFunc, _zTree);
  382. loadMapData.init(_riskPointType, uParas, riskPointLevelFunc, _zTree);
  383. }
  384. });
  385. // 渲染laydate
  386. var myDate = new Date();
  387. laydate.render({
  388. elem: '#activeStartTime',
  389. format: 'yyyy-MM-dd HH:mm:ss',
  390. type: 'datetime',
  391. min: myDate.toLocaleString()
  392. });
  393. laydate.render({
  394. elem: '#activeEndTime',
  395. format: 'yyyy-MM-dd HH:mm:ss',
  396. type: 'datetime',
  397. min: myDate.toLocaleString()
  398. });
  399. //监听Tab切换,以改变地址hash值
  400. var _riskPointType;
  401. element.on('tab(dangerSource)', function () {
  402. var riskPointType = this.getAttribute('lay-id');
  403. loadDangerSource(resultData, riskPointType);
  404. });
  405. //监听是否激活
  406. form.on('radio(isActive)', function (data) {
  407. if (data.value == 0) {
  408. $("#activeTime").hide();
  409. } else {
  410. $("#activeTime").show();
  411. }
  412. });
  413. function loadDangerSource(result, riskPointType) {
  414. var out = {};
  415. var array = new Array();
  416. $.each(result.data, function (i, field) {
  417. if (field.riskPointType == riskPointType) {
  418. array.push(field);
  419. }
  420. });
  421. out.data = array;
  422. loadIcon(out, riskPointType);
  423. loadMapData.init(riskPointType, uParas, riskPointLevelFunc, _zTree);
  424. _riskPointType = riskPointType;
  425. }
  426. $('#showUploadDlg1').on('click', function () {
  427. saveMap(2);
  428. });
  429. $('#showUploadDlg2').on('click', function () {
  430. saveMap(3);
  431. });
  432. function saveMap(type) {
  433. admin.open({
  434. type: 1,
  435. title: '上传图片',
  436. content: $('#upTpl').html(),
  437. success: function (layero, index) {
  438. upload.render({
  439. elem: '#uploadImg'
  440. , url: uParas.baseUrl + '/admin/uploadImages'
  441. , done: function (res) {
  442. $("#mapImg").val(res.data[0]);
  443. $("#vMapImg").attr("src", uParas.baseUrl + res.data[0]);
  444. }
  445. });
  446. var url = uParas.baseUrl + '/ent/map/save';
  447. form.on('submit(modelSubmit)', function (data) {
  448. layer.load();
  449. var obj = data.field;
  450. obj.mapRasterLayer = $("#mapImg").val();
  451. obj.mapType = type;
  452. obj.mapName = $("#entMapName").val();
  453. admin.req(url, obj, function (resp) {
  454. layer.closeAll('loading');
  455. if (resp.code == 1) {
  456. layer.close(index);
  457. layer.msg(resp.msg);
  458. } else {
  459. layer.msg(resp.msg);
  460. }
  461. }, 'POST');
  462. return false;
  463. });
  464. }
  465. });
  466. }
  467. /**
  468. * 1f 2J
  469. * @param resp
  470. * @param type
  471. * @param ulDivName
  472. */
  473. function loadIcon(resp, type) {
  474. var defImgPath = "";
  475. var jobPng = "../../../../assets/images/icon/job.png";
  476. var facilityPng = "../../../../assets/images/icon/facility.png";
  477. if (type == "1") {
  478. defImgPath = facilityPng;
  479. } else {
  480. defImgPath = jobPng;
  481. }
  482. var li = "";
  483. $.each(resp.data, function (i, field) {
  484. var riskPointLevel = riskPointLevelFunc(field.dangerSourceLevel);
  485. var imgPath = field.dangerImg;
  486. if (imgPath == null || imgPath == "") {
  487. imgPath = defImgPath;
  488. } else {
  489. imgPath = imgPath;
  490. }
  491. if (field.parentDangerSrcId == -1) {
  492. if (field.riskCountParent == 0) {
  493. li += '<li class="iconCategory">' + field.dangerSrcName + '</li>';
  494. li += `<li><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon">
  495. <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}"></a>
  496. <span>${field.dangerSrcName}</span>${riskPointLevel}</li>`;
  497. } else {
  498. li += '<li class="iconCategory">' + field.dangerSrcName + '</li>';
  499. $.each(resp.data, function (i, _field) {
  500. if (field.dangerSrcId == _field.parentDangerSrcId) {
  501. riskPointLevel = riskPointLevelFunc(_field.dangerSourceLevel);
  502. li += `<li><a href="javascript:;" id="${_field.dangerSrcId}" class="marker-icon">
  503. <img src="${imgPath}" id="${_field.dangerSrcId}" type="${type}" lv="${_field.dangerSourceLevel}" name="${_field.dangerSrcName}"></a>
  504. <span>${_field.dangerSrcName}</span>${riskPointLevel}</li>`;
  505. }
  506. });
  507. }
  508. }
  509. // else {
  510. // li += `<li><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon">
  511. // <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}"></a>
  512. // <span>${field.dangerSrcName}</span>${riskPointLevel}</li>`;
  513. // }
  514. });
  515. if (type === "2") {
  516. $("#jobIconList").html('');
  517. $("#jobIconList").append(li);
  518. } else {
  519. $("#facilityIconList").html('');
  520. $("#facilityIconList").append(li);
  521. }
  522. }
  523. function riskPointLevelFunc(value) {
  524. var opts = '<div class="riskPointLevel">';
  525. if (value == 1) {
  526. opts += "<div class='notify'><span class='heartbit'></span><span><img src='../../../../assets/images/lv/red.png' style='width: 28px;height: 28px;'/></span></div>";
  527. } else if (value == 2) {
  528. opts += "<img src='../../../../assets/images/lv/orange.png' style='width: 28px;height: 28px;'/>";
  529. } else if (value == 3) {
  530. opts += "<img src='../../../../assets/images/lv/yellow.png' style='width: 28px;height: 28px;'/>";
  531. } else if (value == 4) {
  532. opts += "<img src='../../../../assets/images/lv/blue.png' style='width: 28px;height: 28px;'/>";
  533. } else {
  534. opts += "无";
  535. }
  536. opts += "</div>"
  537. return opts;
  538. }
  539. $("#deleteMarker_").click(function () {
  540. layer.confirm('确定要删除么?', {
  541. skin: 'layui-layer-admin',
  542. shade: .1
  543. }, function (i) {
  544. $.getJSON(uParas.baseUrl + "/ent/riskPoint/delete/" + $("#riskPointId").val(), {}, function (result) {
  545. layer.closeAll();
  546. if (result.code == 1) {
  547. notice.msg(result.msg, {icon: 1});
  548. $(".icon-form-box").hide();
  549. $("#info").show();
  550. setTimeout(function () {
  551. loadMapData.init(_riskPointType, uParas, riskPointLevelFunc, _zTree);
  552. }, 1000)
  553. }
  554. });
  555. });
  556. })
  557. setTimeout(function () {
  558. myBmap.init(form, uParas, riskPointLevelFunc, _zTree);
  559. }, 1000);
  560. });
  561. var myBmap = {
  562. mapContainer: "map", //地图容器
  563. mapTile: "http://online{s}.map.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2&udt=20181205", //切片图层
  564. myIcon: null, //保存创建的icon
  565. myMarker: null, //保存自己创建marker
  566. myMarkerType: 0, //marker类型
  567. myMarkerId: null, //markerId
  568. isSave: true, //是否保存标记
  569. checkedIcon: null, //保存选中的icon
  570. title: null,
  571. deleteMarkerId: null, //保存删除得markerId
  572. myMarkerGroup: L.layerGroup(),
  573. myMarkerGroupInit: L.layerGroup(),
  574. mapControl: null, // 地图控制器,用来清除叠加控制
  575. data: {},
  576. plotLayer: null,
  577. init: function (form, uParas, riskPointLevelFunc, _zTree) {
  578. _form = form;
  579. var _this = this;
  580. // 初始化默认操作
  581. this.clearPlotLayer() // 默认清空绘制点位
  582. this.myMarkerGroup.clearLayers(); // 图层
  583. this.isSave = true
  584. clearForm()
  585. //初始化地图
  586. var map_type = 2;
  587. if (map_type == 4) {
  588. baidu_map();
  589. } else {
  590. image_map();
  591. }
  592. // 增加区域绘制工具栏
  593. this.plotLayer = plotLayer = this.plotLayer != null ? this.plotLayer : L.featureGroup(), map.addLayer(plotLayer);
  594. var e = {
  595. position: "topright",
  596. draw: {
  597. polyline: {shapeOptions: {color: "#0000ff", weight: 3}},
  598. polygon: {allowIntersection: !0, showArea: !0, shapeOptions: {color: "#0000ff", weight: 2}},
  599. rectangle: {shapeOptions: {color: "#0000ff", weight: 2}},
  600. circle: false,
  601. circlemarker: false,
  602. marker: false
  603. },
  604. edit: {
  605. featureGroup: plotLayer,
  606. remove: !0,
  607. edit: false
  608. }
  609. }, n = mapControl = new L.Control.Draw(e);
  610. map.addControl(n)
  611. function draw_createdHandler(t) {
  612. t.layerType;
  613. var o = t.layer;
  614. plotLayer.addLayer(o)
  615. var all = o.toGeoJSON();
  616. var drawIds = $("#drawIds").val();
  617. $("#drawIds").remove();
  618. if (drawIds != undefined) {
  619. drawIds = drawIds + "#" + JSON.stringify(all.geometry.coordinates) + ";" + all.geometry.type;
  620. } else {
  621. drawIds = JSON.stringify(all.geometry.coordinates) + ";" + all.geometry.type
  622. }
  623. $(".my-marker-type").append('<input type="hidden" id="drawIds" name="drawIds" value="' + drawIds + '">');
  624. }
  625. function draw_deletedHandler(t) {
  626. $("#drawIds").remove();
  627. }
  628. // baidu_map()
  629. //地图鼠标事件
  630. map.off('click').on('click', function (e) {
  631. var point = [];
  632. if (_this.myIcon != null) {
  633. var myIcon1 = L.icon({
  634. iconUrl: _this.myIcon,
  635. iconSize: [40, 40],
  636. // iconAnchor: [0, 0]
  637. })
  638. // console.log(myIcon1);
  639. _this.myIcon = null; //将myIcon 置为null 防止鼠标在地图上移动或者点击再次做绘制
  640. point.push(e.latlng.lat, e.latlng.lng);
  641. _this.myMarker = L.marker([e.latlng.lat, e.latlng.lng], {icon: myIcon1});
  642. _this.myMarker.on('click', markerClick); //标记点击事件
  643. //_this.myMarker.addTo(map); //添加marker到地图上
  644. _this.myMarkerGroup.addLayer(_this.myMarker);
  645. _this.myMarkerGroup.addTo(map);
  646. _this.deleteMarkerId = _this.myMarker._leaflet_id; //保存当前markerId
  647. clearForm(); //清空函数
  648. $("#my-marker").append(_this.checkedIcon); //在表单中进行回显
  649. $("#my-marker-title").append(_this.title); //在表单中进行回显
  650. $("#markerType").html(_this.data.type == 2 ? '作业活动' : '设备设施');
  651. $(".my-marker-type").append('<input type="hidden" id="type" name="type" value="' + _this.data.type + '">');
  652. var latlngArray = "[" + e.latlng.lat + "," + e.latlng.lng + "]";
  653. $(".my-marker-type").append('<input type="hidden" id="latlng" name="latlng" value="' + latlngArray + '">');
  654. $(".my-marker-type").append('<input type="hidden" id="dangerSourceId" name="dangerSourceId" value="' + _this.myMarkerId + '">');
  655. $(".my-marker-type").append('<input type="hidden" id="riskPointMinLevel" name="riskPointMinLevel" value="' + _this.data.riskPointMinLevel + '">');
  656. map.on(L.Draw.Event.CREATED, draw_createdHandler), map.on(L.Draw.Event.DELETED, draw_deletedHandler)
  657. $(".icon-form-box").show();
  658. $("#info").hide();
  659. $("#deleteMarker_").hide();
  660. $("#deleteMarker").show();
  661. var inGroupNumber = {
  662. reload: function (obj) {
  663. uParas.initFormSelects("liablePerson", uParas.baseUrl + '/admin/common/getUsersByGroupId?gId=' + obj.where.groupId, "accountRealName", "aId");
  664. }
  665. }
  666. _zTree._init('/admin/common/getGroupLists', 'gId', 'groupParent', 'groupName', 'gId', 0, 'groupTree_', inGroupNumber, 'menuContent_', 'liableGroupIdName', 'liableGroupId');
  667. }
  668. })
  669. //左侧icon得点击事件
  670. $(".icon-box-ul").off('click').on('click', 'a', function (event) {
  671. if (_this.isSave) {
  672. _this.isSave = false;
  673. var curParent = $(event.currentTarget).parent();
  674. var tarSrc = $(event.target).attr('src');
  675. var title = $(event.target).attr('name');
  676. var id = $(event.target).attr('id');
  677. var type = $(event.target).attr('type');
  678. var riskPointMinLevel = $(event.target).attr('lv');
  679. _this.data.riskPointMinLevel = riskPointMinLevel;
  680. _this.data.type = type;
  681. $('.icon-active').removeClass('icon-active');
  682. $(event.currentTarget).addClass('icon-active');
  683. _this.myIcon = tarSrc;
  684. //复制icon进行拖动
  685. _this.myMarkerId = id;
  686. // _this.myMarkerType = type;
  687. _this.checkedIcon = '<img src="' + tarSrc + '" width="40px" height="40px"/>';
  688. // //console.log(_this.checkedIcon)
  689. _this.title = title;
  690. } else {
  691. layer.msg('请先保存标记!');
  692. }
  693. })
  694. _form.on('submit(saveMarker)', function (data) {
  695. var sendData = data.field;
  696. if (sendData.type == undefined || sendData.type == null) {
  697. layer.msg("请先绘制风险点!");
  698. return;
  699. }
  700. if (sendData.riskPointName == "") {
  701. layer.msg("请输入名称!");
  702. return;
  703. }
  704. sendData.riskPointType = sendData.type;
  705. sendData.drawIds = $("#drawIds").val();
  706. sendData.riskPointMinLevelSon = $("#riskPointMinLevelSon").val();
  707. sendData.dangerSourceIds = $("#dangerSourceIds").val();
  708. // console.log(sendData);
  709. $.ajax({
  710. type: "post",
  711. url: uParas.baseUrl + "/ent/riskPointMap/saveDangerSourceMap",
  712. data: sendData,
  713. dataType: "json",
  714. success: function (result) {
  715. if (result.code === 1) {
  716. layer.msg("保存成功");
  717. _this.isSave = true;
  718. $(".my-marker-box>ul>li:not(:last-child)").remove();
  719. if (map._layers[_this.deleteMarkerId] != null) {
  720. map.removeLayer(map._layers[_this.deleteMarkerId]);
  721. }
  722. clearForm(); //清空函数
  723. setTimeout(function () {
  724. loadMapData.init(sendData.type, uParas, riskPointLevelFunc, _zTree);
  725. }, 1000)
  726. $(".icon-form-box").hide();
  727. $("#info").show();
  728. } else {
  729. layer.msg(result.msg);
  730. }
  731. }
  732. });
  733. });
  734. // 标记click事件
  735. function markerClick(e) {
  736. _this.deleteMarkerId = e.target._leaflet_id;
  737. }
  738. //删除marker事件
  739. $("#deleteMarker").click(function () {
  740. _this.isSave = true;
  741. $(".my-marker-box>ul>li:not(:last-child)").remove();
  742. if (map._layers[_this.deleteMarkerId] != null) {
  743. map.removeLayer(map._layers[_this.deleteMarkerId]);
  744. }
  745. plotLayer.clearLayers();
  746. clearForm(); //清空函数
  747. });
  748. // 添加标注
  749. $("#addMarker").click(function () {
  750. layerOpen();
  751. })
  752. // 删除单个标记
  753. $(".my-marker-box>ul").on('click', 'span', function (e) {
  754. $(e.target).parent().remove();
  755. var eles = $(".my-marker-box>ul>li");
  756. var ids = '';
  757. var lv = 4;
  758. $.each(eles, function (index, item) {
  759. var id = $(item).find('img').attr('id');
  760. var lvSon = $(item).find('img').attr('lv');
  761. if (id != undefined) {
  762. ids += id + ",";
  763. if (Number(lvSon) < Number(lv)) {
  764. lv = lvSon;
  765. }
  766. }
  767. });
  768. $("#dangerSourceIds").remove();
  769. $("#riskPointMinLevelSon").remove();
  770. $(".my-marker-type").append('<input type="hidden" id="riskPointMinLevelSon" name="riskPointMinLevelSon" value="' + lv + '">');
  771. $(".my-marker-type").append('<input type="hidden" id="dangerSourceIds" name="dangerSourceIds" value="' + ids + '">');
  772. })
  773. //底图为图片
  774. function image_map() {
  775. if (map == undefined || map._loaded == undefined) {
  776. map = L.map(_this.mapContainer, {
  777. crs: L.CRS.Simple,
  778. center: L.latLng(50.5, 30.5),
  779. minZoom: 0,
  780. zoom: 0,
  781. attributionControl: false
  782. });
  783. } else {
  784. loadFlag = false;
  785. }
  786. var yx = L.latLng;
  787. var xy = function xy(x, y) {
  788. if (L.Util.isArray(x)) {
  789. return yx(x[1], x[0]);
  790. }
  791. return yx(y, x);
  792. };
  793. // map.eachLayer(function (layer) {
  794. // map.removeLayer(layer);
  795. // });
  796. map.addLayer(_this.myMarkerGroupInit);
  797. map.addLayer(_this.myMarkerGroup);
  798. var bounds = [xy(-600, -600), xy(300, 300)];
  799. L.imageOverlay(imgPath, bounds).addTo(map);
  800. map.fitBounds(bounds);
  801. }
  802. //底图为百度地图
  803. function baidu_map() {
  804. var maxZoom = 26;
  805. var crs = new L.Proj.CRS('EPSG:3395',
  806. '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs', {
  807. resolutions: function () {
  808. level = 19;
  809. var res = [];
  810. res[0] = Math.pow(2, 18);
  811. for (var i = 1; i < level; i++) {
  812. res[i] = Math.pow(2, (18 - i))
  813. }
  814. return res;
  815. }(),
  816. origin: [0, 0],
  817. bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
  818. });
  819. var image = new L.TileLayer(_this.mapTile, {
  820. maxZoom: maxZoom,
  821. minZoom: 10,
  822. subdomains: [0, 1, 2],
  823. tms: true
  824. });
  825. map = L.map(_this.mapContainer, {
  826. crs: crs,
  827. layers: [image]
  828. });
  829. map.setView([34.474387, 109.490437], 14);
  830. }
  831. function clearForm() {
  832. $("#my-marker").html(""); //清除icon;
  833. $('.icon-active').removeClass('icon-active'); //移除已选class
  834. $(".my-marker-type>input").remove(); //移除标记类型中得input
  835. $("#markerType").html(""); //清空标记类型
  836. $("#riskPointName").val(""); //清空标记类型
  837. $(".my-marker-box>ul>li:not(:last-child)").remove();
  838. $("#drawIds").remove();
  839. $("#drawType").remove();
  840. $("#my-marker-title").html("");
  841. $("#riskPointDesc").val('');
  842. $("#activeStartTime").val('');
  843. $("#activeEndTime").val('');
  844. $("#riskPointPlaces").val('');
  845. $('#liableGroupIdName').val('');
  846. $('#liablePerson').html('');
  847. }
  848. function layerOpen() {
  849. var outIds = $("#dangerSourceId").val();
  850. if ($("#dangerSourceIds").val() != undefined) {
  851. outIds += "," + $("#dangerSourceIds").val();
  852. }
  853. if (outIds == undefined) {
  854. outIds = new Array();
  855. }
  856. var defImgPath = "";
  857. var jobPng = "../../../../assets/images/icon/job.png";
  858. var facilityPng = "../../../../assets/images/icon/facility.png";
  859. //var dangerSourceList = layui.data(uParas.tableName).dangerSourceList;
  860. var html = '<div class="">';
  861. html += '<div class="danger-src-date popup-icon-box" style="width: 550px;float: left;margin-left: 20px;"><ul>';
  862. $.each(resultData.data, function (i, field) {
  863. var type = field.riskPointType;
  864. var riskPointLevel = riskPointLevelFunc(field.dangerSourceLevel);
  865. var imgPath = field.dangerImg;
  866. if (type == 1) {
  867. defImgPath = facilityPng;
  868. } else {
  869. defImgPath = jobPng;
  870. }
  871. if (imgPath == null || imgPath == "") {
  872. imgPath = defImgPath;
  873. } else {
  874. imgPath = uParas.baseUrl + imgPath;
  875. }
  876. var id = field.dangerSrcId;
  877. if (field.riskPointType == 1) {
  878. // if (outIds.indexOf(id) == -1) {
  879. if (field.parentDangerSrcId == -1) {
  880. // if (field.riskCount == field.riskCountParent) {
  881. if (field.riskCountParent == 0) {
  882. html += '<li class="iconCategory_">' + field.dangerSrcName + '</li>';
  883. html += `<li onclick="iconClick(this)"><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon"><span style='font-size: 18px;margin-top: 10px;'>✦ </span>
  884. <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}" style='width: 25px;height: 25px;'></a>
  885. <span style="margin-left: 10px;color: #0c5df1;">${field.dangerSrcName}</span>${riskPointLevel}</li>`;
  886. } else {
  887. html += '<li class="iconCategory_">' + field.dangerSrcName + '</li>';
  888. $.each(resultData.data, function (i, _field) {
  889. var _id = _field.dangerSrcId;
  890. if (outIds.indexOf(_id) == -1) {
  891. if (field.dangerSrcId == _field.parentDangerSrcId) {
  892. var _type = _field.riskPointType;
  893. var _riskPointLevel = riskPointLevelFunc(_field.dangerSourceLevel);
  894. var _imgPath = _field.dangerImg;
  895. if (_type == 1) {
  896. defImgPath = facilityPng;
  897. } else {
  898. defImgPath = jobPng;
  899. }
  900. if (_imgPath == null || _imgPath == "") {
  901. _imgPath = defImgPath;
  902. } else {
  903. _imgPath = uParas.baseUrl + _imgPath
  904. }
  905. // li += `<li><a href="javascript:;" id="${_field.dangerSrcId}" class="marker-icon">
  906. // <img src="${imgPath}" id="${_field.dangerSrcId}" type="${type}" lv="${_field.dangerSourceLevel}" name="${_field.dangerSrcName}"></a>
  907. // <span>${_field.dangerSrcName}</span>${riskPointLevel}</li>`;
  908. html += `<li onclick="iconClick(this)"><a href="javascript:;" id="${_field.dangerSrcId}" class="marker-icon"><span style='font-size: 18px;margin-top: 10px;'>✦ </span>
  909. <img src="${_imgPath}" id="${_field.dangerSrcId}" type="${_type}" lv="${_field.dangerSourceLevel}" name="${_field.dangerSrcName}" style='width: 25px;height: 25px;'></a>
  910. <span style="margin-left: 10px;color: #0c5df1;">${_field.dangerSrcName}</span>${_riskPointLevel}</li>`;
  911. }
  912. }
  913. });
  914. }
  915. // }
  916. }
  917. // else {
  918. // html += `<li onclick="iconClick(this)"><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon"><span style='font-size: 18px;margin-top: 10px;'>✦ </span>
  919. // <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}" style='width: 25px;height: 25px;'></a>
  920. // <span style="margin-left: 10px;color: #0c5df1;">${field.dangerSrcName}</span>${riskPointLevel}</li>`;
  921. // }
  922. // }
  923. }
  924. });
  925. html += '</ul></div>';
  926. html += '<div class="danger-src-date popup-icon-box" style="float: left;width: 550px;"><ul>';
  927. $.each(resultData.data, function (i, field) {
  928. var type = field.riskPointType;
  929. var riskPointLevel = riskPointLevelFunc(field.dangerSourceLevel);
  930. var imgPath = field.dangerImg;
  931. if (type == 1) {
  932. defImgPath = facilityPng;
  933. } else {
  934. defImgPath = jobPng;
  935. }
  936. if (imgPath == null || imgPath == "") {
  937. imgPath = defImgPath;
  938. } else {
  939. imgPath = uParas.baseUrl + imgPath;
  940. }
  941. var id = field.dangerSrcId;
  942. if (field.riskPointType == 2) {
  943. if (field.parentDangerSrcId == -1) {
  944. // if (field.riskCount == field.riskCountParent) {
  945. if (field.riskCountParent == 0) {
  946. html += '<li class="iconCategory_">' + field.dangerSrcName + '</li>';
  947. html += `<li onclick="iconClick(this)"><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon"><span style='font-size: 18px;margin-top: 10px;'>✦ </span>
  948. <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}" style='width: 25px;height: 25px;'></a>
  949. <span style="margin-left: 10px;color: #0c5df1;">${field.dangerSrcName}</span>${riskPointLevel}</li>`;
  950. } else {
  951. html += '<li class="iconCategory_">' + field.dangerSrcName + '</li>';
  952. $.each(resultData.data, function (i, _field) {
  953. var _id = _field.dangerSrcId;
  954. if (outIds.indexOf(_id) == -1) {
  955. if (field.dangerSrcId == _field.parentDangerSrcId) {
  956. var _type = _field.riskPointType;
  957. var _riskPointLevel = riskPointLevelFunc(_field.dangerSourceLevel);
  958. var _imgPath = _field.dangerImg;
  959. if (_type == 1) {
  960. defImgPath = facilityPng;
  961. } else {
  962. defImgPath = jobPng;
  963. }
  964. if (_imgPath == null || _imgPath == "") {
  965. _imgPath = defImgPath;
  966. } else {
  967. _imgPath = uParas.baseUrl + _imgPath
  968. }
  969. // li += `<li><a href="javascript:;" id="${_field.dangerSrcId}" class="marker-icon">
  970. // <img src="${imgPath}" id="${_field.dangerSrcId}" type="${type}" lv="${_field.dangerSourceLevel}" name="${_field.dangerSrcName}"></a>
  971. // <span>${_field.dangerSrcName}</span>${riskPointLevel}</li>`;
  972. html += `<li onclick="iconClick(this)"><a href="javascript:;" id="${_field.dangerSrcId}" class="marker-icon"><span style='font-size: 18px;margin-top: 10px;'>✦ </span>
  973. <img src="${_imgPath}" id="${_field.dangerSrcId}" type="${_type}" lv="${_field.dangerSourceLevel}" name="${_field.dangerSrcName}" style='width: 25px;height: 25px;'></a>
  974. <span style="margin-left: 10px;color: #0c5df1;">${_field.dangerSrcName}</span>${_riskPointLevel}</li>`;
  975. }
  976. }
  977. });
  978. }
  979. // }
  980. }
  981. }
  982. });
  983. html += '</ul></div></div>';
  984. layer.open({
  985. title: '【设备设施】' + '<span style="margin-left: 470px;">【作业活动】</span>',
  986. btn: ['确定', '取消'],
  987. type: 1,
  988. area: ['1200px', '60%'], //宽高
  989. content: html,
  990. yes: yes
  991. });
  992. }
  993. function yes(index) {
  994. var eles = $(".popup-icon-box>ul>li");
  995. var li = '';
  996. var ids = '';
  997. var lv = 4;
  998. $.each(eles, function (index, item) {
  999. if ($(item).hasClass('icon-active')) {
  1000. var imgSrc = $(item).find('img').attr('src');
  1001. var id = $(item).find('img').attr('id');
  1002. var title = $(item).find('img').attr('name');
  1003. var div = $(item).find('div').html();
  1004. var lvSon = $(item).find('img').attr('lv');
  1005. li += '<li><img src="' + imgSrc + '" id="' + id + '"lv=' + lvSon + ' ><span>x</span><p>' + title + '</p><div class="riskPointLevel">' + div + '</div></li>';
  1006. if (id != undefined) {
  1007. ids += id + ",";
  1008. if (Number(lvSon) < lv) {
  1009. lv = lvSon;
  1010. }
  1011. }
  1012. }
  1013. });
  1014. $("#myMarkerBox>ul").prepend(li);
  1015. if ($("#dangerSourceIds").val() != undefined) {
  1016. ids += $("#dangerSourceIds").val();
  1017. }
  1018. $("#dangerSourceIds").remove();
  1019. $("#riskPointMinLevelSon").remove();
  1020. $(".my-marker-type").append('<input type="hidden" id="riskPointMinLevelSon" name="riskPointMinLevelSon" value="' + lv + '">');
  1021. $(".my-marker-type").append('<input type="hidden" id="dangerSourceIds" name="dangerSourceIds" value="' + ids + '">');
  1022. layer.close(index);
  1023. }
  1024. },
  1025. clearPlotLayer: function () {
  1026. if (this.plotLayer != null) {
  1027. this.plotLayer.clearLayers()
  1028. }
  1029. },
  1030. clearMapController() { // 清除地图控制器
  1031. map.removeControl(mapControl)
  1032. }
  1033. }
  1034. var loadMapData = {
  1035. jobPng: "../../../../assets/images/icon/job.png",
  1036. facilityPng: "../../../../assets/images/icon/facility.png",
  1037. init: function (type, uParas, riskPointLevelFunc, _zTree) {
  1038. var _uParas = uParas;
  1039. var riskPointLevelFunc = riskPointLevelFunc;
  1040. var _zTree = _zTree;
  1041. var jobIcon = L.icon({
  1042. iconUrl: loadMapData.jobPng,
  1043. iconSize: [38, 45],
  1044. popupAnchor: [0, -16]
  1045. });
  1046. var facilityIcon = L.icon({
  1047. iconUrl: loadMapData.facilityPng,
  1048. iconSize: [38, 45],
  1049. popupAnchor: [0, -16]
  1050. });
  1051. function icon(imgUrl) {
  1052. return L.icon({
  1053. iconUrl: imgUrl,
  1054. iconSize: [38, 45],
  1055. popupAnchor: [0, -16]
  1056. });
  1057. }
  1058. initMapData(type, uParas);
  1059. function initMapData(type, uParas) {
  1060. var groupId = $("#groupId").val();
  1061. if (type == undefined) {
  1062. type = 1
  1063. } else {
  1064. myBmap.myMarkerGroupInit.clearLayers();
  1065. }
  1066. myBmap.myMarkerGroupInit.clearLayers();
  1067. var entMapId = $("#entMapId").val();
  1068. $.getJSON(uParas.baseUrl + "/ent/riskPointMap/getRiskPointMap", {
  1069. riskPointType: type,
  1070. gId: groupId,
  1071. entMapId: entMapId
  1072. }, function (result) {
  1073. if (result.code == 1) {
  1074. $.each(result.data, function (index, item) {
  1075. var markerData = item.markerData;
  1076. if (markerData != null) {
  1077. var optionsData = {
  1078. mapId: item.id,
  1079. riskPointId: item.riskPointId,
  1080. type: type,
  1081. title: item.markerTitle
  1082. };
  1083. if (item.dangerImg != null && item.dangerImg != "") {
  1084. optionsData.iconUrl = imgPathFun(item.dangerImg, type);
  1085. } else {
  1086. if (type === 2) {
  1087. optionsData.iconUrl = loadMapData.jobPng;
  1088. } else {
  1089. optionsData.iconUrl = loadMapData.facilityPng;
  1090. }
  1091. }
  1092. if (item.markerType == 3) {
  1093. var data = new Array();
  1094. $.each($.parseJSON(markerData), function (index, item) {
  1095. data[index] = new Array(item[1], item[0]);
  1096. });
  1097. L.polygon(data, optionsData).addTo(myBmap.myMarkerGroupInit).bindPopup(item.markerTitle).on('click', onMapClick);
  1098. } else if (item.markerType == 1) {
  1099. if (item.dangerImg != null && item.dangerImg != "") {
  1100. optionsData.icon = icon(uParas.baseUrl + item.dangerImg);
  1101. } else {
  1102. if (type == 2) {
  1103. optionsData.icon = jobIcon;
  1104. } else {
  1105. optionsData.icon = facilityIcon;
  1106. }
  1107. }
  1108. L.marker($.parseJSON(markerData), optionsData).addTo(myBmap.myMarkerGroupInit).bindPopup(item.markerTitle).on('click', onMapClick);
  1109. } else if (item.markerType == 2) {
  1110. var data = new Array();
  1111. $.each($.parseJSON(markerData), function (index, item) {
  1112. data[index] = new Array(item[1], item[0]);
  1113. });
  1114. L.polyline(data, optionsData).addTo(myBmap.myMarkerGroupInit).bindPopup(item.markerTitle).on('click', onMapClick);
  1115. }
  1116. }
  1117. });
  1118. }
  1119. });
  1120. }
  1121. function imgPathFun(imgPath, type) {
  1122. var defImgPath = "";
  1123. var jobPng = "../../../../assets/images/icon/job.png";
  1124. var facilityPng = "../../../../assets/images/icon/facility.png";
  1125. if (type == "1") {
  1126. defImgPath = facilityPng;
  1127. } else {
  1128. defImgPath = jobPng;
  1129. }
  1130. if (imgPath == null || imgPath == "") {
  1131. return defImgPath;
  1132. } else {
  1133. if (imgPath.indexOf("http:") != -1) {
  1134. defImgPath = imgPath;
  1135. } else {
  1136. defImgPath = uParas.baseUrl + imgPath;
  1137. }
  1138. }
  1139. return defImgPath;
  1140. }
  1141. function onMapClick(e) {
  1142. $(".icon-form-box").show();
  1143. $("#info").hide();
  1144. var options = e.target.options;
  1145. var data = {};
  1146. data.mapId = options.mapId;
  1147. data.riskPointId = options.riskPointId;
  1148. $("#deleteMarker").hide();
  1149. $("#deleteMarker_").show();
  1150. $("#my-marker").html('<img src="' + options.iconUrl + '"/>');
  1151. $("#markerType").html(options.type == 2 ? '作业活动' : '设备设施');
  1152. $("#riskPointName").val(options.title);
  1153. $.getJSON("/ent/riskPointMap/findMapDataById", data, function (result) {
  1154. if (result.code == 1) {
  1155. var item = result.data[0];
  1156. var index = item.dangerSourceIds;
  1157. var arr = new Array();
  1158. if (index != null) {
  1159. if (index.indexOf(',') != -1) {
  1160. arr = index.split(',');
  1161. } else {
  1162. arr = [index];
  1163. }
  1164. }
  1165. $("#riskPointPlaces").val(item.riskPointPlaces);
  1166. $("#riskPointDesc").val(item.riskPointDesc);
  1167. $("#activeEndTime").val(item.activeEndTime);
  1168. $("#activeStartTime").val(item.activeStartTime);
  1169. $("#my-marker-title").html("");
  1170. $("#my-marker-title").append(item.dangerSrcName);
  1171. $("#type").remove();
  1172. $(".my-marker-type").append('<input type="hidden" id="type" name="type" value="' + options.type + '">');
  1173. $("#riskPointId").remove();
  1174. $(".my-marker-type").append('<input type="hidden" id="riskPointId" name="riskPointId" value="' + item.riskPointId + '">');
  1175. $("#dangerSourceId").remove();
  1176. $(".my-marker-type").append('<input type="hidden" id="dangerSourceId" name="dangerSourceId" value="' + item.dangerSrcId + '">');
  1177. $("#riskPointMinLevel").remove();
  1178. $(".my-marker-type").append('<input type="hidden" id="riskPointMinLevel" name="riskPointMinLevel" value="' + item.riskPointLevel + '">');
  1179. if (arr.length > 0) {
  1180. var majorIndex = arr.indexOf(item.dangerSrcId + "");
  1181. if (majorIndex > -1) {
  1182. arr.splice(majorIndex, 1);
  1183. }
  1184. $("#dangerSourceIds").remove();
  1185. $(".my-marker-type").append('<input type="hidden" id="dangerSourceIds" name="dangerSourceIds" value="' + arr.join(',') + '">');
  1186. }
  1187. $(".my-marker-box>ul>li:not(:last-child)").remove();
  1188. var li = '';
  1189. var _lv = 4;
  1190. var dangerSourceList = layui.data(_uParas.tableName).dangerSourceList;
  1191. $.each(arr, function (i, field) {
  1192. $.each(dangerSourceList, function (index, item) {
  1193. if (item.dangerSrcId == field) {
  1194. var title = item.dangerSrcName;
  1195. var lvSon = item.dangerSourceLevel;
  1196. if (lvSon < _lv) {
  1197. _lv = lvSon;
  1198. }
  1199. var div = riskPointLevelFunc(lvSon);
  1200. var imgPath = imgPathFun(item.dangerImg, item.riskPointType);
  1201. li += '<li><img src="' + imgPath + '" id="' + field + '" lv=' + lvSon + ' ><span>x</span><p>' + title + '</p><div class="riskPointLevel">' + div + '</div></li>';
  1202. return;
  1203. }
  1204. });
  1205. });
  1206. $("#riskPointMinLevelSon").remove();
  1207. $(".my-marker-type").append('<input type="hidden" id="riskPointMinLevelSon" name="riskPointMinLevelSon" value="' + _lv + '">');
  1208. $("#myMarkerBox>ul").prepend(li);
  1209. myBmap.data.type = options.type;
  1210. $("#liableGroupIdName").val(item.groupName);
  1211. $("#liableGroupId").val(item.liableGroupId);
  1212. if (item.liableGroupId != null) {
  1213. var inGroupNumber = {
  1214. reload: function (obj) {
  1215. uParas.initFormSelects("liablePerson", uParas.baseUrl + '/admin/common/getUsersByGroupId?gId=' + obj.where.groupId, "accountRealName", "aId");
  1216. }
  1217. }
  1218. _zTree._init('/admin/common/getGroupLists', 'gId', 'groupParent', 'groupName', 'gId', 0, 'groupTree_', inGroupNumber, 'menuContent_', 'liableGroupIdName', 'liableGroupId');
  1219. uParas.initFormSelects("liablePerson", uParas.baseUrl + '/admin/common/getUsersByGroupId?gId=' + item.liableGroupId, "accountRealName", "aId", item.personList);
  1220. }
  1221. }
  1222. });
  1223. }
  1224. }
  1225. }
  1226. function iconClick(e) {
  1227. $(e).toggleClass('icon-active')
  1228. }
  1229. </script>
  1230. </body>
  1231. </html>