水资源页面修改

src/views/map/index.vue

@@ -11,6 +11,7 @@
       :hoverPolder="state.hoverPolder"
       :showGate="state.showGate"
       :showHydrology="state.showHydrology"
+      :activeTab="state.activeTab"
       @showPolder="showPolderInfo"
       @hidePolder="hidePolderInfo"
       @selectDetail="selectPolderDetail"
@@ -154,6 +155,7 @@
         :showHydrologyDetail="state.showHydrologyDetail"
         @update:showGate="state.showGate = $event"
         @update:showHydrology="state.showHydrology = $event"
+        @update:activeTab="state.activeTab = $event"
       />
 
       <!-- 历史沿革内容 -->
@@ -238,6 +240,8 @@ const state = reactive({
   showGate: true,
   showHydrology: false,
   showHydrologyDetail: false,
+  // 当前选中的标签
+  activeTab: 'flood',
   // 当前圩区数据
   currentPolder: {
     name: '张西联圩',

src/views/waterStation/BusinessBg.vue

@@ -2,72 +2,76 @@
   <div class="business-bg">
     <!-- 圩区总览 -->
     <template v-if="!selectedPolderDetail">
-      <img src="@/assets/images/圩区.png" alt="圩区" />
-      <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>
-          <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>
+      <img :src="backgroundImage" alt="背景" />
+      
+      <!-- 只在防汛抗旱时显示的按钮 -->
+      <template v-if="activeTab === 'flood'">
+        <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>
+            <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>
-      <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>
-          <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 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>
+            <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>
-      <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 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>
-      </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 
+          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>
-      
-      <!-- 泵站 -->
-      <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 
+          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>
-      </div>
+      </template>
     </template>
     
     <!-- 孔巷联圩详情 -->
@@ -108,6 +112,10 @@ const props = defineProps({
   showHydrology: {
     type: Boolean,
     default: false
+  },
+  activeTab: {
+    type: String,
+    default: 'flood'
   }
 })
 
@@ -253,6 +261,14 @@ const currentImage = computed(() => {
   return konggangImage.value
 })
 
+const backgroundImage = computed(() => {
+  if (props.activeTab === 'resource') {
+    return new URL("@/assets/images/水资源.png", import.meta.url).href
+  } else {
+    return new URL("@/assets/images/圩区.png", import.meta.url).href
+  }
+})
+
 function selectHydrology(name) {
   selectedHydrology.value = name
   emit('showHydrologyDetail', true)

src/views/waterStation/WaterResource.vue

@@ -430,8 +430,9 @@ onMounted(() => {
         
         button {
           padding: 5px 15px;
-          border: 1px solid #ddd;
-          background: #fff;
+          border: 1px solid rgba(0, 191, 255, 0.3);
+          background: rgba(0, 20, 40, 0.6);
+          color: rgba(255, 255, 255, 0.8);
           border-radius: 4px;
           cursor: pointer;
           transition: all 0.3s ease;
@@ -440,6 +441,7 @@ onMounted(() => {
             background: #00BFFF;
             color: #fff;
             border-color: #00BFFF;
+            box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
           }
         }
       }
@@ -455,23 +457,25 @@ onMounted(() => {
       align-items: center;
       gap: 10px;
       padding: 10px;
-      background: #FFF3CD;
-      border: 1px solid #FFEEBA;
+      background: rgba(255, 87, 34, 0.1);
+      border: 1px solid rgba(255, 87, 34, 0.3);
       border-radius: 4px;
       
       .alert-icon {
         font-size: 20px;
+        color: #FF5722;
       }
       
       .alert-content {
         .alert-title {
           font-weight: bold;
           margin-bottom: 2px;
+          color: #FF5722;
         }
         
         .alert-message {
           font-size: 12px;
-          color: #666;
+          color: rgba(255, 255, 255, 0.8);
         }
       }
     }
@@ -487,26 +491,33 @@ onMounted(() => {
         grid-template-columns: 2fr 1fr 1fr 1fr;
         gap: 10px;
         padding: 10px;
-        background: #f5f5f5;
+        background: rgba(0, 30, 60, 0.8);
+        border: 1px solid rgba(0, 191, 255, 0.3);
         border-radius: 4px;
         font-weight: bold;
         font-size: 12px;
+        color: #00BFFF;
       }
       
       .users-body {
         max-height: 150px;
         overflow-y: auto;
+        background: rgba(0, 20, 40, 0.6);
+        border: 1px solid rgba(0, 191, 255, 0.2);
+        border-radius: 4px;
         
         .user-item {
           display: grid;
           grid-template-columns: 2fr 1fr 1fr 1fr;
           gap: 10px;
           padding: 10px;
-          border-bottom: 1px solid #eee;
+          border-bottom: 1px solid rgba(0, 191, 255, 0.1);
           font-size: 12px;
+          color: rgba(255, 255, 255, 0.9);
           
           &.over-limit {
-            background: #FFF5F5;
+            background: rgba(255, 87, 34, 0.1);
+            border-left: 3px solid #FF5722;
           }
           
           .user-status {
@@ -529,14 +540,14 @@ onMounted(() => {
         
         .result-label {
           font-size: 12px;
-          color: #666;
+          color: rgba(255, 255, 255, 0.8);
           margin-bottom: 5px;
         }
         
         .result-value {
           font-size: 20px;
           font-weight: bold;
-          color: #4CAF50;
+          color: #00BFFF;
         }
       }
     }
@@ -559,6 +570,7 @@ onMounted(() => {
         align-items: center;
         gap: 5px;
         font-size: 12px;
+        color: rgba(255, 255, 255, 0.8);
         
         .status-color {
           width: 12px;
@@ -567,14 +579,17 @@ onMounted(() => {
           
           &.red {
             background: #FF5722;
+            box-shadow: 0 0 8px rgba(255, 87, 34, 0.6);
           }
           
           &.yellow {
             background: #FFEB3B;
+            box-shadow: 0 0 8px rgba(255, 235, 59, 0.6);
           }
           
           &.green {
             background: #4CAF50;
+            box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
           }
         }
       }

src/views/waterStation/index.vue

@@ -218,7 +218,7 @@ const props = defineProps({
     default: false
   }
 })
-defineEmits(['update:showGate', 'update:showHydrology'])
+const emit = defineEmits(['update:showGate', 'update:showHydrology', 'update:activeTab'])
 
 const activeTab = ref('flood')
 
@@ -266,6 +266,7 @@ const isOverview = computed(() => {
 // 切换标签页
 function switchTab(tab) {
   activeTab.value = tab
+  emit('update:activeTab', tab)
 }
 
 // 执行动画