BUG修复和优化

src/components/common/BottomMenus.vue

@@ -158,7 +158,7 @@ export default {
           width: "94px",
           title: "现场勘查",
           subMenu: [{ index: 0, title: "发到手机", bgImage: "fdsj" }],
-        },
+        }
       ],
     };
   },
@@ -215,7 +215,7 @@ export default {
         this.dialogVisibleStatus = !state;
       } else if (!this.showBottomMenusStatus && this.dialogVisibleStatus) {
         // 如果底部菜单为隐藏状态且弹窗为显示状态，则为弹窗关闭询问。
-        this.$bus.$emit("handleClose");
+        // this.$bus.$emit("handleClose");
       } else {
         // 否则直接切换底部菜单显示隐藏状态
         this.showBottomMenusStatus = !this.showBottomMenusStatus;

src/components/common/TagCard.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 外边框 -->
   <div class="tagMainBox">
-    <div v-if="data" @mousemove="mousemoveEvent(index)">
+    <div v-if="data" @mousemove="mousemoveEvent(index)" @click.stop="clickStop()">
       <!-- 上下布局 -->
       <div v-if="data.type !== 'lr'" class="tbFlx">
         <div class="tagValue">
@@ -53,6 +53,9 @@ export default {
       if(index !== undefined){
         this.$emit("changeMousemoveIndex",index);
       }
+    },
+    clickStop(){
+      console.log("预留事件，主要是阻止click冒泡！")
     }
   },
   watch: {}

src/components/common/TagTableCard.vue

@@ -2,11 +2,11 @@
   <!-- 外边框 -->
   <div class="displayFlex" style="max-height: 180px">
     <div class="displayFlex-c">
-      <div class="card card1" :style="{ background: mousemoveIndex == 0 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(0)">
+      <div class="card card1" :style="{ background: mousemoveIndex == 0 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(0)" @click.stop="clickStop()">
         <div>{{echartData[0].title}}</div>
         <div>{{echartData[0].value}}<span>公顷</span></div>
       </div>
-      <div class="card card2" :style="{ background: mousemoveIndex == 1 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(1)">
+      <div class="card card2" :style="{ background: mousemoveIndex == 1 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(1)" @click.stop="clickStop()">
         <div>{{echartData[1].title}}</div>
         <div>{{echartData[1].value}}<span>公顷</span></div>
       </div>
@@ -15,11 +15,11 @@
       <TagCard :data="echartData[4]"></TagCard>
     </div>
     <div class="displayFlex-c">
-      <div class="card card3" :style="{ background: mousemoveIndex == 2 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(2)">
+      <div class="card card3" :style="{ background: mousemoveIndex == 2 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(2)" @click.stop="clickStop()">
         <div style="text-align: right">{{echartData[2].title}}</div>
         <div>{{echartData[2].value}}<span>公顷</span></div>
       </div>
-      <div class="card card4" :style="{ background: mousemoveIndex == 3 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(3)">
+      <div class="card card4" :style="{ background: mousemoveIndex == 3 ? '#74ffff64' : '' }" @mousemove="mousemoveEvent(3)" @click.stop="clickStop()">
         <div style="text-align: right">{{echartData[3].title}}</div>
         <div>{{echartData[3].value}}<span>公顷</span></div>
       </div>
@@ -54,6 +54,9 @@ export default {
         this.mousemoveIndex = index;
         this.$emit("changeMousemoveIndex",this.mousemoveIndex);
       }
+    },
+    clickStop(){
+      console.log("预留事件，主要是阻止click冒泡！")
     }
   },
   watch: {}

src/components/map/MapHolder.vue

@@ -30,7 +30,7 @@ export default {
       currentHtml: null,
       // 标记疑点
       currentLabelCid: null,
-      currentLabelHtml: null,
+      currentLabelHtml: null
     };
   },
   mounted() {
@@ -48,7 +48,7 @@ export default {
     this.$store.state.mapMethodsCollection.set("RENDER", {
       addPolygonLayer: this.addPolygonLayer,
       setView: this.setView,
-      deletePolygonLayer: this.deletePolygonLayer,
+      deletePolygonLayer: this.deletePolygonLayer
     });
   },
   beforeDestroyed() {
@@ -61,14 +61,14 @@ export default {
     // 监听底部菜单栏的状态
     getLabelCaseBtnStatus() {
       //疑点审计 1,0
-      let index = this.$store.state.bottomMenuIndexs.index;
-      let subIndex = this.$store.state.bottomMenuIndexs.subIndex;
-      return { index, subIndex };
+      let _index = this.$store.state.bottomMenuIndexs.index;
+      let _subIndex = this.$store.state.bottomMenuIndexs.subIndex;
+      return { index: _index, subIndex: _subIndex };
     },
     // 监听当前菜单
     getCurrentMenu() {
       return this.$store.state.navSelect;
-    },
+    }
   },
   watch: {
     getLabelCaseBtnStatus(val) {
@@ -81,11 +81,11 @@ export default {
         this.stopLabelCase();
       }
     },
-    getCurrentMenu: {
+    "$store.state.navSelect": {
       handler(val) {
         console.log(val, "currentMenu -- test");
         if (val.index !== "3") {
-          if(this.JLControlShowStatus){
+          if (this.JLControlShowStatus) {
             this.JLControl();
           }
           this.stopLabelCase();
@@ -97,8 +97,8 @@ export default {
           this.getJSonData();
         });
       },
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   methods: {
     // 开始标记疑点事件
@@ -107,9 +107,13 @@ export default {
     },
     // 停止标记疑点事件
     stopLabelCase() {
-      map2DViewer.setDrawTool({
-        action: "remove",
-      });
+      try {
+        map2DViewer.setDrawTool({
+          action: "remove"
+        });
+      } catch (e) {
+        console.log("MapHolder.vue 停止标记疑点事件 error");
+      }
     },
     // 常规图层弹窗
     createAuditDiv(str) {
@@ -130,14 +134,14 @@ export default {
         $(() => {
           // 法律法规点击事件
           if ($(`#${str}_id a`)) {
-            $(`#${str}_id a`).click((e) => {
+            $(`#${str}_id a`).click(e => {
               console.log(e, "显示疑点相关的弹窗");
               this.$store.state.lawPopupShow = true;
             });
           }
           // input添加点击事件
           if ($(`#${str}_id input`)[1]) {
-            $(`#${str}_id input`).click((e) => {
+            $(`#${str}_id input`).click(e => {
               switch (e.target.defaultValue) {
                 case "修改":
                   this.modifyBtnEvent();
@@ -170,7 +174,7 @@ export default {
         $(() => {
           console.log($(`#${str}_id textarea`).val(), "textarea");
           $(`#${str}_id`).css("height", "100%");
-          $(`#${str}_id input`).click((e) => {
+          $(`#${str}_id input`).click(e => {
             console.log(e.target.defaultValue);
             switch (e.target.defaultValue) {
               case "删除":
@@ -200,14 +204,16 @@ export default {
       console.log("save btn");
       let type = $(`#${str}_id select`).val();
       let des = $(`#${str}_id textarea`).val();
-
-      this.$store.state.myLabelPointsArr.push({
+      let _oldMyLabelPointsArr = this.$store.state.myLabelPointsArr;
+      let _myLabelPointsArrMap = {
         id: publicFun.buildGuid("myLabel"),
         coord: coord,
         type: type,
         des: des,
-        data: data,
-      });
+        data: data
+      };
+      _oldMyLabelPointsArr.push(_myLabelPointsArrMap);
+      this.$store.commit("changeMyLabelData", _oldMyLabelPointsArr);
       map2DViewer.map.closePopup();
     },
     // 卷帘对比
@@ -217,9 +223,7 @@ export default {
         map2DViewer.jlMap = L.tileLayer(
           "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d"
         ).addTo(map2DViewer.map);
-        map2DViewer.jlControl = L.control
-          .sideBySide(map2DViewer.map, map2DViewer.jlMap)
-          .addTo(map2DViewer.map);
+        map2DViewer.jlControl = L.control.sideBySide(map2DViewer.map, map2DViewer.jlMap).addTo(map2DViewer.map);
       } else {
         map2DViewer.map.removeControl(map2DViewer.jlControl);
         map2DViewer.map.removeLayer(map2DViewer.jlMap);
@@ -233,27 +237,31 @@ export default {
       // 每次点击按钮后重绘弹窗
       if (this.currentHtml && this.currentCid) {
         setTimeout(() => {
-          this.popup
-            .setContent(this.createAuditDiv(this.currentCid))
-            .openOn(map2DViewer.map);
+          this.popup.setContent(this.createAuditDiv(this.currentCid)).openOn(map2DViewer.map);
         }, 300);
       }
     },
     // 初始化引入绘制工具
     initDraw() {
       // 引入疑点标记绘制方法
-      map2DViewer.drawToolFire = (data) => {
-        // 纬经度
-        if (data.points.length > 0) {
-          console.log(data.points[data.points.length - 1], "绘制的图形");
-          let coord = data.points[data.points.length - 1];
-          let newCoord = { lat: coord[0], lng: coord[1] };
-          this.labelDetailsPopupShow = true;
-          this.labelPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
-            .setLatLng(newCoord)
-            .setContent(this.createLabelDiv("label", coord, data))
-            .openOn(map2DViewer.map);
-          this.labelDetailsPopupShow = false;
+      map2DViewer.drawToolFire = data => {
+        try {
+          // 纬经度
+          if (data && data.points.length >= 1) {
+            console.log(data.points[data.points.length - 1], "绘制的图形");
+            let coord = data.points[data.points.length - 1];
+            if (coord && coord.length >= 2) {
+              let newCoord = { lat: coord[0], lng: coord[1] };
+              this.labelDetailsPopupShow = true;
+              this.labelPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
+                .setLatLng(newCoord)
+                .setContent(this.createLabelDiv("label", coord, data))
+                .openOn(map2DViewer.map);
+              this.labelDetailsPopupShow = false;
+            }
+          }
+        } catch (e) {
+          console.log("引入疑点标记绘制方法 error");
         }
       };
       map2DViewer.setDrawTool({
@@ -263,7 +271,7 @@ export default {
         color: "red",
         font_size: "14px",
         closeButton: true,
-        iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png",
+        iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png"
       });
     },
 
@@ -291,17 +299,14 @@ export default {
         attributionControl: false,
         zoomControl: false,
         minZoom: 10,
-        maxZoom: 16,
+        maxZoom: 16
       }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
       //添加默认图层
       let guid = publicFun.buildGuid("baseLayer");
       let layer = L.esri
         .tiledMapLayer({
-          url:
-            systemConfig.mapService +
-            "?servertype=Street_Purplish_Blue&token=" +
-            systemConfig.token,
+          url: systemConfig.mapService + "?servertype=Street_Purplish_Blue&token=" + systemConfig.token
           // url: "http://aimap.pudong.sh:5236/maps/rest/services/basemap-shanghai-gem-blue-sh2000/mapserver",
           // tileSize: 512
         })
@@ -321,16 +326,14 @@ export default {
         map2DViewer.groups["district_polygon"].remove();
       }
       // 请求并渲染新的区域图层
-      get("./static/json/pdgeojson.json", "").then((geoJson) => {
+      get("./static/json/pdgeojson.json", "").then(geoJson => {
         map2DViewer.groups["district_polygon"] = L.featureGroup();
         map2DViewer.groups["district_label"] = L.featureGroup();
         // console.log(map2DViewer.groups["district_polygon"], "district_polygon group");
         map2DViewer.groups["district_polygon"].addTo(map2DViewer.map);
         map2DViewer.groups["district_label"].addTo(map2DViewer.map);
-        geoJson.features.map((feature) => {
-          if (
-            this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1
-          ) {
+        geoJson.features.map(feature => {
+          if (this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1) {
             let center = turf.center(feature.geometry);
             this.renderPolygon(feature);
           }
@@ -370,7 +373,7 @@ export default {
         weight: 3,
         fillColor: this.getColor(itemvalue),
         opacity: 1,
-        fillOpacity: 0.4,
+        fillOpacity: 0.4
       }).addTo(map2DViewer.groups["district_polygon"]);
       center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
       center.reverse();
@@ -378,25 +381,25 @@ export default {
         radius: 10,
         weight: 1,
         fillOpacity: 0,
-        color: "#e6d273",
+        color: "#e6d273"
       });
       wmarker.bindLabel(feature.properties.NAME, {
         noHide: true,
         clickable: true,
-        offset: [-25, 10],
+        offset: [-25, 10]
       });
       wmarker.addTo(map2DViewer.groups["district_label"]);
       L.circleMarker(center, {
         radius: 8,
         weight: 1,
         fillOpacity: 0,
-        color: "#e6d273",
+        color: "#e6d273"
       }).addTo(map2DViewer.groups["district_polygon"]);
       L.circleMarker(center, {
         radius: 5,
         weight: 1,
         fillOpacity: 1,
-        color: "#e6d273",
+        color: "#e6d273"
       }).addTo(map2DViewer.groups["district_polygon"]);
     },
     latLngsToReverse: function (latlngsAry) {
@@ -424,7 +427,7 @@ export default {
     addPolygonLayer(data, cid, color) {
       // cid -- 'yongjiu'
       // console.log(data, cid, color);
-      data.map((feature) => {
+      data.map(feature => {
         let polygonData = JSON.parse(JSON.stringify(feature));
         let coordinates = polygonData.geometry.coordinates[0];
         let infos = polygonData.properties;
@@ -433,18 +436,16 @@ export default {
           weight: 3,
           fillColor: color,
           opacity: 1,
-          fillOpacity: 0.4,
+          fillOpacity: 0.4
         }).addTo(map2DViewer.map);
         map2DViewer.polygons[`${cid}_layer`].push(polygon);
         polygon.infos = infos;
-        polygon.on("click", (e) => {
+        polygon.on("click", e => {
           // console.log(e, "polygon");
           this.auditPopupShow = true;
           console.log(e.latlng, "获取当前弹窗坐标111");
 
-          this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
-            .setLatLng(e.latlng)
-            .setContent(this.createAuditDiv("cid"));
+          this.popup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(this.createAuditDiv("cid"));
           // .openOn(map2DViewer.map);
           this.auditPopupShow = false;
           this.popup.openOn(map2DViewer.map);
@@ -455,11 +456,11 @@ export default {
 
     //综合分析 - 标记疑点 - 删除面
     deletePolygonLayer(layer) {
-      map2DViewer.polygons[layer].forEach((polygon) => {
+      map2DViewer.polygons[layer].forEach(polygon => {
         map2DViewer.map.removeLayer(polygon);
       });
-    },
-  },
+    }
+  }
 };
 </script>
 <style scoped>