南昌市物联网技防平台-前端
shuishen
2021-04-22 48d7249fc672823beddb321a3ca7ea57cb3e4d21
Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue
3 files modified
4 files added
287 ■■■■■ changed files
public/map/images/add-0.png patch | view | raw | blame | history
public/map/images/del.png patch | view | raw | blame | history
public/map/images/delete.png patch | view | raw | blame | history
public/map/images/insert.png patch | view | raw | blame | history
public/map/widgets/securityMap/SecurityMap.css 34 ●●●●● patch | view | raw | blame | history
public/map/widgets/securityMap/SecurityMap.js 236 ●●●●● patch | view | raw | blame | history
public/map/widgets/securityMap/template.html 17 ●●●●● patch | view | raw | blame | history
public/map/images/add-0.png
public/map/images/del.png
public/map/images/delete.png
public/map/images/insert.png
public/map/widgets/securityMap/SecurityMap.css
@@ -0,0 +1,34 @@
.mapBtn {
    background-color: #ffffff;
    width: 14vh;
    height: 4vh;
    position: relative;
    top: 3vh;
    right: -45vh;
    border-radius: 5px;
}
.insBtn {
    float: left;
}
.mapBtn a {
    line-height: 4vh;
    font-size: 13px;
    text-align: center;
    color: #757575;
    position: relative;
    left: 1.2vh;
    letter-spacing: 1.5px;
}
.mapBtn img {
    position: relative;
    left: 1.2vh;
    top: -1px;
}
a:hover {
    color: #3385FF;
    cursor: pointer;
}
public/map/widgets/securityMap/SecurityMap.js
@@ -144,8 +144,14 @@
        editToolbar: null,
        addPolygonEntitys: null,
        // 巡逻区域或者巡逻路线的描述
        routeOrRegionDescribe: null,
        //是否选中电子围栏区域
        isChecked: false,
        //当前处警员是否已有电子围栏
        isEngineer: false,
        //当前处警员是否有位置信息
        isPosition: true,
        // 用来记录巡逻区域或者巡逻路线的下标的
        patrolIndex: 0,
@@ -156,6 +162,10 @@
        y: 0,
        offset: null,
        moveThis: null,
        //基础路径
        pathUrl: "http://localhost:89",
        //pathUrl:"https://web.byisf.com/api/blade-jfpts",
        // 电子围栏需要新增的Id
        newElectronicFenceId: null,
@@ -193,6 +203,55 @@
        startup: function() {
            objThis._map.addLayer(objThis._siteLayer);
            var that = this;
            //删除电子围栏点击事件
            $(".mapBtn .delete").click(function() {
                //需选中电子围栏,然后进行删除
                if (that.isChecked) {
                    that.addPolygonEntitys.clear();
                    //删除数据库数据
                    //更新电子围栏数据
                    $.ajax({
                            url: that.pathUrl + '/enclosure/enclosure/deleteByAnumber',
                            type: 'POST',
                            dataType: 'JSON',
                            data: {
                                anumber: anumber
                            },
                            success: function(result) {
                                if (result.code == 200) {}
                            }
                        })
                        //修改围栏状态
                    that.isEngineer = false;
                } else {
                    layui.use('layer', function() {
                        layui.layer.msg('请先选中需要删除的电子围栏');
                    })
                }
            })
            //新增电子围栏
            $('.mapBtn .insert').click(function() {
                if (that.isPosition) {
                    if (that.isEngineer) {
                        layui.use('layer', function() {
                            layui.layer.msg('已存在电子围栏');
                        })
                    } else {
                        layui.use('layer', function() {
                            layui.layer.msg('请开始划分电子围栏');
                        })
                        that.polygonFlag = true;
                    }
                } else {
                    layui.use('layer', function() {
                        layui.layer.msg('当前处警员无位置信息,不能划分电子围栏');
                    })
                }
            })
        },
        //根据key 取value值
@@ -211,55 +270,59 @@
        //页面打开后,获取参数数据
        open: function() {
            var that = this;
            //获取父页面传过来的参数
            var lgtd = that.getQueryStringByKey('jd');
            var lttd = that.getQueryStringByKey('wd');
            if (lgtd == null || lgtd == "") {
                return;
            }
            anumber = that.getQueryStringByKey('code');
            realname = that.getQueryString('name');
            //所在位置标记
            that.addPoint(that.addEntitys, lgtd, lttd, './images/security.png');
            //获取当前处警员的电子围栏信息
            $.ajax({
                url: 'https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/selectEnclosureDetail',
                //url: 'http://localhost:89/enclosure/enclosure/selectEnclosureDetail',
                type: 'GET',
                dataType: 'JSON',
                data: {
                    anumber: anumber
                },
                success: function(result) {
                    //如果已有电子围栏信息,展示出围栏区域,并且可以编辑
                    if (result.code == 200) {
                        if (JSON.stringify(result.data) != "{}") {
                            var entityArr = [];
                            var coordinate = result.data.coordinate.match(/\(([^)]*)\)/).toString();
                            var a = coordinate.indexOf("(");
                            var b = coordinate.indexOf(")");
                            coordinate = coordinate.substring(a + 1, b) + "";
                            if (coordinate && coordinate != '') {
                                coordinate = coordinate.split(',');
                                for (var i = 0; i < coordinate.length; i++) {
                                    entityArr.push([Number(coordinate[i].split(' ')[0]), Number(coordinate[i].split(' ')[1])]);
            //如果处警员的位置信息存在
            if (lgtd != null && lgtd != "") {
                //所在位置标记
                that.addPoint(that.addEntitys, lgtd, lttd, './images/security.png');
                //获取当前处警员的电子围栏信息
                $.ajax({
                    url: this.pathUrl + '/enclosure/enclosure/selectEnclosureDetail',
                    type: 'GET',
                    dataType: 'JSON',
                    data: {
                        anumber: anumber
                    },
                    success: function(result) {
                        //如果已有电子围栏信息,展示出围栏区域,并且可以编辑
                        if (result.code == 200) {
                            if (JSON.stringify(result.data) != "{}") {
                                var entityArr = [];
                                var coordinate = result.data.coordinate.match(/\(([^)]*)\)/).toString();
                                var a = coordinate.indexOf("(");
                                var b = coordinate.indexOf(")");
                                coordinate = coordinate.substring(a + 1, b) + "";
                                if (coordinate && coordinate != '') {
                                    coordinate = coordinate.split(',');
                                    for (var i = 0; i < coordinate.length; i++) {
                                        entityArr.push([Number(coordinate[i].split(' ')[0]), Number(coordinate[i].split(' ')[1])]);
                                    }
                                }
                                that.isEngineer = true;
                                that.addPolygon(that.addPolygonEntitys, entityArr);
                            } else {
                                //如果无电子围栏信息,则提示请编辑电子围栏信息
                                //编辑好电子围栏信息后,将当前处警员的电子围栏信息保存到数据库
                                that.newElectronicFenceId = null;
                                //that.polygonFlag = true;
                                that.newElectronicFenceId = anumber;
                            }
                            that.addPolygon(that.addPolygonEntitys, entityArr);
                        } else {
                            //如果无电子围栏信息,则提示请编辑电子围栏信息
                            //编辑好电子围栏信息后,将当前处警员的电子围栏信息保存到数据库
                            that.newElectronicFenceId = null;
                            layui.use('layer', function() {
                                layui.layer.msg('请开始划分电子围栏');
                            })
                            that.polygonFlag = true;
                            that.newElectronicFenceId = anumber;
                        }
                    }
                }
            })
                })
            } else {
                //当前处警员没有位置信息,则默认定位到市中心位置
                that.isPosition = false;
                var lgtd1 = '115.862321';
                var lttd1 = '28.591108';
                //所在位置标记
                that.addPoint(that.addEntitys, lgtd1, lttd1, './images/security.png');
            }
            //调用点击事件
            that.clickHand();
@@ -298,8 +361,8 @@
                        //将数据存入数据库
                        $.ajax({
                            url: 'https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/insertes',
                            //url: 'http://localhost:89/enclosure/enclosure/insertes',
                            url: that
                                .pathUrl + '/enclosure/enclosure/insertes',
                            type: 'POST',
                            dataType: 'JSON',
                            data: {
@@ -312,20 +375,25 @@
                            }
                        })
                    }
                    //修改电子围栏数据状态
                    that.isEngineer = true;
                    //修改电子围栏选中状态
                    that.isChecked = false;
                    //修改电子围栏编辑状态
                    that.polygonFlag = false;
                }
            }
        },
        // 鼠标点击事件
        clickHand: function() {
            var that = this;
            var self = this;
            self._map.onClick = mapClick;
            //点击事件
            function mapClick(evt) {
                debugger;
                var normalizedVal = webMercatorUtils.xyToLngLat(evt.mapPoint.x, evt.mapPoint.y);
                var y = self._map.toMap({
                    spatialReference: '4326',
@@ -354,11 +422,14 @@
                        // 保存当前点击得图形
                        // self.currentDrawing = evt.graphic;
                        that.isChecked = true;
                        self.modifyPolygon();
                        self.activateToolbar(evt.graphic);
                    } else { // 点击不在图形上
                        //修改电子围栏选中状态
                        that.isChecked = false;
                        self.modifyPolygon()
                    }
                }
@@ -386,30 +457,24 @@
                    x = ($(window).width() - 184);
                }
                if (self.tabIndex == 1 || self.tabIndex == 2) {
                if (self.polygonFlag == true) {
                    $('.securityMapTips').stop().show();
                    if (self.polygonFlag == true) {
                        $('.police-dispatching .tips').stop().show();
                        if (self.polygonData.length == 0) {
                            $('.police-dispatching .tips').text('单击左键开始绘制。');
                        } else {
                            if (e.clientY > ($(window).height() - 98)) {
                                y = ($(window).height() - 88);
                            }
                            $('.police-dispatching .tips').text('单击左键新增加点。单击右键完成绘制。');
                        }
                        $('.police-dispatching .tips').css({
                            'top': y,
                            'left': x,
                        })
                    if (self.polygonData.length == 0) {
                        $('.securityMapTips').text('单击左键开始绘制。');
                    } else {
                        $('.police-dispatching .tips').stop().hide();
                        if (e.clientY > ($(window).height() - 98)) {
                            y = ($(window).height() - 88);
                        }
                        $('.securityMapTips').text('单击左键新增加点。单击右键完成绘制。');
                    }
                    $('.securityMapTips').css({
                        'top': y,
                        'left': x,
                    })
                } else {
                    $('.police-dispatching .tips').stop().hide();
                    $('.securityMapTips').stop().hide();
                }
            })
        },
@@ -457,8 +522,7 @@
                //更新电子围栏数据
                $.ajax({
                    url: 'https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/updatee',
                    //url: 'http://localhost:89/enclosure/enclosure/updatee',
                    url: this.pathUrl + '/enclosure/enclosure/updatee',
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
@@ -507,44 +571,8 @@
        close: function() {},
        // 获取当前时间,以及昨天现在的时间
        getTime: function getTime() {
            var timestamp = Date.parse(new Date());
            // 当前时间
            var currentTime = new Date(timestamp);
            // 年
            var currentY = currentTime.getFullYear();
            // 月
            var currentM = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1;
            // 日
            var currentD = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
            // 时
            var currentH = currentTime.getHours() < 10 ? '0' + currentTime.getHours() : currentTime.getHours();
            // 分
            var currentDd = currentTime.getMinutes() < 10 ? '0' + currentTime.getMinutes() : currentTime.getMinutes();
            // 明天
            var tomorrowTime = new Date(timestamp - 60 * 60 * 24 * 1000);
            // 年
            var tomorrowY = tomorrowTime.getFullYear();
            // 月
            var tomorrowM = tomorrowTime.getMonth() + 1 < 10 ? '0' + (tomorrowTime.getMonth() + 1) : tomorrowTime.getMonth() + 1;
            // 日
            var tomorrowD = tomorrowTime.getDate() < 10 ? '0' + tomorrowTime.getDate() : tomorrowTime.getDate();
            // 时
            var tomorrowH = tomorrowTime.getHours() < 10 ? '0' + tomorrowTime.getHours() : tomorrowTime.getHours();
            // 分
            var tomorrowDd = tomorrowTime.getMinutes() < 10 ? '0' + tomorrowTime.getMinutes() : tomorrowTime.getMinutes();
            return {
                current: currentY + '-' + currentM + '-' + currentD + ' ' + currentH + ':' + currentDd,
                tomorrow: tomorrowY + '-' + tomorrowM + '-' + tomorrowD + ' ' + tomorrowH + ':' + tomorrowDd,
                month: currentM + currentD
            };
        },
        // 创建实体图层
        createEntitys: function(entitys, entityContent, name, item, lgtd, lttd, outlineColors) {
            var symbol = new esri.symbol.PictureMarkerSymbol(outlineColors, 33, 48);
            symbol.name = name;
            var pt = new Point(lgtd, lttd, new esri.SpatialReference({
public/map/widgets/securityMap/template.html
@@ -1 +1,16 @@
<div></div>
<div>
    <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>
        </div>
        <div class="delBtn">
            <img src="./images/del.png" style="width:14px;height:14px;">
            <a class="delete " id="securityMapClearMap ">删除</a>
        </div>
    </div>
    <!-- 提示语 -->
    <div class="securityMapTips">
    </div>
</div>