综合业务页面修改

src/assets/images/heat.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+    <linearGradient id="heatGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ff9800"/>
+      <stop offset="100%" stop-color="#ff5722"/>
+    </linearGradient>
+  </defs>
+  <circle cx="16" cy="16" r="14" fill="rgba(0,0,0,0.3)" stroke="url(#heatGradient)" stroke-width="2"/>
+  <path d="M16 8 L16 12 M12 12 L20 12" stroke="url(#heatGradient)" stroke-width="2" stroke-linecap="round"/>
+  <path d="M14 16 L18 16" stroke="url(#heatGradient)" stroke-width="2" stroke-linecap="round"/>
+  <path d="M12 20 L20 20" stroke="url(#heatGradient)" stroke-width="2" stroke-linecap="round"/>
+  <path d="M14 24 L18 24" stroke="url(#heatGradient)" stroke-width="2" stroke-linecap="round"/>
+</svg>

src/assets/images/rain.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+    <linearGradient id="rainGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#30dcff"/>
+      <stop offset="100%" stop-color="#00a3cc"/>
+    </linearGradient>
+  </defs>
+  <circle cx="16" cy="16" r="14" fill="rgba(0,0,0,0.3)" stroke="url(#rainGradient)" stroke-width="2"/>
+  <path d="M8 12 L12 16 M16 12 L20 16 M24 12 L20 16 M10 16 L14 20 M18 16 L22 20 M12 20 L16 24 M20 20 L16 24" stroke="url(#rainGradient)" stroke-width="2" stroke-linecap="round"/>
+  <path d="M10 8 L18 8" stroke="url(#rainGradient)" stroke-width="2" stroke-linecap="round"/>
+  <path d="M12 10 L16 10" stroke="url(#rainGradient)" stroke-width="2" stroke-linecap="round"/>
+</svg>

src/assets/images/storm.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+    <linearGradient id="stormGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ff6b6b"/>
+      <stop offset="100%" stop-color="#ff4444"/>
+    </linearGradient>
+  </defs>
+  <circle cx="16" cy="16" r="14" fill="rgba(0,0,0,0.3)" stroke="url(#stormGradient)" stroke-width="2"/>
+  <path d="M10 10 L16 16 L10 22" stroke="url(#stormGradient)" stroke-width="2" stroke-linecap="round"/>
+  <path d="M16 10 L22 16 L16 22" stroke="url(#stormGradient)" stroke-width="2" stroke-linecap="round"/>
+  <path d="M22 10 L28 16 L22 22" stroke="url(#stormGradient)" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="16" cy="16" r="3" fill="url(#stormGradient)"/>
+</svg>

src/assets/images/typhoon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+    <linearGradient id="typhoonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#9c27b0"/>
+      <stop offset="100%" stop-color="#673ab7"/>
+    </linearGradient>
+  </defs>
+  <circle cx="16" cy="16" r="14" fill="rgba(0,0,0,0.3)" stroke="url(#typhoonGradient)" stroke-width="2"/>
+  <path d="M16 6 L16 26 M6 16 L26 16" stroke="url(#typhoonGradient)" stroke-width="2" stroke-linecap="round"/>
+  <path d="M9.9 9.9 L22.1 22.1 M9.9 22.1 L22.1 9.9" stroke="url(#typhoonGradient)" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="16" cy="16" r="2" fill="url(#typhoonGradient)"/>
+  <circle cx="16" cy="16" r="5" fill="none" stroke="url(#typhoonGradient)" stroke-width="1"/>
+  <circle cx="16" cy="16" r="8" fill="none" stroke="url(#typhoonGradient)" stroke-width="1"/>
+</svg>

src/components/mCard/index.vue

@@ -470,6 +470,7 @@ onMounted(() => {
   &-bd {
     position: relative;
     min-height: 100px;
+    height: 100%;
     z-index: 1;
     &-bg {
       position: absolute;

src/views/map/index.vue

@@ -5,61 +5,18 @@
     <div class="fusion-bg" v-show="state.activeIndex === '2'">
       <img src="@/assets/images/昆山水文站.jpg" alt="昆山水文站" />
     </div>
-    <div class="business-bg" v-show="state.activeIndex === '3'">
-      <!-- 圩区总览 -->
-      <template v-if="!state.selectedPolderDetail">
-        <img src="@/assets/images/圩区.png" alt="圩区" />
-        <div class="business-marker-btn zhangxi" @mouseenter="showPolderInfo('zhangxi')" @mouseleave="hidePolderInfo">
-          <div class="polder-popup" v-if="state.hoverPolder === 'zhangxi'">
-            <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.5 m³/s</span></div>
-            <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" @mouseenter="showPolderInfo('zhangdong')" @mouseleave="hidePolderInfo">
-          <div class="polder-popup" v-if="state.hoverPolder === 'zhangdong'">
-            <div class="polder-popup-title">张东联圩</div>
-            <div class="polder-popup-item"><span class="label">圩内水位：</span><span class="value">2.65m</span></div>
-            <div class="polder-popup-item"><span class="label">圩外水位：</span><span class="value">3.05m</span></div>
-            <div class="polder-popup-item"><span class="label">开闸流量：</span><span class="value">0.4 m³/s</span></div>
-            <div class="polder-popup-item"><span class="label">开泵流量：</span><span class="value">10.5 m³/s</span></div>
-          </div>
-        </div>
-        <div class="business-marker-btn konggang" @click="selectPolderDetail('konggang')" @mouseenter="showPolderInfo('konggang')" @mouseleave="hidePolderInfo">
-          <div class="polder-popup polder-popup-left" v-if="state.hoverPolder === 'konggang'">
-            <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>
-            <div class="polder-popup-item"><span class="label">开泵流量：</span><span class="value">8.5 m³/s</span></div>
-          </div>
-        </div>
-      </template>
-      <!-- 孔港联圩详情 -->
-      <template v-if="state.selectedPolderDetail === 'konggang'">
-        <img :src="getKonggangImage()" alt="孔港联圩" />
-        <div class="polder-back-btn" @click="backToPolderOverview">
-          <span>返回</span>
-        </div>
-        <!-- 侧边开关控制 -->
-        <div class="polder-layer-controls">
-          <div class="toggle-item">
-            <span class="toggle-text">泵站</span>
-            <div class="toggle-switch" :class="{ active: state.showGate }" @click="state.showGate = !state.showGate">
-              <div class="toggle-knob"></div>
-            </div>
-          </div>
-          <div class="toggle-item">
-            <span class="toggle-text">水文站</span>
-            <div class="toggle-switch" :class="{ active: state.showHydrology }" @click="state.showHydrology = !state.showHydrology">
-              <div class="toggle-knob"></div>
-            </div>
-          </div>
-        </div>
-      </template>
-    </div>
+    <BusinessBg
+      v-show="state.activeIndex === '3'"
+      :selectedPolderDetail="state.selectedPolderDetail"
+      :hoverPolder="state.hoverPolder"
+      :showGate="state.showGate"
+      :showHydrology="state.showHydrology"
+      @showPolder="showPolderInfo"
+      @hidePolder="hidePolderInfo"
+      @selectDetail="selectPolderDetail"
+      @backToOverview="backToPolderOverview"
+      @showHydrologyDetail="(val) => state.showHydrologyDetail = val"
+    />
     <div class="history-bg" v-show="state.activeIndex === '4'">
       <video v-if="!state.showHistoryImage" ref="historyVideoRef" class="history-bg-video" loop autoplay muted>
         <source :src="state.historyVideoSrc" type="video/mp4">
@@ -189,7 +146,15 @@
       <WaterResourceContent v-if="state.activeIndex === '2'" />
 
       <!-- 水文测站内容 -->
-      <WaterStationContent v-if="state.activeIndex === '3'" />
+      <WaterStationContent
+        v-if="state.activeIndex === '3'"
+        :selectedPolderDetail="state.selectedPolderDetail"
+        :showGate="state.showGate"
+        :showHydrology="state.showHydrology"
+        :showHydrologyDetail="state.showHydrologyDetail"
+        @update:showGate="state.showGate = $event"
+        @update:showHydrology="state.showHydrology = $event"
+      />
 
       <!-- 历史沿革内容 -->
       <HistoryContent v-if="state.activeIndex === '4'" @changeVideo="handleVideoChange" />
@@ -241,6 +206,7 @@ import ElectricityUsage from "./components/ElectricityUsage.vue"
 import QuarterlyGrowthSituation from "./components/QuarterlyGrowthSituation.vue"
 import WaterResourceContent from "@/views/waterResource/index.vue"
 import WaterStationContent from "@/views/waterStation/index.vue"
+import BusinessBg from "@/views/waterStation/BusinessBg.vue"
 import HistoryContent from "@/views/history/index.vue"
 import ScienceContent from "@/views/science/index.vue"
 import StudyContent from "@/views/study/index.vue"
@@ -271,6 +237,7 @@ const state = reactive({
   // 图层开关状态
   showGate: true,
   showHydrology: false,
+  showHydrologyDetail: false,
   // 当前圩区数据
   currentPolder: {
     name: '张西联圩',
@@ -441,20 +408,9 @@ function selectPolderDetail(polderKey) {
   }
 }
 
-function getKonggangImage() {
-  if (state.showGate && state.showHydrology) {
-    return new URL("@/assets/images/孔港联圩泵站水文站.png", import.meta.url).href
-  } else if (state.showGate) {
-    return new URL("@/assets/images/孔港联圩泵站.png", import.meta.url).href
-  } else if (state.showHydrology) {
-    return new URL("@/assets/images/孔港联圩水文站.png", import.meta.url).href
-  } else {
-    return new URL("@/assets/images/孔港联圩.png", import.meta.url).href
-  }
-}
-
 function backToPolderOverview() {
   state.selectedPolderDetail = null
+  state.showHydrologyDetail = false
 }
 
 // 初始化加载资源
@@ -813,160 +769,7 @@ function handleMapPlayComplete() {
   }
 }
 
-.business-bg {
-  .business-marker-btn {
-    position: absolute;
-    width: 150px;
-    height: 150px;
-    background: transparent;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    z-index: 10;
-    
-    &.zhangxi {
-      left: 40%;
-      top: 60%;
-      transform: translate(-50%, -50%);
-    }
-    
-    &.zhangdong {
-      left: 55%;
-      top: 60%;
-      transform: translate(-50%, -50%);
-    }
-     
-    &.konggang {
-      left: 70%;
-      top: 45%;
-      transform: translate(-50%, -50%);
-    }
-  }
-  
-  .polder-popup {
-      position: absolute;
-      left: 170px;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 200px;
-      background: rgba(0, 20, 40, 0.95);
-      border: 2px solid #30dcff;
-      border-radius: 8px;
-      padding: 15px;
-      z-index: 100;
-      
-      .polder-popup-title {
-        font-size: 16px;
-        font-weight: bold;
-        color: #30dcff;
-        margin-bottom: 10px;
-        padding-bottom: 8px;
-        border-bottom: 1px solid rgba(48, 220, 255, 0.3);
-      }
-      
-      .polder-popup-item {
-        display: flex;
-        justify-content: space-between;
-        padding: 5px 0;
-        font-size: 13px;
-        
-        .label {
-          color: #a3dcde;
-        }
-        
-        .value {
-          color: #30dcff;
-          font-weight: bold;
-        }
-      }
-      
-      &.polder-popup-left {
-        left: auto;
-        right: 170px;
-      }
-    }
-    
-    .polder-back-btn {
-      position: absolute;
-      left: 50px;
-      top: 100px;
-      padding: 10px 25px;
-      background: rgba(0, 20, 40, 0.85);
-      border: 2px solid #30dcff;
-      border-radius: 6px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      z-index: 100;
-      
-      span {
-        color: #30dcff;
-        font-size: 16px;
-        font-weight: bold;
-      }
-      
-      &:hover {
-        background: rgba(48, 220, 255, 0.2);
-        box-shadow: 0 0 15px rgba(48, 220, 255, 0.5);
-      }
-    }
-    
-    .polder-layer-controls {
-      position: absolute;
-      right: 20px;
-      top: 50%;
-      transform: translateY(-50%);
-      display: flex;
-      flex-direction: column;
-      gap: 15px;
-      z-index: 1000;
-      
-      .toggle-item {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 8px 12px;
-        background: rgba(0, 20, 40, 0.8);
-        border-radius: 6px;
-        
-        .toggle-text {
-          color: #fff;
-          font-size: 14px;
-          text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
-        }
-        
-        .toggle-switch {
-          width: 44px;
-          height: 22px;
-          background: rgba(100, 100, 100, 0.5);
-          border-radius: 11px;
-          cursor: pointer;
-          transition: all 0.3s ease;
-          position: relative;
-          
-          .toggle-knob {
-            position: absolute;
-            left: 2px;
-            top: 2px;
-            width: 18px;
-            height: 18px;
-            background: #a3dcde;
-            border-radius: 50%;
-            transition: all 0.3s ease;
-          }
-          
-          &.active {
-            background: rgba(48, 220, 255, 0.4);
-            box-shadow: 0 0 10px rgba(48, 220, 255, 0.3);
-            
-            .toggle-knob {
-              left: 24px;
-              background: #30dcff;
-              box-shadow: 0 0 8px rgba(48, 220, 255, 0.5);
-            }
-          }
-        }
-      }
-    }
-  }
+
 
 .left-column {
   position: absolute;

src/views/waterStation/BusinessBg.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="business-bg">
+    <!-- 圩区总览 -->
+    <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="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>
+          <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.5 m³/s</span></div>
+          <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="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>
+          <div class="polder-popup-item"><span class="label">圩外水位：</span><span class="value">3.05m</span></div>
+          <div class="polder-popup-item"><span class="label">开闸流量：</span><span class="value">0.4 m³/s</span></div>
+          <div class="polder-popup-item"><span class="label">开泵流量：</span><span class="value">10.5 m³/s</span></div>
+        </div>
+      </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-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>
+          <div class="polder-popup-item"><span class="label">开泵流量：</span><span class="value">8.5 m³/s</span></div>
+        </div>
+      </div>
+    </template>
+    
+    <!-- 孔港联圩详情 -->
+    <template v-if="selectedPolderDetail === 'konggang'">
+      <img :src="currentImage" alt="孔港联圩" />
+      <div class="polder-back-btn" @click="handleBack">
+        <span>返回</span>
+      </div>
+      <!-- 水文站标记按钮 -->
+      <template v-if="showHydrology && !selectedHydrology">
+        <div class="hydrology-marker hydrology-marker-1" @click="selectHydrology('shipu')">
+          <span class="hydrology-name">石浦</span>
+        </div>
+        <div class="hydrology-marker hydrology-marker-2" @click="selectHydrology('daohepu')">
+          <span class="hydrology-name">道褐浦</span>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue"
+
+const props = defineProps({
+  selectedPolderDetail: {
+    type: String,
+    default: null
+  },
+  hoverPolder: {
+    type: String,
+    default: null
+  },
+  showGate: {
+    type: Boolean,
+    default: true
+  },
+  showHydrology: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['showPolder', 'hidePolder', 'selectDetail', 'backToOverview', 'showHydrologyDetail'])
+
+const selectedHydrology = ref(null)
+
+const taishiqiaoImage = new URL("@/assets/images/太师桥近.png", import.meta.url).href
+
+const konggangImage = computed(() => {
+  if (props.showGate && props.showHydrology) {
+    return new URL("@/assets/images/孔港联圩泵站水文站.png", import.meta.url).href
+  } else if (props.showGate) {
+    return new URL("@/assets/images/孔港联圩泵站.png", import.meta.url).href
+  } else if (props.showHydrology) {
+    return new URL("@/assets/images/孔港联圩水文站.png", import.meta.url).href
+  } else {
+    return new URL("@/assets/images/孔港联圩.png", import.meta.url).href
+  }
+})
+
+const currentImage = computed(() => {
+  if (selectedHydrology.value) {
+    return taishiqiaoImage
+  }
+  return konggangImage.value
+})
+
+function selectHydrology(name) {
+  selectedHydrology.value = name
+  emit('showHydrologyDetail', true)
+}
+
+function handleBack() {
+  if (selectedHydrology.value) {
+    selectedHydrology.value = null
+    emit('showHydrologyDetail', false)
+  } else {
+    emit('backToOverview')
+  }
+}
+</script>
+
+<style lang="scss">
+.business-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .business-marker-btn {
+    position: absolute;
+    width: 150px;
+    height: 150px;
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    z-index: 10;
+    
+    &.zhangxi {
+      left: 40%;
+      top: 60%;
+      transform: translate(-50%, -50%);
+    }
+    
+    &.zhangdong {
+      left: 55%;
+      top: 60%;
+      transform: translate(-50%, -50%);
+    }
+     
+    &.konggang {
+      left: 70%;
+      top: 45%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  
+  .polder-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: 8px;
+    padding: 15px;
+    min-width: 200px;
+    z-index: 100;
+    
+    &-left {
+      left: auto;
+      right: 100%;
+      margin-left: 0;
+      margin-right: 10px;
+    }
+    
+    &-title {
+      color: #30dcff;
+      font-size: 16px;
+      font-weight: bold;
+      text-align: center;
+      margin-bottom: 10px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid rgba(48, 220, 255, 0.3);
+    }
+    
+    &-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 5px 0;
+      font-size: 13px;
+      
+      .label {
+        color: rgba(255, 255, 255, 0.7);
+      }
+      
+      .value {
+        color: #30dcff;
+        font-weight: bold;
+      }
+    }
+  }
+  
+  .polder-back-btn {
+    position: absolute;
+    left: 50px;
+    top: 100px;
+    padding: 10px 25px;
+    background: rgba(0, 20, 40, 0.85);
+    border: 2px solid #30dcff;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    z-index: 100;
+    
+    span {
+      color: #30dcff;
+      font-size: 16px;
+      font-weight: bold;
+    }
+    
+    &:hover {
+      background: rgba(48, 220, 255, 0.2);
+      box-shadow: 0 0 15px rgba(48, 220, 255, 0.5);
+    }
+  }
+  
+  .hydrology-marker {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    background: transparent;
+    cursor: pointer;
+    z-index: 100;
+    transition: all 0.3s ease;
+    
+    .hydrology-name {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      white-space: nowrap;
+      background: rgba(0, 20, 40, 0.9);
+      color: #30dcff;
+      padding: 4px 10px;
+      border-radius: 4px;
+      font-size: 14px;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    
+    &:hover {
+      .hydrology-name {
+        opacity: 1;
+      }
+    }
+    
+    &.hydrology-marker-1 {
+      left: 39%;
+      top: 46%;
+    }
+    
+    &.hydrology-marker-2 {
+      left: 72%;
+      top: 64%;
+    }
+  }
+}
+</style>

src/views/waterStation/index.vue

@@ -1,43 +1,354 @@
 <template>
   <div class="water-station-content">
-    <div class="left-panel">
-      <div class="left-panel-3d">
-        <m-card title="圩区统计" class="water-station-card" :width="398" :height="450">
-          <div class="stats-panel">
-            <div class="core-indicator">
-              <div class="indicator-main">
-                <span class="main-value">94</span>
-                <span class="main-unit">个</span>
+    <!-- 圩区总览 -->
+    <template v-if="!selectedPolderDetail">
+      <div class="left-panel">
+        <div class="left-panel-3d">
+          <m-card title="圩区统计" class="water-station-card water-station-card-top" :width="398" :height="280">
+            <div class="stats-panel">
+              <div class="core-indicator">
+                <div class="indicator-main">
+                  <span class="main-value">94</span>
+                  <span class="main-unit">个</span>
+                </div>
+                <div class="indicator-label">圩区总数</div>
+              </div>
+              <div class="stats-grid">
+                <div class="stat-item">
+                  <div class="stat-value">18</div>
+                  <div class="stat-label">骨干河道</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-value">618</div>
+                  <div class="stat-label">防洪闸</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-value">560</div>
+                  <div class="stat-label">排涝站</div>
+                </div>
+                <div class="stat-item">
+                  <div class="stat-value">2173.69<span class="stat-unit">m³/s</span></div>
+                  <div class="stat-label">排涝流量</div>
+                </div>
               </div>
-              <div class="indicator-label">圩区总数</div>
             </div>
-            <div class="stats-grid">
-              <div class="stat-item">
-                <div class="stat-value">18</div>
-                <div class="stat-label">骨干河道</div>
+          </m-card>
+          <m-card title="圩区信息" class="water-station-card water-station-card-bottom" :width="398" :height="520">
+            <div class="polder-list">
+              <div class="polder-list-header">
+                <div class="header-item">序号</div>
+                <div class="header-item">圩区名称</div>
+                <div class="header-item">实时水位</div>
+                <div class="header-item">控制水位</div>
+                <div class="header-item">流量</div>
+                <div class="header-item">运行情况</div>
+              </div>
+              <div class="polder-list-body">
+                <div class="polder-item" v-for="(item, index) in polderList" :key="index">
+                  <div class="item-cell">{{ index + 1 }}</div>
+                  <div class="item-cell">{{ item.name }}</div>
+                  <div class="item-cell">{{ item.waterLevel }}</div>
+                  <div class="item-cell">{{ item.controlLevel }}</div>
+                  <div class="item-cell">{{ item.flow }}</div>
+                  <div class="item-cell">
+                    <div class="rate-bar">
+                      <div class="rate-fill" :style="{ width: item.rate }"></div>
+                      <span class="rate-text">{{ item.rate }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </m-card>
+        </div>
+      </div>
+    </template>
+    
+    <!-- 圩区详情 -->
+    <template v-else>
+      <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">
+            <div class="water-level-analysis-panel">
+              <!-- 水位数据 -->
+              <div class="water-level-data">
+                <div class="data-item">
+                  <div class="data-label">水位(m)</div>
+                  <div class="data-value">2.54</div>
+                </div>
+                <div class="data-item">
+                  <div class="data-label">比昨日(m)</div>
+                  <div class="data-value negative">-0.05</div>
+                </div>
+                <div class="data-item">
+                  <div class="data-label">历史最高(m)</div>
+                  <div class="data-value">4.06</div>
+                </div>
+                <div class="data-item">
+                  <div class="data-label">生态水位(m)</div>
+                  <div class="data-value">2.08</div>
+                </div>
+                <div class="data-item">
+                  <div class="data-label">比警戒(m)</div>
+                  <div class="data-value negative">-0.79</div>
+                </div>
+              </div>
+              
+              <!-- 水位趋势图 -->
+              <div class="water-level-chart">
+                <VChart ref="waterLevelChart" :option="waterLevelChartOption" :autoresize="true" style="width: 100%; height: 100%;" />
+              </div>
+            </div>
+          </m-card>
+          
+          <!-- 代表站水位排序 -->
+          <m-card title="代表站水位排序" class="water-station-card water-station-card-bottom" :width="398" :height="480">
+            <div class="station-ranking-panel">
+              <div class="ranking-table">
+                <div class="ranking-row header">
+                  <div class="ranking-cell">区镇</div>
+                  <div class="ranking-cell">站名</div>
+                  <div class="ranking-cell">水位(m)</div>
+                  <div class="ranking-cell">时间</div>
+                </div>
+                <div class="ranking-row" v-for="(station, index) in stationRanking" :key="index">
+                  <div class="ranking-cell">{{ station.district }}</div>
+                  <div class="ranking-cell">{{ station.name }}</div>
+                  <div class="ranking-cell">{{ station.level }}</div>
+                  <div class="ranking-cell">{{ station.time }}</div>
+                </div>
+              </div>
+            </div>
+          </m-card>
+        </div>
+      </div>
+    </template>
+    
+    <!-- 右侧面板 -->
+    <div class="right-panel" v-if="!selectedPolderDetail">
+      <div class="right-panel-3d">
+        <!-- 气象预警信息 -->
+        <m-card title="气象预警信息" class="water-station-card water-station-card-top" :width="398" :height="320">
+          <div class="weather-warning-panel">
+            <div class="warning-grid">
+              <div class="warning-item">
+                <div class="warning-title">暴雨</div>
+                <div class="warning-icon rain-icon">
+                  <img src="@/assets/images/rain.svg" alt="暴雨" />
+                </div>
+                <div class="warning-status">无</div>
+                <div class="warning-time">09-30 11:06</div>
+              </div>
+              <div class="warning-item">
+                <div class="warning-title">强对流</div>
+                <div class="warning-icon storm-icon">
+                  <img src="@/assets/images/storm.svg" alt="强对流" />
+                </div>
+                <div class="warning-status">无</div>
+                <div class="warning-time">10-18 05:28</div>
+              </div>
+              <div class="warning-item">
+                <div class="warning-title">台风</div>
+                <div class="warning-icon typhoon-icon">
+                  <img src="@/assets/images/typhoon.svg" alt="台风" />
+                </div>
+                <div class="warning-status">无</div>
+                <div class="warning-time">07-31 10:08</div>
+              </div>
+              <div class="warning-item">
+                <div class="warning-title">高温</div>
+                <div class="warning-icon heat-icon">
+                  <img src="@/assets/images/heat.svg" alt="高温" />
+                </div>
+                <div class="warning-status">无</div>
+                <div class="warning-time">09-17 17:27</div>
               </div>
-              <div class="stat-item">
-                <div class="stat-value">618</div>
-                <div class="stat-label">防洪闸</div>
+            </div>
+          </div>
+        </m-card>
+        
+        <!-- 预警统计 -->
+        <m-card title="预警统计" class="water-station-card water-station-card-bottom" :width="398" :height="240">
+          <div class="warning-stats-panel">
+            <div class="stats-grid">
+              <div class="stat-card warning-stat">
+                <div class="stat-title">超警站点个数</div>
+                <div class="stat-value">0/11</div>
               </div>
-              <div class="stat-item">
-                <div class="stat-value">560</div>
-                <div class="stat-label">排涝站</div>
+              <div class="stat-card alert-stat">
+                <div class="stat-title">超保站点个数</div>
+                <div class="stat-value">0/11</div>
               </div>
-              <div class="stat-item">
-                <div class="stat-value">2173.69<span class="stat-unit">m³/s</span></div>
-                <div class="stat-label">排涝流量</div>
+              <div class="stat-card normal-stat">
+                <div class="stat-title">正常站点个数</div>
+                <div class="stat-value">55/57</div>
               </div>
             </div>
           </div>
         </m-card>
       </div>
     </div>
+    
+    <!-- 孔港联圩详情 -->
+    <template v-if="selectedPolderDetail === 'konggang' && !showHydrologyDetail">
+      <!-- 侧边开关控制 -->
+      <div class="polder-layer-controls">
+        <div class="toggle-item">
+          <span class="toggle-text">泵站</span>
+          <div class="toggle-switch" :class="{ active: showGate }" @click="$emit('update:showGate', !showGate)">
+            <div class="toggle-knob"></div>
+          </div>
+        </div>
+        <div class="toggle-item">
+          <span class="toggle-text">水文站</span>
+          <div class="toggle-switch" :class="{ active: showHydrology }" @click="$emit('update:showHydrology', !showHydrology)">
+            <div class="toggle-knob"></div>
+          </div>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
 <script setup>
+import { ref } from "vue"
 import mCard from "@/components/mCard/index.vue"
+import VChart from "vue-echarts"
+import * as echarts from "echarts"
+
+defineProps({
+  selectedPolderDetail: {
+    type: String,
+    default: null
+  },
+  showGate: {
+    type: Boolean,
+    default: true
+  },
+  showHydrology: {
+    type: Boolean,
+    default: false
+  },
+  showHydrologyDetail: {
+    type: Boolean,
+    default: false
+  }
+})
+defineEmits(['update:showGate', 'update:showHydrology'])
+
+const polderList = ref([
+  { name: '庙泾联圩', waterLevel: '2.19', controlLevel: '2.50', flow: '3.20', rate: '28%' },
+  { name: '西河联圩', waterLevel: '2.74', controlLevel: '3.10', flow: '3.00', rate: '17%' },
+  { name: '永胜联圩', waterLevel: '—', controlLevel: '3.20', flow: '0.80', rate: '13%' },
+  { name: '包桥联圩', waterLevel: '2.72', controlLevel: '3.10', flow: '11.70', rate: '12%' },
+  { name: '城南联圩', waterLevel: '2.62', controlLevel: '3.10', flow: '8.50', rate: '10%' },
+  { name: '曹安路南联圩', waterLevel: '2.69', controlLevel: '3.10', flow: '5.10', rate: '7%' },
+  { name: '枫塘联圩', waterLevel: '2.14', controlLevel: '2.40', flow: '1.00', rate: '2%' },
+  { name: '北大联圩', waterLevel: '2.73', controlLevel: '3.10', flow: '0.00', rate: '0%' },
+  { name: '娄江联圩', waterLevel: '2.11', controlLevel: '3.10', flow: '0.00', rate: '0%' },
+  { name: '孔巷联圩', waterLevel: '—', controlLevel: '3.10', flow: '0.00', rate: '0%' },
+  { name: '南大联圩', waterLevel: '2.71', controlLevel: '3.10', flow: '0.00', rate: '0%' }
+])
+
+const stationRanking = ref([
+  { district: '巴城镇', name: '巴城湖', level: '2.89', time: '02-12 10:05' },
+  { district: '周市镇', name: '斜塘', level: '2.85', time: '02-12 10:05' },
+  { district: '高新区', name: '赵库', level: '2.81', time: '02-12 10:05' },
+  { district: '开发区', name: '兵希(浏)', level: '2.76', time: '02-12 10:05' },
+  { district: '张浦镇', name: '大直', level: '2.70', time: '02-12 10:05' },
+  { district: '陆家镇', name: '友谊(夏)', level: '2.69', time: '02-12 10:05' },
+  { district: '花桥镇', name: '石浦(吴)', level: '2.62', time: '02-12 10:05' },
+  { district: '千灯镇', name: '迮塘浦', level: '2.57', time: '02-12 09:50' },
+  { district: '周庄镇', name: '周庄站', level: '2.56', time: '02-12 10:05' },
+  { district: '锦溪镇', name: '锦溪(赵田港)', level: '2.53', time: '02-12 10:05' },
+  { district: '淀山湖镇', name: '清水湾', level: '2.52', time: '02-12 10:05' }
+])
+
+// 水位过程线图表配置
+const waterLevelChartOption = ref({
+  grid: {
+    left: '8%',
+    top: '15%',
+    right: '8%',
+    bottom: '20%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['02-11 10:00', '02-11 16:00', '02-11 22:00', '02-12 04:00', '02-12 10:00'],
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10
+    }
+  },
+  yAxis: {
+    type: 'value',
+    min: 2.1,
+    max: 2.8,
+    interval: 0.1,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(48, 220, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10
+    },
+    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: [2.60, 2.62, 2.58, 2.56, 2.54],
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 8,
+      lineStyle: {
+        color: '#30dcff',
+        width: 2,
+        shadowColor: 'rgba(48, 220, 255, 0.6)',
+        shadowBlur: 10
+      },
+      itemStyle: {
+        color: '#30dcff',
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      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)'
+          }
+        ])
+      }
+    }
+  ]
+})
 </script>
 
 <style lang="scss">
@@ -56,7 +367,7 @@ import mCard from "@/components/mCard/index.vue"
   z-index: 4;
   width: 398px;
   left: 32px;
-  top: 180px;
+  top: 100px;
   bottom: 50px;
   perspective: 500px;
   perspective-origin: 50% 50%;
@@ -70,14 +381,22 @@ import mCard from "@/components/mCard/index.vue"
   bottom: 0;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  gap: 15px;
   transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
   z-index: 4;
 }
 
 .water-station-card {
-  transform: translateX(-150%);
-  opacity: 0;
+  pointer-events: auto;
+  
+  &.water-station-card-top {
+    flex-shrink: 0;
+  }
+  
+  &.water-station-card-bottom {
+    flex: 1;
+    min-height: 400px;
+  }
 }
 
 .stats-panel {
@@ -87,22 +406,24 @@ import mCard from "@/components/mCard/index.vue"
   flex-direction: column;
   gap: 12px;
   box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
 }
 
 .core-indicator {
   text-align: center;
   padding: 12px;
-  background: linear-gradient(135deg, rgba(48, 220, 255, 0.1) 0%, rgba(0, 191, 255, 0.05) 100%);
+  background: linear-gradient(135deg, rgba(48, 220, 255, 0.25) 0%, rgba(0, 191, 255, 0.2) 100%);
   border-radius: 8px;
-  border: 1px solid rgba(48, 220, 255, 0.3);
+  border: 1px solid rgba(48, 220, 255, 0.4);
 }
 
 .indicator-main {
-  margin-bottom: 5px;
+  margin-bottom: 3px;
 }
 
 .main-value {
-  font-size: 40px;
+  font-size: 32px;
   font-weight: 700;
   color: #30DCFF;
   font-family: "D-DIN";
@@ -110,55 +431,564 @@ import mCard from "@/components/mCard/index.vue"
 }
 
 .main-unit {
-  font-size: 20px;
+  font-size: 16px;
   color: rgba(48, 220, 255, 0.8);
   font-weight: 600;
 }
 
 .indicator-label {
   color: rgba(255, 255, 255, 0.8);
-  font-size: 12px;
+  font-size: 11px;
   letter-spacing: 1px;
 }
 
 .stats-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 10px;
+  gap: 8px;
 }
 
 .stat-item {
-  background: rgba(0, 180, 255, 0.08);
-  border: 1px solid rgba(0, 180, 255, 0.2);
-  border-radius: 8px;
-  padding: 15px 10px;
+  background: rgba(0, 180, 255, 0.25);
+  border: 1px solid rgba(0, 180, 255, 0.4);
+  border-radius: 6px;
+  padding: 12px 10px;
   text-align: center;
   transition: all 0.3s ease;
   
   &:hover {
-    background: rgba(0, 180, 255, 0.15);
-    border-color: rgba(48, 220, 255, 0.5);
+    background: rgba(0, 180, 255, 0.35);
+    border-color: rgba(48, 220, 255, 0.6);
   }
 }
 
 .stat-value {
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 700;
   color: #30DCFF;
   font-family: "D-DIN";
-  margin-bottom: 5px;
+  margin-bottom: 3px;
   text-shadow: 0 0 10px rgba(48, 220, 255, 0.5);
   
   .stat-unit {
-    font-size: 12px;
+    font-size: 10px;
     margin-left: 2px;
     opacity: 0.8;
   }
 }
 
 .stat-label {
-  font-size: 12px;
+  font-size: 11px;
   color: rgba(255, 255, 255, 0.7);
   letter-spacing: 1px;
 }
+
+.polder-list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 10px;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+  
+  .polder-list-header {
+    display: flex;
+    padding: 10px 15px;
+    background: rgba(0, 100, 150, 0.5);
+    border-bottom: 1px solid rgba(48, 220, 255, 0.4);
+    color: #30dcff;
+    font-weight: bold;
+    font-size: 13px;
+    flex-shrink: 0;
+    border-radius: 4px 4px 0 0;
+    margin-bottom: 5px;
+    
+    .header-item {
+      flex: 1;
+      text-align: center;
+      padding: 0 5px;
+    }
+  }
+  
+  .polder-list-body {
+    flex: 1;
+    
+    .polder-item {
+      display: flex;
+      padding: 8px 15px;
+      border-bottom: 1px solid rgba(48, 220, 255, 0.2);
+      color: rgba(255, 255, 255, 0.9);
+      font-size: 13px;
+      line-height: 1.4;
+      
+      &:hover {
+        background: rgba(48, 220, 255, 0.15);
+        border-radius: 3px;
+      }
+      
+      &:last-child {
+        border-bottom: none;
+      }
+      
+      .item-cell {
+        flex: 1;
+        text-align: center;
+        padding: 0 5px;
+        
+        &:first-child {
+          flex: 0 0 40px;
+          color: #30dcff;
+          font-weight: 500;
+        }
+        
+        &:nth-child(2) {
+          flex: 2;
+          text-align: left;
+        }
+      }
+    }
+  }
+  
+  .rate-bar {
+    width: 60px;
+    height: 16px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    position: relative;
+    overflow: hidden;
+    
+    .rate-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #00d4ff, #30dcff);
+      border-radius: 4px;
+      transition: width 0.3s ease;
+    }
+    
+    .rate-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 11px;
+      color: #fff;
+      text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+      font-weight: 500;
+    }
+  }
+}
+
+.right-panel {
+  position: absolute;
+  z-index: 4;
+  width: 398px;
+  right: 32px;
+  top: 100px;
+  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 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(0deg) rotateY(-6deg) rotateZ(0deg) skewX(0deg) skewY(0deg);
+  z-index: 4;
+}
+
+.weather-warning-panel {
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+}
+
+.warning-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px;
+  height: 100%;
+}
+
+.warning-item {
+  background: rgba(0, 100, 150, 0.4);
+  border: 1px solid rgba(48, 220, 255, 0.5);
+  border-radius: 6px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #30dcff, transparent);
+  }
+  
+  .warning-title {
+    color: #30dcff;
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  
+  .warning-icon {
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 8px;
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 8px;
+    
+    img {
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+    }
+  }
+  
+  .warning-status {
+    color: #fff;
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 4px;
+  }
+  
+  .warning-time {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 12px;
+  }
+}
+
+.warning-stats-panel {
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+}
+
+.warning-stats-panel .stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  height: 100%;
+}
+
+.stat-card {
+  background: rgba(0, 100, 150, 0.4);
+  border: 1px solid rgba(48, 220, 255, 0.5);
+  border-radius: 6px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  
+  &.warning-stat {
+    border-color: #00d4ff;
+    background: rgba(0, 212, 255, 0.25);
+  }
+  
+  &.alert-stat {
+    border-color: #ff4444;
+    background: rgba(255, 68, 68, 0.25);
+  }
+  
+  &.normal-stat {
+    border-color: #00ff88;
+    background: rgba(0, 255, 136, 0.25);
+  }
+  
+  .stat-title {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 12px;
+    margin-bottom: 8px;
+  }
+  
+  .stat-value {
+    font-size: 20px;
+    font-weight: bold;
+    font-family: "D-DIN";
+    text-shadow: 0 0 10px rgba(48, 220, 255, 0.5);
+    
+    .warning-stat & {
+      color: #00d4ff;
+    }
+    
+    .alert-stat & {
+      color: #ff4444;
+    }
+    
+    .normal-stat & {
+      color: #00ff88;
+    }
+  }
+}
+
+.water-level-analysis-panel {
+  height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.water-level-data {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px;
+  padding: 10px;
+  background: rgba(0, 100, 150, 0.3);
+  border-radius: 6px;
+  
+  .data-item {
+    text-align: center;
+    
+    .data-label {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.7);
+      margin-bottom: 4px;
+    }
+    
+    .data-value {
+      font-size: 14px;
+      font-weight: bold;
+      color: #30dcff;
+      font-family: "D-DIN";
+      
+      &.negative {
+        color: #ff6b6b;
+      }
+    }
+  }
+}
+
+.water-level-chart {
+  flex: 1;
+  height: 200px;
+  padding: 10px;
+  background: rgba(0, 100, 150, 0.2);
+  border-radius: 6px;
+  border: 1px solid rgba(48, 220, 255, 0.3);
+  
+  :deep(.echarts-container) {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+
+.station-ranking {
+  padding: 10px;
+  background: rgba(0, 100, 150, 0.3);
+  border-radius: 6px;
+  
+  .ranking-header {
+    color: #30dcff;
+    font-size: 13px;
+    font-weight: bold;
+    margin-bottom: 8px;
+    padding-bottom: 4px;
+    border-bottom: 1px solid rgba(48, 220, 255, 0.3);
+  }
+  
+  .ranking-table {
+    max-height: 120px;
+    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;
+    }
+    
+    .ranking-row {
+      display: flex;
+      padding: 4px 0;
+      border-bottom: 1px solid rgba(48, 220, 255, 0.1);
+      font-size: 12px;
+      
+      &:hover {
+        background: rgba(48, 220, 255, 0.05);
+      }
+      
+      .ranking-cell {
+        flex: 1;
+        text-align: center;
+        color: rgba(255, 255, 255, 0.8);
+        
+        &:first-child {
+          flex: 1.2;
+        }
+        
+        &:nth-child(2) {
+          flex: 1.5;
+          text-align: left;
+        }
+      }
+    }
+  }
+}
+
+.station-ranking-panel {
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  background: rgba(0, 30, 60, 0.5);
+  border-radius: 6px;
+  
+  .ranking-table {
+    height: 100%;
+    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;
+    }
+    
+    .ranking-row {
+      display: flex;
+      padding: 6px 10px;
+      border-bottom: 1px solid rgba(48, 220, 255, 0.2);
+      font-size: 12px;
+      
+      &.header {
+        background: rgba(0, 100, 150, 0.4);
+        font-weight: bold;
+        color: #30dcff;
+        border-bottom: 1px solid rgba(48, 220, 255, 0.4);
+      }
+      
+      &:hover:not(.header) {
+        background: rgba(48, 220, 255, 0.1);
+      }
+      
+      .ranking-cell {
+        flex: 1;
+        text-align: center;
+        color: rgba(255, 255, 255, 0.9);
+        
+        &:first-child {
+          flex: 1.2;
+        }
+        
+        &:nth-child(2) {
+          flex: 1.5;
+          text-align: left;
+        }
+        
+        .header & {
+          color: #30dcff;
+        }
+      }
+    }
+  }
+}
+
+.polder-layer-controls {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  z-index: 1000;
+  pointer-events: auto;
+  
+  .toggle-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    background: rgba(0, 20, 40, 0.8);
+    border-radius: 6px;
+    
+    .toggle-text {
+      color: #fff;
+      font-size: 14px;
+      text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+    }
+    
+    .toggle-switch {
+      width: 44px;
+      height: 22px;
+      background: rgba(100, 100, 100, 0.5);
+      border-radius: 11px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      position: relative;
+      
+      .toggle-knob {
+        position: absolute;
+        left: 2px;
+        top: 2px;
+        width: 18px;
+        height: 18px;
+        background: #a3dcde;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+      }
+      
+      &.active {
+        background: rgba(48, 220, 255, 0.4);
+        box-shadow: 0 0 10px rgba(48, 220, 255, 0.3);
+        
+        .toggle-knob {
+          left: 24px;
+          background: #30dcff;
+          box-shadow: 0 0 8px rgba(48, 220, 255, 0.5);
+        }
+      }
+    }
+  }
+}
 </style>