南昌市物联网技防平台-前端
liuyg
2021-04-24 0a6ef5b319ab9e18405a4f115a3c852955533194
Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue
3 files modified
208 ■■■■■ changed files
public/map/widgets/securityMap/SecurityMap.css 9 ●●●●● patch | view | raw | blame | history
public/map/widgets/securityMap/SecurityMap.js 181 ●●●●● patch | view | raw | blame | history
src/views/clientManagement/clientManagement.vue 18 ●●●● patch | view | raw | blame | history
public/map/widgets/securityMap/SecurityMap.css
@@ -52,14 +52,17 @@
.tips {
    width: 120px;
    height: 18px;
    height: 26px;
    background-color: #ffffff;
    position: absolute;
    display: none;
    border-radius: 5px;
    border-radius: 4px;
    border: 1px solid #3385FF;
}
.tips span {
    line-height: 18px;
    line-height: 26px;
    font-size: 10px;
    position: absolute;
    left: 7px;
}
public/map/widgets/securityMap/SecurityMap.js
@@ -135,6 +135,7 @@
        polygonFlag: false,
        editToolbar: null,
        addPolygonEntitys: null,
        addLineEntitys: null,
        //是否选中电子围栏区域
        isChecked: false,
@@ -185,6 +186,12 @@
                id: 'addPolygonEntitys'
            });
            // 添加线的图层
            this.addLineEntitys = new GraphicsLayer({
                id: 'addLineEntitys'
            });
            // 添加所有图层的地方
            this.entityPolygonAll = new GraphicsLayer({
                id: 'entityPolygonAll'
@@ -193,6 +200,7 @@
            this._map.addLayer(this.addEntitys);
            this._map.addLayer(this.addPolygonEntitys);
            this._map.addLayer(this.addLineEntitys);
            this._map.addLayer(this.entityPolygonAll);
        },
@@ -342,60 +350,70 @@
            //鼠标右击事件
            document.getElementById('mainMapWidget').onmousedown = function(event) {
                //去除系统默认右键功能
                event.preventDefault();
                document.oncontextmenu = function() {
                        //alert("当前页面不能使用右键!");
                        return false;
                    }
                    //event.preventDefault();
                if (event.button == 2) {
                    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: that.pathUrl + '/enclosure/enclosure/insertes',
                            type: 'POST',
                            dataType: 'JSON',
                            data: {
                                aname: realname,
                                anumber: anumber,
                                routeInfo: dataStr
                            },
                            success: function(result) {
                                if (result.code == 200) {
                                    layui.use('layer', function() {
                                            layui.layer.msg('新增电子围栏成功!')
                                        })
                                        //清除点信息
                                    that.polygonData = [];
                                    //新增按钮颜色改回
                                    $("#insertEngineeringMap").css("color", "#757575");
                                }
                        if (that.polygonData.length >= 2) {
                            // 勾画最后一个点
                            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: that.pathUrl + '/enclosure/enclosure/insertes',
                                type: 'POST',
                                dataType: 'JSON',
                                data: {
                                    aname: realname,
                                    anumber: anumber,
                                    routeInfo: dataStr
                                },
                                success: function(result) {
                                    if (result.code == 200) {
                                        layui.use('layer', function() {
                                                layui.layer.msg('新增电子围栏成功!')
                                            })
                                            //清除点信息
                                        that.polygonData = [];
                                        //新增按钮颜色改回
                                        $("#insertEngineeringMap").css("color", "#757575");
                                        //清空线图层信息
                                        that.addLineEntitys.clear();
                                        //修改电子围栏数据状态
                                        that.isEngineer = true;
                                        //修改电子围栏选中状态
                                        that.isChecked = false;
                                        //修改电子围栏编辑状态
                                        that.polygonFlag = false;
                                    }
                                }
                            })
                        }
                    }
                    //修改电子围栏数据状态
                    that.isEngineer = true;
                    //修改电子围栏选中状态
                    that.isChecked = false;
                    //修改电子围栏编辑状态
                    that.polygonFlag = false;
                }
            }
        },
@@ -406,8 +424,10 @@
            var self = this;
            self._map.onClick = mapClick;
            //点击事件
            function mapClick(evt) {
                //坐标格式转换
                var normalizedVal = webMercatorUtils.xyToLngLat(evt.mapPoint.x, evt.mapPoint.y);
                var y = self._map.toMap({
                    spatialReference: '4326',
@@ -415,7 +435,6 @@
                    x: evt.screenPoint.x,
                    y: evt.screenPoint.y,
                });
                // 编辑中的
                if (self.polygonFlag == true) {
@@ -459,10 +478,10 @@
            }
            // 提示信息
            // 鼠标移动监听事件
            $(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');
@@ -490,14 +509,35 @@
                        oDiv3.style.top = oEvent.clientY + scrollTop + 'px';
                        oDiv3.style.display = 'block';
                    }
                    //已经有一个点或以上
                    if (self.polygonData.length >= 1) {
                        //鼠标移动,上个点和当前点之间画线
                        //临时的线数据
                        var tempLineData = [];
                        //鼠标当前点的数据
                        var normalizedVal = webMercatorUtils.xyToLngLat(oEvent.originalEvent.mapPoint.x, oEvent.originalEvent.mapPoint.y);
                        //获取面数据
                        var polygonArr = self.polygonData;
                        //上个点的数据
                        var prevPointArr = polygonArr[self.polygonData.length - 1];
                        //封装数据
                        tempLineData.push([prevPointArr[0], prevPointArr[1]]);
                        tempLineData.push([normalizedVal[0], normalizedVal[1]]);
                        console.log(tempLineData, 123);
                        //画线
                        self.addLine(self.addLineEntitys, tempLineData);
                    }
                } else {
                    oDiv3.style.display = 'none';
                }
                //编辑电子围栏提示语
                if (that.editToolbarStatus) {
                    $("#securityMapTips4").css("width", "200px");
                    $("#securityMapTips4").css("height", "36");
                    $("#securityMapTips4").css("width", "220px");
                    $("#securityMapTips4").css("height", "40px");
                    $("#securityMapTips4").css("line-height", "20px");
                    $("#securityMapTips4 span").css("line-height", "20px");
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                    oDiv4.style.left = oEvent.clientX + scrollLeft + 15 + 'px';
@@ -510,12 +550,39 @@
            })
        },
        //新增线
        /**
         * 新增线图层
         * @param {*} entitys  addPolygonEntitys
         * @param {*} path  坐标点的数据
         */
        addPolyline: function(entitys, path) {
            entitys.clear();
            var polylineSymbol = new SimpleLineSymbol();
            polylineSymbol.color = [255, 0, 0, 1];
            polylineSymbol.width = 4;
            polylineSymbol.width = 2;
            var polyline = new Polyline({
                "paths": [path],
                "spatialReference": {
                    "wkid": 4326
                }
            });
            entitys.add(new Graphic(polyline, polylineSymbol));
        },
        /**
         * 新增线图层
         * @param {*} entitys  addLineEntitys
         * @param {*} path  坐标点的数据
         */
        addLine: function(entitys, path) {
            entitys.clear();
            var polylineSymbol = new SimpleLineSymbol();
            //var polylineSymbol = new SimpleMarkerSymbol();
            polylineSymbol.color = [255, 0, 0, 1];
            polylineSymbol.width = 2;
            polylineSymbol.style = "short-dot";
            var polyline = new Polyline({
                "paths": [path],
                "spatialReference": {
src/views/clientManagement/clientManagement.vue
@@ -488,13 +488,11 @@
            {
              label: "经度",
              hide: true,
              addDisplay: false,
              prop: "jd",
            },
            {
              label: "纬度",
              hide: true,
              addDisplay: false,
              prop: "wd",
            },
            {
@@ -570,7 +568,7 @@
      "form.map": {
        // form是表单或者表格绑定的数据集,v-model='form'
        handler(val) {
          if (val) {
            this.form.wd = val.latitude;
            this.form.jd = val.longitude;
@@ -582,12 +580,14 @@
      "form.oneId":{
        handler(val) {
          var that = this;
          getBaTree(val).then(res => {
            if (res) {
              that.form.onePhone = res.data.data.records[0].phone;
              that.form.oneContacts = res.data.data.records[0].name;
            }
          });
          if (val != null && val !=""){
            getBaTree(val).then(res => {
              if (res) {
                that.form.onePhone = res.data.data.records[0].phone;
                that.form.oneContacts = res.data.data.records[0].name;
              }
            });
          }
        },
      }
    },