From 7e12d01c85128ee6e6a269b7de6ed55f500648e0 Mon Sep 17 00:00:00 2001
From: jevononlie <728254585@qq.com>
Date: Wed, 22 May 2024 17:19:16 +0800
Subject: [PATCH] map

---
 jnpf-java-boot/jnpf-web/public/index.html     |   1 -
 .../src/views/stationarea/areaDialog.vue      | 167 ++++++++----------
 .../jnpf-web/src/views/stationarea/form.vue   |   9 +-
 .../jnpf-web/src/views/stationarea/index.vue  |   5 +-
 jnpf-java-boot/jnpf-web/vue.config.js         |   1 -
 5 files changed, 84 insertions(+), 99 deletions(-)

diff --git a/jnpf-java-boot/jnpf-web/public/index.html b/jnpf-java-boot/jnpf-web/public/index.html
index a8aacd1..dbcb372 100644
--- a/jnpf-java-boot/jnpf-web/public/index.html
+++ b/jnpf-java-boot/jnpf-web/public/index.html
@@ -20,7 +20,6 @@
   <!-- 先在vue的index.html里面引入腾讯地图包 -->
   <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=U24BZ-7UECT-ZSNXI-L3GJD-GZD3E-3YFF6&libraries=drawing"></script>
   <script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
-  <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=U24BZ-7UECT-ZSNXI-L3GJD-GZD3E-3YFF6"></script>
   <!-- <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=nYAafE0e8IXpGM0ykV3BO2k7CVRHI79Y"></script> -->
 </head>
 
diff --git a/jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue b/jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue
index 5fac379..90cba00 100644
--- a/jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue
+++ b/jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue
@@ -1,17 +1,14 @@
 <template>
-  <el-dialog title="电子围栏" :close-on-click-modal="false" :visible="true" top="10vh" width="90%" append-to-body
+  <el-dialog :title="title" :close-on-click-modal="false" :visible="true" top="10vh" width="90%" append-to-body
     modal-append-to-body :before-close="handleClose" class="my-dialog">
     <div class="cont">
       <div class="tips">
-        <p>1、绘制：鼠标左键点击及移动即可绘制图形; &nbsp;&nbsp; 2、结束绘制：鼠标左键双击即可结束绘制折线、多边形会自动闭合；圆形、矩形、椭圆单击即可结束;&nbsp;&nbsp;
-          3、中断：绘制过程中按下esc键可中断该过程</p>
+        <p>1、绘制：鼠标左键点击及移动即可绘制图形; &nbsp;&nbsp; 2、结束绘制：鼠标左键双击即可结束绘制折线、多边形会自动闭合；圆形、矩形、椭圆单击即可结束</p>
       </div>
       <div class="addpolygon">
         <div id="mapFencecontainer">
             <div class="mapBtn">
-              <el-button size="small" type="danger" @click="clearOverlays()">清除</el-button>
               <el-button size="small" type="primary" @click="sendLngLat">确认</el-button>
-              <el-button size="small" type="primary" @click="sendMsg">返回</el-button>
             </div>
         </div>
         <div class="loadMap" v-if="loadMapFlag">稍等，拼命加载地图中...</div>
@@ -22,15 +19,14 @@
 </template>
 
 <script>
-let  marker, polygon, drawingManager, lngLat,ap, map;
+let  marker, polygon, drawingManager, lngLat,ap, map, MultiPolygon;
 let path = [];// 设置回显数据参数
 import axios from 'axios'
 // let map, marker, polygon, drawingManager, lngLat; // 地图，坐标点，多边形初始化加载，多边形绘制，多边形每个点的集成数组
 let overlaysArray = []; // 标注点集合,绘制多边形时的集合
-let path4 = [];// 设置回显数据参数
 // 默认展示假数据回显参数
 export default {
-  props: ['position', 'areaMapInfo'],
+  props: ['position', 'areaMapInfo', 'mode'],
   data() {
     return {
       longitude: '',
@@ -48,9 +44,16 @@ export default {
           }
       ],
       editor: null,
-      loadMapFlag: true
+      loadMapFlag: true,
+      targetAreaPath: []
     };
   },
+  computed: {
+    title() {
+      const str = this.mode == 'add' ? '新建电子围栏' : '编辑电子围栏'
+      return str
+    }
+  },
   mounted() {
     this.$nextTick(() => {
       // this.init();
@@ -62,19 +65,16 @@ export default {
       this.$emit('areaVisibleChange', false)
     },
     clearOverlays() {
-       polygon.setMap(null);
+      polygon.setMap(null);
     },
     sendLngLat() {
-
-    },
-    sendMsg() {
-
+      this.$emit('areaVisibleChange', false, this.targetAreaPath)
     },
     /**
      * //定位获得当前位置信息
      */
     getMyLocation() {
-        var geolocation = new qq.maps.Geolocation('U24BZ-7UECT-ZSNXI-L3GJD-GZD3E-3YFF6', '易回收后台');
+        const geolocation = new qq.maps.Geolocation('U24BZ-7UECT-ZSNXI-L3GJD-GZD3E-3YFF6', '易回收后台');
         geolocation.getLocation(this.showPosition, this.showErr);
     },
     showPosition(position) {
@@ -94,64 +94,38 @@ export default {
      * 位置信息在地图上展示
      */
     setMapData() {
-      var myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);
+      const myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude);
       console.log("当前位置："+this.position.latitude, this.position.longitude, myLatlng)
-      var myOptions = {
+      const myOptions = {
           zoom: 16, 
           center: myLatlng, 
           mapTypeId: qq.maps.MapTypeId.ROADMAP  
       }
-      console.log(myOptions)
       //获取dom元素添加地图信息
       map = new qq.maps.Map(document.getElementById('mapFencecontainer'), myOptions)
       //给定位的位置添加图片标注
       marker = new qq.maps.Marker({
           position: myLatlng,
           map: map,
+          draggable: false
       })
-      this.mouseClick()
-      /**绘制围栏 */
-      this.addpolygon();
       //查询所有后台围栏
       this.getAllPolygons()
     },
-    
-     /**
-     * 鼠标点击获取标记位置事件
-     */
-    mouseClick () {
-        const _this = this 
-        qq.maps.event.addListener(map, 'click', function (event) {
-            if(!marker) {
-                marker=new qq.maps.Marker({
-                    position: event.latLng,
-                    map:map
-                })
-                return
-            }
-            marker.setPosition(event.latLng) 
-            console.log("鼠标点击位置:"+event.latLng)
-            _this.position.latitude = event.latLng.getLat();
-            _this.position.longitude = event.latLng.getLng();
-            _this.existsPolygon();
-        })
-    },
     /**绘制围栏 */
     addpolygon() {
       const _this = this
+      const drawingControl = this.mode == 'add' ? true : false
       drawingManager = new window.qq.maps.drawing.DrawingManager({
           drawingMode: window.qq.maps.drawing.OverlayType.null, // 默认选中绘制方式
-          drawingControl: true,
+          drawingControl: drawingControl,
           drawingControlOptions: {
               position: window.qq.maps.ControlPosition.TOP_CENTER,
               // 表头显示区域
               drawingModes: [
-                  // window.qq.maps.drawing.OverlayType.MARKER,
-                  // window.qq.maps.drawing.OverlayType.CIRCLE,
-                  window.qq.maps.drawing.OverlayType.POLYGON,
-                  // window.qq.maps.drawing.OverlayType.POLYLINE,
-                  window.qq.maps.drawing.OverlayType.RECTANGLE
-                  ]
+                // window.qq.maps.drawing.OverlayType.MARKER,
+                window.qq.maps.drawing.OverlayType.POLYGON,
+              ]
           },
           markerOptions: {
               visible: false
@@ -163,30 +137,39 @@ export default {
               fillColor: new window.qq.maps.Color(202, 67, 58, 0.1),
               clickable: false
           },
-          // // 圆形样式
-          // circleOptions: {
-          //     fillColor: new window.qq.maps.Color(255, 208, 70, 0.3),
-          //     strokeColor: new window.qq.maps.Color(88, 88, 88, 1),
-          //     strokeWeight: 3,
-          //     clickable: false
-          // }
       });
       drawingManager.setMap(map);
       window.qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
          console.log('overlaycomplete', event)
-          // clearOverlays(overlaysArray)
-          lngLat = [];
-          // overlaysArray.push(event.overlay);
-          // for (const item of event.overlay.getPath().elems) {
-          //     const lng = item.getLng();
-          //     const lat = item.getLat();
-          //     lngLat.push({
-          //       lat: lat,
-          //       lng: lng
-          //     });
-          // }
-          console.log("绘图后获得的："+JSON.stringify(lngLat,null,4)); // 获得相应的经纬度值
+        //  polygon.setMap(null);
+          const lngLat = [];
+          for (const item of event.overlay.getPath().elems) {
+              const lng = item.getLng();
+              const lat = item.getLat();
+              lngLat.push({
+                lat: lat,
+                lng: lng
+              });
+          }
+          console.log("绘图后获得的：",JSON.stringify(lngLat,null,4), polygon); // 获得相应的经纬度值
+          _this.showPolygons(lngLat, true)
       });
+
+      // 编辑
+      window.qq.maps.event.addListener(polygon, 'adjustNode',function (event) {
+        console.log(99999, event)
+        const lngLat = [];
+        for (const item of event.path.elems) {
+            const lng = item.getLng();
+            const lat = item.getLat();
+            lngLat.push({
+              lat: lat,
+              lng: lng
+            });
+        }
+        this.targetAreaPath = lngLat
+        console.log("adjustNode后获得的："+JSON.stringify(lngLat,null,4)); // 获得相应的经纬度值
+      })
     },
     /** 
      * 获取所有围栏
@@ -250,7 +233,16 @@ export default {
               ]
             }
         ]
+        if (this.mode == 'add') {
+           _this.polygonPath = _this.polygonPath.filter(e => !e.editable)
+        }
         _this.showArrayPolygon()
+        
+        /**绘制围栏 */
+        this.addpolygon();
+    
+
+       
     },
     /**循环调用显示围栏方法 */
     showArrayPolygon(){
@@ -263,6 +255,16 @@ export default {
             _this.showpolygons(path, polygonpath.editable)
         }
     },
+    showMultiPolygons(path, editable) {
+        const _this = this
+        MultiPolygon = new TMap.MultiPolygon({
+            map: map,
+            editable,
+            strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
+            fillColor: new qq.maps.Color(202, 67, 58, 0.1)
+        });
+        MultiPolygon.setPath(path);
+    },
     /**
      * 显示围栏
      */
@@ -275,31 +277,10 @@ export default {
             fillColor: new qq.maps.Color(202, 67, 58, 0.1)
         });
         polygon.setPath(path);
-    },
-    /**
-     * 当前位置是否在围栏中
-     */
-    existsPolygon() {
-        const _this = this;
-        // console.log("当前位置:"+ _this.position.latitude,_this.position.longitude)
-        axios.post(url.url + "/v1/polygons/existPolygons", {
-            lng: _this.position.longitude,  //如果改为在getMyLocation中调用该方法，该位置应该变为 obj.longitude和obj.latitude
-            lat: _this.position.latitude,
-        }).then(function (response) {
-            // response.data以http or https开头，打开支付页面 
-            if(response.data.indexOf("http") == 0){
-                  window.location.href = response.data;
-            } else {
-                _this.$notify({
-                    title: '定位失败',
-                    message: '经度: '+ _this.position.longitude + ", 纬度:" + _this.position.latitude + "，" + "信息:" + response.data,
-                    type: 'success'
-                })
-            }
-        }).catch(function (error) {
-            console.error(error);
-        });
-    },
+        // if (editable && this.mode == 'add') {
+        //    polygon.setMap(map);
+        // }
+    }
   }   
 };
 </script>
diff --git a/jnpf-java-boot/jnpf-web/src/views/stationarea/form.vue b/jnpf-java-boot/jnpf-web/src/views/stationarea/form.vue
index 0d72253..7498c1a 100644
--- a/jnpf-java-boot/jnpf-web/src/views/stationarea/form.vue
+++ b/jnpf-java-boot/jnpf-web/src/views/stationarea/form.vue
@@ -101,7 +101,7 @@
         <!-- 表单结束 -->
     </template>
     </el-form>
-    <area-dialog :position="position" :areaMapInfo="dataForm.areaMapInfo" v-if="areaVisible" @areaVisibleChange="handleAreaVisibleChange" />
+    <area-dialog :mode="mode" :position="position" :areaMapInfo="dataForm.areaMapInfo" v-if="areaVisible" @areaVisibleChange="handleAreaVisibleChange" />
     <!-- <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                   ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"/> -->
     </el-row>
@@ -122,7 +122,7 @@
     import { thousandsFormat } from "@/components/Generator/utils/index"
     export default {
         components: { areaDialog },
-        props: [],
+        props: ['mode'],
         data() {
         return {
           position: {},
@@ -258,8 +258,11 @@
             this.areaVisible = true
             // this.getPosition()
           },
-          handleAreaVisibleChange(areaVisible) {
+          handleAreaVisibleChange(areaVisible, targetAreaPath) {
             this.areaVisible = areaVisible
+            if (targetAreaPath) {
+              this.dataForm.areaMapInfo = targetAreaPath
+            }
           },
             prev() {
                 this.index--
diff --git a/jnpf-java-boot/jnpf-web/src/views/stationarea/index.vue b/jnpf-java-boot/jnpf-web/src/views/stationarea/index.vue
index f4f1245..9a2430f 100644
--- a/jnpf-java-boot/jnpf-web/src/views/stationarea/index.vue
+++ b/jnpf-java-boot/jnpf-web/src/views/stationarea/index.vue
@@ -142,7 +142,7 @@
                         <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData"/>
              </div>
         </div>
-        <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh"/>
+        <JNPF-Form :mode="mode" v-if="formVisible" ref="JNPFForm" @refresh="refresh"/>
         <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download"/>
 
 
@@ -222,6 +222,7 @@
                         sidx: "",
             },
             formVisible: false,
+            mode: '',
             flowVisible: false,
             flowListVisible: false,
             flowList: [],
@@ -485,6 +486,8 @@
                     this.initData()
                 },
             addOrUpdateHandle(row, isDetail) {
+                const mode = row ? 'edit' : 'add'
+                this.mode = mode
                 let id = row?row.id:""
                 this.formVisible = true
                 this.$nextTick(() => {
diff --git a/jnpf-java-boot/jnpf-web/vue.config.js b/jnpf-java-boot/jnpf-web/vue.config.js
index 3419431..0b20b8a 100644
--- a/jnpf-java-boot/jnpf-web/vue.config.js
+++ b/jnpf-java-boot/jnpf-web/vue.config.js
@@ -9,7 +9,6 @@ function resolve(dir) {
 }
 
 const name = defaultSettings.title || '易回收' // page title
-
 // If your port is set to 80,
 // use administrator privileges to execute the command line.
 // For example, Mac: sudo npm run