feat(layerList): 添加堤防加固段弹窗功能和地图图层管理

- 新增 dyjgPopup.vue 组件，实现堤防加固段信息展示和周边监控查询功能
- 在 layerList/index.vue 中添加险工险段和支流入渭口图层配置
- 为险工险段和入渭口类型添加对应的样式渲染逻辑
- 实现堤防加固段点击事件，触发弹窗显示详细信息
- 优化监测设备数据加载逻辑，避免重复渲染
- 修复水文站弹窗中摄像头状态显示问题，禁用离线设备点击
- 更新 geojson 数据文件，修正坐标点位置和添加新区域数据
- 在主界面注册并引入新的堤防加固段弹窗组件

public/geojson/sw1.geojson

@@ -2,5 +2,5 @@
   "type": "FeatureCollection",
   "name": "sw1",
   "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
-  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.423114,34.204586,368.7] } }]
+  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.620158,34.261077,368.7] } }]
 }

public/geojson/sw2.geojson

@@ -2,5 +2,5 @@
   "type": "FeatureCollection",
   "name": "sw1",
   "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
-  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.347533, 34.201302] } }]
+  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.375698, 34.211524] } }]
 }

public/geojson/仪空段堤防护基加固工程.geojson

@@ -0,0 +1,6 @@
+{
+  "type": "FeatureCollection",
+  "name": "仪空段堤防护基加固工程",
+  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.457471, 34.214228, 0] } }]
+}

public/geojson/建坊段堤防加固工程.geojson

@@ -0,0 +1,6 @@
+{
+  "type": "FeatureCollection",
+  "name": "建坊段堤防加固工程",
+  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.352638, 34.20552, 0] } }]
+}

public/geojson/捞河入口.geojson

@@ -0,0 +1,10 @@
+{
+"type": "FeatureCollection",
+"name": "黑河入口",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { }, "geometry": null },
+{ "type": "Feature", "properties": { }, "geometry": null },
+{ "type": "Feature", "properties": { }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 108.613109878342613, 34.258996448968155 ], [ 108.613560183264184, 34.259213043869735 ], [ 108.613338721827361, 34.258758498996784 ], [ 108.613290738516042, 34.258261242396486 ], [ 108.61326490134843, 34.257821945776676 ], [ 108.612969619432647, 34.25781584441858 ], [ 108.613109878342613, 34.258996448968155 ] ] ] } }
+]
+}

public/geojson/段家村段堤防加固工程.geojson

@@ -0,0 +1,6 @@
+{
+  "type": "FeatureCollection",
+  "name": "段家村段堤防加固工程",
+  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.612214, 34.261494, 0] } }]
+}

src/views/components/layerList/dyjgPopup.vue

@@ -0,0 +1,454 @@
+<template>
+  <div class="dyjg-popup-container" v-if="visible">
+    <div class="dyjg-popup-title">
+      <span class="title-text">{{title}}</span>
+      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="closeModal" />
+    </div>
+    <div class="dyjg-popup-content">
+      <el-radio-group v-model="typeVal" size="mini">
+        <el-radio-button label="1">简介</el-radio-button>
+        <el-radio-button label="2">周边监控查询</el-radio-button>
+      </el-radio-group>
+      <div class="info-container" v-if="typeVal === '1'">
+        <div class="info-content">
+          <div class="info-text">
+            <p v-if="currentInfo.description">{{ currentInfo.description }}</p>
+            <p v-else>暂无堤防加固段简介信息</p>
+          </div>
+          <div class="info-images" v-if="currentInfo.images && currentInfo.images.length > 0">
+            <el-carousel indicator-position="outside" arrow="always">
+              <el-carousel-item v-for="(image, index) in currentInfo.images" :key="index">
+                <img :src="image" alt="堤防加固段图片" class="image-item" />
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+          <div class="no-image" v-else>
+            <img src="@/assets/image/comprehensive/noData.png" alt="" />
+            <div class="txt">暂无相关图片</div>
+          </div>
+        </div>
+      </div>
+      <div class="monitor-container" v-else>
+        <div class="monitor-search">
+          <span>查询半径</span>
+          <div class="input-bg">
+            <el-input v-model="radius" size="mini" type="number" min="0" placeholder="输入半径"></el-input>
+          </div>
+          <span>&nbsp;km&nbsp;</span>
+          <el-button type="primary" size="mini" @click="search">查询</el-button>
+        </div>
+        <div class="monitor-list">
+          <template v-if="monitorList.length > 0">
+            <ul>
+              <li v-for="(item, index) in monitorList" :key="index" :class="{ active: activeIndex == index, 'disabled': item.status != '0' }">
+                <span v-if="item.status == '0'" @click="toLoadVideo(item, index)">{{ item.devName }}</span>
+                <span v-else class="disabled">{{ item.devName }}</span>
+              </li>
+            </ul>
+            <div class="monitor-video" v-if="artShow">
+              <EasyPlayer
+                ref="playerRef"
+                playerName="测试"
+                :videoUrl="videoOption.url"
+                class="video-player screenshot"
+                live
+                speed
+                :easyStretch="true"
+                :muted="true"
+                :has-audio="false"
+                :reconnection="true"
+                @click.native.stop
+              />
+            </div>
+          </template>
+          <template v-else>
+            <div class="noData">
+              <img src="@/assets/image/comprehensive/noData.png" alt="" />
+              <div class="txt">暂无摄像头</div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { warning } from '@/utils'
+import { getVideoRealtimeUrl } from '@/api/largeScreenApi'
+import { deviceSimpleList } from '@/api/largeScreenApi'
+
+let graphicsLayer = null
+
+export default {
+  name: 'DyjgPopup',
+  data() {
+    return {
+      visible: false,
+      typeVal: '1',
+      radius: '',
+      title: '堤防加固段',
+      currentInfo: {
+        description: '',
+        images: []
+      },
+      activeIndex: 0,
+      monitorList: [],
+      stationGraphic: {},
+      videoOption: { url: '' },
+      artShow: false
+    }
+  },
+  computed: {
+    carouselHeight() {
+      // 计算轮播图高度，确保不超过弹窗内容区域的高度
+      return '150px'; // 设置一个合适的默认高度
+    }
+  },
+  mounted() {
+    this.$globalEventBus.$on('clickDyjgModal', (data) => {
+      this.visible = true
+      this.title = data.title || '堤防加固段'
+      this.stationGraphic = data.graphic
+      this.setDyjgInfo(data.id)
+    })
+  },
+  destroyed() {
+    this.$globalEventBus.$off('clickDyjgModal')
+    if (graphicsLayer) {
+      window.map.removeLayer(graphicsLayer)
+    }
+  },
+  methods: {
+    // 设置堤防加固段信息
+    setDyjgInfo(id) {
+      // 根据不同ID设置不同的信息和图片
+      const dyjgInfo = {
+        '1-5-1': {
+          description: '渭河兴平庄头马村--仪空段堤防护基加固工程:2023年10月18日，我市发展和改革局以兴发改[2023]481号文件批复了《渭河兴平庄头马村--仪空段堤防护基加固工程初步设计报告》，批复投资2591.40万元。批复建设规模及内容为：加固堤防长度1.2km，加固护基坝垛16座，新建护岸476m，配套建设其他附属设施',
+          images: [
+            require('@/assets/image/dyjg/1.png'),
+          ]
+        },
+        '1-5-2': {
+          description: '渭河兴平市段家村段堤防加固工程:2025年7月29日我市发改局以兴发改【2025】317号文件批复该工程项目建议书，批复投资1113.47万元，批复建设内容为：干砌石护坡952m，散抛石平台887m，笼石护基952m。',
+          images: [
+            require('@/assets/image/dyjg/2.png'),
+          ]
+        },
+        '1-5-3': {
+          description: '渭河兴平市建坊段堤防加固工程:该项目计划投资1366.76万元，建设内容为：新建坝垛8座；新建连坝路513m；新建进坝路1条，长77m；附属设施及绿化。目前，设计报告正在修订。',
+          images: [
+            require('@/assets/image/dyjg/3.png')
+          ]
+        }
+      }
+      
+      // 如果当前ID存在信息则使用，否则使用默认信息
+      if (dyjgInfo[id]) {
+        this.currentInfo = dyjgInfo[id]
+      } else {
+        this.currentInfo = {
+          description: '该堤防加固段工程主要用于提升堤防的防洪能力，通过多种工程技术措施确保渭河沿岸的安全。',
+          images: []
+        }
+      }
+    },
+    
+    search() {
+      if (this.radius === '') {
+        warning('请输入查询半径')
+        return
+      }
+      this.addCameraToMap()
+      this.getAroundAnalysisList()
+    },
+    
+    getAroundAnalysisList() {
+      let radius = this.radius ? parseFloat(this.radius) * 1000 : 1000
+      window
+        .requestSDK(
+          '/sddnWeiHe/device/aroundAnalysisList',
+          {
+            longitude: this.stationGraphic.coordinate[0],
+            latitude: this.stationGraphic.coordinate[1],
+            radius: radius,
+            type: '1',
+            pageNum: 1,
+            pageSize: 5,
+            notFilterSameLngLat: true
+          },
+          {},
+          'post'
+        )
+        .then((res) => {
+          if (res.code == 200) {
+            this.monitorList = res.data
+            if (res.data.length > 0) {
+              this.toLoadVideo(this.monitorList[0], 0)
+            }
+            this.addCameraIcon()
+          }
+        })
+    },
+    
+    toLoadVideo(row, index) {
+      // 检查摄像头状态，只有状态为'0'的摄像头才加载视频
+      if (row.status !== '0') {
+        return
+      }
+      this.activeIndex = index
+      this.artShow = false
+      this.flyToPoint(row)
+      getVideoRealtimeUrl({
+        deviceCode: row.deviceCode,
+        channelCode: row.channelCode,
+        netType: 2,
+        protocolType: 9,
+        streamType: 1
+      }).then((res) => {
+        if (res.code == 200) {
+          this.artShow = true
+          this.$set(this.videoOption, 'url', res.data.streamUrl)
+        } else if (res.code == 4001) {
+          this.$message.warning(JSON.parse(res.msg).resultMsg)
+        } else if (res.code == 400) {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+
+    addCameraToMap() {
+      if (graphicsLayer) {
+        window.map.removeLayer(graphicsLayer)
+      }
+      graphicsLayer = new this.mars3d.layer.GraphicLayer()
+      window.map.addLayer(graphicsLayer)
+      const graphic = new this.mars3d.graphic.CircleEntity({
+        position: this.stationGraphic.coordinate,
+        style: {
+          radius: this.radius * 1000,
+          color: '#498EE3',
+          opacity: 0.3,
+          outline: true,
+          outlineWidth: 2,
+          outlineColor: '#4D7BFF',
+          clampToGround: true
+        }
+      })
+      graphicsLayer.addGraphic(graphic)
+    },
+    
+    // 添加摄像头图标
+    addCameraIcon() {
+      if (!graphicsLayer) {
+        graphicsLayer = new this.mars3d.layer.GraphicLayer()
+        window.map.addLayer(graphicsLayer)
+      }
+      this.monitorList.forEach((item, index) => {
+        const graphic = new this.mars3d.graphic.BillboardEntity({
+          position: [item.longitude, item.latitude],
+          style: {
+            image: require('@/assets/image/common/camera.png'),
+            scale: 0.8,
+            horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
+            verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM
+          }
+        })
+        //添加可视化区域
+        const sector = new this.mars3d.graphic.CircleEntity({
+          id: 'sector_' + index,
+          positions: [[item.longitude, item.latitude, 0]],
+          style: {
+            radius: 3000,
+            color: '#32edda',
+            opacity: 0.35,
+            outline: true,
+            outlineColor: '#32edda',
+            visibleDepth: false,
+            clampToGround: true
+          },
+          attr: { deviceCode: item.deviceCode, channelCode: item.channelCode, devName: item.devName }
+        })
+        graphicsLayer.addGraphic(sector)
+        graphicsLayer.addGraphic(graphic)
+      })
+    },
+    
+    // 定位到点
+    flyToPoint(point) {
+      window.map.flyToPoint([point.longitude, point.latitude], {
+        radius: 5000, // 飞行距离目标点的距离
+        duration: 2 // 飞行持续时间（秒）
+      })
+    },
+    
+    closeModal() {
+      this.visible = false
+      this.radius = ''
+      this.typeVal = '1'
+      this.monitorList = []
+      if (graphicsLayer) {
+        window.map.removeLayer(graphicsLayer)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.dyjg-popup-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -80%);
+  width: px-to-rem(600);
+  z-index: 9999;
+  .dyjg-popup-title {
+    background: url('@/assets/image/common/popup_title_bg.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);
+    }
+  }
+  .dyjg-popup-content {
+    height: px-to-rem(354);
+    background: rgba(#233d6c, 0.8);
+    padding: px-to-rem(10);
+    :deep(.el-radio-button__inner) {
+      background: transparent;
+      color: #4f9fff;
+      border-color: #4f9fff;
+      font-size: px-to-rem(14);
+    }
+    :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
+      background-color: #4f9fff;
+      color: #fff;
+    }
+    .info-container {
+      height: calc(100% - 40px);
+      .info-content {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        .info-text {
+          color: #fff;
+          font-size: px-to-rem(14);
+          padding: 0 px-to-rem(10) px-to-rem(10);
+          line-height: 1.6;
+          p {
+            margin: 0 0 px-to-rem(10) 0;
+          }
+        }
+        .info-images {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          :deep(.el-carousel__container) {
+            height: 150px !important;
+          }
+          .image-item {
+            width: 100%;
+            height: auto;
+            object-fit: cover;
+            margin: 0 auto;
+          }
+        }
+        .no-image {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          color: #fff;
+          .txt {
+            font-size: px-to-rem(14);
+            margin-top: px-to-rem(10);
+          }
+        }
+      }
+    }
+    .monitor-container {
+      .monitor-search {
+        display: flex;
+        align-items: center;
+        margin: px-to-rem(10);
+        border-bottom: px-to-rem(1) solid #4d628b;
+        .input-bg {
+          margin: px-to-rem(10) 0;
+          background: url('@/assets/image/safety-inspection/search-bg.png') no-repeat 0 0 / 100% 100%;
+          :deep(.el-input__inner) {
+            background: transparent;
+            color: #fff;
+            border: none;
+          }
+        }
+        span {
+          color: #fff;
+          margin-right: px-to-rem(10);
+        }
+      }
+      .monitor-list {
+        display: flex;
+        justify-content: space-between;
+        .monitor-video {
+          width: calc(100% - px-to-rem(180));
+          height: px-to-rem(230);
+        }
+        ul {
+          width: px-to-rem(180);
+          height: px-to-rem(230);
+          overflow-y: auto;
+          border-right: px-to-rem(1) solid #4d628b;
+          li {
+            color: #fff;
+            padding: px-to-rem(10);
+            height: px-to-rem(36);
+            line-height: px-to-rem(16);
+            font-size: px-to-rem(16);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            cursor: pointer;
+            &:hover {
+              background-color: #498ee3;
+            }
+            &.active {
+              background-color: #498ee3;
+            }
+            &.disabled {
+              color: #999;
+              cursor: not-allowed;
+              background-color: #333 !important;
+              &:hover {
+                background-color: #333 !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.noData {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  img {
+    margin-top: px-to-rem(40);
+    margin-bottom: px-to-rem(20);
+  }
+  .txt {
+    color: #fff;
+    font-size: px-to-rem(14);
+  }
+}
+</style>

src/views/components/layerList/index.vue

@@ -81,7 +81,25 @@ export default {
                 { id: '1-4-2', label: '汤坊管理站', meta: { type: 'point', url: '/sddnWeihe/geojson/汤坊管理站.geojson' } },
                 { id: '1-4-3', label: '阜寨管理站', meta: { type: 'point', url: '/sddnWeihe/geojson/阜寨管理站.geojson' } }
               ]
-            }
+            },
+            {
+              id: '1-5',
+              label: '险工险段',
+              children: [
+                { id: '1-5-1', label: '仪空险工险段', meta: { type: 'point', url: '/sddnWeihe/geojson/仪空段堤防护基加固工程.geojson' } },
+                { id: '1-5-2', label: '段家村险工险段', meta: { type: 'point', url: '/sddnWeihe/geojson/段家村段堤防加固工程.geojson' } },
+                { id: '1-5-3', label: '建坊险工险段', meta: { type: 'point', url: '/sddnWeihe/geojson/建坊段堤防加固工程.geojson' } }
+              ]
+            },
+             {
+               id: '1-6',
+               label: '支流入渭口',
+               children: [
+                 { id: '1-5-1', label: '黑河入渭口', meta: { type: 'point', url: '/sddnWeihe/geojson/黑河入口.geojson' } },
+                 { id: '1-5-2', label: '大耿峪河入渭口', meta: { type: 'point', url: '/sddnWeihe/geojson/大耿峪河入口.geojson' } },
+                 { id: '1-5-3', label: '捞河入渭口', meta: { type: 'point', url: '/sddnWeihe/geojson/捞河入口.geojson' } }
+               ]
+             }
           ]
         },
         {
@@ -346,7 +364,7 @@ export default {
             ...ptStyle
           }
         }
-      } else if (name.indexOf('管理站') > -1) {
+      } else if (name.indexOf('管理站') > -1 || name.indexOf('险工险段') > -1) {
         const ptStyle = this.getPointStyle(name)
         return {
           type: 'billboard',
@@ -355,7 +373,7 @@ export default {
             ...ptStyle
           }
         }
-      } else if (name.indexOf('采砂区') > -1) {
+      } else if (name.indexOf('采砂区') > -1 || name.indexOf('入渭口') > -1) {
         return {
           type: 'polygon',
           styleOptions: {
@@ -433,6 +451,11 @@ export default {
           },
           { template: false, offsetY: 0 }
         )
+      } else if (['1-5-1', '1-5-2', '1-5-3'].includes(layer.id)) {
+        // 堤防加固段点击事件
+        layer.on(mars3d.EventType.click, function (event) {
+          _that.$globalEventBus.$emit('clickDyjgModal', { id: layer.id, title: layer.options.name, graphic: event.graphic })
+        })
       } else if (['3-1', '3-2', '3-3'].includes(layer.id)) {
         const coorList = {
           兴平市仪空采砂区: [108.461726, 34.213397, 100],
@@ -446,6 +469,12 @@ export default {
       }
     },
     getMonitorData() {
+      // 检查是否已经加载过监测设备数据，避免重复渲染
+      if (graphicsLayer) {
+        // 如果已存在，先移除旧的图层
+        window.map.removeLayer(graphicsLayer)
+      }
+      
       graphicsLayer = new this.mars3d.layer.GraphicLayer()
       window.map.addLayer(graphicsLayer)
       deviceSimpleList({ pageNum: 1, pageSize: 10, platFlag: '1', operType: '0' }).then((res) => {
@@ -518,7 +547,6 @@ export default {
     removeMonitorData() {
       if (graphicsLayer) {
         graphicsLayer.show = false
-        // window.map.removeLayer(graphicsLayer)
       }
     },
     removeCsqLayer(name) {
@@ -533,8 +561,10 @@ export default {
     this.$globalEventBus.$off('toggleLeftPanel')
     // 把图层上绑定的事件也清掉
     Object.values(layerCache).forEach((l) => l.off('click'))
-    window.map.removeLayer(graphicsLayer)
-    graphicsLayer = null
+    if (graphicsLayer) {
+      window.map.removeLayer(graphicsLayer)
+      graphicsLayer = null
+    }
     window.map.removeLayer(csqGraphicsLayer)
     csqGraphicsLayer = null
   }

src/views/index.vue

@@ -23,6 +23,7 @@
           <PlanDialog />
           <AnnounceDetailPopup />
           <CsqPopup/>
+          <DyjgPopup />
         </div>
       </el-main>
     </el-container>
@@ -45,6 +46,7 @@ import PlanDialog from './components/layerList/planDialog.vue'
 import VideoPlay from './video-play-popup/index.vue'
 import InspectVideoPlay from './video-play-popup/inspect.vue'
 import AnnounceDetailPopup from './announce-detail-popup/index.vue'
+import DyjgPopup from './components/layerList/dyjgPopup.vue'
 const basePathUrl = window.basePathUrl || ''
 export default {
   name: 'MainView',
@@ -63,7 +65,8 @@ export default {
     VideoPlay,
     InspectVideoPlay,
     AnnounceDetailPopup,
-    CsqPopup
+    CsqPopup,
+    DyjgPopup
   },
   data() {
     return {

src/views/water-station-popup/index.vue

@@ -82,8 +82,9 @@
         <div class="monitor-list">
           <template v-if="monitorList.length > 0">
             <ul>
-              <li v-for="(item, index) in monitorList" :key="index" :class="{ active: activeIndex == index }">
-                <span @click="toLoadVideo(item, index)">{{ item.devName }}</span>
+              <li v-for="(item, index) in monitorList" :key="index" :class="{ active: activeIndex == index, 'disabled': item.status != '0' }">
+                <span v-if="item.status == '0'" @click="toLoadVideo(item, index)">{{ item.devName }}</span>
+                <span v-else class="disabled">{{ item.devName }}</span>
               </li>
             </ul>
             <div class="monitor-video" v-if="artShow">
@@ -360,6 +361,10 @@ export default {
         })
     },
     toLoadVideo(row, index) {
+      // 检查摄像头状态，只有状态为'0'的摄像头才加载视频
+      if (row.status !== '0') {
+        return
+      }
       this.activeIndex = index
       this.artShow = false
       this.flyToPoint(row)
@@ -559,6 +564,14 @@ export default {
             &.active {
               background-color: #498ee3;
             }
+            &.disabled {
+              color: #999;
+              cursor: not-allowed;
+              background-color: #333 !important;
+              &:hover {
+                background-color: #333 !important;
+              }
+            }
           }
         }
       }