HeiLin/src/components/HydrologySimulationPanel.vue

<template>
  <div class="simulation-panel">
    <div class="timeline-section">
      <div class="timeline-card">
        <div class="timeline-body">
          <div class="timeline-row">
            <button class="play-btn" @click="togglePlay">
              <span v-if="isPlaying">⏸</span>
              <span v-else>▶</span>
            </button>
            <input 
              type="range" 
              class="timeline-slider" 
              :min="0" 
              :max="timeLabels.length - 1" 
              :value="currentTimeIndex"
              @input="onTimelineChange"
            />
          </div>
          <div class="timeline-labels">
            <span v-for="(label, index) in timeLabels" :key="index" class="timeline-label">{{ label }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="left-sidebar">
      <div class="data-card">
        <div class="card-header">
          <h3 class="card-title">预演条件设置</h3>
        </div>
        <div class="card-body">
          <div class="section-title">降雨情景选择</div>
          <div class="scenario-list">
            <div 
              v-for="(scenario, index) in scenarioList" 
              :key="index"
              class="scenario-item"
              :class="{ active: selectedScenario === scenario.value }"
              @click="selectScenario(scenario.value)"
            >
              <div class="scenario-radio" :class="{ checked: selectedScenario === scenario.value }"></div>
              <div class="scenario-name">{{ scenario.label }}</div>
            </div>
          </div>
          
          <div class="section-divider"></div>
          
          <div class="section-title">水库调度方案选择</div>
          <div class="scheme-list">
            <div 
              v-for="(scheme, index) in schemeList" 
              :key="index"
              class="scheme-item"
              :class="{ active: selectedScheme === scheme.value }"
              @click="selectScheme(scheme.value)"
            >
              <div class="scheme-radio" :class="{ checked: selectedScheme === scheme.value }"></div>
              <div class="scheme-name">{{ scheme.label }}</div>
            </div>
          </div>
          
          <button class="start-btn" @click="startSimulation">
            开始预演
          </button>
        </div>
      </div>
    </div>

    <div class="right-sidebar">
      <div class="chart-card">
        <div class="chart-card-header">
          <h4 class="chart-card-title">流域径流预演</h4>
        </div>
        <div class="chart-card-body">
          <div class="chart-subtitle">黑林水文站 —— 水位 / 流量预演过程</div>
          <div id="heilinChart" class="chart-container"></div>
        </div>
      </div>
      
      <div class="chart-card">
        <div class="chart-card-header">
          <h4 class="chart-card-title">小塔山水库预演</h4>
        </div>
        <div class="chart-card-body">
          <div class="chart-subtitle">小塔山水库 —— 入库流量 & 库水位预演</div>
          <div id="reservoirChart" class="chart-container"></div>
        </div>
      </div>
      
      <div class="chart-card">
        <div class="chart-card-header">
          <h4 class="chart-card-title">调度方案对比预演</h4>
        </div>
        <div class="chart-card-body">
          <div class="chart-subtitle">不同调度方案影响对比</div>
          <div id="comparisonChart" class="chart-container"></div>
        </div>
      </div>
      

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'HydrologySimulationPanel',
  props: {
    simulationTime: {
      type: Number,
      default: 0
    },
    simulationData: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['updateSimulationTime', 'updateSimulationData', 'updateScenarioAndRisk'],
  data() {
    return {
      heilinChart: null,
      reservoirChart: null,
      comparisonChart: null,
      selectedScenario: 'light',
      selectedScheme: 'current',
      currentTimeIndex: 0,
      heilinTimeData: [],
      reservoirTimeData: [],
      isPlaying: false,
      playInterval: null,
      scenarioList: [
        { label: '小雨情景（24h）', value: 'light' },
        { label: '中雨情景（24h）', value: 'moderate' },
        { label: '大雨情景（24h）', value: 'heavy' },
        { label: '24h 暴雨情景', value: 'storm24' },
        { label: '72h 暴雨情景', value: 'storm72' }
      ],
      schemeList: [
        { label: '现状调度（默认出库）', value: 'current' },
        { label: '提前泄洪（加大出库）', value: 'advance' },
        { label: '控制泄洪（减少出库）', value: 'control' }
      ],
      timeLabels: ['0h', '6h', '12h', '18h', '24h', '30h', '36h', '42h', '48h', '54h', '60h', '66h', '72h']
    }
  },
  computed: {
    heilinRiskClass() {
      if (this.selectedScenario === 'storm72') return 'danger'
      if (this.selectedScenario === 'storm24') return 'warning'
      if (this.selectedScenario === 'heavy') return 'attention'
      return 'normal'
    },
    heilinRiskText() {
      if (this.selectedScenario === 'storm72') return '超保证水位'
      if (this.selectedScenario === 'storm24') return '超警戒水位'
      if (this.selectedScenario === 'heavy') return '接近警戒'
      return '正常'
    },
    reservoirRiskClass() {
      if (this.selectedScenario === 'storm72' && this.selectedScheme === 'control') return 'danger'
      if (this.selectedScenario === 'storm24' && this.selectedScheme !== 'advance') return 'warning'
      if (this.selectedScenario === 'storm72' && this.selectedScheme === 'current') return 'warning'
      if (this.selectedScenario === 'heavy') return 'attention'
      return 'normal'
    },
    reservoirRiskText() {
      if (this.selectedScenario === 'storm72' && this.selectedScheme === 'control') return '超汛限水位'
      if (this.selectedScenario === 'storm24' && this.selectedScheme !== 'advance') return '超汛限水位'
      if (this.selectedScenario === 'storm72' && this.selectedScheme === 'current') return '超汛限水位'
      if (this.selectedScenario === 'heavy') return '接近汛限'
      return '正常'
    },
    riskLevelClass() {
      if (this.selectedScenario === 'storm72' || (this.selectedScenario === 'storm24' && this.selectedScheme === 'control')) return 'danger'
      if (this.selectedScenario === 'storm24' || (this.selectedScenario === 'heavy' && this.selectedScheme === 'control')) return 'warning'
      if (this.selectedScenario === 'heavy') return 'attention'
      return 'normal'
    },
    riskLevelText() {
      if (this.selectedScenario === 'storm72' || (this.selectedScenario === 'storm24' && this.selectedScheme === 'control')) return '危险'
      if (this.selectedScenario === 'storm24' || (this.selectedScenario === 'heavy' && this.selectedScheme === 'control')) return '警戒'
      if (this.selectedScenario === 'heavy') return '注意'
      return '正常'
    },
    conclusionText() {
      const scenario = this.scenarioList.find(s => s.value === this.selectedScenario)?.label
      if (this.selectedScenario === 'storm72') {
        if (this.selectedScheme === 'advance') {
          return `${scenario}下，建议提前泄洪，可有效控制库水位。`
        } else if (this.selectedScheme === 'control') {
          return `${scenario}下，控制泄洪将导致水库严重超汛限水位，建议立即加大泄洪。`
        } else {
          return `${scenario}下，现状调度将超汛限水位，建议提前泄洪。`
        }
      } else if (this.selectedScenario === 'storm24') {
        if (this.selectedScheme === 'advance') {
          return `${scenario}下，提前泄洪可有效控制库水位在汛限以下。`
        } else {
          return `${scenario}下，将超汛限水位，建议加大泄洪。`
        }
      } else if (this.selectedScenario === 'heavy') {
        return `${scenario}下，库水位接近汛限，建议关注水情变化。`
      } else {
        return `${scenario}下，水情平稳，可维持现状调度。`
      }
    }
  },
  computed: {
    currentTimeLabel() {
      return this.timeLabels[this.currentTimeIndex] || '0h'
    }
  },
  mounted() {
    setTimeout(() => {
      this.generateTimeData()
      this.initHeilinChart()
      this.initReservoirChart()
      this.initComparisonChart()
      this.updateMapData()
      this.emitScenarioAndRisk()
    }, 100)
  },
  beforeUnmount() {
    this.stopPlay()
    if (this.heilinChart) {
      this.heilinChart.dispose()
    }
    if (this.reservoirChart) {
      this.reservoirChart.dispose()
    }
    if (this.comparisonChart) {
      this.comparisonChart.dispose()
    }
  },
  methods: {
    selectScenario(value) {
      this.selectedScenario = value
      this.emitScenarioAndRisk()
    },
    selectScheme(value) {
      this.selectedScheme = value
      this.emitScenarioAndRisk()
    },
    emitScenarioAndRisk() {
      const scenario = this.scenarioList.find(s => s.value === this.selectedScenario)?.label || '小雨情景（24h）'
      const riskLevel = this.riskLevelText
      this.$emit('updateScenarioAndRisk', { scenario, riskLevel, selectedScenario: this.selectedScenario })
    },
    startSimulation() {
      this.currentTimeIndex = 0
      this.generateTimeData()
      this.$nextTick(() => {
        this.initHeilinChart()
        this.initReservoirChart()
        this.initComparisonChart()
        this.updateMapData()
      })
    },
    generateTimeData() {
      const { levelData, flowData } = this.getHeilinData()
      const { inflowData, levelData: reservoirLevelData } = this.getReservoirData()
      
      this.heilinTimeData = this.timeLabels.map((_, index) => ({
        waterLevel: levelData[index]?.toFixed(2) || '3.25',
        flow: flowData[index]?.toFixed(1) || '12.5',
        rainfall: this.getRainfallForTime(index)
      }))
      
      this.reservoirTimeData = this.timeLabels.map((_, index) => ({
        waterLevel: reservoirLevelData[index]?.toFixed(2) || '18.5',
        storage: this.getStorageForTime(reservoirLevelData[index])
      }))
    },
    getRainfallForTime(index) {
      const baseRain = 0.5
      let multiplier = 1
      if (this.selectedScenario === 'light') multiplier = 1.5
      else if (this.selectedScenario === 'moderate') multiplier = 3
      else if (this.selectedScenario === 'heavy') multiplier = 6
      else if (this.selectedScenario === 'storm24') multiplier = 12
      else if (this.selectedScenario === 'storm72') multiplier = 18
      
      const peakIndex = this.selectedScenario === 'storm72' ? 10 : 6
      const distance = Math.abs(index - peakIndex)
      const decay = Math.exp(-distance * 0.15)
      return (baseRain * multiplier * decay).toFixed(1)
    },
    getStorageForTime(level) {
      const baseStorage = 2000
      const levelDiff = (level || 18.5) - 18.0
      const storage = baseStorage + levelDiff * 300
      return storage.toFixed(1)
    },
    onTimelineChange(event) {
      this.stopPlay()
      this.currentTimeIndex = parseInt(event.target.value)
      this.$emit('updateSimulationTime', this.currentTimeIndex)
      
      if (this.heilinTimeData.length === 0 || this.reservoirTimeData.length === 0) {
        this.generateTimeData()
      }
      
      this.updateMapData()
      this.highlightChartPoint()
    },
    updateMapData() {
      const heilinData = this.heilinTimeData[this.currentTimeIndex] || {
        waterLevel: '3.25',
        flow: '12.5',
        rainfall: '0.5'
      }
      const reservoirData = this.reservoirTimeData[this.currentTimeIndex] || {
        waterLevel: '18.5',
        storage: '2350.8'
      }
      
      this.$emit('updateSimulationData', {
        heilinStation: heilinData,
        reservoir: reservoirData
      })
    },
    highlightChartPoint() {
    },
    togglePlay() {
      if (this.isPlaying) {
        this.stopPlay()
      } else {
        this.startPlay()
      }
    },
    startPlay() {
      this.isPlaying = true
      if (this.currentTimeIndex >= this.timeLabels.length - 1) {
        this.currentTimeIndex = 0
      }
      this.playInterval = setInterval(() => {
        if (this.currentTimeIndex < this.timeLabels.length - 1) {
          this.currentTimeIndex++
          this.$emit('updateSimulationTime', this.currentTimeIndex)
          this.updateMapData()
        } else {
          this.stopPlay()
        }
      }, 800)
    },
    stopPlay() {
      this.isPlaying = false
      if (this.playInterval) {
        clearInterval(this.playInterval)
        this.playInterval = null
      }
    },
    getHeilinData() {
      const baseLevel = 3.0
      const baseFlow = 10
      let levelOffset = 0
      let flowMultiplier = 1
      
      if (this.selectedScenario === 'light') {
        levelOffset = 0.2
        flowMultiplier = 1.2
      } else if (this.selectedScenario === 'moderate') {
        levelOffset = 0.5
        flowMultiplier = 1.8
      } else if (this.selectedScenario === 'heavy') {
        levelOffset = 0.8
        flowMultiplier = 2.8
      } else if (this.selectedScenario === 'storm24') {
        levelOffset = 1.2
        flowMultiplier = 4.2
      } else if (this.selectedScenario === 'storm72') {
        levelOffset = 1.5
        flowMultiplier = 5.5
      }
      
      const levelData = this.timeLabels.map((_, i) => {
        const peakIndex = this.selectedScenario === 'storm72' ? 10 : 6
        const distance = Math.abs(i - peakIndex)
        const decay = Math.exp(-distance * 0.15)
        return baseLevel + levelOffset * decay
      })
      
      const flowData = this.timeLabels.map((_, i) => {
        const peakIndex = this.selectedScenario === 'storm72' ? 10 : 6
        const distance = Math.abs(i - peakIndex)
        const decay = Math.exp(-distance * 0.12)
        return baseFlow + (flowMultiplier - 1) * 15 * decay
      })
      
      return { levelData, flowData }
    },
    getReservoirData() {
      const baseInflow = 20
      const baseLevel = 18.0
      let inflowMultiplier = 1
      let levelOffset = 0
      
      if (this.selectedScenario === 'light') {
        inflowMultiplier = 1.3
        levelOffset = 0.3
      } else if (this.selectedScenario === 'moderate') {
        inflowMultiplier = 1.8
        levelOffset = 0.6
      } else if (this.selectedScenario === 'heavy') {
        inflowMultiplier = 2.5
        levelOffset = 1.0
      } else if (this.selectedScenario === 'storm24') {
        inflowMultiplier = 3.8
        levelOffset = 1.5
      } else if (this.selectedScenario === 'storm72') {
        inflowMultiplier = 5.0
        levelOffset = 2.0
      }
      
      if (this.selectedScheme === 'advance') {
        levelOffset -= 0.4
      } else if (this.selectedScheme === 'control') {
        levelOffset += 0.4
      }
      
      const inflowData = this.timeLabels.map((_, i) => {
        const peakIndex = this.selectedScenario === 'storm72' ? 10 : 6
        const distance = Math.abs(i - peakIndex)
        const decay = Math.exp(-distance * 0.1)
        return baseInflow + (inflowMultiplier - 1) * 30 * decay
      })
      
      const levelData = this.timeLabels.map((_, i) => {
        const peakIndex = this.selectedScenario === 'storm72' ? 12 : 8
        const distance = Math.abs(i - peakIndex)
        const decay = Math.exp(-distance * 0.08)
        return baseLevel + levelOffset * decay
      })
      
      return { inflowData, levelData }
    },
    initHeilinChart() {
      if (document.getElementById('heilinChart')) {
        if (this.heilinChart) {
          this.heilinChart.dispose()
        }
        this.heilinChart = echarts.init(document.getElementById('heilinChart'))
        
        const { levelData, flowData } = this.getHeilinData()
        
        const option = {
          animation: true,
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['水位', '流量', '警戒水位', '保证水位'],
            textStyle: {
              color: '#7bbef6',
              fontSize: 10
            },
            top: 5
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '40px',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.timeLabels,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6',
              fontSize: 9
            }
          },
          yAxis: [
            {
              type: 'value',
              name: '水位(m)',
              nameTextStyle: {
                color: '#ffd93d',
                fontSize: 10
              },
              min: 2.5,
              max: 5.0,
              axisLine: {
                lineStyle: {
                  color: '#ffd93d'
                }
              },
              axisLabel: {
                color: '#ffd93d',
                fontSize: 9
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(123, 190, 246, 0.2)'
                }
              }
            },
            {
              type: 'value',
              name: '流量(m³/s)',
              nameTextStyle: {
                color: '#62f6fb',
                fontSize: 10
              },
              min: 0,
              max: 100,
              position: 'right',
              axisLine: {
                lineStyle: {
                  color: '#62f6fb'
                }
              },
              axisLabel: {
                color: '#62f6fb',
                fontSize: 9
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '水位',
              type: 'line',
              yAxisIndex: 0,
              data: levelData,
              lineStyle: {
                color: '#ffd93d',
                width: 2
              },
              itemStyle: {
                color: '#ffd93d'
              }
            },
            {
              name: '流量',
              type: 'line',
              yAxisIndex: 1,
              data: flowData,
              lineStyle: {
                color: '#62f6fb',
                width: 2
              },
              itemStyle: {
                color: '#62f6fb'
              }
            },
            {
              name: '警戒水位',
              type: 'line',
              yAxisIndex: 0,
              data: new Array(this.timeLabels.length).fill(4.0),
              lineStyle: {
                color: '#ffd93d',
                width: 1,
                type: 'dashed'
              },
              symbol: 'none'
            },
            {
              name: '保证水位',
              type: 'line',
              yAxisIndex: 0,
              data: new Array(this.timeLabels.length).fill(4.5),
              lineStyle: {
                color: '#ff6b6b',
                width: 1,
                type: 'dashed'
              },
              symbol: 'none'
            }
          ]
        }
        this.heilinChart.setOption(option)
      }
    },
    initReservoirChart() {
      if (document.getElementById('reservoirChart')) {
        if (this.reservoirChart) {
          this.reservoirChart.dispose()
        }
        this.reservoirChart = echarts.init(document.getElementById('reservoirChart'))
        
        const { inflowData, levelData } = this.getReservoirData()
        
        const option = {
          animation: true,
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['入库流量', '库水位', '汛限水位'],
            textStyle: {
              color: '#7bbef6',
              fontSize: 10
            },
            top: 5
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '40px',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.timeLabels,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6',
              fontSize: 9
            }
          },
          yAxis: [
            {
              type: 'value',
              name: '水位(m)',
              nameTextStyle: {
                color: '#ffd93d',
                fontSize: 10
              },
              min: 17,
              max: 21,
              axisLine: {
                lineStyle: {
                  color: '#ffd93d'
                }
              },
              axisLabel: {
                color: '#ffd93d',
                fontSize: 9
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(123, 190, 246, 0.2)'
                }
              }
            },
            {
              type: 'value',
              name: '流量(m³/s)',
              nameTextStyle: {
                color: '#62f6fb',
                fontSize: 10
              },
              min: 0,
              max: 200,
              position: 'right',
              axisLine: {
                lineStyle: {
                  color: '#62f6fb'
                }
              },
              axisLabel: {
                color: '#62f6fb',
                fontSize: 9
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '入库流量',
              type: 'line',
              yAxisIndex: 1,
              data: inflowData,
              lineStyle: {
                color: '#62f6fb',
                width: 2
              },
              itemStyle: {
                color: '#62f6fb'
              }
            },
            {
              name: '库水位',
              type: 'line',
              yAxisIndex: 0,
              data: levelData,
              lineStyle: {
                color: '#ffd93d',
                width: 2
              },
              itemStyle: {
                color: '#ffd93d'
              }
            },
            {
              name: '汛限水位',
              type: 'line',
              yAxisIndex: 0,
              data: new Array(this.timeLabels.length).fill(20.0),
              lineStyle: {
                color: '#3b82f6',
                width: 1,
                type: 'dashed'
              },
              symbol: 'none'
            }
          ]
        }
        this.reservoirChart.setOption(option)
      }
    },
    initComparisonChart() {
      if (document.getElementById('comparisonChart')) {
        if (this.comparisonChart) {
          this.comparisonChart.dispose()
        }
        this.comparisonChart = echarts.init(document.getElementById('comparisonChart'))
        
        const baseLevel = 18.0
        let levelOffset = 0
        
        if (this.selectedScenario === 'light') {
          levelOffset = 0.3
        } else if (this.selectedScenario === 'moderate') {
          levelOffset = 0.6
        } else if (this.selectedScenario === 'heavy') {
          levelOffset = 1.0
        } else if (this.selectedScenario === 'storm24') {
          levelOffset = 1.5
        } else if (this.selectedScenario === 'storm72') {
          levelOffset = 2.0
        }
        
        const currentData = this.timeLabels.map((_, i) => {
          const peakIndex = this.selectedScenario === 'storm72' ? 12 : 8
          const distance = Math.abs(i - peakIndex)
          const decay = Math.exp(-distance * 0.08)
          return baseLevel + levelOffset * decay
        })
        
        const advanceData = currentData.map(v => v - 0.4)
        const controlData = currentData.map(v => v + 0.4)
        
        const option = {
          animation: true,
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['现状调度', '提前泄洪', '控制泄洪'],
            textStyle: {
              color: '#7bbef6',
              fontSize: 10
            },
            top: 5
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '40px',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.timeLabels,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6',
              fontSize: 9
            }
          },
          yAxis: {
            type: 'value',
            name: '库水位(m)',
            nameTextStyle: {
              color: '#ffd93d',
              fontSize: 10
            },
            min: 17,
            max: 21,
            axisLine: {
              lineStyle: {
                color: '#ffd93d'
              }
            },
            axisLabel: {
              color: '#ffd93d',
              fontSize: 9
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(123, 190, 246, 0.2)'
              }
            }
          },
          series: [
            {
              name: '现状调度',
              type: 'line',
              data: currentData,
              lineStyle: {
                color: '#f97316',
                width: 2
              },
              itemStyle: {
                color: '#f97316'
              }
            },
            {
              name: '提前泄洪',
              type: 'line',
              data: advanceData,
              lineStyle: {
                color: '#10b981',
                width: 2
              },
              itemStyle: {
                color: '#10b981'
              }
            },
            {
              name: '控制泄洪',
              type: 'line',
              data: controlData,
              lineStyle: {
                color: '#a855f7',
                width: 2
              },
              itemStyle: {
                color: '#a855f7'
              }
            }
          ]
        }
        this.comparisonChart.setOption(option)
      }
    }
  }
}
</script>

<style scoped>
.simulation-panel {
  width: 100%;
  height: 100%;
}

.timeline-section {
  position: absolute;
  left: 390px;
  right: 460px;
  top: 120px;
  z-index: 5;
}

.timeline-card {
  width: 100%;
  background: rgba(0, 20, 40, 0.7);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

.timeline-body {
  padding: 10px 15px;
}

.timeline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.play-btn {
  width: 30px;
  height: 30px;
  background: rgba(0, 212, 255, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.5);
  border-radius: 4px;
  color: #62f6fb;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.play-btn:hover {
  background: rgba(0, 212, 255, 0.3);
  border-color: #62f6fb;
}



.timeline-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(0, 40, 80, 0.8);
  border-radius: 3px;
  outline: none;
  margin-bottom: 6px;
}

.timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.6);
  transition: all 0.2s ease;
}

.timeline-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.8);
}

.timeline-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.6);
}

.timeline-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 3px;
}

.timeline-label {
  font-size: 9px;
  color: #7bbef6;
  flex-shrink: 0;
}

.left-sidebar {
  position: absolute;
  left: 20px;
  top: 120px;
  width: 350px;
  z-index: 5;
}

.right-sidebar {
  position: absolute;
  right: 20px;
  top: 120px;
  bottom: 20px;
  width: 420px;
  z-index: 5;
  overflow-y: auto;
  padding-right: 5px;
}

.right-sidebar::-webkit-scrollbar {
  width: 6px;
}

.right-sidebar::-webkit-scrollbar-track {
  background: rgba(0, 20, 40, 0.5);
  border-radius: 3px;
}

.right-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.4);
  border-radius: 3px;
}

.right-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 255, 0.6);
}

.data-card {
  width: 100%;
  background: rgba(0, 20, 40, 0.7);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

.card-header {
  height: 50px;
  background-image: url('/src/assets/images/数据小标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6px 20px 0;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #e0fcff;
  margin: 0;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
  padding-left: 20px;
}

.card-body {
  padding: 15px;
  font-size: 16px;
  line-height: 1.6;
  margin-top: -10px;
}

.section-title {
  font-size: 14px;
  color: #7bbef6;
  margin: 5px 0 12px;
  font-weight: bold;
}

.scenario-list,
.scheme-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scenario-item,
.scheme-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 20, 40, 0.5);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.scenario-item:hover,
.scenario-item.active,
.scheme-item:hover,
.scheme-item.active {
  border-color: #62f6fb;
  background: rgba(98, 246, 251, 0.1);
}

.scenario-radio,
.scheme-radio {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 212, 255, 0.4);
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.scenario-radio.checked,
.scheme-radio.checked {
  background: #62f6fb;
  border-color: #62f6fb;
  position: relative;
}

.scenario-radio.checked::after,
.scheme-radio.checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000;
}

.scenario-name,
.scheme-name {
  color: #e0fcff;
  font-size: 13px;
  font-weight: bold;
}

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent);
  margin: 18px 0;
}

.start-btn {
  width: 100%;
  margin-top: 20px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
}

.start-btn:hover {
  background: linear-gradient(135deg, #0284c7, #0891b2);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6);
  transform: translateY(-2px);
}

.start-btn:active {
  transform: translateY(0);
}

.chart-card {
  width: 100%;
  background: rgba(0, 20, 40, 0.7);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
  margin-bottom: 15px;
}

.chart-card:last-child {
  margin-bottom: 0;
}

.chart-card-header {
  height: 40px;
  background-image: url('/src/assets/images/数据小标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3px 20px 0;
}

.chart-card-title {
  font-size: 15px;
  font-weight: bold;
  color: #e0fcff;
  margin: 0;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}

.chart-card-body {
  padding: 10px 15px 15px;
}

.chart-subtitle {
  font-size: 12px;
  color: #7bbef6;
  text-align: center;
  margin-bottom: 8px;
}

.chart-container {
  width: 100%;
  height: 180px;
}

.risk-assessment {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.risk-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(0, 30, 60, 0.6);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 4px;
}

.risk-label {
  color: #7bbef6;
  font-size: 13px;
  font-weight: bold;
}

.risk-status,
.risk-level {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.risk-status.normal,
.risk-level.normal {
  background: #22c55e;
  color: #fff;
}

.risk-status.attention,
.risk-level.attention {
  background: #f59e0b;
  color: #fff;
}

.risk-status.warning,
.risk-level.warning {
  background: #f97316;
  color: #fff;
}

.risk-status.danger,
.risk-level.danger {
  background: #ef4444;
  color: #fff;
}

.conclusion-section {
  margin-top: 5px;
  padding: 12px;
  background: rgba(0, 40, 80, 0.6);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 4px;
}

.conclusion-title {
  font-size: 13px;
  color: #62f6fb;
  font-weight: bold;
  margin-bottom: 8px;
}

.conclusion-text {
  font-size: 12px;
  color: #e0fcff;
  line-height: 1.6;
}
</style>