实时警情修改，处警队伍电子围栏功能实现

Administrator

2021-04-20 4a742cc4b21833e549c77391b9b369c6ea759884

实时警情修改，处警队伍电子围栏功能实现

 public/map/widgets/securityMap/SecurityMap.js

@@ -131,6 +131,19 @@
        addEntitys: null,
        entitysData: [],


        // 用来存储区域名称
        globalRegionName: null,

        // 用来区域得最大最小经纬度
        currentDrawing: [],

        // 存储新增点，线，面，数据的地方
        polygonData: [],
        polygonFlag: false,
        editToolbar: null,
        addPolygonEntitys: null,

        // 巡逻区域或者巡逻路线的描述
        routeOrRegionDescribe: null,

@@ -143,12 +156,13 @@
        y: 0,
        offset: null,
        moveThis: null,

        // 电子围栏需要新增的Id
        newElectronicFenceId: null,

        // 新增路线时，派发人员，人员名称，以及人员id
        peopleRealName: null,
        pepleRealId: null,
        anumber: null,
        realname: null,

        //存放聚合实体
        clusterLayer: null,
@@ -164,6 +178,7 @@
            this.addPolygonEntitys = new GraphicsLayer({
                id: 'addPolygonEntitys'
            });

            // 添加所有图层的地方
            this.entityPolygonAll = new GraphicsLayer({
                id: 'entityPolygonAll'
@@ -171,17 +186,13 @@


            this._map.addLayer(this.addEntitys);


            this._map.addLayer(this.addPolygonEntitys);
            this._map.addLayer(this.entityPolygonAll);

        },

        startup: function() {

            objThis._map.addLayer(objThis._siteLayer);

        },

        //根据key 取value值
@@ -189,17 +200,313 @@
            return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
        },

        //带有中文的解码
        getQueryString: function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return null;
        },

        //页面打开后，获取参数数据
        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({
                //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])]);
                                }
                            }
                            that.addPolygon(that.addPolygonEntitys, entityArr);
                        } else {
                            //如果无电子围栏信息，则提示请编辑电子围栏信息
                            //编辑好电子围栏信息后，将当前处警员的电子围栏信息保存到数据库
                            that.newElectronicFenceId = null;

                            layui.use('layer', function() {
                                layui.layer.msg('请开始划分电子围栏');
                            })
                            that.polygonFlag = true;
                            that.newElectronicFenceId = anumber;
                        }

                    }
                }
            })

            //调用点击事件
            that.clickHand();

            //鼠标右击事件
            document.getElementById('mainMapWidget').onmousedown = function(event) {
                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);
                        that.polygonData.push([normalizedVal[0], normalizedVal[1]]);
                        // 声明空字符串，存储数据
                        var dataStr = '';
                        var data = null;
                        if (that.patrolIndex == 1) {
                            that.addPolyline(that.addPolygonEntitys, that.polygonData);
                            // 获取数据
                            data = that.addPolygonEntitys.graphics[0].geometry.paths[0];
                        } else {
                            that.addPolygon(that.addPolygonEntitys, that.polygonData);
                            // 获取数据
                            data = that.addPolygonEntitys.graphics[0].geometry.rings[0];
                        }

                        // 组装数据
                        for (var i = 0; i < data.length; i++) {
                            dataStr += (data[i][0] + ' ' + data[i][1] + ',');
                        }
                        dataStr = dataStr.substring(0, dataStr.length - 1);

                        //将数据存入数据库
                        $.ajax({
                            //url: 'https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/updatee',
                            url: 'http://localhost:89/enclosure/enclosure/insertes',
                            type: 'POST',
                            dataType: 'JSON',
                            data: {
                                aname: realname,
                                anumber: anumber,
                                routeInfo: dataStr
                            },
                            success: function(result) {
                                if (result.code == 200) {}
                            }
                        })
                    }
                    that.polygonFlag = false;

                }
            }
        },

        close: function() {
        // 鼠标点击事件
        clickHand: function() {

            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',
                    type: "point",
                    x: evt.screenPoint.x,
                    y: evt.screenPoint.y,
                });


                // 编辑中的
                if (self.polygonFlag == true) {
                    if (self.polygonData.length == 0) {
                        self.polygonData.push([normalizedVal[0], normalizedVal[1]]);
                        self.addPoint(self.addPolygonEntitys, normalizedVal[0], normalizedVal[1]);
                    } else if (self.polygonData.length == 1) {
                        self.polygonData.push([normalizedVal[0], normalizedVal[1]]);
                        self.addPolyline(self.addPolygonEntitys, self.polygonData);
                        return;
                    } else if (self.polygonData.length > 1) {
                        self.polygonData.push([normalizedVal[0], normalizedVal[1]]);
                        self.addPolygon(self.addPolygonEntitys, self.polygonData);
                    }

                } else { // 不在编辑中
                    if (evt.graphic) { // 点击在图形上
                        // 保存当前点击得图形
                        // self.currentDrawing = evt.graphic;

                        self.modifyPolygon();

                        self.activateToolbar(evt.graphic);
                    } else { // 点击不在图形上

                        self.modifyPolygon()
                    }
                }

            }

            // 提示信息
            $(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);
                }

                if (self.tabIndex == 1 || self.tabIndex == 2) {

                    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,
                        })
                    } else {
                        $('.police-dispatching .tips').stop().hide();
                    }

                } else {
                    $('.police-dispatching .tips').stop().hide();
                }
            })
        },

        //新增线
        addPolyline: function(entitys, path) {
            entitys.clear();
            var polylineSymbol = new SimpleLineSymbol();
            polylineSymbol.color = [255, 0, 0, 1];
            polylineSymbol.width = 4;
            var polyline = new Polyline({
                "paths": [path],
                "spatialReference": {
                    "wkid": 4326
                }
            });

            entitys.add(new Graphic(polyline, polylineSymbol));
        },


        //编辑电子围栏（多边形）
        modifyPolygon: function() {
            var self = this;
            if (self.editToolbar != null) {
                //获取当前的多边形数据
                var polygon = self.editToolbar.getCurrentState();

                //释放编辑后
                self.editToolbar.deactivate();

                self.editToolbar = null;

                // 声明空字符串，存储数据
                var dataStr = '';

                // 获取数据
                var data = polygon.graphic.geometry.rings[0];

                // 组装数据
                for (var i = 0; i < data.length; i++) {
                    dataStr += (data[i][0] + ' ' + data[i][1] + ',');
                }
                dataStr = dataStr.substring(0, dataStr.length - 1);

                //更新电子围栏数据
                $.ajax({
                    //url: 'https://web.byisf.com/api/blade-jfpts/enclosure/enclosure/updatee',
                    url: 'http://localhost:89/enclosure/enclosure/updatee',
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        anumber: anumber,
                        routeInfo: dataStr
                    },
                    success: function(result) {
                        if (result.code == 200) {}
                    }
                })

            }
        },


        activateToolbar: function(graphic) {
            var tool = 0;

            this.editToolbar = new Edit(this._map);

            // if (registry.byId("tool_move").checked) {
            tool = tool | Edit.MOVE;
            // }
            // if (registry.byId("tool_vertices").checked) {
            tool = tool | Edit.EDIT_VERTICES;
            // }
            // if (registry.byId("tool_scale").checked) {
            tool = tool | Edit.SCALE;
            // }
            // if (registry.byId("tool_rotate").checked) {
            tool = tool | Edit.ROTATE;
            // }
            // enable text editing if a graphic uses a text symbol
            // if ( graphic.symbol.declaredClass === "esri.symbol.TextSymbol" ) {
            tool = tool | Edit.EDIT_TEXT;
            // }

            var options = {
                allowAddVertices: true,
                allowDeleteVertices: true,
                uniformScaling: true
            };
            this.editToolbar.activate(tool, graphic, options);

        },

        close: function() {},

        // 获取当前时间，以及昨天现在的时间
        getTime: function getTime() {
            var timestamp = Date.parse(new Date());
@@ -246,13 +553,12 @@
            pt.entityData = item;
            var graphic = new esri.Graphic(pt, symbol);
            entitys.add(graphic);


            entityContent.push(item);
        },

        //在地图上新增点
        addPoint: function(entitys, lgtd, lttd, img) {
            var symbol = new esri.symbol.PictureMarkerSymbol(img, 33, 48);
            var symbol = new esri.symbol.PictureMarkerSymbol(img, 22, 22);
            var pt = new Point(lgtd, lttd, new SpatialReference({
                wkid: 4326
            }));
@@ -260,99 +566,20 @@
            entitys.add(graphic);
        },

        addPoints: function(entitys, lgtd, lttd, img) {
            var symbol = new esri.symbol.PictureMarkerSymbol(img, 33, 48);
            var pt = new Point(lgtd, lttd, new SpatialReference({
                wkid: 4326
            }));
            var graphic = new esri.Graphic(pt, symbol);
            entitys.add(graphic);
        },

        //聚合图层事件
        flareClusterLayer: function(datas) {

            console.log(1);

            var that = this;

            var preClustered = false;
            var displaySingleFlaresAtCount = 10;
            var areaDisplayMode = "";
            // var allData = JSON.parse(DATA);
            // DataManager.setData(allData);

            //init the layer, more options are available and explained in the cluster layer constructor
            that.clusterLayer = new FlareClusterLayer({
                id: "flare-cluster-layer",
                spatialReference: new esri.SpatialReference({
        //绘制多边形
        addPolygon: function(entitys, rings) {
            entitys.clear();
            var polygonSymbol = new SimpleFillSymbol();
            polygonSymbol.color = [24, 255, 243, 0.411];
            var polygon = new Polygon({
                "rings": [rings],
                "spatialReference": {
                    "wkid": 4326
                }),
                subTypeFlareProperty: "facilityType",
                singleFlareTooltipProperty: "name",
                displaySubTypeFlares: true,
                displaySingleFlaresAtCount: displaySingleFlaresAtCount,
                flareShowMode: "mouse",
                preClustered: preClustered,
                clusterRatio: 75,
                clusterAreaDisplay: areaDisplayMode,
                clusteringBegin: function(e) {
                    console.log(e, "clustering begin");
                },
                clusteringComplete: function() {
                    console.log("clustering complete");
                }
            });

            //set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on.
            var defaultSym = new PictureMarkerSymbol("./images/jingbaored.png", 33, 48).setOffset(0, 15);
            var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
            var xlSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 32, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
            var lgSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));
            var mdSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8]));
            var smSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 52, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));
            renderer.addBreak(0, 19, smSymbol);
            renderer.addBreak(20, 150, mdSymbol);
            renderer.addBreak(151, 1000, lgSymbol);
            renderer.addBreak(1001, Infinity, xlSymbol);

            that.clusterLayer.setRenderer(renderer); //use standard setRenderer.

            //set up a popup template
            var template = new PopupTemplate({
                title: "{name}",
                fieldInfos: [{
                        fieldName: "facilityType",
                        label: "Facility Type",
                        visible: true
                    },
                    {
                        fieldName: "postcode",
                        label: "Post Code",
                        visible: true
                    },
                    {
                        fieldName: "isOpen",
                        label: "Opening Hours",
                        visible: true
                    }
                ]
            });

            //clusterLayer.infoTemplate = template;
            that._map.infoWindow.titleInBody = false;

            that._map.addLayer(that.clusterLayer);

            //var data = DataManager.getData();
            that.clusterLayer.addData(datas);

        },
        clearLayer: function() {
            var that = this;
            that._map.removeLayer(that.clusterLayer);
            that.clusterLayer = null;
            entitys.add(new Graphic(polygon, polygonSymbol));
        }

    });
    return Widget;
});

 src/views/realTimePolice/real.vue

@@ -76,7 +76,6 @@
                    @click="handleExport">导出
        </el-button>
        <el-button type="warning"
        style="display:none"
                    size="small"
                    plain
                    icon="el-icon-download"
@@ -1129,6 +1128,18 @@
        };
      });
    },
    getStartTime(){
           if (this.$route.query.startTime != undefined && this.$route.query.startTime != null && this.$route.query.startTime != "" ) {
             return this.$route.query.startTime
           }
           return '';
      },
      getEndTime(){
           if (this.$route.query.endTime != undefined && this.$route.query.endTime != null && this.$route.query.endTime != "" ) {
             return this.$route.query.endTime
           }
           return '';
      },
    handleManage(row) {
      this.form = row;
      this.peopleList = [
@@ -1475,7 +1486,6 @@
          window.open(`http://localhost:8108/ureport/excel?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`);
        });
      }

  },
};
</script>

 src/views/security/security.vue

@@ -248,13 +248,11 @@
            });
          });
      },
      //打开地图
      handleMap(row) {
        
        var that =this;
        that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${row.jd}&wd=${row.wd}`;
        that.baseUrl = `/map/index.html?ISinit=1&openid=SecurityMap&jd=${row.jd}&wd=${row.wd}&code=${row.code}&name=${row.realName}`;
        this.showMap=true;
        console.log(this.$refs,111);
        console.log(this.$refs.securityMap,222);
        this.$refs.securityMap.onload = () => {
          if (window.frames[0].init) {
            window.frames[0].init("SecurityMap", {