综合业务页面添加监测点图标

src/views/waterStation/BusinessBg.vue

@@ -30,6 +30,44 @@
           <div class="polder-popup-item"><span class="label">开泵流量：</span><span class="value">8.5 m³/s</span></div>
         </div>
       </div>
+      
+      <!-- 监测点 -->
+      <div 
+        v-for="monitor in monitoringPoints" 
+        :key="monitor.id"
+        class="monitoring-point"
+        :class="monitor.status"
+        :style="{ left: monitor.position.x, top: monitor.position.y }"
+        @mouseenter="hoverMonitor = monitor.id"
+        @mouseleave="hoverMonitor = null"
+      >
+        <div class="monitor-popup" v-if="hoverMonitor === monitor.id">
+          <div class="monitor-popup-title">{{ monitor.name }}</div>
+          <div class="monitor-popup-item"><span class="label">实时水位：</span><span class="value">{{ monitor.currentLevel }}m</span></div>
+          <div class="monitor-popup-item"><span class="label">警戒水位：</span><span class="value">{{ monitor.warningLevel }}m</span></div>
+          <div class="monitor-popup-item"><span class="label">历史极值：</span><span class="value">{{ monitor.historyMax }}m</span></div>
+          <div class="monitor-popup-item"><span class="label">更新时间：</span><span class="value">{{ monitor.updateTime }}</span></div>
+          <div class="monitor-popup-item"><span class="label">监测点编号：</span><span class="value">{{ monitor.id }}</span></div>
+          <div class="monitor-popup-item"><span class="label">所属区域：</span><span class="value">{{ monitor.area }}</span></div>
+        </div>
+      </div>
+      
+      <!-- 泵站 -->
+      <div 
+        v-for="pump in pumpStations" 
+        :key="pump.id"
+        class="pump-station"
+        :class="{ 'pump-station-right': parseFloat(pump.position.x) > 50 }"
+        :style="{ left: pump.position.x, top: pump.position.y }"
+        @mouseenter="hoverPump = pump.id"
+        @mouseleave="hoverPump = null"
+      >
+        <div class="pump-popup" v-if="hoverPump === pump.id" :class="{ 'pump-popup-left': parseFloat(pump.position.x) > 50 }">
+          <div class="pump-popup-title">{{ pump.name }}</div>
+          <div class="pump-popup-item"><span class="label">泵站开度：</span><span class="value">{{ pump.opening }}%</span></div>
+          <div class="pump-popup-item"><span class="label">排涝流量：</span><span class="value">{{ pump.flow }} m³/s</span></div>
+        </div>
+      </div>
     </template>
     
     <!-- 孔巷联圩详情 -->
@@ -76,6 +114,116 @@ const props = defineProps({
 const emit = defineEmits(['showPolder', 'hidePolder', 'selectDetail', 'backToOverview', 'showHydrologyDetail'])
 
 const selectedHydrology = ref(null)
+const hoverMonitor = ref(null)
+const hoverPump = ref(null)
+
+// 泵站数据
+const pumpStations = ref([
+  {
+    id: 'P001',
+    name: '泵站1',
+    opening: '80',
+    flow: '12.5',
+    position: {
+      x: '38%',
+      y: '42%'
+    }
+  },
+  {
+    id: 'P002',
+    name: '泵站2',
+    opening: '60',
+    flow: '8.3',
+    position: {
+      x: '55%',
+      y: '37%'
+    }
+  },
+  {
+    id: 'P003',
+    name: '泵站3',
+    opening: '100',
+    flow: '15.7',
+    position: {
+      x: '73%',
+      y: '59%'
+    }
+  }
+])
+
+// 监测点数据
+const monitoringPoints = ref([
+  {
+    id: 'M001',
+    name: '监测点1',
+    currentLevel: '2.5',
+    warningLevel: '3.0',
+    historyMax: '4.2',
+    updateTime: '2024-02-12 10:00',
+    area: '吴淞联圩',
+    status: 'normal', // normal, warning, overlimit
+    position: {
+      x: '25%',
+      y: '30%'
+    }
+  },
+  {
+    id: 'M002',
+    name: '监测点2',
+    currentLevel: '2.8',
+    warningLevel: '3.0',
+    historyMax: '4.0',
+    updateTime: '2024-02-12 10:05',
+    area: '张东联圩',
+    status: 'warning',
+    position: {
+      x: '48%',
+      y: '35%'
+    }
+  },
+  {
+    id: 'M003',
+    name: '监测点3',
+    currentLevel: '3.2',
+    warningLevel: '3.0',
+    historyMax: '4.5',
+    updateTime: '2024-02-12 09:55',
+    area: '孔巷联圩',
+    status: 'overlimit',
+    position: {
+      x: '65%',
+      y: '40%'
+    }
+  },
+  {
+    id: 'M004',
+    name: '监测点4',
+    currentLevel: '2.4',
+    warningLevel: '3.0',
+    historyMax: '3.8',
+    updateTime: '2024-02-12 10:10',
+    area: '张西联圩',
+    status: 'normal',
+    position: {
+      x: '32%',
+      y: '55%'
+    }
+  },
+  {
+    id: 'M005',
+    name: '监测点5',
+    currentLevel: '2.9',
+    warningLevel: '3.0',
+    historyMax: '4.1',
+    updateTime: '2024-02-12 10:08',
+    area: '张东联圩',
+    status: 'warning',
+    position: {
+      x: '55%',
+      y: '70%'
+    }
+  }
+])
 
 // 监听selectedPolderDetail变化，当回到圩区总览时重置selectedHydrology
 watch(() => props.selectedPolderDetail, (newValue) => {
@@ -274,5 +422,148 @@ function handleBack() {
       top: 64%;
     }
   }
+  
+  // 监测点样式
+  .monitoring-point {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 100;
+    transform: translate(-50%, -50%);
+    transition: all 0.3s ease;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    
+    &:hover {
+      transform: translate(-50%, -50%) scale(1.5);
+      box-shadow: 0 0 15px rgba(48, 220, 255, 0.8);
+    }
+    
+    &.normal {
+      background-color: #00ff88;
+      box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
+    }
+    
+    &.warning {
+      background-color: #ffd700;
+      box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
+    }
+    
+    &.overlimit {
+      background-color: #ff4444;
+      box-shadow: 0 0 10px rgba(255, 68, 68, 0.6);
+    }
+  }
+  
+  // 监测点弹框
+  .monitor-popup {
+    position: absolute;
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 10px;
+    background: rgba(0, 20, 40, 0.95);
+    border: 1px solid rgba(48, 220, 255, 0.5);
+    border-radius: 6px;
+    padding: 10px;
+    min-width: 180px;
+    z-index: 200;
+    
+    &-title {
+      color: #30dcff;
+      font-size: 14px;
+      font-weight: bold;
+      text-align: center;
+      margin-bottom: 8px;
+      padding-bottom: 6px;
+      border-bottom: 1px solid rgba(48, 220, 255, 0.3);
+    }
+    
+    &-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 3px 0;
+      font-size: 11px;
+      
+      .label {
+        color: rgba(255, 255, 255, 0.7);
+      }
+      
+      .value {
+        color: #30dcff;
+        font-weight: bold;
+      }
+    }
+  }
+  
+  // 泵站样式
+  .pump-station {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    cursor: pointer;
+    z-index: 100;
+    transform: translate(-50%, -50%);
+    transition: all 0.3s ease;
+    box-shadow: 0 0 10px rgba(255, 107, 107, 0.6);
+    
+    &:hover {
+      transform: translate(-50%, -50%) scale(1.3);
+      box-shadow: 0 0 15px rgba(255, 107, 107, 0.8);
+    }
+  }
+  
+  // 泵站弹框
+  .pump-popup {
+    position: absolute;
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 10px;
+    background: rgba(0, 20, 40, 0.95);
+    border: 1px solid rgba(255, 107, 107, 0.5);
+    border-radius: 4px;
+    padding: 8px;
+    min-width: 140px;
+    z-index: 200;
+    
+    &-title {
+      color: #ff6b6b;
+      font-size: 12px;
+      font-weight: bold;
+      text-align: center;
+      margin-bottom: 6px;
+      padding-bottom: 4px;
+      border-bottom: 1px solid rgba(255, 107, 107, 0.3);
+    }
+    
+    &-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 2px 0;
+      font-size: 10px;
+      
+      .label {
+        color: rgba(255, 255, 255, 0.7);
+      }
+      
+      .value {
+        color: #ff6b6b;
+        font-weight: bold;
+      }
+    }
+    
+    &-left {
+      left: auto;
+      right: 100%;
+      margin-left: 0;
+      margin-right: 10px;
+      transform: translateY(-50%);
+    }
+  }
 }
 </style>

src/views/waterStation/TopStats.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="top-count-card">
+    <div v-for="(item, index) in statsData" :key="index" class="count-card">
+      <div class="count-card-icon" :class="'icon-' + item.icon"></div>
+      <div class="count-card-content">
+        <div class="count-card-title">
+          <div class="title-zh">{{ item.zh }}</div>
+        </div>
+        <div class="count-card-value">
+          <div class="value">{{ item.value }}</div>
+          <div class="unit">{{ item.unit }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+
+// 统计数据
+const statsData = ref([
+  {
+    icon: "xiaoshoujine",
+    zh: "圩区监测覆盖率",
+    value: 98.5,
+    unit: "%"
+  },
+  {
+    icon: "zongxiaoliang",
+    zh: "河道水质达标率",
+    value: 92.3,
+    unit: "%"
+  },
+  {
+    icon: "xiaoshoujine",
+    zh: "出入境监测覆盖率",
+    value: 100,
+    unit: "%"
+  },
+  {
+    icon: "zongxiaoliang",
+    zh: "预警数量",
+    value: 12,
+    unit: "个"
+  },
+  {
+    icon: "xiaoshoujine",
+    zh: "处置完成率",
+    value: 95.8,
+    unit: "%"
+  }
+])
+</script>
+
+<style lang="scss">
+.top-count-card {
+  position: absolute;
+  left: 560px;
+  right: 560px;
+  top: 130px;
+  display: flex;
+  justify-content: center;
+  z-index: 9;
+  & > div {
+    padding: 0 35px;
+  }
+}
+
+.count-card {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  &-icon {
+    width: 48px;
+    height: 48px;
+    margin-right: 15px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100%;
+    &.icon-xiaoshoujine {
+      background-image: url("~@/assets/images/icon1.png");
+    }
+    &.icon-zongxiaoliang {
+      background-image: url("~@/assets/images/icon2.png");
+    }
+  }
+  &-content {
+    display: flex;
+    flex-direction: column;
+  }
+  &-title {
+    margin-bottom: 5px;
+    .title-zh {
+      font-weight: bold;
+      font-size: 16px;
+      color: #ffffff;
+      white-space: nowrap;
+    }
+  }
+  &-value {
+    display: flex;
+    align-items: baseline;
+    .value {
+      font-family: D-DIN;
+      font-weight: bold;
+      font-size: 24px;
+      color: #ffffff;
+      letter-spacing: 1px;
+      margin-right: 5px;
+      text-shadow: 0px 0px 18px rgba(255, 255, 255, 0.7);
+      white-space: nowrap;
+    }
+    .unit {
+      font-weight: 500;
+      font-size: 12px;
+      color: #ffffff;
+      opacity: 0.5;
+      white-space: nowrap;
+    }
+  }
+}
+</style>

src/views/waterStation/index.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="water-station-content">
+    <!-- 顶部统计卡片 -->
+    <TopStats />
     <!-- 圩区总览 -->
     <template v-if="!selectedPolderDetail">
       <div class="left-panel">
@@ -276,6 +278,7 @@ import { ref, computed } from "vue"
 import mCard from "@/components/mCard/index.vue"
 import VChart from "vue-echarts"
 import * as echarts from "echarts"
+import TopStats from "./TopStats.vue"
 
 defineProps({
   selectedPolderDetail: {
@@ -754,8 +757,7 @@ const rainfallChartOption = ref({
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 2;
-  pointer-events: none;
+  z-index: 100;
 }
 
 .left-panel {