Просмотр исходного кода

reactor:优化预案弹窗,关闭时取消选中

liu_w601 3 месяцев назад
Родитель
Сommit
59946e68d5

+ 20 - 5
src/views/components/layerList/index.vue

@@ -99,6 +99,11 @@ export default {
     this.$globalEventBus.$on('toggleLeftPanel', (val) => {
       this.leftPanelHide = val
     })
+    this.$globalEventBus.$on('closePlanDialog', (data) => {
+      this.checkedNodes = []
+      const ids = data.map(item=>item.id);
+      this.cancelCheckNode(ids)
+    })
   },
   watch: {
     mainMenu: {
@@ -112,16 +117,24 @@ export default {
     }
   },
   methods: {
+    //关闭防汛预案弹窗后取消选中
+     cancelCheckNode(ids) {
+      const currentCheckedKeys = this.$refs.treeRef.getCheckedKeys(true); 
+      const newArray= currentCheckedKeys.filter(item=> !ids.includes(item))
+      this.$refs.treeRef.setCheckedKeys(newArray); 
+    },  
     onExpandChange() {
       this.isExpanded = !this.isExpanded
     },
 
     async onCheckChange(node, checked,) {
-      if (checked && node.type === 'plan' &&!node.children) {
-            this.checkedNodes.push(node); 
-        } else if (!checked) { 
-            this.checkedNodes = this.checkedNodes.filter(n => n.id !== node.id);
+      const checkedNodes = this.$refs.treeRef.getCheckedNodes()
+      this.checkedNodes = []
+      checkedNodes.map((item)=>{
+        if(item.type && item.type == 'plan' && !item.children){
+          this.checkedNodes.push(item)
         }
+      })
       const id = node.id
       if (checked) {
         if (node.type && node.type == 'plan') {
@@ -147,7 +160,6 @@ export default {
               clampToGround: true,
               symbol: this.getStyleByName(node.label)
             })
-            console.log(window.map, 111111111)
             window.map.addLayer(layer)
             this.bindEvent(layer)
             layerCache[id] = layer
@@ -220,6 +232,9 @@ export default {
         })
       }
     }
+  },
+  destroyed(){
+    this.$globalEventBus.$off('closePlanDialog')
   }
 }
 </script>

+ 8 - 5
src/views/components/layerList/planDialog.vue

@@ -2,7 +2,7 @@
   <div class="plan-dialog-container" v-if="visible">
     <div class="plan-title">
       <span class="title-text">防汛预案</span>
-      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="visible = false" />
+      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="closeDialog" />
     </div>
     <div class="plan-content">
       <el-tabs tab-position="left" style="height: 5.85rem">
@@ -11,9 +11,9 @@
             <el-carousel-item v-for="(image,i) in item.imageList" :key="i">
               <div class="image-wrapper">
                 <el-image :src="image" :preview-src-list="item.imageList" fit="cover" class="main-image" />
-                <div class="fullscreen-btn" @click="openFullscreen(i)">
+                <!-- <div class="fullscreen-btn" @click="openFullscreen(index)">
                   <img src="@/assets/image/smart-early-warning/fullScreen.png" alt="" />
-                </div>
+                </div> -->
               </div>
             </el-carousel-item>
           </el-carousel>
@@ -67,9 +67,12 @@ export default {
       this.imgsThree = imagesRequireContext3.keys().map((imagePath3) => imagesRequireContext3(imagePath3))
     },
     openFullscreen(index) {
-      this.$refs['mainCarousel' + index].setActiveItem(index)
       const img = this.$el.querySelectorAll('.main-image')[index].querySelector('img')
       img.click()
+    },
+    closeDialog(){
+      this.visible = false
+      this.$globalEventBus.$emit('closePlanDialog',this.planList)
     }
   },
   destroyed() {
@@ -84,7 +87,7 @@ export default {
   top: px-to-rem(270);
   right: calc(50% - px-to-rem(590));
   width: px-to-rem(1180);
-  z-index: 55;
+  z-index: 1001;
   .plan-title {
     background: url('@/assets/image/common/planTitleBg.png') no-repeat;
     background-size: 100% 100%;