疑点审计激活与未激活状态下，改变地图弹窗

src/components/common/BottomMenus.vue

@@ -12,9 +12,11 @@
     <!-- 我的任务弹窗 -->
     <MyMission @changeShowBottomMenusStatus="changeShowBottomMenusStatus" />
     <!-- 同屏对比弹窗 -->
-    <SameScreenComparison  @changeShowBottomMenusStatus="changeShowBottomMenusStatus"/>
+    <SameScreenComparison
+      @changeShowBottomMenusStatus="changeShowBottomMenusStatus"
+    />
     <!-- 上传数据弹窗 -->
-    <UploadingData  @changeShowBottomMenusStatus="changeShowBottomMenusStatus"/>
+    <UploadingData @changeShowBottomMenusStatus="changeShowBottomMenusStatus" />
     <!-- 自定义模型 -->
     <CustomModelDialog />
     <!-- 底部菜单主体 -->
@@ -47,7 +49,12 @@
             :key="subIndex"
           >
             <!-- 选中状态的背景高亮（舍弃） -->
-            <!-- <div :class="ifMenuIndex(item.index, subItem.index) ? 'colBtuMenuShadow' : ''"></div> -->
+            <div
+              :class="
+                ifMenuIndex(item.index, subItem.index) ? 'colBtuMenuShadow' : ''
+              "
+            ></div>
+
             <!-- 子菜单图标的选择性渲染 -->
             <el-image
               class="BtuMenu_hover"
@@ -132,7 +139,12 @@ export default {
               clickEmit: "JLControl",
             },
             { index: 4, title: "上传数据", bgImage: "scsj", clickEmit: "scsj" },
-            { index: 5, title: "自定义模型", bgImage: "zdymx",clickEmit:"customModelEvent" },
+            {
+              index: 5,
+              title: "自定义模型",
+              bgImage: "zdymx",
+              clickEmit: "customModelEvent",
+            },
           ],
         },
         {
@@ -156,10 +168,19 @@ export default {
   methods: {
     // 根据菜单父级index和子菜单index，判断全局变量已选中底部菜单的index对比，返回状态。
     ifMenuIndex(index, subIndex) {
-      return (
-        this.$store.state.bottomMenuIndexs.index == index &&
-        this.$store.state.bottomMenuIndexs.subIndex == subIndex
-      );
+      // return (
+      //   this.$store.state.bottomMenuIndexs.index == index &&
+      //   this.$store.state.bottomMenuIndexs.subIndex == subIndex
+      // );
+      if (index == 1) {
+        if (subIndex == 0 || subIndex == 1 || subIndex == 3) {
+          return (
+            this.$store.state.bottomMenuIndexs.index == index &&
+            this.$store.state.bottomMenuIndexs.subIndex == subIndex
+          );
+        }
+        // this.$store.state.bottomMenuIndexs.index = 1
+      }
     },
     // 根据菜单父级index和子菜单index，更新全局变量。
     changeBottomMenu(index, subIndex, clickEvent) {

src/components/map/MapHolder.vue

@@ -4,11 +4,7 @@
       v-show="true"
       style="position: fixed; left: 40%; top: 30%; z-index: 99999"
     /> -->
-    <CaseAuditPopup
-      v-show="auditPopupShow"
-      :status="auditPopupStatus"
-      ref="auditPopup"
-    />
+    <CaseAuditPopup v-show="auditPopupShow" ref="auditPopup" />
   </div>
 </template>
 <script>
@@ -25,6 +21,9 @@ export default {
       town: "祝桥镇,南汇新城镇,川沙新镇,老港镇,惠南镇,航头镇,泥城镇,书院镇,新场镇,大团镇,唐镇,曹路镇,宣桥镇,张江镇,合庆镇,周浦镇,康桥镇,三林镇,高桥镇,高东镇,金桥镇,北蔡镇,万祥镇,高行镇",
       auditPopupShow: false,
       auditPopupStatus: "normal",
+      popup: null,
+      currentCid: null,
+      currentHtml: null,
     };
   },
   mounted() {
@@ -63,19 +62,19 @@ export default {
     this.$bus.$off("labelCaseEvent");
   },
   methods: {
-    // 弹窗修改
+    // 地图弹窗修改
     createDynamicDiv(str) {
       // 根据ref获取组件的dom元素
-      let html = this.$refs.auditPopup.$el.innerHTML;
-      if (html) {
+      this.currentHtml = this.$refs.auditPopup.$el.innerHTML;
+      console.log($(`#${str}_id`), "8888");
+      if (this.currentHtml) {
         let div = document.createElement("div");
         div.id = str + "_id";
+        div.className = "case-audit";
         // 动态创建div后赋值模板样式
-        div.innerHTML = html;
+        div.innerHTML = this.currentHtml;
         $(() => {
-          // 修改弹窗宽高
-          $(`#${str}_id`).css("width", "300px");
-          $(`#${str}_id`).css("height", "320px");
+          // 法律法规点击事件
           if ($(`#${str}_id a`)) {
             $(`#${str}_id a`).click((e) => {
               console.log(e, "a label");
@@ -112,6 +111,14 @@ export default {
     // 疑点审计
     caseAuditEvent() {
       console.log("case audit");
+      // 每次点击按钮后重绘弹窗
+      if (this.currentHtml && this.currentCid) {
+        setTimeout(() => {
+          this.popup
+            .setContent(this.createDynamicDiv(this.currentCid))
+            .openOn(map2DViewer.map);
+        }, 300);
+      }
     },
     // 标记疑点
     labelCaseEvent() {
@@ -240,25 +247,17 @@ export default {
         }).addTo(map2DViewer.map);
         map2DViewer.polygons[`${cid}_layer`].push(polygon);
         polygon.infos = infos;
-        // this.createDynamicDiv()
-        // polygon.bindPopup(
-        //   "<div style='color:red'>Hello world! I am a popup.</div>",
-        //   infos
-        // );
         polygon.on("click", (e) => {
           // console.log(e, "polygon");
           this.auditPopupShow = true;
 
-          let popup = L.popup({ maxWidth: 700, maxHeight: 600 })
+          this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
             .setLatLng(e.latlng)
             .setContent(this.createDynamicDiv("cid"));
           // .openOn(map2DViewer.map);
           this.auditPopupShow = false;
-          popup.openOn(map2DViewer.map);
-          // let b = $(`#cid_id`);
-          // console.log(b, "b");
-          // let a = $(`#cid_id`).children("input");
-          // console.log(a, "input");
+          this.popup.openOn(map2DViewer.map);
+          this.currentCid = cid;
         });
       });
       console.log(map2DViewer.polygons[`${cid}_layer`]);

src/components/popup/CaseAuditPopup.vue

@@ -77,7 +77,7 @@ export default {
         boxWidth: "300",
         boxHeight: "320",
       },
-      // status: "special",
+      status: "normal",
       tableArr: [
         { id: 1, name: "版本", content: "2017年部" },
         { id: 2, name: "面积", content: "888.4567" },
@@ -91,7 +91,28 @@ export default {
       ],
     };
   },
-  props:['status'],
+  computed: {
+    getPopupStatus() {
+      //疑点审计 1,0
+      let index = this.$store.state.bottomMenuIndexs.index;
+      let subIndex = this.$store.state.bottomMenuIndexs.subIndex;
+      return { index, subIndex };
+    },
+  },
+  watch: {
+    getPopupStatus(val) {
+      if (val.index === 1 && val.subIndex === 0) {
+        console.log("激活疑点审计按钮");
+        this.status = "special";
+      }
+
+      if (val.index === -1 && val.subIndex === -1) {
+        console.log("未激活疑点审计按钮");
+        this.status = "normal";
+      }
+      // console.log(val, "疑点审计当前的状态");
+    },
+  },
   methods: {
     modifyEvent() {
       console.log("modify");
@@ -102,8 +123,10 @@ export default {
   },
 };
 </script>
-<style lang="less" scoped>
+<style lang="less">
 .case-audit {
+  position: relative;
+  height: 100%;
   cursor: auto;
   &-inner {
     width: 100%;