综合业务页面修改，添加圩区页面数据卡片和水文站页面数据卡片

src/views/map/index.vue

@@ -263,7 +263,7 @@ const state = reactive({
       pumpFlow: '10.5 m³/s'
     },
     konggang: {
-      name: '孔港联圩',
+      name: '孔巷联圩',
       innerWaterLevel: '2.58m',
       outerWaterLevel: '2.65m',
       gateFlow: '0.3 m³/s',
@@ -470,6 +470,7 @@ function handleMenuSelect(index) {
     emitter.$emit("toggleWaterStations", true)
     // 重置圩区详情页面，返回总览
     state.selectedPolderDetail = null
+    state.showHydrologyDetail = false
   } else {
     // 其他页面隐藏图标
     emitter.$emit("toggleWaterStations", false)

src/views/waterStation/BusinessBg.vue

@@ -3,7 +3,7 @@
     <!-- 圩区总览 -->
     <template v-if="!selectedPolderDetail">
       <img src="@/assets/images/圩区.png" alt="圩区" />
-      <div class="business-marker-btn zhangxi" @click="$emit('selectDetail', 'zhangxi')" @mouseenter="$emit('showPolder', 'zhangxi')" @mouseleave="$emit('hidePolder')">
+      <div class="business-marker-btn zhangxi" @mouseenter="$emit('showPolder', 'zhangxi')" @mouseleave="$emit('hidePolder')">
         <div class="polder-popup" v-if="hoverPolder === 'zhangxi'">
           <div class="polder-popup-title">张西联圩</div>
           <div class="polder-popup-item"><span class="label">圩内水位：</span><span class="value">2.71m</span></div>
@@ -12,7 +12,7 @@
           <div class="polder-popup-item"><span class="label">开泵流量：</span><span class="value">12.8 m³/s</span></div>
         </div>
       </div>
-      <div class="business-marker-btn zhangdong" @click="$emit('selectDetail', 'zhangdong')" @mouseenter="$emit('showPolder', 'zhangdong')" @mouseleave="$emit('hidePolder')">
+      <div class="business-marker-btn zhangdong" @mouseenter="$emit('showPolder', 'zhangdong')" @mouseleave="$emit('hidePolder')">
         <div class="polder-popup" v-if="hoverPolder === 'zhangdong'">
           <div class="polder-popup-title">张东联圩</div>
           <div class="polder-popup-item"><span class="label">圩内水位：</span><span class="value">2.65m</span></div>
@@ -23,7 +23,7 @@
       </div>
       <div class="business-marker-btn konggang" @click="$emit('selectDetail', 'konggang')" @mouseenter="$emit('showPolder', 'konggang')" @mouseleave="$emit('hidePolder')">
         <div class="polder-popup polder-popup-left" v-if="hoverPolder === 'konggang'">
-          <div class="polder-popup-title">孔港联圩</div>
+          <div class="polder-popup-title">孔巷联圩</div>
           <div class="polder-popup-item"><span class="label">圩内水位：</span><span class="value">2.71m</span></div>
           <div class="polder-popup-item"><span class="label">圩外水位：</span><span class="value">3.10m</span></div>
           <div class="polder-popup-item"><span class="label">开闸流量：</span><span class="value">0.3 m³/s</span></div>
@@ -32,9 +32,9 @@
       </div>
     </template>
     
-    <!-- 孔港联圩详情 -->
+    <!-- 孔巷联圩详情 -->
     <template v-if="selectedPolderDetail === 'konggang'">
-      <img :src="currentImage" alt="孔港联圩" />
+      <img :src="currentImage" alt="孔巷联圩" />
       <div class="polder-back-btn" @click="handleBack">
         <span>返回</span>
       </div>
@@ -52,7 +52,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue"
+import { ref, computed, watch } from "vue"
 
 const props = defineProps({
   selectedPolderDetail: {
@@ -77,7 +77,14 @@ const emit = defineEmits(['showPolder', 'hidePolder', 'selectDetail', 'backToOve
 
 const selectedHydrology = ref(null)
 
-const taishiqiaoImage = new URL("@/assets/images/太师桥近.png", import.meta.url).href
+// 监听selectedPolderDetail变化，当回到圩区总览时重置selectedHydrology
+watch(() => props.selectedPolderDetail, (newValue) => {
+  if (!newValue) {
+    selectedHydrology.value = null
+  }
+})
+
+const xxImage = new URL("@/assets/images/太师桥近.png", import.meta.url).href
 
 const konggangImage = computed(() => {
   if (props.showGate && props.showHydrology) {
@@ -93,7 +100,7 @@ const konggangImage = computed(() => {
 
 const currentImage = computed(() => {
   if (selectedHydrology.value) {
-    return taishiqiaoImage
+    return xxImage
   }
   return konggangImage.value
 })
@@ -133,7 +140,6 @@ function handleBack() {
     width: 150px;
     height: 150px;
     background: transparent;
-    cursor: pointer;
     transition: all 0.3s ease;
     z-index: 10;
     
@@ -153,6 +159,7 @@ function handleBack() {
       left: 70%;
       top: 45%;
       transform: translate(-50%, -50%);
+      cursor: pointer;
     }
   }
   
@@ -205,7 +212,7 @@ function handleBack() {
   
   .polder-back-btn {
     position: absolute;
-    left: 50px;
+    right: 50px;
     top: 100px;
     padding: 10px 25px;
     background: rgba(0, 20, 40, 0.85);

src/views/waterStation/index.vue

@@ -65,11 +65,11 @@
     </template>
     
     <!-- 圩区详情 -->
-    <template v-else>
+    <template v-else-if="!showHydrologyDetail">
       <div class="left-panel">
         <div class="left-panel-3d">
           <!-- 圩区水位分析 -->
-          <m-card :title="selectedPolderDetail === 'konggang' ? '孔港联圩水位分析' : '圩区水位分析'" class="water-station-card water-station-card-top" :width="398" :height="320">
+          <m-card :title="selectedPolderDetail === 'konggang' ? '孔巷联圩水位分析' : '圩区水位分析'" class="water-station-card water-station-card-top" :width="398" :height="320">
             <div class="water-level-analysis-panel">
               <!-- 水位数据 -->
               <div class="water-level-data">
@@ -125,6 +125,56 @@
       </div>
     </template>
     
+    <!-- 水文站详情 -->
+    <template v-else-if="showHydrologyDetail">
+      <div class="left-panel">
+        <div class="left-panel-3d">
+          <!-- 测站简介 -->
+          <m-card title="测站简介" class="water-station-card water-station-card-top" :width="398" :height="620">
+            <div class="station-intro-panel">
+              <div class="station-name">XX国家基本水文站</div>
+              <div class="station-image">
+                <img src="@/assets/images/太师桥近.png" alt="测站图片" style="width: 100%; height: 220px; object-fit: cover; border-radius: 4px;" />
+              </div>
+              <div class="station-info">
+                <p>XX水文站位于江苏省苏州市昆山市，在长江三角洲平原南部，石浦荡闸口处，为国家基本水文站。该站主要承担着水质监测、水文测验、水文预报等任务。</p>
+                <p>测验项目包括水位、流量、水质、泥沙、蒸发等。主要监测设备有遥测水位计、流量计、水质自动监测仪等。</p>
+                <p>该站建于1951年，经过多次改造和升级，现已实现水文监测自动化、信息化。</p>
+              </div>
+            </div>
+          </m-card>
+          
+          <!-- 现场监控 -->
+          <m-card title="现场监控" class="water-station-card water-station-card-bottom" :width="398" :height="280">
+            <div class="现场监控-panel">
+              <div class="监控-image">
+                <img src="@/assets/images/太师桥近.png" alt="现场监控" style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;" />
+              </div>
+            </div>
+          </m-card>
+        </div>
+      </div>
+      
+      <!-- 右侧面板 -->
+      <div class="right-panel">
+        <div class="right-panel-3d">
+          <!-- 流量监测 -->
+          <m-card title="流量监测" class="water-station-card water-station-card-top" :width="398" :height="450">
+            <div class="flow-monitoring-panel">
+              <VChart ref="flowChart" :option="flowChartOption" :autoresize="true" style="width: 100%; height: 100%;" />
+            </div>
+          </m-card>
+          
+          <!-- 雨量监测 -->
+          <m-card title="雨量监测" class="water-station-card water-station-card-bottom" :width="398" :height="450">
+            <div class="rainfall-monitoring-panel">
+              <VChart ref="rainfallChart" :option="rainfallChartOption" :autoresize="true" style="width: 100%; height: 100%;" />
+            </div>
+          </m-card>
+        </div>
+      </div>
+    </template>
+    
     <!-- 右侧面板 -->
     <div class="right-panel" v-if="!selectedPolderDetail">
       <div class="right-panel-3d">
@@ -190,7 +240,7 @@
       </div>
     </div>
     
-    <!-- 孔港联圩详情 -->
+    <!-- 孔巷联圩详情 -->
     <template v-if="selectedPolderDetail === 'konggang' && !showHydrologyDetail">
       <!-- 侧边开关控制 -->
       <div class="polder-layer-controls">
@@ -349,6 +399,152 @@ const waterLevelChartOption = ref({
     }
   ]
 })
+
+// 流量监测图表配置
+const flowChartOption = ref({
+  grid: {
+    left: '8%',
+    top: '15%',
+    right: '8%',
+    bottom: '20%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['00:00', '02:20', '04:15', '06:10', '08:05', '10:00', '11:55', '13:55', '16:25', '18:30', '20:25', '22:20'],
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10
+    }
+  },
+  yAxis: {
+    type: 'value',
+    min: -85,
+    max: 232,
+    interval: 50,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10,
+      formatter: '{value} m³/s'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.2)'
+      }
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(0, 20, 40, 0.9)',
+    borderColor: 'rgba(48, 220, 255, 0.5)',
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  series: [
+    {
+      name: '流量',
+      type: 'line',
+      data: [60, 120, 80, 60, 70, 200, 40, 60, 100, 150, 80, 60],
+      smooth: true,
+      symbol: 'none',
+      lineStyle: {
+        color: '#30dcff',
+        width: 2,
+        shadowColor: 'rgba(48, 220, 255, 0.6)',
+        shadowBlur: 10
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgba(48, 220, 255, 0.3)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(48, 220, 255, 0.1)'
+          }
+        ])
+      }
+    }
+  ]
+})
+
+// 雨量监测图表配置
+const rainfallChartOption = ref({
+  grid: {
+    left: '8%',
+    top: '15%',
+    right: '8%',
+    bottom: '20%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['12-04 00:00', '12-04 17:05', '12-03 09:45', '12-06 02:50', '12-06 19:45', '12-07 12:35', '12-08 05:45', '12-08 23:05', '12-09 16:35', '12-10 09:50', '12-11 03:15'],
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10,
+      rotate: 45
+    }
+  },
+  yAxis: {
+    type: 'value',
+    min: 0,
+    max: 1,
+    interval: 0.2,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10,
+      formatter: '{value} mm'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.2)'
+      }
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(0, 20, 40, 0.9)',
+    borderColor: 'rgba(48, 220, 255, 0.5)',
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  series: [
+    {
+      name: '雨量',
+      type: 'bar',
+      data: [0.1, 0.3, 0.2, 0.5, 0.4, 0.1, 0.2, 0.3, 0.1, 0.2, 0.1],
+      itemStyle: {
+        color: '#30dcff',
+        shadowColor: 'rgba(48, 220, 255, 0.6)',
+        shadowBlur: 10
+      }
+    }
+  ]
+})
 </script>
 
 <style lang="scss">
@@ -395,7 +591,7 @@ const waterLevelChartOption = ref({
   
   &.water-station-card-bottom {
     flex: 1;
-    min-height: 400px;
+    min-height: 200px;
   }
 }
 
@@ -587,20 +783,6 @@ const waterLevelChartOption = ref({
   bottom: 50px;
   perspective: 500px;
   perspective-origin: 50% 50%;
-  overflow-y: auto;
-  
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  
-  &::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.3);
-  }
-  
-  &::-webkit-scrollbar-thumb {
-    background: rgba(48, 220, 255, 0.4);
-    border-radius: 3px;
-  }
 }
 
 .right-panel-3d {
@@ -991,4 +1173,95 @@ const waterLevelChartOption = ref({
     }
   }
 }
+
+.station-intro-panel {
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+  overflow-y: auto;
+  
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.3);
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(48, 220, 255, 0.4);
+    border-radius: 2px;
+  }
+  
+  .station-name {
+    color: #30dcff;
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 12px;
+    text-align: center;
+    padding-bottom: 8px;
+    border-bottom: 1px solid rgba(48, 220, 255, 0.3);
+  }
+  
+  .station-image {
+    margin-bottom: 12px;
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid rgba(48, 220, 255, 0.3);
+  }
+  
+  .station-info {
+    font-size: 12px;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.8);
+    
+    p {
+      margin-bottom: 6px;
+    }
+  }
+}
+
+.现场监控-panel {
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+  
+  .监控-image {
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid rgba(48, 220, 255, 0.3);
+  }
+}
+
+.flow-monitoring-panel {
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+  
+  :deep(.echarts-container) {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+
+.rainfall-monitoring-panel {
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+  
+  :deep(.echarts-container) {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
 </style>