事件详情地图功能 打开后隐藏并清空

src/components/leftRightSwiperScroll.vue

@@ -1,187 +1,187 @@
 <template>
-    <!-- 文本超出，左右按钮滚动 -->
-    <div ref="swiperScroll" class="left-right-swiper-scroll-box">
-      <!-- 左边按钮 -->
-      <div v-show="showLeftIcon" @click="handleLeftClick" class="scroll-icon left-icon">
-        <i ></i>
-      </div>
-      <!-- 中间滚动区域 -->
-      <div ref="swiperScrollContent" class="swiper-scroll-content">
-        <slot></slot>
-      </div>
-      <!-- 右边按钮 -->
-      <div v-show="showRightIcon" @click="handleRightClick" class="scroll-icon right-icon">
-        <i ></i>
-      </div>
+  <!-- 文本超出，左右按钮滚动 -->
+  <div ref="swiperScroll" class="left-right-swiper-scroll-box">
+    <!-- 左边按钮 -->
+    <div v-show="showLeftIcon" @click="handleLeftClick" class="scroll-icon left-icon">
+      <i ></i>
     </div>
-    </template>
+    <!-- 中间滚动区域 -->
+    <div ref="swiperScrollContent" class="swiper-scroll-content">
+      <slot></slot>
+    </div>
+    <!-- 右边按钮 -->
+    <div v-show="showRightIcon" @click="handleRightClick" class="scroll-icon right-icon">
+      <i ></i>
+    </div>
+  </div>
+</template>
 
-    <script>
-    export default {
-      name: 'leftRightSwiperScroll',
-      props: {
-        swiperList: {
-          type: Object,
-          default: () => {
-            return {};
-          }
-        }
-      },
-      data() {
-        return {
-          showRightIcon: false, // 是否显示右箭头
-          swiperScrollWidth: 0, // 盒子的宽度
-          swiperScrollContentWidth: 0, // 内容的宽度
-          maxClickNum: 0, // 最大点击次数
-          lastLeft: 0, // 上次滑动距离
-          clickNum: 0, // 点击次数
-          childrenList: [] // 传进来的子元素
-        }
-      },
-      computed: {
-        showLeftIcon() {
-          return this.clickNum > 0
-        }
-      },
-      mounted() {
-        // 获取 HTMLCollection 转为 数组
-        this.childrenList = [...this.$refs.swiperScrollContent.children];
-        console.log('childrenList--->', this.childrenList);
-        console.log('swiperScroll--->', this.$refs.swiperScroll);
-        console.log('swiperScrollContent--->', this.$refs.swiperScrollContent);
+<script>
+export default {
+  name: 'leftRightSwiperScroll',
+  props: {
+    swiperList: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      showRightIcon: true, // 是否显示右箭头
+      swiperScrollWidth: 0, // 盒子的宽度
+      swiperScrollContentWidth: 0, // 内容的宽度
+      maxClickNum: 0, // 最大点击次数
+      lastLeft: 0, // 上次滑动距离
+      clickNum: 0, // 点击次数
+      childrenList: [] // 传进来的子元素
+    }
+  },
+  computed: {
+    showLeftIcon() {
+      return this.clickNum > 0
+    }
+  },
+  mounted() {
+    // 获取 HTMLCollection 转为 数组
+    this.childrenList = [...this.$refs.swiperScrollContent.children];
+    console.log('childrenList--->', this.childrenList);
+    console.log('swiperScroll--->', this.$refs.swiperScroll);
+    console.log('swiperScrollContent--->', this.$refs.swiperScrollContent);
 
-        // 盒子的宽度
-        this.swiperScrollWidth = this.$refs.swiperScroll.getBoundingClientRect().width;
-        // 内容的宽度
-        this.swiperScrollContentWidth = this.$refs.swiperScrollContent.getBoundingClientRect().width;
-        // 比较盒子的宽度,跟内容的宽度：判断是否需要展示右边的按钮
-        if(this.swiperScrollWidth < this.swiperScrollContentWidth) {
-          this.showRightIcon = true;
+    // 盒子的宽度
+    this.swiperScrollWidth = this.$refs.swiperScroll.getBoundingClientRect().width;
+    // 内容的宽度
+    this.swiperScrollContentWidth = this.$refs.swiperScrollContent.getBoundingClientRect().width;
+    // 比较盒子的宽度,跟内容的宽度：判断是否需要展示右边的按钮
+    if(this.swiperScrollWidth < this.swiperScrollContentWidth) {
+      this.showRightIcon = true;
+    }
+    console.log('盒子的宽度--->', this.swiperScrollWidth );
+    console.log('内容的宽度--->', this.swiperScrollContentWidth);
+    console.log('this.showRightIcon',this.showRightIcon)
+  },
+  methods: {
+    // 点击右箭头（左侧滚动）
+    handleRightClick() {
+      // 如果点击次数小于数组长度-1时，执行左滑动效果。
+      if (this.clickNum < this.childrenList.length - 1) {
+        // 获取当前元素宽度
+        let width = this.childrenList[this.clickNum].getBoundingClientRect().width;
+        console.log(this.childrenList[this.clickNum], this.childrenList[this.clickNum].getBoundingClientRect());
+        // 获取最后一个元素距离左侧的距离
+        let lastItemOffsetLeft = this.childrenList[this.childrenList.length - 1].offsetLeft;
+        // 获取最后一个元素宽度
+        let lastWidth = this.childrenList[this.childrenList.length - 1].getBoundingClientRect().width;
+        console.log('lastItemOffsetLeft-->', lastItemOffsetLeft, this.childrenList[this.childrenList.length - 1].getBoundingClientRect());
+        // 获取可视区域宽度
+        const lookWidth = this.$refs.swiperScroll.clientWidth;
+        console.log('获取可视区域宽度-->lookWidth', lookWidth);
+        // 如果最后一个元素距离左侧的距离+自身的宽度大于可视距离，表示最后一个元素没有出现，执行滚动效果
+        if (lastItemOffsetLeft + lastWidth > lookWidth) {
+          // 滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离
+          this.$refs.swiperScrollContent.style.marginLeft = `${-width + this.lastLeft}px`;
+          this.lastLeft = -width + this.lastLeft;
+          // 点击次数+1
+          this.clickNum++;
+          // 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
+          this.maxClickNum = this.clickNum;
         }
-        console.log('盒子的宽度--->', this.swiperScrollWidth );
-        console.log('内容的宽度--->', this.swiperScrollContentWidth);
-        console.log('this.showRightIcon',this.showRightIcon)
-      },
-      methods: {
-        // 点击右箭头（左侧滚动）
-        handleRightClick() {
-          // 如果点击次数小于数组长度-1时，执行左滑动效果。
-          if (this.clickNum < this.childrenList.length - 1) {
-            // 获取当前元素宽度
-            let width = this.childrenList[this.clickNum].getBoundingClientRect().width;
-            console.log(this.childrenList[this.clickNum], this.childrenList[this.clickNum].getBoundingClientRect());
-            // 获取最后一个元素距离左侧的距离
-            let lastItemOffsetLeft = this.childrenList[this.childrenList.length - 1].offsetLeft;
-            // 获取最后一个元素宽度
-            let lastWidth = this.childrenList[this.childrenList.length - 1].getBoundingClientRect().width;
-            console.log('lastItemOffsetLeft-->', lastItemOffsetLeft, this.childrenList[this.childrenList.length - 1].getBoundingClientRect());
-            // 获取可视区域宽度
-            const lookWidth = this.$refs.swiperScroll.clientWidth;
-            console.log('获取可视区域宽度-->lookWidth', lookWidth);
-            // 如果最后一个元素距离左侧的距离+自身的宽度大于可视距离，表示最后一个元素没有出现，执行滚动效果
-            if (lastItemOffsetLeft + lastWidth > lookWidth) {
-              // 滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离
-              this.$refs.swiperScrollContent.style.marginLeft = `${-width + this.lastLeft}px`;
-              this.lastLeft = -width + this.lastLeft;
-              // 点击次数+1
-              this.clickNum++;
-              // 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
-              this.maxClickNum = this.clickNum;
-            }
-            // 如果最后一个元素距离左侧的距离小于于可视距离，需要隐藏右侧箭头
-            let timer = setTimeout(() => {
-              // 重新：获取最后一个元素距离左侧的距离
-              let lastItemOffsetLeft2 = this.childrenList[this.childrenList.length - 1].offsetLeft;
-              console.log('lastItemOffsetLeft2-新的->', lastItemOffsetLeft2);
-              if(lastItemOffsetLeft2 + lastWidth <= lookWidth) {
-                this.showRightIcon = false;
-              }
-              clearTimeout(timer);
-            }, 200);
-          }
-        },
-        // 点击左箭头（右侧滚动）
-        handleLeftClick() {
-          // 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头
-          if (this.clickNum > 0) {
-            // 获取当前元素宽度
-            let width = this.childrenList[this.clickNum - 1].getBoundingClientRect().width;
-            // 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离
-            this.$refs.swiperScrollContent.style.marginLeft = `${this.lastLeft + width}px`
-            this.lastLeft = width + this.lastLeft;
-            // 点击次数-1
-            this.clickNum--;
-            // 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头
-            if (this.clickNum < this.maxClickNum) {
-              this.showRightIcon = true;
-            }
+        // 如果最后一个元素距离左侧的距离小于于可视距离，需要隐藏右侧箭头
+        let timer = setTimeout(() => {
+          // 重新：获取最后一个元素距离左侧的距离
+          let lastItemOffsetLeft2 = this.childrenList[this.childrenList.length - 1].offsetLeft;
+          console.log('lastItemOffsetLeft2-新的->', lastItemOffsetLeft2);
+          if(lastItemOffsetLeft2 + lastWidth <= lookWidth) {
+            this.showRightIcon = false;
           }
+          clearTimeout(timer);
+        }, 200);
+      }
+    },
+    // 点击左箭头（右侧滚动）
+    handleLeftClick() {
+      // 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头
+      if (this.clickNum > 0) {
+        // 获取当前元素宽度
+        let width = this.childrenList[this.clickNum - 1].getBoundingClientRect().width;
+        // 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离
+        this.$refs.swiperScrollContent.style.marginLeft = `${this.lastLeft + width}px`
+        this.lastLeft = width + this.lastLeft;
+        // 点击次数-1
+        this.clickNum--;
+        // 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头
+        if (this.clickNum < this.maxClickNum) {
+          this.showRightIcon = true;
         }
       }
     }
-    </script>
+  }
+}
+</script>
 
-    <style lang='scss' scoped>
-    .left-right-swiper-scroll-box {
-        position: relative;
-        display: flex;
-        width: 1145px;
-        overflow: hidden;
-        transition: all 0.3s;
-        padding: 0 30px;
-        margin-right: 5px;
-        .scroll-icon {
-            position: absolute;
-            top: 0;
-            width: 30px;
-            height: 70px;
-            z-index: 9;
-            cursor: pointer;
-            background-image: linear-gradient(270deg, invalid gradient);
-            z-index: 1000;
-        i {
-          position: absolute;
-          top: 5px;
-          width: 20px;
-          height: 20px;
-        }
-        &.left-icon {
-          left: 0;
-          background: url("~@/assets/images/img-mask-left.png") 0 0 no-repeat;
-          // i {
-          //   left: 0;
-          //   background: url("~@/assets/images/icon-arrow-left.png") 0 0 no-repeat;
-          // }
-        }
-        &.left-icon:hover{
-          left: 0;
-          background: url("~@/assets/images/icon-arrow-left.png") 0 0 no-repeat;
+<style lang='scss' scoped>
+.left-right-swiper-scroll-box {
+  position: relative;
+  display: flex;
+  width: 1145px;
+  overflow: hidden;
+  transition: all 0.3s;
+  padding: 0 30px;
+  margin-right: 5px;
+  .scroll-icon {
+    position: absolute;
+    top: 0;
+    width: 30px;
+    height: 70px;
+    z-index: 9;
+    cursor: pointer;
+    background-image: linear-gradient(270deg, invalid gradient);
+    z-index: 1000;
+    i {
+      position: absolute;
+      top: 5px;
+      width: 20px;
+      height: 20px;
+    }
+    &.left-icon {
+      left: 0;
+      background: url("~@/assets/images/img-mask-left.png") 0 0 no-repeat;
+      // i {
+      //   left: 0;
+      //   background: url("~@/assets/images/icon-arrow-left.png") 0 0 no-repeat;
+      // }
+    }
+    &.left-icon:hover{
+      left: 0;
+      background: url("~@/assets/images/icon-arrow-left.png") 0 0 no-repeat;
 
-        }
+    }
 
-        &.right-icon {
-          right: 0;
-          background: url("~@/assets/images/img-mask-right.png") 0 0 no-repeat;
-          // i {
-          //   right: 0;
-          //   background: url("~@/assets/images/icon-arrow-right.png") 0 0 no-repeat;
-          // }
-        }
-        &.right-icon:hover {
-          right: 0;
-          background: url("~@/assets/images/icon-arrow-right.png") 0 0 no-repeat;
+    &.right-icon {
+      right: 0;
+      background: url("~@/assets/images/img-mask-right.png") 0 0 no-repeat;
+      // i {
+      //   right: 0;
+      //   background: url("~@/assets/images/icon-arrow-right.png") 0 0 no-repeat;
+      // }
+    }
+    &.right-icon:hover {
+      right: 0;
+      background: url("~@/assets/images/icon-arrow-right.png") 0 0 no-repeat;
 
-        }
+    }
 
-      }
+  }
 
 
-      .swiper-scroll-content {
-        width: fit-content;
-        display: flex;
-        flex-wrap: nowrap;
-        white-space: nowrap;
-        transition: all 0.3s;
-      }
-    }
-    </style>
+  .swiper-scroll-content {
+    width: fit-content;
+    display: flex;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    transition: all 0.3s;
+  }
+}
+</style>

src/views/eventdetailsdialog.vue

@@ -2939,7 +2939,7 @@ export default {
                   }
                 }
                 if (res.data[i].cameraCode != null) {
-                  markersMap.click = "preview";
+                  //markersMap.click = "preview";
                   // markersMap.parameter = res.data[i].cameraCode
                   markersMap.parameter = {
                     code: res.data[i].cameraCode,

src/views/firespread.vue

@@ -2344,6 +2344,7 @@ export default {
     /************************************责任制-结束****************************************/
     showEventdetailsdialog() {
       this.eventDialog = false;
+      this.cancelEventShow()
       this.$emit('showEventDialog', this.eventCode);
     },
     showheatPlotting() {
@@ -2478,7 +2479,7 @@ export default {
                   }
                 }
                 if (res.data[i].cameraCode != null) {
-                  markersMap.click = 'preview'
+                  //markersMap.click = 'preview'
                   // markersMap.parameter = res.data[i].cameraCode
                   markersMap.parameter = {code:res.data[i].cameraCode,
                     type:res.data[i].cameraFactory?res.data[i].cameraFactory:1,name:res.data[i].cameraName}