处警管理新增新增电子围栏时的提示语，新增编辑按钮，只有点了编辑按钮后才可编辑电子围栏

Administrator

2021-04-23 315a992040f91b5dc4742f6a34576157b568b803

处警管理新增新增电子围栏时的提示语，新增编辑按钮，只有点了编辑按钮后才可编辑电子围栏

 public/map/images/edit.png

 public/map/widgets/securityMap/SecurityMap.css

@@ -1,10 +1,10 @@
.mapBtn {
    background-color: #ffffff;
    width: 14vh;
    width: 20.4vh;
    height: 4vh;
    position: relative;
    top: 3vh;
    right: -45vh;
    right: -22vh;
    border-radius: 5px;
}

@@ -22,6 +22,10 @@
    letter-spacing: 1.5px;
}

.editBtn {
    float: left;
}

.mapBtn img {
    position: relative;
    left: 1.2vh;
@@ -31,4 +35,30 @@
a:hover {
    color: #3385FF;
    cursor: pointer;
}

.insBtn:hover {
    cursor: pointer;
    color: #3385FF;
}

.editBtn:hover {
    cursor: pointer;
}

.delBtn:hover {
    cursor: pointer;
}

.tips {
    width: 120px;
    height: 18px;
    background-color: #ffffff;
    position: absolute;
    display: none;
}

.tips span {
    line-height: 18px;
    font-size: 10px;
}

 public/map/widgets/securityMap/SecurityMap.js

@@ -142,6 +142,9 @@
        //当前处警员是否已有电子围栏
        isEngineer: false,

        //是否可编辑
        isEdit: false,

        // 用来记录巡逻区域或者巡逻路线的下标的
        patrolIndex: 0,

@@ -151,6 +154,9 @@
        y: 0,
        offset: null,
        moveThis: null,

        //按钮点击状态
        btnStatus: 0,

        //基础路径
        //pathUrl: "http://localhost:89",
@@ -196,7 +202,7 @@
            var that = this;

            //删除电子围栏点击事件
            $(".mapBtn .delete").click(function() {
            $(".mapBtn .delBtn").click(function() {
                //需选中电子围栏，然后进行删除
                layer.confirm('是否确认删除', {
                    btn: ['确定', '取消'], //按钮
@@ -225,7 +231,10 @@
            })

            //新增电子围栏
            $('.mapBtn .insert').click(function() {
            $('.mapBtn .insBtn').click(function() {
                //修改按钮样式
                $("#insertEngineeringMap").css("color", "#3385FF")
                    //判断
                if (that.isEngineer) {
                    layui.use('layer', function() {
                        layui.layer.msg('已存在电子围栏');
@@ -236,6 +245,17 @@
                    })
                    that.polygonFlag = true;
                }
            })


            //编辑电子围栏
            $('.mapBtn .editBtn').click(function() {
                $("#editEngineeringMap").css("color", "#3385FF");
                //修改为可编辑状态
                that.isEdit = true;
                layui.use('layer', function() {
                    layui.layer.msg('点击电子围栏图形即可编辑');
                })
            })

        },
@@ -307,13 +327,9 @@

            //鼠标右击事件
            document.getElementById('mainMapWidget').onmousedown = function(event) {
                //去除系统默认右键功能
                event.preventDefault();
                if (event.button == 2) {
                    if (that.polygonData.length < 2) {
                        layui.use('layer', function() {
                            layui.layer.msg('不能形成区域，请继续划分！！！')
                        })
                        return;
                    }
                    if (that.polygonFlag == true) {
                        // 勾画最后一个点
                        var normalizedVal = webMercatorUtils.xyToLngLat(event.mapPoint.x, event.mapPoint.y);
@@ -404,57 +420,58 @@

                        that.isChecked = true;

                        self.modifyPolygon();
                        //self.modifyPolygon();

                        self.activateToolbar(evt.graphic);
                        //进入编辑状态
                        //self.activateToolbar(evt.graphic);
                    } else { // 点击不在图形上
                        //修改电子围栏选中状态
                        that.isChecked = false;
                        self.modifyPolygon()
                    }

                    if (that.isEdit) {
                        that.isChecked = true;
                        self.modifyPolygon();
                        //进入编辑状态
                        self.activateToolbar(evt.graphic);
                    }
                }

            }

            // 提示信息
            $(document).off('mousemove').mousemove(function(e) {
                var y = e.clientY + 10;
                var x = e.clientX + 20;

                if (e.clientX < 40) {
                    var x = 40;
                }

                if (e.clientY < 42) {
                    y = 42;
                }

                if (e.clientY > ($(window).height() - 82)) {
                    y = ($(window).height() - 66);
                }

                if (e.clientX > ($(window).width() - 184)) {
                    x = ($(window).width() - 184);
                }

            $(document).off('mousemove').mousemove(function(ev) {
                var oEvent = ev || event;
                //鼠标移动
                var oDiv1 = document.getElementById('securityMapTips1');
                var oDiv2 = document.getElementById('securityMapTips2');
                var oDiv3 = document.getElementById('securityMapTips3');
                //开始编辑
                if (self.polygonFlag == true) {
                    $('.securityMapTips').stop().show();

                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                    if (self.polygonData.length == 0) {
                        $('.securityMapTips').text('单击左键开始绘制。');
                    } else {
                        if (e.clientY > ($(window).height() - 98)) {
                            y = ($(window).height() - 88);
                        }
                        $('.securityMapTips').text('单击左键新增加点。单击右键完成绘制。');
                        oDiv1.style.left = oEvent.clientX + scrollLeft + 15 + 'px';
                        oDiv1.style.top = oEvent.clientY + scrollTop + 'px';
                        oDiv1.style.display = 'block';
                    }

                    $('.securityMapTips').css({
                        'top': y,
                        'left': x,
                    })
                    if (self.polygonData.length == 1) {
                        oDiv1.style.display = 'none';
                        oDiv2.style.left = oEvent.clientX + scrollLeft + 15 + 'px';
                        oDiv2.style.top = oEvent.clientY + scrollTop + 'px';
                        oDiv2.style.display = 'block';
                    }

                    if (self.polygonData.length > 1) {
                        oDiv2.style.display = 'none';
                        oDiv3.style.left = oEvent.clientX + scrollLeft + 15 + 'px';
                        oDiv3.style.top = oEvent.clientY + scrollTop + 'px';
                        oDiv3.style.display = 'block';
                    }
                } else {
                    $('.securityMapTips').stop().hide();
                    oDiv3.style.display = 'none';
                }
            })
        },
@@ -510,10 +527,15 @@
                        routeInfo: dataStr
                    },
                    success: function(result) {
                        if (result.code == 200) {}
                        if (result.code == 200) {
                            layui.use('layer', function() {
                                layui.layer.msg('电子围栏修改成功!');
                            })
                            $("#editEngineeringMap").css("color", "#757575");
                            self.isEdit = false;
                        }
                    }
                })

            }
        },


 public/map/widgets/securityMap/template.html

@@ -2,15 +2,26 @@
    <div class="mapBtn">
        <div class="insBtn">
            <img src="./images/add-0.png" style="width:14px;height:14px;">
            <a class=" insert " id="insertEngineeringMap ">新增&nbsp;|&nbsp;</a>
            <a class=" insert " id="insertEngineeringMap">新增&nbsp;|&nbsp;</a>
        </div>
        <div class="editBtn">
            <img src="./images/edit.png" style="width:14px;height:14px;">
            <a class=" edit " id="editEngineeringMap">编辑&nbsp;|&nbsp;</a>
        </div>
        <div class="delBtn">
            <img src="./images/del.png" style="width:14px;height:14px;">
            <a class="delete " id="securityMapClearMap ">删除</a>
            <a class="delete " id="securityMapClearMap">删除</a>
        </div>
    </div>

    <!-- 提示语 -->
    <div class="securityMapTips">
    <div id="securityMapTips1" class="tips">
        <span>左键点击开始绘制</span>
    </div>
    <div id="securityMapTips2" class="tips">
        <span>左键以继续绘制</span>
    </div>
    <div id="securityMapTips3" class="tips">
        <span>右键点击完成绘制</span>
    </div>
</div>