123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <title>可视化编辑</title>
- <link rel="stylesheet" href="../../../../assets/libs/layui/css/layui.css"/>
- <link rel="stylesheet" href="../../../../assets/module/admin.css?v=312"/>
- <link rel="stylesheet" href="../../../../assets/css/editormap.css?v=312"/>
- <link rel="stylesheet" type="text/css" href="../../../../assets/libs/leaflet/leaflet-draw/leaflet.draw-src.css">
- <link rel="stylesheet" type="text/css" href="../../../../assets/libs/leaflet/leaflet.css">
- <link rel="stylesheet" href="../../../../assets/module/formSelects/formSelects-v4.css"/>
- <style>
- .risk_point_dot {
- width: 30px;
- height: 30px;
- border-radius: 15px !important;
- text-align: center;
- color: #fff;
- vertical-align: middle;
- display: table-cell;
- }
- .level_ {
- background-color: #0b0b0b;
- }
- .level1_ {
- background-color: red;
- }
- .level2_ {
- background-color: #FB7437;
- }
- .level3_ {
- background-color: #FFDC44;
- }
- .level4_ {
- background-color: #14C2FB;
- }
- .risk_point_text {
- display: table-cell;
- vertical-align: middle;
- height: 30px;
- padding-left: 10px;
- }
- .info li {
- font-size: 15px;
- color: #222;
- line-height: 29px;
- margin-top: 10px;
- }
- .layui-layer-content {
- overflow: auto !important;
- }
- </style>
- </head>
- <body>
- <!-- 页面加载loading -->
- <div class="page-loading">
- <div class="ball-loader">
- <span></span><span></span><span></span><span></span>
- </div>
- </div>
- <!-- 正文开始 -->
- <div class="layui-fluid">
- <div class="layui-card">
- <div class="layui-card-header">
- 可视化编辑
- </div>
- <div class="layui-card-body">
- <div class="layui-form toolbar" lay-filter="formFilter">
- <div class="layui-row">
- <div class="layui-col-md5">
- <div class="layui-form-item">
- <div class="layui-inline">
- <label class="layui-form-label w-auto w-padding">部门:</label>
- <div class="layui-input-inline mr0">
- <input type="text" id="groupName" name="groupName" value=""
- placeholder="点击选择"
- class="layui-input" readonly>
- <input type="hidden" id="groupId" name="groupId">
- <div id="menuContent" class="menuContent">
- <ul id="groupTree" class="ztree" style="margin-top:0;"></ul>
- </div>
- </div>
- </div>
- <div class="layui-inline">
- <label class="layui-form-label w-auto w-padding">选择背景图:</label>
- <div class="layui-input-inline mr0">
- <select id="entMapList" name="entMapList" lay-filter="entMapList" lay-verType="tips"
- class="layui-input-block">
- <option value="">选择背景图</option>
- </select>
- </div>
- </div>
- </div>
- </div>
- <div class="col-md-2 pull-right">
- <a id="showUploadDlg1" class="layui-link" href="javascript:;">➕更换地图背景</a>
- </div>
- </div>
- </div>
- <div class="layui-row">
- <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
- <div class="layui-tab layui-tab-card" lay-filter="dangerSource" style="height: 715px;overflow:auto">
- <ul class="layui-tab-title">
- <li class="layui-this" lay-id="6">矿下交通库</li>
- </ul>
- <div class="layui-tab-content" style="height: 655px;">
- <div class="layui-tab-item layui-show">
- <ul id="facilityIconList" class="icon-box-ul">
- </ul>
- </div>
- <div class="layui-tab-item">
- <ul id="jobIconList" class="icon-box-ul">
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div class="layui-col-xs6 layui-col-sm6 layui-col-md8">
- <div class="right-map" style="height: 715px">
- <div class="map-container" id="map"></div>
- </div>
- </div>
- <div class="layui-col-xs4 layui-col-sm12 layui-col-md2">
- <div class="icon-form-box" style="display: none">
- <form class="layui-form">
- <input type="hidden" name="entMapId" id="entMapId">
- <div class="my-form-group">
- <h3 class="riskp-detail">风险点基本信息:</h3>
- <div class="my-form-item">
- <label>主危险源:</label>
- <div id="my-marker">
- </div>
- <div id="my-marker-title">
- </div>
- </div>
- <div class="my-form-item my-marker-type">
- <!--<label>类型:</label>-->
- <!--<span id="markerType"></span>-->
- </div>
- <div class="my-form-item">
- <label for="riskPointName" class="marker-name">名称:</label>
- <input type="text" id="riskPointName" name="riskPointName" placeholder="请输入风险点名称">
- </div>
- <div class="my-form-item">
- <label class="control-label">责任部门:</label>
- <div style="position: relative;float: left;">
- <input type="text" id="liableGroupIdName" name="liableGroupIdName" value=""
- placeholder="点击选择" class="form-control" readonly>
- <input type="hidden" id="liableGroupId" name="liableGroupId">
- <div id="menuContent_" class="menuContent">
- <ul id="groupTree_" class="ztree" style="margin-top:0;"></ul>
- </div>
- </div>
- </div>
- <div class="my-form-item">
- <label for="riskPointName" class="marker-name">描述:</label>
- <textarea placeholder="请输入内容" name="riskPointDesc" id="riskPointDesc"
- class="layui-textarea"></textarea>
- </div>
- <div class="my-form-item" style="display: none;">
- <label for="riskPointName" class="marker-name">是否激活:</label>
- <input type="radio" lay-filter="isActive" name="isActive" value="1" title="激活"
- checked>
- <input type="radio" lay-filter="isActive" name="isActive" value="0" title="未激活">
- </div>
- </div>
- <!-- <div class="btn-group my-btn-group">-->
- <div class="layui-btn-group my-btn-group">
- <a href="javascript:;" class="layui-btn " id="saveMarker" lay-filter="saveMarker"
- lay-submit>保存</a>
- <a href="javascript:;" class="layui-btn layui-btn-primary " id="deleteMarker">撤销</a>
- <a href="javascript:;" class="layui-btn layui-btn-danger " id="deleteMarker_"
- style="display: none">删除</a>
- </div>
- </form>
- </div>
- <div id="info" class="info">
- <fieldset class="layui-elem-field">
- <legend>使用说明</legend>
- <div class="layui-field-box">
- <ul>
- <li>1.点击选中设备设施或者作业活动分组下面的图标</li>
- <li>2.点击地图绘制点</li>
- <li>3.编辑信息保存风险点</li>
- </ul>
- </div>
- </fieldset>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- js部分 -->
- <script type="text/javascript" src="../../../../assets/libs/layui/layui.js"></script>
- <script type="text/javascript" src="../../../../assets/js/common.js?v=312"></script>
- <script type="text/javascript" src="../../../../assets/libs/jquery/jquery-3.2.1.min.js"></script>
- <script src="../../../../assets/libs/leaflet/leaflet.js"></script>
- <script src="../../../../assets/libs/leaflet/leaflet-draw/leaflet.draw-src.js"></script>
- <script src="../../../../assets/libs/leaflet/leaflet-draw/local.js"></script>
- <script src="../../../../assets/libs/leaflet/proj4-compressed.js"></script>
- <script src="../../../../assets/libs/leaflet/proj4leaflet.js"></script>
- <script type="text/html" id="upTpl">
- <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form">
- <div class="layui-form-item">
- <label class="layui-form-label w-padding">名称:</label>
- <div class="layui-input-block">
- <input name="entMapName" id="entMapName" placeholder="请输入名称" type="text" class="layui-input"/>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-padding">地图类型:</label>
- <div class="layui-input-block">
- <select id="useType" name="useType">
- <option value="">请选择</option>
- <option value="1">四色风险地图</option>
- <option value="2">示意图</option>
- <option value="3">点位图</option>
- </select>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-padding">背景图:</label>
- <div class="layui-input-block" id="uploadImg">
- <div class="layui-upload-drag">
- <i class="layui-icon"></i>
- <p>点击上传,或将文件拖拽到此处</p>
- </div>
- <img src="" id="vMapImg" width="100px">
- </div>
- <input name="mapImg" id="mapImg" type="hidden" class="layui-input">
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-padding">序号:</label>
- <div class="layui-input-block">
- <input name="sortNo" id="sortNo" placeholder="请输入序号" type="number" min="1" class="layui-input"/>
- </div>
- </div>
- <div class="layui-form-item text-right">
- <button class="layui-btn" lay-filter="modelSubmit" lay-submit>保存</button>
- <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
- </div>
- </form>
- </script>
- <script>
- var resultData;
- var imgPath, viewImgPath, map;
- var entMapList;
- var loadFlag = true;
- layui.use(['index', 'layer', 'form', 'table', 'util', 'admin', 'zTree', 'uParas', '_groupTree', 'element', 'laydate', 'notice', '_zTree', 'upload'], function () {
- var $ = layui.jquery;
- var layer = layui.layer;
- var element = layui.element;
- var form = layui.form;
- var index = layui.index;
- var table = layui.table;
- var util = layui.util;
- var admin = layui.admin;
- var uParas = layui.uParas;
- var _groupTree = layui._groupTree;
- var laydate = layui.laydate;
- var notice = layui.notice;
- var _zTree = layui._zTree;
- var upload = layui.upload;
- date = new Date();
- var insTb = {
- reload: function (obj, p) {
- $.getJSON(uParas.baseUrl + "/ent/riskPoint/riskPointLvCount", {gId: $("#groupId").val()}, function (result) {
- if (result.code == 1) {
- var allCount = 0, lv1Count = 0, lv2Count = 0, lv3Count = 0, lv4Count = 0;
- $.each(result.data, function (i, field) {
- if (field.riskPointLevel == 1) {
- lv1Count = field.lvCount;
- }
- if (field.riskPointLevel == 2) {
- lv2Count = field.lvCount;
- }
- if (field.riskPointLevel == 3) {
- lv3Count = field.lvCount;
- }
- if (field.riskPointLevel == 4) {
- lv4Count = field.lvCount;
- }
- if (field.riskPointLevel != null) {
- allCount += field.lvCount;
- }
- });
- $(".risk_point_dot.level1_").html(lv1Count);
- $(".risk_point_dot.level2_").html(lv2Count);
- $(".risk_point_dot.level3_").html(lv3Count);
- $(".risk_point_dot.level4_").html(lv4Count);
- $(".risk_point_dot.level_").html(allCount);
- setTimeout(function () {
- loadMapData.init(_riskPointType, uParas, riskPointLevelFunc, _zTree);
- }, 1000)
- }
- });
- }
- }
- _groupTree.init(insTb);
- var entMapId = uParas.getUrlParam("entMapId");
- if (entMapId != null && entMapId != undefined) {
- $("#entMapId").val(entMapId);
- }
- // 加载地图数据
- function requestMapData() {
- $.getJSON(uParas.baseUrl + "/ent/map/getList", {mapType: 2, useType: 3}, function (result) {
- var entMap;
- if (result.data != null) {
- entMapList = result.data;
- if (entMapId != null && entMapId != undefined) {
- $.each(result.data, function (i, field) {
- if (field.mapId.toString() === entMapId) {
- imgPath = field.mapRasterLayer;
- uParas.initSimpleSelectX("entMapList", "formFilter", result, "mapName", "mapId", entMapId);
- return;
- }
- });
- } else {
- entMap = result.data[0];
- imgPath = entMap.mapRasterLayer;
- uParas.initSimpleSelectX("entMapList", "formFilter", result, "mapName", "mapId", entMap.mapId);
- $("#entMapId").val(entMap.mapId);
- }
- }
- });
- }
- requestMapData();
- var url = uParas.baseUrl + "/ent/dangerSource/query?limit=1000";
- /*初始化危险源数据*/
- $.getJSON(url, function (result) {
- resultData = result;
- loadDangerSource(result, 6);
- uParas.cache("dangerSourceList", result.data);
- });
- //监听下拉选择
- form.on('select(entMapList)', function (data) {
- if (data.value != "") {
- $.each(entMapList, function (i, field) {
- if (field.mapId.toString() === data.value) {
- imgPath = field.mapRasterLayer;
- return;
- }
- });
- $("#entMapId").val(data.value);
- myBmap.clearMapController();
- myBmap.init(form, uParas, riskPointLevelFunc, _zTree);
- loadMapData.init(_riskPointType, uParas, riskPointLevelFunc, _zTree);
- }
- });
- // 渲染laydate
- var myDate = new Date();
- laydate.render({
- elem: '#activeStartTime',
- format: 'yyyy-MM-dd HH:mm:ss',
- type: 'datetime',
- min: myDate.toLocaleString()
- });
- laydate.render({
- elem: '#activeEndTime',
- format: 'yyyy-MM-dd HH:mm:ss',
- type: 'datetime',
- min: myDate.toLocaleString()
- });
- //监听Tab切换,以改变地址hash值
- var _riskPointType;
- element.on('tab(dangerSource)', function () {
- var riskPointType = this.getAttribute('lay-id');
- loadDangerSource(resultData, riskPointType);
- });
- //监听是否激活
- form.on('radio(isActive)', function (data) {
- if (data.value == 0) {
- $("#activeTime").hide();
- } else {
- $("#activeTime").show();
- }
- });
- function loadDangerSource(result, riskPointType) {
- var out = {};
- var array = new Array();
- $.each(result.data, function (i, field) {
- if (field.riskPointType == riskPointType) {
- array.push(field);
- }
- });
- out.data = array;
- loadIcon(out, riskPointType);
- loadMapData.init(riskPointType, uParas, riskPointLevelFunc, _zTree);
- _riskPointType = riskPointType;
- }
- $('#showUploadDlg1').on('click', function () {
- saveMap(2);
- });
- $('#showUploadDlg2').on('click', function () {
- saveMap(3);
- });
- function saveMap(type) {
- admin.open({
- type: 1,
- title: '上传图片',
- content: $('#upTpl').html(),
- success: function (layero, index) {
- form.render();
- upload.render({
- elem: '#uploadImg'
- , url: uParas.baseUrl + '/admin/uploadImages'
- , done: function (res) {
- $("#mapImg").val(res.data[0]);
- $("#vMapImg").attr("src", uParas.baseUrl + res.data[0]);
- }
- });
- var url = uParas.baseUrl + '/ent/map/save';
- form.on('submit(modelSubmit)', function (data) {
- layer.load();
- var obj = data.field;
- obj.mapRasterLayer = $("#mapImg").val();
- obj.mapType = type;
- obj.mapName = $("#entMapName").val();
- admin.req(url, obj, function (resp) {
- layer.closeAll('loading');
- if (resp.code == 1) {
- layer.close(index);
- layer.msg(resp.msg);
- requestMapData();
- } else {
- layer.msg(resp.msg);
- }
- }, 'POST');
- return false;
- });
- }
- });
- }
- /**
- * 1f 2J
- * @param resp
- * @param type
- * @param ulDivName
- */
- function loadIcon(resp, type) {
- var defImgPath = "";
- var jobPng = "../../../../assets/images/icon/job.png";
- var facilityPng = "../../../../assets/images/icon/facility.png";
- // if (type == "1") {
- defImgPath = facilityPng;
- // } else {
- // defImgPath = jobPng;
- // }
- var li = "";
- $.each(resp.data, function (i, field) {
- var riskPointLevel = riskPointLevelFunc(field.dangerSourceLevel);
- var imgPath = field.dangerImg;
- if (imgPath == null || imgPath == "") {
- imgPath = defImgPath;
- } else {
- imgPath = imgPath;
- }
- if (field.parentDangerSrcId == -1) {
- if (field.riskCount == field.riskCountParent) {
- li += '<li class="iconCategory">' + field.dangerSrcName + '</li>';
- li += `<li><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon">
- <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}"></a>
- <span>${field.dangerSrcName}</span>${riskPointLevel}</li>`;
- } else {
- li += '<li class="iconCategory">' + field.dangerSrcName + '</li>';
- $.each(resp.data, function (i, _field) {
- if (field.dangerSrcId == _field.parentDangerSrcId) {
- riskPointLevel = riskPointLevelFunc(_field.dangerSourceLevel);
- li += `<li><a href="javascript:;" id="${_field.dangerSrcId}" class="marker-icon">
- <img src="${imgPath}" id="${_field.dangerSrcId}" type="${type}" lv="${_field.dangerSourceLevel}" name="${_field.dangerSrcName}"></a>
- <span>${_field.dangerSrcName}</span>${riskPointLevel}</li>`;
- }
- });
- }
- } else {
- li += `<li><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon">
- <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}"></a>
- <span>${field.dangerSrcName}</span>${riskPointLevel}</li>`;
- }
- });
- if (type === "2") {
- $("#jobIconList").html('');
- $("#jobIconList").append(li);
- } else {
- $("#facilityIconList").html('');
- $("#facilityIconList").append(li);
- }
- }
- function riskPointLevelFunc(value) {
- var opts = '<div class="riskPointLevel">';
- if (value == 1) {
- opts += "<div class='notify'><span class='heartbit'></span><span><img src='../../../../assets/images/lv/red.png' style='width: 28px;height: 28px;'/></span></div>";
- } else if (value == 2) {
- opts += "<img src='../../../../assets/images/lv/orange.png' style='width: 28px;height: 28px;'/>";
- } else if (value == 3) {
- opts += "<img src='../../../../assets/images/lv/yellow.png' style='width: 28px;height: 28px;'/>";
- } else if (value == 4) {
- opts += "<img src='../../../../assets/images/lv/blue.png' style='width: 28px;height: 28px;'/>";
- } else {
- opts += "无";
- }
- opts += "</div>"
- return opts;
- }
- $("#deleteMarker_").click(function () {
- layer.confirm('确定要删除么?', {
- skin: 'layui-layer-admin',
- shade: .1
- }, function (i) {
- $.getJSON(uParas.baseUrl + "/ent/riskPoint/delete/" + $("#riskPointId").val(), {}, function (result) {
- layer.closeAll();
- if (result.code == 1) {
- notice.msg(result.msg, {icon: 1});
- $(".icon-form-box").hide();
- $("#info").show();
- setTimeout(function () {
- loadMapData.init(_riskPointType, uParas, riskPointLevelFunc, _zTree);
- }, 1000)
- }
- });
- });
- })
- setTimeout(function () {
- myBmap.init(form, uParas, riskPointLevelFunc, _zTree);
- }, 1000);
- });
- var myBmap = {
- mapContainer: "map", //地图容器
- mapTile: "http://online{s}.map.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2&udt=20181205", //切片图层
- myIcon: null, //保存创建的icon
- myMarker: null, //保存自己创建marker
- myMarkerType: 0, //marker类型
- myMarkerId: null, //markerId
- isSave: true, //是否保存标记
- checkedIcon: null, //保存选中的icon
- title: null,
- deleteMarkerId: null, //保存删除得markerId
- myMarkerGroup: L.layerGroup(),
- myMarkerGroupInit: L.layerGroup(),
- mapControl: null, // 地图控制器,用来清除叠加控制
- data: {},
- plotLayer: null,
- init: function (form, uParas, riskPointLevelFunc, _zTree) {
- _form = form;
- var _this = this;
- // 初始化默认操作
- this.clearPlotLayer() // 默认清空绘制点位
- this.myMarkerGroup.clearLayers(); // 图层
- this.isSave = true
- clearForm()
- //初始化地图
- var map_type = 2;
- if (map_type == 4) {
- baidu_map();
- } else {
- image_map();
- }
- // 增加区域绘制工具栏
- this.plotLayer = plotLayer = this.plotLayer != null ? this.plotLayer : L.featureGroup(), map.addLayer(plotLayer);
- var e = {
- position: "topright",
- draw: {
- polyline: {shapeOptions: {color: "#0000ff", weight: 3}},
- polygon: {allowIntersection: !0, showArea: !0, shapeOptions: {color: "#0000ff", weight: 2}},
- rectangle: {shapeOptions: {color: "#0000ff", weight: 2}},
- circle: false,
- circlemarker: false,
- marker: false
- },
- edit: {
- featureGroup: plotLayer,
- remove: !0,
- edit: false
- }
- }, n = mapControl = new L.Control.Draw(e);
- map.addControl(n)
- function draw_createdHandler(t) {
- t.layerType;
- var o = t.layer;
- plotLayer.addLayer(o)
- var all = o.toGeoJSON();
- var drawIds = $("#drawIds").val();
- $("#drawIds").remove();
- if (drawIds != undefined) {
- drawIds = drawIds + "#" + JSON.stringify(all.geometry.coordinates) + ";" + all.geometry.type;
- } else {
- drawIds = JSON.stringify(all.geometry.coordinates) + ";" + all.geometry.type
- }
- $(".my-marker-type").append('<input type="hidden" id="drawIds" name="drawIds" value="' + drawIds + '">');
- }
- function draw_deletedHandler(t) {
- $("#drawIds").remove();
- }
- // baidu_map()
- //地图鼠标事件
- map.off('click').on('click', function (e) {
- var point = [];
- if (_this.myIcon != null) {
- var myIcon1 = L.icon({
- iconUrl: _this.myIcon,
- iconSize: [40, 40],
- // iconAnchor: [0, 0]
- })
- // console.log(myIcon1);
- _this.myIcon = null; //将myIcon 置为null 防止鼠标在地图上移动或者点击再次做绘制
- point.push(e.latlng.lat, e.latlng.lng);
- _this.myMarker = L.marker([e.latlng.lat, e.latlng.lng], {icon: myIcon1});
- _this.myMarker.on('click', markerClick); //标记点击事件
- //_this.myMarker.addTo(map); //添加marker到地图上
- _this.myMarkerGroup.addLayer(_this.myMarker);
- _this.myMarkerGroup.addTo(map);
- _this.deleteMarkerId = _this.myMarker._leaflet_id; //保存当前markerId
- clearForm(); //清空函数
- $("#my-marker").append(_this.checkedIcon); //在表单中进行回显
- $("#my-marker-title").append(_this.title); //在表单中进行回显
- $("#markerType").html('矿下交通库');
- $(".my-marker-type").append('<input type="hidden" id="type" name="type" value="' + _this.data.type + '">');
- var latlngArray = "[" + e.latlng.lat + "," + e.latlng.lng + "]";
- $(".my-marker-type").append('<input type="hidden" id="latlng" name="latlng" value="' + latlngArray + '">');
- $(".my-marker-type").append('<input type="hidden" id="dangerSourceId" name="dangerSourceId" value="' + _this.myMarkerId + '">');
- $(".my-marker-type").append('<input type="hidden" id="riskPointMinLevel" name="riskPointMinLevel" value="' + _this.data.riskPointMinLevel + '">');
- map.on(L.Draw.Event.CREATED, draw_createdHandler), map.on(L.Draw.Event.DELETED, draw_deletedHandler)
- $(".icon-form-box").show();
- $("#info").hide();
- $("#deleteMarker_").hide();
- $("#deleteMarker").show();
- var inGroupNumber = {
- reload: function (obj) {
- uParas.initFormSelects("liablePerson", uParas.baseUrl + '/admin/common/getUsersByGroupId?gId=' + obj.where.groupId, "accountRealName", "aId");
- }
- }
- _zTree._init('/admin/common/getGroupLists', 'gId', 'groupParent', 'groupName', 'gId', 0, 'groupTree_', inGroupNumber, 'menuContent_', 'liableGroupIdName', 'liableGroupId');
- }
- })
- //左侧icon得点击事件
- $(".icon-box-ul").off('click').on('click', 'a', function (event) {
- if (_this.isSave) {
- _this.isSave = false;
- var curParent = $(event.currentTarget).parent();
- var tarSrc = $(event.target).attr('src');
- var title = $(event.target).attr('name');
- var id = $(event.target).attr('id');
- var type = $(event.target).attr('type');
- var riskPointMinLevel = $(event.target).attr('lv');
- _this.data.riskPointMinLevel = riskPointMinLevel;
- _this.data.type = type;
- $('.icon-active').removeClass('icon-active');
- $(event.currentTarget).addClass('icon-active');
- _this.myIcon = tarSrc;
- //复制icon进行拖动
- _this.myMarkerId = id;
- // _this.myMarkerType = type;
- _this.checkedIcon = '<img src="' + tarSrc + '" width="40px" height="40px"/>';
- // //console.log(_this.checkedIcon)
- _this.title = title;
- } else {
- layer.msg('请先保存标记!');
- }
- })
- _form.on('submit(saveMarker)', function (data) {
- var sendData = data.field;
- if (sendData.type == undefined || sendData.type == null) {
- layer.msg("请先绘制风险点!");
- return;
- }
- if (sendData.riskPointName == "") {
- layer.msg("请输入名称!");
- return;
- }
- sendData.riskPointType = sendData.type;
- // sendData.drawIds = $("#drawIds").val();
- sendData.riskPointMinLevelSon = $("#riskPointMinLevelSon").val();
- // sendData.dangerSourceIds = $("#dangerSourceIds").val();
- // console.log(sendData);
- $.ajax({
- type: "post",
- url: uParas.baseUrl + "/ent/riskPointMap/saveDangerSourceMap",
- data: sendData,
- dataType: "json",
- success: function (result) {
- if (result.code === 1) {
- layer.msg("保存成功");
- _this.isSave = true;
- $(".my-marker-box>ul>li:not(:last-child)").remove();
- if (map._layers[_this.deleteMarkerId] != null) {
- map.removeLayer(map._layers[_this.deleteMarkerId]);
- }
- clearForm(); //清空函数
- setTimeout(function () {
- loadMapData.init(sendData.type, uParas, riskPointLevelFunc, _zTree);
- }, 1000)
- $(".icon-form-box").hide();
- $("#info").show();
- } else {
- layer.msg(result.msg);
- }
- }
- });
- });
- // 标记click事件
- function markerClick(e) {
- _this.deleteMarkerId = e.target._leaflet_id;
- }
- //删除marker事件
- $("#deleteMarker").click(function () {
- _this.isSave = true;
- $(".my-marker-box>ul>li:not(:last-child)").remove();
- if (map._layers[_this.deleteMarkerId] != null) {
- map.removeLayer(map._layers[_this.deleteMarkerId]);
- }
- plotLayer.clearLayers();
- clearForm(); //清空函数
- });
- // 添加标注
- $("#addMarker").click(function () {
- layerOpen();
- })
- // 删除单个标记
- $(".my-marker-box>ul").on('click', 'span', function (e) {
- $(e.target).parent().remove();
- var eles = $(".my-marker-box>ul>li");
- var ids = '';
- var lv = 4;
- $.each(eles, function (index, item) {
- var id = $(item).find('img').attr('id');
- var lvSon = $(item).find('img').attr('lv');
- if (id != undefined) {
- ids += id + ",";
- if (Number(lvSon) < Number(lv)) {
- lv = lvSon;
- }
- }
- });
- $("#dangerSourceIds").remove();
- $("#riskPointMinLevelSon").remove();
- $(".my-marker-type").append('<input type="hidden" id="riskPointMinLevelSon" name="riskPointMinLevelSon" value="' + lv + '">');
- $(".my-marker-type").append('<input type="hidden" id="dangerSourceIds" name="dangerSourceIds" value="' + ids + '">');
- })
- //底图为图片
- function image_map() {
- if (map == undefined || map._loaded == undefined) {
- map = L.map(_this.mapContainer, {
- crs: L.CRS.Simple,
- center: L.latLng(50.5, 30.5),
- minZoom: 0,
- zoom: 0,
- attributionControl: false
- });
- } else {
- loadFlag = false;
- }
- var yx = L.latLng;
- var xy = function xy(x, y) {
- if (L.Util.isArray(x)) {
- return yx(x[1], x[0]);
- }
- return yx(y, x);
- };
- // map.eachLayer(function (layer) {
- // map.removeLayer(layer);
- // });
- map.addLayer(_this.myMarkerGroupInit);
- map.addLayer(_this.myMarkerGroup);
- // var bounds = [xy(-600, -600), xy(300, 300)];
- var bounds = [xy(-1000, -500), xy(1000, 500)];
- L.imageOverlay(imgPath, bounds).addTo(map);
- map.fitBounds(bounds);
- }
- //底图为百度地图
- function baidu_map() {
- var maxZoom = 26;
- var crs = new L.Proj.CRS('EPSG:3395',
- '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs', {
- resolutions: function () {
- level = 19;
- var res = [];
- res[0] = Math.pow(2, 18);
- for (var i = 1; i < level; i++) {
- res[i] = Math.pow(2, (18 - i))
- }
- return res;
- }(),
- origin: [0, 0],
- bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
- });
- var image = new L.TileLayer(_this.mapTile, {
- maxZoom: maxZoom,
- minZoom: 10,
- subdomains: [0, 1, 2],
- tms: true
- });
- map = L.map(_this.mapContainer, {
- crs: crs,
- layers: [image]
- });
- map.setView([34.474387, 109.490437], 14);
- }
- function clearForm() {
- $("#my-marker").html(""); //清除icon;
- $('.icon-active').removeClass('icon-active'); //移除已选class
- $(".my-marker-type>input").remove(); //移除标记类型中得input
- $("#markerType").html(""); //清空标记类型
- $("#riskPointName").val(""); //清空标记类型
- $(".my-marker-box>ul>li:not(:last-child)").remove();
- $("#drawIds").remove();
- $("#drawType").remove();
- $("#my-marker-title").html("");
- $("#riskPointDesc").val('');
- $("#activeStartTime").val('');
- $("#activeEndTime").val('');
- $("#riskPointPlaces").val('');
- $('#liableGroupIdName').val('');
- $('#liablePerson').html('');
- }
- function layerOpen() {
- var outIds = $("#dangerSourceId").val();
- if ($("#dangerSourceIds").val() != undefined) {
- outIds += "," + $("#dangerSourceIds").val();
- }
- if (outIds == undefined) {
- outIds = new Array();
- }
- var defImgPath = "";
- var jobPng = "../../../../assets/images/icon/job.png";
- var facilityPng = "../../../../assets/images/icon/facility.png";
- //var dangerSourceList = layui.data(uParas.tableName).dangerSourceList;
- var html = '<div class="">';
- html += '<div class="danger-src-date popup-icon-box" style="width: 550px;float: left;margin-left: 20px;"><ul>';
- $.each(resultData.data, function (i, field) {
- var type = field.riskPointType;
- var riskPointLevel = riskPointLevelFunc(field.dangerSourceLevel);
- var imgPath = field.dangerImg;
- if (type == 1) {
- defImgPath = facilityPng;
- } else {
- defImgPath = jobPng;
- }
- if (imgPath == null || imgPath == "") {
- imgPath = defImgPath;
- } else {
- imgPath = uParas.baseUrl + imgPath;
- }
- var id = field.dangerSrcId;
- if (field.riskPointType == 1) {
- if (outIds.indexOf(id) == -1) {
- if (field.parentDangerSrcId == -1) {
- if (field.riskCount == field.riskCountParent) {
- html += '<li class="iconCategory_">' + field.dangerSrcName + '</li>';
- html += `<li onclick="iconClick(this)"><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon"><span style='font-size: 18px;margin-top: 10px;'>✦ </span>
- <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}" style='width: 25px;height: 25px;'></a>
- <span style="margin-left: 10px;color: #0c5df1;">${field.dangerSrcName}</span>${riskPointLevel}</li>`;
- } else {
- html += '<li class="iconCategory_">' + field.dangerSrcName + '</li>';
- }
- } else {
- html += `<li onclick="iconClick(this)"><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon"><span style='font-size: 18px;margin-top: 10px;'>✦ </span>
- <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}" style='width: 25px;height: 25px;'></a>
- <span style="margin-left: 10px;color: #0c5df1;">${field.dangerSrcName}</span>${riskPointLevel}</li>`;
- }
- }
- }
- });
- html += '</ul></div>';
- html += '<div class="danger-src-date popup-icon-box" style="float: left;width: 550px;"><ul>';
- $.each(resultData.data, function (i, field) {
- var type = field.riskPointType;
- var riskPointLevel = riskPointLevelFunc(field.dangerSourceLevel);
- var imgPath = field.dangerImg;
- if (type == 1) {
- defImgPath = facilityPng;
- } else {
- defImgPath = jobPng;
- }
- if (imgPath == null || imgPath == "") {
- imgPath = defImgPath;
- } else {
- imgPath = uParas.baseUrl + imgPath;
- }
- var id = field.dangerSrcId;
- if (field.riskPointType == 2) {
- if (outIds.indexOf(id) == -1) {
- if (field.parentDangerSrcId == -1) {
- if (field.riskCount == field.riskCountParent) {
- html += '<li class="iconCategory_">' + field.dangerSrcName + '</li>';
- html += `<li onclick="iconClick(this)"><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon"><span style='font-size: 18px;margin-top: 10px;'>➢ </span>
- <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}" style='width: 25px;height: 25px;'></a>
- <span style="margin-left: 10px;color: #0c5df1;">${field.dangerSrcName}</span>${riskPointLevel}</li>`;
- } else {
- html += '<li class="iconCategory_">' + field.dangerSrcName + '</li>';
- }
- } else {
- html += `<li onclick="iconClick(this)"><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon"><span style='font-size: 18px;margin-top: 10px;'>➢ </span>
- <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}" style='width: 25px;height: 25px;'></a>
- <span style="margin-left: 10px;color: #0c5df1;">${field.dangerSrcName}</span>${riskPointLevel}</li>`;
- }
- }
- }
- });
- html += '</ul></div></div>';
- layer.open({
- title: '【设备设施】' + '<span style="margin-left: 470px;">【作业活动】</span>',
- btn: ['确定', '取消'],
- type: 1,
- area: ['1200px', '60%'], //宽高
- content: html,
- yes: yes
- });
- }
- function yes(index) {
- var eles = $(".popup-icon-box>ul>li");
- var li = '';
- var ids = '';
- var lv = 4;
- $.each(eles, function (index, item) {
- if ($(item).hasClass('icon-active')) {
- var imgSrc = $(item).find('img').attr('src');
- var id = $(item).find('img').attr('id');
- var title = $(item).find('img').attr('name');
- var div = $(item).find('div').html();
- var lvSon = $(item).find('img').attr('lv');
- li += '<li><img src="' + imgSrc + '" id="' + id + '"lv=' + lvSon + ' ><span>x</span><p>' + title + '</p><div class="riskPointLevel">' + div + '</div></li>';
- if (id != undefined) {
- ids += id + ",";
- if (Number(lvSon) < lv) {
- lv = lvSon;
- }
- }
- }
- });
- $("#myMarkerBox>ul").prepend(li);
- if ($("#dangerSourceIds").val() != undefined) {
- ids += $("#dangerSourceIds").val();
- }
- $("#dangerSourceIds").remove();
- $("#riskPointMinLevelSon").remove();
- $(".my-marker-type").append('<input type="hidden" id="riskPointMinLevelSon" name="riskPointMinLevelSon" value="' + lv + '">');
- $(".my-marker-type").append('<input type="hidden" id="dangerSourceIds" name="dangerSourceIds" value="' + ids + '">');
- layer.close(index);
- }
- },
- clearPlotLayer: function () {
- if (this.plotLayer != null) {
- this.plotLayer.clearLayers()
- }
- },
- clearMapController() { // 清除地图控制器
- map.removeControl(mapControl)
- }
- }
- var loadMapData = {
- jobPng: "../../../../assets/images/icon/job.png",
- facilityPng: "../../../../assets/images/icon/facility.png",
- init: function (type, uParas, riskPointLevelFunc, _zTree) {
- var _uParas = uParas;
- var riskPointLevelFunc = riskPointLevelFunc;
- var _zTree = _zTree;
- var jobIcon = L.icon({
- iconUrl: loadMapData.jobPng,
- iconSize: [38, 45],
- popupAnchor: [0, -16]
- });
- var facilityIcon = L.icon({
- iconUrl: loadMapData.facilityPng,
- iconSize: [38, 45],
- popupAnchor: [0, -16]
- });
- function icon(imgUrl) {
- return L.icon({
- iconUrl: imgUrl,
- iconSize: [38, 45],
- popupAnchor: [0, -16]
- });
- }
- initMapData(type, uParas);
- function initMapData(type, uParas) {
- var groupId = $("#groupId").val();
- if (type == undefined) {
- type = 6
- } else {
- myBmap.myMarkerGroupInit.clearLayers();
- }
- myBmap.myMarkerGroupInit.clearLayers();
- var entMapId = $("#entMapId").val();
- $.getJSON(uParas.baseUrl + "/ent/riskPointMap/getRiskPointMap", {
- riskPointType: type,
- gId: groupId,
- entMapId: entMapId
- }, function (result) {
- if (result.code == 1) {
- $.each(result.data, function (index, item) {
- var markerData = item.markerData;
- if (markerData != null) {
- var optionsData = {
- mapId: item.id,
- riskPointId: item.riskPointId,
- type: type,
- title: item.markerTitle
- };
- if (item.dangerImg != null && item.dangerImg != "") {
- optionsData.iconUrl = imgPathFun(item.dangerImg, type);
- } else {
- if (type === 2) {
- optionsData.iconUrl = loadMapData.jobPng;
- } else {
- optionsData.iconUrl = loadMapData.facilityPng;
- }
- }
- if (item.markerType == 3) {
- var data = new Array();
- $.each($.parseJSON(markerData), function (index, item) {
- data[index] = new Array(item[1], item[0]);
- });
- L.polygon(data, optionsData).addTo(myBmap.myMarkerGroupInit).bindPopup(item.markerTitle).on('click', onMapClick);
- } else if (item.markerType == 1) {
- if (item.dangerImg != null && item.dangerImg != "") {
- optionsData.icon = icon(uParas.baseUrl + item.dangerImg);
- } else {
- if (type == 2) {
- optionsData.icon = jobIcon;
- } else {
- optionsData.icon = facilityIcon;
- }
- }
- L.marker($.parseJSON(markerData), optionsData).addTo(myBmap.myMarkerGroupInit).bindPopup(item.markerTitle).on('click', onMapClick);
- } else if (item.markerType == 2) {
- var data = new Array();
- $.each($.parseJSON(markerData), function (index, item) {
- data[index] = new Array(item[1], item[0]);
- });
- L.polyline(data, optionsData).addTo(myBmap.myMarkerGroupInit).bindPopup(item.markerTitle).on('click', onMapClick);
- }
- }
- });
- }
- });
- }
- function imgPathFun(imgPath, type) {
- var defImgPath = "";
- var jobPng = "../../../../assets/images/icon/job.png";
- var facilityPng = "../../../../assets/images/icon/facility.png";
- if (type == "1") {
- defImgPath = facilityPng;
- } else {
- defImgPath = jobPng;
- }
- if (imgPath == null || imgPath == "") {
- return defImgPath;
- } else {
- if (imgPath.indexOf("http:") != -1) {
- defImgPath = imgPath;
- } else {
- defImgPath = uParas.baseUrl + imgPath;
- }
- }
- return defImgPath;
- }
- function onMapClick(e) {
- $(".icon-form-box").show();
- $("#info").hide();
- var options = e.target.options;
- var data = {};
- data.mapId = options.mapId;
- data.riskPointId = options.riskPointId;
- $("#deleteMarker").hide();
- $("#deleteMarker_").show();
- $("#my-marker").html('<img src="' + options.iconUrl + '"/>');
- $("#markerType").html(options.type == 2 ? '作业活动' : '设备设施');
- $("#riskPointName").val(options.title);
- $.getJSON("/ent/riskPointMap/findMapDataById", data, function (result) {
- if (result.code == 1) {
- var item = result.data[0];
- var index = item.dangerSourceIds;
- var arr = new Array();
- if (index != null) {
- if (index.indexOf(',') != -1) {
- arr = index.split(',');
- } else {
- arr = [index];
- }
- }
- $("#riskPointPlaces").val(item.riskPointPlaces);
- $("#riskPointDesc").val(item.riskPointDesc);
- $("#activeEndTime").val(item.activeEndTime);
- $("#activeStartTime").val(item.activeStartTime);
- $("#my-marker-title").html("");
- $("#my-marker-title").append(item.dangerSrcName);
- $("#type").remove();
- $(".my-marker-type").append('<input type="hidden" id="type" name="type" value="' + options.type + '">');
- $("#riskPointId").remove();
- $(".my-marker-type").append('<input type="hidden" id="riskPointId" name="riskPointId" value="' + item.riskPointId + '">');
- $("#dangerSourceId").remove();
- $(".my-marker-type").append('<input type="hidden" id="dangerSourceId" name="dangerSourceId" value="' + item.dangerSrcId + '">');
- $("#riskPointMinLevel").remove();
- $(".my-marker-type").append('<input type="hidden" id="riskPointMinLevel" name="riskPointMinLevel" value="' + item.riskPointLevel + '">');
- if (arr.length > 0) {
- var majorIndex = arr.indexOf(item.dangerSrcId + "");
- if (majorIndex > -1) {
- arr.splice(majorIndex, 1);
- }
- $("#dangerSourceIds").remove();
- $(".my-marker-type").append('<input type="hidden" id="dangerSourceIds" name="dangerSourceIds" value="' + arr.join(',') + '">');
- }
- $(".my-marker-box>ul>li:not(:last-child)").remove();
- var li = '';
- var _lv = 4;
- var dangerSourceList = layui.data(_uParas.tableName).dangerSourceList;
- $.each(arr, function (i, field) {
- $.each(dangerSourceList, function (index, item) {
- if (item.dangerSrcId == field) {
- var title = item.dangerSrcName;
- var lvSon = item.dangerSourceLevel;
- if (lvSon < _lv) {
- _lv = lvSon;
- }
- var div = riskPointLevelFunc(lvSon);
- var imgPath = imgPathFun(item.dangerImg, item.riskPointType);
- li += '<li><img src="' + imgPath + '" id="' + field + '" lv=' + lvSon + ' ><span>x</span><p>' + title + '</p><div class="riskPointLevel">' + div + '</div></li>';
- return;
- }
- });
- });
- $("#riskPointMinLevelSon").remove();
- $(".my-marker-type").append('<input type="hidden" id="riskPointMinLevelSon" name="riskPointMinLevelSon" value="' + _lv + '">');
- $("#myMarkerBox>ul").prepend(li);
- myBmap.data.type = options.type;
- $("#liableGroupIdName").val(item.groupName);
- $("#liableGroupId").val(item.liableGroupId);
- if (item.liableGroupId != null) {
- var inGroupNumber = {
- reload: function (obj) {
- uParas.initFormSelects("liablePerson", uParas.baseUrl + '/admin/common/getUsersByGroupId?gId=' + obj.where.groupId, "accountRealName", "aId");
- }
- }
- _zTree._init('/admin/common/getGroupLists', 'gId', 'groupParent', 'groupName', 'gId', 0, 'groupTree_', inGroupNumber, 'menuContent_', 'liableGroupIdName', 'liableGroupId');
- uParas.initFormSelects("liablePerson", uParas.baseUrl + '/admin/common/getUsersByGroupId?gId=' + item.liableGroupId, "accountRealName", "aId", item.personList);
- }
- }
- });
- }
- }
- }
- function iconClick(e) {
- $(e).toggleClass('icon-active')
- }
- </script>
- </body>
- </html>
|