水文预演页面和水资源调配页面设计

src/components/HydrologySimulationPanel.vue

@@ -65,6 +65,25 @@
           </button>
         </div>
       </div>
+      
+      <div class="data-card mt-20">
+        <div class="card-header">
+          <h3 class="card-title">预设模拟</h3>
+        </div>
+        <div class="card-body">
+          <div class="preset-list">
+            <div 
+              v-for="(preset, index) in presetList" 
+              :key="index"
+              class="preset-item"
+              @click="selectPreset(preset.value)"
+            >
+              <img :src="preset.image" :alt="preset.label" class="preset-image" />
+              <div class="preset-name">{{ preset.label }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div class="right-sidebar">
@@ -143,6 +162,12 @@ export default {
         { label: '提前泄洪（加大出库）', value: 'advance' },
         { label: '控制泄洪（减少出库）', value: 'control' }
       ],
+      presetList: [
+        { label: '漫溢预演', value: 'overflow', image: '/src/assets/images/漫溢预演.png' },
+        { label: '溃坝预演', value: 'dambreak', image: '/src/assets/images/溃坝预演.png' },
+        { label: '台风预演', value: 'typhoon', image: '/src/assets/images/台风预演.png' },
+        { label: '洪水演进', value: 'flood', image: '/src/assets/images/洪水演进.png' }
+      ],
       timeLabels: ['0h', '6h', '12h', '18h', '24h', '30h', '36h', '42h', '48h', '54h', '60h', '66h', '72h']
     }
   },
@@ -206,9 +231,7 @@ export default {
       } else {
         return `${scenario}下，水情平稳，可维持现状调度。`
       }
-    }
-  },
-  computed: {
+    },
     currentTimeLabel() {
       return this.timeLabels[this.currentTimeIndex] || '0h'
     }
@@ -244,6 +267,9 @@ export default {
       this.selectedScheme = value
       this.emitScenarioAndRisk()
     },
+    selectPreset(value) {
+      console.log('选择预设模拟:', value)
+    },
     emitScenarioAndRisk() {
       const scenario = this.scenarioList.find(s => s.value === this.selectedScenario)?.label || '小雨情景（24h）'
       const riskLevel = this.riskLevelText
@@ -1139,6 +1165,51 @@ export default {
   transform: translateY(0);
 }
 
+.mt-20 {
+  margin-top: 20px;
+}
+
+.preset-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.preset-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: rgba(0, 20, 40, 0.5);
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.preset-item:hover {
+  border-color: #62f6fb;
+  background: rgba(98, 246, 251, 0.1);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
+}
+
+.preset-image {
+  width: 100%;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.preset-name {
+  color: #e0fcff;
+  font-size: 13px;
+  font-weight: bold;
+  text-align: center;
+}
+
 .chart-card {
   width: 100%;
   background: rgba(0, 20, 40, 0.7);