feat:新增综合概览预案弹窗

src/views/components/layerList/index.vue

@@ -76,9 +76,20 @@ export default {
             { id: '3-2', label: '兴平市团结采砂区', meta: { type: 'polygon', url: '/geojson/tuanjie.geojson' } },
             { id: '3-3', label: '兴平市汤坊龙兴1区采砂区', meta: { type: 'polygon', url: '/geojson/longxing.geojson' } }
           ]
+        },
+        {
+          id: '4',
+          label: '防汛应急预案',
+          type: 'plan',
+          children: [
+            { id: '4-1', type: 'plan', label: '2025年度渭河兴平段水灾害防御工作方案' },
+            { id: '4-2', type: 'plan', label: '2025年度渭河水灾害防御工作方案' },
+            { id: '4-3', type: 'plan', label: '陕西省防汛应急预案' }
+          ]
         }
       ],
-      mainMenu: ''
+      mainMenu: '',
+      checkedNodes: []
     }
   },
   created() {
@@ -105,48 +116,61 @@ export default {
       this.isExpanded = !this.isExpanded
     },
 
-    async onCheckChange(node, checked) {
+    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 id = node.id
-      if (!node.meta?.url) {
-        return
-      }
       if (checked) {
-        // 已缓存直接显示
-        if (layerCache[id]) {
-          layerCache[id].show = true
-          return
-        }
-        // 开始加载
-        this.$set(node, 'loading', true)
-        this.$set(node, 'error', '')
-        try {
-          const layer = new mars3d.layer.GeoJsonLayer({
-            id: node.id,
-            name: node.label,
-            url: node.meta.url,
-            crs: 'EPSG:4326',
-            clampToGround: true,
-            symbol: this.getStyleByName(node.label)
-          })
-          console.log(window.map, 111111111)
-          window.map.addLayer(layer)
-          this.bindEvent(layer)
-          layerCache[id] = layer
-          // 父子关联：勾选子节点时，父节点作为 groupId
-          const parent = this.$refs.treeRef.getNode(id).parent
-          if (parent && parent.data.id) {
-            layer.options.parentId = parent.data.id
+        if (node.type && node.type == 'plan') {
+          this.$globalEventBus.$emit('showPlanDialog',{list:this.checkedNodes})
+        } else {
+          if (!node.meta?.url) {
+            return
+          }
+          // 已缓存直接显示
+          if (layerCache[id]) {
+            layerCache[id].show = true
+            return
+          }
+          // 开始加载
+          this.$set(node, 'loading', true)
+          this.$set(node, 'error', '')
+          try {
+            const layer = new mars3d.layer.GeoJsonLayer({
+              id: node.id,
+              name: node.label,
+              url: node.meta.url,
+              crs: 'EPSG:4326',
+              clampToGround: true,
+              symbol: this.getStyleByName(node.label)
+            })
+            console.log(window.map, 111111111)
+            window.map.addLayer(layer)
+            this.bindEvent(layer)
+            layerCache[id] = layer
+            // 父子关联：勾选子节点时，父节点作为 groupId
+            const parent = this.$refs.treeRef.getNode(id).parent
+            if (parent && parent.data.id) {
+              layer.options.parentId = parent.data.id
+            }
+          } catch (e) {
+            this.$set(node, 'error', e.message || '加载失败')
+          } finally {
+            this.$set(node, 'loading', false)
           }
-        } catch (e) {
-          this.$set(node, 'error', e.message || '加载失败')
-        } finally {
-          this.$set(node, 'loading', false)
         }
       } else {
         // 取消勾选 -> 销毁
-        if (layerCache[id]) {
-          window.map.removeLayer(layerCache[id])
-          delete layerCache[id]
+        if (node.type && node.type == 'plan') {
+          this.$globalEventBus.$emit('showPlanDialog',{list:this.checkedNodes})
+        } else {
+          if (layerCache[id]) {
+            window.map.removeLayer(layerCache[id])
+            delete layerCache[id]
+          }
         }
       }
     },
@@ -249,8 +273,10 @@ export default {
       }
     }
     .custom-tree-node {
-      white-space: wrap;
       font-size: px-to-rem(16);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
   }
 }

src/views/components/layerList/planDialog.vue

@@ -0,0 +1,150 @@
+<template>
+  <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" />
+    </div>
+    <div class="plan-content">
+      <el-tabs tab-position="left" style="height: 5.85rem">
+        <el-tab-pane :label="item.label" v-for="(item, index) in this.planItems" :key="index">
+          <el-carousel :ref="'mainCarousel' + index" :interval="5000" :autoplay="false" arrow="always" indicator-position="none">
+            <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)">
+                  <img src="@/assets/image/smart-early-warning/fullScreen.png" alt="" />
+                </div>
+              </div>
+            </el-carousel-item>
+          </el-carousel>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      planList: [],
+      imgsOne: [],
+      imgsTwo: [],
+      imgsThree: []
+    }
+  },
+  created() {
+    this.loadImages()
+  },
+  mounted() {
+    this.$globalEventBus.$on('showPlanDialog', (data) => {
+      this.planList = data.list
+      this.visible = data.list.length > 0 ? true : false
+    })
+  },
+  computed: {
+    planItems() {
+      return this.planList.map((item) => {
+        if (item.id === '4-1') {
+          return { ...item, imageList: this.imgsTwo }
+        } else if (item.id === '4-2') {
+          return { ...item, imageList: this.imgsOne }
+        } else if (item.id == '4-3') {
+          return { ...item, imageList: this.imgsThree }
+        }
+        return item
+      })
+    }
+  },
+  methods: {
+    loadImages() {
+      const imagesRequireContext1 = require.context('@/assets/image/planOne', false, /\.png$|\.jpg$/)
+      this.imgsOne = imagesRequireContext1.keys().map((imagePath) => imagesRequireContext1(imagePath))
+      const imagesRequireContext2 = require.context('@/assets/image/planTwo', false, /\.png$|\.jpg$/)
+      this.imgsTwo = imagesRequireContext2.keys().map((imagePath2) => imagesRequireContext2(imagePath2))
+      const imagesRequireContext3 = require.context('@/assets/image/planThree', false, /\.png$|\.jpg$/)
+      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()
+    }
+  },
+  destroyed() {
+    this.$globalEventBus.$off('showPlanDialog')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.plan-dialog-container {
+  position: absolute;
+  top: px-to-rem(270);
+  right: calc(50% - px-to-rem(590));
+  width: px-to-rem(1180);
+  z-index: 55;
+  .plan-title {
+    background: url('@/assets/image/common/planTitleBg.png') no-repeat;
+    background-size: 100% 100%;
+    height: px-to-rem(39);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 px-to-rem(20);
+    font-size: px-to-rem(16);
+    color: #fff;
+    .title-text {
+      font-weight: bold;
+      margin-left: px-to-rem(20);
+    }
+  }
+  .plan-content {
+    background-color: rgba(35, 61, 108, 0.8);
+    :deep(.el-tabs__content) {
+      padding: px-to-rem(10);
+      padding-left: 0;
+    }
+    :deep(.el-tabs__item) {
+      background-color: transparent;
+      color: #fff;
+      width: px-to-rem(170);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: px-to-rem(36);
+      line-height: px-to-rem(36);
+    }
+    :deep(.el-tabs__item.is-active) {
+      background: #498ee3;
+      font-weight: 400;
+      font-size: px-to-rem(16);
+      color: #f5f5f5;
+    }
+    :deep(.el-tabs__nav-wrap::after) {
+      background-color: #4d628b;
+    }
+    :deep(.el-carousel__container) {
+      height: px-to-rem(563);
+    }
+  }
+  .fullscreen-btn {
+    position: absolute;
+    bottom: px-to-rem(10);
+    right: px-to-rem(10);
+    width: px-to-rem(40);
+    height: px-to-rem(40);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 10;
+    transition: all 0.3s;
+  }
+
+  .fullscreen-btn:hover {
+    transform: scale(1.1);
+  }
+}
+</style>

src/views/index.vue

@@ -19,6 +19,7 @@
           <HydrologicInfo v-if="mainMenu === 'hydrologicInfo'"></HydrologicInfo>
           <SmartEarlyWarning v-if="mainMenu === 'smartEarlyWarning'" />
           <WaterStationPopup />
+          <PlanDialog/>
         </div>
       </el-main>
     </el-container>
@@ -37,6 +38,7 @@ import HydrologicInfo from '@/views/hydrologic-info/index'
 import WaterStationPopup from '@/views/water-station-popup'
 import AddInspectionTask from './safety-inspection/addInspectionTask.vue'
 import SmartEarlyWarning from '@/views/smart-early-warning/index'
+import PlanDialog from './components/layerList/planDialog.vue'
 const basePathUrl = window.basePathUrl || ''
 export default {
   name: 'MainView',
@@ -51,7 +53,8 @@ export default {
     HydrologicInfo,
     WaterStationPopup,
     AddInspectionTask,
-    SmartEarlyWarning
+    SmartEarlyWarning,
+    PlanDialog
   },
   data() {
     return {