zhaobao
/
layui_back


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660
							<!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/module/zTree/css/metroStyle/metroStyle.css"/>
    <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"/>
</head>
<style>
    .layui-table-cell {
        height: 52px;
        line-height: 52px;
    }
</style>
<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-body">
            <div class="layui-row">
                <!-- 左栏 -->
                <div class="layui-col-sm12 layui-col-md1 layui-col-lg2">
                    <div class="layui-card">
                        <div class="layui-card-body mini-bar zTree" id="treeTbTree" style="min-height:612px;">
                            <ul id="groupTree" class="ztree"></ul>
                        </div>
                    </div>
                </div>

                <!-- 右栏 -->
                <div class="layui-col-sm12 layui-col-md1 layui-col-lg10">
                    <div class="layui-tab layui-tab-brief" lay-filter="mapTab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">地图设定</li>
                            <li>部门图片</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <!-- 地图设定 -->
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <form id="modelRoleForm" lay-filter="modelRoleForm" class="layui-form">
                                            <input type="hidden" name="entMapId" id="entMapId">
                                            <input type="hidden" name="groupId" id="groupId">
                                            <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">
                                                        <select id="entMapList" name="entMapList"
                                                                lay-filter="entMapList" lay-verType="tips"
                                                                class="layui-input-block">
                                                            <option value="">选择背景图</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="map-container" id="map" style="height: 500px"></div>
                                            <div class="layui-form-item text-right">
                                                <button class="layui-btn" lay-filter="modelSubmitRole" lay-submit>保存
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <!-- 部门图片 -->
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <div class="layui-form toolbar">
                                            <div class="layui-form-item">
                                                <div class="layui-inline pull-right">
                                                    <button id="addImgBtn" class="layui-btn icon-btn">
                                                        <i class="layui-icon">&#xe654;</i>添加地图背景
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                        <table class="layui-table" id="datatable" lay-filter="datatable"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 上传地图表单弹窗 -->
<script type="text/html" id="addImgWin">
    <form id="modelForm" lay-filter="modelForm" class="layui-form model-form">
        <input type="hidden" id="gId" name="gId"/>
        <input type="hidden" id="imgPath" name="imgPath"/>
        <div class="layui-form-item">
            <label class="layui-form-label">地图名称</label>
            <div class="layui-input-block">
                <input name="imgName" placeholder="地图名称" type="text" class="layui-input" maxlength="20"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择地图</label>
            <div class="layui-input-block text-left">
                <button type="button" class="layui-btn" id="fileUploader">
                    <i class="layui-icon">&#xe67c;</i>上传附件
                </button>

                <div id="mapShow" style="background-color: lightgray;margin-top: 10px;height: 24px;display: none;">
                    <img src="" style="width: 20px;height: 20px;margin-top: 3px;margin-left: 10px;"/>
                    <a style="margin-top: 3px;margin-right: 10px;float: right;cursor: pointer;">删除</a>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="saveImgBtn" lay-submit id="saveImsgBtn" disabled>保存</button>
        </div>
    </form>
</script>

<!-- 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>
    var imgPath;
    var map;
    var entMapList;
    var loadFlag = true;
    var defGroupId = '';
    var entMapId = '';
    var map_type = '';
    var tabIndex = 0; // 选中tab的索引
    var gid; // 当前选择的部门id
    layui.use(['layer', 'form', 'uParas', 'admin', 'zTree', 'element', 'table', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var uParas = layui.uParas;
        var element = layui.element;
        defGroupId = uParas.getUrlParam("groupId");
        var table = layui.table;
        var upload = layui.upload;
//        //debugger
        $("#groupId").val(defGroupId);

        /********************************************************部门图片start******************************************/
        // 右侧tab
        // 监听tab切换
        element.on('tab(mapTab)', function (data) {
            tabIndex = data.index;
            if (tabIndex == 1) {
                reloadTable(gid);
            }
        });

        // 初始化上传组件
        function initUploader() {
            upload.render({
                elem: '#fileUploader',
                url: uParas.baseUrl + '/admin/uploadFile',
                accept: 'images',
                done: function (resp) {
//                    console.info(resp.data.path);
                    if (resp.data.path) {
                        layer.msg('上传成功！');
                        $('#imgPath').val(resp.data.path);
                        $('#saveImsgBtn').prop('disabled', false);

                        var mapShow = $('#mapShow');
                        mapShow.css('display', '');
                        mapShow.find('img').prop('src', uParas.baseUrl + resp.data.path);
                        mapShow.find('a').on('click', function () {
                            delImg(resp.data.path);
                        });
                    }
                },
                error: function () {

                }
            });
        }

        // 删除图片
        function delImg(imgPath) {
            layer.load();
            admin.req(uParas.baseUrl + '/ent/entMapImage/deleteImg?imgPath=' + imgPath,
                {},
                function (res) {
                    layer.closeAll("loading");
                    if (res.code == 1) {
                        layer.msg(res.msg);
                        $('#mapShow').css('display', 'none');
                    } else {
                        layer.msg(res.msg);
                    }
                    $('#saveImsgBtn').prop('disabled', true);
                },
                'post');
        }

        // 渲染部门图片表格
        var insTb = table.render({
            elem: '#datatable',
            url: uParas.baseUrl + '/ent/entMapImage/getByGid',
            page: true,
            cellMinWidth: 50,
            cols: [[
                {type: 'numbers', title: '序号'},
                {field: 'imgName', sort: false, title: '名称'},
                {
                    field: 'imgPath', sort: false, title: '图片',
                    templet: function (d) {
                        var src = uParas.baseUrl + d.imgPath;
                        var img = '<img style="width: 50px;height: 50px;" src="' + src + '">';
                        return img;
                    }
                },
//                {field: 'createdTime', sort: false, title: '添加时间', templet: '<div>{{ layui.util.toDateString(d.createdTime, "yyyy-MM-dd HH:mm:ss") }}</div>'},
                {
                    align: 'LEFT', title: '操作', width: 200,
                    templet: function () {
                        return setOperation();
                    }
                }
            ]]
        });

        // 设置"操作"列
        function setOperation() {
            var html = '';
            html += '<a class="layui-btn layui-btn-danger  layui-btn-xs" lay-event="del" style="background-color: indianred;">删除</a>';
            return html;
        }

        // 工具条点击事件
        table.on('tool(datatable)', function (obj) {
//            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent == 'edit') { // 修改
//                window.location.href = "./edit.html?deviceId=" + data.deviceId;
            } else if (layEvent == 'del') { // 删除
                doDel(obj);
            }
        });

        // 删除
        function doDel(obj) {
            layer.confirm(
                '确定要删除吗？',
                {
                    skin: 'layui-layer-admin',
                    shade: .1
                },
                function (i) {
                    layer.close(i);
                    layer.load();
                    admin.req(uParas.baseUrl + '/ent/entMapImage/delete?imgId=' + obj.data.imgId, {}, function (res) {
                        layer.closeAll();
                        if (res.code == 1) {
                            layer.msg(res.msg);
                            obj.del();
                        } else {
                            layer.msg(res.msg);
                        }
                    }, 'post');
                }
            );
        }

        // 打开添加图片窗口
        $('#addImgBtn').on('click', function () {
            if (gid == undefined) {
                layer.msg('请先选择一个部门！');
                return;
            }
            admin.open({
                title: '上传图片',
                type: 1,
                area: '500px', // ['500px', '220px'],
                content: $('#addImgWin').html(),
                success: function (layerObj, index) {
                    initUploader();
                    $('#modelForm #gId').val(gid);
                    var url = uParas.baseUrl + '/ent/entMapImage/add';
                    form.on('submit(saveImgBtn)', function (data) {
                        admin.req(url, data.field, function (response) {
                            layer.load();
                            if (response.code == 1) {
//                                layer.close();
                                layer.closeAll();
                                layer.msg(response.msg);
                                reloadTable(gid);
                            } else {
                                layer.msg(response.msg);
                            }
                        }, 'post');

                        return false;
                    });
                }
            });
        });

        // 刷新表格数据
        function reloadTable(gid) {
            insTb.reload({
                where: {
                    gid: gid
                }
            });
        }

        /********************************************************部门图片end********************************************/

            //左树设置
        var leftgroupTreeSetting = {
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "gId",
                        pIdKey: "groupParent",
                        rootPId: 0,
                    },
                    key: {
                        name: "groupName",
                        title: "groupName"
                    }
                },
                callback: {
                    onClick: leftNodeClick
                }
            };

        //树结点click
        function leftNodeClick(e, treeId, treeNode) {
            gid = treeNode.gId;
            if (tabIndex == 0) {
                initDispInfo(treeNode);
            } else {
                reloadTable(gid);
            }
        }

        //选择节点
        function selectNode() {
            var treeObj = $.fn.zTree.getZTreeObj("groupTree");
            var nodes = treeObj.getNodes();
            var defNode = null;

            if (defGroupId != null && defGroupId >= 0) {
                defNode = treeObj.getNodeByParam("gId", defGroupId);
            } else {
                if (nodes.length > 0) {
                    defNode = nodes[0];
                }
            }

            if (defNode != null) {
                treeObj.selectNode(defNode);
                treeObj.expandNode(defNode, true, false, false);
                initDispInfo(defNode);
            }
        }

        //初始化显示信息
        function initDispInfo(treeNode) {
            defGroupId = treeNode.gId;
            $("#groupId").val(defGroupId);
            if (entMapId != null && entMapId != '') {
                myBmap.init();
                gid = defGroupId;
            }
        }

        admin.req(uParas.baseUrl + '/ent/groupAccount/getGroupTreeList', {}, function (resp) {
            if (resp.code == 1) {
                var zNodes = resp.data;
                $.fn.zTree.init($('#groupTree'), leftgroupTreeSetting, zNodes);
                selectNode();
                layer.closeAll('loading');
            } else {
                layer.msg(resp.msg);
            }
        }, 'GET');


        $.ajaxSetup({async: false});
        $.getJSON(uParas.baseUrl + "/ent/map/getList", {mapType: 2}, function (result) {
            if (result.data != null) {
                entMapList = result.data;
                var entMap = result.data[0];
                imgPath = entMap.mapRasterLayer;
                uParas.initSimpleSelectX("entMapList", "modelRoleForm", result, "mapName", "mapId", entMap.mapId);
                $("#entMapId").val(entMap.mapId);
                entMapId = entMap.mapId;
                map_type = entMap.mapType;
            }
        });
        //监听下拉选择
        form.on('select(entMapList)', function (data) {
            //debugger
            $.each(entMapList, function (i, field) {
                if (field.mapId.toString() === data.value) {
                    imgPath = field.mapRasterLayer;
                    return;
                }
            });
            entMapId = data.value;
            $("#entMapId").val(data.value);
            myBmap.init();
        });

        form.on('submit(modelSubmitRole)', function (data) {
            //debugger
            //console.log(data.field);
            var layers = plotLayer.getLayers();
            var drawIds = '';
            if (layers.length <= 0) {
                layer.msg("请在图中完成标记");
                return;
            }
            layers.forEach(function (v) {
                v = v.toGeoJSON();
                //console.log(v);
                if (v.geometry.type == "Point") {
                    var data = new Array();
                    data[0] = v.geometry.coordinates[1];
                    data[1] = v.geometry.coordinates[0];
                    //drawIds = drawIds += JSON.stringify(data) + ";" + v.geometry.type + "#";
                    drawIds += JSON.stringify(data) + ";" + v.geometry.type + "#";
                } else {
                    //drawIds = drawIds += JSON.stringify(v.geometry.coordinates) + ";" + v.geometry.type + "#";
                    drawIds += JSON.stringify(v.geometry.coordinates) + ";" + v.geometry.type + "#";
                }
            });
            // data.field.riskPointId = riskPointId;
            data.field.drawIds = drawIds;
            data.field.entMapId = $("#entMapId").val();
            $.ajax({
                type: "post",
                url: "/ent/mapMarker/saveMapData",
                data: data.field,
                dataType: "json",
                success: function (result) {
                    if (result.code === 1) {
                        //parent.layer.closeAll();
                        layer.msg(result.msg);
                        //parent.closeReload();
                    } else {
                        layer.msg(result.msg);
                    }
                }
            });
            return false;
        });

        //myBmap.init();
    });

    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
        deleteMarkerId: null, //保存删除得markerId
        data: {},
        init: function () {
            var _this = this;
            //初始化地图
            if (map_type == 4) {
                baidu_map();
            } else {
                image_map();
            }

            // 增加区域绘制工具栏
            plotLayer = new 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: true,
                    Point: false
                },
                edit: {
                    featureGroup: plotLayer,
                    remove: !0,
                    edit: true
                }
            };
            var n = new L.Control.Draw(e);
            if (loadFlag) {
                map.addControl(n);
                map.on(L.Draw.Event.CREATED, draw_createdHandler);
            }

            function draw_createdHandler(t) {
                //debugger
                t.layerType;
                var o = t.layer;
                // 逻辑判断
                var layers = plotLayer.getLayers();
                var types = "";
                if (layers.length > 0) {
                    layers.forEach(function (v) {
                        types += v.toGeoJSON().geometry.type;
                    });
                    if (types.indexOf("Point") != -1) {
                        Point = 1
                    }
                }
                if (o.toGeoJSON().geometry.type == "Point" && Point == 0) {
                    plotLayer.addLayer(o);
                } else if (o.toGeoJSON().geometry.type != "Point") {
                    plotLayer.addLayer(o);
                }
            }

            //获取数据
            $.getJSON("/ent/mapMarker/getGroupMap/" + defGroupId + "/" + entMapId, null, function (result) {
                console.log("---------------");
                console.log(result.data);
                $.each(result.data, function (index, item) {
                    //console.log(item);
                    var markerData = item.mapMarkerData;
                    if (markerData != null) {
                        var optionsData = {
                            // riskPointId: item.riskPointId,
                            title: item.markerTitle
                        };
                        var layers;
                        if (item.mapMarkerType == 3) {
                            var data = new Array();
                            $.each($.parseJSON(markerData), function (index, item) {
                                data[index] = new Array(item[1], item[0]);
                            });
                            layers = L.polygon(data, optionsData);
                        } else if (item.mapMarkerType == 1) {
                            layers = L.marker($.parseJSON(markerData));
                        } else if (item.mapMarkerType == 2) {
                            var data = new Array();
                            $.each($.parseJSON(markerData), function (index, item) {
                                data[index] = new Array(item[1], item[0]);
                            });
                            layers = L.polyline(data, optionsData);
                        }
                        plotLayer.addLayer(layers);
                    }
                });
            });

            //底图为图片
            function image_map() {
                if (map != undefined && map != null) {
                    map.remove();
                }
                // 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: 4,
                    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);
                });
                var bounds = [xy(-600, -600), xy(300, 300)];
                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 iconClick(e) {
        $(e).toggleClass('icon-active')
    }
</script>

</body>
</html>